/* =========================================================
   COFFEE TALK — "House Blend"
   Espresso, cream and amber. Newsreader with a lot of weight contrast
   (light headlines, a heavier italic word as the accent) over Hanken
   Grotesk. Phosphor icons, inline. Every hand-built page shares this file.
   ========================================================= */
@view-transition{navigation:auto}
:root{
  --esp:oklch(21% .022 52); --esp-2:oklch(25% .025 55); --esp-3:oklch(30% .028 56);
  --cream:oklch(93% .025 80); --cream-soft:oklch(93% .025 80 / .72); --cream-faint:oklch(93% .025 80 / .14);
  --paper:oklch(95.5% .018 82); --paper-2:oklch(92% .024 80); --paper-3:oklch(89% .028 78); --card:oklch(98.5% .009 85);
  --ink:oklch(24% .03 50); --ink-soft:oklch(24% .03 50 / .7); --rule:oklch(24% .03 50 / .13);
  --amber:oklch(80% .125 70); --amber-press:oklch(74% .13 63); --amber-pale:oklch(91% .055 78); --amber-text:oklch(50% .12 56); --amber-bean:oklch(68% .13 62);
  --serif:"Newsreader",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif; --jp:"Noto Serif JP",serif;
  --ease:cubic-bezier(.22,1,.36,1); --ease-q:cubic-bezier(.25,1,.5,1);
  --r:22px; --r-sm:14px;
  --sh:0 24px 50px -24px oklch(21% .022 52 / .45); --sh-sm:0 8px 22px -12px oklch(21% .022 52 / .45);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --sec:clamp(72px,9vw,128px);
  --bean:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M71.22%2C190.47a108.88%2C108.88%2C0%2C0%2C1-33.84%2C9.16%2C4%2C4%2C0%2C0%2C1-3.89-2c-8.67-15.28-11.52-34.29-8-55.15%2C4.49-26.92%2C19.09-53.87%2C41.12-75.9s49-36.63%2C75.9-41.12c22.79-3.79%2C43.37%2C0%2C59.29%2C10.6a4%2C4%2C0%2C0%2C1-1.25%2C7.23%2C121%2C121%2C0%2C0%2C0-21.82%2C7.46c-21.77%2C9.9-49.6%2C31.06-58.52%2C75.7C114.1%2C156.73%2C97.63%2C178.27%2C71.22%2C190.47ZM222.51%2C58.38a4%2C4%2C0%2C0%2C0-3.88-2%2C108.5%2C108.5%2C0%2C0%2C0-33.85%2C9.16c-26.41%2C12.2-42.88%2C33.74-48.94%2C64-8.93%2C44.64-36.75%2C65.8-58.52%2C75.7a121%2C121%2C0%2C0%2C1-21.82%2C7.46A4%2C4%2C0%2C0%2C0%2C54.27%2C220c11.87%2C7.92%2C26.32%2C12%2C42.35%2C12a103.66%2C103.66%2C0%2C0%2C0%2C16.92-1.44c26.91-4.49%2C53.87-19.09%2C75.9-41.12s36.63-49%2C41.12-75.9C234%2C92.68%2C231.18%2C73.66%2C222.51%2C58.38Z%22/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16.5px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--amber);color:var(--esp)}
:focus-visible{outline:2px solid var(--amber-text);outline-offset:3px;border-radius:6px}
[data-tone=dark] :focus-visible{outline-color:var(--amber)}
h1,h2,h3{font-family:var(--serif);font-weight:300;font-optical-sizing:auto;margin:0;letter-spacing:-.02em;line-height:1;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic;font-weight:340;letter-spacing:-.03em}
/* italic serif letters (the f in shelf, the k in Talk) reach past their box;
   a little room on the right keeps Safari from shaving them off */
em,.recipe-line .num,.cups b{padding-right:.14em;margin-right:-.14em}
p{text-wrap:pretty}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.lbl{font:700 11.5px/1.25 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.jp{font-family:var(--jp);font-weight:400;letter-spacing:.06em}
.h2{font-size:clamp(40px,5vw,66px);font-weight:280}
.h2 em{color:var(--amber-text)}
[data-tone=dark] .h2 em{color:var(--amber)}
.sub{margin:10px 0 0;color:var(--ink-soft);max-width:46ch}
[data-tone=dark] .sub{color:var(--cream-soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:10px;background:var(--esp);color:var(--cream);font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.ph{display:inline-block;flex:none;width:1.1em;height:1.1em;vertical-align:middle}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.textlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;border-bottom:1.5px solid var(--amber);padding-bottom:2px;transition:color .25s}
@media (hover:hover){.textlink:hover{color:var(--amber-text)}}
.textlink .ph{width:14px;height:14px}

/* ---------- buttons ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px 20px;border:0;border-radius:12px;background:var(--amber);color:var(--esp);font:700 15px/1 var(--sans);cursor:pointer;transition:background .25s,color .25s,transform .35s var(--ease),box-shadow .25s}
@media (hover:hover){.btn:hover{background:var(--amber-press);transform:translateY(-2px)}}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.1s}
.btn .ph{width:17px;height:17px;transition:transform .35s var(--ease)}
@media (hover:hover){.btn:hover .ph:last-child:not(:first-child){transform:translateX(3px)}}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
@media (hover:hover){.btn--ghost:hover{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}}
@media (hover:hover){[data-tone=dark] .btn--ghost:hover,.hero .btn--ghost:hover{background:var(--cream);color:var(--esp);box-shadow:inset 0 0 0 1.5px var(--cream)}}
.btn--ink{background:var(--esp);color:var(--cream)}
@media (hover:hover){.btn--ink:hover{background:var(--esp-3)}}

/* ---------- reveals ---------- */
.js [data-rv]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js [data-rv].in{opacity:1;transform:none}

/* ---------- announcement ---------- */
.note{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 12px;padding:10px 20px;background:var(--esp);color:var(--cream);font:600 13.5px/1.3 var(--sans);text-align:center}
.note a{display:inline-flex;align-items:center;gap:6px;color:var(--amber)}
.note .ph{width:14px;height:14px}

/* ---------- the bar ---------- */
.bar{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;padding:0 max(18px,env(safe-area-inset-left)) 0 26px;background:var(--paper);transition:box-shadow .35s,background .35s,color .35s;view-transition-name:ct-bar}
.bar.stuck{box-shadow:0 1px 0 var(--rule)}
.lg{display:inline-flex;align-items:baseline;gap:.22em;font:500 26px/1 var(--serif);letter-spacing:-.025em;justify-self:start}
.lg em{font-style:italic;font-weight:300}
.bar .lg em{transition:font-weight .5s var(--ease),color .3s}
@media (hover:hover){.bar .lg:hover em{font-weight:600;color:var(--amber-text)}}
.bar__nav ul{display:flex;align-items:center;list-style:none;margin:0;padding:0;font:500 14.5px/1 var(--sans)}
.bar__nav li{display:flex;align-items:center}
.bar__nav li + li::before{content:"+";margin:0 clamp(14px,2.6vw,40px);color:oklch(24% .03 50 / .32);font-weight:400}
.bar__nav a{position:relative;padding:10px 0}
.bar__nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;background:var(--amber);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.bar__nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}@media (hover:hover){.bar__nav a:hover::after{transform:scaleX(1);transform-origin:left}}
.bar__nav ul{transition:opacity .3s}
.burger{justify-self:end;width:46px;height:46px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center;border-radius:12px;transition:background .25s}
@media (hover:hover){.burger:hover{background:var(--paper-2)}}
.burger i{position:relative;display:block;width:26px;height:1.5px;background:var(--ink);transform:translateY(-3.5px);transition:transform .45s var(--ease),background .3s}
.burger i::after{content:"";position:absolute;left:0;top:7px;width:26px;height:1.5px;background:var(--ink);transition:transform .45s var(--ease),width .3s var(--ease),background .3s}
@media (hover:hover){.burger:hover i::after{width:17px}}
.menu-open{overflow:hidden}
.menu-open .bar{background:var(--paper);color:var(--ink);box-shadow:none}
.menu-open .bar__nav ul{opacity:0;pointer-events:none}
@media (hover:hover){.menu-open .burger:hover{background:var(--paper-2)}}
.menu-open .burger i{transform:rotate(45deg)}
.menu-open .burger i::after{transform:translateY(-7px) rotate(-90deg);width:26px}

/* full-screen menu */
.menu{position:fixed;inset:0;z-index:35;background:var(--paper);color:var(--ink);overflow:auto;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .75s var(--ease),visibility 0s .75s}
.menu-open .menu{clip-path:inset(0);visibility:visible;transition:clip-path .75s var(--ease),visibility 0s}
.menu__in{min-height:100%;display:grid;align-content:center;padding:100px clamp(24px,6vw,96px) max(40px,env(safe-area-inset-bottom))}
.menu__list{list-style:none;margin:0;padding:0}
.menu__list a{display:flex;align-items:baseline;gap:clamp(12px,2vw,22px);padding:2px 0;font:280 clamp(46px,7.6vw,100px)/1.04 var(--serif);letter-spacing:-.035em;opacity:0;transform:translateY(34px);transition:opacity .6s var(--ease),transform .75s var(--ease),color .25s,font-weight .5s var(--ease)}
.menu__list small{font:600 12px/1 var(--sans);letter-spacing:.16em;color:var(--amber-text);transform:translateY(-.2em)}
.menu__list .ph{width:.48em;height:.48em;align-self:center;color:var(--amber-text);opacity:0;transform:translate(-12px,8px);transition:opacity .3s,transform .45s var(--ease)}
.menu__list a:focus-visible{color:var(--amber-text);font-weight:340;font-style:italic}@media (hover:hover){.menu__list a:hover{color:var(--amber-text);font-weight:340;font-style:italic}}
.menu__list a:focus-visible .ph{opacity:1;transform:none}@media (hover:hover){.menu__list a:hover .ph{opacity:1;transform:none}}
.menu__list a[aria-current] span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em;text-decoration-color:var(--amber)}
.menu-open .menu__list a{opacity:1;transform:none}
.menu-open .menu__list li:nth-child(2) a{transition-delay:.05s}.menu-open .menu__list li:nth-child(3) a{transition-delay:.1s}.menu-open .menu__list li:nth-child(4) a{transition-delay:.15s}.menu-open .menu__list li:nth-child(5) a{transition-delay:.2s}.menu-open .menu__list li:nth-child(6) a{transition-delay:.25s}.menu-open .menu__list li:nth-child(7) a{transition-delay:.3s}
.menu__foot{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:clamp(28px,5vw,48px);padding-top:24px;border-top:1px solid var(--rule);font:500 14.5px/1 var(--sans);color:var(--ink-soft);opacity:0;transition:opacity .6s .3s}
.menu__foot a{display:inline-flex;align-items:center;gap:8px;padding:6px 0;transition:color .25s}
@media (hover:hover){.menu__foot a:hover{color:var(--amber-text)}}
.menu__brew{margin:20px 0 0;color:var(--ink-soft);font:italic 400 18px/1.4 var(--serif);opacity:0;transition:opacity .6s .38s}
.menu-open .menu__foot,.menu-open .menu__brew{opacity:1}

/* ---------- home: hero slideshow ---------- */
.hero{padding:0 14px}
.slides{position:relative;height:calc(100vh - 78px);height:calc(100svh - 78px);min-height:580px;max-height:920px;border-radius:26px;overflow:hidden;background:var(--esp);isolation:isolate}
.slides > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.07);transition:opacity 1.6s ease,transform 9s linear;z-index:0}
.slides > img.on{opacity:1;transform:scale(1)}
.slides::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,oklch(21% .022 52 / .3) 0,transparent 24%,transparent 42%,oklch(21% .022 52 / .85) 100%),linear-gradient(90deg,oklch(21% .022 52 / .5),transparent 62%)}
.cap{position:absolute;z-index:2;left:clamp(22px,4.5vw,64px);right:22px;bottom:clamp(112px,15vh,156px);color:var(--cream);max-width:900px}
.cap .lbl{color:var(--amber);display:flex;align-items:center;gap:10px}
.cap .lbl::before{content:"";width:24px;height:1.5px;background:currentColor}
.cap h1{margin:16px 0 18px;font-size:clamp(60px,10.5vw,160px);line-height:.9;letter-spacing:-.04em;font-weight:250}
.cap h1 em{color:var(--amber);letter-spacing:-.05em}
.cap p{max-width:44ch;color:var(--cream-soft);margin:0 0 24px;font-size:17px}
.js .cap > *{opacity:0;transform:translateY(22px);animation:up 1.1s var(--ease) forwards}
.js .cap > :nth-child(2){animation-delay:.1s}.js .cap > :nth-child(3){animation-delay:.22s}.js .cap > :nth-child(4){animation-delay:.32s}
@keyframes up{to{opacity:1;transform:none}}
.dots{position:absolute;z-index:2;left:clamp(22px,4.5vw,64px);top:30px;display:flex;gap:6px}
.dots i{height:7px;width:7px;border-radius:7px;background:oklch(93% .025 80 / .45);transition:width .6s var(--ease),background .6s}
.dots i.on{width:26px;background:var(--amber)}
.tate{position:absolute;z-index:2;right:28px;top:30px;margin:0;writing-mode:vertical-rl;color:var(--cream);font:400 18px/1 var(--jp);letter-spacing:.42em;opacity:.8}
.hbrands{position:absolute;z-index:2;left:clamp(22px,4.5vw,64px);bottom:30px;display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);color:var(--cream);white-space:nowrap;max-width:calc(100% - 420px);overflow:hidden;-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
.hbrands .lbl{color:oklch(93% .025 80 / .7);margin-right:4px}
.hbrands b{font:400 19px/1 var(--serif);opacity:.86}
.hcard{position:absolute;z-index:3;right:22px;bottom:82px;width:300px;border-radius:18px;background:var(--card);color:var(--ink);padding:8px;box-shadow:0 24px 50px -20px oklch(21% .022 52 / .6);transition:transform .6s var(--ease)}
.js .hcard{opacity:0;animation:up 1.1s .55s var(--ease) forwards;transform:translateY(22px)}
@media (hover:hover){.hcard:hover{transform:translateY(-6px)}}
.hcard .im{position:relative;height:150px;border-radius:12px;background:radial-gradient(70% 70% at 50% 60%,var(--card),var(--paper-2));display:grid;place-items:center;overflow:hidden}
.hcard .im img{height:132px;width:auto;filter:drop-shadow(0 14px 14px oklch(21% .022 52 / .35));transition:transform .8s var(--ease)}
@media (hover:hover){.hcard:hover .im img{transform:rotate(-6deg) scale(1.06)}}
.hcard .row{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:10px;padding:12px 8px 6px}
.hcard b{display:block;font:420 19px/1 var(--serif)}
.hcard small{display:block;margin-top:6px;font:500 12.5px/1 var(--sans);color:var(--ink-soft)}
.hcard .ar{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--rule);transition:background .25s,transform .4s var(--ease)}
@media (hover:hover){.hcard:hover .ar{background:var(--amber);transform:rotate(45deg)}}
.hcard .ar .ph{width:15px;height:15px}

/* ---------- home: feature review ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;padding:var(--sec) 0}
.stage{position:relative;aspect-ratio:4/4.6;border-radius:var(--r);background:radial-gradient(70% 60% at 50% 55%,var(--card),var(--paper-2));display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 1px var(--rule);transform-style:preserve-3d}
.stage img{width:56%;height:auto;filter:drop-shadow(0 34px 30px oklch(21% .022 52 / .35));transition:transform .9s var(--ease);transform:translate3d(var(--tx,0),var(--ty,0),0) rotate(var(--tr,0deg))}
.chip{position:absolute;z-index:2;left:16px;top:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:100px;background:var(--esp);color:var(--cream);font-size:10.5px}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:blink 2.4s ease-in-out infinite}
.chip--soft{background:var(--card);color:var(--ink)}
@keyframes blink{50%{opacity:.35}}
.steam{position:absolute;top:12%;left:50%;width:60px;height:90px;transform:translateX(-50%);opacity:.55}
.steam path{fill:none;stroke:var(--amber-text);stroke-width:2.5;stroke-linecap:round;opacity:0;animation:steam 4.5s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1.5s}.steam path:nth-child(3){animation-delay:3s}
@keyframes steam{0%{opacity:0;transform:translateY(16px)}35%{opacity:.8}100%{opacity:0;transform:translateY(-26px)}}
.info > .lbl{color:var(--amber-text)}
.info h2{margin:12px 0 6px;font-size:clamp(46px,5.6vw,78px);line-height:.92;font-weight:300}
.sl{margin-top:22px}
.sl .top{display:flex;justify-content:space-between;align-items:baseline;font:700 14px/1 var(--sans);margin-bottom:12px}
.sl .top span{font-weight:500;color:var(--ink-soft);font-size:13px}
.track{position:relative;height:6px;border-radius:6px;background:var(--paper-3)}
.track b{position:absolute;inset:0 auto 0 0;border-radius:6px;background:linear-gradient(90deg,var(--amber-pale),var(--amber));width:0;transition:width 1.4s var(--ease)}
.track i{position:absolute;top:50%;left:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--card);border:2px solid var(--esp);box-shadow:0 4px 10px -4px oklch(21% .022 52 / .5);transition:left 1.4s var(--ease)}
.ends{display:flex;justify-content:space-between;margin-top:9px;font:500 12px/1 var(--sans);color:var(--ink-soft)}
.notes{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.notes .lbl{display:inline-flex;align-items:center;gap:6px;margin-right:4px;color:var(--ink-soft)}
.notes .lbl .ph{width:15px;height:15px;color:var(--amber-text)}
.notes span:not(.lbl){padding:8px 12px;border-radius:100px;background:var(--amber-pale);font:600 14px/1 var(--sans);transition:transform .3s var(--ease)}
@media (hover:hover){.notes span:not(.lbl):hover{transform:translateY(-2px) rotate(-2deg)}}
.verdict{margin:22px 0 0;font:400 clamp(21px,2.2vw,26px)/1.32 var(--serif);text-wrap:pretty}
.info .row{margin-top:26px}

/* ---------- section heads ---------- */
.sec-h{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:16px 24px;margin-bottom:34px}
.sec-h > p{max-width:40ch;color:var(--ink-soft);margin:0}
.sec-h h2{font-size:clamp(40px,5vw,66px);font-weight:280}
.sec-h--rail{margin:clamp(72px,9vw,112px) auto 26px}

/* ---------- home: 1-2-3 ---------- */
.how h2 em{color:var(--amber-text)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{display:block}
.step .im{position:relative;border-radius:18px;overflow:hidden;background:var(--paper-2)}
.step img{aspect-ratio:1/1.05;object-fit:cover;width:100%;height:auto;transition:transform 1.1s var(--ease)}
@media (hover:hover){.step:hover img{transform:scale(1.05)}}
.step .n{position:absolute;left:14px;top:14px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:oklch(98% .01 85 / .92);font:italic 400 22px/1 var(--serif);color:var(--esp);transition:transform .5s var(--ease),background .3s}
@media (hover:hover){.step:hover .n{transform:rotate(-12deg) scale(1.08);background:var(--amber)}}
.step b{display:block;margin-top:14px;font:700 17px/1.3 var(--sans)}
.step > span{display:block;color:var(--ink-soft);font-size:15px;margin-top:4px}

/* ---------- the dark shelf (home) ---------- */
.shelf{background:var(--esp);color:var(--cream);padding:var(--sec) 0 var(--sec);margin-top:var(--sec);border-radius:28px 28px 0 0}
.shelf .sec-h h2{font-size:clamp(52px,7vw,104px)}
.shelf .sec-h h2 em{color:var(--amber)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.t{display:block;border-radius:18px;overflow:hidden;background:var(--esp-2);box-shadow:inset 0 0 0 1px oklch(93% .025 80 / .08);transition:transform .55s var(--ease),background .3s}
@media (hover:hover){.t:hover{transform:translateY(-6px);background:var(--esp-3)}}
.t .im{overflow:hidden}
.t img{aspect-ratio:1/1.08;object-fit:cover;width:100%;height:auto;transition:transform .9s var(--ease)}
@media (hover:hover){.t:hover img{transform:scale(1.06)}}
.t__b{padding:16px 16px 18px}
.t .lbl{color:var(--amber);font-size:10.5px}
.t b{display:block;margin:8px 0 10px;font:420 26px/1 var(--serif);letter-spacing:-.015em}

/* coffee-bean ratings */
.beans{display:inline-flex;gap:3px;align-items:center;--on:var(--amber-bean);--off:oklch(24% .03 50 / .15)}
[data-tone=dark] .beans,.t .beans{--on:var(--amber);--off:oklch(93% .025 80 / .2)}
.beans i{width:15px;height:15px;background:var(--on);-webkit-mask:var(--bean) center/contain no-repeat;mask:var(--bean) center/contain no-repeat}
.beans i.half{background:linear-gradient(90deg,var(--on) 50%,var(--off) 50%)}
.beans i.o{background:var(--off)}
.beans em{font-style:normal;margin-left:7px;font:600 12.5px/1 var(--sans);color:var(--ink-soft)}
[data-tone=dark] .beans em,.t .beans em{color:var(--cream-soft)}
.beans--soon{font:600 12px/1 var(--sans);color:var(--ink-soft);letter-spacing:.04em}
.in .beans i,.beans.pop i{animation:bean .7s var(--ease) both}
.beans i:nth-child(2){animation-delay:.06s!important}.beans i:nth-child(3){animation-delay:.12s!important}.beans i:nth-child(4){animation-delay:.18s!important}.beans i:nth-child(5){animation-delay:.24s!important}
@keyframes bean{from{transform:scale(.3) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}

/* counter rail */
.rail-hint{display:inline-flex;align-items:center;gap:8px;color:var(--amber)}
.rail-hint .ph{width:14px;height:14px}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(20px,calc((100vw - 1180px)/2));scrollbar-width:none;padding:0 max(20px,calc((100vw - 1180px)/2)) 6px;cursor:grab;-webkit-user-select:none;user-select:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.rail::-webkit-scrollbar{display:none}
.rail a{flex:0 0 clamp(200px,22vw,260px);scroll-snap-align:start}
.rail .im{border-radius:16px;overflow:hidden}
.rail img{aspect-ratio:3/4;object-fit:cover;width:100%;height:auto;transition:transform .9s var(--ease);pointer-events:none}
@media (hover:hover){.rail a:hover img{transform:scale(1.05)}}
.rail span{display:block;margin-top:10px;font:600 13px/1 var(--sans);color:var(--cream-soft);transition:color .25s}
@media (hover:hover){.rail a:hover span{color:var(--amber)}}

/* episodes (cards that play in place) */
.eps{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px}
.ep{position:relative;display:block;width:100%;border:0;padding:0;border-radius:18px;overflow:hidden;background:var(--esp);color:var(--cream);cursor:pointer;text-align:left;height:clamp(260px,25vw,340px)}
.ep img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:transform .9s var(--ease),opacity .4s}
@media (hover:hover){.ep:hover img{transform:scale(1.05);opacity:1}}
.ep::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,oklch(21% .022 52 / .88));pointer-events:none;transition:opacity .4s}
.ep__t{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;font:420 23px/1.1 var(--serif);letter-spacing:-.01em}
.ep__t .lbl{display:block;margin-bottom:8px;color:var(--amber);font-size:10.5px}
.pl{position:absolute;z-index:2;right:14px;top:14px;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:var(--esp);transition:transform .45s var(--ease)}
@media (hover:hover){.ep:hover .pl{transform:scale(1.12)}}
.pl .ph{width:18px;height:18px;margin-left:2px}
.ep iframe{position:absolute;inset:0;z-index:4;width:100%;height:100%;border:0;background:#000}
.ep.playing::after,.ep.playing .pl,.ep.playing .ep__t{opacity:0}

/* ---------- footer + newsletter ---------- */
.ftr{background:var(--esp);color:var(--cream-soft);padding:0 0 max(40px,env(safe-area-inset-bottom));position:relative}
.ftr .lg{color:var(--cream);font-size:32px}
.letter{padding:var(--sec) 0 clamp(8px,2vw,24px)}
.is-home .letter,.is-about .letter{padding-top:0}
.lt{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;padding:clamp(30px,5vw,60px);border-radius:24px;background:var(--amber);color:var(--esp);overflow:hidden}
.lt .lbl{color:oklch(21% .022 52 / .7)}
.lt h2{margin-top:10px;font-size:clamp(52px,6.6vw,96px);line-height:.9;font-weight:280}
.lt h2 em{color:var(--esp)}
.lt p{margin:14px 0 0;max-width:40ch;color:oklch(21% .022 52 / .78)}
.lt__form{position:relative;z-index:1}
.lt__cup{position:absolute;right:-14px;top:-18px;width:150px;opacity:.16;fill:none;stroke:var(--esp);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform:rotate(12deg);pointer-events:none}
.lt__steam{animation:sway 4s ease-in-out infinite;transform-origin:60px 34px}
@keyframes sway{50%{transform:translateY(-4px) skewX(6deg)}}
.nl__row{display:flex;gap:8px;padding:6px;border-radius:14px;background:var(--card);box-shadow:0 16px 30px -18px oklch(21% .022 52 / .5);transition:box-shadow .3s}
.nl__row:focus-within{box-shadow:0 0 0 3px oklch(21% .022 52 / .25),0 16px 30px -18px oklch(21% .022 52 / .5)}
.nl__f{flex:1;min-width:0;display:flex}
.nl input{flex:1;min-width:0;border:0;background:none;padding:12px 14px;font:500 16px var(--sans);color:var(--ink)}
.nl input:focus{outline:none}
.nl input::placeholder{color:oklch(24% .03 50 / .45)}
.nl__b.busy{opacity:.7;pointer-events:none}
.nl__ok{display:flex;align-items:center;gap:10px;margin:14px 2px 0;font:600 15px/1.35 var(--sans);color:var(--esp)}
.nl__ok .ph{width:22px;height:22px;animation:pour .8s var(--ease)}
.nl.is-done .nl__row{display:none}
@keyframes pour{from{transform:translateY(-10px) rotate(-30deg);opacity:0}}
.ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:30px;padding:clamp(40px,5vw,64px) 0 40px;border-top:1px solid var(--cream-faint)}
.is-home .ftr__grid,.ftr:has(.letter) .ftr__grid{border-top:0}
.ftr__brand p{max-width:34ch;margin:14px 0 0}
.ftr__tate{font:400 15px/1 var(--jp)!important;letter-spacing:.4em;color:var(--amber);opacity:.7;margin-top:18px!important}
.ftr__h{margin:0 0 14px;font:700 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.ftr__grid > div:not(.ftr__brand){display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.ftr__grid a,.ftr__grid > div > span{overflow-wrap:anywhere;display:inline-flex;align-items:center;gap:8px;padding:5px 0;transition:color .25s}
@media (hover:hover){.ftr__grid a:hover{color:var(--amber)}}
.ftr__grid .ph{width:16px;height:16px;opacity:.8}
.ftr__work{color:var(--amber);font-weight:600}
.ftr__fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:24px;border-top:1px solid var(--cream-faint);font-size:13px}
@media (hover:hover){.ftr__fine a:hover{color:var(--amber)}}

/* ---------- the radio ----------
   A little record in the corner that keeps turning. Hover (or tap) and it
   opens outward into the player. */
.radio{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;padding:6px;border-radius:100px;background:oklch(98.5% .009 85 / .92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--sh-sm),inset 0 0 0 1px var(--rule);transition:opacity .4s,box-shadow .4s,transform .5s var(--ease);view-transition-name:ct-radio}
.js .radio{animation:pop .9s 1.2s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.4) rotate(-90deg)}}
.radio__more{display:grid;grid-template-columns:0fr;opacity:0;transition:grid-template-columns .55s var(--ease),opacity .3s .05s}
.radio__in{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;white-space:nowrap}
.radio__txt{margin-left:12px}
.radio__btn{margin-right:2px}
.radio:focus-within .radio__more,.radio.open .radio__more{grid-template-columns:1fr;opacity:1}@media (hover:hover){.radio:hover .radio__more{grid-template-columns:1fr;opacity:1}}
.radio:focus-within,.radio.open{box-shadow:0 12px 30px -12px oklch(21% .022 52 / .45),inset 0 0 0 1px var(--rule)}@media (hover:hover){.radio:hover{box-shadow:0 12px 30px -12px oklch(21% .022 52 / .45),inset 0 0 0 1px var(--rule)}}
.radio__disc{order:2;position:relative;-webkit-tap-highlight-color:transparent;width:44px;height:44px;border-radius:50%;border:0;padding:0;cursor:pointer;background:repeating-radial-gradient(circle at 50% 50%,oklch(21% .022 52) 0 1.5px,oklch(29% .026 54) 1.5px 3px);display:grid;place-items:center;flex:none;animation:spin 6s linear infinite;transition:scale .2s var(--ease)}
.radio__disc::before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--amber)}
.radio__disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 12%,oklch(100% 0 0 / .12) 18%,transparent 26% 62%,oklch(100% 0 0 / .08) 68%,transparent 76%);pointer-events:none}
.radio__disc:active{scale:.92}
.radio.on .radio__disc{animation-duration:3s}
.radio:focus-within .radio__disc{animation-play-state:paused}@media (hover:hover){.radio:hover .radio__disc{animation-play-state:paused}}
.radio.on:focus-within .radio__disc{animation-play-state:running}@media (hover:hover){.radio.on:hover .radio__disc{animation-play-state:running}}
.radio__ic{position:relative;z-index:1;display:grid;color:var(--esp);animation:spin 6s linear infinite reverse;animation-play-state:inherit}
.radio.on .radio__ic{animation-duration:3s}
.radio__ic .ph{grid-area:1/1;width:10px;height:10px;transition:opacity .2s,transform .3s var(--ease)}
.radio__ic .i-pause,.radio.on .radio__ic .i-play{opacity:0;transform:scale(.4)}
.radio.on .radio__ic .i-pause{opacity:1;transform:none}
@keyframes spin{to{transform:rotate(360deg)}}
.radio__txt{display:grid;line-height:1.25;min-width:0}
.radio__txt small{font:700 9.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--amber-text)}
.radio__txt b{font:500 13px/1.3 var(--sans);overflow:hidden;text-overflow:ellipsis;max-width:180px}
.radio__eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.radio__eq i{width:2.5px;height:30%;border-radius:2px;background:var(--amber-text)}
.radio.on .radio__eq i{animation:eq 1s ease-in-out infinite}
.radio__eq i:nth-child(2){animation-delay:.2s!important}.radio__eq i:nth-child(3){animation-delay:.4s!important}.radio__eq i:nth-child(4){animation-delay:.1s!important}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.radio__x{display:none;width:30px;height:30px;margin-left:4px;border:0;border-radius:50%;background:var(--paper-2);color:var(--ink);place-items:center;cursor:pointer;flex:none}
.radio__x .ph{width:13px;height:13px}
@media (hover:none){.radio__x{display:grid}.radio__txt{margin-left:8px}}
.radio__btn{width:32px;height:32px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none;transition:background .25s,transform .2s}
@media (hover:hover){.radio__btn:hover{background:var(--paper-2)}}
.radio__btn:active{transform:scale(.88)}
.radio__btn .ph{width:14px;height:14px}
.radio.wants .radio__disc{animation:spin 6s linear infinite,nudge 2.4s ease-out infinite}
@keyframes nudge{0%{box-shadow:0 0 0 0 oklch(80% .125 70 / .6)}100%{box-shadow:0 0 0 14px oklch(80% .125 70 / 0)}}
.menu-open .radio{opacity:0;pointer-events:none}

/* ---------- the bean cursor (mouse only) ---------- */
.cur,.cur-ring{position:fixed;left:0;top:0;z-index:999;pointer-events:none;opacity:0;transition:opacity .3s}
.has-cursor .cur,.has-cursor .cur-ring{opacity:1}
.has-cursor,.has-cursor *{cursor:none!important}
.has-cursor :is(input,textarea,select),.has-cursor :is(input,textarea,select) *{cursor:auto!important}
.cur{width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--esp);-webkit-mask:var(--bean) center/contain no-repeat;mask:var(--bean) center/contain no-repeat;transition:opacity .25s,background .3s}
.cur-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:1.5px solid oklch(24% .03 50 / .35);display:grid;place-items:center;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .35s,border-color .35s,opacity .3s}
.cur-ring span{font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--esp);opacity:0;transition:opacity .2s}
.cur-ring.big{width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--amber);border-color:var(--amber)}
.cur-ring.big span{opacity:1}
.cur-ring.link{width:54px;height:54px;margin:-27px 0 0 -27px;border-color:var(--amber);background:oklch(80% .125 70 / .16)}
.cur.hide{opacity:0!important}
.cur.dark{background:var(--cream)}
.cur-ring.dark{border-color:oklch(93% .025 80 / .45)}
.crumb{position:fixed;z-index:998;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;pointer-events:none;background:var(--amber-text);-webkit-mask:var(--bean) center/contain no-repeat;mask:var(--bean) center/contain no-repeat;animation:crumb 1s var(--ease) forwards}
@keyframes crumb{to{opacity:0;transform:translate(var(--cx),var(--cy)) rotate(var(--cr)) scale(.4)}}

/* ---------- inner page head ---------- */
.phead{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:24px 40px;padding:clamp(48px,8vw,108px) 0 clamp(36px,5vw,60px)}
.phead__copy{max-width:820px}
.phead .lbl{color:var(--amber-text);display:flex;align-items:center;gap:10px}
.phead .lbl::before{content:"";width:24px;height:1.5px;background:currentColor}
.phead h1{margin:18px 0 0;font-size:clamp(54px,8.4vw,124px);line-height:.92;letter-spacing:-.04em;font-weight:250}
.phead h1 em{color:var(--amber-text)}
.lede{margin:22px 0 0;max-width:52ch;font-size:clamp(17px,1.5vw,19px);color:var(--ink-soft)}
.phead__btns{display:flex;flex-wrap:wrap;gap:10px}
.js .phead__copy > *{opacity:0;transform:translateY(20px);animation:up 1s var(--ease) forwards}
.js .phead__copy > :nth-child(2){animation-delay:.08s}.js .phead__copy > :nth-child(3){animation-delay:.18s}

/* ---------- the shelf page ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;position:sticky;top:72px;z-index:5;padding:6px;width:max-content;max-width:100%;border-radius:100px;background:oklch(92% .024 80 / .82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.chipbtn{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:10px 16px;border:0;border-radius:100px;background:transparent;font:600 14px/1 var(--sans);cursor:pointer;transition:background .3s,color .3s,transform .2s}
.chipbtn sup{font-size:10.5px;opacity:.55;vertical-align:4px}
@media (hover:hover){.chipbtn:hover{background:var(--paper-3)}}
.chipbtn:active{transform:scale(.95)}
.chipbtn[aria-pressed=true]{background:var(--esp);color:var(--cream)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.card{display:flex;flex-direction:column;border-radius:20px;background:var(--card);overflow:hidden;box-shadow:inset 0 0 0 1px var(--rule);transition:transform .55s var(--ease),box-shadow .4s}
@media (hover:hover){.card:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--rule),var(--sh)}}
.card.hide{display:none}
.card__im{position:relative;overflow:hidden;background:var(--paper-2)}
.card__im img{aspect-ratio:4/4.4;object-fit:cover;width:100%;height:auto;transition:transform 1s var(--ease)}
@media (hover:hover){.card:hover .card__im img{transform:scale(1.05)}}
.card__b{display:flex;flex-direction:column;gap:10px;padding:18px 20px 22px;flex:1}
.card__b .lbl{color:var(--amber-text);font-size:10.5px}
.card__b h2{font:400 clamp(26px,2.4vw,32px)/1 var(--serif);letter-spacing:-.02em}
.card__b p{margin:2px 0 0;color:var(--ink-soft);font-size:15px}
.card--soon .card__im img{filter:saturate(.75)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.shelf-empty{text-align:center;padding:40px 0;color:var(--ink-soft)}
.scale{padding:var(--sec) 0}
.scale__in{display:grid;grid-template-columns:1fr 1.4fr;gap:30px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:var(--r);background:var(--paper-2)}
.scale h2{font-size:clamp(36px,4vw,54px)}
.scale h2 em{color:var(--amber-text)}
.scale ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.scale li{display:flex;align-items:center;gap:16px}
.scale .beans{flex:none}

/* ---------- one review ---------- */
.rvw__top{padding-top:clamp(20px,3vw,32px)}
.back{display:inline-flex;align-items:center;gap:8px;padding:8px 0;font:600 14px/1 var(--sans);color:var(--ink-soft);transition:color .25s,gap .3s var(--ease)}
@media (hover:hover){.back:hover{color:var(--ink);gap:12px}}
.back .ph{width:16px;height:16px}
.rvw__hero{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;margin-top:18px}
.gal{position:sticky;top:84px}
.gal__main{position:relative;aspect-ratio:4/4.6;border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.gal__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.gal__main img.on{opacity:1;transform:none}
.gal__th{display:flex;gap:10px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
.gal__th button{flex:0 0 74px;height:74px;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:pointer;opacity:.55;box-shadow:inset 0 0 0 2px transparent;transition:opacity .3s,transform .3s var(--ease)}
.gal__th button img{width:100%;height:100%;object-fit:cover}
@media (hover:hover){.gal__th button:hover{opacity:.9;transform:translateY(-2px)}}
.gal__th button[aria-pressed=true]{opacity:1;outline:2px solid var(--esp);outline-offset:2px}
.rvw__head{padding-top:clamp(0px,2vw,24px)}
.rvw__head > .lbl{color:var(--amber-text)}
.rvw__head h1{margin:14px 0 18px;font-size:clamp(50px,6.4vw,92px);line-height:.92;letter-spacing:-.04em;font-weight:260}
.rvw__score{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.rvw__score .beans i{width:22px;height:22px}
.rvw__score .beans em{font-size:15px}
.price{display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--sans);color:var(--ink-soft)}
.price .ph{width:16px;height:16px}
.rvw__head .verdict{font-size:clamp(23px,2.4vw,30px);margin-top:26px}
.verdict--soon{color:var(--ink-soft);font-style:italic}
.rvw__head .row{margin-top:28px}
.disc{display:flex;gap:10px;margin:22px 0 0;max-width:46ch;font-size:14px;color:var(--ink-soft)}
.disc .ph{width:18px;height:18px;margin-top:2px;color:var(--amber-text)}
.rvw__body{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,6vw,90px);padding:var(--sec) 0 0}
.rvw__main{display:grid;gap:clamp(40px,5vw,60px);align-content:start}
.rvw__h{font-size:clamp(34px,3.6vw,48px);font-weight:280;margin-bottom:18px}
.rvw__lede{margin:0;font:400 clamp(19px,1.7vw,22px)/1.6 var(--serif);max-width:60ch}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:17px}
.ticks .ph{width:18px;height:18px;margin-top:4px;color:var(--amber-bean)}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pc > div{padding:22px;border-radius:var(--r-sm);background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.pc h3,.who h3{display:flex;align-items:center;gap:10px;font:700 15px/1 var(--sans);letter-spacing:0;margin-bottom:12px}
.pc h3 .ph,.who h3 .ph{width:18px;height:18px;color:var(--amber-text)}
.pc ul{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ink-soft)}
.who{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.who p{margin:0;color:var(--ink-soft)}
.rvw__side{display:grid;gap:14px;align-content:start;position:sticky;top:84px}
.cardlet{padding:22px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.cardlet > .lbl{display:block;color:var(--amber-text);margin-bottom:4px}
.cardlet > .lbl small{text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink-soft)}
.cardlet .sl:first-of-type{margin-top:14px}
.cardlet--brew{background:var(--esp);color:var(--cream);box-shadow:none}
.cardlet--brew > .lbl{color:var(--amber)}
.cardlet--brew p{margin:8px 0 18px;color:var(--cream-soft)}
.origin{margin:12px 0 0;display:grid}
.origin div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--rule)}
.origin dt{color:var(--ink-soft);font-size:14px}
.origin dd{margin:0;font-weight:600;font-size:14.5px;text-align:right}
.watch{padding-top:var(--sec)}
.watch__eps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px}
.watch .ep{height:auto;aspect-ratio:16/9}
.watch .ep--short{aspect-ratio:auto;height:100%;min-height:280px}
.more{padding:var(--sec) 0}
.is-review .letter{padding-top:var(--sec)}
.ftr{border-radius:28px 28px 0 0}
.is-home .ftr{border-radius:0}

/* ---------- episodes page ---------- */
.phead__cta{align-self:end}
.eplist{display:grid;gap:clamp(40px,6vw,72px)}
.eprow{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.eprow:nth-child(even){grid-template-columns:1fr 1.25fr}
.eprow:nth-child(even) .ep{order:2}
.eprow .ep{height:auto;aspect-ratio:16/9;border-radius:var(--r)}
.eprow--first{grid-template-columns:1fr;gap:24px}
.eprow--first .eprow__b{display:grid;grid-template-columns:1.2fr 1fr;gap:10px 40px;align-items:end}
.eprow--first .eprow__b > .lbl,.eprow--first .eprow__b h2{grid-column:1}
.eprow--first .eprow__b > p,.eprow--first .eprow__b > .beans,.eprow--first .eprow__b > .row{grid-column:2}
.eprow__b .lbl{color:var(--amber-text)}
.eprow__b h2{margin:12px 0 0;font-size:clamp(34px,4vw,56px);line-height:.98;font-weight:300}
.eprow__b p{margin:16px 0 10px;font:400 20px/1.4 var(--serif);color:var(--ink-soft)}
.eprow__b .row{margin-top:20px;gap:18px}
.eprow .pl{width:64px;height:64px;left:50%;top:50%;right:auto;margin:-32px 0 0 -32px}
.eprow .pl .ph{width:22px;height:22px}
.eprow .ep::after{background:oklch(21% .022 52 / .15)}
.shorts{padding:var(--sec) 0}
.shorts__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,260px));gap:14px}
.ep--short{height:auto;aspect-ratio:9/16}

/* ---------- brew guide: the bench ---------- */
.bench{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,5vw,80px);align-items:start;padding:clamp(40px,6vw,84px) 0 var(--sec)}
.bench__k{color:var(--amber-text);display:flex;align-items:center;gap:10px}
.bench__k::before{content:"";width:24px;height:1.5px;background:currentColor}
.bench h1{margin:18px 0 clamp(26px,3.4vw,40px);font-size:clamp(54px,7.4vw,108px);line-height:.92;letter-spacing:-.04em;font-weight:250}
.bench h1 em{color:var(--amber-text)}
.pick{position:relative;display:flex;flex-wrap:wrap;gap:4px clamp(12px,1.8vw,24px);padding-bottom:12px;border-bottom:1px solid var(--rule)}
.pick button{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;padding:8px 0;border:0;background:none;cursor:pointer;font:400 clamp(18px,1.55vw,21px)/1 var(--serif);color:var(--ink-soft);transition:color .3s,font-weight .4s var(--ease)}
.pick button{position:relative}
.pick button::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--amber-text);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.pick button[aria-checked=true]::after{transform:scaleX(1);transform-origin:left}
.pick button .nmb{font:600 12px/1 var(--sans);color:var(--amber-text);opacity:.6;transition:opacity .3s}
@media (hover:hover){.pick button:hover{color:var(--ink)}}
.pick button[aria-checked=true]{color:var(--ink);font-weight:340;font-style:italic}
.pick button[aria-checked=true] .nmb{opacity:1}
.recipe-line{margin:clamp(24px,3vw,34px) 0 0;max-width:30ch;font:300 clamp(27px,2.7vw,38px)/1.32 var(--serif);letter-spacing:-.015em;text-wrap:pretty}
.recipe-line .num{font-weight:340;font-style:italic;color:var(--amber-text);font-variant-numeric:tabular-nums;display:inline-block}
.recipe-line .num.tick{animation:tick .45s var(--ease)}
.recipe-line .oz{font-size:.55em;color:var(--ink-soft);font-family:var(--sans);font-weight:500;letter-spacing:0;vertical-align:.2em}
.cups{display:inline-flex;align-items:center;gap:4px;margin:0 2px;padding:2px;border-radius:100px;background:var(--paper-2);vertical-align:.08em}
.cups b{min-width:1.1ch;text-align:center;font-weight:340;font-style:italic;color:var(--amber-text);font-variant-numeric:tabular-nums;line-height:1}
.cups__b{width:34px;height:34px;border:0;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer;font:500 20px/1 var(--sans);color:var(--ink);display:grid;place-items:center;transition:background .25s,transform .2s var(--ease)}
@media (hover:hover){.cups__b:hover{background:var(--amber)}}
.cups__b:active{transform:scale(.88)}
.cups__b:disabled{opacity:.35;pointer-events:none}
.strength{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:22px}
.strength .lbl{color:var(--ink-soft);margin-right:6px}
.strength button{min-height:36px;padding:8px 13px;border:0;border-radius:100px;background:transparent;box-shadow:inset 0 0 0 1px var(--rule);font:600 13.5px/1 var(--sans);cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
@media (hover:hover){.strength button:hover{box-shadow:inset 0 0 0 1px oklch(24% .03 50 / .35)}}
.strength button[aria-checked=true]{background:var(--esp);color:var(--cream);box-shadow:none}
.ratio{margin-left:auto;font:400 20px/1 var(--serif);color:var(--ink-soft)}
.ratio b{font-weight:500;color:var(--ink)}
.clock{margin-top:clamp(28px,3.4vw,40px);padding-top:22px;border-top:1px solid var(--rule)}
.clock__top{display:flex;align-items:center;gap:14px}
.clock__t{font:250 clamp(52px,5vw,68px)/1 var(--serif);letter-spacing:-.03em;min-width:3.2ch;font-variant-numeric:tabular-nums;margin-right:auto}
.clock__reset{width:44px;height:44px;border:0;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;cursor:pointer;transition:transform .5s var(--ease),background .25s}
@media (hover:hover){.clock__reset:hover{background:var(--paper-3);transform:rotate(-160deg)}}
.clock__reset .ph{width:18px;height:18px}
.clock__bar{height:3px;margin:16px 0 6px;border-radius:3px;background:var(--paper-3);overflow:hidden}
.clock__bar i{display:block;height:100%;width:100%;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform 1s linear}
.clock__steps{list-style:none;margin:0;padding:0;counter-reset:s}
.clock__steps li{display:grid;grid-template-columns:3.4em 1fr;gap:12px;padding:10px 0;border-bottom:1px dashed var(--rule);color:var(--ink-soft);transition:color .4s,opacity .4s}
.clock__steps li time{font:600 13px/1.5 var(--sans);font-variant-numeric:tabular-nums;color:oklch(24% .03 50 / .45)}
.clock__steps li.on{color:var(--ink);font-weight:600}
.clock__steps li.on time{color:var(--amber-text)}
.clock__steps li.done{opacity:.45;text-decoration:line-through;text-decoration-color:var(--amber)}
.brewing .clock__steps li:not(.on):not(.done){opacity:.75}

/* the brewer on the counter */
.stage2{position:sticky;top:88px;margin:0;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,var(--paper-2) 0 88.5%,oklch(52% .06 58) 88.5% 90%,oklch(44% .055 55) 90%);box-shadow:inset 0 0 0 1px var(--rule)}
.stage2::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 70% 18%,oklch(97% .03 85 / .9),transparent 70%);pointer-events:none}
.rig{position:relative;display:block;width:100%;height:auto;overflow:visible}
.rig .shadow{fill:oklch(21% .022 52 / .22)}
.rig .ln{fill:none;stroke:var(--esp);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rig .ln.thin{stroke-width:1.5;opacity:.35}
.rig .glassfill{fill:url(#glass)}
.rig .metal{fill:oklch(30% .02 55)}
.rig .cone{fill:oklch(98% .01 85 / .85)}
.rig .knob{fill:oklch(30% .02 55)}
.rig .mesh{fill:oklch(60% .02 60)}
.rig .mug{fill:oklch(98% .01 85 / .35)}
.kettle{transition:transform .8s var(--ease),opacity .5s;transform-origin:20px 60px;opacity:.55}
.brewing .kettle{opacity:1}
.pouring .kettle{transform:rotate(7deg)}
.kettle__body{fill:oklch(30% .02 55)}
.kettle__neck,.kettle__lid{fill:none;stroke:oklch(30% .02 55);stroke-width:6;stroke-linecap:round}
.scene{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .7s var(--ease);pointer-events:none}
.scene.on{opacity:1;transform:none}
.fill,.target,.plunger,.crust{transition:transform .9s var(--ease)}
.brewing .fill,.brewing .plunger,.brewing .crust{transition:transform 1.05s linear}
.wave{animation:wave 3.2s linear infinite}
@keyframes wave{to{transform:translateX(-80px)}}
.target line{stroke:var(--amber-text);stroke-width:1.5;stroke-dasharray:5 5}
.target text,.moon text{font:600 11px var(--sans);fill:var(--amber-text);letter-spacing:.04em}
.stream{transform-origin:20px 60px;transform:rotate(7deg);fill:none;stroke:#7a4b2a;stroke-width:3;stroke-linecap:round;stroke-dasharray:10 7;opacity:0;transition:opacity .35s}
.pouring .stream{opacity:.85;animation:flow .45s linear infinite}
@keyframes flow{to{stroke-dashoffset:-17}}
.drop{fill:#5a3720;opacity:0}
.dripping .drop{animation:drop 1.1s cubic-bezier(.55,0,1,.45) infinite}
.dripping .drop--b{animation-delay:.55s}
@keyframes drop{0%{transform:translateY(0);opacity:1}85%{opacity:1}100%{transform:translateY(var(--fall,120px));opacity:0}}
.bloom{transition:opacity .8s}
.grounds{opacity:0;transition:opacity .8s}
.cold-on .grounds{opacity:1}
.grounds circle{fill:#3b2516}
.crust__r{transform-box:fill-box;transform-origin:center}
.stirring .crust__r{animation:stir .5s ease-in-out 4}
@keyframes stir{50%{transform:skewX(12deg) translateX(4px)}}
.cold-on .grounds circle{animation:float 5s ease-in-out infinite alternate}
.grounds circle:nth-child(2n){animation-delay:-1.5s!important}.grounds circle:nth-child(3n){animation-delay:-3s!important}
@keyframes float{to{transform:translate(4px,-18px)}}
.moon{opacity:0;transition:opacity .8s}
.moon path{fill:var(--amber)}
.fridge .moon{opacity:1}
.stage2__cap{position:absolute;left:18px;bottom:14px;font:600 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:oklch(93% .025 80 / .8)}

/* the recipes, written out */
.recipes{padding:0 0 var(--sec)}
.rlist{border-top:1px solid var(--rule)}
.rrow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.3fr);gap:clamp(18px,3vw,44px);padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--rule);scroll-margin-top:90px}
.rrow__h{display:grid;align-content:start;gap:10px}
.rrow__n{font:italic 340 34px/1 var(--serif);color:var(--amber-text)}
.rrow h3{font-size:clamp(32px,3vw,42px);font-weight:300}
.rrow__h .textlink{justify-self:start;border:0;background:none;padding:0 0 2px;cursor:pointer;font:600 14px/1.2 var(--sans);border-bottom:1.5px solid var(--amber)}
.rrow__meta{margin:0;display:grid;gap:10px;align-content:start}
.rrow__meta div{display:grid;grid-template-columns:5.5em 1fr;gap:10px}
.rrow__meta dt{font:700 10.5px/1.7 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.rrow__meta dd{margin:0;font-weight:600;font-size:15px}
.rrow__steps{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--ink-soft)}
.rrow__steps li::marker{color:var(--amber-text);font-weight:700}
.rrow.flash{animation:flash 1.2s var(--ease)}
@keyframes flash{30%{background:oklch(91% .055 78 / .5)}}
.stat{padding:18px;border-radius:var(--r-sm);background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.stat b{display:block;font:300 clamp(34px,3.6vw,46px)/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .lbl{display:block;margin-top:8px;color:var(--ink-soft);font-size:10.5px}
.stat b.tick{animation:tick .45s var(--ease)}
@keyframes tick{from{transform:translateY(-6px);opacity:.3}}
.recipes__gear{margin:28px 0 0;font:400 20px/1.5 var(--serif);color:var(--ink-soft)}
.recipes__gear a,.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:center;padding:clamp(40px,6vw,88px) 0 var(--sec)}
.about__ph{position:relative;margin:0;border-radius:28px;overflow:hidden;aspect-ratio:1;background:var(--paper-2);transform:rotate(-1.5deg);transition:transform .8s var(--ease)}
@media (hover:hover){.about__ph:hover{transform:rotate(0)}}
.about__ph img{width:100%;height:100%;object-fit:cover}
.about__ph figcaption{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:100px;background:var(--card);font:600 13px/1 var(--sans)}
.about__ph figcaption .ph{width:15px;height:15px;color:var(--amber-text)}
.about__copy > .lbl{color:var(--amber-text)}
.about__copy h1{margin:14px 0 22px;font-size:clamp(56px,7.6vw,112px);line-height:.9;letter-spacing:-.04em;font-weight:250}
.about__copy h1 em{color:var(--amber-text)}
.prose p{margin:0 0 16px;max-width:60ch;color:var(--ink-soft)}
.prose .lede{color:var(--ink);font:400 clamp(20px,1.8vw,23px)/1.5 var(--serif);margin-top:0}
.about__copy .row{margin-top:26px}
.rules{padding:0 0 var(--sec)}
.rules__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rules__list li{padding:clamp(22px,3vw,32px);border-radius:var(--r);background:var(--paper-2)}
.rules__list .nmb{display:block;font:italic 340 40px/1 var(--serif);color:var(--amber-text);margin-bottom:16px}
.rules__list b{display:block;font:400 26px/1.1 var(--serif);letter-spacing:-.015em}
.rules__list p{margin:10px 0 0;color:var(--ink-soft)}
.counter-sec{background:var(--esp);color:var(--cream);padding:var(--sec) 0;border-radius:28px}
.counter-sec .h2 em{color:var(--amber)}
.counter{position:relative;height:clamp(420px,46vw,560px);border-radius:var(--r);background:radial-gradient(60% 70% at 50% 30%,var(--esp-3),var(--esp-2));overflow:hidden;box-shadow:inset 0 0 0 1px var(--cream-faint);touch-action:pan-y}
.counter__top{position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,oklch(36% .045 55),oklch(28% .035 52));box-shadow:inset 0 2px 0 oklch(50% .05 60 / .5);z-index:0}
.thing{position:absolute;z-index:1;left:var(--x);bottom:var(--b);height:var(--h);transform:rotate(var(--r));transform-origin:50% 100%;transition:transform .5s var(--ease),filter .3s;touch-action:none;filter:drop-shadow(0 22px 18px oklch(10% .02 50 / .55))}
.thing img{height:100%;width:auto;max-width:none;pointer-events:none;-webkit-user-drag:none}
@media (hover:hover){.thing:hover{transform:rotate(0) scale(1.04)}}
.thing.drag{transform:rotate(0) scale(1.08);filter:drop-shadow(0 34px 26px oklch(10% .02 50 / .6));transition:filter .3s}
.thing.tidy{transition:left .8s var(--ease),top .8s var(--ease),bottom .8s var(--ease),transform .5s var(--ease)}
.thing__tag{position:absolute;left:50%;bottom:-10px;transform:translate(-50%,6px);padding:6px 10px;border-radius:100px;background:var(--cream);color:var(--esp);font:700 11px/1 var(--sans);white-space:nowrap;opacity:0;transition:opacity .25s,transform .35s var(--ease);pointer-events:none}
.thing:focus-visible .thing__tag{opacity:1;transform:translate(-50%,0)}@media (hover:hover){.thing:hover .thing__tag{opacity:1;transform:translate(-50%,0)}}
.facts{padding:var(--sec) 0}
.facts__list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px 0 0}
.facts__list div{padding:22px;border-radius:var(--r-sm);background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.facts__list dt{display:flex;align-items:center;gap:8px;font:700 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.facts__list dt .ph{width:16px;height:16px;color:var(--amber-text)}
.facts__list dd{margin:12px 0 0;font:400 22px/1.2 var(--serif)}
.workband{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;padding:clamp(28px,4vw,48px);margin-bottom:var(--sec);border-radius:var(--r);background:var(--paper-2)}
.workband .lbl{color:var(--amber-text)}
.workband h2{margin:10px 0 8px;font-size:clamp(34px,4vw,52px)}
.workband h2 em{color:var(--amber-text)}
.workband p{margin:0;color:var(--ink-soft)}

/* ---------- work with me ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stats .stat b{font-size:clamp(40px,4.6vw,62px)}
.stats__note{grid-column:1/-1;margin:4px 0 0;font-size:14px;color:var(--ink-soft)}
.stills{padding:var(--sec) 0 0}
.stills__grid--grid{columns:4 220px;column-gap:14px}
.stills--top{padding:var(--sec) 0}
.stills--mid{padding:var(--sec) 0 0}
.stills--more{padding:0 0 var(--sec)}
.stills__grid--bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,clamp(160px,17vw,250px));gap:14px}
.stills__grid--bento figure{margin:0!important;height:100%}
.stills__grid--bento figure:first-child{grid-column:span 2;grid-row:span 2}
.stills__grid--r figure:first-child{grid-column:3/span 2;grid-row:1/span 2}
.stills__grid--bento .still{height:100%}
.stills__grid--bento .still img{width:100%;height:100%;object-fit:cover}
.stills__grid figure{margin:0 0 14px;break-inside:avoid;border-radius:16px;overflow:hidden}
.stills__grid img{width:100%;height:auto;transition:transform 1s var(--ease)}
@media (hover:hover){.stills__grid figure:hover img{transform:scale(1.04)}}
.still{display:block;width:100%;padding:0;border:0;background:var(--paper-2);cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:clamp(16px,4vw,48px);background:oklch(16% .02 52 / .92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s var(--ease)}
.lb.on{opacity:1}
.lb img{max-width:100%;max-height:calc(100vh - 120px);max-height:calc(100svh - 120px);width:auto;height:auto;border-radius:14px;box-shadow:0 30px 80px -30px #000;transform:scale(.96);transition:transform .5s var(--ease),opacity .25s}
.lb.on img{transform:none}
.lb figcaption{margin-top:14px;color:var(--cream-soft);font-size:14px;text-align:center}
.lb button{position:absolute;width:48px;height:48px;border:0;border-radius:50%;background:oklch(93% .025 80 / .12);color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:background .25s}
@media (hover:hover){.lb button:hover{background:var(--amber);color:var(--esp)}}
.lb button .ph{width:20px;height:20px}
.lb__x{top:16px;right:16px}.lb__p{left:16px;top:50%;margin-top:-24px}.lb__n{right:16px;top:50%;margin-top:-24px}
.partners{display:flex;align-items:center;flex-wrap:wrap;gap:16px 40px;padding:clamp(40px,5vw,64px) 0 0}
.partners .lbl{color:var(--ink-soft)}
.partners ul{display:flex;flex-wrap:wrap;gap:12px clamp(22px,4vw,48px);list-style:none;margin:0;padding:0}
.partners li{font:400 24px/1 var(--serif);color:oklch(24% .03 50 / .62);transition:color .3s}
@media (hover:hover){.partners li:hover{color:var(--ink)}}
.rates{background:var(--esp);color:var(--cream);padding:var(--sec) 0;border-radius:28px}
.rate{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rate li{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px 24px;border-radius:var(--r);background:var(--esp-2);box-shadow:inset 0 0 0 1px var(--cream-faint);transition:transform .5s var(--ease),background .3s}
@media (hover:hover){.rate li:hover{transform:translateY(-5px);background:var(--esp-3)}}
.rate li.top{background:var(--amber);color:var(--esp);box-shadow:none}
.rate .chip{position:static;align-self:flex-start;background:var(--esp);color:var(--cream)}
.rate b{font:420 26px/1.05 var(--serif);letter-spacing:-.015em}
.rate strong{font:700 15px/1 var(--sans);color:var(--amber)}
.rate li.top strong{color:var(--esp)}
.rate p{margin:4px 0 0;color:var(--cream-soft);font-size:15px}
.rate li.top p{color:oklch(21% .022 52 / .78)}
.inquire{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,90px);align-items:start;padding:var(--sec) 0}
.inquire__copy{position:sticky;top:96px}
.inquire__copy .lbl{color:var(--amber-text)}
.inquire__copy h2{margin:14px 0 16px;font-size:clamp(48px,5.6vw,80px);line-height:.92;font-weight:260}
.inquire__copy h2 em{color:var(--amber-text)}
.inquire__copy p{margin:0;color:var(--ink-soft);max-width:38ch}
.mail{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-weight:600;border-bottom:1.5px solid var(--amber);padding-bottom:3px}
.mail .ph{width:18px;height:18px}
.form{position:relative;padding:clamp(22px,3.4vw,40px);border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--rule),var(--sh)}
.form__body{display:grid;gap:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.fld > span,.fld legend{font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:0;margin-bottom:8px}
.fld > span{margin-bottom:0}
.fld :is(input,select,textarea){width:100%;min-height:50px;padding:13px 14px;border:0;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule);font:500 16px/1.4 var(--sans);color:var(--ink);transition:box-shadow .25s,background .25s}
.fld textarea{resize:vertical;min-height:120px}
@media (hover:hover){.fld :is(input,select,textarea):hover{box-shadow:inset 0 0 0 1.5px oklch(24% .03 50 / .3)}}
.fld :is(input,select,textarea):focus{outline:none;background:var(--card);box-shadow:inset 0 0 0 2px var(--esp),0 0 0 4px oklch(80% .125 70 / .35)}
.fld :is(input,textarea)::placeholder{color:oklch(24% .03 50 / .4)}
.fld input:user-invalid{box-shadow:inset 0 0 0 2px oklch(55% .17 30)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chipck{position:relative;cursor:pointer}
.chipck input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chipck span{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:10px 14px;border-radius:100px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule);font:600 14px/1 var(--sans);transition:background .25s,color .25s,box-shadow .25s,transform .2s}
.chipck .ph{width:0;height:14px;opacity:0;transition:width .3s var(--ease),opacity .2s}
@media (hover:hover){.chipck:hover span{box-shadow:inset 0 0 0 1.5px oklch(24% .03 50 / .35)}}
.chipck input:checked + span{background:var(--esp);color:var(--cream);box-shadow:none}
.chipck input:checked + span .ph{width:14px;opacity:1}
.chipck input:focus-visible + span{outline:2px solid var(--amber-text);outline-offset:2px}
.chipck:active span{transform:scale(.95)}
.form__go{justify-self:start;min-width:180px}
.form__go.busy{opacity:.7;pointer-events:none}
.form__go.busy .ph{animation:spin 1s linear infinite}
.form__note{margin:-6px 0 0;font-size:13px;color:var(--ink-soft)}
.form__err{margin:0;padding:12px 14px;border-radius:12px;background:oklch(93% .04 35);color:oklch(40% .12 30);font-weight:600;font-size:14px}
.form.is-done .form__body{display:none}
.form__done{display:grid;justify-items:start;gap:10px;padding:10px 0}
.form__done[hidden]{display:none}
.form__cup{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:var(--esp);animation:pour .9s var(--ease)}
.form__cup .ph{width:30px;height:30px}
.form__done h3{font-size:clamp(32px,3.4vw,44px);font-weight:300;margin-top:8px}
.form__done p{margin:0 0 10px;color:var(--ink-soft)}

/* ---------- 404 ---------- */
.nf{display:grid;justify-items:center;text-align:center;padding:clamp(60px,10vw,140px) 0}
.nf__cup{width:160px;margin-bottom:10px}
.nf__cup svg{overflow:visible}
.nf__mug,.nf__steam path{fill:none;stroke:var(--esp);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.nf__steam path{stroke:var(--amber-text);animation:steam 3.6s ease-in-out infinite}
.nf__steam path:nth-child(2){animation-delay:1.2s}.nf__steam path:nth-child(3){animation-delay:2.4s}
.nf .lbl{color:var(--amber-text)}
.nf h1{margin:14px 0 14px;font-size:clamp(54px,8vw,110px);line-height:.92;font-weight:250;letter-spacing:-.04em}
.nf h1 em{color:var(--amber-text)}
.nf p{margin:0 0 26px;color:var(--ink-soft)}

/* ---------- view transitions between pages ---------- */
::view-transition-old(root){animation:.35s var(--ease) both vt-out}
::view-transition-new(root){animation:.55s var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:var(--ease)}

/* ---------- small screens ---------- */
@media (max-width:1020px){
  .ftr__grid{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .facts__list,.stats{grid-template-columns:repeat(2,1fr)}
  .rate{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .bar__nav{display:none}
  .bar{grid-template-columns:1fr auto;padding:0 10px 0 18px;height:60px}
  .hcard{display:none}
  .hbrands{max-width:calc(100% - 44px)}
  .hbrands .lbl{display:none}
  .slides{min-height:540px}
  .cap{bottom:84px}
  .tate{display:none}
  .feature,.lt,.rvw__hero,.rvw__body,.bench,.about,.inquire,.scale__in,.eprow,.eprow:nth-child(even),.eprow--first .eprow__b{grid-template-columns:1fr}
  .eprow:nth-child(even) .ep{order:0}
  .eprow--first .eprow__b > *{grid-column:1!important}
  .steps{grid-template-columns:1fr}
  .step img{aspect-ratio:4/3}
  .eps{grid-template-columns:1fr}
  .gal,.rvw__side,.inquire__copy{position:static}
  .rules__list{grid-template-columns:1fr}
  .stage{aspect-ratio:1}
  .lt__cup{width:110px}
  .bench{display:flex;flex-direction:column}
  .bench__copy{display:contents}
  .bench__k,.bench h1{order:0}
  .pick{order:1}
  .stage2{order:2;position:relative;top:0;max-width:380px;width:100%;align-self:center;margin-top:24px}
  .recipe-line{order:3}
  .strength{order:4}
  .clock{order:5}
  .bench h1{margin-bottom:22px}
  .rrow{grid-template-columns:1fr 1fr}
  .rrow__steps{grid-column:1/-1}
  .filters{top:66px}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .hero{padding:0 8px}
  .slides{border-radius:20px;height:calc(100svh - 72px)}
  .cap{left:20px;right:20px}
  .cap h1{font-size:clamp(54px,16vw,80px)}
  .cap .row .btn{flex:1 1 auto}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .t b{font-size:20px}
  .t__b{padding:12px 12px 14px}
  .t .beans i{width:12px;height:12px}
  .cards,.cards--3{grid-template-columns:1fr}
  .lt .nl__row{flex-wrap:wrap}
  .lt .nl input{flex-basis:100%}
  .lt .nl__b{width:100%}
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .ftr__grid > div:last-child{grid-column:1/-1}
  .ftr__brand{grid-column:1/-1}
  .ftr__fine{flex-direction:column}
  .stat{padding:14px}
  .stat b{font-size:30px}
  .recipes__grid,.pc,.who,.two{grid-template-columns:1fr}
  .rate,.facts__list{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stats .stat b{font-size:34px}
  .stills__grid--bento{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:150px;gap:10px}
  .stills__grid--bento figure:first-child,.stills__grid--r figure:first-child{grid-column:1/-1;grid-row:span 2}
  .filters{border-radius:20px;width:auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-4px}
  .filters::-webkit-scrollbar{display:none}
  .chipbtn{flex:none}
  .pick{gap:2px 16px}
  .rrow{grid-template-columns:1fr}
  .ratio{margin-left:0;width:100%;margin-top:6px}
  .clock__t{font-size:52px}
  .thing{height:calc(var(--h) * .58)}
  .counter{height:360px}
  .shorts__row{grid-template-columns:repeat(2,1fr)}
  .menu__list a{font-size:clamp(42px,12.5vw,64px)}
  .phead h1{font-size:clamp(50px,14vw,76px)}
  .rvw__head h1{font-size:clamp(46px,13vw,68px)}
  .gal__main{aspect-ratio:1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-rv],.js .cap > *,.js .hcard,.js .phead__copy > *{opacity:1;transform:none}
  .slides > img{transform:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}