/* Layout: one fixed WebGL stage carries the cup and its beans through sticky chapters; copy alternates sides, giant soft-serif type sits behind the cup. Single committed brand look (no dark variant by choice). */
:root{
  --espresso:#1D0401;
  --oxblood:#690901;
  --rust:#A3432A;
  --foam:#F2E8DC;
  --crema:#E4CFB6;
  --caramel:#B9814F;
  --bg:#F2E8DC;
  --ink:#1D0401;
  --muted:color-mix(in srgb, var(--ink) 64%, var(--bg));
  --line:color-mix(in srgb, var(--ink) 18%, transparent);
  --display:"Fraunces","Iowan Old Style",Georgia,serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,5vw,72px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
h2,h3{text-wrap:balance}

/* sized to the large viewport so the cup does not jump or rescale when a phone's toolbar slides away mid-scroll */
#stage{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:2;pointer-events:none;display:block}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:calc(env(safe-area-inset-top,0px) + 20px) var(--gutter) 26px;color:var(--ink);background:linear-gradient(var(--bg) 58%,color-mix(in srgb,var(--bg) 0%,transparent))}
.wordmark{font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:28px;letter-spacing:-.025em;text-decoration:none;line-height:1}
.nav nav{display:flex;gap:clamp(18px,3vw,40px);font-size:15px;font-weight:500}
/* 44px-tall hit area for tablets; the negative margin keeps the visual spacing and gives the focus ring some room */
.nav nav a{text-decoration:none;opacity:.78;transition:opacity .2s;padding:12px 10px;margin-inline:-10px}
.nav nav a:focus-visible{outline-offset:-6px;border-radius:10px}
.nav nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.bag{font:inherit;font-size:15px;font-weight:600;color:var(--bg);background:var(--ink);border:0;border-radius:999px;padding:0 18px;min-height:44px;cursor:pointer;display:inline-flex;gap:10px;align-items:center}
.bag b{font-variant-numeric:tabular-nums;font-weight:600;min-width:1ch;text-align:center}
.nav-actions{display:flex;align-items:center;gap:8px}
.menu-toggle{display:none;font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:0 16px;min-height:44px;cursor:pointer;align-items:center;gap:10px}
.menu-toggle i{width:14px;height:8px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:transform .3s}
.menu-toggle[aria-expanded="true"] i{transform:scaleY(.2)}

/* opening: the hero copy waits here until intro.js plays it in */
html.intro .hero-title .line>span{transform:translateY(115%)}
html.intro .hero-foot>*,html.intro .nav{opacity:0}
html.intro .swoosh path{stroke-dasharray:4000;stroke-dashoffset:4000}

/* hero */
.hero{position:relative;min-height:100svh;padding:clamp(108px,17vh,170px) var(--gutter) clamp(28px,5vh,56px);display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.swoosh{position:absolute;inset:0;width:100%;height:100%;z-index:0;fill:none;pointer-events:none}
.swoosh path{stroke:var(--caramel);stroke-width:1.5;vector-effect:non-scaling-stroke}
.hero-title{position:relative;z-index:1;margin:0;font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:clamp(54px,11.4vw,228px);line-height:.86;letter-spacing:-.045em}
.line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.line>span{display:inline-block}
.line-2{text-align:right}
.hero-foot{position:relative;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-note{max-width:21rem;margin:0;font-size:16px;color:var(--muted)}
.seal{width:clamp(112px,10.5vw,148px);aspect-ratio:1;max-width:100%;display:grid;place-items:center;position:relative;text-decoration:none;color:var(--foam);flex:none}
.seal svg{position:absolute;inset:0;width:100%;height:100%}
.seal path{fill:var(--oxblood);transition:fill .3s}
.seal:hover path{fill:var(--rust)}
.seal span{position:relative;font-family:var(--display);font-weight:800;font-style:italic;font-variation-settings:"SOFT" 100;font-size:clamp(22px,1.9vw,28px);line-height:.92;text-align:center;transform:rotate(-10deg)}

/* shared chapter type */
.chapter-h{font-family:var(--display);font-weight:700;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:clamp(38px,5.2vw,80px);line-height:.98;letter-spacing:-.03em;margin:0 0 .45em}
.lede{font-size:18px;color:var(--muted);max-width:32rem;margin:0}

/* origin */
.origin{position:relative;z-index:3;min-height:125svh;display:flex;align-items:center;padding:18vh var(--gutter)}
.origin .copy{max-width:34rem;display:grid;gap:32px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:22px 32px;margin:0;padding-top:24px;border-top:1px solid var(--line)}
.facts dt{font-size:14px;color:var(--muted)}
.facts dd{margin:4px 0 0;font-family:var(--display);font-size:24px;font-weight:600;font-variation-settings:"SOFT" 100;line-height:1.15}

/* sticky chapters */
.roast{position:relative;height:420svh}
.menu{position:relative;height:340svh}
.sticky{position:sticky;top:0;height:100svh;z-index:3;padding:clamp(96px,14vh,140px) var(--gutter) clamp(28px,6vh,60px);display:grid}

.roast .sticky{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr}
.roast-head{grid-column:1;grid-row:1;max-width:27rem}
.stages{grid-column:1;grid-row:2;align-self:end;list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:25rem}
.stages li{display:grid;grid-template-columns:4.4rem 1fr;column-gap:14px;opacity:.3;transition:opacity .5s}
.stages li.is-active{opacity:1}
.stages .t{font-variant-numeric:tabular-nums;font-size:14px;color:var(--muted);padding-top:.45em}
.stages .n{font-family:var(--display);font-weight:700;font-size:24px;font-variation-settings:"SOFT" 100;line-height:1.2}
.stages .d{grid-column:2;font-size:15px;color:var(--muted);max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.2,.8,.2,1)}
.stages li.is-active .d{max-height:5em}
.temp{grid-column:2;grid-row:2;align-self:end;justify-self:end;margin:0;font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100;font-size:clamp(72px,12vw,200px);line-height:.8;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.temp small{font-size:.36em;font-weight:500;letter-spacing:0;vertical-align:top;margin-left:.06em}

.menu .sticky{grid-template-columns:minmax(0,1fr) minmax(0,29rem);align-items:center}
.menu-panel{grid-column:2;display:grid;gap:28px}
.products{display:grid}
.product{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .45s,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.product.is-active{opacity:1;transform:none;pointer-events:auto}
.count{font-size:14px;color:var(--muted);margin:0 0 .5em;font-variant-numeric:tabular-nums}
.product h3{font-family:var(--display);font-size:clamp(30px,2.8vw,42px);font-weight:600;font-style:italic;font-variation-settings:"SOFT" 100;margin:0 0 .35em;line-height:1.05}
.product .desc{color:var(--muted);margin:0 0 1.5em;max-width:27rem}
.buy{display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap}
.price{font-family:var(--display);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.size{font-size:14px;color:var(--muted)}
.dots{display:flex;gap:8px}
.dots i{width:28px;height:3px;border-radius:2px;background:var(--line);transition:background .4s}
.dots i.on{background:var(--ink)}

.btn{font:inherit;font-weight:600;font-size:16px;background:var(--oxblood);color:var(--foam);border:0;border-radius:999px;padding:14px 26px;cursor:pointer;transition:background .25s,transform .2s}
.btn:hover{background:var(--rust)}
.btn:active{transform:scale(.97)}

/* subscribe */
.subscribe{position:relative;min-height:115svh;padding:clamp(110px,16vh,160px) var(--gutter) clamp(40px,8vh,80px);display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.sub-title{position:relative;z-index:1;margin:0;font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100;font-size:clamp(48px,9.4vw,180px);line-height:.88;letter-spacing:-.045em;display:flex;flex-direction:column}
.sub-title span:last-child{align-self:flex-end;text-align:right}
.sub-foot{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:32px;align-items:end}
.sub-foot .lede{max-width:25rem}
.plans{display:grid;gap:16px;justify-items:start}
.plans fieldset{border:0;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap}
.plans legend{font-size:14px;color:var(--muted);margin-bottom:10px;padding:0}
.plans label{cursor:pointer;position:relative}
.plans input{position:absolute;opacity:0;width:1px;height:1px}
.plans label span{display:flex;flex-direction:column;gap:2px;padding:12px 18px;border:1px solid var(--line);border-radius:14px;min-width:6rem;font-size:14px;transition:background .25s,color .25s,border-color .25s}
.plans label em{font-style:normal;font-family:var(--display);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.plans input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.plans input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.btn-inverse{background:var(--ink);color:var(--bg)}
.btn-inverse:hover{background:var(--crema);color:var(--oxblood)}
.form-note{margin:0;min-height:1.5em;font-size:15px}

/* footer */
.foot{position:relative;z-index:4;background:var(--espresso);color:var(--foam);padding:clamp(56px,9vh,96px) var(--gutter) 28px;display:grid;gap:56px;overflow:hidden}
.cafes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.cafes h3{font-family:var(--display);font-weight:600;font-variation-settings:"SOFT" 100;font-size:22px;margin:0 0 6px}
.cafes p{margin:0;color:color-mix(in srgb,var(--foam) 66%,var(--espresso));font-size:15px}
.cafes a{color:inherit;text-decoration:none}
.big-mark{margin:0;font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(84px,24vw,420px);line-height:.78;letter-spacing:-.06em;color:var(--rust);text-align:center}
.legal{margin:0;font-size:13px;color:color-mix(in srgb,var(--foam) 55%,var(--espresso))}

/* landscape screens: the roast bean and the subscribe cup sit in the middle of the viewport and their width follows the
   viewport height, so on narrower landscapes (1024x768 laptops, tablets on their side) the copy beside them is held back
   instead of running under them. At 1440x900 and wider both limits resolve to the original 27rem / 25rem. */
@media (min-aspect-ratio:17/20){
  .roast-head{max-width:min(27rem,calc(50vw - 19vh - 16px - var(--gutter)))}
  .sub-foot .lede{max-width:min(25rem,calc(50vw - 18vh - 16px - var(--gutter)))}
  /* the beans orbiting the cup drift behind the drink copy and the origin facts (prices, "1 of 3" and sizes went unreadable
     at 1024-1440 px): the same soft page-colour layer as on portrait, invisible on the plain background. The negative
     margin keeps the text exactly where it was. */
  .origin .copy,.menu-panel{background:color-mix(in srgb,var(--bg) 90%,transparent);box-shadow:0 0 28px 14px color-mix(in srgb,var(--bg) 90%,transparent);border-radius:22px;padding:22px 20px;margin:-22px -20px}
}
/* portrait screens (phones, tablets held upright, tall windows): main.js centres the cup and lifts it above the copy, so the
   copy moves to the bottom of each chapter and sits on a soft layer in the page colour when the fixed cup passes behind it */
@media (max-aspect-ratio:17/20){
  .origin{align-items:flex-end;padding-top:62svh;min-height:150svh}
  .origin .copy,.stages,.menu-panel,.sub-foot{background:color-mix(in srgb,var(--bg) 90%,transparent);box-shadow:0 0 28px 14px color-mix(in srgb,var(--bg) 90%,transparent);border-radius:22px;padding:22px 20px;margin-inline:-8px}
  .menu .sticky{grid-template-columns:minmax(0,1fr);align-items:end}
  .menu-panel{grid-column:1;max-width:36rem}
  /* the title scrolls up across the cup on its way in: it rides above it with a soft halo */
  .sub-title{z-index:3;text-shadow:0 0 22px color-mix(in srgb,var(--bg) 70%,transparent)}
}

@media (max-width:760px){
  /* phones: the header gets a soft fade so scrolling copy never sits under it, and the links move into a sheet */
  .nav{padding-top:calc(env(safe-area-inset-top,0px) + 12px);padding-bottom:14px;background:linear-gradient(var(--bg) 62%,color-mix(in srgb,var(--bg) 0%,transparent))}
  .wordmark{padding-block:8px}
  .menu-toggle{display:inline-flex}
  .nav nav{position:absolute;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:-1;flex-direction:column;justify-content:center;gap:0;padding:96px var(--gutter) calc(env(safe-area-inset-bottom,0px) + 40px);background:var(--bg);visibility:hidden;opacity:0;transform:translateY(-12px);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s}
  .nav nav a{font-family:var(--display);font-weight:700;font-variation-settings:"SOFT" 100;font-size:clamp(40px,12vw,56px);line-height:1.1;letter-spacing:-.03em;opacity:1;padding:8px 0;margin-inline:0;border-bottom:1px solid var(--line)}
  .nav nav a:focus-visible{outline-offset:2px;border-radius:4px}
  .nav nav a:hover{text-decoration:none}
  html.menu-open .nav nav{visibility:visible;opacity:1;transform:none;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
  html.menu-open{overflow:hidden}
  .seal{border-radius:50%;overflow:hidden}
  .plans label span{font-size:15px;min-width:5.25rem;padding:12px 14px}
  .plans input{font-size:16px}
  /* shorter scroll runs: about 420px of thumb travel per roast stage and per drink */
  .roast{height:300svh}
  .menu{height:250svh}
  .hero-title{font-size:clamp(44px,13.6vw,96px)}
  .hero-note{font-size:15px}
  .lede{font-size:17px}
  .facts dd{font-size:20px}
  .roast .sticky{grid-template-columns:minmax(0,1fr)}
  .roast-head .lede{display:none}
  .stages{grid-column:1;gap:8px}
  .stages .n{font-size:20px}
  .temp{grid-column:1;grid-row:2;align-self:start;justify-self:end;font-size:64px}
  .menu-panel{gap:16px}
  .menu .chapter-h{display:none}
  .product .desc{font-size:15px;margin-bottom:1em}
  .sub-foot{grid-template-columns:minmax(0,1fr)}
  .cafes{grid-template-columns:minmax(0,1fr)}
  .sub-title{font-size:clamp(34px,10.1vw,76px)}
  .cafes a{display:inline-block;padding-block:11px;margin-block:-11px;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--foam) 35%,transparent);text-underline-offset:4px}
}

/* short landscapes (a phone on its side): the cup stays at the sides as on desktop, and each sticky chapter has to fit
   in ~380px of height, so the chapters keep their two columns with tighter type */
@media (min-aspect-ratio:17/20) and (max-height:520px){
  .sticky{padding-top:76px;padding-bottom:16px}
  .chapter-h{font-size:clamp(30px,4.2vw,44px)}
  /* the cup parks right of centre here: the origin copy stops short of it instead of fading half of it out */
  .origin .copy{max-width:min(34rem,calc(58vw - var(--gutter)))}
  .roast-head .lede,.menu .chapter-h{display:none}
  .roast .sticky{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .stages{gap:6px;max-width:min(25rem,calc(50vw - 19vh - 16px - var(--gutter)))}
  .stages .n{font-size:19px}
  .stages .d{font-size:14px}
  .temp{grid-column:2;grid-row:2;align-self:end;justify-self:end;font-size:clamp(56px,9vw,96px)}
  .menu .sticky{grid-template-columns:minmax(0,1fr) minmax(0,min(29rem,46vw))}
  .menu-panel{grid-column:2;gap:16px}
  .sub-foot{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
}
@media (prefers-reduced-motion:reduce){
  .product,.stages li,.stages .d{transition:none}
}