/* ————————————————————————————————————————————————
   Criollo & Co. — bean-to-bar, single-estate criollo
   Palette: cacao 70/85/100, cream, husk gold,
   fruit accents (cherry / apricot / fig) via --note
   Type: Fraunces (confectioner serif, dlig+wonk)
         Familjen Grotesk (provenance data)
———————————————————————————————————————————————— */

:root{
  --cacao-100:#170c07;
  --cacao-90:#221009;
  --cacao-85:#2c160c;
  --cacao-70:#4a2917;
  --cacao-55:#6b3d20;
  --cream:#f3e7d3;
  --cream-deep:#e9d8ba;
  --husk:#c9994f;
  --husk-soft:#dbb679;
  --cherry:#c8453c;
  --apricot:#d97f3e;
  --fig:#8f5877;
  --note:var(--husk);
  --note-deep:#a07a3c;
  --ink:#2a170d;
  --paper-ink:#3a2213;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Familjen Grotesk",-apple-system,sans-serif;
  --ease-fluid:cubic-bezier(.62,.01,.18,1);
  --ease-drip:cubic-bezier(.5,0,.15,1.1);
  --w:min(1180px,92vw);
}
body[data-note="cherry"]{--note:var(--cherry);--note-deep:#9c352e;}
body[data-note="apricot"]{--note:var(--apricot);--note-deep:#b06330;}
body[data-note="fig"]{--note:var(--fig);--note-deep:#71435e;}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  background:var(--cacao-100);
  color:var(--cream);
  font-family:var(--serif);
  font-optical-sizing:none;
  font-variation-settings:"opsz" 11,"SOFT" 30,"WONK" 0;
  font-size:1.075rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:--note .5s;
}
img,video{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--note);color:var(--cacao-100);}

:focus-visible{outline:2px solid var(--note);outline-offset:3px;border-radius:2px;}

/* type ------------------------------------------------ */
.display{
  font-family:var(--serif);
  font-weight:560;
  font-variation-settings:"opsz" 144,"SOFT" 55,"WONK" 1;
  font-feature-settings:"dlig" 1;
  line-height:1.02;
  letter-spacing:-.015em;
}
.data,.eyebrow,button,.btn,input{font-family:var(--sans);}
.eyebrow{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--note);
  display:flex;align-items:center;gap:.9rem;
}
.eyebrow::before{content:"";width:2.2rem;height:1px;background:var(--note);flex:none;}
.serif-i{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 70,"WONK" 1;}

/* nav ------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem clamp(1rem,4vw,2.6rem);
  transition:background .45s var(--ease-fluid),box-shadow .45s;
}
.nav.is-solid{background:rgba(23,12,7,.88);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(243,231,211,.08);}
.wordmark{
  font-family:var(--serif);font-weight:600;font-size:1.25rem;text-decoration:none;
  font-variation-settings:"opsz" 60,"SOFT" 60,"WONK" 1;
  color:var(--cream);
}
.wordmark .amp{font-style:italic;color:var(--note);transition:color .5s;}
.nav-steps{display:flex;gap:1.35rem;list-style:none;}
.nav-steps a{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;color:rgba(243,231,211,.62);transition:color .3s;
}
.nav-steps a:hover{color:var(--cream);}
.nav-cta{display:flex;align-items:center;gap:1.1rem;}
.nav-cta .guide-link{font-family:var(--sans);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(243,231,211,.62);text-decoration:none;}
.nav-cta .guide-link:hover{color:var(--cream);}
.btn{
  display:inline-block;border:none;cursor:pointer;text-decoration:none;
  font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.72rem 1.5rem;border-radius:99px;
  background:var(--note);color:var(--cacao-100);
  transition:background .4s,transform .3s var(--ease-fluid);
}
.btn:hover{transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(243,231,211,.45);}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--note);color:var(--note);}

/* hero ------------------------------------------------ */
.hero{position:relative;height:100svh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden;}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero .grade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(23,12,7,.55) 0%,rgba(23,12,7,.12) 38%,rgba(23,12,7,.28) 62%,rgba(23,12,7,.94) 100%),
    radial-gradient(120% 90% at 70% 30%,rgba(74,41,23,.0) 40%,rgba(44,22,12,.45) 100%);
  mix-blend-mode:normal;
}
.hero .grade::after{content:"";position:absolute;inset:0;background:#4a2917;mix-blend-mode:color;opacity:.38;}
.hero-inner{position:relative;z-index:2;width:var(--w);margin:0 auto;padding-bottom:clamp(3rem,8vh,5.5rem);}
.hero h1{
  font-size:clamp(2.9rem,7.2vw,6.2rem);
  max-width:12ch;color:var(--cream);
  text-wrap:balance;
}
.hero h1 .melt-line{display:block;overflow:hidden;}
.hero h1 .melt-line>span{display:inline-block;}
.hero-sub{max-width:46ch;margin-top:1.4rem;font-size:1.06rem;color:rgba(243,231,211,.85);}
.hero-actions{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap;}
.hero .eyebrow{margin-bottom:1.6rem;}
/* load melt-in */
.melt-in{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity 1s var(--ease-fluid),transform 1.2s var(--ease-drip),filter 1.1s var(--ease-fluid);}
.loaded .melt-in{opacity:1;transform:none;filter:none;}

/* provenance strip ------------------------------------ */
.provenance{background:var(--cacao-100);padding:2.1rem 0 2.4rem;position:relative;}
.prov-grid{
  width:var(--w);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.4rem 2rem;
}
.prov-item{border-left:1px solid rgba(201,153,79,.35);padding-left:.9rem;}
.prov-item dt{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,231,211,.5);margin-bottom:.3rem;}
.prov-item dd{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--cream);font-variant-numeric:tabular-nums;}

/* drip dividers --------------------------------------- */
.drip{display:block;width:100%;height:clamp(44px,7vw,92px);position:relative;z-index:3;margin-bottom:-1px;}
.drip svg{width:100%;height:100%;display:block;}
.drip path{transform-origin:top center;will-change:transform;}

/* generic section shell ------------------------------- */
.chapter{position:relative;padding:clamp(4rem,9vw,7.5rem) 0;}
.chapter .shell{width:var(--w);margin:0 auto;}
.step-tag{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  display:flex;align-items:baseline;gap:.85rem;margin-bottom:1.3rem;
}
.step-tag .no{
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.5rem;letter-spacing:0;
  font-variation-settings:"opsz" 40,"SOFT" 70,"WONK" 1;
}
.chapter h2{font-size:clamp(2rem,4.6vw,3.5rem);max-width:16ch;margin-bottom:1.4rem;text-wrap:balance;}
.chapter .lede{max-width:56ch;font-size:1.08rem;}
.duo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.duo.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}

/* light chapters (cream side of the box) */
.light{background:var(--cream);color:var(--ink);}
.light .step-tag{color:var(--note-deep);}
.light .lede,.light p{color:var(--paper-ink);}
.light .prov-item dt{color:rgba(58,34,19,.55);}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease-fluid),transform 1s var(--ease-fluid);}
.reveal.on{opacity:1;transform:none;}
.no-anim .reveal,.no-anim .photo-frame img,.no-anim .fday{transition:none !important;opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal,.melt-in{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;}
  .dial .hand,.btn,.mould::after,.photo-frame img{transition:none !important;}
  .ferment-strip .fday{opacity:1;transform:none;transition:none;}
}

/* tasting wheel --------------------------------------- */
.wheel-wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:2.5rem;}
#wheel{width:100%;max-width:520px;margin:0 auto;display:block;}
#wheel text{font-family:var(--sans);font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
#wheel .seg{cursor:pointer;transition:opacity .3s;}
#wheel .seg[aria-disabled="true"]{cursor:default;}
#wheel .seg:focus-visible{outline:none;}
#wheel .seg:focus-visible .arc{stroke:var(--ink);stroke-width:2.5;}
.note-quote{
  font-size:clamp(1.5rem,2.9vw,2.15rem);line-height:1.28;font-style:italic;font-weight:500;
  font-variation-settings:"opsz" 90,"SOFT" 70,"WONK" 1;font-feature-settings:"dlig" 1;
  color:var(--ink);max-width:24ch;text-wrap:balance;
  border-left:3px solid var(--note);padding-left:1.4rem;
  transition:border-color .5s;
}
.note-quote em{font-style:normal;color:var(--note-deep);transition:color .5s;}
.note-caption{font-family:var(--sans);font-size:.9rem;margin-top:1.2rem;color:rgba(58,34,19,.75);max-width:44ch;min-height:3em;}
.note-pills{display:flex;gap:.6rem;margin-top:1.6rem;flex-wrap:wrap;}
.pill{
  font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.55rem 1.15rem;border-radius:99px;cursor:pointer;
  border:1.5px solid rgba(58,34,19,.28);background:transparent;color:var(--ink);
  transition:all .35s var(--ease-fluid);
}
.pill[aria-checked="true"]{background:var(--note);border-color:var(--note);color:var(--cream);}
.pill .dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;margin-right:.45em;background:var(--pc,var(--husk));}

/* harvest --------------------------------------------- */
.photo-frame{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -18px rgba(23,12,7,.45);}
.photo-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease-fluid);}
.photo-frame.on img{transform:scale(1);}
.photo-cap{font-family:var(--sans);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.9rem;color:inherit;opacity:.6;}

.fact-row{display:flex;gap:2.2rem;margin-top:2rem;flex-wrap:wrap;}
.fact b{display:block;font-family:var(--serif);font-weight:600;font-size:1.9rem;font-variation-settings:"opsz" 60,"SOFT" 40,"WONK" 0;}
.fact span{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;}

/* ferment strip --------------------------------------- */
.ferment-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:2.6rem;}
.fday{border-radius:10px;padding:1rem .9rem 1.1rem;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--fc,#e0c9a2);color:var(--ftx,var(--ink));
  opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-fluid),transform .8s var(--ease-drip);}
.ferment-strip.on .fday{opacity:1;transform:none;}
.fday b{font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;opacity:.75;}
.fday span{font-family:var(--sans);font-size:.86rem;line-height:1.45;}
.fday .temp{font-family:var(--serif);font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums;}

/* roast ----------------------------------------------- */
.dark-70{background:var(--cacao-70);}
.roast-svg{width:100%;height:auto;margin-top:2.2rem;}
.roast-svg .axis{stroke:rgba(243,231,211,.22);stroke-width:1;}
.roast-svg .curve{stroke:var(--note);stroke-width:2.5;fill:none;stroke-linecap:round;transition:stroke .5s;}
.roast-svg text{font-family:var(--sans);font-size:11px;fill:rgba(243,231,211,.6);letter-spacing:.08em;}
.roast-svg .marker{fill:var(--cream);}

/* conch ----------------------------------------------- */
.dark-85{background:var(--cacao-85);}
.conch-clock{display:flex;align-items:center;gap:clamp(1.6rem,4vw,3rem);margin-top:2.4rem;flex-wrap:wrap;}
.dial{width:150px;height:150px;flex:none;}
.dial circle.face{fill:none;stroke:rgba(243,231,211,.2);stroke-width:1.5;}
.dial .tickmark{stroke:rgba(243,231,211,.35);stroke-width:1.5;}
.dial .hand{stroke:var(--note);stroke-width:2.5;stroke-linecap:round;transform-origin:75px 75px;transition:transform .32s var(--ease-drip),stroke .5s;}
.dial .hub{fill:var(--note);transition:fill .5s;}
.conch-readout{font-variant-numeric:tabular-nums;}
.conch-readout .big{font-family:var(--serif);font-weight:600;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.05;
  font-variation-settings:"opsz" 90,"SOFT" 40,"WONK" 0;}
.conch-readout .big em{font-style:italic;color:var(--note);transition:color .5s;}
.conch-readout .sub{font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-top:.5rem;}

/* temper ---------------------------------------------- */
.dark-90{background:var(--cacao-90);}
.temper-chart{margin-top:2.6rem;position:relative;}
.temper-chart svg{width:100%;height:auto;display:block;touch-action:none;}
.temper-chart .grid-line{stroke:rgba(243,231,211,.1);stroke-width:1;}
.temper-chart .tcurve{stroke:var(--cream);stroke-width:2.5;fill:none;stroke-linecap:round;}
.temper-chart .zone{opacity:.14;}
.temper-chart text{font-family:var(--sans);fill:rgba(243,231,211,.62);font-size:11px;letter-spacing:.06em;}
.temper-chart .phase-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;fill:rgba(243,231,211,.45);}
.temper-chart .handle{cursor:grab;outline:none;}
.temper-chart .handle:focus-visible .halo{opacity:1;stroke-width:2.5;stroke-dasharray:5 4;}
.temper-chart .handle:active{cursor:grabbing;}
.temper-chart .handle circle{fill:var(--note);stroke:var(--cacao-90);stroke-width:3;transition:fill .5s;}
.temper-chart .handle .halo{fill:none;stroke:var(--note);stroke-width:1;opacity:.5;transition:stroke .5s;}
.temper-chart .seed{fill:var(--note);opacity:0;transition:opacity .6s,fill .5s;}
.temper-chart .seed.grown{opacity:.85;}
.temper-readout{
  margin-top:1.4rem;display:flex;gap:1.6rem;align-items:baseline;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.temper-readout .deg{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);font-weight:600;line-height:1;
  font-variation-settings:"opsz" 80,"SOFT" 40,"WONK" 0;min-width:4.2ch;}
.temper-readout .state{font-family:var(--sans);font-size:.95rem;max-width:40ch;color:rgba(243,231,211,.85);}
.drag-hint{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;opacity:.5;margin-top:.8rem;}

/* bar / moulds ---------------------------------------- */
.dark-100{background:var(--cacao-100);}
.mould-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:2.6rem;}
.mould{
  aspect-ratio:1.35/1;border-radius:7px;position:relative;overflow:hidden;
  background:rgba(243,231,211,.06);box-shadow:inset 0 0 0 1px rgba(243,231,211,.09);
}
.mould::after{
  content:"";position:absolute;inset:auto 0 0 0;height:calc(var(--fill,0)*100%);
  background:linear-gradient(180deg,rgba(219,182,121,.55) 0,rgba(219,182,121,0) 3px),
             linear-gradient(180deg,#7a4526,#54301b);
  border-radius:0 0 7px 7px;
  transition:height .5s var(--ease-drip);
}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem);margin-top:3rem;}
.bar-card{
  position:relative;border-radius:14px;padding:1.8rem 1.6rem 1.6rem;overflow:hidden;
  background:linear-gradient(160deg,var(--cacao-85),var(--cacao-90));
  box-shadow:inset 0 0 0 1px rgba(201,153,79,.22);
  isolation:isolate;
}
.bar-card .sheen{
  content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 42%,rgba(243,231,211,.16) 49%,rgba(201,153,79,.28) 50%,rgba(243,231,211,.16) 51%,transparent 58%);
  transition:opacity .5s;
  transform:translateX(calc(var(--mx,.5)*40% - 20%)) rotate(0.001deg);
}
.bar-card:hover .sheen,.bar-card:focus-within .sheen{opacity:1;}
.bar-card>*{position:relative;z-index:1;}
.bar-card .pct{
  font-family:var(--serif);font-weight:620;font-size:clamp(2.4rem,4.5vw,3.4rem);line-height:1;
  font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 1;color:var(--husk-soft);
}
.bar-card h3{font-size:1.2rem;font-weight:560;margin:.7rem 0 .5rem;font-variation-settings:"opsz" 40,"SOFT" 50,"WONK" 1;}
.bar-card p{font-family:var(--sans);font-size:.9rem;color:rgba(243,231,211,.72);line-height:1.55;}
.bar-card .notes{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--note);margin-top:1.1rem;transition:color .5s;}

/* subscription ---------------------------------------- */
.year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,1.5rem);margin-top:3rem;}
.picking{
  background:#fbf3e4;border-radius:14px;padding:1.6rem 1.4rem 1.5rem;
  border-top:5px solid var(--pc,var(--husk));
  box-shadow:0 18px 40px -22px rgba(42,23,13,.35);
  display:flex;flex-direction:column;gap:.55rem;
}
.picking .mo{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--pc,var(--husk));}
.picking h3{font-size:1.45rem;font-weight:580;font-variation-settings:"opsz" 60,"SOFT" 60,"WONK" 1;font-feature-settings:"dlig" 1;color:var(--ink);}
.picking p{font-family:var(--sans);font-size:.88rem;color:rgba(58,34,19,.78);line-height:1.5;}
.picking .tn{font-style:italic;font-family:var(--serif);font-size:.95rem;color:var(--paper-ink);margin-top:auto;padding-top:.6rem;}
.sub-box{
  margin-top:3.2rem;background:var(--cacao-100);color:var(--cream);border-radius:18px;
  padding:clamp(1.8rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem;align-items:center;
}
.sub-box h3{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:560;font-variation-settings:"opsz" 90,"SOFT" 55,"WONK" 1;font-feature-settings:"dlig" 1;text-wrap:balance;}
.sub-box .price{font-family:var(--sans);font-size:.95rem;color:rgba(243,231,211,.75);margin-top:.8rem;}
.sub-form{display:flex;gap:.7rem;flex-wrap:wrap;}
.sub-form input{
  flex:1 1 220px;border-radius:99px;border:1.5px solid rgba(243,231,211,.3);
  background:transparent;color:var(--cream);padding:.78rem 1.3rem;font-size:.92rem;
}
.sub-form input::placeholder{color:rgba(243,231,211,.45);}
.sub-form input:focus{outline:2px solid var(--note);outline-offset:2px;border-color:transparent;}
.sub-confirm{font-family:var(--sans);font-size:.9rem;color:var(--husk-soft);margin-top:.9rem;min-height:1.4em;}

/* footer ---------------------------------------------- */
footer{background:var(--cacao-100);padding:3.5rem 0 2.5rem;border-top:1px solid rgba(201,153,79,.18);}
.foot{width:var(--w);margin:0 auto;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-end;}
.foot .sm{font-family:var(--sans);font-size:.78rem;color:rgba(243,231,211,.5);line-height:1.7;}
.foot a{color:rgba(243,231,211,.75);}

/* guide page ------------------------------------------ */
.guide-body{background:var(--cream);color:var(--ink);}
.guide-main{width:min(880px,92vw);margin:0 auto;padding:7rem 0 5rem;}
.guide-main h1{font-size:clamp(2.4rem,5vw,3.8rem);margin-bottom:1rem;}
.guide-main h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:3.2rem 0 1rem;font-weight:560;}
.guide-main p,.guide-main li{color:var(--paper-ink);max-width:68ch;}
.guide-main ol,.guide-main ul{padding-left:1.3rem;display:grid;gap:.55rem;margin-top:.8rem;}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.8rem;margin:1.4rem 0;}
.sw{border-radius:10px;overflow:hidden;box-shadow:0 10px 24px -14px rgba(42,23,13,.4);}
.sw .chip{height:64px;box-shadow:inset 0 0 0 1px rgba(42,23,13,.12);}
.sw .lbl{background:#fbf3e4;padding:.5rem .7rem;font-family:var(--sans);font-size:.72rem;line-height:1.5;}
.sw .lbl b{display:block;letter-spacing:.08em;text-transform:uppercase;}
.guide-main pre{
  background:var(--cacao-100);color:var(--cream-deep);border-radius:12px;
  padding:1.2rem 1.4rem;font-size:.8rem;line-height:1.6;overflow-x:auto;margin:1.2rem 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.guide-main code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;}
.back-link{font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--note-deep);font-weight:700;}
.pass-list{list-style:none;padding:0;counter-reset:pass;}
.pass-list li{
  counter-increment:pass;background:#fbf3e4;border-radius:12px;padding:1.1rem 1.3rem 1.1rem 3.4rem;position:relative;
  font-family:var(--sans);font-size:.92rem;
}
.pass-list li::before{
  content:counter(pass);position:absolute;left:1.1rem;top:.95rem;
  font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--note-deep);
}

/* responsive ------------------------------------------ */
@media (max-width:1023px){
  .nav-steps{display:none;}
  .duo,.duo.flip{grid-template-columns:1fr;}
  .wheel-wrap{grid-template-columns:1fr;}
  .products{grid-template-columns:1fr 1fr;}
  .year-grid{grid-template-columns:1fr 1fr;}
  .sub-box{grid-template-columns:1fr;}
  .mould-grid{grid-template-columns:repeat(6,1fr);}
}
@media (max-width:560px){
  .temper-chart text{font-size:17px;}
  .temper-chart .phase-label{font-size:15px;}
  .roast-svg text{font-size:17px;}
  .products{grid-template-columns:1fr;}
  .year-grid{grid-template-columns:1fr;}
  .ferment-strip{grid-template-columns:1fr 1fr;}
  .mould-grid{grid-template-columns:repeat(4,1fr);}
  .nav-cta .guide-link{display:none;}
  .fact-row{gap:1.4rem;}
}