/* ==========================================================================
   7 LOCKS BREWING — Design System v2 "Meet the Beers"
   Editorial, chaptered, can-art-driven. Voices:
     display  — Big Shoulders (condensed industrial signage)
     editorial— Fraunces italic (soft, craft, for flavor & story lines)
     mono     — IBM Plex Mono (their Instagram typewriter voice)
   All core contrast pairs verified ≥ 4.5:1 (WCAG AA).
   ========================================================================== */

:root{
  /* Ink & surfaces */
  --ink:        #0D110C;
  --coal:       #151A12;
  --coal-2:     #1C2318;

  /* Chalk */
  --chalk:      #F3F0E4;
  --chalk-dim:  #A8AE9C;      /* 8.3:1 on ink */

  /* Brand green (sampled from logo) */
  --green:        #5CB05C;    /* 7.1:1 on ink — large text & buttons */
  --green-bright: #7FCA7A;    /* 9.6:1 on ink — small text */
  --green-deep:   #2F6B33;    /* 5.6:1 on chalk */

  /* Pendant amber */
  --amber:      #E3A94F;      /* 9.1:1 on ink */
  --amber-deep: #8A6420;      /* 4.7:1 on chalk */

  /* Can-art chapter colors (from their label art) */
  --guava:      #83CFBC;      /* Bitch Monkey teal  — ink text 11.5:1 */
  --guava-deep: #0E4A42;
  --hibiscus:   #E8719F;      /* Hibiscus pink      — ink text 7.4:1  */
  --hibiscus-deep:#521129;  /* 4.96:1 on hibiscus pink */
  --sky:        #8FC1E9;      /* can-against-sky blue — ink text 10.3:1 */

  /* Text on chalk/pastel */
  --text:      #1C2318;
  --text-soft: #4A5244;

  --wood:      #8B5E34;
  --hairline:     rgba(243,240,228,.14);
  --hairline-lt:  rgba(28,35,24,.18);

  --display: "Big Shoulders", "Arial Narrow", sans-serif;
  --editorial: "Fraunces", Georgia, serif;
  --body:    "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", "SF Mono", Menlo, monospace;

  --w:  1240px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --s1: .5rem;  --s2: 1rem;  --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;   --s6: 4.5rem; --s7: 7rem;

  --ease: cubic-bezier(.22,.61,.36,1);
  --radius: 4px;
}

/* ---------- Reset & base ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
/* Motion is opt-in: js/main.js adds .anim-ok to <html> only after verifying
   the animation clock actually runs. Without it, everything renders visible
   and static — no content is ever trapped at opacity 0. */
html.anim-ok{ scroll-behavior:smooth; }
body{
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--chalk);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
::selection{ background: var(--green); color: var(--ink); }

@media (prefers-reduced-motion: reduce){
  html.anim-ok{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

:focus-visible{ outline: 2px solid var(--green); outline-offset: 3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green); color:var(--ink); font-weight:600;
  padding:.6rem 1rem; border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{ left:0; }

.wrap{ max-width:var(--w); margin:0 auto; padding:0 var(--gutter); }

/* ---------- Typography ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:700; line-height:.92;
  text-transform:uppercase; letter-spacing:.005em; text-wrap:balance; }
.mega{ font-size:clamp(4rem, 12.5vw, 10.5rem); line-height:.86; }
.display-xl{ font-size:clamp(3.4rem, 9.5vw, 7.5rem); }
.display-lg{ font-size:clamp(2.6rem, 6vw, 4.8rem); }
.display-md{ font-size:clamp(1.9rem, 3.6vw, 2.8rem); }
.display-sm{ font-size:clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing:.02em; }

/* Layered headline colors */
.ln-outline{ color:transparent; -webkit-text-stroke:1.5px var(--chalk); }
@supports not (-webkit-text-stroke:1px black){ .ln-outline{ color:var(--chalk); } }
.ln-green{ color:var(--green); }
.ln-amber{ color:var(--amber); }

/* Editorial voice — flavor & story lines */
.ed{ font-family:var(--editorial); font-style:italic; font-weight:420;
  text-transform:none; letter-spacing:0; line-height:1.35;
  font-size:clamp(1.25rem, 2.4vw, 1.8rem); }

.eyebrow{
  font-family:var(--mono); font-size:.78rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.22em;
  color:var(--green-bright);
  display:flex; align-items:center; gap:.75rem;
}
.on-light .eyebrow, .chapter .eyebrow{ color:inherit; }
.lede{ font-size:clamp(1.1rem, 1.6vw, 1.3rem); line-height:1.6; max-width:38em; }
.muted{ color:var(--chalk-dim); }
.on-light .muted{ color:var(--text-soft); }
p{ max-width:65ch; }

.gate{ color:var(--green); flex:none; }
.on-light .gate{ color:var(--green-deep); }

/* ---------- Buttons & links ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  text-transform:uppercase; letter-spacing:.06em; text-decoration:none;
  padding:.9rem 1.7rem; min-height:48px; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active{ transform:scale(.97); }
.btn-solid{ background:var(--green); color:var(--ink); }
.btn-solid:hover{ background:var(--green-bright); }
.btn-ghost{ border-color:var(--hairline); color:var(--chalk); background:rgba(13,17,12,.25); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green-bright); }
.on-light .btn-ghost, .chapter .btn-ghost{
  border-color:var(--hairline-lt); color:var(--text); background:transparent; }
.on-light .btn-ghost:hover{ border-color:var(--green-deep); color:var(--green-deep); }
.chapter .btn-solid{ background:var(--ink); color:var(--chalk); }
.chapter .btn-solid:hover{ background:var(--coal-2); }

.link{
  color:var(--green-bright); text-decoration:none; font-weight:600;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;
  transition:background-size .3s var(--ease);
}
.link:hover{ background-size:100% 1px; }
.on-light .link{ color:var(--green-deep); }

/* ---------- Header / nav ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(13,17,12,.94);
  border-bottom:1px solid var(--hairline);
}
.nav-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); min-height:76px;
}
.brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; }
.brand img{ width:52px; height:52px; }
.brand-name{
  font-family:var(--display); font-weight:700; font-size:1.3rem;
  text-transform:uppercase; letter-spacing:.05em; color:var(--chalk); line-height:1;
}
.brand-name small{
  display:block; font-family:var(--mono); font-weight:500; font-size:.58rem;
  letter-spacing:.34em; color:var(--green-bright); margin-top:.28rem;
}
.nav-links{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); list-style:none; }
.nav-links a:not(.btn){
  font-family:var(--mono); font-size:.8rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--chalk); text-decoration:none; padding:.5rem 0; position:relative;
}
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav-links a:not(.btn):hover::after,
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:var(--green-bright); }
.nav-links .btn{ padding:.6rem 1.2rem; min-height:44px; font-size:.95rem; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--hairline);
  border-radius:var(--radius); width:48px; height:48px; cursor:pointer;
  align-items:center; justify-content:center; color:var(--chalk);
}
.nav-toggle svg{ width:24px; height:24px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

@media (max-width: 900px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:76px 0 0 0; z-index:99;
    flex-direction:column; justify-content:center; gap:1.1rem;
    background:var(--ink);
    transform:translateY(-105%); visibility:hidden;
    transition:transform .35s var(--ease), visibility 0s .35s;
  }
  .nav-links.open{ transform:translateY(0); visibility:visible; transition:transform .35s var(--ease); }
  html:not(.anim-ok) .nav-links{ transition:none; }
  .nav-links a:not(.btn){
    font-family:var(--display); font-size:2rem; font-weight:700;
    letter-spacing:.04em; padding:.4rem 0;
  }
  .nav-links .btn{ margin-top:1rem; font-size:1.2rem; padding:1rem 2rem; }
  body.menu-open{ overflow:hidden; }
}

/* ---------- Sections ---------- */
.section{ padding:var(--s7) 0; }
.section-tight{ padding:var(--s6) 0; }
.on-light{ background:var(--chalk); color:var(--text); }
.on-coal{ background:var(--coal); }
.section-head{ margin-bottom:var(--s5); display:grid; gap:var(--s2); }

/* ---------- Heroes ---------- */
.hero, .page-hero{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  isolation:isolate; overflow:hidden;
}
.hero{ min-height:100dvh; padding:9rem 0 0; }
.page-hero{ min-height:64dvh; padding:9rem 0 0; }
.hero .bg, .page-hero .bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center 35%;
}
.hero::after, .page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(13,17,12,.60) 0%, rgba(13,17,12,.25) 45%, rgba(13,17,12,.92) 100%);
}
.hero .wrap, .page-hero .wrap{ width:100%; padding-bottom:clamp(2.5rem,6vh,4.5rem); }
.hero-kicker{ margin-bottom:var(--s3); display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.hero h1, .page-hero h1{ margin:0 0 var(--s3); }
.hero .ed-sub{ margin-bottom:var(--s4); color:var(--chalk); max-width:26em; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }

/* Open-now chip */
.open-chip{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--hairline); border-radius:999px;
  padding:.45rem 1rem; color:var(--chalk);
  background:rgba(13,17,12,.45);
}
.open-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--chalk-dim); flex:none; }
.open-chip.is-open .dot{ background:var(--green); box-shadow:0 0 8px rgba(92,176,92,.9); }
.open-chip.is-open{ color:var(--green-bright); border-color:rgba(92,176,92,.4); }

/* Hero scrub media (home) — the poster paints first; the canvas fades in
   on top once the frame sequence starts arriving and scroll drives it. */
/* Slightly smaller mega + top padding so the whole composition
   (chip → headline → CTAs) stays above the fold on laptop viewports,
   which matters twice as much once the hero pins. */
.hero.has-video{ padding-top:8rem; }
.hero.has-video .mega{ font-size:clamp(3.4rem, 10vw, 8.5rem); }
.hero-media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-media .hero-poster,
.hero-media canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.hero-media .hero-poster{ object-fit:cover; object-position:50% 46%; }
.hero-media canvas{ opacity:0; transition:opacity .3s var(--ease); }
.hero-media.frames-ready canvas{ opacity:1; }
.hero.has-video::after{
  background:linear-gradient(180deg, rgba(13,17,12,.62) 0%, rgba(13,17,12,.32) 45%, rgba(13,17,12,.94) 100%);
}

/* Scroll cue */
.hero-scroll{
  position:absolute; right:var(--gutter); bottom:clamp(2.5rem,6vh,4.5rem); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--chalk-dim);
}
.hero-scroll .line{
  width:1px; height:44px;
  background:linear-gradient(180deg, var(--green) 0%, rgba(92,176,92,0) 100%);
  transform-origin:top;
}
.anim-ok .hero-scroll .line{ animation:scroll-hint 2.4s var(--ease) infinite; }
@keyframes scroll-hint{
  0%{ transform:scaleY(0); opacity:1; }
  55%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(1); opacity:0; }
}
@media (max-width:700px){ .hero-scroll{ display:none; } }

/* Pin & scrub: .scrub is added by JS only when the frame sequence is
   viable (motion clock proven, no Save-Data, no reduced-motion). The hero
   then holds for ~1.5 viewports while scroll position drives the footage
   start-to-finish exactly once — the copy exits during the first third,
   the frame eases up in scale, the final frame holds for the last beat,
   and the hero releases naturally into the marquee. Without .anim-ok +
   .scrub the hero is a normal static 100dvh with the poster. */
.anim-ok .hero-stage.scrub{ height:250dvh; --hero-p:0; }
.anim-ok .hero-stage.scrub .hero{ position:sticky; top:0; }
.anim-ok .hero-stage.scrub .hero-media{
  transform:scale(calc(1 + var(--hero-p, 0) * .08));
  will-change:transform;
}
.anim-ok .hero-stage.scrub .wrap,
.anim-ok .hero-stage.scrub .hero-scroll{
  transform:translateY(calc(var(--hero-p, 0) * -22vh));
  opacity:calc(1 - var(--hero-p, 0) * 3.2);
}
.anim-ok .hero-stage.scrub .wrap{ will-change:transform,opacity; }

/* Rotating stamp badge (hero flourish) */
.stamp{ position:absolute; top:7.5rem; right:var(--gutter); z-index:1;
  width:118px; height:118px; opacity:.9; }
.stamp text{ font-family:var(--mono); font-size:10.5px; letter-spacing:.32em;
  text-transform:uppercase; fill:var(--chalk); }
.anim-ok .stamp svg{ animation:spin 24s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (max-width:700px){ .stamp{ display:none; } }

/* Load-in sequence (only when .anim-ok) */
.anim-ok .rise{ opacity:0; transform:translateY(22px); animation:rise .7s var(--ease) forwards; }
.anim-ok .rise:nth-child(2){ animation-delay:.12s; }
.anim-ok .rise:nth-child(3){ animation-delay:.24s; }
.anim-ok .rise:nth-child(4){ animation-delay:.36s; }
.anim-ok .rise:nth-child(5){ animation-delay:.48s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* Scroll reveals (only when .anim-ok) */
.anim-ok .reveal{ opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease), transform .55s var(--ease); }
.anim-ok .reveal.in{ opacity:1; transform:none; }
.anim-ok .stagger > *{ opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease), transform .55s var(--ease); }
.anim-ok .stagger.in > *{ opacity:1; transform:none; }
.anim-ok .stagger.in > :nth-child(2){ transition-delay:.08s; }
.anim-ok .stagger.in > :nth-child(3){ transition-delay:.16s; }
.anim-ok .stagger.in > :nth-child(4){ transition-delay:.24s; }
.anim-ok .stagger.in > :nth-child(5){ transition-delay:.32s; }
.anim-ok .stagger.in > :nth-child(6){ transition-delay:.4s; }

/* ---------- Marquee (beer ticker) ---------- */
.marquee{
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  background:var(--ink); overflow:hidden; padding:.9rem 0;
}
.marquee-track{ display:flex; width:max-content; gap:0; }
.anim-ok .marquee-track{ animation:ticker 46s linear infinite; }
.marquee-track > span{
  font-family:var(--display); font-weight:600; font-size:1.25rem;
  text-transform:uppercase; letter-spacing:.08em; white-space:nowrap;
  color:var(--chalk); padding:0 1.1rem; display:flex; align-items:center; gap:2.2rem;
}
.marquee-track .st{ color:var(--green); font-size:.9rem; }
@keyframes ticker{ to{ transform:translateX(-50%); } }
.marquee.mq-light{ background:var(--chalk); border-color:var(--hairline-lt); }
.marquee.mq-light .marquee-track > span{ color:var(--text); }
.marquee.mq-light .st{ color:var(--green-deep); }

/* ---------- Beer chapters (color-blocked, from can art) ---------- */
.chapter{
  --ch-bg:var(--guava); --ch-deep:var(--guava-deep);
  background:var(--ch-bg); color:var(--ink);
  padding:var(--s7) 0; position:relative; overflow:hidden;
}
.chapter .wrap{ display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:900px){ .chapter .wrap{ grid-template-columns:1fr; } }
.chapter.flip .wrap > .ch-copy{ order:2; }
@media (max-width:900px){ .chapter.flip .wrap > .ch-copy{ order:0; } }
.chapter .ch-copy{ display:grid; gap:var(--s3); justify-items:start; position:relative; z-index:1; }
.chapter .eyebrow{ color:var(--ch-deep); }
.chapter h2, .chapter h3{ color:var(--ink); }
.chapter .ed{ color:var(--ch-deep); }
.chapter .meta-row{
  display:flex; gap:var(--s3); flex-wrap:wrap;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
  border-top:2px solid var(--ink); padding-top:var(--s2); width:100%;
  font-variant-numeric:tabular-nums;
}
.chapter .ch-num{
  position:absolute; top:-1.2rem; right:-.5rem; z-index:0;
  font-family:var(--display); font-weight:700;
  font-size:clamp(8rem,22vw,19rem); line-height:1; color:transparent;
  -webkit-text-stroke:1.5px rgba(13,17,12,.22); pointer-events:none;
  user-select:none;
}
@supports not (-webkit-text-stroke:1px black){ .chapter .ch-num{ display:none; } }

/* Polaroid snapshot (their IG collage style) */
.snap{
  background:#FFFDF7; padding:12px 12px 52px;
  box-shadow:0 18px 40px rgba(13,17,12,.28);
  transform:rotate(-2.2deg); position:relative; max-width:440px;
  margin:0 auto;
}
.snap.tilt-r{ transform:rotate(2deg); }
.snap img{ width:100%; }
.snap figcaption{
  position:absolute; left:14px; bottom:14px; right:14px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
  color:#3A3A33; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
a .snap, .snap a{ text-decoration:none; }
.anim-ok .snap{ transition:transform .35s var(--ease); }
.anim-ok a:hover .snap{ transform:rotate(0deg) scale(1.02); }

/* ---------- Tap index (numbered editorial list) ---------- */
.tap-index{ list-style:none; border-top:1px solid var(--hairline); }
.tap-index li{ border-bottom:1px solid var(--hairline); }
.tap-index a{
  --row:var(--green);
  display:grid; grid-template-columns:3.2rem 1fr auto auto;
  gap:var(--s3); align-items:baseline;
  padding:1.05rem var(--s2); text-decoration:none; position:relative;
  transition:background-color .22s var(--ease), color .22s var(--ease);
}
.tap-index .no{ font-family:var(--mono); font-size:.8rem; color:var(--chalk-dim);
  font-variant-numeric:tabular-nums; }
.tap-index .nm{ font-family:var(--display); font-weight:700;
  font-size:clamp(1.5rem,3.2vw,2.4rem); text-transform:uppercase; line-height:1; }
.tap-index .sty{ font-family:var(--mono); font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--chalk-dim); }
.tap-index .abv{ font-family:var(--mono); font-size:.95rem; color:var(--green-bright);
  font-variant-numeric:tabular-nums; }
.tap-index a:hover{ background:var(--row); }
.tap-index a:hover .nm, .tap-index a:hover .no,
.tap-index a:hover .sty, .tap-index a:hover .abv{ color:var(--ink); }
@media (max-width:700px){
  .tap-index a{ grid-template-columns:2.2rem 1fr auto; }
  .tap-index .sty{ display:none; }
}

/* ---------- The Board (full tap list page) ---------- */
.board{
  background:var(--coal); border:1px solid var(--hairline); border-radius:var(--radius);
  border-top:4px solid var(--wood);
  padding:clamp(1.5rem,4vw,3rem);
}
.board-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--s2); margin-bottom:var(--s4);
  padding-bottom:var(--s3); border-bottom:1px solid var(--hairline);
}
.tap-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr;
  gap:var(--s3) var(--s5); }
@media (max-width:820px){ .tap-list{ grid-template-columns:1fr; } }
.tap{ display:grid; gap:.3rem; padding-bottom:var(--s3);
  border-bottom:1px dashed rgba(243,240,228,.12); }
.tap-top{ display:flex; align-items:baseline; gap:.6rem; }
.tap-name{ font-family:var(--display); font-weight:700; font-size:1.5rem;
  text-transform:uppercase; letter-spacing:.02em; }
.tap-name .flag{ color:var(--amber); font-size:1rem; vertical-align:.15em; }
.tap-leader{ flex:1; border-bottom:1px dotted rgba(243,240,228,.28);
  transform:translateY(-.35em); min-width:1.5rem; }
.tap-abv{ font-family:var(--mono); font-size:.95rem; color:var(--green-bright);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.tap-style{ font-family:var(--mono); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--chalk-dim); }
.tap-desc{ color:var(--chalk-dim); font-size:1rem;
  font-family:var(--editorial); font-style:italic; }
.board-foot{ margin-top:var(--s4); display:flex; flex-wrap:wrap; gap:var(--s2);
  align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--chalk-dim); }

/* ---------- Immersive full-bleed section ---------- */
.immersive{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:92dvh; display:flex; align-items:flex-end;
  padding:var(--s7) 0 var(--s6);
}
.immersive .bg{ position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center; }
.immersive::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(13,17,12,.35) 0%, rgba(13,17,12,.88) 85%); }
.immersive .wrap{ width:100%; display:grid; gap:var(--s3);
  grid-template-columns:1.2fr .8fr; align-items:end; }
@media (max-width:900px){ .immersive .wrap{ grid-template-columns:1fr; } }
.immersive .stats-inline{ display:flex; gap:var(--s4); flex-wrap:wrap;
  justify-content:flex-end; }
@media (max-width:900px){ .immersive .stats-inline{ justify-content:flex-start; } }

/* ---------- Week strip ---------- */
.week{ list-style:none; display:grid; grid-template-columns:repeat(6,1fr);
  border-left:1px solid var(--hairline); border-top:1px solid var(--hairline); }
@media (max-width:960px){ .week{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .week{ grid-template-columns:repeat(2,1fr); } }
.week li{ border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  padding:var(--s3); display:grid; gap:.55rem; align-content:start; min-height:11rem; }
.week .d{ font-family:var(--display); font-weight:700; font-size:2rem;
  text-transform:uppercase; line-height:1; }
.week .h{ font-family:var(--mono); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); }
.week p{ font-size:.92rem; color:var(--chalk-dim); }
.week li.today{ background:var(--coal-2); box-shadow:inset 0 3px 0 var(--green); }
.week li.today .d{ color:var(--green-bright); }

/* ---------- Cards ---------- */
.card-grid{ display:grid; gap:var(--s3); grid-template-columns:repeat(3,1fr); }
@media (max-width:960px){ .card-grid{ grid-template-columns:1fr; } }
.card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--coal); border:1px solid var(--hairline); border-radius:var(--radius);
  overflow:hidden;
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
a.card:hover{ transform:translateY(-4px); border-color:rgba(92,176,92,.45); }
.card .thumb{ aspect-ratio:3/2; overflow:hidden; }
.card .thumb img{ width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease); }
a.card:hover .thumb img{ transform:scale(1.04); }
.card .body{ padding:var(--s3); display:grid; gap:.65rem; }
.card .meta{ font-family:var(--mono); font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber); }
.on-light .card{ background:#FFFFFF; border-color:var(--hairline-lt); }
.on-light .card .meta{ color:var(--amber-deep); }

/* ---------- Split feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.split .photo{ border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--hairline); }
.on-light .split .photo{ border-color:var(--hairline-lt); }
.split .photo img{ width:100%; height:100%; object-fit:cover; }
.split .copy{ display:grid; gap:var(--s3); justify-items:start; }
.split .copy p{ margin:0; }

.pull{
  border-left:3px solid var(--green); padding-left:var(--s3);
  font-family:var(--editorial); font-style:italic; font-weight:420;
  font-size:1.3rem; line-height:1.5; max-width:30em;
}
.on-light .pull{ border-color:var(--green-deep); }
.pull cite{ display:block; margin-top:.6rem; font-style:normal;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--chalk-dim); }
.on-light .pull cite{ color:var(--text-soft); }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3);
  border-top:1px solid var(--hairline); padding-top:var(--s4); }
.on-light .stats{ border-color:var(--hairline-lt); }
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat b{ display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(2rem,3.4vw,2.9rem); line-height:1; color:var(--green);
  font-variant-numeric:tabular-nums; }
.on-light .stat b{ color:var(--green-deep); }
.stat span{ font-family:var(--mono); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--chalk-dim); }
.on-light .stat span{ color:var(--text-soft); }

/* ---------- Hours table ---------- */
.hours{ width:100%; border-collapse:collapse; max-width:26rem; }
.hours th, .hours td{ text-align:left; padding:.65rem 0;
  border-bottom:1px solid var(--hairline); font-weight:400; }
.on-light .hours th, .on-light .hours td{ border-color:var(--hairline-lt); }
.hours th{ font-family:var(--mono); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--chalk-dim); }
.on-light .hours th{ color:var(--text-soft); }
.hours td{ text-align:right; font-family:var(--mono); font-size:.9rem;
  font-variant-numeric:tabular-nums; }
.hours tr.today th, .hours tr.today td{ color:var(--green-bright); font-weight:600; }
.on-light .hours tr.today th, .on-light .hours tr.today td{ color:var(--green-deep); }
.hours tr.today th::after{ content:" · today"; font-size:.68rem; letter-spacing:.1em; }

/* ---------- Amenity list ---------- */
.amenities{ list-style:none; display:grid; gap:var(--s2); }
.amenities li{ display:flex; gap:.8rem; align-items:flex-start; }
.amenities svg{ flex:none; width:22px; height:22px; margin-top:.15rem; color:var(--green); }
.on-light .amenities svg{ color:var(--green-deep); }
.amenities b{ display:block; font-weight:600; }
.amenities span{ color:var(--chalk-dim); font-size:.95rem; }
.on-light .amenities span{ color:var(--text-soft); }

/* ---------- Schedule rows ---------- */
.sched{ display:grid; gap:var(--s3); }
.sched-day{
  display:grid; grid-template-columns:110px 1fr auto; gap:var(--s3);
  align-items:center; background:var(--coal);
  border:1px solid var(--hairline); border-left:4px solid var(--green);
  border-radius:var(--radius); padding:var(--s3);
}
@media (max-width:640px){ .sched-day{ grid-template-columns:1fr; gap:.6rem; } }
.sched-date{ font-family:var(--display); font-weight:700; font-size:1.4rem;
  text-transform:uppercase; line-height:1.05; }
.sched-date small{ display:block; font-family:var(--mono); font-weight:500;
  font-size:.72rem; letter-spacing:.2em; color:var(--chalk-dim); margin-top:.3rem; }
.sched-truck b{ font-size:1.1rem; }
.sched-truck p{ color:var(--chalk-dim); font-size:.95rem; margin:.2rem 0 0; }
.sched-time{ font-family:var(--mono); font-size:.85rem; color:var(--amber);
  letter-spacing:.08em; white-space:nowrap; }
.sched-day.tba{ border-left-color:var(--hairline); }
.sched-day.tba .sched-truck b{ color:var(--chalk-dim); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; isolation:isolate; overflow:hidden;
  padding:var(--s7) 0; text-align:center; }
.cta-band .bg{ position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center; }
.cta-band::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(13,17,12,.84); }
.cta-band .wrap{ display:grid; gap:var(--s3); justify-items:center; }
.cta-band .eyebrow{ justify-content:center; }

/* ---------- Newsletter ---------- */
.newsletter{ display:grid; gap:var(--s2); max-width:30rem; }
.newsletter form{ display:flex; gap:.6rem; flex-wrap:wrap; }
.newsletter input{
  flex:1; min-width:200px; min-height:48px; padding:.7rem 1rem;
  background:var(--ink); border:1px solid var(--hairline);
  border-radius:var(--radius); color:var(--chalk);
  font-family:var(--body); font-size:1rem;
}
.newsletter input::placeholder{ color:var(--chalk-dim); }
.newsletter input:focus{ border-color:var(--green); outline:none; }
.newsletter .note{ font-size:.85rem; color:var(--chalk-dim); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); border-top:1px solid var(--hairline);
  padding:var(--s6) 0 var(--s4); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--s5); }
@media (max-width:960px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h3{ font-family:var(--mono); font-weight:500; font-size:.76rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--chalk-dim);
  margin-bottom:var(--s2); }
.footer-grid ul{ list-style:none; display:grid; gap:.55rem; }
.footer-grid a{ text-decoration:none; color:var(--chalk); }
.footer-grid a:hover{ color:var(--green-bright); }
.footer-brand{ display:grid; gap:var(--s2); justify-items:start; }
.footer-brand img{ width:64px; height:64px; }
.footer-brand p{ color:var(--chalk-dim); font-size:.95rem; }
.socials{ display:flex; gap:.8rem; }
.socials a{ display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--hairline);
  border-radius:50%; color:var(--chalk);
  transition:border-color .2s var(--ease), color .2s var(--ease); }
.socials a:hover{ border-color:var(--green); color:var(--green-bright); }
.socials svg{ width:18px; height:18px; }
.footer-legal{ margin-top:var(--s5); padding-top:var(--s3);
  border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:space-between;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em;
  color:var(--chalk-dim); }

/* ---------- Utilities ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }
.mt-2{ margin-top:var(--s2); } .mt-3{ margin-top:var(--s3); }
.mt-4{ margin-top:var(--s4); } .mt-5{ margin-top:var(--s5); }
.center{ text-align:center; }

.strip{
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  background:var(--coal); padding:var(--s3) 0;
}
.strip .wrap{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4);
  align-items:center; justify-content:space-between;
}
.strip .fact{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--chalk-dim);
  display:flex; align-items:center; gap:.7rem;
}
.strip .fact strong{ color:var(--chalk); font-weight:500; }
@media (max-width:640px){
  .strip .fact{ display:block; }
  .strip .fact .gate{ vertical-align:-2px; margin-right:.5rem; }
}