/* ============================================================
   TOKE It Up Dispensary — Sunland Park, NM
   Art direction: "THE PATIO" / signature scroll: "THE DAY ARC"

   PALETTE IS PROVISIONAL. No brand hex codes were ever supplied
   (brief: "Jeremy will send brand colors"). Everything below was
   sampled by eye from the shop's own photographs in assets/photos:
     - terracotta + sky blue from the totem figure on the storefront
       banner (gbp-01.jpg)
     - dusty rose walls + mint accent wall (gbp-02.jpg)
     - warm oak of the display cases (gbp-03.jpg)
   Swap these tokens the moment real hex codes arrive.
   ============================================================ */

:root{
  /* ground */
  --adobe:#F7EDDF;
  --adobe-d:#F0E1CD;
  --sand:#E9D6BC;
  --paper:#FFF9F0;

  /* earth */
  --clay:#C9603B;
  --clay-d:#9E4527;
  --clay-15:rgba(201,96,59,.15);
  --clay-30:rgba(201,96,59,.3);
  --rose:#D9A08D;

  /* sky / water */
  --turq:#72B0B6;
  --turq-d:#3F7F87;

  /* growth */
  --agave:#2F5A46;
  --agave-d:#1E3D2F;

  /* light */
  --sun:#EE8A38;
  --sun-d:#D96F1E;

  /* ink */
  --ink:#231A15;
  --ink-70:rgba(35,26,21,.7);
  /* --ink-55 is the fine-print token. It was .55, which measured 3.7:1 against the cream
     ground — under the 4.5:1 WCAG AA floor for normal-weight text, and it drives the
     compliance fine print. Raised to .72; the design reads the same and clears AA. */
  --ink-55:rgba(35,26,21,.72);
  --ink-30:rgba(35,26,21,.3);
  --ink-12:rgba(35,26,21,.12);

  --dsp:'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --body:'Figtree', system-ui, -apple-system, sans-serif;
  /* Labels use the display face in tracked capitals: Ajay's standing rule is no monospace labels. */
  --mono:'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --scr:'Fraunces', Georgia, serif;

  --max:1280px;
  --pad:clamp(20px,5vw,72px);
  --r:22px;

  --amb:var(--adobe); /* ambient page light — driven by THE DAY ARC scroll */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--amb);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,1.04vw,17.5px);
  line-height:1.62;
  overflow-x:hidden;
  transition:background-color .9s linear;
}
body.is-locked{overflow:hidden;height:100vh}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.025em;line-height:.94}
p{margin:0 0 1em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--ink);color:var(--adobe);padding:12px 18px}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:4px}

/* ---------- type helpers ---------- */
.dsp{font-family:var(--dsp);font-weight:800;letter-spacing:-.035em;line-height:.9}
.dsp--lg{font-size:clamp(2.5rem,6.2vw,5rem)}
.dsp--xl{font-size:clamp(2.9rem,7.6vw,6.2rem)}
.dsp--mega{font-size:clamp(3.1rem,9.4vw,8.4rem);line-height:.86}
.lede{font-size:clamp(1.13rem,1.6vw,1.4rem);line-height:1.5;color:var(--ink)}

.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay-d);margin:0 0 20px;
}
.eyebrow__dash{width:34px;height:2px;background:var(--clay);flex:none;border-radius:2px}
.eyebrow--onDark{color:rgba(247,237,223,.72)}
.eyebrow--onDark .eyebrow__dash{background:var(--sun)}
.eyebrow--light{color:var(--clay-d)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--dsp);font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  padding:15px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:transform .28s cubic-bezier(.2,.8,.3,1),background-color .25s,color .25s,box-shadow .28s;
  will-change:transform;
}
.btn--solid{background:var(--ink);color:var(--adobe);box-shadow:0 6px 0 0 var(--clay-d)}
.btn--solid:hover{background:var(--clay-d);transform:translateY(-3px);box-shadow:0 9px 0 0 var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--adobe);transform:translateY(-3px)}
.btn--ghostLight{background:transparent;color:var(--adobe);border-color:rgba(247,237,223,.55)}
.btn--ghostLight:hover{background:var(--adobe);color:var(--ink);transform:translateY(-3px)}
.btn--lg{padding:18px 32px;font-size:1.03rem}
.btn--sm{padding:11px 19px;font-size:.85rem;box-shadow:0 4px 0 0 var(--clay-d)}

/* ============================================================
   AGE GATE — locked by default, JS opens it. Fails closed.
   ============================================================ */
.gate{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:#231A15;overflow:hidden}
html.gate-cleared .gate{display:none}
html.gate-cleared body.is-locked{overflow:auto;height:auto}
.gate__field{position:absolute;inset:0}
.gate__field svg{width:100%;height:100%}
.gate__card{
  position:relative;max-width:520px;width:100%;text-align:center;
  background:var(--adobe);border-radius:28px;padding:clamp(28px,5vw,48px);
  border:2px solid var(--ink);box-shadow:0 24px 0 -6px var(--clay-d),0 40px 90px rgba(0,0,0,.5);
}
.gate__mark{font-family:var(--dsp);font-weight:800;font-size:1.5rem;letter-spacing:-.04em;margin:0 0 4px}
.gate__mark span{color:var(--clay-d)}
.gate__rule{height:0;margin:0 auto 22px;width:64px;border-top:3px dotted var(--clay-30)}
.gate__h{font-family:var(--dsp);font-size:clamp(1.9rem,5vw,2.6rem);margin:0 0 14px}
.gate__p{color:var(--ink-70);font-size:.97rem;margin:0 0 26px}
.gate__btns{display:flex;flex-direction:column;gap:10px}
.gate__remember{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;font-size:.85rem;color:var(--ink-70);font-family:var(--mono)}
.gate__fine{margin:22px 0 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;color:var(--ink-55);text-transform:uppercase}

/* ============================================================
   RIBBON
   ============================================================ */
.ribbon{background:var(--ink);color:var(--adobe);overflow:hidden;padding:9px 0;position:relative;z-index:60}
.ribbon__track{display:flex;width:max-content;animation:marq 42s linear infinite}
.ribbon__set{display:flex;align-items:center;white-space:nowrap}
.ribbon b{font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:0 6px}
.ribbon i{color:var(--sun);font-style:normal;padding:0 16px;font-size:.62rem}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:sticky;top:0;z-index:70;
  display:flex;align-items:center;gap:24px;
  padding:12px var(--pad);
  background:color-mix(in srgb,var(--amb) 88%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-12);
}
.hdr__brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.hdr__glyph{width:30px;height:30px;display:block;flex:none}
.hdr__glyph svg{width:100%;height:100%}
.hdr__glyph--lg{width:46px;height:46px}
.hdr__words b{display:block;font-family:var(--dsp);font-weight:800;font-size:1.05rem;letter-spacing:-.035em;line-height:1}
.hdr__words small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55);margin-top:3px}
.hdr__nav{display:flex;gap:22px;margin-left:auto}
.hdr__nav a{
  position:relative;text-decoration:none;font-size:.87rem;font-weight:600;padding:4px 0;color:var(--ink-70);
  transition:color .22s;
}
.hdr__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--clay);transition:right .32s cubic-bezier(.2,.8,.3,1)}
.hdr__nav a:hover{color:var(--ink)}
.hdr__nav a:hover::after{right:0}
.hdr__right{display:flex;align-items:center;gap:14px;flex:none}
.hdr__burger{display:none;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:5px;margin-left:auto}
.hdr__burger span{display:block;width:24px;height:2px;background:var(--ink);transition:transform .3s,opacity .25s}
.hdr__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.statuspill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid var(--ink-12);border-radius:999px;padding:7px 13px;background:var(--paper);
}
.statuspill__dot{width:7px;height:7px;border-radius:50%;background:var(--ink-30);flex:none}
.statuspill.is-open .statuspill__dot{background:#3E9E5F;box-shadow:0 0 0 0 rgba(62,158,95,.6);animation:pulse 2.4s infinite}
.statuspill.is-closed .statuspill__dot{background:var(--clay)}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(62,158,95,0)}100%{box-shadow:0 0 0 0 rgba(62,158,95,0)}}
.statuspill--big{font-size:.82rem;padding:11px 18px;border-color:var(--ink-30)}

.mobnav{display:none;flex-direction:column;gap:2px;padding:10px var(--pad) 26px;background:var(--paper);border-bottom:1px solid var(--ink-12);position:sticky;top:60px;z-index:65}
.mobnav.is-open{display:flex}
.mobnav a{text-decoration:none;font-family:var(--dsp);font-weight:700;font-size:1.35rem;padding:9px 0;border-bottom:1px solid var(--ink-12)}
.mobnav .btn{margin-top:14px;border-bottom:0}

/* ============================================================
   THE DAY ARC — signature scroll rail
   ============================================================ */
.dayarc{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);
  z-index:55;display:flex;flex-direction:column;align-items:center;gap:11px;
  pointer-events:none;
  background:var(--paper);border:1.5px solid var(--ink-12);border-radius:44px;
  padding:15px 11px 13px;box-shadow:0 12px 34px rgba(35,26,21,.13);
}
.dayarc__cap,.dayarc__read{
  font-family:var(--mono);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);
  white-space:nowrap;
}
.dayarc__read{color:var(--clay-d);font-weight:500;writing-mode:vertical-rl;max-height:110px;overflow:hidden}
.dayarc__cap{writing-mode:vertical-rl}
.dayarc__track{position:relative;width:46px;height:min(34vh,260px)}
.dayarc__line{position:absolute;right:9px;top:0;bottom:0;width:2px;background:var(--ink-12);border-radius:2px}
.dayarc__fill{position:absolute;right:9px;top:0;width:2px;height:0;background:linear-gradient(180deg,var(--turq),var(--sun),var(--clay-d));border-radius:2px}
.dayarc__tick{
  position:absolute;left:0;top:calc(var(--p) * 100%);transform:translateY(-50%);
  font-family:var(--mono);font-size:.5rem;letter-spacing:.04em;color:var(--ink-55);white-space:nowrap;
}
.dayarc__tick::after{content:"";position:absolute;right:-9px;top:50%;width:6px;height:1px;background:var(--ink-30)}
.dayarc__tick sup{font-size:.78em}
.dayarc__sun{position:absolute;right:-4px;top:0;width:28px;height:28px;margin-top:-14px}
.dayarc__sun svg{width:100%;height:100%}
/* The rail is fixed for the whole scroll and sits on top of the two full-bleed marquee bands
   (#sixwords and #grandmas). It fades back while either of those is crossing behind it.
   js/motion.js toggles .is-dim. */
.dayarc{transition:opacity .45s ease}
.dayarc.is-dim{opacity:.35}
@media (max-width:1260px){.dayarc{display:none}}

/* ============================================================
   PLATES (photo treatments)
   ============================================================ */
.plate{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--sand)}
.plate img{width:100%;height:100%;object-fit:cover}
.plate__cap{
  position:absolute;right:16px;bottom:16px;z-index:2;
  display:flex;align-items:center;gap:9px;
  background:var(--ink);color:var(--adobe);border-radius:999px;padding:8px 15px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
}
.plate__cap span{color:var(--sun)}
.plate--mesa{
  border-radius:280px 280px 26px 26px;
  border:3px solid var(--ink);
  box-shadow:14px 16px 0 0 var(--clay);
}
/* Biased up so the arch keeps the awning and the OPEN neon and drops the gravel. */
.plate--mesa img{object-position:center 42%}
.plate--soft{border-radius:26px 180px 26px 180px;border:3px solid var(--ink);box-shadow:-12px 14px 0 0 var(--turq)}
.tilt{transform-style:preserve-3d;will-change:transform;transition:box-shadow .3s}

/* stamps / tags */
.stamp{position:absolute;color:var(--ink);width:120px;height:120px}
.stamp svg{width:100%;height:100%;animation:spin 34s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stamp__txt{font-family:var(--mono);font-size:8.4px;letter-spacing:.16em;fill:currentColor}
.stamp__big{font-family:var(--dsp);font-weight:800;font-size:19px;fill:var(--clay-d);letter-spacing:-.03em}
.stamp--est{right:-26px;top:-30px;background:var(--adobe);border-radius:50%;padding:4px}

.tag--hours{
  position:absolute;left:-22px;bottom:38px;
  background:var(--sun);color:var(--ink);border:2.5px solid var(--ink);
  border-radius:14px;padding:12px 18px;transform:rotate(-5deg);
  box-shadow:5px 6px 0 0 var(--ink);text-align:center;
}
.tag--hours b{font-family:var(--dsp);font-weight:800;font-size:1.45rem;letter-spacing:-.04em}
.tag--hours sup{font-size:.55em}
.tag--hours i{font-style:normal;padding:0 4px;opacity:.6}
.tag--hours small{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}

/* chips */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:26px 0 0}
.chips li{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid var(--ink-30);border-radius:999px;padding:8px 15px;
  transition:transform .25s,background-color .25s,color .25s;
}
.chips li:hover{transform:translateY(-3px) rotate(-1.5deg);background:var(--ink);color:var(--adobe)}
.chips--onDark li{border-color:rgba(247,237,223,.32);color:rgba(247,237,223,.9)}
.chips--onDark li:hover{background:var(--sun);color:var(--ink);border-color:var(--sun)}
.chips--amen li{background:var(--paper);border-color:var(--ink-12)}

/* readout strip */
.readout{list-style:none;display:flex;flex-wrap:wrap;gap:0;padding:0;margin:34px 0 0;border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12)}
.readout li{flex:1 1 120px;padding:13px 16px 13px 0;border-right:1px solid var(--ink-12)}
.readout li:last-child{border-right:0}
.readout span{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;color:var(--ink-55);margin-bottom:3px}
.readout b{font-family:var(--mono);font-weight:500;font-size:.9rem;letter-spacing:-.01em}

/* ============================================================
   01 HERO
   ============================================================ */
.hero{position:relative;padding:clamp(46px,7vw,86px) var(--pad) 0;overflow:hidden}
.hero__glow{
  position:absolute;top:-24%;right:-6%;width:min(760px,80vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(238,138,56,.28),rgba(238,138,56,0) 66%);
  pointer-events:none;
}
.hero__grid{
  position:relative;max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,72px);align-items:center;
  padding-bottom:clamp(60px,8vw,110px);
}
.hero__h1{margin:0 0 24px}
/* .hero__brand removed — the shop name is in the header lockup two inches above, and a
   second muted label directly under the eyebrow read as a stray duplicate. The name still
   opens the H1 as visually-hidden text. */
.hero__line{display:block;font-family:var(--dsp);font-weight:800;font-size:clamp(3.1rem,8.6vw,7.4rem);letter-spacing:-.045em;line-height:.85}
.hero__line--alt{color:var(--clay-d)}
.hero__sub{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.5;max-width:34ch;color:var(--ink-70)}
.hero__sub b{color:var(--ink)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 24px}
.hero__note{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--ink-70);margin:0;background:var(--paper);border:1.5px solid var(--ink-12);border-radius:999px;padding:9px 16px}
.hero__note-dot{width:6px;height:6px;border-radius:50%;background:var(--clay);flex:none}

.hero__art{position:relative}
.hero__art .plate{aspect-ratio:4/4.4}
.strata{position:relative;line-height:0;margin-top:-1px}
.strata svg{width:100%;height:clamp(60px,7vw,120px);display:block}

/* ============================================================
   02 COUNTER STRIP
   ============================================================ */
.counterstrip{background:var(--ink);color:var(--adobe);padding:clamp(30px,4vw,48px) var(--pad)}
/* The 1px grid gap IS the divider (the container background shows through), so this box
   cannot take inner padding. It takes the content width directly instead, so its edges land
   on the page's shared x152-1288 rather than running out to x1360. */
.counterstrip__in{max-width:calc(var(--max) - var(--pad) * 2);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(247,237,223,.16)}
.cs{background:var(--ink);padding:6px clamp(14px,2.4vw,30px);transition:background-color .3s}
.cs:hover{background:#2E221B}
.cs__k{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sun);margin-bottom:12px}
.cs__v{font-family:var(--dsp);font-weight:700;font-size:clamp(1.18rem,2.1vw,1.6rem);letter-spacing:-.035em;line-height:1.06;margin:0 0 7px}
.cs__v a{text-decoration:none;border-bottom:2px solid var(--clay);transition:border-color .25s}
.cs__v a:hover{border-color:var(--sun)}
.cs__v sup{font-size:.5em;letter-spacing:0}
.cs__m{margin:0;font-size:.82rem;color:rgba(247,237,223,.6)}

/* ============================================================
   03 THE PATIO
   ============================================================ */
.patio{max-width:var(--max);margin:0 auto;padding:clamp(70px,10vw,140px) var(--pad)}
.patio__head{margin-bottom:clamp(36px,5vw,60px)}
.patio__head .dsp{max-width:15ch}
.patio__body{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(30px,5vw,68px);align-items:start}
.patio__lede p{margin-bottom:1.1em;color:var(--ink-70)}
.patio__lede .lede{color:var(--ink);margin-bottom:1.2em}
.patio__lede em{font-family:var(--scr);font-style:italic;font-size:1.1em;color:var(--clay-d)}
.patio__photo{aspect-ratio:4/3.3;position:sticky;top:96px}

.beats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;margin:clamp(52px,7vw,90px) 0 0;border-top:2px solid var(--ink)}
.beat{position:relative;padding:26px 24px 8px 0;border-right:1px solid var(--ink-12)}
.beat:last-child{border-right:0}
.beat::before{content:"";position:absolute;left:0;top:-2px;width:0;height:4px;background:var(--clay);transition:width .5s cubic-bezier(.2,.8,.3,1)}
.beat:hover::before{width:100%}
.beat__no{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--clay-d);display:block;margin-bottom:14px}
.beat__h{font-family:var(--dsp);font-size:1.32rem;letter-spacing:-.03em;margin:0 0 9px;line-height:1.02}
.beat p{font-size:.93rem;color:var(--ink-70);margin:0}

/* ============================================================
   04 PHILOSOPHY BAND
   ============================================================ */
.band{position:relative;color:var(--adobe);padding:0}
.band--agave{background:var(--agave)}
.band__wave{line-height:0}
.band__wave svg{width:100%;height:clamp(56px,7vw,110px);display:block}
.band__in{max-width:var(--max);margin:0 auto;padding:clamp(8px,1.4vw,20px) var(--pad) clamp(44px,5.4vw,72px)}
.band .dsp--lg,.band .dsp--mega{color:var(--adobe);margin-bottom:0}
/* The headline used to sit alone on the left with ~600px of flat green beside it. The lede
   now travels in a right-hand column, the same pattern #why already uses. */
.band__head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,56px);align-items:end}
.band__head .dsp{max-width:13ch}
.band__lede{margin:0;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;color:rgba(247,237,223,.82)}
.triple{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);margin-top:clamp(34px,4.4vw,56px)}
.triple__col{border-top:2px solid rgba(247,237,223,.28);padding-top:20px;transition:border-color .35s}
.triple__col:hover{border-color:var(--sun)}
.triple__no{font-family:var(--scr);font-style:italic;font-size:1.5rem;color:var(--sun);display:block;margin-bottom:10px;line-height:1}
.triple__col h3{font-family:var(--dsp);font-size:1.28rem;letter-spacing:-.03em;margin:0 0 10px;line-height:1.04}
.triple__col p{font-size:.94rem;color:rgba(247,237,223,.84);margin:0}
/* .68 alpha, not .45 — this is the "nothing here is a health claim" disclaimer and it was
   measuring 2.7:1. It is the single line most likely to be scrutinised on the page. */
.band__fine{margin:26px 0 0;font-family:var(--mono);font-size:.65rem;letter-spacing:.09em;color:rgba(247,237,223,.78);text-transform:uppercase}

/* ============================================================
   05 WHY — menu board rows
   ============================================================ */
/* Vertical rhythm tightened here and on .sixwords / .band--agave: at 1440 these sections
   opened with 140-250px of empty ground, which reads as a section that failed to load
   rather than as breathing room. #hours and #border set the reference rhythm. */
.why{padding:clamp(52px,6.6vw,92px) 0 0}
.why__in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.why__head{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,54px);align-items:end;margin-bottom:clamp(30px,3.4vw,46px)}
.why__head .dsp{max-width:13ch}
.why__note{font-size:.95rem;color:var(--ink-55);margin:0}
.board{border-top:2px solid var(--ink)}
.board__row{
  display:grid;grid-template-columns:auto minmax(180px,1.05fr) 2fr auto;gap:clamp(16px,3vw,44px);
  align-items:baseline;padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--ink-12);
  transition:padding-left .4s cubic-bezier(.2,.8,.3,1),background-color .4s;
}
.board__row:hover{padding-left:18px;background:linear-gradient(90deg,var(--clay-15),transparent 60%)}
.board__no{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--clay-d)}
.board__h{font-family:var(--dsp);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.9rem);letter-spacing:-.04em;line-height:.94}
.board__p{margin:0;color:var(--ink-70);font-size:1rem;max-width:52ch}
.board__tag{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--ink-30);border-radius:999px;padding:5px 11px;color:var(--ink-55);white-space:nowrap;
}
.board__row--hero .board__h{color:var(--clay-d)}
.board__row--hero{background:linear-gradient(90deg,rgba(238,138,56,.12),transparent 70%)}

/* ---------- SIX WORDS — now a quiet band at the foot of #why rather than its own
   numbered section. The six adjectives are evidence for the three reasons above, not a
   separate argument, so this band carries no eyebrow and no display headline. ---------- */
.sixwords{margin-top:clamp(46px,6vw,80px);padding:clamp(34px,4.4vw,58px) 0;background:var(--paper);border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12);overflow:hidden}
.sixwords__head{max-width:var(--max);margin:0 auto;padding:0 var(--pad);text-align:center}
.sixwords__punch{font-family:var(--scr);font-style:italic;font-size:clamp(1.35rem,2.8vw,2.05rem);color:var(--clay-d);margin:0 0 clamp(20px,2.8vw,34px);line-height:1.15}
.wordmarq{overflow:hidden;padding:6px 0}
.wordmarq__track{display:flex;width:max-content;animation:marq 34s linear infinite}
.wordmarq__track span{
  display:flex;align-items:center;white-space:nowrap;
  /* NOT the display face here, and that is deliberate — read before changing.
     These six adjectives are set hollow (transparent fill + text-stroke). Bricolage
     Grotesque's glyphs are drawn from OVERLAPPING CONTOURS: a filled render unions them and
     looks perfect, but stroking traces every contour, so each letter picks up internal
     seams — an isolated capital P renders as "Þ", and every e gets a crossbar running out
     of its left side. It is not a tracking problem; tested at -.045em through .16em the
     seams are identical, and they survive font-kerning:none and lighter weights.
     Figtree at 700 strokes cleanly at every size, so the hollow band uses it. If this ever
     goes back to var(--dsp), it must also go back to a solid fill. */
  font-family:var(--body);font-weight:700;font-size:clamp(2.5rem,7vw,6rem);
  letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:2px var(--ink);
}
.wordmarq__track i{color:var(--sun);-webkit-text-stroke:0;font-style:normal;padding:0 .28em;font-size:.42em}
.sixwords__foot{max-width:56ch;margin:clamp(22px,3vw,36px) auto 0;padding:0 var(--pad);text-align:center;color:var(--ink-55);font-size:.95rem}

/* ============================================================
   07 THE SHELF
   ============================================================ */
.shelf{padding:clamp(70px,10vw,130px) 0 clamp(50px,7vw,90px)}
.shelf__head{max-width:var(--max);margin:0 auto clamp(32px,4vw,52px);padding:0 var(--pad);display:grid;grid-template-columns:1fr .82fr;gap:clamp(26px,4vw,60px);align-items:end}
.shelf__aside p{color:var(--ink-70);font-size:.97rem;margin-bottom:18px}

.scroller{overflow-x:auto;overflow-y:hidden;padding:6px 0 22px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;cursor:grab}
.scroller.is-drag{cursor:grabbing;scroll-snap-type:none}
.scroller::-webkit-scrollbar{height:6px}
.scroller::-webkit-scrollbar-track{background:var(--ink-12);border-radius:9px}
.scroller::-webkit-scrollbar-thumb{background:var(--clay);border-radius:9px}
.scroller__track{display:flex;gap:18px;padding:0 var(--pad);width:max-content}
.cat{
  scroll-snap-align:start;flex:none;width:clamp(250px,25vw,320px);
  background:var(--catA);color:var(--adobe);border-radius:24px;padding:26px 24px 24px;
  border:3px solid var(--ink);box-shadow:8px 9px 0 0 var(--ink);
  display:flex;flex-direction:column;min-height:330px;position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s;
}
.cat::after{content:"";position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;border-radius:50%;background:var(--catB);opacity:.5}
.cat:hover{transform:translate(-3px,-6px);box-shadow:12px 15px 0 0 var(--ink)}
.cat__no{position:relative;z-index:1;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:rgba(247,237,223,.62)}
.cat__icon{position:relative;z-index:1;width:70px;height:70px;margin:16px 0 auto;color:var(--adobe)}
.cat__icon svg{width:100%;height:100%}
.cat__h{position:relative;z-index:1;font-family:var(--dsp);font-weight:800;font-size:1.7rem;letter-spacing:-.04em;margin:22px 0 8px;line-height:1}
.cat__p{position:relative;z-index:1;font-size:.9rem;color:rgba(247,237,223,.8);margin:0 0 16px}
.cat__chip{position:relative;z-index:1;align-self:flex-start;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid rgba(247,237,223,.4);border-radius:999px;padding:6px 12px}

.scroller__ctrl{max-width:var(--max);margin:0 auto;padding:6px var(--pad) 0;display:flex;align-items:center;gap:10px}
.rnd{
  width:46px;height:46px;border-radius:50%;border:2px solid var(--ink);background:transparent;
  font-size:1.05rem;cursor:pointer;transition:background-color .25s,color .25s,transform .25s;color:var(--ink);
}
.rnd:hover{background:var(--ink);color:var(--adobe);transform:translateY(-3px)}
.scroller__hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55);margin-left:6px}

.shelfshot{max-width:var(--max);margin:clamp(44px,6vw,76px) auto 0;padding:0 var(--pad)}
.shelfshot__clip{position:relative;overflow:hidden;border-radius:var(--r);border:3px solid var(--ink);box-shadow:0 14px 0 -4px var(--sand)}
.shelfshot img{width:100%;height:clamp(230px,34vw,440px);object-fit:cover;object-position:center 42%}
.shelfshot__stick{
  position:absolute;right:20px;top:20px;z-index:2;
  background:var(--sun);color:var(--ink);border:2.5px solid var(--ink);border-radius:50%;
  width:96px;height:96px;display:grid;place-items:center;text-align:center;transform:rotate(-11deg);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;
  box-shadow:4px 5px 0 0 var(--ink);
}
.shelfshot figcaption{margin-top:14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55)}

/* ============================================================
   08 GRANDMAS
   ============================================================ */
.grandmas{background:var(--clay-d);color:var(--adobe);padding:clamp(64px,9vw,120px) 0 0;overflow:hidden;position:relative}
.grandmas__in{max-width:var(--max);margin:0 auto;padding:0 var(--pad) clamp(50px,7vw,86px)}
.megaquote{margin:0;position:relative}
.megaquote__mark{position:absolute;left:-.06em;top:-.34em;font-family:var(--scr);font-style:italic;font-size:clamp(5rem,15vw,13rem);line-height:1;color:rgba(247,237,223,.16);pointer-events:none}
.megaquote p{
  font-family:var(--dsp);font-weight:800;font-size:clamp(3rem,10.4vw,9.2rem);letter-spacing:-.05em;line-height:.84;margin:0;
}
.megaquote em{font-family:var(--scr);font-style:italic;font-weight:600;color:var(--sun);letter-spacing:-.02em}
.grandmas__foot{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(20px,4vw,48px);align-items:end;margin-top:clamp(34px,4vw,54px);border-top:2px solid rgba(247,237,223,.28);padding-top:26px}
/* The clay-d ground is light enough that even full cream only reaches 5.4:1, so these two
   run near-opaque — .82 measured 4.2:1 and this is body copy at 16px. */
.grandmas__foot p{margin:0;color:rgba(247,237,223,.94);font-size:1.02rem;max-width:56ch}
.grandmas__foot .grandmas__sig{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,237,223,.94);text-align:right}
.grandmas__marq{border-top:2px solid rgba(247,237,223,.2);overflow:hidden;padding:14px 0;background:rgba(0,0,0,.14)}
.grandmas__track{display:flex;width:max-content;animation:marq 26s linear infinite}
.grandmas__track span{white-space:nowrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(247,237,223,.62)}

/* ============================================================
   09 FIRST VISIT
   ============================================================ */
.first{max-width:var(--max);margin:0 auto;padding:clamp(70px,10vw,130px) var(--pad)}
.first__head{margin-bottom:clamp(36px,5vw,58px)}
.first__head .dsp{max-width:19ch}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px);counter-reset:s}
.step{position:relative;padding-top:12px}
.step__num{width:64px;height:64px;margin-bottom:18px;position:relative}
.step__num::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sand);transition:transform .4s cubic-bezier(.2,.8,.3,1),background-color .4s}
.step:hover .step__num::before{transform:scale(1.14) rotate(-8deg);background:var(--sun)}
.step__num span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--dsp);font-weight:800;font-size:1.6rem;color:var(--ink)}
.step h3{font-family:var(--dsp);font-size:1.25rem;letter-spacing:-.03em;margin:0 0 9px;line-height:1.04}
.step p{margin:0;font-size:.93rem;color:var(--ink-70)}
.first__fine{margin:26px 0 0;font-family:var(--mono);font-size:.65rem;letter-spacing:.09em;color:var(--ink-55);text-transform:uppercase}

/* ============================================================
   10 HOURS
   ============================================================ */
.hours{position:relative;background:transparent}
.hours__body{background:var(--paper);padding-bottom:clamp(60px,8vw,100px)}
.hours__wave{line-height:0}
.hours__wave svg{width:100%;height:clamp(56px,7vw,104px);display:block;margin-bottom:-1px}
.hours__in{max-width:var(--max);margin:0 auto;padding:clamp(30px,4vw,56px) var(--pad) 0;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:start}
.hours__punch{font-family:var(--dsp);font-weight:800;font-size:clamp(2.2rem,5.4vw,4.2rem);letter-spacing:-.045em;color:var(--clay-d);margin:18px 0 20px;line-height:1}
.hours__punch sup{font-size:.42em;letter-spacing:0}
.hours__punch i{font-family:var(--scr);font-style:italic;font-size:.5em;color:var(--ink-55);padding:0 .12em}
.hours__p{max-width:44ch;color:var(--ink-70)}
.hours__live{margin-top:26px}
.hours__mtn{margin:12px 0 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-55)}

.hboard{width:100%;border-collapse:collapse;border-top:2px solid var(--ink)}
.hboard tr{border-bottom:1px solid var(--ink-12);transition:background-color .3s}
.hboard tr:hover{background:var(--adobe-d)}
.hboard th,.hboard td{padding:15px 4px;text-align:left}
.hboard th{font-family:var(--dsp);font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
.hboard td{text-align:right;font-family:var(--mono);font-size:.9rem;color:var(--ink-70)}
.hboard td sup{font-size:.68em}
.hboard tr.is-today{background:var(--sun)}
.hboard tr.is-today th::before{content:"▸ ";color:var(--ink)}
.hboard tr.is-today td{color:var(--ink)}
.hboard__fine{margin:14px 0 0;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55)}

/* ============================================================
   11 COMMUNITY
   ============================================================ */
.community{max-width:var(--max);margin:0 auto;padding:clamp(70px,10vw,130px) var(--pad)}
.community__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,76px);align-items:center}
.community__copy .dsp{margin-bottom:clamp(16px,2vw,26px)}
.community__copy p{color:var(--ink-70)}
.community__copy .lede{color:var(--ink)}
.community__ask{font-family:var(--dsp);font-weight:700;font-size:1.15rem;color:var(--clay-d);letter-spacing:-.02em;margin-top:26px}
.ticketstack{position:relative;padding:14px 0}
.ticket{
  background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;padding:20px 24px;margin-bottom:-14px;
  box-shadow:6px 7px 0 0 var(--ink);position:relative;transition:transform .38s cubic-bezier(.2,.8,.3,1);
}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--adobe);border:2.5px solid var(--ink);margin-top:-9px}
.ticket::before{left:-11px;clip-path:inset(0 0 0 42%)}
.ticket::after{right:-11px;clip-path:inset(0 42% 0 0)}
.ticket--1{transform:rotate(-2.4deg);z-index:3}
.ticket--2{transform:rotate(1.6deg);z-index:2;background:var(--sand)}
.ticket--3{transform:rotate(-1deg);z-index:1;background:var(--turq);color:var(--ink)}
.ticketstack:hover .ticket--1{transform:rotate(-4.5deg) translateX(-10px)}
.ticketstack:hover .ticket--2{transform:rotate(3deg) translateX(12px)}
.ticketstack:hover .ticket--3{transform:rotate(-2.4deg) translateY(8px)}
.ticket span{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--clay-d);margin-bottom:5px}
.ticket b{display:block;font-family:var(--dsp);font-weight:800;font-size:1.42rem;letter-spacing:-.035em;line-height:1}
.ticket i{display:block;font-family:var(--scr);font-style:italic;font-size:.92rem;color:var(--ink-55);margin-top:5px}

/* ============================================================
   12 BORDER
   ============================================================ */
/* The section used to carry the horizontal padding while .border__in carried the max-width,
   so the inner grid ran edge-to-edge of the 1280px box (to x1350 at 1440) instead of stopping
   at the page's shared right edge, x1288 — the DRIVE TIME divider ended up under the fixed
   day-arc rail. Padding now lives inside the max-width box, matching every other section. */
.border{background:var(--adobe-d);padding:clamp(64px,9vw,120px) 0}
.border__in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,72px);align-items:center}
.bordermap{width:100%;height:auto;border-radius:18px;box-shadow:10px 12px 0 0 var(--clay)}
.bm__lbl{font-family:var(--mono);font-size:11px;letter-spacing:.22em;fill:rgba(247,237,223,.55)}
.bm__lbl--river{fill:var(--turq);font-size:10px}
.bm__you{font-family:var(--dsp);font-weight:800;font-size:15px;fill:var(--adobe);letter-spacing:-.01em}
.bm__sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;fill:rgba(247,237,223,.5)}
.border__copy p{color:var(--ink-70)}
.border__warn{background:var(--paper);border-left:4px solid var(--clay);padding:16px 20px;border-radius:0 12px 12px 0;color:var(--ink)!important}
.factrow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;margin:26px 0 0;border-top:1px solid var(--ink-30)}
.factrow li{padding:13px 12px 13px 0;border-right:1px solid var(--ink-12)}
.factrow li:last-child{border-right:0}
.factrow span{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;color:var(--ink-55);margin-bottom:4px}
.factrow b{font-family:var(--dsp);font-weight:700;font-size:1rem;letter-spacing:-.02em}
.border__fine{margin:16px 0 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--ink-55)!important;text-transform:uppercase}

/* ============================================================
   13 VISIT
   ============================================================ */
.visit{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:min(88vh,760px)}
.visit__photo{margin:0;position:relative;overflow:hidden}
.visit__photo img{width:100%;height:100%;object-fit:cover;min-height:340px;object-position:22% center}
.visit__cap{
  position:absolute;left:20px;bottom:20px;z-index:2;
  background:var(--ink);color:var(--adobe);border-radius:999px;padding:8px 16px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
}
.visit__panel{background:var(--ink);color:var(--adobe);padding:clamp(44px,6vw,84px) clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.visit__h{color:var(--adobe);margin-bottom:24px}
.visit__addr{
  font-family:var(--dsp);font-weight:700;font-style:normal;font-size:clamp(1.4rem,2.6vw,2.05rem);
  letter-spacing:-.035em;line-height:1.12;margin-bottom:18px;color:var(--sun);
}
.visit__look{color:rgba(247,237,223,.75);max-width:42ch}
.visit__look em{font-family:var(--scr);font-style:italic;color:var(--adobe)}
.visit__btns{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 32px}
/* the panel is ink — a solid ink button would vanish into it */
.visit__btns .btn--solid{background:var(--sun);color:var(--ink);box-shadow:0 6px 0 0 var(--clay-d)}
.visit__btns .btn--solid:hover{background:var(--adobe);color:var(--ink);box-shadow:0 9px 0 0 var(--clay-d)}
.visit__dl{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin:0;border-top:1px solid rgba(247,237,223,.22);padding-top:24px}
.visit__dl dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sun);margin-bottom:5px}
.visit__dl dd{margin:0;font-size:.93rem;color:rgba(247,237,223,.85)}
.visit__dl a{text-decoration:none;border-bottom:1px solid rgba(247,237,223,.4)}
.visit__dl a:hover{border-color:var(--sun);color:var(--sun)}

/* ============================================================
   14 STILL COMING — one band in place of three
   Replaces .soon (rewards + gift cards), .revw (empty review frames) and .keep (mailing
   list). Those three ran ~2,900px of "we haven't built that yet" back to back and made the
   closing third read as an unfinished shop. Same honesty, one twelfth of the height, and no
   dashed frames drawing the eye to empty slots.
   ============================================================ */
.still{max-width:var(--max);margin:0 auto;padding:clamp(56px,7vw,96px) var(--pad) clamp(30px,4vw,52px)}
.still__head{display:grid;grid-template-columns:1fr .95fr;gap:clamp(22px,4vw,54px);align-items:end;margin-bottom:clamp(28px,3.4vw,44px)}
.still__head .dsp{max-width:12ch}
.still__lede{margin:0;color:var(--ink-70);font-size:1rem}
.still__rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.stillr{
  display:grid;grid-template-columns:minmax(140px,.9fr) 2.4fr auto;gap:clamp(14px,3vw,40px);
  align-items:baseline;padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--ink-12);
  transition:padding-left .4s cubic-bezier(.2,.8,.3,1),background-color .4s;
}
.stillr:hover{padding-left:16px;background:linear-gradient(90deg,var(--clay-15),transparent 60%)}
.stillr__k{font-family:var(--dsp);font-weight:800;font-size:clamp(1.25rem,2.2vw,1.7rem);letter-spacing:-.035em}
.stillr__p{margin:0;color:var(--ink-70);font-size:.95rem;max-width:56ch}
.stillr__a{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;text-decoration:none;color:var(--clay-d);border-bottom:1.5px solid var(--clay-30);
  padding-bottom:2px;transition:color .25s,border-color .25s;
}
.stillr__a:hover{color:var(--ink);border-color:var(--ink)}
.still__note{margin:clamp(20px,2.6vw,30px) 0 0;color:var(--ink-55);font-size:.92rem;max-width:74ch}
.still__note a{color:var(--clay-d);text-underline-offset:3px}

/* ============================================================
   15 FAQ
   ============================================================ */
/* Warm brown ground, not the near-black ink: #visit two sections earlier is already a solid
   ink panel, and eight collapsed rows on the same near-black made this the flattest screen
   on the page. */
/* Padding inside the max-width box, not outside it — otherwise the list runs to x1360 at
   1440 instead of stopping at the page's shared right edge, x1288, and slides under the
   fixed day-arc rail. Same fix as #border. */
.faq{background:#33241C;color:var(--adobe);padding:clamp(64px,8.6vw,116px) var(--pad)}
.faq__head{max-width:calc(var(--max) - var(--pad) * 2);margin:0 auto clamp(34px,4vw,56px);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,4vw,52px);align-items:end}
.faq__head .dsp{max-width:12ch}
.faq .eyebrow{color:rgba(247,237,223,.6)}
.faq .eyebrow__dash{background:var(--sun)}
.faq .dsp{color:var(--adobe)}
.faq__note{margin:0;color:rgba(247,237,223,.6);font-size:.95rem}
/* The border-top IS the visual rule, so this box takes the content width directly (padding
   would push the rule out to the section edge). Lands on x152-1288 like .board. */
.faq__list{max-width:calc(var(--max) - var(--pad) * 2);margin:0 auto;border-top:1px solid rgba(247,237,223,.24)}
.qa{border-bottom:1px solid rgba(247,237,223,.24)}
.qa summary{
  display:flex;align-items:baseline;gap:clamp(14px,2.4vw,32px);cursor:pointer;list-style:none;
  padding:clamp(20px,2.6vw,30px) 0;
  font-family:var(--dsp);font-weight:700;font-size:clamp(1.15rem,2.3vw,1.85rem);letter-spacing:-.035em;line-height:1.1;
  transition:color .25s,padding-left .35s cubic-bezier(.2,.8,.3,1);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";margin-left:auto;color:var(--sun);font-family:var(--dsp);font-weight:600;transition:transform .3s;font-size:1.2em;line-height:1}
.qa[open] summary::after{transform:rotate(45deg)}
.qa summary:hover{color:var(--sun);padding-left:12px}
.qa__no{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--sun);flex:none;line-height:2.2}
.qa__a{padding:0 0 clamp(22px,2.6vw,30px) clamp(30px,5vw,74px);max-width:74ch}
.qa__a p{margin:0;color:rgba(247,237,223,.76);font-size:1rem}
.qa__a a{color:var(--sun)}
.qa__a em{font-family:var(--scr);font-style:italic}
.qa__flag{display:block;margin-top:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,237,223,.7)}

/* ============================================================
   CLOSE
   ============================================================ */
.close{position:relative;text-align:center;padding:clamp(74px,10vw,132px) var(--pad) clamp(120px,15vw,200px);overflow:hidden;background:var(--adobe)}
.close__sun{position:absolute;left:50%;bottom:-118px;width:min(880px,124vw);transform:translateX(-50%);opacity:.34;pointer-events:none}
.close__sun svg{width:100%;height:auto}
.close__in{position:relative;z-index:1;max-width:900px;margin:0 auto}
.close__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--clay-d);margin:0 0 18px}
.close__big{font-family:var(--dsp);font-weight:800;font-size:clamp(2.8rem,8.2vw,7rem);letter-spacing:-.05em;line-height:.86;margin:0 0 22px}
.close__p{color:var(--ink-70);font-size:1.08rem;max-width:44ch;margin:0 auto 30px}
.close__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--ink);color:var(--adobe)}
.ftr__top{max-width:var(--max);margin:0 auto;padding:clamp(50px,7vw,84px) var(--pad) clamp(36px,5vw,56px);display:grid;grid-template-columns:.9fr 2.1fr;gap:clamp(30px,5vw,64px)}
.ftr__name{font-family:var(--dsp);font-weight:800;font-size:1.5rem;letter-spacing:-.04em;margin:16px 0 8px}
.ftr__tag{font-family:var(--mono);font-size:.63rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(247,237,223,.55);margin:0;max-width:38ch;line-height:1.85}
.ftr__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,36px)}
.ftr__col h3{font-family:var(--mono);font-weight:500;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sun);margin:0 0 14px}
.ftr__col a,.ftr__col p,.ftr__col address{display:block;font-style:normal;text-decoration:none;color:rgba(247,237,223,.8);font-size:.92rem;margin:0 0 8px;transition:color .22s}
.ftr__col a:hover{color:var(--sun)}
.ftr__mtn{font-family:var(--mono);font-size:.6rem!important;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,237,223,.7)!important}
.ftr__marq{border-top:1px solid rgba(247,237,223,.2);border-bottom:1px solid rgba(247,237,223,.2);overflow:hidden;padding:11px 0;background:var(--clay-d)}
.ftr__track{display:flex;width:max-content;animation:marq 30s linear infinite}
.ftr__track span{white-space:nowrap;font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;color:var(--adobe);padding-right:0}
.ftr__legal{max-width:var(--max);margin:0 auto;padding:clamp(28px,4vw,46px) var(--pad) clamp(34px,4vw,54px)}
.legal{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 26px}
.legal li{position:relative;padding-left:18px;font-size:.82rem;color:rgba(247,237,223,.62);line-height:1.5}
.legal li::before{content:"▪";position:absolute;left:0;color:var(--sun)}
/* .72, not .4 — the licence line is the one piece of footer text a regulator or a cautious
   customer actually reads, and it was measuring 3.4:1. */
.ftr__lic,.ftr__copy{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:rgba(247,237,223,.72);margin:0 0 6px}
.ftr__lic{color:rgba(247,237,223,.86);letter-spacing:.12em}

/* ============================================================
   REVEAL (GSAP sets .is-in; CSS is the pre-state)
   ============================================================ */
.js-anim [data-split] .word{display:inline-block;overflow:hidden;vertical-align:top}
.js-anim [data-split] .word i{display:inline-block;font-style:inherit;transform:translateY(105%)}
.js-anim .reveal{opacity:0;transform:translateY(26px)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .hero__art{max-width:520px}
  .patio__body,.community__in,.border__in,.hours__in,.why__head,.shelf__head,.faq__head,.band__head,.still__head{grid-template-columns:1fr}
  .band__head{align-items:start;gap:20px}
  .patio__photo{position:static}
  .beats,.steps{grid-template-columns:1fr 1fr}
  .triple{grid-template-columns:1fr}
  .counterstrip__in{grid-template-columns:1fr 1fr}
  .visit{grid-template-columns:1fr}
  .grandmas__foot{grid-template-columns:1fr}
  .grandmas__sig{text-align:left}
  .ftr__top{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .hdr__nav,.hdr__right{display:none}
  .hdr__burger{display:flex}
  .board__row{grid-template-columns:auto 1fr;gap:10px 18px}
  .board__p{grid-column:1/-1}
  .board__tag{grid-column:1/-1;justify-self:start}
  .visit__dl{grid-template-columns:1fr}
  .stillr{grid-template-columns:1fr;gap:6px}
  .stillr__a{justify-self:start;margin-top:4px}
  .factrow{grid-template-columns:1fr 1fr}
  .factrow li:nth-child(2n){border-right:0}
}
@media (max-width:600px){
  .beats,.steps,.counterstrip__in,.ftr__cols{grid-template-columns:1fr}
  .beat,.readout li,.factrow li{border-right:0;border-bottom:1px solid var(--ink-12)}
  .readout li{padding-right:0}
  .stamp--est{width:84px;height:84px;right:-8px;top:-16px}
  .tag--hours{left:-6px;bottom:18px;padding:9px 13px}
  .plate--mesa{border-radius:180px 180px 22px 22px;box-shadow:9px 10px 0 0 var(--clay)}
  .plate--soft{border-radius:22px 110px 22px 110px}
  .hero__art .plate{aspect-ratio:4/4.6}
  .cat{width:min(78vw,290px)}
  .qa__a{padding-left:0}
  .qa summary{font-size:1.12rem;gap:12px}
}

/* ============================================================
   REDUCED MOTION — collapse to a serene static design
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ribbon__track,.wordmarq__track,.grandmas__track,.ftr__track,.stamp svg{animation:none!important}
  .js-anim .reveal{opacity:1!important;transform:none!important}
  .js-anim [data-split] .word i{transform:none!important}
  /* The rail STAYS. js/motion.js sets the sun, the fill and the ambient ground instantly
     from scroll position, so reduced-motion visitors still get the day arc — as a position
     readout rather than as movement. It used to be display:none, which left the shop's
     signature idea unexpressed for the people most likely to notice a missing one. */
  .dayarc{transition:none}
  body{transition:none}
}

/* ============ 10 · THE CREW (28 Sep 2026, staff bios from Jeremy) ============ */
.crew{padding:clamp(70px,10vw,130px) 0 0}
.crew__in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.crew__head{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,54px);align-items:end;margin-bottom:clamp(30px,3.6vw,50px)}
.crew__head .dsp{max-width:14ch}
.crew__lede{margin:0;color:var(--ink-70)}
.crew__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.crew__card{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:6px 6px 0 var(--clay);display:flex;flex-direction:column;transition:box-shadow .25s ease}
.crew__card:hover{box-shadow:9px 9px 0 var(--sun)}
.crew__card:nth-child(2){margin-top:28px}
.crew__card:nth-child(4){margin-top:28px}
.crew__photo{aspect-ratio:4/5;overflow:hidden;background:var(--sand);border-bottom:1.5px solid var(--ink)}
.crew__photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05)}
.crew__body{padding:18px 18px 22px}
.crew__role{margin:0 0 6px;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-d)}
.crew__name{margin:0 0 10px;font-family:var(--dsp);font-weight:800;font-size:clamp(1.35rem,1.9vw,1.7rem);letter-spacing:-.03em;line-height:1}
.crew__bio{margin:0;font-size:.98rem;line-height:1.55;color:var(--ink-70)}
@media (max-width:1000px){.crew__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.crew__card:nth-child(n){margin-top:0}.crew__head{grid-template-columns:1fr}}
@media (max-width:560px){.crew__grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}}

/* ============ 05 · THE MISSION ============
   Sticky statement on the left whose words ink in as you scroll; the four parts of the
   statement fold up out of the page on the right, and the index beside the quote tracks
   whichever part is in view. */
.mission{max-width:var(--max);margin:0 auto;padding:clamp(70px,9vw,130px) var(--pad) clamp(60px,8vw,110px)}
.mission__in{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(34px,5.5vw,84px);align-items:start}
.mission__rail{position:sticky;top:104px}
.mission__rail .dsp{max-width:12ch;margin-bottom:clamp(20px,2.4vw,32px)}
.mission__quote{margin:0;padding:0 0 0 clamp(16px,1.8vw,26px);border-left:3px solid var(--clay)}
.mission__ink{margin:0;font-family:var(--scr);font-style:italic;font-weight:500;font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.28;letter-spacing:-.01em;color:var(--ink)}
.mission__ink .iw{transition:color .25s linear}
.mission__index{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;display:grid;gap:4px}
.mission__index li{display:flex;align-items:baseline;gap:14px;padding:9px 0;border-top:1px solid var(--ink-12);font-family:var(--dsp);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink-55);transition:color .35s ease,padding .35s ease}
.mission__index li b{font-weight:700;font-size:.72rem;letter-spacing:.16em;color:var(--clay-d);min-width:2.2em}
.mission__index li.is-on{color:var(--ink);padding-left:10px}
.mission__clauses{display:grid;gap:clamp(18px,2.2vw,28px);perspective:1100px}
.clause{position:relative;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);padding:clamp(24px,2.8vw,38px) clamp(22px,2.8vw,40px) clamp(24px,2.6vw,34px);box-shadow:8px 8px 0 var(--ink);transform-origin:50% 100%;overflow:hidden}
.clause::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--c,var(--clay))}
.clause--sun{--c:var(--sun)}
.clause--clay{--c:var(--clay)}
.clause--turq{--c:var(--turq)}
.clause--agave{--c:var(--agave)}
.clause__no{display:block;font-family:var(--dsp);font-weight:800;font-size:clamp(2.6rem,4.4vw,3.8rem);line-height:.8;letter-spacing:-.05em;color:var(--c);margin-bottom:14px}
.clause__h{font-family:var(--dsp);font-weight:800;font-size:clamp(1.4rem,2.3vw,1.95rem);letter-spacing:-.035em;line-height:1;margin-bottom:14px}
.clause p{margin:0;color:var(--ink-70);font-size:1.02rem;line-height:1.6}
.clause__link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--dsp);font-weight:700;color:var(--clay-d);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.clause__link::after{content:"↓";transition:transform .3s ease}
.clause__link:hover::after{transform:translateY(3px)}
.mission__sign{margin-top:clamp(46px,6vw,84px);padding-top:clamp(26px,3vw,38px);border-top:2px solid var(--ink);display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(20px,4vw,56px);align-items:end}
.mission__close{margin:0;font-family:var(--dsp);font-weight:700;font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.22;letter-spacing:-.025em;max-width:40ch}
.mission__culture{margin:0;text-align:right;font-family:var(--dsp);font-weight:700;font-size:1rem;color:var(--ink)}
.mission__culture span{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--clay-d);margin-bottom:6px}
.mission__culture i{font-style:normal;color:var(--clay);margin:0 .5em}
@media (max-width:1080px){
  .mission__in{grid-template-columns:1fr}
  .mission__rail{position:static}
  .mission__index{display:none}
  .mission__sign{grid-template-columns:1fr}
  .mission__culture{text-align:left}
}
@media (max-width:600px){
  .clause{box-shadow:5px 5px 0 var(--ink)}
}

/* ============ 30 Sep 2026 · shelf photos, inside the shop, Sunland Park Toke News ============ */
.shelf__btns{display:flex;flex-wrap:wrap;gap:12px}
.cat{min-height:0}
.cat__ph{position:relative;z-index:1;height:190px;margin:14px 0 2px;display:flex;align-items:center;justify-content:center}
.cat__ph img{height:100%;width:auto;max-width:100%;object-fit:cover;border-radius:12px;border:2.5px solid var(--ink);box-shadow:6px 7px 0 rgba(0,0,0,.28);transform:rotate(-2.5deg);transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.cat:nth-child(even) .cat__ph img{transform:rotate(2deg)}
.cat:hover .cat__ph img{transform:rotate(0) scale(1.04)}
.cat__h{margin:18px 0 8px}
.cat__a{color:inherit;text-decoration:none}
.cat__a::after{content:"";position:absolute;inset:0;z-index:4}
.cat:focus-within{outline:3px solid var(--sun);outline-offset:4px}

.inside{max-width:var(--max);margin:0 auto;padding:clamp(60px,8vw,110px) var(--pad) clamp(30px,5vw,70px)}
.inside__head{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(22px,4vw,56px);align-items:end;margin-bottom:clamp(28px,3.4vw,48px)}
.inside__head .dsp{max-width:13ch}
.inside__lede{margin:0;color:var(--ink-70);font-size:1.05rem}
.inside__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(60px,6.6vw,92px);gap:clamp(12px,1.6vw,20px);perspective:1200px}
.inside__ph{position:relative;margin:0;border-radius:18px;overflow:hidden;border:2px solid var(--ink);box-shadow:6px 7px 0 var(--ink);background:var(--sand)}
.inside__ph img{width:100%;height:100%;object-fit:cover;display:block}
.inside__ph figcaption{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:8px;background:var(--ink);color:var(--adobe);border-radius:999px;padding:7px 14px;font-family:var(--dsp);font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.inside__ph figcaption span{color:var(--sun)}
.inside__ph--a{grid-column:1 / 8;grid-row:span 4}
.inside__ph--b{grid-column:8 / 13;grid-row:span 4}
.inside__ph--c{grid-column:1 / 6;grid-row:span 3}
.inside__ph--d{grid-column:6 / 13;grid-row:span 3}
.inside__ph--e{grid-column:1 / 13;grid-row:span 2}
.inside__ph--e img{object-position:center 40%}
@media (max-width:760px){
  .inside__head{grid-template-columns:1fr}
  .inside__grid{grid-template-columns:1fr 1fr;grid-auto-rows:110px}
  .inside__ph--a,.inside__ph--d{grid-column:1 / 3;grid-row:span 2}
  .inside__ph--b,.inside__ph--c{grid-column:auto;grid-row:span 2}
  .inside__ph--e{grid-column:1 / 3;grid-row:span 1}
  .inside__ph figcaption{font-size:.62rem;padding:6px 11px;left:8px;bottom:8px}
}

.news{padding:clamp(60px,8vw,110px) var(--pad)}
.news__in{max-width:var(--max);margin:0 auto;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);box-shadow:10px 12px 0 var(--ink);padding:clamp(22px,3.2vw,46px)}
.news__mast{text-align:center;border-bottom:4px double var(--ink);padding-bottom:14px;margin-bottom:clamp(20px,2.6vw,32px)}
.news__mast .eyebrow{justify-content:center}
.news__title{font-family:var(--scr);font-style:italic;font-weight:600;font-size:clamp(2.2rem,6.6vw,5.8rem);letter-spacing:-.035em;line-height:.95;margin:8px 0 16px}
.news__dateline{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1.5px solid var(--ink);padding-top:10px;margin:0;font-family:var(--dsp);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70)}
.news__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.news__col{padding:0 clamp(14px,1.8vw,26px);border-left:1.5px solid var(--ink-30);min-width:0}
.news__col:first-child{border-left:0;padding-left:0}
.news__col:last-child{padding-right:0}
.news__k{font-family:var(--dsp);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;line-height:1.1;margin:0 0 12px;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.news__big{margin:0 0 12px}
.news__list{list-style:none;margin:0 0 8px;padding:0}
.news__list li{padding:8px 0;border-bottom:1px dashed var(--ink-30);font-weight:600;font-size:.95rem}
.news__list time{display:block;font-family:var(--dsp);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-d)}
.news__list:has(li) + .news__default{display:none}
.news__default{font-size:.95rem;color:var(--ink-70);margin:0 0 12px}
.news__links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.news__links a{display:block;text-decoration:none;border:1.5px solid var(--ink);border-radius:12px;padding:10px 12px;transition:background .2s ease,transform .2s ease}
.news__links a:hover{background:var(--adobe-d);transform:translateY(-2px)}
.news__links b{display:block;font-family:var(--dsp);font-size:1.02rem;letter-spacing:-.01em}
.news__links span{display:block;font-size:.85rem;color:var(--ink-70)}
.news__wxnow{font-size:.97rem;margin:0 0 12px;color:var(--ink-70)}
.news__wxnow b{display:block;font-family:var(--dsp);font-weight:800;font-size:1.7rem;letter-spacing:-.03em;line-height:1.05;margin-bottom:4px;color:var(--ink)}
.news__alerts{list-style:none;margin:0 0 12px;padding:0}
.news__alerts li{background:var(--sun);color:var(--ink);border:1.5px solid var(--ink);border-radius:10px;padding:8px 10px;margin-bottom:6px;font-weight:700;font-size:.9rem;line-height:1.3}
.news__alerts li small{display:block;font-weight:500;font-size:.8rem;margin-top:2px}
.news__src{font-size:.88rem;margin:0}
.news__src a,.news__stories a{color:var(--clay-d);font-weight:600}
.news__stories{list-style:none;margin:0;padding:0}
.news__stories li{padding:0 0 12px;margin-bottom:12px;border-bottom:1px dashed var(--ink-30)}
.news__stories li:last-child{border-bottom:0;margin-bottom:0}
.news__stories b{display:block;font-family:var(--dsp);font-size:1.08rem;letter-spacing:-.015em;line-height:1.15;margin-bottom:4px}
.news__stories p{margin:0;font-size:.92rem;color:var(--ink-70)}
@media (max-width:1080px){
  .news__cols{grid-template-columns:1fr 1fr;row-gap:30px}
  .news__col:nth-child(3){border-left:0;padding-left:0}
  .news__col:nth-child(2){padding-right:0}
}
@media (max-width:640px){
  .news__cols{grid-template-columns:1fr;row-gap:26px}
  .news__col{border-left:0;padding:0}
  .news__dateline{justify-content:center;text-align:center}
}

.community__photo{aspect-ratio:1200/1253;max-width:470px;justify-self:center;border:3px solid var(--ink);box-shadow:-12px 14px 0 var(--sun);transform:rotate(1.2deg)}
.community__press{font-size:.95rem;margin:14px 0 0}
.community__press a{color:var(--clay-d);font-weight:600}