/* =========================================================
   Moon — coffee house
   Rebuilt from the reference motion study.
   ========================================================= */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

:root{
  --ink:#141210;
  --stageH:100svh;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --ease-spring:cubic-bezier(.22,1.3,.36,1);
  --t-swap:1150ms;

  /* driven by JS per drink */
  --c1:#d3d3d3; --c2:#c9c9c9; --c3:#8b8b8b; --c4:#2c2c2c; --c5:#050505;
  --fg:#171310;          /* headline colour            */
  --fg-soft:#4a423b;     /* secondary text             */
  --card:255,252,246;    /* about-card tint (rgb)      */
  --accent:#3a2d22;
}

body{
  font-family:'Lora',Georgia,'Times New Roman',serif;
  color:var(--fg);
  background:#0b0b0b;
  overscroll-behavior-y:none;
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- scroll driver ---------- */
.track{height:calc(var(--stageH) * 5.4)}

/* ---------- stage ---------- */
.stage{
  position:fixed;inset:0;
  height:var(--stageH);
  overflow:hidden;
  isolation:isolate;
  contain:strict;
}

.bg{
  position:absolute;inset:-2%;
  background:linear-gradient(178deg,
    var(--c1) 0%, var(--c2) 22%, var(--c3) 54%, var(--c4) 84%, var(--c5) 100%);
  transition:background 900ms linear;
}
.bg::after{                        /* soft light pooling behind the cup */
  content:"";position:absolute;inset:0;
  background:radial-gradient(58% 62% at 28% 34%,rgba(255,255,255,.30),transparent 62%);
  mix-blend-mode:soft-light;
}
.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.34;z-index:6;
  background-image:url("assets/grain.svg");
  mix-blend-mode:overlay;
}

/* ---------- beans ---------- */
.beans{position:absolute;inset:0;z-index:2;pointer-events:none}
.bean{
  position:absolute;left:0;top:0;
  width:var(--w);
  transform:translate3d(var(--x),var(--y),0) rotate(var(--r)) scale(var(--s));
  opacity:var(--o);
  filter:blur(var(--b)) drop-shadow(0 10px 14px rgba(0,0,0,.28));
  transition:transform var(--t-swap) var(--ease-spring),
             opacity 620ms ease,
             filter 620ms ease;
  will-change:transform;
}
.bean img{display:block;width:100%;height:auto}
.bean-float{display:block;width:100%;animation:bob var(--bob) ease-in-out infinite alternate;animation-delay:var(--bd)}
@keyframes bob{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-14px,0)}}

/* ---------- top bar ---------- */
.topbar{
  position:absolute;z-index:7;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(18px,2.4vw,34px) clamp(20px,3.4vw,52px);
  font-family:'Inter',system-ui,sans-serif;
}
.wordmark{
  display:inline-flex;align-items:center;
  text-decoration:none;color:var(--fg);
}
/* the logo art is a transparent PNG used as a mask, so it takes
   whatever colour the surrounding text is — black on paper, cream on dark */
.logo{
  display:block;
  width:clamp(104px,9.4vw,146px);
  aspect-ratio:895 / 340;
  background-color:currentColor;
  -webkit-mask:url("assets/logo.png") no-repeat center/contain;
          mask:url("assets/logo.png") no-repeat center/contain;
}
.nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,30px);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.nav a{color:var(--fg);text-decoration:none;opacity:.62;transition:opacity .25s}
.nav a:hover{opacity:1}


/* ---------- temperature rail ---------- */
.rail{
  position:absolute;z-index:7;left:clamp(14px,2vw,30px);bottom:clamp(96px,14vh,150px);
  display:flex;flex-direction:column;gap:6px;padding:6px;
  border-radius:19px;
  background:rgba(var(--card),.24);
  border:1px solid rgba(var(--card),.3);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .7s linear,border-color .7s linear;
}
.rail-btn{
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  border-radius:13px;border:1px solid transparent;background:transparent;
  color:var(--fg);opacity:.42;
  transition:opacity .3s,background .3s,transform .3s var(--ease-out);
}
.rail-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rail-btn:hover{opacity:.8}
.rail-btn.is-on{
  opacity:1;background:rgba(var(--card),.8);
  border-color:rgba(var(--card),.9);
}

/* ---------- hero ---------- */
.hero{
  position:relative;z-index:4;height:100%;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);   /* row fills the stage, so align-self works */
  align-items:center;
}

/* cup */
.cup-zone{position:relative;grid-column:1;justify-self:center;align-self:center;
  margin-top:clamp(-26px,-1.6vh,0px);margin-left:clamp(-30px,-2vw,0px)}
.cup-btn{
  position:relative;display:block;padding:0;border:0;background:none;cursor:pointer;
  width:clamp(300px,35.5vw,560px);aspect-ratio:1;
  -webkit-tap-highlight-color:transparent;
}
.cup-btn:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:14px;border-radius:50%}
.cup-shadow{
  position:absolute;left:6%;top:12%;width:88%;height:88%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,0) 70%);
  filter:blur(26px);transform:translateY(7%) scale(1.02);
  transition:transform .7s var(--ease-out),opacity .7s;
}
.cup-stack{position:absolute;inset:0;display:block}

.cup{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.30));
  transform-origin:50% 50%;
  will-change:transform,opacity,filter;
}
/* incoming: sweeps down from the upper right and settles */
.cup.enter{animation:cupIn var(--t-swap) var(--ease-out) both}
@keyframes cupIn{
  0%  {transform:translate3d(62%,-78%,0) scale(1.34) rotate(26deg);opacity:0;filter:blur(9px) drop-shadow(0 26px 34px rgba(0,0,0,.3))}
  38% {opacity:1}
  100%{transform:translate3d(0,0,0) scale(1) rotate(0deg);opacity:1;filter:blur(0) drop-shadow(0 26px 34px rgba(0,0,0,.3))}
}
.cup.enter-rev{animation:cupInRev var(--t-swap) var(--ease-out) both}
@keyframes cupInRev{
  0%  {transform:translate3d(-58%,86%,0) scale(1.3) rotate(-24deg);opacity:0;filter:blur(9px)}
  38% {opacity:1}
  100%{transform:translate3d(0,0,0) scale(1) rotate(0);opacity:1;filter:blur(0)}
}
/* outgoing: lifts up and away to the left */
.cup.exit{animation:cupOut var(--t-swap) cubic-bezier(.55,0,.68,.35) both;pointer-events:none}
@keyframes cupOut{
  0%  {transform:translate3d(0,0,0) scale(1) rotate(0);opacity:1;filter:blur(0)}
  100%{transform:translate3d(-64%,-92%,0) scale(1.42) rotate(-28deg);opacity:0;filter:blur(11px)}
}
.cup.exit-rev{animation:cupOutRev var(--t-swap) cubic-bezier(.55,0,.68,.35) both;pointer-events:none}
@keyframes cupOutRev{
  0%  {transform:translate3d(0,0,0) scale(1) rotate(0);opacity:1;filter:blur(0)}
  100%{transform:translate3d(56%,96%,0) scale(1.36) rotate(24deg);opacity:0;filter:blur(11px)}
}
/* idle drift once settled */
.cup.idle{animation:cupIdle 9s ease-in-out infinite alternate}
@keyframes cupIdle{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(0,-13px,0) rotate(1.4deg)}}

.cup-btn:hover .cup.idle{animation-play-state:paused}
.cup-btn:hover .cup{transform:scale(1.035) translateY(-6px);transition:transform .55s var(--ease-out)}
.cup-btn:active .cup{transform:scale(.985);transition:transform .18s ease}

/* steam */
.steam{position:absolute;left:50%;top:8%;width:90px;height:120px;transform:translateX(-50%);
  pointer-events:none;opacity:0;transition:opacity .6s}
.stage[data-temp="hot"] .steam{opacity:.5}
.steam i{
  position:absolute;bottom:0;width:7px;height:76px;border-radius:50%;
  background:linear-gradient(to top,rgba(255,255,255,.55),rgba(255,255,255,0));
  filter:blur(7px);animation:steam 4.6s ease-in-out infinite;
}
.steam i:nth-child(1){left:22%;animation-delay:0s}
.steam i:nth-child(2){left:47%;height:96px;animation-delay:1.1s}
.steam i:nth-child(3){left:70%;animation-delay:2.2s}
@keyframes steam{
  0%{opacity:0;transform:translateY(18px) scaleX(.7)}
  35%{opacity:1}
  100%{opacity:0;transform:translateY(-58px) scaleX(1.7)}
}

.tap-hint{
  position:absolute;left:50%;bottom:-6px;transform:translate(-50%,10px);
  font-family:'Inter',sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg);opacity:0;white-space:nowrap;
  padding:.5em .95em;border-radius:100px;
  background:rgba(var(--card),.5);border:1px solid rgba(var(--card),.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:opacity .45s,transform .45s var(--ease-out);
}
.cup-btn:hover .tap-hint,.cup-btn:focus-visible .tap-hint,.tap-hint.pulse{opacity:.92;transform:translate(-50%,0)}

/* title */
.title-zone{
  grid-column:2;align-self:center;justify-self:start;
  padding-right:clamp(20px,4vw,64px);
  max-width:min(46vw,760px);
}
.price{
  font-family:'Bodoni Moda',Didot,Georgia,serif;
  font-size:clamp(20px,2.1vw,34px);font-weight:500;letter-spacing:.01em;
  margin-bottom:clamp(2px,.5vw,8px);
  transition:opacity .45s,transform .45s var(--ease-out);
}
.title{
  position:relative;
  margin:0;
  font-family:'Bodoni Moda',Didot,'Playfair Display',Georgia,serif;
  font-weight:700;
  font-size:clamp(46px,7.6vw,132px);
  line-height:.9;letter-spacing:-.005em;
  text-transform:uppercase;
  white-space:nowrap;
}
.title .tv{display:block}
.title .tv.leaving{position:absolute;inset:0 0 auto 0;pointer-events:none}
.title .ln{display:block;overflow:hidden;padding:.06em 0}
.title .ln + .ln{text-align:right}
.title .ln > span{display:inline-block;will-change:transform,opacity,filter}
.title .ln > span.in{animation:wordIn 900ms var(--ease-out) both;animation-delay:var(--d)}
.title .ln > span.out{animation:wordOut 620ms var(--ease-in) both;animation-delay:var(--d)}
@keyframes wordIn{
  from{transform:translateY(88%) rotate(2.5deg);opacity:0;filter:blur(10px)}
  to{transform:none;opacity:1;filter:blur(0)}
}
@keyframes wordOut{
  from{transform:none;opacity:1;filter:blur(0)}
  to{transform:translateY(-70%) rotate(-2deg);opacity:0;filter:blur(10px)}
}
.subline{
  margin-top:clamp(10px,1.5vw,22px);
  font-family:'Inter',sans-serif;
  font-size:clamp(10.5px,.83vw,13px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--fg-soft);opacity:.8;
  transition:opacity .5s,transform .5s var(--ease-out);
}

/* ---------- about card ---------- */
.about{
  position:absolute;z-index:5;
  right:clamp(16px,2.6vw,44px);
  bottom:clamp(16px,3vh,40px);
  width:clamp(268px,25vw,368px);
  padding:clamp(18px,1.5vw,26px) clamp(18px,1.6vw,28px) clamp(20px,1.7vw,28px);
  border-radius:20px;
  background:rgba(var(--card),.5);
  border:1px solid rgba(var(--card),.6);
  box-shadow:0 26px 60px rgba(0,0,0,.22);
  backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  color:var(--accent);
}
.rating{display:flex;align-items:center;gap:12px;margin-bottom:clamp(12px,1.3vw,20px)}
.score{
  font-family:'Bodoni Moda',Didot,serif;font-weight:700;
  font-size:clamp(23px,2vw,32px);line-height:1;
  padding:.24em .42em .3em;border-radius:11px;
  background:var(--accent);color:#f6efe6;
  font-variant-numeric:tabular-nums;
}
.rating-meta{display:flex;flex-direction:column;gap:5px}
.rating-note{
  font-family:'Inter',sans-serif;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.55;white-space:nowrap;
}
.stars{display:inline-flex;gap:3px}
.stars svg{width:15px;height:15px}
.stars .bgstar{fill:rgba(0,0,0,.16)}
.stars .fgstar{fill:var(--accent)}
.about h2{
  margin:0 0 .45em;font-family:'Lora',serif;font-weight:600;
  font-size:clamp(13px,1.05vw,16px);letter-spacing:.02em;
}
.about p{
  margin:0;font-size:clamp(12px,.93vw,14.5px);line-height:1.62;opacity:.86;
}
.more{
  margin-top:14px;padding:0;border:0;background:none;cursor:pointer;color:inherit;
  font-family:'Inter',sans-serif;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  opacity:.6;transition:opacity .25s;display:inline-flex;gap:.55em;align-items:center;
}
.more:hover{opacity:1}
.more span{transition:transform .3s var(--ease-out)}
.more:hover span{transform:translateX(4px)}
.about.swap{animation:cardSwap var(--t-swap) var(--ease-out) both}
@keyframes cardSwap{
  0%{opacity:0;transform:translate3d(28px,26px,0) scale(.97)}
  100%{opacity:1;transform:none}
}

/* ---------- picker ---------- */
.picker{
  position:absolute;z-index:5;
  left:clamp(56px,5.6vw,96px);
  bottom:clamp(16px,3vh,40px);
  display:flex;gap:clamp(4px,1vw,18px);
  padding:clamp(5px,.6vw,9px);
  border-radius:26px;
  background:rgba(var(--card),.24);
  border:1px solid rgba(var(--card),.3);
  backdrop-filter:blur(14px) saturate(1.05);-webkit-backdrop-filter:blur(14px) saturate(1.05);
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  transition:background .7s linear,border-color .7s linear;
}
.chip{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  width:clamp(78px,7.6vw,116px);
  padding:clamp(9px,.9vw,14px) 6px clamp(10px,.9vw,14px);
  border:1px solid transparent;border-radius:18px;background:transparent;
  cursor:pointer;color:var(--fg);
  transition:background .5s var(--ease-out),border-color .5s,transform .45s var(--ease-out);
}
.chip img{
  width:clamp(42px,4.2vw,64px);height:auto;display:block;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.3));
  transition:transform .5s var(--ease-spring);
}
.chip .lbl-short{display:none}
.chip .lbl{
  font-family:'Lora',serif;font-weight:600;
  font-size:clamp(9.5px,.75vw,12px);letter-spacing:.02em;text-align:center;line-height:1.25;
  opacity:.85;transition:opacity .4s;
  text-shadow:0 1px 2px rgba(255,255,255,.25);
}
.chip:hover img{transform:translateY(-5px) scale(1.06)}
.chip:hover .lbl{opacity:1}
.chip.is-active{
  background:rgba(var(--card),.72);
  border-color:rgba(var(--card),.85);
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}
.chip.is-active .lbl{opacity:1}
.chip.is-active img{transform:translateY(-3px) scale(1.04)}

/* ---------- scroll hint / progress ---------- */
.scroll-hint{
  position:absolute;z-index:5;left:50%;bottom:clamp(16px,3vh,40px);transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  font-family:'Inter',sans-serif;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:#fff;opacity:.42;transition:opacity .5s;pointer-events:none;
  mix-blend-mode:difference;
}
.scroll-hint.gone{opacity:0}
.scroll-hint i{display:block;width:38px;height:1px;background:currentColor;position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.9);animation:sweep 2.2s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

.progress{
  position:absolute;z-index:6;right:clamp(16px,2.6vw,44px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:9px;
}
.progress b{
  display:block;width:2px;height:20px;border-radius:2px;
  background:currentColor;color:var(--fg);opacity:.22;
  transition:opacity .45s,height .45s var(--ease-out);
}
.progress b.on{opacity:.85;height:34px}

/* ---------- detail sheet ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:40;display:grid;place-items:center}
.sheet-wrap[hidden]{display:none}
.sheet-backdrop{
  position:absolute;inset:0;background:rgba(12,9,7,.55);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  animation:fade .45s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-wrap.closing .sheet-backdrop{animation:fade .3s ease reverse both}
.sheet{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  width:min(1020px,92vw);max-height:min(86svh,860px);
  border-radius:26px;overflow:hidden;
  background:linear-gradient(160deg,#fdfbf6,#f1ece1);
  box-shadow:0 50px 120px rgba(0,0,0,.5);
  color:#121212;
  animation:sheetIn .68s var(--ease-out) both;
}
@keyframes sheetIn{from{opacity:0;transform:translateY(46px) scale(.965)}to{opacity:1;transform:none}}
.sheet-wrap.closing .sheet{animation:sheetIn .32s ease reverse both}
.sheet-visual{
  position:relative;display:grid;place-items:center;padding:clamp(20px,3vw,44px);
  background:linear-gradient(168deg,#1e1e1e,#000);
}
.sheet-visual::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 42%,rgba(255,255,255,.26),transparent 70%);
}
.sheet-visual img{
  position:relative;z-index:1;width:min(100%,340px);height:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));
  animation:sheetCup .9s var(--ease-out) both .1s;
}
@keyframes sheetCup{from{opacity:0;transform:scale(.82) rotate(-9deg)}to{opacity:1;transform:none}}
.sheet-body{padding:clamp(24px,2.6vw,42px);overflow-y:auto}
.sheet-eyebrow{
  margin:0 0 .7em;font-family:'Inter',sans-serif;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;opacity:.55;
}
.sheet h2{
  margin:0 0 .3em;font-family:'Bodoni Moda',Didot,serif;font-weight:700;
  font-size:clamp(30px,3.4vw,52px);line-height:.98;text-transform:uppercase;letter-spacing:-.01em;
}
.sheet-lede{margin:0 0 1.5em;font-size:clamp(13.5px,1.05vw,16px);line-height:1.66;opacity:.82}
.specs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;margin:0 0 1.7em;background:rgba(18,18,18,.14);
  border:1px solid rgba(18,18,18,.14);border-radius:14px;overflow:hidden;
}
.specs > div{background:#fdfbf6;padding:.85em 1em}
.specs dt{font-family:'Inter',sans-serif;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin-bottom:.5em}
.specs dd{margin:0;font-size:14px;font-weight:500}
.notes{margin-bottom:1.6em}
.notes h3{
  margin:0 0 .75em;font-family:'Inter',sans-serif;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;opacity:.5;font-weight:600;
}
.notes ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.notes li{
  font-size:12.5px;padding:.45em .85em;border-radius:100px;
  background:rgba(18,18,18,.07);border:1px solid rgba(18,18,18,.09);
}
.sheet-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:1.3em;border-top:1px solid rgba(18,18,18,.14);
}
.sheet-price{font-family:'Bodoni Moda',Didot,serif;font-size:clamp(24px,2.2vw,34px);font-weight:700;display:flex;align-items:baseline;gap:.5em}
.sheet-price small{font-family:'Inter',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;font-weight:500}

.sheet-close{
  position:absolute;z-index:2;top:14px;right:14px;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:rgba(253,251,246,.9);border:1px solid rgba(18,18,18,.12);color:#121212;
  transition:transform .3s var(--ease-out),background .3s;
}
.sheet-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.sheet-close:hover{transform:rotate(90deg);background:#fff}

body.locked{overflow:hidden}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .title{font-size:clamp(40px,8.2vw,96px)}
  .about{width:clamp(240px,30vw,320px)}
}

@media (max-width:900px){
  :root{--t-swap:1000ms}
  .track{height:calc(var(--stageH) * 5.4)}
  .hero{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    align-content:start;
    padding:clamp(104px,17vh,150px) 20px 0;
    gap:clamp(6px,2vh,20px);
  }
  .cup-zone{grid-column:1;grid-row:2;justify-self:center;margin:0}
  .cup-btn{width:min(84vw,400px)}
  .title-zone{grid-column:1;grid-row:1;justify-self:center;text-align:center;padding:0;max-width:100%}
  .title .ln + .ln{text-align:center}
  .title{font-size:clamp(38px,12vw,70px);white-space:normal}
  .price{font-size:clamp(17px,4.4vw,24px)}
  .subline{margin-top:8px}
  /* keep every header link reachable on a phone — just tighter */
  .topbar{padding:14px clamp(14px,4vw,22px)}
  .logo{width:clamp(84px,25vw,112px)}
  .nav{gap:clamp(9px,2.4vw,16px);font-size:10px;letter-spacing:.1em}
  .rail{flex-direction:row;left:50%;transform:translateX(-50%);bottom:auto;top:clamp(58px,9vh,84px)}
  .rail-btn{width:34px;height:34px}
  /* on a phone the card landed on top of the cup — the drink is the hero
     here, and the same copy is one tap away in the detail sheet */
  .about{display:none}
  .picker{left:10px;right:10px;bottom:12px;justify-content:center;gap:2px;padding:5px 6px;border-radius:20px}
  .chip{width:23%;max-width:90px;padding:8px 4px 9px;gap:6px}
  .chip img{width:38px}
  .chip .lbl-full{display:none}
  .chip .lbl-short{display:block}
  .chip .lbl{font-size:10px;line-height:1.15}
  .scroll-hint{display:none}
  .progress{right:10px}
  .sheet{grid-template-columns:1fr;max-height:90svh}
  .sheet-visual{padding:26px 26px 6px}
  .sheet-visual img{width:min(58vw,220px)}
  .specs{grid-template-columns:1fr 1fr}
}

@media (max-width:520px){
  .cup-btn{width:min(88vw,360px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.12s!important}
  .bean{transition-duration:.3s!important}
}


/* ---------- header on small phones ---------- */
@media (max-width:560px){
  .topbar{padding:12px 14px}
  .logo{width:clamp(76px,24vw,96px)}
  .nav{gap:9px;font-size:9px;letter-spacing:.08em}
}
@media (max-width:380px){
  .nav{gap:7px;font-size:8.5px}
  .logo{width:74px}
}

/* the menu page bar keeps one row so the sticky search offset stays right;
   its longer nav scrolls sideways instead of disappearing */
@media (max-width:720px){
  .page-bar{gap:12px;padding:12px clamp(14px,4vw,22px)}
  .page-bar .logo{width:clamp(76px,24vw,104px);flex:none}
  .page-bar .nav{
    flex:1;min-width:0;justify-content:flex-end;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask:linear-gradient(to right,transparent 0,#000 18px);
            mask:linear-gradient(to right,transparent 0,#000 18px);
  }
  .page-bar .nav::-webkit-scrollbar{display:none}
  .page-bar .nav a{white-space:nowrap}
}