:root{
  --cream:#f3ede3;
  --cream-2:#e8dfd0;
  --ink:#2b1a17;
  --wine:#6a1d2b;
  --wine-2:#561623;
  --wine-3:#4a121d;
  --gold:#d6a86a;
  --font:"Readex Pro",system-ui,sans-serif;
  --gutter:clamp(16px,4vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--cream);color:var(--ink);font-family:var(--font);font-weight:300;font-size:16px;line-height:1.7;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.pill{display:inline-flex;align-items:center;gap:.5em;border-radius:999px;padding:.55em 1.25em;font-size:14px;font-weight:400;line-height:1.4;border:1px solid currentColor;transition:background .25s,color .25s,transform .2s}
.pill:active{transform:scale(.97)}
.pill--solid{background:var(--wine);border-color:var(--wine);color:var(--cream)}
.pill--solid:hover{background:var(--wine-2)}
.pill--cream{background:var(--cream);border-color:var(--cream);color:var(--wine)}
.pill--cream:hover{background:#fff}
.pill--ghost{border-color:rgba(243,237,227,.4)}
.pill--ghost:hover{background:rgba(243,237,227,.1)}
.pill--lg{font-size:17px;padding:.8em 2em}

/* NAV */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px var(--gutter);color:var(--wine);transition:color .35s}
.nav__logo{font-weight:300;font-size:22px;letter-spacing:.02em}
.nav__links{display:flex;gap:32px;font-size:14px;font-weight:400}
.nav__links a{opacity:.85;transition:opacity .2s}
.nav__links a:hover{opacity:1}
.nav__end{justify-self:end}
.nav.is-dark{color:var(--cream)}
.nav.is-dark .pill--solid{background:var(--cream);border-color:var(--cream);color:var(--wine)}
@media (max-width:760px){.nav{grid-template-columns:1fr auto}.nav__links{display:none}}

/* MARK (wordmark + cup under the beh) */
.mark{position:relative;display:inline-block;font-weight:200;color:var(--wine);font-size:clamp(130px,min(30vw,38svh),400px);line-height:1.25;letter-spacing:0}
.mark__txt{display:block}
.mark__cup{position:absolute;width:.3em;height:auto;overflow:visible;left:0;top:0}
.mark__mug{fill:none;stroke:var(--wine);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.mark__stream,.mark__liquid{fill:#4a2a1c}

/* INTRO */
.intro__stage{position:relative;height:100svh;overflow:hidden}
.intro__hero{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px var(--gutter) 40px}
.intro__kicker{font-size:13px;letter-spacing:.08em;color:var(--wine);opacity:.8;margin-top:6px}
.intro__kicker span{letter-spacing:.22em}
.intro__kicker b{font-weight:400}
.intro__tag{margin-top:10px;font-size:clamp(16px,1.6vw,19px)}
.intro__hint{position:absolute;bottom:24px;font-size:12px;opacity:.55;letter-spacing:.05em}
.macro{position:absolute;inset:0;clip-path:circle(0% at 50% 110%);background:#1a0d08}
.macro__img{width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(1.1);transform:scale(1.15)}
.macro__line{position:absolute;inset:0;display:grid;place-items:center;color:var(--cream);font-weight:200;font-size:clamp(36px,6vw,88px);opacity:0}

/* PRODUCTS */
.products{background:var(--wine);color:var(--cream)}
.products__stage{position:relative;height:100svh;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;align-items:center;column-gap:var(--gutter);padding:90px var(--gutter) 28px;overflow:hidden}
.products__info{max-width:440px;justify-self:start}
.products__cat{font-size:13px;color:var(--gold);letter-spacing:.05em}
.products__name{font-weight:200;font-size:clamp(42px,5.6vw,84px);line-height:1.15;margin:.15em 0 .3em}
.products__desc{font-size:15px;opacity:.75;max-width:34ch;min-height:3.4em}
.products__price{margin-top:22px;font-weight:200;font-size:clamp(30px,3vw,42px);display:flex;align-items:baseline;gap:.25em}
.products__price small{font-size:13px;opacity:.6;font-weight:300}
.products__actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.odo{display:inline-flex;direction:ltr;height:1.2em;line-height:1.2em;overflow:hidden;font-variant-numeric:tabular-nums}
.odo__col{display:flex;flex-direction:column;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.odo__col span{height:1.2em}

.products__visual{position:relative;justify-self:center;align-self:center;width:min(40vw,60svh,560px);aspect-ratio:1}
.cup{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fffaf2 0%,#f1e9dc 45%,#d9cdb9 100%);box-shadow:0 50px 80px -30px rgba(20,0,5,.7),0 12px 24px -10px rgba(20,0,5,.5),inset 0 -6px 14px rgba(120,90,60,.25)}
.cup__in{position:absolute;inset:8.5%;border-radius:50%;overflow:hidden;box-shadow:inset 0 6px 18px rgba(60,30,10,.45);background:#e9dfcf;transition:inset .6s cubic-bezier(.2,.8,.2,1)}
.cup.is-plate .cup__in{inset:4%}
.cup__empty{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#f6efe4,#d8cab4)}
.cup__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:circle(0% at 50% 50%)}
.cup__in::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),inset 0 10px 24px rgba(0,0,0,.35);pointer-events:none}
.stream{position:absolute;left:50%;bottom:50%;width:12px;margin-left:-6px;height:100svh;border-radius:6px;transform:scaleY(0);transform-origin:50% 0;z-index:2;background:linear-gradient(90deg,rgba(255,255,255,.0),rgba(255,255,255,.25) 40%,rgba(0,0,0,.1)),var(--pour,#c99b6d)}

.thumbs{grid-column:1/-1;list-style:none;display:flex;justify-content:center;gap:18px;overflow-x:auto;padding:4px 6px;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.thumbs button{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:inherit;font:inherit;font-size:11px;cursor:pointer;opacity:.55;transition:opacity .2s;flex:none}
.thumbs button:hover{opacity:.85}
.thumbs button[aria-current="true"]{opacity:1}
.thumbs img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--cream-2)}
.thumbs button[aria-current="true"] img{box-shadow:0 0 0 3px var(--gold)}
@media (max-width:820px){
  .products__stage{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:center;text-align:center;row-gap:18px;padding-top:76px}
  .products__visual{grid-row:1;width:min(64vw,36svh)}
  .products__info{justify-self:center}
  .products__desc{margin-inline:auto;min-height:0}
  .products__price,.products__actions{justify-content:center}
  .products__price{margin-top:8px}.products__actions{margin-top:14px}
  .thumbs{justify-content:flex-start}
}

/* FULL MENU */
.sec-title{font-weight:200;font-size:clamp(38px,5vw,72px);line-height:1.2;margin-bottom:clamp(32px,5vw,64px)}
.full{background:var(--wine);color:var(--cream);padding:clamp(80px,10vw,140px) var(--gutter)}
.full__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.full__grid h3{font-size:13px;color:var(--gold);font-weight:400;letter-spacing:.05em;margin-bottom:14px}
.full__row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(243,237,227,.12)}
.full__row img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.full__row .dot{width:34px;height:34px;border-radius:50%;border:1px solid rgba(243,237,227,.25);flex:none}
.full__row b{font-weight:300;flex:1}
.full__row span{font-variant-numeric:tabular-nums;opacity:.75}
@media (max-width:900px){.full__grid{grid-template-columns:1fr;gap:32px}}

/* PROCESS */
.process{padding:clamp(90px,12vw,160px) var(--gutter) clamp(120px,14vw,200px);text-align:center}
.process .sec-title{color:var(--wine)}
.process__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);max-width:1000px;margin:0 auto;text-align:start}
.process__cols span{font-size:12px;color:var(--wine);opacity:.6}
.process__cols h3{font-weight:300;font-size:24px;color:var(--wine);margin:4px 0 8px}
.process__cols p{font-size:15px;opacity:.75}
.dial{position:relative;width:min(240px,60vw);margin:clamp(48px,7vw,90px) auto 0}
.dial svg{width:100%;height:auto;transform:rotate(-135deg)}
.dial__track,.dial__arc{fill:none;stroke-width:3}
.dial__track{stroke:var(--cream-2);stroke-dasharray:75 100}
.dial__arc{stroke:var(--wine);stroke-dasharray:0 100;stroke-linecap:round}
.dial__ticks line{stroke:var(--wine);stroke-width:1.5;opacity:.35}
.dial__needle{stroke:var(--wine);stroke-width:2;stroke-linecap:round;transform-origin:120px 120px}
.dial__hub{fill:var(--wine)}
.dial__num{position:absolute;inset:auto 0 8%;font-weight:200;font-size:44px;color:var(--wine);font-variant-numeric:tabular-nums}
@media (max-width:760px){.process__cols{grid-template-columns:1fr;text-align:center}}

/* CLOSE */
.close{position:relative;background:var(--wine);color:var(--cream);text-align:center;padding:clamp(140px,16vw,220px) var(--gutter) clamp(70px,8vw,110px);display:flex;flex-direction:column;align-items:center}
.close__wave{position:absolute;top:-1px;left:0;width:100%;height:clamp(50px,8vw,120px);fill:var(--cream)}
.mark--light{color:var(--cream);font-size:clamp(110px,min(22vw,32svh),300px)}
.mark--light .mark__mug{stroke:var(--cream)}
.close__mark{margin-bottom:.4em}
.close__kicker{color:var(--cream)}
.close__q{font-weight:200;font-size:clamp(28px,3.4vw,48px);margin:clamp(28px,4vw,48px) 0 28px}
.close__info{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%;max-width:820px;margin-top:clamp(56px,8vw,96px);padding-top:28px;border-top:1px solid rgba(243,237,227,.15);font-size:15px}
.close__info h3{font-size:12px;color:var(--gold);font-weight:400;margin-bottom:2px}
@media (max-width:640px){.close__info{grid-template-columns:1fr}}
.foot{display:flex;justify-content:space-between;padding:20px var(--gutter);background:var(--wine-3);color:var(--cream);font-size:13px;opacity:1}

/* letters (ZWJ keeps joining forms) */
.mark__txt i{display:inline-block;font-style:normal;will-change:transform}

/* origins */
.origins{position:relative;background:var(--wine);color:var(--cream);padding:clamp(80px,10vw,140px) var(--gutter) clamp(140px,16vw,220px);overflow:hidden}
.origins__ring{position:absolute;width:clamp(180px,22vw,320px);left:6%;bottom:14%;fill:none;stroke:rgba(243,237,227,.18);stroke-width:1.2;pointer-events:none}
.origins__row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);max-width:1100px}
.origins__row article{text-align:start}
.origins__row img{width:clamp(90px,10vw,130px);aspect-ratio:1;border-radius:50%;object-fit:cover;border:6px solid var(--cream);margin-bottom:18px}
.origins__row h3{font-weight:300;font-size:22px;margin-bottom:6px}
.origins__row p{font-size:15px;opacity:.75;margin-bottom:10px}
.origins__row small{display:inline-block;font-size:12px;border:1px solid rgba(243,237,227,.35);border-radius:99px;padding:4px 12px}
.origins__wave{position:absolute;inset:auto 0 -1px;width:100%;height:clamp(60px,8vw,120px);fill:var(--cream)}
@media (max-width:760px){.origins__row{grid-template-columns:1fr}}

/* process path */
.path{position:relative;max-width:1000px;height:120px;margin:0 auto 40px}
.path__line{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--wine);stroke-width:1.5;stroke-dasharray:6 8;vector-effect:non-scaling-stroke;opacity:.6}
.path__ico{position:absolute;left:var(--x);top:50%;translate:-50% -50%;width:64px;height:64px;border-radius:50%;background:var(--cream);border:1.5px solid var(--wine);display:grid;place-items:center}
.path__ico svg{width:30px;fill:none;stroke:var(--wine);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.path{display:none}}

/* details */
.products__kcal{font-size:12px;opacity:.55;margin-top:4px}
.full__row b small{display:block;font-size:11px;opacity:.5;font-weight:300;line-height:1.3}
.full__row span i{font-style:normal;font-size:11px;opacity:.6}
.full__note{margin-top:40px;font-size:12px;opacity:.55;max-width:70ch;line-height:1.8}
.close__cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.close__apps{margin-top:16px;font-size:13px;opacity:.6}
.close__info{grid-template-columns:repeat(3,1fr);text-align:start;max-width:960px}
.close__info p{line-height:1.8}
.close__info a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(243,237,227,.35)}
.close__link{display:inline-block;margin-top:6px;font-size:13px;color:var(--gold)}
.close__muted{font-size:12px;opacity:.6;margin-top:4px}
.close__social{margin-top:8px;font-size:13px;opacity:.85}
.foot{gap:12px;flex-wrap:wrap;font-size:12px}
.foot__legal{opacity:.6}

/* mobile action bar */
.mbar{display:none}
@media (max-width:760px){
  .mbar{position:fixed;inset:auto 12px calc(12px + env(safe-area-inset-bottom)) 12px;z-index:60;display:grid;grid-template-columns:auto auto 1fr;gap:6px;padding:6px;border-radius:999px;background:rgba(243,237,227,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px -10px rgba(40,5,12,.45);transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .mbar.is-on{transform:none}
  .mbar a{display:grid;place-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:400;color:var(--wine)}
  .mbar__main{background:var(--wine);color:var(--cream)!important}
  .foot{padding-bottom:calc(84px + env(safe-area-inset-bottom));flex-direction:column;text-align:center}
  .nav{padding-top:12px;padding-bottom:12px}
  .nav .pill{font-size:13px;padding:.5em 1em}
  .intro__tag{font-size:16px}
  .products__name{font-size:clamp(34px,10vw,44px)}
  .products__desc{font-size:14px}
  .products__actions .pill{min-height:44px}
  .thumbs{gap:14px;padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1)}
  .thumbs img{width:46px;height:46px}
  .full__row{padding:14px 0}
  .origins__row article{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
  .origins__row img{grid-row:span 3;margin:0;width:88px;border-width:4px}
  .close__info{grid-template-columns:1fr;gap:28px;text-align:center}
  .close__cta .pill{flex:1 1 100%;justify-content:center;min-height:52px}
  .close__cta{width:100%;max-width:360px}
}
.thumbs img{max-width:none;flex:none}
.thumbs button{min-width:52px}
@media (max-width:760px){
  .products__stage{padding-bottom:calc(84px + env(safe-area-inset-bottom));row-gap:12px}
  .products__visual{width:min(60vw,32svh)}
  .mark{font-size:clamp(150px,40vw,190px)}
  .mark--light{font-size:clamp(130px,34vw,170px)}
}
@media (max-width:760px){
  .nav{background:rgba(243,237,227,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:color .35s,background .35s}
  .nav.is-dark{background:rgba(106,29,43,.86)}
}

/* v2.3 mobile products: flex column that always fits the small viewport */
.products__kcal{margin:0 .8em 0 0;font-size:12px;opacity:.55;align-self:center}
.nav.is-bare{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
@media (max-width:820px){
  .products__stage{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:68px 16px calc(92px + env(safe-area-inset-bottom))}
  .products__visual{order:-1;flex:none;width:min(52vw,27svh)}
  .products__info{display:flex;flex-direction:column;align-items:center;width:100%}
  .products__name{margin:0 0 .15em}
  .products__desc{max-width:32ch}
  .products__price{margin-top:6px}
  .products__actions{margin-top:10px}
  .products__actions .pill--ghost{display:none}
  .thumbs{flex:none;width:calc(100% + 32px);margin:6px -16px 0;padding:4px 16px;justify-content:flex-start}
}
@media (max-width:820px) and (max-height:720px){
  .products__desc{display:none}
  .products__visual{width:min(50vw,26svh)}
}