/*********************************************************************************************************************************
all.css
Version 2025.06.29
This stylesheet has the base css markups that are consistent among most websites.
Breakpoints
- Mobile Portrait: < 460
- Mobile Landscape: < 800
- Tablet Portrait: < 922 
- Tablet Landscape: < 1200
**********************************************************************************************************************************/


/*********************************************************************************************************************************
NORMALIZE FOR ALL PAGES
**********************************************************************************************************************************/

/******************************************************************************
FINAL CONSOLIDATED MASTER STYLESHEET
Strictly preserves all IDs, Classes, Variables, and Browser-Specific Hacks.
******************************************************************************/

/* 1. VARIABLES (TOKENS) */
:root {
  --font-main: 'Arial', 'Helvetica', sans-serif;
  --radius-sm: .6rem;
  --radius-md: 1rem;
  --radius-lg: 1.2rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 2px 6px rgba(0,0,0,.25);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.35);
  --color-bg: #f3f3f3;
  --color-text: #111111;
  --color-muted: #555;
  --color-border: #e5e5e5;
  --color-primary: #002868;
   
   --color-perforated: #ccc;
   
  --color-accent: #902020;
  --color-accent-dark: #750000;
 
  --color-gold: #CA9C2B;
  --color-gray: #999;
  --color-go:#228B22;
  
  --color-time: #002868;
  --color-location:#902020;
  --color-notes: #A34C00;

  
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.2rem; 
  --font-size-lg: 1.5rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --container: 1200px;
  --fold: .5em;
}

/* 2. GLOBAL RESET & BASE STYLES */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; height: 100%; scroll-behavior: smooth; overflow-y: scroll; }
body { min-height: 100%; line-height: 1.25; -webkit-font-smoothing: antialiased; min-height: 100vh; min-width: 300px; font-family: var(--font-main); font-size: var(--font-size-base); background: var(--color-bg); color: var(--color-text); font-weight: 300;

}
bod2y {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,  Arial, sans-serif;
}
body.common { background-color: var(--color-bg); }

/* 3. TYPOGRAPHY */
/* Keep headings at 100% */
h1, h2, h3, h4, h5, h6, caption { font-weight: 500; width: 100%; text-wrap: balance; line-height: 1.1; }

/* Let table cells size themselves naturally */

h1 { font-size: 1.8rem; letter-spacing: .1rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: .9rem; }
h6 { font-size: .8rem; }
p { overflow-wrap: break-word; margin-bottom: var(--space-5); color: var(--color-text); text-wrap: pretty; }
small { font-size: var(--font-size-xs); color: var(--color-muted); }
b, strong { font-weight: bold;}
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
hr {
    border: 0;
    border-top: 1px solid #cccccc; 
    margin-top: 30px;   
    margin-bottom: 30px; 
}
/* 4. UTILITIES & HELPERS */
.readable {max-width: 84ch; margin:0 auto 1rem auto; }
.tameform {max-width: 800px; margin:0 auto 1rem auto;padding:5px;} 


.checkout-divider {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #4b5563; /* Medium grey so it reassures without shouting */
  text-transform: uppercase;
  margin: 1.5rem 0 1rem 0;
}


.stackable {max-width: 85ch; max-width:450px; float:left; display:inline-block; margin-left: 0px; margin-right: auto;  }
.text-center { text-align: center; }
.text-muted { color: var(--color-muted); }
.hidden, .hide, .necessary  { display: none ; }
.wine { fill: #6a0000; }
.attention { color: red; }
.grayedout { filter: grayscale(1); }
.maketouchable { cursor: pointer;  }
.soldout { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.signature { font-family: 'Serendipity'; font-size: 2.75rem; margin: 0px; }
.breadcrumbs { font-size: 1.4rem; color: #C76B03; }
.indent {padding-left:2rem;}
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

/* 5. MEDIA (Images, Video, SVG) */
img, picture, video, canvas, svg { max-width: 100%; height: auto; display: block; }
.floatingimage { float: right; border-radius: 10px; width: 30%; max-width: 400px; }
img.floater { width: 25%; float: right; }
.video-medium { clear: both; margin: 0px auto; max-width: 450px; width: 95%; border-radius: 1rem; box-shadow: 0px 0px 5px 2px rgba(133,5,5,1); }
.slider-container { padding: 5px; }
.slider-container div { width: 100%; max-width: 425px; padding: 0px; display:inline-block;}
.slider-container img, .slider-container video { margin: 0px; box-shadow: 1px 1px 5px -1px rgba(0,0,0,1); border-radius: .5rem; width: 100%; max-width: 425px; }

/* 6. LINKS & LISTS */
a { text-decoration: none; color: var(--color-primary);width: max-content; }
a:hover { text-decoration: none; }
ul, ol {padding-left: var(--space-6);  margin-bottom: var(--space-4);}
li {
  margin-bottom: var(--space-1);/* Adds a tiny bit of breathing room between items */
}
progress { vertical-align: baseline; }
summary { display: list-item; }




/* 7. LAYOUT CONTAINERS & IDs */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }
.flex { display: flex; }
.grid { display: grid; }
.neck { top: 120px; position: sticky;} 

body.common .body_header { top: 0; left: 0; right: 0; 
position: -webkit-sticky; /* For older Safari */
  position: sticky;

width: 100%; display: block; padding: 0px; z-index: 1000; margin-bottom: 2px; box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.2); border-bottom: 1px solid #ccc; background-color: #fff;}


.self-center {
display: block;
margin:0px auto;align-self: center;
}

.page_title { text-align:center; margin:.5rem 0;} 

.splitbox { 
  display: flex; 
  flex-direction: column; 
  gap: 2rem; /* Handles both column and row gaps cleanly */
  align-items: center; /* Centers sections when stacked in a single column */
}

.splitbox section { 
  width: 100%; /* Allows section to expand up to max-width */
  max-width: 85ch; 
  flex: 1;
  display: flex; 
  flex-direction: column;
}

.splitbox section fieldset { 
  flex: 1; 
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1000px) { 
  .splitbox { 
    flex-direction: row; 
    align-items: stretch; /* Resets alignment so side-by-side boxes match height */
    justify-content: center; /* Centers the whole row if there's only 1 item */
  }

  /* Keeps multi-column boxes capped, but lets a single solo box stretch centered */
  .splitbox section:not(:only-child) {
    flex: 1 1 50%;
  }
}

/* ==========================================================================
   SITE FOOTER (Highly Optimized Layout)
   ========================================================================== */

/* 1. Base Footer Container */
.site-footer {

  background-color: #fff; /* Dark sleek background */
  color: #333;
  padding: 40px 20px 0px 20px;
  font-family: sans-serif; /* Native system font for speed */
clear: both;
  width:100%;   border-top: 1px solid #ccc; /* Thin separator line */
    border-bottom: 1px solid #ccc; /* Thin separator line */
}
.site-footer section { text-align:center;
}
/* 2. Central Wrapper Control */
.footer-wrapper {
  display: flex;
  flex-direction: column; /* Stacks columns vertically on mobile first */
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto; /* Centers the whole footer content block */
}

/* 3. Column Style Resets */
.footer-col h3 {
  font-size: 1.1rem;
  color: #000; /* Your accent yellow */

  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align:center;
  margin-bottom:1rem;
}

/* Cleaning up the UL/LI spacing based on your global reset setup */
.footer-col ul {
  list-style: none;
  padding: 0;
  padding-left: 0 !important;
  margin: 0;
}

.footer-col li {

}

/* 4. Link & Click Targets (Optimized for Mobile Thumbs) */
.footer-col a {
  color: #777;
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s ease;
  font-size: 0.95rem;
}

.footer-col a:hover,.footer-col a:focus {color: var(--color-notes);}

/* 5. Bottom Sub-Footer Bar */
.footer-bottom {
  max-width: 1200px;
  margin: 10px auto ;


  gap: 15px;
text-align:center;
  font-size: 0.85rem;
  color: #888888;
}

.footer-bottom a {
  color: #888888;
  text-decoration: none;
}

/* ==========================================================================
   MEDIA QUERY: Desktop Breakpoint (Snaps into 3 horizontal columns)
   ========================================================================== */
@media (min-width: 768px) {
  .footer-wrapper {
    flex-direction: row; /* Flips from vertical stack to a horizontal row */
    justify-content: space-between; /* Spreads columns evenly across the width */
  }

  .footer-col {
    flex: 1; /* Forces each of the 3 columns to take up equal width space */
    max-width: 300px; /* Prevents text strings from stretching too wide */
  }

  .footer-bottom {
    flex-direction: row; /* Flips the copyright/accessibility bar to a row */
    justify-content: space-between;
  }
}















#menu_main { max-width: 1000px; margin: 0px auto; min-width: 300px; }
#menu_main svg { background-image: url(https://www.wino.us/files/structure/menu-main-optimised.svg); background-size: 100% 100%; background-repeat: no-repeat; }
#menu_main .text { stroke: #000000; stroke-miterlimit: 10; stroke-width: 0.25; }
#menu_main rect { fill-opacity: 0; }

main.widescreen { width: 100%; border: 0px; min-height: 200px; padding: 0rem; margin: 0rem auto; }
main.hdtv { width: 100%; max-width: 1000px; min-height: 200px; padding: 0rem 0rem 1.5rem; margin: 0rem auto; }
main.threepanel { display: flex; justify-content: space-between; width: 100%; margin: 15px auto; }
main.threepanel aside { flex: 1; margin: 0; padding: 0px; border-radius: 1rem; color: #000; max-width: 1000px; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; }
main.threepanel .aside-left { order: 1; }
main.threepanel .aside-right { order: 3; }
main.threepanel article { order: 2; max-width: 1000px; flex-basis: 1000px; background-color: #fff; margin: 0 .5rem; color: #000; box-shadow: 0px 1px 7px -1px rgba(0,0,0,0.3); border-radius: 1rem; }
main.threepanel .info { background-color: #fff; color: #000; box-shadow: 0px 1px 7px -1px rgba(0,0,0,0.3); }
aside.shade { box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3); }

/* ==========================================================================
   Medium Screens (1251px to 1700px)
   Gives sidebars breathing room and lets the middle article narrow smoothly.
   ========================================================================== */
@media screen and (min-width: 1401px) and (max-width: 1700px) {
  main.threepanel {
    gap: 1rem; /* Adds clean spacing between panels instead of relying only on margins */
  }

  main.threepanel aside {
    /* Give sidebars a solid width (e.g. 260px - 300px) so they don't get squished */
    flex: 0 0 300px; 
  }

  main.threepanel article {
    /* Allows article to shrink down naturally while taking up remaining space */
    flex: 1 1 auto; 
    min-width: 0; /* Prevents long code/text inside article from breaking the flex container */
    max-width: none; 
    margin: 0;
  }
}
@media screen and (max-width: 1400px) { main.threepanel { display: block; margin: 10px auto; } main.threepanel article { margin: 0rem auto; } main.threepanel aside { margin: 1rem auto; box-shadow: 0px 1px 7px -1px rgba(0,0,0,0.3); }.neck { top: 120px; } }


/* 8. FORMS & INPUTS */
form { text-align: left; }
input, button, textarea, select, optgroup, option { font: inherit; outline: 0; box-sizing: border-box; }
input, select, textarea, option { display: block; width: 100%; padding: .6rem; padding-left:1rem; border: 1px solid #d1d5db; border-radius: .5rem; background-color:var(--color-bg) ; color: #000; font-size: 1.2rem; }
input:invalid, textarea:invalid { color: red; }

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-appearance: none; -webkit-text-fill-color: #0B44EF;   box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25); }



input:focus, textarea:focus{ outline: none; /* Removes default browser outline */
    border-color: #69C; background-color:#fff ; /* Match your fieldset blue */
    /* Creates a soft, colored halo around the box */
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25);}

label { font-size: 1.2rem; color: #000; font-weight: 500;  display: block; }
label em { color: var(--color-accent); font-size: .8rem; }
label p { font-size: .8rem; }
label p { font-size: .8rem; }

fieldset { border-radius: 1rem; border: #69C solid 3px; padding: 1rem 1rem 2rem 1rem; display: block; margin: 15px 5px; font-size: 14px; background-color:#fff;  }
fieldset legend { font-size: 1.25rem; text-align: left; margin-left:1rem;padding: .2rem .6rem ;border: #69C solid 2px; border-radius: .5rem;color:#fff;background-color:#69C;  }
fieldset label { display: block; text-align: left; width: auto; font-weight: bold; margin-top: 8px; font-size: 16px; }

.field-group {
  display: flex;
  flex-direction: column;
             /* Spacing BETWEEN label, input, and small */
  margin-bottom: 1rem;   /* Spacing BETWEEN each form block */
}

.form-hint {color:#777;font-weight: normal;}

/* Radio & Checkbox */
input[type="radio"] { box-shadow: none; border: none; transform: scale(2); display: inline-block; width: 2rem; outline: none; }
input[type="radio"]:focus { box-shadow: none; color:red; }
input[type="radio"] + span { color: #7393B3; font-size: 1.1rem; line-height:2rem;margin-left:0.6rem; }
input[type="radio"]:checked + span { color: black; }
input[type='checkbox'] { display: inline-block; width: 2rem; height: 2rem; outline: none; background: #EBECF0; border-radius: .5rem; border: 2px solid #000080; box-shadow: inset 1px 1px 2px #000080; }
input[type='checkbox']:checked { background: var(--color-primary); }
input[type='checkbox'] + span { display: inline-block; position: relative; top: -.75rem; }

/* Specialized Inputs */
input[type="time"], input[type="date"] { width: 10em; border: 3px black solid; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
::placeholder, ::-webkit-input-placeholder, :-ms-input-placeholder, ::-moz-placeholder {color: #aaa;  font-style: italic; }

/* Standard (Modern Browsers) */
::placeholder { 
  color: #aaa; 
  font-style: italic; 
  opacity: 1; /* Firefox lowers placeholder opacity by default, this fixes it */
}

/* Chrome, Safari, Edge, Opera */
::-webkit-input-placeholder { 
  color: #aaa; 
  font-style: italic; 
}

/* Firefox 19+ */
::-moz-placeholder { 
  color: #aaa; 
  font-style: italic; 
  opacity: 1;
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder { 
  color: #aaa; 
  font-style: italic; 
}

/* Microsoft Edge (Legacy) */
::-ms-input-placeholder { 
  color: #aaa; 
  font-style: italic; 
}


input[name="username"] {width: 0px !important;height: 0px !important;padding: 0 !important;border: 0 !important;margin: 0 !important;overflow: hidden !important;}

.form_message_error { color: #900; height: 2.5rem; text-align: left; font-size: 1.8rem; font-weight: bold; }
#form_message_success { color: #009700; text-align: center; font-size: 1.4rem;  border: 3px dashed #009700; border-radius: 2rem;padding:1rem; }
#eventsearch { width: 100%; background-color: #fff9e6; justify-content: center; align-items: center; display: flex; align-content: center; flex-wrap: wrap; gap: .6rem; flex-direction: row; padding: 5px 0px 10px 0px; box-shadow: inset 0px -5px 10px -5px rgba(0,0,0,.2); border-bottom: 1px solid #ccc; }

/* 9. BUTTONS */
button, [type='button'], [type='reset'], [type='submit'] .btn { -webkit-appearance: button; font: inherit; }
button,button[type="submit"], .link_button { 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: auto;
  margin-top: 0.2rem;
  padding: 0.8rem 1.5rem;
  
  /* Typography */
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1rem;
  text-align: center;
  text-decoration: none;
  
  /* Styling & Borders */
  border: 0;
  border-radius: 0.6rem;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  
  /* Shadows & Depth */
  box-shadow: 
    inset 1px 2px 2px 1px rgba(255, 255, 255, 0.4),
    1px 1px 2px 0px rgba(0, 0, 0, 0.4),
    inset -1px -1px 2px 1px rgba(0, 0, 0, 0.2);
    
  /* Performance Transitions */
  transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
button:hover:not(:disabled):not(.disabled),
input[type="submit"]:hover:not(:disabled):not(.disabled),
a.link_button:hover:not(.disabled) {
  transform: translateY(-1px);
  scale: 1.02;
  filter: brightness(110%);
}

button:active:not(:disabled):not(.disabled),
input[type="submit"]:active:not(:disabled):not(.disabled),
a.link_button:active:not(.disabled) {
  transform: translateY(0px);
  scale: 0.98;
  filter: brightness(95%);
  transition: transform 0s, scale 0s, filter 0s, box-shadow 0s;
  box-shadow: 
    #555 0 0 0 1px, 
    rgba(255, 255, 255, 0.1) 0 1px 1px 0 inset, 
    rgba(0, 0, 0, 0.5) 0 1px 2px 0, 
    rgba(0, 0, 0, 0.5) 0 1px 2px 0 inset, 
    0 2px 6px -1px rgba(0, 0, 0, 0.1);
}

button[type="submit"] { background-color: #228B22; color: #FFF;}
button[type="submit"]:hover{  }

input:user-invalid,textarea:user-invalid {
    border: 2px solid red;
    background-color: #ffcccc;
}
.btn--nospace { font-size: 0.8rem; padding: 0 0.4rem;border-radius:.5rem;line-height:1.5; display: inline-flex; align-items: center; justify-content: center;}
.btn--tight { font-size: 0.8rem; padding: 0 0.4rem;border-radius:.5rem;line-height:1.7;}
.btn--small { font-size: 0.85rem; padding: .3rem;border-radius:.5rem;line-height:1.8; }
.btn--medium { font-size: 1rem; padding: .5rem; border-radius:.5rem;}
.btn--large { font-size: 1.5rem; padding: .5rem;border-radius:.5rem;}
.btn--huge { font-size: 1.85rem;border-radius:.5rem; }

.btn--subtle {border:1px solid #ccc; }
.btn--subtle:active, .btn--subtle:hover {border:1px solid #777; }


.bg--yellow { background-color: #F2CF66;  color: #000;}
.bg--yellow:active { background-color: #D1B358;}
.bg--grass { background-color: #82BF56; color: #FFF;}
.bg--grass:active { background-color: #578934; }
.bg--jungle { background-color: #284420; color: #FFF;}
.bg--jungle:active { background-color: #284420; }

.bg--go { background-color: var(--color-go);color: #FFF; }


.bg--green { background-color: #52C11F; color: #FFF;}
.bg--green:active { background-color: #49ab1b; }
.bg--forest { background-color: #228B22;color: #FFF; }
.bg--forest:active { background-color: #0B2E0B; }
.bg--sky { background-color: #3498DB; color:#fff}
.bg--sky:active { background-color: #16547e; }
.bg--blue { background-color: #0B44EF; background-image: linear-gradient(350deg, #0939c8, #0B44EF, #1f54f5); color: #FFF;}
.bg--blue:active { background-color: #0a3dd7; }
.bg--navy { background-color: #002868; }
.bg--pink { background-color: #FFC0CB;color: black; }
.bg--pink:active { background-color: #FF69B4; }

.bg--linen { background-color: #FAFAD2;color: black; }
.bg--linen:hover { background-color: #DDDDB6; }
.bg--purple { background-color: #991BE2; background-image: linear-gradient(350deg, #8017be, #991BE2, #a330e6); color: #FFF; }
.bg--purple:active { background-color: #8a18cb; }
.bg--gray-dark { background-color: #3F4351; background-image: linear-gradient(350deg, #2d303a, #3F4351, #4a4f5f); }
.bg--gray-dark:active { background-color: #343743; }
.bg--gray { background-color: #6D6F7F; background-image: linear-gradient(350deg, #5a5c69, #6D6F7F, #797b8c); }
.bg--gray:active { background-color: #616371; }
.bg--gray-light { background-color: #E6EAEF; background-image: linear-gradient(350deg, #cdd5df, #E6EAEF, #f6f7f9); color: black; }
.bg--gray-light:active { background-color: #d6dde5; color: black; }
.bg--white { background-color: #fff; color: black; }
.bg--white:active { background-color: #ccc; color: black; }
.bg--candy { background-color: #FF006A; background-image: linear-gradient(350deg, #d60059, #FF006A, #ff1a79); }
.bg--candy:active { background-color: #e6005f; }
.bg--red { background-color: #990000; color: #fff; }

/* Optimized Continuous Multi-Color Glow Button */
.btn--glow {border: none;outline: none;color: #000;background: #fff;cursor: pointer;border-radius: 10px;transition: transform 0.2s ease;animation: kf-rainbowGlow 8s linear infinite;}


 .smallnote {
 font-size: .8rem;
    color: #718096;
    line-height: 1;
    
    padding-left: 1rem;
 }


/* */
.custom-details {
color:var(--color-muted);
}
.custom-details summary {
  list-style: none;             /* Fixes Firefox/Standard */
  cursor: pointer;
margin:0px; padding:0px;
  display: flex;                /* Perfect control over alignment */
  justify-content: space-between;
  align-items: center;

}

.custom-details summary::-webkit-details-marker {
  display: none;                /* Fixes Legacy Safari/Chrome */
}

/* 2. Add your own uniform indicator arrow that looks identical everywhere */
.custom-details summary::after {
  content: '';
  
  transition: transform 0.2s ease;
}


.custom-details[open] summary::after {
  transform: rotate(90deg);
}

/* 4. Style your inner content panel safely */
.custom-details .summary-content {

}
/* 10. TABLES */
table { border-collapse: collapse; border-color: currentcolor; border-spacing: 0; }
th, td {  padding: var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; }
.tight {width: 1%; white-space: nowrap;}


table.info { text-shadow: 1px 1px 0px #fff; background: #C7D2E7; border-radius: 3px; box-shadow: 0 1px 2px #C7D2E7; color: #000; width: 100%; }
table.info th { padding: 11px 15px 12px 15px; border-bottom: 1px solid #C7D2E7; background: linear-gradient(to bottom, #E4E9F1, #C7D2E7); font-weight: bold; }


table.info th:first-child { text-align: left; padding-left: 20px; }
table.info tr:first-child th:first-child { border-top-left-radius: 3px; background-color: #666; }
table.info tr:first-child th:last-child { border-top-right-radius: 3px; background-color: #666; }
table.info tr { text-align: left; padding-left: 20px; }
table.info td:first-child { text-align: left; padding-left: 10px; border-left: 0; }
table.info td { padding: 5px 5px 5px 10px; border-top: 1px solid #ffffff; border-bottom: 1px solid #C7D2E7; border-left: 1px solid #C7D2E7; background: #ffffff; }
table.info tr.even td { background: #f6f6f6; }
table.info tr:last-child td { border-bottom: 0; }
table.info tr:last-child td:first-child { border-bottom-left-radius: 3px; }
table.info tr:last-child td:last-child { border-bottom-right-radius: 3px; }
table.info tr:hover td { background: #e3e8f3; }
table.info tr td:hover { background: #C7D2E7; }
table.info a:link, table.info a:visited { color: #666; font-weight: bold; text-decoration: none; }
table.info a:active, table.info a:hover { color: #bd5a35; }




table.clearinfo {  border-radius: 3px;  color: #000; }
table.clearinfo th { padding: .5rem .25rem 0rem .25rem; border-bottom: 1px solid #C7D2E7;  font-weight: bold; background: #C7D2E7; }
table.clearinfo th:first-child { text-align: left;  }
table.clearinfo tr:first-child th:first-child { border-top-left-radius: 5px; }
table.clearinfo tr:first-child th:last-child { border-top-right-radius: 5px;  }
table.clearinfo tr { text-align: left; padding-left: .5rem; }
table.clearinfo td:first-child { text-align: left; padding-left: .5rem; border-left: 0; }
table.clearinfo td { padding:2px; border-top: 1px solid #ffffff; border-bottom: 1px solid #C7D2E7; border-left: 1px solid #C7D2E7; background: #ffffff; }
table.clearinfo tr.even td { background: #f6f6f6; }
table.clearinfo tr:last-child td { border-bottom: 0; }
table.clearinfo tr:last-child td:first-child { border-bottom-left-radius: 5px; }
table.clearinfo tr:last-child td:last-child { border-bottom-right-radius: 5px; }
table.clearinfo tr:hover td { background: #e3e8f3; }
table.clearinfo tr td:hover { background: #C7D2E7; }
table.clearinfo a:link, table.info a:visited { color: #666; font-weight: bold; text-decoration: none; }
table.clearinfo a:active, table.info a:hover { color: #bd5a35; }
table.clearinfo tr:last-child td{}


/* 11. COMPONENTS (Events, Tiles, Marquee, Accordion, etc.) */
article { text-align: left; margin-top: 0px; width: 100%; border-radius: 1rem; padding-bottom: 2rem; clear: both;}
article header.cover { position: relative; min-height: 3rem; margin-bottom:1rem; padding:1rem;}
article header.cover img { position: relative; width: 100%;  }
header.cover video { width: 100%; border-radius: 1rem; width:100%;}
article header h1 { margin: 0px; }
article header h2 { color: #3F3F3F; }
article section { }

.testbox { position: fixed; bottom: 0px; right: 0px; min-width: 200px; background-color: #eee; border: 1px solid black; padding: 5px; }
.tooltip { position: absolute; background-color: blue; color: white; padding: 10px; z-index: 10000; font-size: 1rem; border-radius: 1rem; opacity: 0; transition: opacity 1s; font-weight: bold; }
.discount { margin: 1rem ; border: 4px dashed var(--color-notes); background-color: #fff; border-radius: 1rem; padding: 1rem; font-size: .9rem; width: 100%; max-width: 325px; }
.gobottom { position: fixed; bottom: 0px; right: 0px; min-width: 200px; background-color: #fff; border: 3px dashed #FFD700; margin: 5px; border-radius: 1rem; padding: .75rem; font-size: .9rem; z-index: 100; }
.salesearch { border: 3px dashed var(--color-go); background-color: #fff; margin: 5px; border-radius: 1rem; padding: .8rem; font-size: .8rem; float:right; margin:5px;text-align:center;}
menu { display: flex; list-style: none; flex-wrap: wrap; gap: .6rem; justify-content: center; align-items: center; align-content: center; }
.thumbs img { width: 5rem; display: inline; border-radius: 1rem; cursor: pointer; }
.tile img { width: 7rem; display: inline-block; border-radius: 1rem; cursor: pointer; box-shadow: 0px 1px 2px 0px rgba(144,144,144, 1); }

.flex-thumbs { justify-content: center; align-items: center; padding: 0rem .5rem 1rem .5rem; margin: .5rem auto; display: flex; align-content: center; flex-wrap: wrap; border-radius: 1rem; border: 2px solid #ddd; background-color: #fff; gap: .6rem; flex-direction: row; position: relative;width:100%; }
.flex-list { justify-content: center; align-items: center; padding: 0rem .5rem 1rem .5rem; margin: .5rem auto; display: flex;  flex-direction: column;   justify-content: center;width:100%; }
.flex-row { flex-direction: row;  justify-content: right;border:1px solid black;  justify-content: center; align-items: center;  width:100%; justify-content: center; align-items: center; padding: 0rem .5rem 1rem .5rem; margin: .5rem auto; display: flex; align-content: center; flex-wrap: wrap; border-radius: 1rem; border: 2px solid #ddd; background-color: #fff; gap: .6rem; position: relative;width:100%; } 

.tray {border-radius: 1rem; background-color:#fff; border:1px solid #ccc; max-width:1200px; margin:2rem auto; padding:1rem; text-align:center;}

.flex-thumbs h1, .flex-thumbs h2 { width: 100%; text-align: center; margin: 0px 0px .5rem; padding: 3px; color: #000; }
.tile2 { background-color: #fff; cursor: pointer; color: #999; font-size: 1rem; padding: 10px; border-radius: 1rem; height: 10rem; width: 10rem; box-shadow: rgba(50, 50, 93, 0.25) 0px 20px 50px -20px, rgba(0, 0, 0, 0.3) 0px 20px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; transition: all 0.4s; }
.tile2:hover { color: #000; scale: 1.01; box-shadow: rgba(50, 50, 93, 0.25) 0px 20px 50px -20px, rgba(0,102,255,1) 0px 10px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; }
.porthole { display: flex; align-content: center; flex-wrap: wrap; gap: .25rem; }
.porthole img { display: inline; border-radius: 50%; width: 6rem; transition: all 0.4s; }
.porthole img:hover { scale: 1.05; }
.placard { background-color: #fff; width: 11rem; height: 11rem; cursor: pointer; border-radius: .3rem; color: #999; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; transition: 0.8s ease-out; text-align: center; }
.placard:hover { box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 6px -1px; }

/* Tabs */
div.events_filter { position: sticky; z-index:100;}

div.tabs { max-width: 8000px; width: 100%; background-color: var(--color-bg);padding:0px; }
.tabs ul { list-style-type: none; margin: 0; padding: 0; }
.tabs input[type=radio] { display: none; }
.tabs .tab { font-size: 1.5rem; white-space: nowrap; text-align: center; }
.tabs .tab label { display: inline-block; margin-right: .1rem; margin-bottom: -1px; padding: .75rem 0rem; cursor: pointer; background: var(--color-primary); font-size: 1.75rem; letter-spacing: 1px; color: #fff; transition: background ease 0.3s; width: 30%; max-width: 200px; }
.tabs .tab label:hover { background-color: var(--color-accent); }
.tabs input:nth-child(1):checked ~ .tab label:nth-child(1), .tabs input:nth-child(2):checked ~ .tab label:nth-child(2), .tabs input:nth-child(3):checked ~ .tab label:nth-child(3), .tabs input:nth-child(4):checked ~ .tab label:nth-child(4) { color: #000; background: #fff;  }
ul.sections {margin:0px; border:0px solid red;margin:0px;padding:0px;}
.tabs .sections li { display: none; min-height: 50px; background-color: #FFF; position: relative; color: #111; overflow-y: auto;  }
.tabs input:nth-child(1):checked ~ .sections li:nth-child(1), .tabs input:nth-child(2):checked ~ .sections li:nth-child(2), .tabs input:nth-child(3):checked ~ .sections li:nth-child(3), .tabs input:nth-child(4):checked ~ .sections li:nth-child(4) { display: block; margin:0px;padding:5px;}
.tabs div { text-align: center; }

/* Event Lists */
.button_state div { display: inline-block; padding: 1rem 0rem; margin: .5rem; width: 200px; background-color: #fff; border: 1px solid #ccc; border-radius: 10px; font-size: 1.75rem; color: #000; cursor: pointer; }
.button_state div:hover, .events_button div:hover { background-color: #CCDBF0; }
.events_button { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.events_button div { padding: 1rem .1rem; width: 175px; background-color: #fff; border: 1px solid #ccc; border-radius: 10px; font-size: 1.1rem; color: #000; cursor: pointer; text-align: center; }
.events_button2 { margin: 0px auto; width: 100%; }
.events_button2 div { display: inline-block; padding: 1rem .1rem; margin: .25rem; width: 175px; background-color: #fff; border: 1px solid #ccc; border-radius: 10px; font-size: 1.1rem; color: #000; cursor: pointer; text-align: center; font-weight: bold; }
.events { display: flex; align-content: center; gap: 1rem; background-color: #fff; padding: 50px; justify-content: center; flex-wrap: wrap; }

.event_list { width: 100%; text-align: center; display: flex; list-style: none; flex-wrap: wrap; gap: 2rem; justify-content: center; align-items: center; align-content: center; }
.event_list .eventlink { position:relative;width: 100%; max-width: 475px; background-color: #fff; border-radius: 10px; text-align: left; height: 8rem; max-height: 150px;overflow: hidden; }
.event_list div.event { position:relative;width: 100%; max-width: 475px; background-color: #fff; border-radius: 10px; text-align: left; border: 1px solid #ccc; height: 8rem; max-height: 150px;overflow: hidden; }
.event_list div.event:hover {border: 1px solid var(--color-primary); }
.event_list div.event img { height: 100%; border-radius: 10px 0px 0px 10px; float:left; margin-right: 1rem; z-index: 0; }
.event_list div.event div.text { position: relative; padding: 0.5rem; }

.event_list .event_name  { margin: 0px; text-align: left; color: #000; font-size: 1.1rem; }
.event_list .event_location { margin: 0px; width: 100%; color:var(--color-location); text-align: left; font-weight: bold; font-size:var(--font-size-base);}
.event_list .event_time { width: 100%; padding:5px;margin: 0px 0px .5rem; text-align: right; color:var(--color-time);font-size: 1.1rem; font-weight: bold; }
.event_list div.event section { color: #999; font-size: .7rem; margin: 0px; padding: 0px; }
.event_list .event_alerts { position:absolute; right:0; bottom:0;margin: 0px; text-align: right; color: #B50000; padding:5px; }
.event_list .event_count2 { margin: 0px; text-align: right; color: #777; font-size: .8rem;font-style: italic;padding:5px;}
.event_list .event_count{ position:absolute; right:0; bottom:0;margin: 0px; text-align: right; color: var(--color-notes); padding:5px; font-style: italic;font-size: .9rem; }

.event_list div.event h6 { margin: 0px; color: #d4af37; text-align: left; }
.event_list div.grayout { filter: grayscale(1); background-color: #ddd; }
.event_list img.soldout { height: 100%; border-radius: 10px 0px 0px 10px; position: absolute; top: 2px; left: 2px; z-index: 3; }
.event_list .newdate { width: 100%; margin: 0 0 .25rem; padding: .5rem; background-color: var(--color-primary); color: white; position: relative; font-size: 1.75rem; font-weight: normal; letter-spacing: .25rem; }

.event_list div.event:hover {  }


.event-name {margin:0px; padding:0px; var(--font-size-xl); text-align: center; }
.event-location {text-align:center; font-size:var(--font-size-lg); margin-top:1rem; padding:0px; color:var(--color-location);}
.event-timetable {text-align:center; font-size:var(--font-size-md); color:var(--color-time);text-align:center;display:block;}
.event-synopsis {}

.event-address {display: flex;
  align-items: center;     
justify-content: flex-start;
  gap: 15px;   
  width: 100%;}


.white-3d-box {
background-color: #ffffff;
  border-radius: 10px;
  /* Soft grey border to define edge */
  border: 1px solid #e0e0e0;
  /* Top-left light shadow, bottom-right dark shadow */
-webkit-box-shadow: inset -2px -1px 16px -3px #DBDBDB; 
box-shadow: inset -2px -1px 16px -3px #DBDBDB;
}

.eventtypes { 
  display: flex;         /* Activates flex layout */
  flex-wrap: wrap;       /* Allows boxes to drop to next line if screen is narrow */
  gap: 1rem;             /* Perfectly handles the space between boxes */
min-width: 0;
  justify-content: center; /* Centers horizontally (Main Axis) */
  align-items: center;     /* Centers vertically (Cross Axis) */
margin:1rem;

}

.eventtype {
position:relative;
 overflow: hidden; 
  border-radius: 1rem;
  min-width: 0;
  border: 2px solid #fff;
-webkit-box-shadow: inset -2px -1px 7px -2px #999; 
box-shadow: inset -1px -1px 7px -2px #999; 
 overflow-wrap: break-word; or word-break: break-allborder-radius: 1rem;width:100%;padding:0px; max-width:12rem; height:14rem; background-color:#F0F8FF;
background-color:var(--color-bg);

}

.eventtype .eventtype_img {  width:100%;   }

 .eventtypes .selected, .eventtype:hover { box-shadow: 0px 1px 4px 2px var( --color-primary);
   border: 2px solid var( --color-primary);
 }

.eventtype .eventtype_text {    white-space: normal;  padding:.5rem; text-align:left;    /* Ensures wrapping is enabled */
  overflow-wrap: break-word; /* Breaks long words if they overflow */
  word-break: break-word;    width:100%;font-size:.8rem;
  color:#555;  

}
.eventtype .eventtype_title {  font-size:1rem;font-weight:bold; text-align:center;  font-style:none; color:#000;}
.eventtype .eventtype_alerts {height:2rem;bottom:1rem;right:0px; position:absolute; text-align:left;padding:0px;padding-right:1rem; color:red;  font-size:1rem; }
.eventtype .eventtype_sale {font-weight:bold;color:green; text-align:left;}


div.currentselection { width: 100%; margin: 0; padding: 1rem 0; position: relative; font-size: 1.5rem; font-weight: normal; text-align: center; letter-spacing: 0rem; background-color: var(--color-accent); color: #fff; }
.eventlist_otheroptions { width: 100%; margin: 0; padding: 0 0 .5rem 0; position: relative; font-size: 1.5rem; font-weight: normal; text-align: center;background-color: #fff; border-bottom:2px solid var(--color-primary); }
.eventlist_otheroptions button {font-size:1rem;background-color: #fff; color: #000;}
.city-area { width: 100%; text-align: center; max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.city-area div { float: left; max-width: 175px; width: 100%; border: 1px solid black; border-radius: 5px; margin: 5px; color: black; }
.city-area h2 { margin: 0px; padding: .25rem 0rem; border-bottom: 1px solid black; background-color: var(--color-primary); border-radius: 4px; color: white; font-size: 1.1rem; }
.cities { display: inline-block; }
.cities div { display: inline-block; border: 1px solid black; }

/* Scrolling & Marquee */
.scrolling-list { height: 100%; max-height: 2000px; overflow: hidden; position: relative; }
.scrolling-list__track { padding: 0; margin: 0; list-style: none; }
.scrolling-list__item { padding: 10px; font-style: italic; color: #aaa; text-align: left; font-size: .9rem; border-bottom: 1px solid #ddd; }
[data-auto-scroll="container"] { transform: translateZ(0); backface-visibility: hidden; perspective: 1000; }
/* Optimized Marquee Container */
.marquee-box { width: 100%; height: 160px; overflow: hidden; position: relative; list-style: none;  padding: 0; margin: 0;}
.marquee-box__item { display: block; width: 300px; padding: 1rem;  background: #fff; border: 2px dashed #ccc; color: #777; font-size: .75rem; line-height: 1.4;height:100%;font-style: italic; 
    /* Removed will-change and translateZ to prevent memory bloat */
}




.event_soldout {
 width:100%;border:2px solid var(--color-accent-dark);color:white; background-color:var(--color-accent); padding:.5rem;border-radius:1rem;text-align:center;
}


.genie h2{ text-align:center;  margin-bottom:0px;padding:.8rem;}
ul.genie  { list-style-type:none;  border:solid var(--color-perforated) 1px; border-radius: 1rem; background-color:#fff3cd; background-color: #fdfbf7;display:inline-block;padding:0px;}
.genie li{  text-decoration:none;  width:100%;cursor: pointer;display:inline-block; }
.genie div{ text-decoration:none;font-size:.7rem;  font-weight:normal; }
.genie section {padding:.5rem;border-bottom:solid var(--color-perforated) 1px;background-color:#fff;font-size:.8rem; }
.genie h3{margin:0px; background-color:#fdfbf7;padding:.5rem 2rem;border-bottom:dashed var(--color-perforated) 1px; width:100%;text-align:left; }
.genie h3:hover {color:blue;transition: all 1s;}
.genie footer{ height:2rem;background-color:#fff; }
.genie h4 {height:1rem;padding:.5rem;}

.roundediframe { background-color: #000; border-radius: 20px; overflow: hidden; max-width: 1000px; width: 90%; margin: 10px auto; -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); }
.roundediframe iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: none; }

/* 12. GARNISHES (Sash, Ribbon, etc) */
.card { position: relative; display: inline-block; }
.sash { font-weight: bold; color: #fff; position: absolute; top: 0; right: 0; line-height: 1.8; padding-inline: 1lh; padding-bottom: var(--fold); border-image: conic-gradient(#0008 0 0) 51%/var(--fold); clip-path: polygon(100% calc(100% - var(--fold)), 100% 100%, calc(100% - var(--fold)) calc(100% - var(--fold)), var(--fold) calc(100% - var(--fold)), 0 100%, 0 calc(100% - var(--fold)), 999px calc(100% - var(--fold) - 999px), calc(100% - 999px) calc(100% - var(--fold) - 999px)); transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg); transform-origin: 0% 100%; background-color: #97282d; font-size:.8rem; }
.ribbon { color: #fff; background: #E3AD40; position: absolute; bottom: 20px; left: calc(-1*var(--fold)); padding-inline: .25em; line-height: 1.8; border-top: var(--fold) solid #0005; border-right: var(--fold) solid #0000; clip-path: polygon(calc(100% - var(--fold)) 100%, 0 100%, 0 var(--fold), var(--fold) 0, var(--fold) var(--fold), calc(100% - var(--fold)) var(--fold), 100% calc(50% + var(--fold)/2)); }
.corset { font-weight: bold; color: #fff; text-align: center; position: absolute; top: 50%; translate: 0 -50%; inset-inline: calc(-1*var(--fold)); padding-block: var(--fold); line-height: 1.8; clip-path: polygon(0 var(--fold), calc(100% - var(--fold)) var(--fold), calc(100% - var(--fold)) 0, 100% var(--fold), 100% calc(100% - var(--fold)), var(--fold) calc(100% - var(--fold)), var(--fold) 100%, 0 calc(100% - var(--fold))); border-image: conic-gradient(#0008 0 0) 50%/var(--fold); background-color: #3FB8AF; }
.headband { font-weight: bold; color: #fff; text-align: center; position: absolute; top: 5%; inset-inline: calc(-1*var(--fold)); border-bottom: var(--fold) solid #0008; line-height: 1.8; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, calc(100% - var(--fold)) calc(100% - var(--fold)), var(--fold) calc(100% - var(--fold)), var(--fold) 100%, 0 calc(100% - var(--fold))); background-color: #3FB8AF; }
.belt { font-weight: normal; text-align: center; color: #fff; position: absolute; bottom: 20px; inset-inline: calc(-1*var(--fold)); border-top: var(--fold) solid #0008; line-height: 1.8; clip-path: polygon(0 100%, 100% 100%, 100% var(--fold), calc(100% - var(--fold)) 0%, calc(100% - var(--fold)) var(--fold), var(--fold) var(--fold), var(--fold) 0%, 0 var(--fold)); background-color: #8FBE00; }
.drape { color: #fff; position: absolute; left: 20px; top: calc(-1*var(--fold)); padding: .2em; background: #BF4D28; border-left: var(--fold) solid #0005; border-bottom: var(--fold) solid #0000; clip-path: polygon(var(--fold) 0, 100% 0, 100% calc(100% - var(--fold)), calc(50% + var(--fold)/2) 100%, var(--fold) calc(100% - var(--fold)), var(--fold) var(--fold), 0 var(--fold)); }
.skullcap { color: #fff; --fold: .2em; position: absolute; top: 0px; inset-inline: calc(-1*var(--fold)); text-align: center; line-height: 1.8; padding: 0 .5em calc(2*var(--fold)); border-radius: var(--fold); --_g: 100%/var(--fold) calc(2*var(--fold)) no-repeat; background: radial-gradient(100% 50% at right, #0005 98%, #0000 101%) 0 var(--_g), radial-gradient(100% 50% at left, #0005 98%, #0000 101%) 100% var(--_g), conic-gradient(from 90deg at var(--fold) calc(100% - 2*var(--fold)), #0000 25%, #3FB8AF 0) 0 0/calc(100% - var(--fold)) 100%; }
 
/* 13. CURSORS & ANIMATIONS */

.cursor-box {
    width: 150px;
    border-radius: 12px;
    border: 2px solid #00bcd4;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    padding: 1rem;
}

.s--pointer { cursor: pointer; }
.s--pointer:hover { rotate: -4deg; /* Independent rotate property */
  scale: 1.05;  /* Will safely combine with translateY from the button rule */
  box-shadow: 0 0 15px rgba(100, 108, 255, 0.3); }
.s--help { cursor: help; }
.s--help:hover { transform: scale3d(1.05, 1.05, 1) translate3d(0, -5px, 0); box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3); }
.s--wait { cursor: wait; }
.s--wait:hover { animation: kf-pulse 1.5s infinite alternate; }
.s--eager { cursor: pointer; }
.s--eager:hover { animation: kf-hop 1s infinite; }
.s--beat {cursor: pointer;animation: kf-beat 1s infinite alternate; }
.s--pulse { cursor: pointer;  animation: kf-pulse 1s infinite alternate;}
.s--pulse:hover {transform: scale3d(1.05, 1.05, 1);}
.s--crosshair { cursor: crosshair; border: 2px solid #4caf50; }
.s--crosshair:hover { transform: scale3d(1.05, 1.05, 1); box-shadow: 0 0 0 5px rgba(76, 175, 80, 0.3); }
.s--text { cursor: text; border: 2px solid #ffc107; }
.s--text:hover { transform: scale3d(1.05, 1.05, 1); letter-spacing: 2px; }
.s--nogo { cursor: not-allowed; border: 2px solid #f44336; }
.s--nogo:hover { animation: kf-shake 0.5s ease-in-out; }
.s--grab { cursor: grab; border: 2px solid #9c27b0; }
.s--grab:hover { transform: scale3d(1.05, 1.05, 1) translate3d(10px, 0, 0); }
.s--zoom-in { cursor: zoom-in; border: 2px solid #3f51b5; }
.s--zoom-in:hover { transform: scale3d(1.15, 1.15, 1); }
.s--cell { cursor: cell; border: 2px solid #009688; }
.s--cell:hover { transform: scale3d(1.05, 1.05, 1); clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%); }
.s--copy { cursor: copy; border: 2px solid #009688; }
.s--copy:hover { transform: scale3d(1.05, 1.05, 1); box-shadow: 5px 5px 0 #ccc; }
.s--move { cursor: move; border: 2px solid #ff9800; }
.s--move:hover { animation: kf-movearound 2s infinite ease-in-out; }
.s--alias { cursor: alias; border: 2px solid #e91e63; }
.s--alias:hover { transform: scale3d(1.05, 1.05, 1) skew(-5deg); }

/* HARDWARE ACCELERATED KEYFRAMES */

@keyframes kf-pulse { from { box-shadow: 0 0 0 rgba(255, 64, 129, 0); } to { box-shadow: 0 0 15px 2px rgba(255, 64, 129, 0.8); }}
@keyframes kf-beat { 0% { transform: scale3d(1.02, 1.02, 1); } 50% { transform: scale3d(1, 1, 1); } 100% { transform: scale3d(1.02, 1.02, 1); }}
@keyframes kf-hop { 0%, 100% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(0, 5px, 0); }}
@keyframes kf-shake { 0%, 100% { transform: translate3d(0, 0, 0) scale3d(1.05, 1.05, 1); }    25% { transform: translate3d(-5px, 0, 0) scale3d(1.05, 1.05, 1); } 75% { transform: translate3d(5px, 0, 0) scale3d(1.05, 1.05, 1); }}
@keyframes kf-movearound { 0%, 50%, 100% { transform: translate3d(0, 0, 0) scale3d(1.05, 1.05, 1); } 25% { transform: translate3d(5px, -5px, 0) scale3d(1.05, 1.05, 1); } 75% { transform: translate3d(-5px, 5px, 0) scale3d(1.05, 1.05, 1); }}
@keyframes kf-rainbowGlow { 0%   { box-shadow: 0 0 12px #ff0000; } 16%  { box-shadow: 0 0 12px #ff7300; } 33%  { box-shadow: 0 0 12px #fffb00; } 50%  { box-shadow: 0 0 12px #48ff00; }66%  { box-shadow: 0 0 12px #00ffd5; } 83%  { box-shadow: 0 0 12px #002bff; }100% { box-shadow: 0 0 12px #ff0000; }}

/* 14. MEDIA QUERIES (RESPONSIVE) */

/* 1450px - Desktop Layout Shift */


/* 1100px - Small Desktop */
@media screen and (max-width: 1100px) { html { font-size: 15px; }  .neck { top: 125px; } }

/* 900px - Tablet Landscape */
@media screen and (max-width: 900px) { html { font-size: 14px; } .neck { top: 105px; } }

/* 768px - Tablet Portrait */
@media (max-width: 768px) { .container { grid-template-columns: repeat(3, 1fr); } .cursor-box { width: 120px; height: 120px; } .neck { top: 90px; } }

/* 600px - Large Mobile */
@media screen and (max-width: 600px) { .neck { top: 70px; } .event_list div.event section { display: none !important; } }

/* 480px - Standard Mobile */
@media (max-width: 480px) { html { font-size: 13px; } .container { grid-template-columns: repeat(2, 1fr); } .cursor-box { width: 140px; height: 140px; } .neck { top: 60px; }}

/* 400px - Small Mobile */
@media screen and (max-width: 400px) { html { font-size: 12px; } .neck { top: 47px; } }

/* 330px - Extra Small Mobile */
@media screen and (max-width: 330px) { html { font-size: 11px; } .neck { top: 40px; } }
@media screen and (max-width: 768px) {
  input, select, textarea, option {
    font-size: 16px !important;
  }
}