/* ============================================================
   FLIP SIDE BURGER BAR — Shared Design System
   "Mural Slab" — locked per reference/DESIGN-LOCK.md §2 + §3
   Site by RadSites Co | radsitesco.com
   ============================================================
   This file is the single source of truth every page links.
   Page-specific layout (hero composition, section grids, etc.)
   stays inline in each page's own <style> block.
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ---------------------------------------------------------
   2.1 Colors
   --------------------------------------------------------- */
:root{
--blue:#7FC3E1; --black:#2F2F30; --white:#F5F5F0; --red:#C8342A;
--ink-06:rgba(47,47,48,.06); --ink-12:rgba(47,47,48,.12); --ink-15:rgba(47,47,48,.15);
--paper-90:rgba(245,245,240,.9); --paper-75:rgba(245,245,240,.75);
--paper-60:rgba(245,245,240,.6); /* FLOOR for text on black */
--paper-12:rgba(245,245,240,.12); --blue-halftone:rgba(127,195,225,.28);

/* ---------------------------------------------------------
   2.2 Typography
   --------------------------------------------------------- */
--font-script:'Pacifico',cursive; --font-display:'Anton',sans-serif; --font-body:'Barlow',sans-serif;
--fs-hero:clamp(3.25rem,12vw,9.5rem); --fs-hero-sub:clamp(1.6rem,4vw,3rem);
--fs-h2:clamp(2.4rem,5.5vw,4rem); --fs-h2-minor:clamp(1.9rem,4vw,2.75rem);
--fs-h3:1.55rem; --fs-script-lg:clamp(1.6rem,3vw,2.4rem); --fs-script:1.4rem;
--fs-body:1.02rem; --fs-body-lg:1.1rem; --fs-small:.92rem; --fs-label:.85rem;
--lh-tight:.95; --lh-heading:1.1; --lh-body:1.65;

/* ---------------------------------------------------------
   2.3 Spacing (4px base)
   --------------------------------------------------------- */
--sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.25rem;--sp-6:1.5rem;
--sp-8:2rem;--sp-10:2.5rem;--sp-12:3rem;--sp-14:3.5rem;--sp-16:4rem;--sp-20:5rem;--sp-24:6rem;--sp-28:7rem;
--rail:1200px;
--slab-pad:var(--sp-28) var(--sp-8);
--slab-pad-half:var(--sp-16) var(--sp-8);
--slab-pad-mobile:var(--sp-16) var(--sp-6);

/* ---------------------------------------------------------
   2.4 Radii
   --------------------------------------------------------- */
--r-xs:2px; --r-sm:4px; --r-full:50%;

/* ---------------------------------------------------------
   2.5 Shadows (hard comic offsets; only vinyl is blurred)
   --------------------------------------------------------- */
--shadow-comic-sm:4px 4px 0 var(--black); --shadow-comic-sm-blue:4px 4px 0 var(--blue);
--shadow-comic-lg:8px 8px 0 var(--black); --shadow-comic-lg-blue:8px 8px 0 var(--blue);
--shadow-comic-hover-sm:6px 6px 0 var(--black); --shadow-comic-hover-lg:10px 10px 0 var(--black);
--shadow-soft:0 20px 50px rgba(0,0,0,.4); /* vinyl only */

/* ---------------------------------------------------------
   2.6 Motion
   --------------------------------------------------------- */
--ease:cubic-bezier(.22,1,.36,1); --t-fast:.25s; --t-med:.35s; --t-reveal:.8s;
}

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font-body);background:var(--black);color:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ---------------------------------------------------------
   2.8 Focus & a11y baseline
   --------------------------------------------------------- */
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.slab-blue :focus-visible,.slab-white :focus-visible{outline-color:var(--red)}
.slab-red :focus-visible{outline-color:var(--white)}
img{max-width:100%;display:block;height:auto} /* height:auto = Rule 16 */

/* --- Skip Link --- */
.skip-link{position:absolute;top:-100%;left:1rem;background:var(--red);color:var(--white);padding:.75rem 1.5rem;font-size:var(--fs-small);font-weight:700;letter-spacing:1px;text-decoration:none;z-index:9999;border-radius:0 0 var(--r-sm) var(--r-sm);transition:top .2s}
.skip-link:focus{top:0}

/* --- Reveal (verbatim scaffold behavior: IO .1 threshold, i*100ms stagger, 2s fallback) --- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ===========================================================
   3.1 Navigation
   =========================================================== */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1.5rem 3rem;display:flex;justify-content:space-between;align-items:center;transition:all var(--t-med) var(--ease);background:transparent}
nav.scrolled,body.subpage nav{background:var(--black);border-bottom:3px solid var(--red)}
nav.scrolled{padding:1rem 3rem}

.nav-logo{display:flex;flex-direction:column;gap:.15rem;line-height:1;text-decoration:none}
.nav-logo .script{font-family:var(--font-script);font-size:1.6rem;color:var(--white)}
.nav-logo .sub{font-family:var(--font-display);font-size:.72rem;letter-spacing:3px;color:var(--blue)}

.nav-right{display:flex;align-items:center;gap:2.5rem}
.nav-links{display:flex;gap:2.25rem;list-style:none;align-items:center}
.nav-links a{color:var(--white);text-decoration:none;font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;transition:color var(--t-med);position:relative;padding-bottom:5px}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;background:var(--blue);transition:width var(--t-med)}
.nav-links a:hover{color:var(--blue)}
.nav-links a:hover::after{width:100%}
.nav-links a[aria-current="page"]{color:var(--blue)}
.nav-links a[aria-current="page"]::after{width:100%;background:var(--red)}

.nav-cta{background:var(--red);color:var(--white);padding:.65rem 1.4rem;font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;border:2px solid var(--black);box-shadow:3px 3px 0 var(--black);transition:transform var(--t-fast),box-shadow var(--t-fast)}
.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--black);color:var(--white)}

.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;z-index:1001;padding:10px;margin:-10px;min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent;background:none;border:none}
.hamburger span{width:28px;height:3px;background:var(--white);transition:all var(--t-med)}

/* ===========================================================
   3.2 Mobile menu
   =========================================================== */
.mobile-close{position:absolute;top:0;right:0;width:72px;height:72px;display:flex;align-items:center;justify-content:center;font-size:2.25rem;line-height:1;color:var(--white);cursor:pointer;opacity:.85;transition:opacity var(--t-med);z-index:1003;-webkit-tap-highlight-color:transparent;background:none;border:none}
.mobile-close:hover{opacity:1}

.mobile-menu{display:none;position:fixed;inset:0;background:rgba(47,47,48,.98);backdrop-filter:blur(20px);z-index:1002;flex-direction:column;justify-content:center;align-items:center;gap:0}
.mobile-menu.active{display:flex}
.mobile-menu a{color:var(--white);text-decoration:none;font-family:var(--font-display);font-size:2rem;letter-spacing:1px;text-transform:uppercase;transition:color var(--t-med);padding:.85rem 3rem;width:100%;text-align:center;-webkit-tap-highlight-color:transparent}
.mobile-menu a:hover,.mobile-menu a:active{color:var(--blue)}
.mobile-menu .social-links{margin-top:1.5rem}
.mobile-menu .social-links a{width:auto;padding:.5rem 1.25rem;font-size:.85rem;letter-spacing:1.5px}

/* ===========================================================
   3.3 Footer
   =========================================================== */
footer{background:var(--black);padding:4rem 3rem 2rem;border-top:3px solid var(--blue)}
.footer-content{display:flex;justify-content:space-between;align-items:flex-start;max-width:var(--rail);margin:0 auto;padding-bottom:3rem;border-bottom:1px solid var(--paper-12);gap:3rem;flex-wrap:wrap}
.footer-brand{max-width:340px}
.footer-brand .nav-logo{margin-bottom:.9rem}
.footer-brand p{color:var(--paper-75);font-weight:400;font-size:var(--fs-small);line-height:var(--lh-body);margin-bottom:.9rem}
.footer-nap{font-size:var(--fs-small);font-weight:400;color:var(--paper-75);line-height:1.8}
.footer-nap a{color:var(--paper-90);text-decoration:none;transition:color var(--t-med)}
.footer-nap a:hover{color:var(--blue)}
.footer-links{display:flex;gap:3.5rem;flex-wrap:wrap}
.footer-col h2{font-family:var(--font-body);font-size:.75rem;letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:1.1rem;font-weight:700}
.footer-col a{display:flex;align-items:center;min-height:44px;color:var(--paper-90);text-decoration:none;font-weight:400;font-size:var(--fs-small);margin-bottom:.15rem;transition:color var(--t-med)}
.footer-col a:hover{color:var(--blue)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;max-width:var(--rail);margin:0 auto;padding-top:2rem;flex-wrap:wrap;gap:1rem}
.footer-bottom p{color:var(--paper-60);font-size:.8rem;font-weight:400}
/* P0-2 fix: single-mechanism dim text — --paper-60 token only, NEVER opacity on a text container */
.footer-credit{color:var(--paper-60);font-size:.7rem;text-decoration:none;margin-top:.5rem;display:inline-flex;align-items:center;min-height:44px}
.footer-credit:hover{color:var(--blue)}
.footer-credit+.footer-credit{margin-left:1.25rem}
.social-links{display:flex;gap:1.5rem}
.social-links a{display:flex;align-items:center;min-height:44px;color:var(--paper-75);text-decoration:none;font-family:var(--font-body);font-weight:700;font-size:.82rem;letter-spacing:1px;text-transform:uppercase;transition:color var(--t-med)}
.social-links a:hover{color:var(--blue)}

/* ===========================================================
   2.7 Components
   =========================================================== */

/* --- Slabs --- */
.slab-blue{background:var(--blue);color:var(--black);position:relative;overflow:hidden;padding:var(--slab-pad)}
.slab-white{background:var(--white);color:var(--black);padding:var(--slab-pad)}
.slab-black{background:var(--black);color:var(--white);padding:var(--slab-pad);position:relative}
.slab-red{background:var(--red);color:var(--white);text-align:center;position:relative;padding:var(--slab-pad)}
.slab-half{padding:var(--slab-pad-half)}
.slab-red.slab-half{padding:var(--slab-pad-half)}
.rail{max-width:var(--rail);margin:0 auto}
.hard-seam{height:6px;width:100%;background:var(--black)}

/* --- Sub-page hero (single source — clears the ~90px fixed nav so the eyebrow is never hidden) --- */
.sub-hero{padding-top:8.5rem;text-align:center}
.sub-hero-title{font-family:var(--font-display);font-size:var(--fs-h2);line-height:var(--lh-heading);color:var(--white);text-transform:uppercase;letter-spacing:.5px;margin:.25rem 0}

/* --- Hidden SVG defs container (POW concave symbol, pasted per-page) --- */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Shared CTA-band type treatment (used identically on every page's red CTA slab) */
.eyebrow-script{font-family:var(--font-script);font-size:var(--fs-script);display:block;margin-bottom:.5rem}
.slab-white .eyebrow-script{color:var(--red)}
.slab-black .eyebrow-script,.on-dark .eyebrow-script{color:var(--blue)}
.slab-red .eyebrow-script{color:var(--white)}
/* eyebrow-script never appears on blue slabs (P1) */

.cta-title{font-family:var(--font-display);color:var(--white);font-size:clamp(2.5rem,6vw,4.5rem);text-transform:uppercase;line-height:var(--lh-tight);text-shadow:3px 3px 0 var(--black);margin:.5rem 0 1.25rem} /* P0-4 downshift */
.cta-sub{font-family:var(--font-body);font-weight:500;font-size:var(--fs-body-lg);margin-bottom:2rem}

.section-tag{font-family:var(--font-body);font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:var(--fs-label)}

/* --- Drip divider (exactly ONE red drip per page, below hero; other seams = accent color onto lower-slab background) --- */
.drip-divider{width:100%;height:64px;overflow:hidden;line-height:0}
.drip-divider svg{width:100%;height:100%;display:block}
.drip-divider.flip svg{transform:scaleX(-1)}
.drip-fill-red path{fill:var(--red)}
.drip-fill-blue path{fill:var(--blue)}
.drip-fill-black path{fill:var(--black)}
.drip-bg-blue{background:var(--blue)}
.drip-bg-black{background:var(--black)}
.drip-bg-red{background:var(--red)}
.drip-bg-white{background:var(--white)}

/* --- Panel --- */
.panel{background:var(--white);border:3px solid var(--black);border-radius:var(--r-sm);box-shadow:var(--shadow-comic-lg);overflow:hidden}
.panel img{width:100%;height:100%;object-fit:cover}
.panel--blue-shadow{box-shadow:var(--shadow-comic-lg-blue)}
.panel--white-border{border-color:var(--white);box-shadow:var(--shadow-comic-lg-blue)}
.aspect-4-3{aspect-ratio:4/3}
.aspect-1-1{aspect-ratio:1/1}
.aspect-3-4{aspect-ratio:3/4}
.aspect-16-10{aspect-ratio:16/10}

/* --- Chip --- */
.chip{display:inline-block;font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:var(--fs-label);padding:.55rem 1.1rem;border:2px solid var(--black);box-shadow:var(--shadow-comic-sm);transform:rotate(-2deg);border-radius:var(--r-xs)}
.chip-red{background:var(--red);color:var(--white)}
.chip-blue{background:var(--blue);color:var(--black)}
.chip-black{background:var(--black);color:var(--white);box-shadow:var(--shadow-comic-sm-blue)}
.on-dark .chip{box-shadow:var(--shadow-comic-sm-blue)}

/* --- Price burst (prices only) --- */
.price-burst{position:absolute;top:-16px;right:-16px;width:64px;height:64px;background:var(--red);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);display:flex;align-items:center;justify-content:center;transform:rotate(8deg);z-index:2}
.price-burst span{font-family:var(--font-display);color:var(--white);font-size:1rem;transform:rotate(-8deg)}
.price-burst--inline{position:static;display:inline-flex;transform:rotate(-6deg);margin-left:.6rem;vertical-align:middle}

/* --- Badge burst (identity moments; must carry real info) --- */
.badge-burst{width:104px;height:104px;background:var(--red);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);display:flex;align-items:center;justify-content:center;transform:rotate(-6deg);flex-shrink:0}
.badge-burst span{font-family:var(--font-display);color:var(--white);font-size:.78rem;letter-spacing:1px;text-align:center;line-height:1.15;transform:rotate(6deg)}
.badge-burst--blue{background:var(--blue)}
.badge-burst--blue span{color:var(--black)}

/* --- Peek-star (POW concave symbol; ≤1/page) --- */
.peek-star{position:absolute;top:-42px;left:-42px;width:130px;height:130px;z-index:0;pointer-events:none}
.peek-star svg{width:100%;height:100%}
.peek-star path{fill:var(--blue);stroke:var(--black);stroke-width:6px}

/* --- Vinyl (spins continuously; killed only by reduced-motion for accessibility).
   Previously started paused + resumed on-screen via an IntersectionObserver, but the
   paused->running resume was unreliable on mobile/iOS Safari (spun on desktop, not on phones).
   Spinning unconditionally is robust across engines; reduced-motion still stops it. --- */
.vinyl{position:relative;width:100%;max-width:380px;min-width:240px;aspect-ratio:1;border-radius:var(--r-full);background:repeating-radial-gradient(circle at 50% 50%, var(--black) 0 5px, #3b3b3d 5px 6px);margin:0 auto;box-shadow:var(--shadow-soft);animation:vinylspin 32s linear infinite;will-change:transform}
.vinyl::before{content:'';position:absolute;top:50%;left:50%;width:10px;height:10px;background:var(--black);border-radius:var(--r-full);transform:translate(-50%,-50%);z-index:2}
.vinyl-label{position:absolute;top:50%;left:50%;width:34%;height:34%;transform:translate(-50%,-50%);border-radius:var(--r-full);background:var(--blue);border:3px solid var(--black);display:flex;align-items:center;justify-content:center;text-align:center;z-index:1}
.vinyl-label span{font-family:var(--font-script);color:var(--black);font-size:.85rem;line-height:1.1;padding:0 .25rem}
.vinyl--sm{max-width:180px;min-width:120px}
@keyframes vinylspin{to{transform:rotate(360deg)}}

/* --- Speech bubble (≤1/page) --- */
.speech-bubble{position:relative;background:var(--white);border:3px solid var(--black);border-radius:var(--r-sm);box-shadow:var(--shadow-comic-lg-blue);padding:1.75rem 2rem;margin-top:2rem}
.speech-bubble::after{content:'';position:absolute;bottom:-19px;left:40px;width:0;height:0;border:16px solid transparent;border-top-color:var(--black);border-bottom:0}
.speech-bubble::before{content:'';position:absolute;bottom:-14px;left:43px;width:0;height:0;border:13px solid transparent;border-top-color:var(--white);border-bottom:0;z-index:1}
.speech-bubble p{font-family:var(--font-body);font-style:italic;color:var(--black);line-height:var(--lh-body);font-size:var(--fs-body)}

/* --- Menu row --- */
.menu-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;padding:.85rem 0;border-bottom:1px solid var(--ink-12)}
.menu-row .name{font-family:var(--font-body);font-weight:600;white-space:nowrap;color:var(--black)}
.menu-row .dots{flex:1 1 auto;min-width:20px;height:1em;align-self:flex-end;background-image:radial-gradient(circle, var(--black) 1.5px, transparent 1.6px);background-size:12px 4px;background-repeat:repeat-x;background-position:bottom}
.menu-row .price{white-space:nowrap;font-weight:700;color:var(--red);font-family:var(--font-body)}
.on-dark .menu-row .price{color:var(--blue)}
.menu-row .desc{flex-basis:100%;width:100%;display:block;font-family:var(--font-body);font-style:italic;font-size:var(--fs-small);line-height:var(--lh-body);color:var(--black);margin-top:.25rem}

/* --- Menu tab rail (Menu page; sticky under nav on a black band) --- */
.menu-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;padding:1.5rem 2rem;background:var(--black);position:sticky;top:0;z-index:900;border-bottom:3px solid var(--red)}
.menu-tab{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:var(--fs-label);padding:.65rem 1.25rem;border:2px solid var(--white);border-radius:var(--r-xs);background:var(--black);color:var(--white);cursor:pointer;box-shadow:var(--shadow-comic-sm-blue);transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),color var(--t-fast)}
.menu-tab:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--blue)}
.menu-tab[aria-selected="true"]{background:var(--red);color:var(--white);border-color:var(--black);box-shadow:var(--shadow-comic-sm)}
.menu-section{display:none}
.menu-section.active{display:block}

/* --- Halftone-fade (slab texture; blue slab + black panels only; one texture per slab) --- */
.halftone-fade::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle, var(--ink-15) 1.2px, transparent 1.3px);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse at center, transparent 15%, black 78%);mask-image:radial-gradient(ellipse at center, transparent 15%, black 78%)}

/* --- Speed-wrap (diagonal speed-lines behind a heading; Menu category headers only) --- */
.speed-wrap{position:relative;display:inline-block}
.speed-wrap::before{content:'';position:absolute;inset:-.6rem -1.2rem;z-index:0;background-image:repeating-linear-gradient(45deg, var(--ink-15) 0 3px, transparent 3px 14px)}
.speed-wrap > *{position:relative;z-index:1}

/* --- Food-photo placeholder: ph-halftone (default) --- */
.ph-halftone{position:relative;background:var(--black);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph-halftone::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle, var(--blue-halftone) 1.2px, transparent 1.3px);background-size:14px 14px}
.ph-halftone span{position:relative;z-index:1;color:var(--paper-90);font-family:var(--font-body);font-weight:500;font-style:italic;font-size:.85rem;text-align:center;padding:0 1.75rem;line-height:1.5}

/* --- Buttons --- */
.btn{display:inline-block;font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:var(--fs-label);text-decoration:none;padding:1rem 2.1rem;border-radius:var(--r-xs);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);cursor:pointer;border:2px solid var(--black)}
.btn-primary{background:var(--red);color:var(--white);box-shadow:var(--shadow-comic-sm)}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-comic-hover-sm)}
.btn-outline-light{background:transparent;color:var(--white);border:2px solid var(--white)}
.btn-outline-light:hover{background:var(--blue);color:var(--black);border-color:var(--black)}
.btn-solid-light{background:var(--white);color:var(--black);border:2px solid var(--black);box-shadow:var(--shadow-comic-sm)}
.btn-solid-light:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-comic-hover-sm)}
.btn[aria-disabled="true"]{opacity:1;background:var(--ink-12);color:var(--black);border-color:var(--black);cursor:not-allowed;pointer-events:none}

/* ===========================================================
   Responsive
   =========================================================== */
@media(max-width:1024px){
  /* shared chrome holds steady at this breakpoint; page grids reflow inline per page */
}

@media(max-width:768px){
  nav{padding:1rem 1.5rem}
  nav.scrolled{padding:.85rem 1.5rem}
  .nav-right .nav-links{display:none}
  .nav-right .nav-cta{display:none}
  .hamburger{display:flex}
  .slab-blue,.slab-white,.slab-black{padding:var(--slab-pad-mobile)}
  .slab-red{padding:4rem 1.5rem}
  .slab-red.slab-half{padding:3rem 1.5rem}
  .sub-hero{padding-top:7rem}
  footer{padding:3rem 1.5rem 1.5rem}
  .footer-content{flex-direction:column;gap:2.5rem}
  .footer-links{gap:2.5rem}
  .footer-bottom{flex-direction:column;text-align:center}
  .btn{display:block;width:100%;max-width:22rem;margin-left:auto;margin-right:auto;text-align:center}
}

@media(max-width:480px){
  .drip-divider{height:32px}
  .badge-burst{width:88px;height:88px}
  .badge-burst span{font-size:.68rem}
  .footer-links{flex-direction:column;gap:1.75rem}
  .peek-star{top:-16px;left:-16px;width:90px;height:90px}
}

/* ===========================================================
   Reduced motion (shared classes; page-specific animated
   elements — e.g. hero Ken Burns — get their own block inline)
   =========================================================== */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  .vinyl{animation:none!important}
  .hero-content{animation:none!important}
  html{scroll-behavior:auto!important}
}