@import url('../fonts/fonts.css');

/* ============================================================
   TWENTY — design system
   Canvas: warm cream. Accent: #CBBBA0, rationed to bands + rules.
   Stage: pure #000 — matches the product photography background,
   so the cups float in the same void as the page.
   Elevation by value only. No shadows. No decorative motion.
   ============================================================ */

:root{
  --cream:#F7F4EE;
  --cream-deep:#EFEAE1;
  --paper:#FFFFFF;
  --beige:#CBBBA0;
  --beige-soft:#E2D8C7;
  --beige-line:#DCD3C4;
  --ink:#141210;
  --stage:#000000;
  --muted:#6B6459;
  --muted-inv:#8F887C;
  --line:#DFD9CE;
  --line-inv:#2A2825;

  --wrap:1240px;
  --gutter:clamp(20px,5vw,56px);
  --section:clamp(88px,11vw,168px);
  --header:60px;

  --f-display:'Outfit',system-ui,-apple-system,sans-serif;
  --f-text:'Inter',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header) + 64px)}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--beige); color:var(--ink)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; margin:0; text-wrap:balance}
.display{font-size:clamp(3.1rem,8.6vw,6.4rem); line-height:0.96; letter-spacing:-0.035em; font-weight:600}
.h1{font-size:clamp(2.5rem,6vw,4.4rem); line-height:1.02; letter-spacing:-0.032em}
.h2{font-size:clamp(1.9rem,4.2vw,3.1rem); line-height:1.06; letter-spacing:-0.028em}
.h3{font-size:clamp(1.35rem,2.2vw,1.75rem); line-height:1.15; letter-spacing:-0.022em}
.lead{font-size:clamp(1.1rem,1.55vw,1.4rem); line-height:1.45; letter-spacing:-0.015em; font-weight:300; color:var(--ink); max-width:44ch; text-wrap:pretty}
p{margin:0 0 1.1em; max-width:64ch; text-wrap:pretty}
p:last-child{margin-bottom:0}
.muted{color:var(--muted)}
.small{font-size:15px; line-height:1.6}

/* the brand's own lockup voice: wide-tracked caps (see "YOUR DAILY BOOST") */
.eyebrow{
  font-family:var(--f-text); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.2em; color:var(--muted);
  margin:0 0 clamp(18px,2.4vw,30px); max-width:none; text-wrap:balance;
}
.eyebrow--inv{color:var(--beige)}

/* claim line — italic, taken from TWENTY's own poster typography */
.claim{font-family:var(--f-display); font-style:italic; font-weight:400; font-size:clamp(1.05rem,1.5vw,1.3rem); letter-spacing:-0.015em; color:var(--muted)}
.claim--inv{color:var(--beige)}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.wrap--wide{max-width:1520px}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(56px,7vw,104px)}
.band-cream{background:var(--cream); color:var(--ink)}
.band-paper{background:var(--paper); color:var(--ink)}
.band-beige{background:var(--beige); color:var(--ink)}
.band-stage{background:var(--stage); color:#fff}
.band-stage .muted,.band-stage p.muted{color:var(--muted-inv)}
.band-stage .eyebrow{color:var(--beige)}
.rule{height:1px; background:var(--line); border:0; margin:0}
.band-stage .rule{background:var(--line-inv)}

.cols{display:grid; gap:clamp(28px,4vw,72px)}
@media (min-width:860px){
  .cols--2{grid-template-columns:1fr 1fr}
  .cols--split{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}
  .cols--aside{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}

/* ---------- actions ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--cream);
  font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:0.16em;
  padding:14px 26px; border-radius:999px;
  transition:background .15s ease, color .15s ease;
}
.btn:hover{background:#332e27}
.btn--inv{background:var(--cream); color:var(--ink)}
.btn--inv:hover{background:var(--beige)}
.btn--beige{background:var(--beige); color:var(--ink)}
.btn--beige:hover{background:#bda98a}
.btn[aria-disabled="true"]{background:var(--beige-soft); color:var(--muted); pointer-events:none}

.link{
  display:inline-flex; align-items:baseline; gap:.45em;
  font-size:15px; letter-spacing:-0.01em;
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .15s ease;
}
.link::after{content:'\203A'; font-size:1.15em; line-height:1; transform:translateY(1px)}
.link:hover{border-bottom-color:currentColor}
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,2.4vw,32px)}

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:80;
  height:var(--header);
  background:transparent;
  transition:background .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-solid{
  background:rgba(247,244,238,.82);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line);
}
.site-header.is-open{
  background:var(--cream);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}
.nav{display:flex; align-items:center; justify-content:space-between; height:var(--header); gap:24px}
.nav__logo img{height:17px; width:auto}
.nav__list{display:none; list-style:none; margin:0; padding:0; align-items:center; gap:clamp(14px,1.9vw,30px)}
.nav__link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:0.15em;
  padding:6px 0; color:var(--ink); opacity:.78;
  border-bottom:1px solid transparent;
  transition:opacity .15s ease, border-color .15s ease;
}
.nav__link:hover,.nav__item.is-open .nav__link,.nav__link[aria-current="page"]{opacity:1}
.nav__link[aria-current="page"]{border-bottom-color:var(--ink)}
.nav__caret{width:5px; height:5px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translate(-1px,-1px); opacity:.55}
.nav__right{display:flex; align-items:center; gap:14px}
.nav__cta{padding:10px 20px; font-size:11px}

.mega{
  position:absolute; left:0; right:0; top:var(--header);
  width:100%;
  background:var(--cream); opacity:1;
  border-bottom:1px solid var(--line);
  display:none;
}
.nav__item.is-open .mega{display:block}
.mega__inner{display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,72px); padding-block:34px 40px}
.mega__link{
  font-family:var(--f-display); font-size:clamp(1.05rem,1.7vw,1.4rem); font-weight:500;
  letter-spacing:-0.022em; border-bottom:1px solid transparent; padding-bottom:3px;
  transition:border-color .15s ease;
}
.mega__link:hover{border-bottom-color:var(--ink)}
.mega__note{width:100%; margin-top:6px; font-size:12px; color:var(--muted)}

.burger{display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:26px; height:26px}
.burger span{display:block; height:1.5px; background:var(--ink); transition:transform .2s ease, opacity .2s ease}
.is-menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.is-menu-open .burger span:nth-child(2){opacity:0}
.is-menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{
  position:fixed; inset:var(--header) 0 0 0; z-index:70;
  background:var(--cream); overflow-y:auto;
  display:none; padding:clamp(28px,6vw,56px) 0 80px;
}
.is-menu-open .drawer{display:block}
.drawer__group{border-top:1px solid var(--line); padding-block:20px}
.drawer__group:last-of-type{border-bottom:1px solid var(--line)}
.drawer__title{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  font-family:var(--f-display); font-size:1.5rem; font-weight:500; letter-spacing:-0.028em;
}
.drawer__sub{list-style:none; margin:14px 0 4px; padding:0; display:grid; gap:10px}
.drawer__sub a{font-size:16px; color:var(--muted)}
.drawer__cta{margin-top:32px}

@media (min-width:1080px){
  .nav__list{display:flex}
  .burger{display:none}
  .drawer{display:none !important}
}

/* ---------- hero ---------- */
.hero{padding-top:calc(var(--header) + clamp(56px,9vw,120px)); padding-bottom:0; text-align:center}
.hero .lead{margin-inline:auto}
.hero__actions{justify-content:center; margin-top:clamp(28px,3.4vw,44px)}
.hero__shot{margin-top:clamp(24px,4vw,56px); padding-bottom:clamp(48px,7vw,96px)}
.hero__shot img{width:100%; max-width:1180px; margin-inline:auto}

/* ---------- statement band ---------- */
.statement{font-family:var(--f-display); font-weight:500; font-size:clamp(1.9rem,4.6vw,3.4rem); line-height:1.08; letter-spacing:-0.03em; max-width:20ch; text-wrap:balance}

/* ---------- product rail ---------- */
.rail{
  display:flex; gap:clamp(24px,3vw,48px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--gutter); padding-bottom:8px;
  margin-inline:calc(var(--gutter) * -1);
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail__item{flex:0 0 min(76vw,392px); scroll-snap-align:center}
.rail__item img{width:100%; height:clamp(300px,42vw,470px); object-fit:contain; object-position:bottom}
.rail__meta{margin-top:22px}
.rail__name{font-family:var(--f-display); font-size:clamp(1.5rem,2.4vw,2rem); font-weight:600; letter-spacing:-0.03em; margin:0 0 6px}
.rail__ing{margin-top:12px; font-size:13.5px; line-height:1.55; color:var(--muted-inv); max-width:36ch}
.rail__tag{font-size:11px; text-transform:uppercase; letter-spacing:0.18em; color:var(--beige); margin-bottom:12px}
.rail-nav{display:none; gap:10px}
html:not(.has-pin) .rail-nav{display:flex}
.rail-nav button{
  width:40px; height:40px; border:1px solid var(--line-inv); border-radius:999px;
  display:grid; place-items:center; color:#fff;
  transition:background .15s ease, border-color .15s ease;
}
.rail-nav button:hover{background:#1a1a1a; border-color:#454545}
.rail-nav button:disabled{opacity:.3; cursor:default}
.rail-nav svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.4}

/* ---------- product stage (menu) ---------- */
.stage{display:grid; gap:clamp(32px,5vw,80px); align-items:center; padding-block:clamp(64px,8vw,120px); border-top:1px solid var(--line-inv)}
.stage:first-of-type{border-top:0}
.stage__shot img{width:100%; max-width:520px; margin-inline:auto}
@media (min-width:880px){
  .stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .stage--flip .stage__shot{order:2}
}
.stage__no{font-family:var(--f-display); font-size:12px; letter-spacing:0.2em; color:var(--muted-inv); margin-bottom:20px}
.stage__ing{margin-top:26px; font-size:16px; line-height:1.7; color:var(--muted-inv); max-width:40ch}
.stage__ing dt{font-size:11px; text-transform:uppercase; letter-spacing:0.18em; color:var(--beige); margin-bottom:8px}
.stage__ing dd{margin:0}

/* ---------- sticky sub-nav ---------- */
.subnav{position:sticky; top:var(--header); z-index:60; background:rgba(247,244,238,.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--line)}
.subnav__inner{display:flex; align-items:center; justify-content:space-between; gap:24px; height:52px; overflow-x:auto; scrollbar-width:none}
.subnav__inner::-webkit-scrollbar{display:none}
.subnav__list{display:flex; gap:clamp(16px,2.4vw,32px); list-style:none; margin:0; padding:0}
.subnav__list a{
  display:block; font-size:12px; text-transform:uppercase; letter-spacing:0.14em; color:var(--muted);
  padding:16px 0; border-bottom:2px solid transparent; white-space:nowrap;
  transition:color .15s ease, border-color .15s ease;
}
.subnav__list a:hover{color:var(--ink)}
.subnav__list a.is-active{color:var(--ink); border-bottom-color:var(--ink)}
.subnav__title{font-family:var(--f-display); font-weight:600; letter-spacing:-0.02em; font-size:15px; white-space:nowrap}

/* ---------- media placeholders ---------- */
.tile{position:relative; display:grid; place-items:center; background:var(--beige-soft); aspect-ratio:4/5; overflow:hidden}
.tile--wide{aspect-ratio:16/10}
.tile img{width:38%; max-width:180px; opacity:.22}
.tile__note{position:absolute; left:16px; bottom:14px; font-size:10px; text-transform:uppercase; letter-spacing:0.16em; color:rgba(20,18,16,.42)}
.tile-cap{margin-top:18px}
.tile-cap h3{margin-bottom:6px}

/* ---------- pending system ---------- */
.pending{border-top:1px solid var(--line); padding-top:20px; margin-top:clamp(28px,4vw,48px); max-width:62ch}
.band-stage .pending,.band-beige .pending{border-top-color:rgba(20,18,16,.18)}
.band-stage .pending{border-top-color:var(--line-inv)}
.pending__label{font-size:10px; text-transform:uppercase; letter-spacing:0.2em; color:var(--muted); margin-bottom:10px}
.band-stage .pending__label{color:var(--beige)}
.pending p{font-size:15px; line-height:1.6; color:var(--muted)}
.band-stage .pending p{color:var(--muted-inv)}
.checklist{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px; max-width:52ch}
.checklist li{position:relative; padding-left:22px; font-size:15px; color:var(--muted)}
.checklist li::before{content:''; position:absolute; left:0; top:.62em; width:9px; height:1px; background:var(--beige)}

/* ---------- editorial lists ---------- */
.rows{border-top:1px solid var(--line); margin-top:clamp(32px,4vw,56px)}
.band-stage .rows{border-top-color:var(--line-inv)}
.row{display:grid; gap:8px 40px; padding-block:clamp(26px,3.2vw,42px); border-bottom:1px solid var(--line)}
.band-stage .row{border-bottom-color:var(--line-inv)}
@media (min-width:820px){ .row{grid-template-columns:52px minmax(0,1fr) minmax(0,1.15fr); align-items:baseline} }
.row__no{font-size:11px; letter-spacing:0.18em; color:var(--muted); padding-top:.5em}
.row__title{font-family:var(--f-display); font-size:clamp(1.5rem,2.8vw,2.1rem); font-weight:500; letter-spacing:-0.03em; line-height:1.1}
.row__body{color:var(--muted); font-size:16px; line-height:1.6}
.row a.row__title:hover{border-bottom:1px solid currentColor}

/* ---------- key/value (hours, facts) ---------- */
.kv{margin:0; border-top:1px solid var(--line)}
.kv div{display:flex; justify-content:space-between; gap:24px; padding-block:14px; border-bottom:1px solid var(--line); font-size:16px}
.kv dt{color:var(--muted); margin:0}
.kv dd{margin:0; font-variant-numeric:tabular-nums}

/* ---------- forms ---------- */
.form{display:grid; gap:20px; max-width:560px; margin-top:clamp(28px,3.4vw,44px)}
.field{display:grid; gap:8px}
.field label{font-size:11px; text-transform:uppercase; letter-spacing:0.16em; color:var(--muted)}
.field input,.field textarea,.field select{
  font:inherit; font-size:16px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:10px 0; border-radius:0; appearance:none;
  transition:border-color .15s ease;
}
.band-stage .field input,.band-stage .field textarea,.band-stage .field select{color:#fff; border-bottom-color:var(--line-inv)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-bottom-color:var(--ink)}
.band-stage .field :focus{border-bottom-color:var(--beige)}
.field textarea{resize:vertical; min-height:110px}
.form__note{font-size:13px; color:var(--muted)}
.form__msg{font-size:15px; color:var(--ink); border-top:1px solid var(--line); padding-top:16px}
.form__msg:empty{display:none}

/* ---------- footer ---------- */
.site-footer{background:var(--stage); color:#fff; padding-block:clamp(64px,8vw,110px) 40px}
.footer__top{display:grid; gap:clamp(40px,5vw,80px)}
@media (min-width:900px){ .footer__top{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)} }
.footer__logo img{width:min(240px,58vw)}
.footer__tag{margin-top:22px; color:var(--muted-inv); font-size:15px; max-width:32ch}
.footer__nav{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:36px}
.footer__nav h4{font-size:11px; text-transform:uppercase; letter-spacing:0.18em; color:var(--beige); font-family:var(--f-text); font-weight:500; margin-bottom:16px}
.footer__nav ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer__nav a{font-size:15px; color:#E6E2DA; transition:color .15s ease}
.footer__nav a:hover{color:var(--beige)}
.footer__bottom{margin-top:clamp(48px,6vw,88px); padding-top:26px; border-top:1px solid var(--line-inv); display:flex; flex-wrap:wrap; gap:16px 28px; justify-content:space-between; align-items:center}
.footer__legal{display:flex; flex-wrap:wrap; gap:22px; list-style:none; margin:0; padding:0}
.footer__legal a{font-size:13px; color:var(--muted-inv)}
.footer__legal a:hover{color:#fff}
.footer__copy{font-size:13px; color:var(--muted-inv)}

/* ---------- page head ---------- */
.pagehead{padding-top:calc(var(--header) + clamp(56px,8vw,110px)); padding-bottom:clamp(40px,5vw,72px)}
.pagehead .h1{max-width:16ch}
.pagehead .lead{margin-top:clamp(20px,2.4vw,32px)}

/* ---------- misc ---------- */
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--cream); padding:12px 20px; z-index:200}
.skip:focus{left:12px; top:12px}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.band-stage :focus-visible{outline-color:var(--beige)}
[hidden]{display:none !important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* ---------- extra bands ---------- */
.band-soft{background:var(--cream-deep); color:var(--ink)}
.head-row{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px 40px; margin-bottom:clamp(36px,4.5vw,64px)}
.head-row .lead{margin-top:18px}
.stack-lg{display:grid; gap:clamp(28px,3.4vw,44px)}
.grid-4{display:grid; gap:clamp(28px,3vw,44px); grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid-3{display:grid; gap:clamp(28px,3vw,48px); grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.prose{max-width:62ch}
.prose h2{margin:clamp(40px,5vw,64px) 0 14px; font-size:clamp(1.4rem,2.2vw,1.8rem)}
.prose h2:first-child{margin-top:0}
.prose ul{margin:0 0 1.2em; padding-left:1.1em; color:var(--muted)}
.prose li{margin-bottom:.5em}
.prose a{border-bottom:1px solid var(--line)}
.prose a:hover{border-bottom-color:var(--ink)}

/* ---------- mobile adjustments ---------- */
@media (max-width:719px){
  .rail__item{flex:0 0 84vw}
  .rail__item img{height:min(52vh,420px)}
  .grid-4{grid-template-columns:1fr 1fr; gap:22px}
  .grid-4 .h3{font-size:1.2rem}
  .tile img{width:52%}
  .tile__note{left:10px; bottom:9px; font-size:9px; letter-spacing:.12em}
  .stage__shot img{max-width:min(86vw,420px)}
  .hero{padding-top:calc(var(--header) + 42px)}
  .head-row{align-items:flex-start}
  .subnav__title{display:none}
  .footer__logo img{width:min(200px,52vw)}
}
@media (max-width:520px){
  .grid-4 .h3{font-size:1.05rem}
  .grid-4 .tile-cap p{font-size:13px; line-height:1.5}
  .tile-cap{margin-top:12px}
}

/* ============================================================
   Round 2 — hero spacing, nav hover bridge, real category shots,
   pinned horizontal rail, order dialog
   ============================================================ */

/* hero: keep the descender of "boost." clear of the sub-line */
.hero .lead{margin-top:clamp(22px,2.6vw,38px)}

/* nav: the item must own the full header height, otherwise the pointer
   leaves it in the gap above the dropdown and the menu closes */
.nav__list{height:var(--header); align-items:stretch}
/* NOTE: no position on .nav__item — the mega panel is absolute against
   .site-header and must span the full window width */
.nav__item{display:flex; align-items:center}

/* ---------- category shots (freed products, light stage) ---------- */
.cat{display:grid; gap:clamp(26px,3vw,44px); grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cat__link{display:block}
/* absolute centring keeps every stage exactly 4:5 — a percentage max-height
   on an aspect-ratio box resolves against auto and stretches the tile */
.cat__stage{
  position:relative; background:var(--beige); aspect-ratio:4/5; overflow:hidden;
  transition:background .18s ease;
}
.cat__link:hover .cat__stage{background:#c2b094}
.cat__stage img{
  position:absolute; inset:0; margin:auto;
  width:auto; height:auto; max-width:78%; max-height:84%;
}
.cat__stage--wide img{max-width:92%; max-height:80%}
.cat__cap{margin-top:18px}
.cat__cap h3{margin-bottom:6px}

/* single product on a plain band (menu page) */
.shot{display:grid; place-items:center}
.shot img{width:auto; max-height:min(62vh,560px)}
.shot--wide img{max-height:none; width:min(100%,540px)}

/* ---------- pinned horizontal rail ---------- */
.pin{position:relative}
.pin__track{display:flex; gap:clamp(24px,3vw,56px); padding-inline:var(--gutter)}
.pin__item{flex:0 0 min(78vw,460px)}
/* height follows the room the pinned viewport actually leaves:
   screen minus header, meta block and the progress line */
.pin__item img{width:100%; height:clamp(320px,calc(100svh - 395px),640px); object-fit:contain; object-position:bottom}

/* default (and the only mode on phones): real horizontal swiping */
.pin__inner{
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  /* mandatory + snap-stop: one swipe lands on exactly one drink, never two.
     The arrows animate scrollLeft by hand (see site.js) — CSS smooth
     scrolling would fight mandatory snapping and stall halfway. */
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter);
}
.pin__inner::-webkit-scrollbar{display:none}
.pin__item{scroll-snap-align:center; scroll-snap-stop:always}

/* JS takes over: sticky viewport, vertical scroll drives horizontal travel */
.has-pin .pin__inner{
  position:sticky; top:var(--header);
  height:calc(100svh - var(--header));
  display:flex; align-items:center;
  overflow:hidden;
}
.has-pin .pin__inner{overflow:hidden; scroll-snap-type:none}
.has-pin .pin__track{will-change:transform}
.pin__progress{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(16px,2.4vh,28px);
  height:1px; background:var(--line-inv); display:none;
}
.has-pin .pin__progress{display:block}
.pin__progress span{display:block; height:100%; width:0; background:var(--beige); transform-origin:left}

/* ---------- order dialog ---------- */
dialog.modal{
  border:0; padding:0; border-radius:0;
  background:var(--cream); color:var(--ink);
  width:min(580px,calc(100vw - 32px));
  max-width:none; max-height:calc(100vh - 48px);
  overflow:auto;
}
dialog.modal::backdrop{background:rgba(16,14,12,.74)}
dialog.modal[open]{animation:modal-in .22s cubic-bezier(.32,.72,0,1)}
dialog.modal[open]::backdrop{animation:modal-fade .22s ease}
@keyframes modal-in{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}
.modal__inner{padding:clamp(28px,4vw,44px)}
.modal__close{
  position:absolute; top:14px; right:14px; width:36px; height:36px;
  display:grid; place-items:center; color:var(--muted);
  transition:color .15s ease;
}
.modal__close:hover{color:var(--ink)}
.modal__close svg{width:15px; height:15px; stroke:currentColor; stroke-width:1.5; fill:none}
.modal__rows{margin-top:clamp(24px,3vw,34px); border-top:1px solid var(--line)}
.modal__row{
  display:grid; grid-template-columns:34px 1fr auto; align-items:baseline; gap:0 16px;
  padding-block:18px; border-bottom:1px solid var(--line);
  transition:padding-left .18s ease;
}
a.modal__row:hover{padding-left:6px}
.modal__no{font-size:11px; letter-spacing:.18em; color:var(--muted)}
.modal__row h3{font-family:var(--f-display); font-size:1.35rem; font-weight:500; letter-spacing:-.028em; margin:0 0 4px}
.modal__row p{font-size:14px; line-height:1.5; color:var(--muted); margin:0; max-width:38ch}
.modal__meta{font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); white-space:nowrap}
a.modal__row .modal__meta::after{content:' \203A'}
.modal__row--off{opacity:.62}
.modal__note{margin-top:22px; font-size:13px; line-height:1.55; color:var(--muted)}
body.has-modal{overflow:hidden}

@media (max-width:719px){
  .cat{grid-template-columns:1fr 1fr; gap:20px}
  .cat__stage{padding:8% 9%}
  .cat__cap h3{font-size:1.05rem}
  .cat__cap p{font-size:13px; line-height:1.5}
  .shot img{max-height:46vh}
  .modal__inner{padding:26px 20px}
  .modal__row{grid-template-columns:1fr auto; gap:0 12px}
  .modal__no{display:none}

  /* hero: one composed screen — fine cap line, big headline, the cup beneath it */
  .hero{padding-top:calc(var(--header) + 28px)}
  .hero .eyebrow{font-size:9.5px; letter-spacing:0.14em; margin-bottom:16px}
  .hero .display{font-size:clamp(3.2rem,15vw,4.2rem); line-height:0.94}
  .hero .lead{font-size:1.05rem; margin-top:18px}
  .hero__actions{margin-top:26px; gap:18px}
  /* portrait 4:5 stack fills the space under the text instead of the wide
     line-up, which only ever reads as a thin strip on a phone */
  .hero__shot{
    display:block; margin-top:clamp(18px,4vw,32px);
    padding-inline:0; padding-bottom:clamp(28px,6vw,52px);
  }
  .hero__shot img{width:100%; max-width:none; margin-left:0}

  /* swipe instead of a pinned track — the pinned version fights the browser
     chrome collapsing on scroll */
  /* side padding = half the leftover width, so the first and last card can
     snap to the exact centre like every card in between */
  .pin__track{gap:36px; padding-inline:8vw}
  /* browsers drop the trailing padding of a scrolling flex container, which
     leaves the last card short of centre — this spacer restores it */
  .pin__track::after{content:''; flex:0 0 1px}
  .pin__item{flex:0 0 84vw}
  .pin__item img{height:min(56vh,520px)}
  .rail-nav{margin-top:4px}
  .rail-nav button{width:44px; height:44px}
}

/* multi-paragraph row bodies (philosophy) */
.row__body p{margin-bottom:.85em; font-size:16px; line-height:1.62}
.row__body p:last-child{margin-bottom:0}
.row__body strong{font-weight:500; color:inherit}
.row__body em, .cols p em{font-style:italic}