/* ===========================================================
   CONCRETE COFFEE — "The Pour"
   Dark, cinematic, one accent. Mobile first.
   =========================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#0A0A0A;
  --ink-2:#101113;
  --slab:#17181B;
  --slab-2:#1E2024;
  --grey:#6E7074;
  --bone:#EDEBE6;
  --bone-dim:rgba(237,235,230,.56);
  --bone-faint:rgba(237,235,230,.20);
  --hair:rgba(237,235,230,.13);
  --matcha:#8FBF63;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --pad:clamp(22px,5.4vw,80px);
  --maxw:1360px;
  --measure:46ch;

  /* one spacing scale, so nothing is placed by eye */
  --s-1:clamp(6px,1vw,10px);
  --s-2:clamp(10px,1.6vw,16px);
  --s-3:clamp(16px,2.4vw,24px);
  --s-4:clamp(24px,3.4vw,38px);
  --s-5:clamp(36px,5vw,60px);
  --s-6:clamp(56px,8vw,104px);
  --s-7:clamp(84px,13vw,168px);
  /* the room between chapters */
  --bay:clamp(96px,16vw,220px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.72,0,.24,1);

  --nav-h:60px;
}

*,*::before,*::after{box-sizing:border-box}

/* The hidden attribute only reaches display:none via the UA stylesheet, so ANY author
   display rule silently beats it. Several rows here are toggled with el.hidden, so make
   the attribute authoritative. */
[hidden]{display:none !important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--display);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--matcha);color:var(--ink)}

/* keyboard focus only, and always visible against the dark */
:focus-visible{
  outline:2px solid var(--matcha);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- film grain ---------- */
.grain{
  position:fixed;
  inset:-120px;
  z-index:9000;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change:transform;
  animation:grainShift 1.1s steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}
  33%{transform:translate(-14px,9px)}
  66%{transform:translate(11px,-12px)}
  100%{transform:translate(0,0)}
}

/* ---------- typography ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:10px;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--bone-dim);
  margin:0;
  /* a hairline tick makes a label read as a considered mark, not stray text */
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:currentColor;
  opacity:.5;
  flex:none;
}
.eyebrow--bare{display:block}
.eyebrow--bare::before{display:none}
.eyebrow--matcha{color:var(--matcha)}

.h-xl{
  font-size:clamp(3rem,12.4vw,8.2rem);
  font-weight:800;
  font-style:italic;
  line-height:.88;
  letter-spacing:-.042em;
  margin:0;
  text-wrap:balance;
}
.h-lg{
  font-size:clamp(2.3rem,9.2vw,5rem);
  font-weight:800;
  font-style:italic;
  line-height:.92;
  letter-spacing:-.038em;
  margin:0;
  text-wrap:balance;
}
.h-md{
  font-size:clamp(1.4rem,4.2vw,2.4rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0;
}
.body{
  font-size:clamp(1rem,2.4vw,1.1rem);
  line-height:1.68;
  color:var(--bone-dim);
  max-width:var(--measure);
  margin:0;
  text-wrap:pretty;
}
/* a larger opening line, for the one paragraph that carries a section */
.lede{
  font-size:clamp(1.15rem,3.2vw,1.5rem);
  line-height:1.45;
  letter-spacing:-.012em;
  color:var(--bone);
  max-width:24ch;
  margin:0;
  text-wrap:pretty;
}
.body strong{color:var(--bone);font-weight:600}

/* ---------- layout ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.section{padding-block:var(--bay)}
/* a chapter's own opening block: label, headline, one line of prose */
.chap{margin-bottom:var(--s-6)}
.chap .eyebrow{margin-bottom:var(--s-4)}
.chap h2{margin:0 0 var(--s-3)}
.chap .body,.chap .lede{margin-top:var(--s-3)}
.rule{display:none}

/* ===========================================================
   OVERTURE — the drop
   Hidden unless JS turns it on, so a JS failure can never
   leave the page covered.
   =========================================================== */
.overture{display:none}

.js .overture{
  display:block;
  position:fixed;
  inset:0;
  z-index:9500;
  /* No background: the two halves already cover the viewport, so when they part they
     uncover the page itself. A belt-and-braces self-destruct means no JS failure can
     leave this cover sitting over the site. */
  animation:ovKill 0s linear 3.2s forwards;
}
@keyframes ovKill{to{display:none;visibility:hidden}}
.js .overture__drop{
  position:absolute;
  z-index:3;
  left:50%;
  top:34%;
  width:11px;
  height:15px;
  margin-left:-5.5px;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:var(--bone);
  animation:dropFall .62s cubic-bezier(.5,.05,.75,.4) .12s forwards;
}
@keyframes dropFall{
  0%{transform:translateY(-46vh) scaleY(1.5);opacity:0}
  18%{opacity:1}
  92%{transform:translateY(0) scaleY(1)}
  100%{transform:translateY(0) scaleY(.32) scaleX(1.5);opacity:0}
}
.js .overture__ring{
  position:absolute;
  z-index:3;
  left:50%;
  top:34%;
  width:16px;
  height:16px;
  margin:-8px 0 0 -8px;
  border:1px solid var(--bone);
  border-radius:50%;
  opacity:0;
  animation:ripple .9s var(--ease) .72s forwards;
}
.js .overture__ring:nth-of-type(3){animation-delay:.84s}
@keyframes ripple{
  0%{transform:scale(1);opacity:.85}
  100%{transform:scale(26);opacity:0}
}
.js .overture__word{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--bone);
  opacity:0;
  white-space:nowrap;
  animation:wordIn .5s var(--ease) .92s forwards;
}
@keyframes wordIn{
  from{opacity:0;letter-spacing:.62em}
  to{opacity:1;letter-spacing:.42em}
}
.js .overture__half{
  position:absolute;
  left:0;
  right:0;
  height:50.6%;
  background:var(--ink);
  z-index:2;
}
.js .overture__half--t{
  top:0;
  animation:ovT .72s var(--ease-io) 1.5s forwards;
}
.js .overture__half--b{
  bottom:0;
  animation:ovB .72s var(--ease-io) 1.5s forwards;
}
/* `forwards` lives INSIDE the shorthand on purpose — the shorthand
   resets fill-mode, and these panels must stay off-screen. */
@keyframes ovT{to{transform:translateY(-101%)}}
@keyframes ovB{to{transform:translateY(101%)}}

.overture.is-done{display:none}

/* ---------- page wipe between pages ---------- */
.wipe{
  position:fixed;
  inset:0;
  z-index:9400;
  background:var(--ink);
  transform:translateY(101%);
  pointer-events:none;
}
.wipe.is-up{
  animation:wipeUp .52s var(--ease-io) forwards;
}
@keyframes wipeUp{to{transform:translateY(0)}}

/* ===========================================================
   NAV
   =========================================================== */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:8000;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(10,10,10,.78);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--hair);
}
.nav__in{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* wordmark set in type — NOT their real sliced mark */
.wordmark{
  font-weight:800;
  font-size:15px;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
  /* the home link on every page, so it needs a real tap target */
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-left:-2px;
  padding-right:8px;
}
.wordmark > span{
  display:inline-block;
  transform:scaleX(1.06);
  transform-origin:left center;
}

.nav__right{
  display:flex;
  align-items:center;
  gap:var(--s-3);
}

.nav__links{
  display:none;
  gap:30px;
  align-items:center;
}
.nav__link{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone-dim);
  position:relative;
  padding-block:6px;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:var(--matcha);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .42s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--bone)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{
  transform:scaleX(1);
  transform-origin:left;
}

.nav__cta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  border:1px solid var(--bone-faint);
  border-radius:999px;
  padding:10px 18px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  transition:background .34s var(--ease),color .34s var(--ease),border-color .34s var(--ease);
}
.nav__cta:hover,
.nav__cta[aria-current="page"]{background:var(--bone);color:var(--ink);border-color:var(--bone)}

/* ---------- mobile nav ----------
   Below 900px the links were simply hidden, which left Menu and Story
   unreachable from the nav on a phone. This is a real panel, not a shrunk
   desktop bar: full screen, big editorial type, one item per line. */
.nav__burger{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;height:44px;
  margin-right:-10px;
  padding:0 10px;
  align-items:flex-end;
}
.nav__burger span{
  display:block;
  height:1px;
  width:22px;
  background:var(--bone);
  transition:transform .42s var(--ease-io),opacity .24s var(--ease),width .42s var(--ease-io);
}
.nav__burger span:nth-child(2){width:14px}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0;width:22px}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-3px) rotate(-45deg);width:22px}

.nav__panel{
  position:fixed;
  inset:0;
  z-index:-1;
  background:var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--nav-h) var(--pad) var(--s-6);
  opacity:0;
  visibility:hidden;
  transition:opacity .42s var(--ease),visibility .42s;
}
.nav.is-open .nav__panel{opacity:1;visibility:visible}
.nav__panel a{
  font-size:clamp(2.2rem,13vw,3.4rem);
  font-weight:800;
  font-style:italic;
  letter-spacing:-.04em;
  line-height:1;
  padding:var(--s-2) 0;
  color:var(--bone);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.nav.is-open .nav__panel a{opacity:1;transform:none}
.nav.is-open .nav__panel a:nth-child(1){transition-delay:.08s}
.nav.is-open .nav__panel a:nth-child(2){transition-delay:.14s}
.nav.is-open .nav__panel a:nth-child(3){transition-delay:.20s}
.nav.is-open .nav__panel a:nth-child(4){transition-delay:.26s}
.nav__panel a[aria-current="page"]{color:var(--matcha)}
.nav__panel__foot{
  margin-top:var(--s-6);
  padding-top:var(--s-4);
  border-top:1px solid var(--hair);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone-dim);
  line-height:1.9;
}

@media (min-width:900px){
  :root{--nav-h:76px}
  .nav__links{display:flex}
  .nav__burger{display:none}
  .nav__panel{display:none}
}

/* ===========================================================
   HERO — the liquid wordmark
   =========================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:calc(var(--nav-h) + 24px);
  padding-bottom:clamp(28px,7vw,56px);
  overflow:hidden;
  isolation:isolate;
}

/* atmospheric wash. blurred hard on purpose — it is the room, not the subject,
   and the blur is what keeps a 640px source looking deliberate. */
.hero__media{
  position:absolute;
  inset:-8%;
  z-index:-2;
  overflow:hidden;
}
.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:60% 60%;
  filter:blur(38px) brightness(.55) contrast(1.16) saturate(1.4);
  transform:scale(1.24);
  animation:heroDrift 30s ease-out .2s forwards;
}
@keyframes heroDrift{to{transform:scale(1.05)}}
.hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(88% 62% at 64% 40%,transparent 0%,rgba(10,10,10,.58) 58%,rgba(10,10,10,.97) 100%),
    linear-gradient(180deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.12) 34%,rgba(10,10,10,.95) 100%);
}

/* the hero column: eyebrow at the top, mark at the foot, plate between */
.hero__in{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:100%;
}
.hero__foot{display:block}

/* the sharp panel — never scaled past its real pixels */
.hero__plate{
  position:relative;
  width:min(64vw,320px);
  margin:clamp(18px,4vw,30px) 0 clamp(-30px,-5vw,-18px) auto;
  aspect-ratio:640/552;
  border-radius:2px;
  overflow:hidden;
  background:var(--slab);
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 40px 90px -20px rgba(0,0,0,.85),
    0 0 0 1px rgba(237,235,230,.09);
}
.hero__plate img{
  width:100%;height:100%;
  object-fit:cover;
  filter:contrast(1.06) saturate(1.04);
  transform:scale(1.1);
  animation:plateIn 1.5s var(--ease) 1.9s both;
}
@keyframes plateIn{
  from{transform:scale(1.18);opacity:0}
  to{transform:scale(1);opacity:1}
}
.hero__eyebrow{
  font-family:var(--mono);
  font-size:clamp(9.5px,2.4vw,10.5px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--bone-dim);
  margin:0 0 auto;
}
@media (min-width:820px){
  .hero__plate{
    position:absolute;
    right:max(var(--pad),calc(50% - (var(--maxw) / 2) + var(--pad)));
    top:50%;
    transform:translateY(-46%);
    width:min(34vw,400px);
    margin:0;
  }
}

/* the mark: a dim ghost, with a cream "liquid" that rises through it */
.mark{
  position:relative;
  display:block;
  margin:0 0 clamp(18px,4vw,30px);
  font-weight:800;
  font-size:clamp(2.6rem,min(14.6vw,calc((100vw - 2 * var(--pad)) / 6.24)),11rem);
  line-height:.86;
  letter-spacing:-.035em;
  text-transform:uppercase;
  transform:scaleX(1.04);
  transform-origin:left bottom;
}
.mark__base{
  display:block;
  color:transparent;
  -webkit-text-stroke:1px rgba(237,235,230,.42);
}
.mark__fill{
  position:absolute;
  left:0;right:0;bottom:0;
  height:var(--fill,100%);
  overflow:hidden;
  pointer-events:none;
  will-change:height;
  /* wavy top edge = the meniscus. two mask layers: the wave strip,
     then a solid block under it. */
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='9' viewBox='0 0 120 9'%3E%3Cpath d='M0 6 C 15 1, 30 1, 45 5 S 75 10, 90 5.5 S 112 1, 120 4.5 L120 9 L0 9 Z' fill='%23fff'/%3E%3C/svg%3E"),
    linear-gradient(#fff,#fff);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='9' viewBox='0 0 120 9'%3E%3Cpath d='M0 6 C 15 1, 30 1, 45 5 S 75 10, 90 5.5 S 112 1, 120 4.5 L120 9 L0 9 Z' fill='%23fff'/%3E%3C/svg%3E"),
    linear-gradient(#fff,#fff);
  -webkit-mask-size:120px 9px,100% calc(100% - 8px);
  mask-size:120px 9px,100% calc(100% - 8px);
  -webkit-mask-position:0 0,0 100%;
  mask-position:0 0,0 100%;
  -webkit-mask-repeat:repeat-x,no-repeat;
  mask-repeat:repeat-x,no-repeat;
  animation:meniscus 6s linear infinite;
}
@keyframes meniscus{
  from{-webkit-mask-position:0 0,0 100%;mask-position:0 0,0 100%}
  to{-webkit-mask-position:-120px 0,0 100%;mask-position:-120px 0,0 100%}
}
.mark__fill span{
  position:absolute;
  left:0;
  bottom:0;
  display:block;
  white-space:nowrap;
  color:var(--bone);
}

.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2) var(--s-4);
  align-items:center;
  padding-top:var(--s-3);
  border-top:1px solid var(--hair);
  margin-top:var(--s-4);
}
/* the hero's one action */
.hero__act{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-3) var(--s-4);
  margin-top:var(--s-4);
}
.hero__act .btn{min-height:52px}
.hero__tag{
  font-family:var(--mono);
  font-size:clamp(10px,2.6vw,11.5px);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--bone);
}
.hero__place{
  font-family:var(--mono);
  font-size:clamp(10px,2.6vw,12px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bone-dim);
}

/* live open/closed */
.status{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bone-dim);
}
.status__dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--grey);
  flex:none;
}
.status.is-open .status__dot{
  background:var(--matcha);
  box-shadow:0 0 0 0 rgba(143,191,99,.6);
  animation:pulse 2.6s var(--ease) infinite;
}
.status.is-open{color:var(--bone)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(143,191,99,.55)}
  70%{box-shadow:0 0 0 11px rgba(143,191,99,0)}
  100%{box-shadow:0 0 0 0 rgba(143,191,99,0)}
}

.hero__cue{
  position:absolute;
  right:max(var(--pad),calc(50% - (var(--maxw) / 2) + var(--pad)));
  bottom:clamp(28px,7vw,56px);
  display:none;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--bone-dim);
}
.hero__cue i{
  display:block;
  width:1px;height:46px;
  background:linear-gradient(var(--bone-faint),transparent);
  position:relative;
  overflow:hidden;
}
.hero__cue i::after{
  content:"";
  position:absolute;
  left:0;top:-46px;
  width:1px;height:46px;
  background:linear-gradient(transparent,var(--bone));
  animation:cueRun 2.1s var(--ease) infinite;
}
@keyframes cueRun{to{top:46px}}
@media (min-width:900px){.hero__cue{display:flex}}

/* ===========================================================
   SECTION FLOW
   The page used to be chopped up by hard 1px rules between every
   block. These grounds shift tonally instead, so one chapter reads
   into the next as a single continuous scroll rather than a stack
   of separate panels.
   =========================================================== */
.flow{position:relative}
/* a long, very low-contrast lift into the next ground — no visible seam */
.flow::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:clamp(120px,20vw,280px);
  background:linear-gradient(180deg,var(--from,transparent) 0%,transparent 100%);
  pointer-events:none;
}
.flow--lift{--from:rgba(255,255,255,.022)}
.flow--sink{--from:rgba(0,0,0,.5)}

/* the one thread that runs the whole page: a hairline that fills as you scroll,
   the same pour the wordmark does. Desktop only — it needs a gutter to live in. */
.thread{display:none}
@media (min-width:1100px){
  .js .thread{
    display:block;
    position:fixed;
    left:calc(var(--pad) / 2);
    top:0;
    bottom:0;
    width:1px;
    background:var(--hair);
    z-index:40;
    pointer-events:none;
  }
  .js .thread::after{
    content:"";
    position:absolute;
    left:0;right:0;top:0;
    height:var(--run,0%);
    background:linear-gradient(180deg,transparent,var(--matcha));
    opacity:.8;
  }
}

/* ===========================================================
   REVEALS — sections settle in horizontal bands
   =========================================================== */
/* Gated on .js: if the script never runs, these must render in their FINAL state
   rather than staying invisible forever. Same discipline as .overture. */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}

/* image frames wipe open in three bands */
.bands{
  --veil:var(--ink);
  position:relative;
  overflow:hidden;
  background:var(--slab);
  line-height:0;
}

/* No aspect-ratio box and no object-fit here on purpose. Every one of these
   is either a photograph or one of Concrete's own menu posters, and a forced
   frame was cropping words off the posters. They render at their real shape. */
.bands img{
  width:100%;
  height:auto;
  filter:brightness(.92) contrast(1.05) saturate(.92);
}

/* THE REVEAL — a solid curtain lifts off a photograph that is already sharp.
   Nothing fades and nothing blurs: a fade reads as a slow download, and a blur
   resolving into focus reads as a placeholder. Here the image is fully rendered
   the whole time and a panel of the page's own colour slides up off it, so it
   behaves like a physical thing being uncovered. The picture drifts down a
   fraction against the curtain, which is what gives it depth. */
.js .bands__veil{
  position:absolute;
  inset:-1px;
  background:var(--veil);
  transform:translateY(0);
  transition:transform 1.05s var(--ease-io);
  z-index:2;
}
.js .bands img{
  transform:translateY(-2.5%) scale(1.05);
  transition:transform 1.5s cubic-bezier(.16,.84,.3,1);
}
.js .bands.is-in.is-ready .bands__veil{transform:translateY(-100.5%)}
.js .bands.is-in.is-ready img{transform:none}

/* the curtain matches whichever ground the frame sits on */
.sig .bands{--veil:var(--ink-2)}
.visit .bands{--veil:var(--slab)}

/* word-by-word statement */
.js .stmt span{
  display:inline-block;
  opacity:0;
  transform:translateY(.55em) rotate(1.4deg);
  transition:opacity .62s var(--ease),transform .62s var(--ease);
}
.stmt.is-in span{opacity:1;transform:none}

/* ===========================================================
   STATEMENT BLOCK
   =========================================================== */
.statement{
  background:var(--ink);
  text-align:left;
  min-height:min(84svh,720px);
  display:flex;
  align-items:center;
}
.statement__quote{
  font-size:clamp(2.6rem,13.4vw,7rem);
  font-weight:800;
  font-style:italic;
  line-height:.9;
  letter-spacing:-.045em;
  margin:var(--s-5) 0 var(--s-4);
  max-width:13ch;
}
.statement__by{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone-dim);
}

/* ===========================================================
   SIGNATURE — coco puff latte
   =========================================================== */
.sig{background:var(--ink-2)}
.sig__grid{
  display:grid;
  gap:clamp(28px,6vw,64px);
  align-items:center;
}
.sig__media{border-radius:2px;max-width:470px}
.sig__quote{
  font-size:clamp(1.15rem,3.4vw,1.5rem);
  font-style:italic;
  line-height:1.4;
  color:var(--bone);
  border-left:2px solid var(--matcha);
  padding-left:20px;
  margin:0 0 22px;
  max-width:40ch;
}
.sig__cite{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bone-dim);
}
@media (min-width:860px){
  .sig__grid{grid-template-columns:.85fr 1fr}
}

/* ===========================================================
   DRINK RAIL — swipe on mobile, drag-free scroll on desktop
   =========================================================== */
.rail{
  display:flex;
  gap:var(--s-3);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* full-bleed scroller: it is a direct child of .section, so it must align
     itself with .wrap rather than break out of it — a negative margin here
     makes the whole page wider than the viewport. */
  padding-inline:max(var(--pad),calc(50% - (var(--maxw) / 2) + var(--pad)));
  padding-block:4px 8px;
}
.rail::-webkit-scrollbar{display:none}

.card{
  flex:0 0 auto;
  width:min(76vw,330px);
  scroll-snap-align:start;
  background:var(--slab);
  border:1px solid var(--hair);
  border-radius:3px;
  overflow:hidden;
  position:relative;
  transition:border-color .5s var(--ease),transform .6s var(--ease),background .5s var(--ease);
  transform-style:preserve-3d;
}
.card:hover{border-color:rgba(237,235,230,.34);background:var(--slab-2)}
/* the tint lifts on hover, so a drink answers when you reach for it */
.card--type::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 70% at 12% 116%,var(--tint,#2A2D31) 0%,transparent 60%);
  opacity:0;
  transition:opacity .6s var(--ease);
  pointer-events:none;
}
.card:hover.card--type::after{opacity:.55}
.card__media{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--slab-2);
}
.card__media img{
  width:100%;height:100%;
  object-fit:cover;
  filter:brightness(.9) contrast(1.08) saturate(.86);
  transition:transform .9s var(--ease);
}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:20px 20px 24px}
.card__eyebrow{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--matcha);
  margin:0 0 var(--s-2);
}
.card__name{
  font-size:clamp(1.05rem,3.4vw,1.3rem);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.015em;
  margin:0 0 8px;
  text-transform:uppercase;
}
.card__note{
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.55;
  color:var(--bone-dim);
  margin:0;
}
@media (min-width:900px){
  .card{width:340px}
}

/* a real photograph, framed and credited — never stretched past its pixels */
.shot{margin:0}
.shot__frame{
  border-radius:2px;
  border:1px solid var(--hair);
  max-width:640px;
}
.shot__cap{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bone-dim);
  margin-top:var(--s-3);
}
.shot__cap span{color:var(--bone-dim)}

/* Type-led cards. Concrete has no per-drink photograph, and a drawn stand-in
   for a cup reads as a shape, not a drink — so these carry the name instead,
   over a soft wash in that drink's colour. The real lineup photo sits above. */
.card--type{
  min-height:clamp(300px,44vw,360px);
  display:flex;
  align-items:flex-end;
  background:
    radial-gradient(130% 80% at 12% 118%,color-mix(in srgb,var(--tint) 62%,transparent) 0%,transparent 62%),
    linear-gradient(170deg,var(--slab-2) 0%,var(--slab) 100%);
}
.card--type .card__body{padding:var(--s-4) var(--s-4) var(--s-5);width:100%;position:relative;z-index:1}
.card--type .card__name{
  font-size:clamp(1.35rem,4.6vw,1.7rem);
  line-height:1.02;
  letter-spacing:-.022em;
  margin-bottom:var(--s-2);
}
.card--type .card__eyebrow{
  color:var(--bone);
  opacity:.62;
  margin-bottom:auto;
  padding-bottom:60px;
}

.rail-hint{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:var(--s-4);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bone-dim);
}
.rail-hint i{
  display:block;
  width:40px;height:1px;
  background:var(--hair);
  position:relative;
  overflow:hidden;
}
.rail-hint i::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--matcha);
  transform:translateX(-100%);
  animation:hintRun 2.4s var(--ease) infinite;
}
@keyframes hintRun{
  0%{transform:translateX(-100%)}
  60%,100%{transform:translateX(100%)}
}

/* ===========================================================
   FEATURE PANEL (drink of the month)
   =========================================================== */
.feature{
  background:var(--ink);
  position:relative;
}
.feature__grid{
  display:grid;
  gap:clamp(26px,5vw,56px);
  align-items:center;
}
.feature__media{border-radius:2px;max-width:470px}
.feature__list{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  border-top:1px solid var(--hair);
}
.feature__list li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:15px 0;
  border-bottom:1px solid var(--hair);
  font-size:clamp(1rem,2.8vw,1.15rem);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-.01em;
}
.feature__list em{
  font-family:var(--mono);
  font-style:normal;
  font-size:10.5px;
  letter-spacing:.18em;
  color:var(--bone-dim);
  text-transform:uppercase;
  flex:none;
}
@media (min-width:860px){
  .feature__grid{grid-template-columns:1fr .95fr}
}

/* ===========================================================
   VISIT
   =========================================================== */
.visit{background:var(--slab)}
.visit__grid{
  display:grid;
  gap:clamp(30px,5vw,60px);
}
.visit__hours{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--hair);
  max-width:420px;
}
.visit__hours li{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:var(--s-2) 0;
  border-bottom:1px solid var(--hair);
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bone-dim);
}
.visit__hours li.is-today{color:var(--bone)}
.visit__hours li.is-today span:first-child::before{
  content:"";
  display:inline-block;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--matcha);
  margin-right:9px;
  vertical-align:middle;
}
.visit__addr{
  font-size:clamp(1.75rem,6.8vw,2.6rem);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.028em;
  margin:0 0 var(--s-3);
  max-width:16ch;
}
.visit__sub{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone-dim);
  margin:0;
}
@media (min-width:820px){
  .visit__grid{grid-template-columns:1fr 1fr}
}

/* ===========================================================
   BUTTONS
   =========================================================== */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:54px;
  padding:16px 30px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--bone);
  color:var(--ink);
  background:var(--bone);
  transition:color .38s var(--ease);
  will-change:transform;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--matcha);
  transform:translateY(101%);
  transition:transform .46s var(--ease-io);
}
.btn:hover::before{transform:translateY(0)}

.btn--ghost{
  background:transparent;
  color:var(--bone);
  border-color:var(--bone-faint);
}
.btn--ghost::before{background:var(--bone)}
.btn--ghost:hover{color:var(--ink);border-color:var(--bone)}

.quiet{
  position:relative;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bone-dim);
  padding-block:14px;
  transition:color .34s var(--ease);
}
.quiet::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:8px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease-io);
}
.quiet:hover{color:var(--bone)}
.quiet:hover::after{transform:scaleX(1);transform-origin:left}

.btn--wide{width:100%}
@media (min-width:560px){.btn--wide{width:auto}}

/* ===========================================================
   FULL-BLEED PANEL — the one cinematic break in the page
   =========================================================== */
.panel{
  position:relative;
  min-height:clamp(420px,78svh,760px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  background:var(--ink);
}
.panel__media{
  position:absolute;
  inset:-10% 0;
  z-index:-2;
  overflow:hidden;
}
.panel__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%;
  filter:brightness(.62) contrast(1.1) saturate(.92);
  will-change:transform;
}
.panel__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.18) 42%,rgba(10,10,10,.94) 100%);
}
.panel__in{
  width:100%;
  padding-block:var(--s-6);
}
.panel__h{
  font-size:clamp(2.1rem,8.6vw,4.4rem);
  font-weight:800;
  font-style:italic;
  line-height:.96;
  letter-spacing:-.038em;
  margin:var(--s-3) 0 0;
  max-width:15ch;
  text-wrap:balance;
}
.panel__note{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone-dim);
  margin:var(--s-3) 0 0;
}

/* ===========================================================
   COLLECTION HEADER — makes the drinks read as one release
   =========================================================== */
.collection__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-4);
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--hair);
  margin-bottom:var(--s-5);
}
.collection__meta{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bone-dim);
  margin:0;
  text-align:left;
}
@media (min-width:760px){.collection__meta{text-align:right}}

/* ===========================================================
   CLOSING MOMENT — the last thing before the footer.
   A full screen of black, the mark, one line, one action.
   =========================================================== */
.cta{
  background:var(--ink);
  text-align:center;
  min-height:min(92svh,760px);
  display:flex;
  align-items:center;
  padding-block:var(--s-7);
  position:relative;
}
/* the pour, one last time, behind the words */
.cta::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:1px;
  height:clamp(60px,10vw,120px);
  background:linear-gradient(180deg,var(--matcha),transparent);
  opacity:.45;
}
.cta__mark{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--bone-dim);
  margin:0 0 var(--s-5);
}
.cta__h{
  font-size:clamp(2.5rem,12.6vw,6rem);
  font-weight:800;
  font-style:italic;
  line-height:.9;
  letter-spacing:-.045em;
  margin:0 0 var(--s-4);
  text-wrap:balance;
}
.cta__p{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bone-dim);
  margin:0 auto var(--s-5);
  max-width:36ch;
  line-height:1.8;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.foot{
  background:var(--ink);
  padding-block:var(--s-6) var(--s-4);
  border-top:1px solid var(--hair);
}
.foot__grid{
  display:grid;
  gap:var(--s-5);
  margin-bottom:var(--s-6);
}
.foot__mark{
  font-weight:800;
  font-size:clamp(2.8rem,14vw,8rem);
  line-height:.82;
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1px rgba(237,235,230,.3);
  margin:0 0 var(--s-6);
  transform:scaleX(1.04);
  transform-origin:left;
}
.foot__col h3{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--bone-dim);
  margin:0 0 14px;
  font-weight:400;
}
.foot__col p,.foot__col a{
  font-size:14.5px;
  line-height:1.62;
  color:var(--bone);
  margin:0;
  display:block;
}
.foot__col a{
  transition:color .3s var(--ease);
  min-height:auto;
}
.foot__col a:hover{color:var(--matcha)}
.foot__credit{color:var(--bone)}
.foot__note{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.9;
  color:rgba(237,235,230,.56);
  margin:var(--s-3) 0 0;
  max-width:62ch;
}
.foot__base{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  justify-content:space-between;
  padding-top:var(--s-4);
  border-top:1px solid var(--hair);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(237,235,230,.56);
}
@media (min-width:720px){
  .foot__grid{grid-template-columns:repeat(3,1fr)}
}

/* ===========================================================
   SUB-PAGE HEADER
   =========================================================== */
.phead{
  padding-top:calc(var(--nav-h) + clamp(72px,14vw,170px));
  padding-bottom:var(--s-6);
}
.phead .eyebrow{margin-bottom:var(--s-4)}
.phead .body,.phead .lede{margin-top:var(--s-4)}

/* ===========================================================
   MENU PAGE — sticky image, list scrubs it
   =========================================================== */
.menu__layout{display:grid;gap:clamp(24px,4vw,56px)}
.menu__sticky{
  position:relative;
  aspect-ratio:4/5;
  padding:10px;
  background:var(--slab);
  overflow:hidden;
  border:1px solid var(--hair);
  border-radius:2px;
}
.menu__sticky img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:contain;
  opacity:1;
  filter:brightness(.92) contrast(1.05) saturate(.9);
}
/* transitions are armed only after the first poster is already on screen */
.menu__sticky.is-armed img{
  transition:opacity .55s var(--ease),transform .9s var(--ease);
}
.js .menu__sticky.is-armed img{transform:scale(1.03)}
.js .menu__sticky.is-armed img{opacity:0}
.js .menu__sticky.is-armed img.is-on{opacity:1;transform:scale(1)}

.menu__group{margin-bottom:var(--s-7)}
.menu__group h2{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--matcha);
  margin:0 0 var(--s-1);
  font-weight:400;
}
.menu__when{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(237,235,230,.44);
  margin:0 0 var(--s-4);
}
.menu__group{border-top:1px solid var(--hair);padding-top:var(--s-4)}
.menu__items{
  list-style:none;
  margin:0;padding:0;
  border-top:1px solid var(--hair);
}
.menu__item{
  border-bottom:1px solid var(--hair);
  padding:var(--s-3) 0;
  cursor:default;
  position:relative;
  transition:padding-left .5s var(--ease-io);
}
/* a matcha tick draws in beside whichever drink is being looked at */
.menu__item::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(var(--s-3) + .5em);
  width:14px;height:1px;
  background:var(--matcha);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s var(--ease-io);
}
.menu__item.is-active::before{transform:scaleX(1)}
.menu__item h3{
  font-size:clamp(1.2rem,4vw,1.75rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0 0 7px;
  transition:color .35s var(--ease);
}
.menu__item p{
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.6;
  letter-spacing:.05em;
  color:var(--bone-dim);
  margin:0;
  max-width:46ch;
}
.menu__item.is-active{padding-left:26px}
.menu__item.is-active h3{color:var(--matcha)}

.menu__note{
  font-family:var(--mono);
  font-size:11px;
  line-height:1.75;
  letter-spacing:.06em;
  color:var(--bone-dim);
  border:1px solid var(--hair);
  border-left:2px solid var(--matcha);
  padding:20px 22px;
  margin:0;
  max-width:60ch;
}
@media (min-width:900px){
  .menu__layout{grid-template-columns:.8fr 1fr;align-items:start}
  .menu__media-col{
    position:sticky;
    top:calc(var(--nav-h) + 40px);
  }
}

/* ===========================================================
   BOOK PAGE
   =========================================================== */
.track{
  display:grid;
  gap:16px;
  margin-bottom:clamp(36px,6vw,56px);
}
@media (min-width:760px){.track{grid-template-columns:1fr 1fr}}

.track__btn{
  text-align:left;
  border:1px solid var(--hair);
  background:var(--slab);
  border-radius:3px;
  padding:26px 24px 28px;
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease);
  position:relative;
  overflow:hidden;
}
.track__btn:hover{border-color:rgba(237,235,230,.32)}
.track__btn[aria-pressed="true"]{
  border-color:var(--matcha);
  background:var(--slab-2);
}
.track__btn[aria-pressed="true"]::after{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:var(--matcha);
}
.track__btn h3{
  font-size:clamp(1.1rem,3.4vw,1.35rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.015em;
  margin:0 0 9px;
}
.track__btn p{
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.6;
  color:var(--bone-dim);
  margin:0;
}

/* the pour meter = progress */
.pour{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:34px;
}
.pour__tube{
  position:relative;
  flex:1;
  height:3px;
  background:var(--hair);
  border-radius:2px;
  overflow:hidden;
}
.pour__fill{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--p,25%);
  background:var(--matcha);
  transition:width .6s var(--ease-io);
}
.pour__label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone-dim);
  flex:none;
}

.step{display:none}
.step.is-on{display:block;animation:stepIn .5s var(--ease) forwards}
@keyframes stepIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.step__h{
  font-size:clamp(1.5rem,5vw,2.3rem);
  font-weight:800;
  font-style:italic;
  letter-spacing:-.03em;
  line-height:1.04;
  margin:0 0 8px;
}
.step__sub{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bone-dim);
  margin:0 0 28px;
}

.picks{
  display:grid;
  gap:10px;
  margin-bottom:30px;
}
@media (min-width:620px){.picks{grid-template-columns:1fr 1fr}}

.pick{
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--hair);
  background:var(--slab);
  border-radius:3px;
  padding:15px 17px;
  min-height:60px;
  text-align:left;
  transition:border-color .34s var(--ease),background .34s var(--ease);
}
.pick:hover{border-color:rgba(237,235,230,.3)}
.pick[aria-pressed="true"]{border-color:var(--matcha);background:var(--slab-2)}
.pick__box{
  width:17px;height:17px;
  border:1px solid var(--bone-faint);
  border-radius:2px;
  flex:none;
  position:relative;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.pick[aria-pressed="true"] .pick__box{background:var(--matcha);border-color:var(--matcha)}
.pick__box::after{
  content:"";
  position:absolute;
  left:5px;top:1px;
  width:5px;height:10px;
  border:solid var(--ink);
  border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .3s var(--ease);
}
.pick[aria-pressed="true"] .pick__box::after{transform:rotate(45deg) scale(1)}
.pick__name{
  font-size:13.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:1.25;
}

.field{margin-bottom:20px}
.field label{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bone-dim);
  margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%;
  background:var(--slab);
  border:1px solid var(--hair);
  border-radius:3px;
  color:var(--bone);
  font-family:var(--display);
  font-size:16px; /* 16px stops iOS zooming on focus */
  padding:15px 16px;
  min-height:54px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
  -webkit-appearance:none;
  appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23EDEBE6' stroke-width='1.4' fill='none' opacity='.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:42px;
}
.field textarea{min-height:118px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--matcha);
  background:var(--slab-2);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(237,235,230,.3)}
.field__row{display:grid;gap:20px}
@media (min-width:620px){.field__row{grid-template-columns:1fr 1fr}}
.field__hint{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--bone-dim);
  margin:var(--s-2) 0 0;
}

.slots{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:9px;
}
.slot{
  border:1px solid var(--hair);
  background:var(--slab);
  border-radius:3px;
  padding:13px 8px;
  min-height:48px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.slot:hover:not(:disabled){border-color:rgba(237,235,230,.32)}
.slot[aria-pressed="true"]{background:var(--matcha);border-color:var(--matcha);color:var(--ink);font-weight:500}
.slot:disabled{opacity:.26;cursor:not-allowed}

/* a blocked step explains itself instead of silently doing nothing */
.gate{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.06em;
  line-height:1.55;
  color:#F0B7A4;
  border-left:2px solid #F0B7A4;
  padding:10px 0 10px 14px;
  margin:26px 0 0;
}
.field__hint--warn{color:#F0B7A4}

.track__tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--bone-dim);
  border-radius:999px;
  padding:4px 9px;
  margin-bottom:12px;
}
.track__btn[aria-pressed="true"] .track__tag{background:var(--matcha)}

.nav-steps{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid var(--hair);
}

.review{
  border:1px solid var(--hair);
  border-radius:3px;
  background:var(--slab);
  padding:24px;
  margin-bottom:28px;
}
.review dl{margin:0;display:grid;gap:0}
.review div{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:13px 0;
  border-bottom:1px solid var(--hair);
}
.review div:last-child{border-bottom:0;padding-bottom:0}
.review dt{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone-dim);
  flex:none;
}
.review dd{
  margin:0;
  min-width:0;
  overflow-wrap:anywhere;
  font-size:14.5px;
  text-align:right;
  line-height:1.45;
}

.done{
  text-align:center;
  padding:clamp(40px,8vw,72px) 0;
}
.done__ring{
  width:70px;height:70px;
  margin:0 auto 28px;
  border-radius:50%;
  border:1px solid var(--matcha);
  display:grid;
  place-items:center;
  position:relative;
}
.done__ring::after{
  content:"";
  width:16px;height:30px;
  border:solid var(--matcha);
  border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-2px,-3px);
}
.done__note{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  line-height:1.8;
  color:var(--bone-dim);
  max-width:46ch;
  margin:26px auto 0;
  border-top:1px solid var(--hair);
  padding-top:22px;
}

/* ===========================================================
   STORY PAGE
   =========================================================== */
.chapter{
  display:grid;
  gap:var(--s-5);
  padding-block:var(--s-7);
  border-top:1px solid var(--hair);
  align-items:start;
}
.chapter__when{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--matcha);
  margin:0;
  display:flex;
  align-items:center;
  gap:12px;
}
.chapter__when::before{
  content:"";
  width:22px;height:1px;
  background:currentColor;
  opacity:.5;
  flex:none;
}
.chapter__h{
  font-size:clamp(1.8rem,7vw,3.2rem);
  font-weight:800;
  font-style:italic;
  line-height:.98;
  letter-spacing:-.038em;
  margin:var(--s-3) 0 var(--s-3);
}
.chapter__media{border-radius:2px;max-width:430px}
@media (min-width:860px){
  .chapter{grid-template-columns:.34fr 1fr}
  .chapter--flip .chapter__media{order:-1}
}

/* ===========================================================
   CURSOR LABEL — typographic, desktop + fine pointer only.
   Never a floating circle.
   =========================================================== */
.cursor{
  position:fixed;
  top:0;left:0;
  z-index:9200;
  pointer-events:none;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--matcha);
  padding:7px 11px;
  border-radius:999px;
  opacity:0;
  transform:translate(-50%,-50%) scale(.7);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
  white-space:nowrap;
  display:none;
}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block}
}
.cursor.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ===========================================================
   MOTION OFF
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:.001ms !important;
    transition-duration:.001ms !important;
    transition-delay:.001ms !important;
  }
  .grain{animation:none}
  .reveal{opacity:1;transform:none}
  .stmt span{opacity:1;transform:none}
    .js .bands img{transform:none !important}
  .js .bands__veil{display:none !important}
  .hero__media img{transform:none}
  .js .overture{display:none}
  .mark__fill{height:100% !important;animation:none}
}