/* 18/36 · v26. One responsive composition, native scrolling. */
:root {
  --paper:#f4efea; --ink:#1a0f0a; --night:#171310; --muted:#71665e;
  --warm:#bca18b; --line:#1a0f0a26;
  --heading:clamp(42px,4.6vw,68px); --body:18px; --small:14px;
  --gutter:max(40px,calc((100vw - 1240px)/2));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--body)/1.55 "Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}button{font:inherit;color:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #a68c7b;outline-offset:5px}
svg,img{display:block}img{max-width:100%;height:auto}
h1,h2,p{margin:0}h1,h2{font-weight:500;letter-spacing:-.048em;line-height:1.08;text-wrap:balance}
h2{font-size:var(--heading)}p{font-size:var(--body);line-height:1.55;color:var(--muted);text-wrap:pretty}
.wrap{max-width:1336px;margin-inline:auto;padding-inline:48px}
.dark{background:var(--night);color:var(--paper)}.dark p{color:#c3b9b0}.paper{color:var(--ink);background:var(--paper)}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.skip-link{position:fixed;z-index:20;top:16px;left:16px;padding:14px;background:var(--paper);color:var(--ink)}
.skip-link:not(:focus){width:1px;height:1px;padding:0;clip-path:inset(50%);overflow:hidden}
.site-header{position:absolute;inset:0 0 auto;z-index:8;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px var(--gutter);color:var(--paper);font-size:var(--small)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}.brand img{width:42px;border-radius:12px}
.site-header nav{display:flex;gap:28px}.site-header nav a{display:flex;align-items:center;min-height:44px;text-decoration:none}
.header-store{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 18px;border:1px solid #ffffff40;border-radius:100px;text-decoration:none;background:#171310}
.header-store .icon{width:16px;height:16px}
.store-button{display:inline-flex;align-items:center;gap:15px;min-height:66px;padding:13px 22px;border-radius:20px;background:var(--paper);color:var(--ink);text-decoration:none;transition:transform .25s}
.store-button .apple{width:26px;height:31px;fill:currentColor;flex-shrink:0}.store-button span{font-size:18px;font-weight:500;line-height:1.2}.store-button small{display:block;font-size:var(--small);font-weight:400;line-height:1.3;margin-bottom:3px}.store-button>.icon{width:18px;height:18px;margin-left:20px}.store-button:active{transform:scale(.97)}
.text-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:var(--small);text-underline-offset:6px;text-decoration-thickness:1px}.text-link .icon{width:18px;height:18px;transition:transform .25s}
.device{position:absolute;max-width:100%;transform-origin:50% 55%}
.phone{position:relative;aspect-ratio:1350/2760;width:100%;min-width:0;isolation:isolate}
/* A static rounded shadow avoids rasterising two full-image filters on every frame. */
.phone:before{content:"";position:absolute;inset:1.4% 1.6%;border-radius:15% / 7%;box-shadow:0 24px 40px #1a0f0a38;z-index:-1}.dark .phone:before{box-shadow:0 26px 42px #0008}
.phone-screen{position:absolute;left:5.333333%;top:2.5%;width:89.333333%;height:95%;border-radius:13.5% / 6.2%;overflow:hidden;background:#191919}
.phone-screen>img{width:100%;height:100%;object-fit:cover}.phone-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.scene-window{position:relative;overflow:clip;isolation:isolate}
.transition{height:clamp(100px,12vw,180px);margin-block:-1px;pointer-events:none}
.to-paper{background:linear-gradient(180deg,var(--night),#30251f 18%,#725b49 42%,#bfae9e 65%,#ece5de 87%,var(--paper))}
.to-dark{background:linear-gradient(180deg,var(--paper),#ece5de 13%,#bfae9e 35%,#725b49 58%,#30251f 82%,var(--night))}
/* Hero: matching type, devices between the two lines, clear store action. */
.hero{position:relative}.hero-sticky{--hero-phone-width:clamp(200px,24svh,250px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;justify-items:center;align-content:start;min-height:100svh;padding:110px var(--gutter) 28px;row-gap:24px}
.hero-light{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 49%,#a1816240,transparent 62%)}
.hero-heading{display:contents}.hero-back,.hero-front{position:relative;grid-column:1;inset:auto;text-align:center;font-size:clamp(56px,min(6.5vw,8svh),92px);line-height:1.03;letter-spacing:-.05em;color:var(--paper);pointer-events:none;z-index:1}
.hero-back{grid-row:1}.hero-front{grid-row:3;margin-top:8px}
.hero-devices{position:relative;grid-row:2;grid-column:1;width:100%;height:calc(var(--hero-phone-width)*2760/1350 + 12px);perspective:1600px;z-index:2;pointer-events:none}
.hero-devices .device{--w:var(--hero-phone-width);width:var(--w);left:calc(50% - var(--w)/2);top:0}
.hero-left{transform:translate3d(-180px,22px,-170px);z-index:1}.hero-center{z-index:3}.hero-right{transform:translate3d(180px,22px,-170px);z-index:2}
.hero-bottom{position:relative;grid-row:4;grid-column:1;z-index:4;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left}.hero-bottom p{font-size:var(--body)}
/* The hero stays in normal flow so headlines and devices never compete for a fixed viewport. */
/* Beans: two offset views, copy in its own readable column. */
.collection{position:relative;overflow:clip}.collection-layout{perspective:1500px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:50px;padding-block:80px;min-height:840px}
.section-copy{z-index:3;position:relative;max-width:480px}.section-copy h2{margin-bottom:24px}.section-copy p{max-width:390px}
.collection-stage{height:680px;position:relative;perspective:1500px;width:100%;min-width:0}
.collection-stage .device{width:280px;left:calc(50% - 140px);top:42px}.collection-main{transform:translate3d(-68px,0,0);z-index:3}.collection-detail{transform:translate3d(125px,65px,-180px);z-index:2}
/* Base story is readable without JavaScript, in short windows and reduced motion. */
.journey{position:relative}.journey-sticky{display:flex;flex-direction:column;align-items:center;padding:40px var(--gutter) 70px;gap:24px}
.journey-copy,.word-reel,.journey-stage{display:contents}.word-reel article{max-width:520px;width:100%;padding-top:28px}.word-reel h2{margin-bottom:20px}.word-reel p{max-width:430px}
.word-reel article:nth-child(1){order:1}.word-reel article:nth-child(2){order:3}.word-reel article:nth-child(3){order:5}
.journey-device{position:relative;width:280px;inset:auto;margin-bottom:48px}.journey-device:nth-child(1){order:2}.journey-device:nth-child(2){order:4}.journey-device:nth-child(3){order:6;margin-bottom:0}
.journey-footer{display:none}.chapter-controls{display:flex;gap:8px}.chapter-controls button,.mobile-recipe-controls button{cursor:pointer;min-height:44px;padding:11px 18px;border:1px solid #ffffff38;border-radius:100px;background:transparent;color:#e1d6cd;font-size:var(--small);line-height:1.25;transition:background .2s,color .2s}
.chapter-controls button[aria-pressed=true]{color:var(--ink);background:var(--paper);border-color:var(--paper)}
/* Only enable pinning if text AND a useful-size phone fit in the stable viewport. */
.motion-journey .journey{height:300svh}
.motion-journey .journey-sticky{position:sticky;top:0;height:100svh;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);align-items:center;gap:45px;padding:32px var(--gutter) 100px}
.motion-journey .journey-copy{display:block;z-index:4;min-width:0}.motion-journey .word-reel{display:grid;align-items:center;perspective:1400px}
.motion-journey .word-reel article{grid-area:1/1;max-width:none;padding:0;backface-visibility:hidden}.motion-journey .word-reel article:not(:first-child){visibility:hidden}
.motion-journey .journey-stage{display:block;position:relative;height:100%;perspective:1500px;min-width:0;overflow:clip}
.motion-journey .journey-device{--w:min(32svh,315px);position:absolute;width:var(--w);left:calc(50% - var(--w)/2);top:8%;margin:0;z-index:2}
.motion-journey .journey-device:not(:first-child){visibility:hidden}
.motion-journey .journey-footer{position:absolute;bottom:24px;inset-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:var(--small);color:#c3b9b0;z-index:5}
/* Recipes open on a shared plane. On phones this becomes a native swipe gallery. */
.recipes{position:relative;background:radial-gradient(ellipse at center,#e4d7ca,var(--paper) 75%)}
.recipes-sticky{height:900px;padding:44px var(--gutter);position:relative;overflow:clip}
.recipes-title{position:relative;text-align:center;z-index:3}.recipes-title h2,.recipes-title>p{font-size:var(--heading);font-weight:500;line-height:1.08;letter-spacing:-.048em;color:var(--ink)}.recipes-title>p{margin-top:8px}
.recipe-gallery{position:absolute;inset:0;perspective:1600px;z-index:2}
.recipe-device{--w:240px;width:var(--w);left:calc(50% - var(--w)/2);top:max(27%,calc(84px + var(--heading)*2.16));z-index:1}.recipe-device:nth-child(1){transform:translate3d(-275px,0,-100px)}.recipe-device:nth-child(2){z-index:3}.recipe-device:nth-child(3){transform:translate3d(275px,0,-100px)}
.recipe-copy{position:absolute;inset:auto var(--gutter) 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;z-index:4}.recipe-copy p{font-size:var(--body);max-width:520px}.recipe-copy .text-link{flex-shrink:0}
.motion-desktop .recipes{height:155svh}.motion-desktop .recipes-sticky{position:sticky;top:0;height:100svh;min-height:740px}.motion-desktop .recipe-device{--w:min(27svh,270px)}
.mobile-recipe-controls{display:none}
.keep{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;padding-block:100px}.keep p{max-width:450px;margin-bottom:20px}
.faq-section{display:grid;grid-template-columns:1fr 1.2fr;gap:75px;padding-block:25px 85px}.faq-section h2{margin-bottom:20px}
.faq-list details{border-bottom:1px solid var(--line)}.faq-list details:first-child{border-top:1px solid var(--line)}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 0;list-style:none;cursor:pointer;line-height:1.45}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{transition:transform .2s;font-size:24px;font-weight:300;line-height:1}.faq-list details[open] summary>span{transform:rotate(45deg)}.faq-answer p{padding:0 20px 24px 0}.faq-answer a{text-underline-offset:4px}.faq-list details[open] .faq-answer{animation:answer-in .25s ease-out}
@keyframes answer-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.closing{text-align:center;padding:50px 0 70px;background:radial-gradient(ellipse at 50% 40%,#30231b,var(--night) 70%)}.closing-icon{width:72px;border-radius:20px;margin:0 auto 30px;box-shadow:0 18px 35px #0006}.closing h2{margin-bottom:24px}.closing p{margin-bottom:30px}
.site-footer{padding-block:30px}.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:26px}.footer-brand{display:flex;align-items:center;gap:14px;font-size:18px;font-weight:500;text-decoration:none}.footer-brand span{font-size:var(--small);color:#c3b9b0;font-weight:400}.site-footer nav{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:var(--small)}.site-footer nav a{display:flex;align-items:center;min-height:44px;text-decoration:none}.footer-inner>p{width:100%;padding-top:22px;border-top:1px solid #ffffff24;font-size:var(--small)}
@media(hover:hover) and (pointer:fine){.store-button:hover{transform:translateY(-3px)}.header-store:hover{background:#ffffff12}.text-link:hover .icon{transform:translateX(4px)}.site-header nav a:hover,.site-footer nav a:hover{text-decoration:underline;text-underline-offset:5px}}
@media(max-width:1000px){
 :root{--gutter:32px;--heading:42px;--body:17px}.wrap{padding-inline:32px}.brand span{display:none}
 .collection-layout{gap:24px;min-height:700px;padding-block:50px}.collection-stage{height:580px}.collection-stage .device{width:240px;left:calc(50% - 120px)}
 .recipe-device{--w:210px}.recipes-sticky{height:850px}.keep{gap:36px}.faq-section{gap:36px}
 .motion-journey .journey-sticky{gap:25px}.motion-journey .journey-device{--w:min(31svh,280px)}
}
@media(min-width:701px) and (max-height:820px){.motion-desktop .recipe-device{--w:23svh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}