/* ============================================================================
   FUN TOWN CAPE — DESIGN SYSTEM  (assets/site.css)
   Zero-build static site. Every page loads this file; page-specific sections
   live in a small <style> block in that page's <head>. Direction: "Marquee
   Night" (structure-a) with two grafts from structure-b (brass badge motif,
   brass stat numerals).

   ----------------------------------------------------------------------------
   DESIGN CHARTER  (rev 2 — "Neon Signature")
   - Dark theme IS the brand: near-black navy ground, brass + steel blue carry
     the palette. Neon magenta/violet are the SIGNATURE: the site should feel
     like the venue's LED-lit floor. Neon is used as light, not as surface —
     glowing rules (.glow-rule), lit-sign words (.neon-word), LED section
     markers (.lbl), neon edge-light on hover (.tile, nav links, .link-arrow),
     and neon-ringed buttons (.btn-primary, .btn-neon). Neon still never
     becomes body-copy color or a fill behind readable text: readable fill
     stays --text/--brass/--sky; neon glows BEHIND and AROUND it (WCAG floor).
   - At most ONE flickering neon word sitewide (.neon-flicker); all neon
     motion is static under prefers-reduced-motion.
   - Photos get a unified "night venue" grade (saturate+contrast filter plus
     the tile veil) so bright daylight shots sit into the dark theme.
   - Photo-led, editorial, "no boxes": full-bleed color fields (.field),
     asymmetric photo mosaics, hairline rules. Composition, not containers.
   - Oversized condensed display type (Big Shoulders Display, uppercase,
     line-height ~.92) with clamp() fluid sizing; Jost 300 for body prose.
   - Section labels are small uppercase letterspaced text (.lbl) with a
     leading hairline — never a badge.
   - Stats/pricing = big brass numerals over hairline rules (.stats/.stat).
   - The V3 bronze seal (assets/img/icon-v3.png — same mark as the nav) is
     the recurring brand motif — badge rows (.v3-badge), CTA-band star slot
     (.icon-star) and the footer badge (.fseal). Dark ground only. The V1
     neon seal (.v1-seal*) is RETIRED from pages (client call, 2026-08-08);
     its CSS was excised 2026-08-11 (no live page used it and _explore does
     not link site.css — git history keeps the rules); the v1-*.png art
     stays on disk but is deploy-ignored in firebase.json.

   BANNED (non-negotiable — these are the AI-slop defaults):
   - kicker eyebrows          - pill / chip badges
   - drop-shadow card grids   - emoji-as-icons

   A11Y FLOOR: skip link first in <body>, aria-current="page" in nav,
   aria-expanded on the menu button, prefers-reduced-motion fallback for
   every animation, all animation opt-in via html.js (no-JS sees everything).

   ----------------------------------------------------------------------------
   CANONICAL NAV — paste verbatim into every page directly after the skip
   link. Move aria-current="page" to the current page's link (on index.html
   it goes on the brand mark's home link instead).

   Links are EXTENSIONLESS (firebase.json cleanUrls: true, since 2026-08-08).
   Local preview needs `firebase serve` / `firebase emulators:start` — plain
   file:// no longer resolves internal links.

   NO "Invest" LINK — DELIBERATE, 2026-08-13. This stylesheet is public; keep
   comments non-confidential. The page it pointed to was withdrawn and is
   preserved undeployed in reference/legal-hold/. Do NOT re-add this link, the
   page, or any investor-facing copy anywhere on the site until you have read
   reference/legal-hold/README.md (not deployed).

   <a class="skip" href="#main">Skip to content</a>
   <header class="site-nav" id="top">
     <a class="nav-mark" href="./"><img src="assets/img/logo-v3.png" alt="Fun Town Cape — Tri-State Regional Destination"></a>
     <button class="nav-toggle" aria-expanded="false" aria-controls="nav-menu" aria-label="Menu"><span></span><span></span><span></span></button>
     <nav aria-label="Primary">
       <ul id="nav-menu">
         <li><a href="attractions">Attractions</a></li>
         <li><a href="eat-drink">Eat &amp; Drink</a></li>
         <li><a href="parties">Parties</a></li>
         <li><a class="btn btn-primary" href="contact">Contact</a></li>
       </ul>
     </nav>
   </header>

   CANONICAL FOOTER — paste verbatim at the end of every page, after </main>.

   <footer class="site-footer">
     <img class="fseal" src="assets/img/icon-v3.png" alt="Fun Town Cape badge" loading="lazy" onerror="ftcImg(this)">
     <p class="fmark">Fun Town Cape</p>
     <nav aria-label="Footer">
       <a href="attractions">Attractions</a>
       <a href="eat-drink">Eat &amp; Drink</a>
       <a href="parties">Parties</a>
       <a href="contact">Contact</a>
       <a href="privacy">Privacy</a>
     </nav>
     <div class="fmeta">
       <p class="fcontact">
         <a href="tel:+13146503381">314-650-3381</a>
         <a href="mailto:info@funtowncape.net">info@funtowncape.net</a>
         <a href="https://www.facebook.com/profile.php?id=61589117892061" target="_blank" rel="noopener">Facebook</a>
         <a href="https://www.instagram.com/fun.town.cape" target="_blank" rel="noopener">Instagram</a>
       </p>
       <p>Cape Girardeau, MO · Play. Compete. Celebrate. · <b>#FunTownCape</b></p>
       <p class="fcopy">&copy; <span data-year>2026</span> Fun Town Entertainment LLC. All rights reserved.</p>
     </div>
   </footer>

   The copyright year is hardcoded as a no-JS fallback and refreshed to the
   current year by site.js (external file — allowed by script-src 'self', so
   this needs NO new CSP hash; an inline script here would have broken the
   hash guard). Fun Town Entertainment LLC is the legal entity named as data
   controller in privacy.html — keep the two spellings identical.

   PER-PAGE <head> ORDER: charset → robots noindex → viewport → title/desc →
   favicons (below) → font preconnect + Google Fonts link (Big Shoulders
   Display 500..900 + Jost 300..600) → site.css → page <style>.
   Bottom of <body>: site.js → inline page script.

   FAVICONS — paste into every page's <head>:
   <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32-v3.png">
   <link rel="apple-touch-icon" href="assets/img/apple-touch-icon-v3.png">
   <link rel="icon" type="image/png" sizes="512x512" href="assets/img/icon-v3.png">
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root{
  --night:#05080e;        /* page ground — near-black navy */
  --night-2:#0b1220;      /* raised band */
  --night-3:#121c2e;      /* higher band / hairline ground */
  --steel:#1a6c90;        /* deep steel blue */
  --sky:#4fa8d8;          /* bright "TOWN" blue */
  --brass:#c29a5b;        /* logo brass gold */
  --brass-2:#8f6b42;      /* deep brass */
  --neon:#c43fa0;         /* arcade magenta — GLOW ONLY (4.36:1 on --night: never a text fill) */
  --neon-text:#e46ec4;    /* the READABLE neon — lit tint for text fill (6.99:1 on --night) */
  --violet:#7c4dff;       /* arcade violet — glow accent ONLY */
  --text:#eaf0f6; --text-2:#a9b4c4; --text-3:#7d8798;
  --line:rgba(234,240,246,.14); --line-2:rgba(234,240,246,.07);
  --brass-line:rgba(194,154,91,.4); --brass-line-2:rgba(194,154,91,.18);
  --nav-h:66px;
  --disp:"Big Shoulders Display",Impact,sans-serif;
  --body:"Jost",Helvetica,Arial,sans-serif;
}

/* ---------- RESET ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{background:var(--night);color:var(--text);font-family:var(--body);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100svh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul[role],ol[role]{list-style:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

/* ---------- BASE TYPE ---------- */
h1,h2,h3{font-family:var(--disp);text-transform:uppercase;line-height:.92;letter-spacing:-.01em;font-weight:800;text-wrap:balance}
h1{font-size:clamp(3.6rem,12.5vw,11.5rem);font-weight:900;letter-spacing:-.015em}
h2{font-size:clamp(2.6rem,6.5vw,5.6rem)}
h3{font-size:clamp(1.2rem,2vw,1.9rem);letter-spacing:.01em}
h2 em,h3 em{font-style:normal;color:var(--brass)}
h2 em.sky{color:var(--sky)}
h2 em.neon{color:var(--neon);text-shadow:0 0 26px rgba(196,63,160,.55)}
/* lit-sign word: readable neon fill + layered bloom (tight core, wide halo).
   Fill is a light tint of the neon so contrast stays WCAG-safe; the saturated
   neon lives in the glow, not the letterform. Apply sparingly: 1-2 per page. */
.neon-word,h1 .neon-word,h2 em.neon-word{font-style:normal;color:#f6c9e8;
  text-shadow:
    0 0 6px rgba(196,63,160,.9),
    0 0 18px rgba(196,63,160,.7),
    0 0 42px rgba(196,63,160,.45),
    0 0 90px rgba(124,77,255,.3)}
/* optional very-subtle tube flicker — ONE word sitewide, max */
html.js .neon-flicker{animation:neonflicker 9s linear infinite}
@keyframes neonflicker{
  0%,41%,44%,84%,86%,100%{opacity:1}
  42%,85%{opacity:.82;text-shadow:0 0 4px rgba(196,63,160,.7),0 0 14px rgba(196,63,160,.5)}
  43%{opacity:.93}}
/* hollow display word: transparent fill, brass or sky stroke */
.hollow{color:transparent;-webkit-text-stroke:1.5px var(--brass)}
.hollow-sky{color:transparent;-webkit-text-stroke:2px var(--sky)}

/* ---------- LAYOUT CONTRACT ---------- */
.wrap{max-width:1500px;margin:0 auto}
.section{padding:clamp(4rem,10vh,8rem) clamp(1rem,5vw,4.5rem)}
/* editorial two-column: heading/figure left, prose right */
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.two-rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media(max-width:820px){.two,.two-rev{grid-template-columns:1fr}.two-rev>figure{order:2}}
.lede{color:var(--text-2);font-size:clamp(1rem,1.4vw,1.25rem);max-width:34rem}
.lede strong{color:var(--text);font-weight:500}
/* section label — small caps + leading hairline; NEVER a badge */
.lbl{font-size:.75rem;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:1.1rem}
/* LED marker: a lit neon dot feeding a brass filament dash — pure CSS, not a badge */
.lbl::before{content:"";display:inline-block;width:2.4rem;height:5px;vertical-align:middle;margin-right:.9rem;
  background:
    radial-gradient(circle 2.4px at 3px 50%,var(--neon) 98%,transparent) no-repeat,
    linear-gradient(90deg,rgba(196,63,160,.75),var(--brass-2)) no-repeat 0 50%/100% 1px;
  filter:drop-shadow(0 0 4px rgba(196,63,160,.8))}
hr.hairline{border:0;border-top:1px solid var(--line-2)}
/* neon "light tube" divider: thin tri-color gradient line + soft blur glow.
   Works on <hr> or an empty <div>. Section boundaries use the same tube. */
.glow-rule{border:0;height:1px;position:relative;overflow:visible;
  background:linear-gradient(90deg,transparent,var(--violet) 16%,var(--neon) 50%,var(--sky) 84%,transparent)}
.glow-rule::after{content:"";position:absolute;left:0;right:0;top:-3px;height:7px;
  background:inherit;filter:blur(6px);opacity:.55;pointer-events:none}
/* uppercase hairline arrow link */
.link-arrow{font-size:.8rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);border-bottom:1px solid var(--brass-2);padding-bottom:.35rem;transition:color .25s,border-color .25s}
.link-arrow{transition:color .25s,border-color .25s,text-shadow .25s,box-shadow .25s}
.link-arrow:hover,.link-arrow:focus-visible{color:var(--sky);border-color:var(--sky);
  text-shadow:0 0 14px rgba(79,168,216,.6);box-shadow:0 10px 14px -12px rgba(79,168,216,.9)}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;padding:.9rem 2.4rem;position:relative;transition:background .25s,color .25s,border-color .25s;text-align:center}
/* primary: brass face inside an animated conic-gradient ring.
   Two-layer background — face paints the padding-box, spinning ring paints
   the border-box behind a 2px transparent border. --ring angle is animated
   via @property so the gradient itself rotates. */
@property --ring{syntax:"<angle>";initial-value:0deg;inherits:false}
.btn-primary{color:var(--night);border:2px solid transparent;border-radius:999px;
  background:
    linear-gradient(var(--brass),var(--brass)) padding-box,
    conic-gradient(from var(--ring),var(--neon) 0%,var(--violet) 28%,var(--sky) 55%,var(--brass) 78%,var(--neon) 100%) border-box;
  box-shadow:0 0 18px rgba(196,63,160,.3),0 0 44px rgba(124,77,255,.18);
  animation:ringspin 4s linear infinite,ringbreathe 4s ease-in-out infinite}
.btn-primary:hover,.btn-primary:focus-visible{color:var(--night);
  background:
    linear-gradient(var(--sky),var(--sky)) padding-box,
    conic-gradient(from var(--ring),var(--neon) 0%,var(--violet) 28%,var(--sky) 55%,var(--brass) 78%,var(--neon) 100%) border-box}
@keyframes ringspin{to{--ring:360deg}}
@keyframes ringbreathe{50%{box-shadow:0 0 26px rgba(196,63,160,.55),0 0 70px rgba(124,77,255,.3)}}
/* neon tube: transparent face, lit neon border + outer/inner glow.
   Text stays --text (readable fill); neon lives in border + glow only. */
.btn-neon{color:var(--text);border:2px solid rgba(196,63,160,.85);border-radius:999px;
  background:rgba(196,63,160,.07);
  text-shadow:0 0 12px rgba(196,63,160,.45);
  box-shadow:0 0 12px rgba(196,63,160,.35),0 0 34px rgba(124,77,255,.16),inset 0 0 12px rgba(196,63,160,.18);
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.btn-neon:hover,.btn-neon:focus-visible{color:#fff;border-color:#e46ec4;background:rgba(196,63,160,.14);
  box-shadow:0 0 22px rgba(196,63,160,.6),0 0 60px rgba(124,77,255,.3),inset 0 0 18px rgba(196,63,160,.3)}
/* ghost: hairline outline, fills brass on hover */
.btn-ghost{color:var(--text);border:1px solid var(--line);border-radius:999px}
.btn-ghost:hover{background:var(--brass);border-color:var(--brass);color:var(--night)}

/* ---------- GLASS STICKY NAV ---------- */
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--brass);color:var(--night);padding:.6rem 1.2rem;font-weight:600}
.skip:focus{left:0}
/* transparent above the fold; glass appears once scrolled (.scrolled via site.js) */
.site-nav{position:sticky;top:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,4vw,3rem);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .35s,border-color .3s,box-shadow .3s}
.site-nav.scrolled{background:rgba(5,8,14,.55);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--line-2);box-shadow:0 8px 30px rgba(0,0,0,.45)}
.nav-mark{font-family:var(--disp);font-weight:900;font-size:1.35rem;letter-spacing:.04em;text-transform:uppercase;line-height:1;display:flex;align-items:center}
.nav-mark em{font-style:normal;color:var(--sky)}
.nav-mark small{display:block;font-family:var(--body);font-weight:500;font-size:.55rem;letter-spacing:.35em;color:var(--brass);line-height:1.4}
/* V3 brand mark (logo-v3.png — the round bronze seal, transparent ground). Replaced the
   V2 horizontal wordmark, so the mark is now SQUARE: at height:96px it is also 96px wide
   and roughly a third of the circle hangs below the 66px bar. That overhang is deliberate
   — it carries over the treatment the V2 star had. Sizes/offsets below are tuned to the
   circle; changing height means re-checking translateY at all three breakpoints. */
.nav-mark img{height:96px;width:auto;display:block;transform:translateY(20px);transform-origin:left center;
  transition:height .35s ease,transform .35s ease,filter .3s;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.site-nav.scrolled .nav-mark img{height:66px;transform:translateY(12px)}
.nav-mark:hover img,.nav-mark:focus-visible img{filter:drop-shadow(0 0 10px rgba(196,63,160,.5)) drop-shadow(0 0 22px rgba(79,168,216,.3))}
@media(max-width:820px){.nav-mark img{height:76px;transform:translateY(15px)}.site-nav.scrolled .nav-mark img{height:64px;transform:translateY(13px)}}
/* V2 icon (neon star) as an inline motif, e.g. replacing the round brass badge */
.icon-star{display:block;width:clamp(120px,16vw,190px);height:auto;margin:0 auto 1.8rem;filter:drop-shadow(0 0 18px rgba(79,168,216,.35)) drop-shadow(0 0 40px rgba(196,63,160,.22))}
/* V3 bronze seal placements (the nav mark reused as motif) */
.v3-badge{display:block;width:clamp(130px,16vw,190px);height:auto;flex:none}
.fseal{display:block;width:56px;height:auto;flex:none}

.site-nav ul{display:flex;gap:clamp(1rem,2.5vw,2.2rem);list-style:none;align-items:center}
.site-nav ul a:not(.btn){display:inline-block;font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);transition:color .25s,border-color .25s,box-shadow .25s;padding:.4rem 0;border-bottom:1px solid transparent}
/* neon underline glow: 1px lit line + soft downward bloom */
.site-nav ul a:not(.btn):hover,.site-nav ul a:not(.btn):focus-visible{color:var(--text);
  border-bottom-color:rgba(196,63,160,.8);box-shadow:0 9px 12px -10px rgba(196,63,160,.95)}
.site-nav ul a:not(.btn)[aria-current="page"]{color:var(--text);
  border-bottom-color:var(--neon);box-shadow:0 9px 12px -10px rgba(196,63,160,.95)}
.site-nav .btn{font-size:.82rem;padding:.55rem 1.3rem} /* full spinning ring + glow, same as body buttons */
/* mobile: hamburger toggles a full-width glass panel */
.nav-toggle{display:none;width:44px;height:44px;position:relative}
.nav-toggle span{position:absolute;left:11px;right:11px;height:2px;background:var(--text);transition:transform .3s,top .3s,opacity .3s}
.nav-toggle span:nth-child(1){top:14px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:28px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}
@media(max-width:820px){
  .nav-toggle{display:block;transform:translateY(10px)} /* optically align with the down-shifted logo */
  /* panel sits above the page but UNDER the brand mark, so the hanging star stays visible */
  .site-nav nav{position:absolute;top:var(--nav-h);left:0;right:0;z-index:1;background:rgba(5,8,14,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line-2);display:none}
  .nav-mark{position:relative;z-index:2}
  .site-nav.open nav{display:block}
  .site-nav ul{flex-direction:column;align-items:flex-start;gap:0;padding:1rem clamp(1rem,4vw,3rem) 1.6rem}
  .site-nav ul li{width:100%}
  .site-nav ul a:not(.btn){display:block;padding:.9rem 0;font-size:.95rem;border-bottom:1px solid var(--line-2)}
  .site-nav ul li:last-child{margin-top:1.2rem}
}

/* ---------- HERO (page-agnostic frame; collage/veil specifics per page) ---------- */
.hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;min-height:calc(100svh - var(--nav-h))}
.hero-full{min-height:100svh;margin-top:calc(var(--nav-h)*-1)} /* home: photo runs behind the glass nav */
.hero-img{position:absolute;inset:0;z-index:-2;background-position:center 35%;background-size:cover;background-repeat:no-repeat;transform:scale(1.04)}
.hero-veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(5,8,14,.62) 0%,rgba(5,8,14,.28) 34%,rgba(5,8,14,.55) 62%,var(--night) 97%),
  linear-gradient(100deg,rgba(5,8,14,.82) 0%,rgba(26,108,144,.28) 55%,rgba(196,63,160,.14) 100%)}
.hero-inner{padding:calc(var(--nav-h) + 2rem) clamp(1rem,5vw,4.5rem) clamp(3rem,8vh,6rem);max-width:1500px;width:100%;margin:0 auto}
.hero-loc{font-size:.8rem;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:var(--brass);margin-bottom:1.4rem}
.hero h1 .w{display:block}
.hero h1 .w-stroke{color:transparent;-webkit-text-stroke:2px var(--sky);margin-left:.06em}
.hero h1 .w-brass{color:var(--brass)}
.hero-sub{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:flex-end;justify-content:space-between;margin-top:2.2rem;padding-top:1.4rem;position:relative}
/* hero boundary reads as a light tube */
.hero-sub::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--violet) 16%,var(--neon) 50%,var(--sky) 84%,transparent);
  box-shadow:0 0 10px rgba(196,63,160,.55),0 0 26px rgba(124,77,255,.3)}
.hero-tags{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.hero-tags b{color:var(--sky);font-weight:600}
/* .hero lives behind overflow:hidden, so a nowrap tag line is CLIPPED, not scrollable.
   Below 640px let it wrap and tighten the tracking; the letterspaced caps idiom stays. */
@media(max-width:640px){.hero-tags{white-space:normal;letter-spacing:.18em}}

/* ---------- FULL-BLEED FIELDS (alternating bands) ---------- */
.field{padding:clamp(4rem,10vh,8rem) clamp(1rem,5vw,4.5rem)}
.field-night{background:var(--night)}
.field-steel{background:linear-gradient(180deg,var(--night) 0%,#0d2635 18%,#0f2e40 55%,var(--night-2) 100%)}
.field-brass{background:linear-gradient(180deg,var(--night-2),#17130c 40%,#1b150c 70%,var(--night))}

/* ---------- PHOTO MOSAIC (asymmetric 12-col grid) ----------
   Page assigns each .tile a span via grid-column/grid-row utilities or a
   page-specific class. .tile is a <figure> with an <img> + <figcaption>. */
.mos-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(2rem,5vh,4rem)}
.mos-head p{max-width:30rem;color:var(--text-2)}
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.6rem,1.4vw,1.2rem);grid-auto-rows:clamp(70px,9vw,130px)}
.tile{position:relative;overflow:hidden;isolation:isolate}
/* unified night-venue grade: saturate/contrast lift + slight dim so bright
   daylight shots sit into the dark theme alongside the neon interiors */
.tile img,.two figure img{filter:saturate(1.16) contrast(1.06) brightness(.9)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s}
.tile:hover img{transform:scale(1.06);filter:saturate(1.2) contrast(1.06) brightness(1)}
/* veil: dark base gradient + faint violet/neon cast pulls every photo into
   one palette; on hover the edge lights up — inset neon ring, never a shadow */
.tile::after{content:"";position:absolute;inset:0;transition:box-shadow .45s;background:
  linear-gradient(190deg,rgba(5,8,14,0) 45%,rgba(5,8,14,.86) 100%),
  linear-gradient(160deg,rgba(124,77,255,.1),rgba(26,108,144,.06) 45%,rgba(196,63,160,.08))}
.tile:hover::after,.tile:focus-within::after{box-shadow:
  inset 0 0 0 1px rgba(196,63,160,.7),
  inset 0 0 26px rgba(196,63,160,.28),
  inset 0 0 60px rgba(124,77,255,.16)}
.tile figcaption{position:absolute;left:1rem;right:1rem;bottom:.9rem;z-index:1}
.tile p{font-size:.85rem;color:var(--text-2);font-weight:400;max-width:22rem}
.tile.hot h3{color:var(--brass)}
/* interleaved prose cell inside the mosaic */
.tile-text{display:flex;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tile-text p{font-size:clamp(1rem,1.5vw,1.3rem);color:var(--text-2)}
.tile-text b{color:var(--sky);font-weight:500}
@media(max-width:820px){.mosaic{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(90px,16vw,130px)}}

/* ---------- BRASS BADGE MOTIF (graft from structure B) ---------- */
.badge{width:clamp(110px,14vw,180px);border-radius:50%;
  box-shadow:0 0 0 1px var(--brass-line),0 0 60px rgba(194,154,91,.22),0 0 140px rgba(124,77,255,.12)}
.badge-row{display:flex;align-items:center;gap:1.6rem;margin-top:2.4rem}
.badge-row p{font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-3)}

/* ---------- STAT NUMERALS (graft from structure B): big brass figures over
   hairline rules — this is also the pricing treatment. No boxes. ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--brass-line);border-bottom:1px solid var(--brass-line)}
.stat{padding:clamp(1.6rem,3.5vw,2.6rem) clamp(1rem,2.5vw,2rem);border-left:1px solid var(--brass-line-2)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--disp);font-weight:700;color:var(--brass);line-height:1;font-size:clamp(2.6rem,6vw,4.8rem)}
.stat span{display:block;margin-top:.7rem;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-2)}
@media(max-width:720px){.stats{grid-template-columns:1fr}.stat{border-left:0;border-top:1px solid var(--brass-line-2)}.stat:first-child{border-top:0}}
/* hairline bullet list (invest points etc.) */
.rule-list{list-style:none}
.rule-list li{padding:1rem 0 1rem 1.6rem;border-top:1px solid var(--line);position:relative;color:var(--text-2)}
.rule-list li::before{content:"";position:absolute;left:0;top:1.65rem;width:.6rem;height:1px;background:var(--brass)}
.rule-list li:last-child{border-bottom:1px solid var(--line)}
/* EAT·DRINK·PLAY·COMPETE·CELEBRATE pillar strip */
.pillars{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:2rem}
.pillars span{flex:1;text-align:center;padding:1rem .4rem;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(.9rem,1.6vw,1.35rem);letter-spacing:.08em;border-right:1px solid var(--line-2)}
.pillars span:last-child{border-right:0}
.pillars span:nth-child(odd){color:var(--sky)}
.pillars span:nth-child(even){color:var(--brass)}

/* ---------- CTA BAND ---------- */
.cta-band{text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:-40% -10%;pointer-events:none;background:
  radial-gradient(ellipse 50% 45% at 50% 60%,rgba(124,77,255,.16),transparent 70%),
  radial-gradient(ellipse 40% 35% at 30% 40%,rgba(26,108,144,.25),transparent 70%)}
.cta-band>*{position:relative}
.cta-band h2{font-size:clamp(3rem,9vw,8rem);font-weight:900}
.cta-band .lede{margin:1.4rem auto 2.6rem}
.cta-band .lbl{display:inline-block}
.cta-band .badge{margin:0 auto 1.8rem}
.cta-social{margin-top:2.2rem;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-3)}
/* readable neon fill (--neon-text), saturated neon stays in the glow behind it */
.cta-social b{color:var(--neon-text);font-weight:600;text-shadow:0 0 18px rgba(196,63,160,.6)}

/* ---------- FOOTER ---------- */
.site-footer{position:relative;padding:2.5rem clamp(1rem,5vw,4.5rem);display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between;align-items:center;color:var(--text-3);font-size:.85rem}
/* footer boundary = light tube (dimmer than hero) */
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--violet) 16%,var(--neon) 50%,var(--sky) 84%,transparent);
  opacity:.7;box-shadow:0 0 12px rgba(196,63,160,.4)}
.site-footer nav{display:flex;gap:1.8rem;flex-wrap:wrap}
/* .75rem is the system's small-text floor (12px — the sub-12px legibility line);
   inline-flex + min-height buys the 24px WCAG 2.5.8 target without a bigger face */
.site-footer nav a{letter-spacing:.16em;text-transform:uppercase;font-size:.75rem;font-weight:500;transition:color .25s;display:inline-flex;align-items:center;min-height:24px}
.site-footer nav a:hover{color:var(--text)}
.site-footer .fmark{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:1.1rem;color:var(--text-2)}
.site-footer b{color:var(--sky);font-weight:500}
/* footer contact row: letterspaced uppercase text links (phone/email/socials),
   stacked over the location tagline in .fmeta */
.site-footer .fcontact{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;margin-bottom:.5rem}
.site-footer .fcontact a{letter-spacing:.16em;text-transform:uppercase;font-size:.75rem;font-weight:500;color:var(--text-2);transition:color .25s;padding:.2rem 0;border-bottom:1px solid transparent}
.site-footer .fcontact a:hover,.site-footer .fcontact a:focus-visible{color:var(--text);border-bottom-color:rgba(196,63,160,.8)}
/* legal line — quieter than the tagline above it; year refreshed by site.js */
.site-footer .fcopy{margin-top:.55rem;font-size:.75rem;color:var(--text-3);letter-spacing:.02em}

/* ---------- SCROLL REVEALS (gated on html.js — no JS, no hiding) ---------- */
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.in{opacity:1;transform:none}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
  .btn-primary{animation:none;box-shadow:0 0 20px rgba(196,63,160,.4),0 0 50px rgba(124,77,255,.2)} /* static glow fallback */
  html.js .neon-flicker{animation:none}
  .btn-neon,.link-arrow,.tile::after,.site-nav ul a:not(.btn){transition:none} /* glows snap, don't animate */
  .tile img,.hero-img{transition:none;transform:none}
  .tile:hover img{transform:none;filter:saturate(1.16) contrast(1.06) brightness(.9)}
  .btn,.btn-primary,.site-nav,.nav-mark img,.nav-toggle span,img{transition:none}
  /* Backstop for motion declared in the per-page <style> blocks — those load
     AFTER this file, so reaching them (e.g. index.html's .rotor wipeIn/wipeOut)
     needs !important. Collapse the duration rather than animation:none: a
     keyframe set with fill:forwards must still land on its end state, or the
     outgoing rotor word would never hide. */
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important}
}
