:root{
  --roast:#17110e; --roast-2:#241a15; --cream:#f3ebe0; --paper:#f6efe4; --ink:#2a201b;
  --muted:#6f6157; --ember:#d9772b; --ember-d:#b85f1c; --line:rgba(243,235,224,.16);
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  --latin:"Cormorant Garamond",serif;
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:80px}
body{font-family:var(--sans);color:var(--cream);background:var(--roast);line-height:1.9;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--cream);color:var(--ink);padding:8px 12px}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* header */
.hd{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);transition:background .4s,backdrop-filter .4s}
.hd.is-solid{background:rgba(23,17,14,.82);backdrop-filter:blur(10px)}
.logo{font-family:var(--serif);font-weight:800;font-size:22px;letter-spacing:.18em;line-height:1}
.logo small{display:block;font-family:var(--latin);font-weight:500;font-size:12px;letter-spacing:.08em;opacity:.85;margin-top:4px}
.nav{display:flex;gap:32px;align-items:center;font-size:14px}
.nav a:not(.btn){position:relative;padding:4px 0}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s}
.nav a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:820px){.nav a:not(.btn){display:none}}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:.08em;transition:transform .3s,background .3s,color .3s}
.btn--ember{background:var(--ember);color:#1b120c}
.btn--ember:hover{background:#ea8a3c;transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--line);color:var(--cream)}
.btn--ghost:hover{background:var(--cream);color:var(--ink)}
.btn--sm{padding:10px 18px;font-size:13px}
.btn .arw{transition:transform .3s}.btn:hover .arw{transform:translateX(4px)}

/* hero */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:center}
.hero__media{position:absolute;inset:0}
.hero__video{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,13,10,.88) 0%,rgba(18,13,10,.55) 38%,rgba(18,13,10,0) 62%);pointer-events:none}
.hero__copy{position:relative;z-index:2;padding:96px var(--pad) 72px;max-width:min(980px,58vw)}
@media (max-width:899px){.hero__copy{max-width:none}}
.eyebrow{font-family:var(--latin);font-style:italic;font-size:19px;letter-spacing:.02em;color:#e7b98f;margin-bottom:22px}
.hero h1{font-family:var(--serif);font-weight:800;font-size:clamp(36px,5vw,80px);line-height:1.3;letter-spacing:.05em}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em;white-space:nowrap}
.hero h1 .line>span{display:inline-block}
.lead{margin-top:26px;max-width:30em;font-size:clamp(15px,1.3vw,17px);color:rgba(243,235,224,.85)}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero__toggle{position:absolute;right:var(--pad);bottom:32px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(23,17,14,.5);color:var(--cream);cursor:pointer;font-size:12px;transition:background .2s,color .2s}
.hero__toggle:hover{background:var(--cream);color:var(--ink)}
.scroll-cue{position:absolute;left:var(--pad);bottom:32px;z-index:3;display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.1em;opacity:.8}
.scroll-cue i{display:block;width:64px;height:1px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--cream);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media (max-aspect-ratio:3/4){
  .hero{align-items:flex-start}
  .hero__copy{padding-top:120px}
  .hero::after{background:linear-gradient(180deg,rgba(18,13,10,.9) 0%,rgba(18,13,10,.6) 45%,rgba(18,13,10,0) 70%)}
}

/* sections */
section{position:relative}
.sec-label{font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--ember);display:flex;align-items:center;gap:14px;margin-bottom:20px}
.sec-label::before{content:"";width:36px;height:1px;background:currentColor}
.sec-title{font-family:var(--serif);font-weight:800;font-size:clamp(30px,4vw,56px);line-height:1.4;letter-spacing:.06em}

.about{padding:clamp(120px,18vw,240px) var(--pad)}
.about__text{font-family:var(--serif);font-weight:700;font-size:clamp(24px,3.4vw,48px);line-height:1.75;max-width:22em;letter-spacing:.05em}
.about__text .w{opacity:.42}
.about__note{margin-top:48px;max-width:34em;color:rgba(243,235,224,.72);font-size:15px}

/* beans */
.beans{background:var(--paper);color:var(--ink);overflow:hidden}
.beans__head{padding:clamp(90px,12vw,150px) var(--pad) 40px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.beans__head p{max-width:24em;color:#6b5c52;font-size:15px}
.beans__track{display:flex;gap:28px;padding:20px var(--pad) clamp(90px,10vw,140px);width:max-content}
.card{width:min(420px,78vw);flex:none;background:#fffaf3;border:1px solid #e6dccf;border-radius:22px;padding:56px 32px 30px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto;height:10px;background:var(--c)}
.card__no{font-family:var(--latin);font-size:72px;line-height:1;color:#a08670;position:absolute;right:24px;top:18px}
.card__bean{width:84px;height:84px;margin-bottom:26px}
.card h3{font-family:var(--serif);font-size:26px;line-height:1.4}
.card .origin{font-size:13px;color:var(--muted);margin-top:6px;letter-spacing:.04em}
.meter{display:flex;align-items:center;gap:8px;margin:22px 0 18px;font-size:13px;color:#6b5c52}
.meter span{width:22px;height:6px;border-radius:3px;background:#e6dccf;transform-origin:left}
.meter span.on{background:var(--c,#6b3a20)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{list-style:none;font-size:13px;padding:5px 12px;border-radius:999px;background:#f1e6d8}
.card__foot{display:flex;justify-content:space-between;align-items:center;margin-top:28px;padding-top:20px;border-top:1px dashed #dccfbf}
.price{font-family:var(--serif);font-size:22px;font-weight:700}
.price small{font-family:var(--sans);font-size:12px;color:var(--muted);font-weight:500;margin-left:6px}
.card .btn--sm{background:var(--ink);color:var(--paper)}
.card .btn--sm:hover{background:var(--ember);color:#1b120c}
@media (max-width:899px){.beans__track{flex-direction:column;width:auto}.card{width:100%}}

/* process */
.process{padding:clamp(110px,14vw,200px) var(--pad);background:var(--roast-2);overflow:hidden}
.process__inner{position:relative;max-width:1180px;margin:0 auto}
.process__line{position:absolute;inset:120px 0 0;width:100%;height:calc(100% - 120px);pointer-events:none}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:80px;position:relative}
.step:nth-child(2){margin-top:120px}.step:nth-child(3){margin-top:240px}
.step__no{font-family:var(--latin);font-size:64px;color:var(--ember);line-height:1}
.step h3{font-family:var(--serif);font-size:26px;margin:12px 0 10px}
.step p{font-size:15px;color:rgba(243,235,224,.75)}
@media (max-width:820px){.steps{grid-template-columns:1fr}.step:nth-child(n){margin-top:0}.process__line{display:none}}

/* shop */
.shop{background:var(--paper);color:var(--ink);padding:clamp(100px,12vw,170px) var(--pad);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.shop__art{aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--roast)}
.shop__art svg{width:100%;height:100%}
.info{margin-top:34px;display:grid;grid-template-columns:7em 1fr;row-gap:14px;font-size:15px}
.info dt{color:var(--muted)}
.menu{margin-top:36px;border-top:1px solid #e0d4c5}
.menu li{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid #e0d4c5;font-size:16px}
.menu li b{font-family:var(--serif);font-weight:700}
@media (max-width:820px){.shop{grid-template-columns:1fr}.shop__art{aspect-ratio:4/3}}

/* subscribe */
.sub{background:var(--ember);color:#1b120c;padding:clamp(90px,11vw,150px) 0 clamp(80px,9vw,120px);overflow:hidden}
.marquee{display:flex;white-space:nowrap;font-family:var(--latin);font-style:italic;font-size:clamp(48px,8vw,120px);line-height:1;opacity:.9}
.marquee div{padding-right:.5em;will-change:transform}
.sub__body{padding:0 var(--pad);margin-top:60px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.sub__body .sec-title{color:#1b120c;font-size:clamp(40px,6.4vw,96px);line-height:1.25}
.plans{display:grid;gap:14px}
.plan{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#f3ebe0;border-radius:18px;padding:22px 26px}
.plan b{font-family:var(--serif);font-size:20px}
.plan span{font-size:13px;color:#6b5c52;display:block}
.plan .price{font-size:22px}
.sub .btn--ember{background:#1b120c;color:var(--cream);margin-top:10px;justify-self:start}
.sub .btn--ember:hover{background:#000}
.sub :focus-visible{outline-color:#1b120c}
@media (max-width:820px){.sub__body{grid-template-columns:1fr}}

.ft{padding:48px var(--pad);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:13px;color:rgba(243,235,224,.6)}

/* motion prefs: JS only hides when it will animate */
.js .reveal{opacity:0}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1}.scroll-cue i::after{animation:none}}

/* ember on light paper needs a deeper tone for 4.5:1 */
.beans .sec-label,.shop .sec-label{color:#9c4e17}

.process .sec-title{font-size:clamp(26px,3vw,42px)}