:root {
  /* the whole site is one night-time coffee world; panels are glass floating over it */
  --bg: #120b07;
  --card: rgb(36 26 18 / .78);
  --ink: #f4e8da;
  --muted: #b9a48f;
  --line: rgb(255 240 220 / .12);
  --accent: #e3895a;
  --accent-ink: #1b120c;
  --soft: rgb(255 240 220 / .07);
  --good: #8cc47f;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 18px 40px rgb(0 0 0 / .35);
  --radius: 18px;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Archivo', 'Inter', system-ui, sans-serif;
  --ital: 'Instrument Serif', 'Fraunces', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --night: #120b07;
  --cream: #f6efe4;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16100c; --card: #211913; --ink: #f2e6d8; --muted: #b29f8d; --line: #3a2d23;
    --accent: #e3895a; --accent-ink: #1b120c; --soft: #2b2119; --good: #8cc47f;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #16100c; --card: #211913; --ink: #f2e6d8; --muted: #b29f8d; --line: #3a2d23;
  --accent: #e3895a; --accent-ink: #1b120c; --soft: #2b2119; --good: #8cc47f;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin: 0; background: radial-gradient(ellipse 120% 80% at 50% 0%, #22150d, #120b07 60%) fixed, #120b07; color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.1; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* ---------- buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: .7em 1.2em; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; cursor: pointer;
  transition: transform .15s, background .2s, border-color .2s;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-sm { padding: .45em .9em; font-size: .88rem; }
.btn[aria-pressed="true"] { background: var(--soft); border-color: var(--accent); }
.link { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; text-decoration: underline; cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { padding: .4em 1em; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; font-size: .9rem; font-weight: 500; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip.static { cursor: default; font-size: .82rem; padding: .3em .8em; }

.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 600; color: var(--accent); margin-bottom: 10px; }
.mini-title { display: block; font: 600 .72rem/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 8px; }

/* ---------- sections ---------- */
.section { max-width: 1180px; margin: 0 auto; padding: clamp(50px, 8vw, 90px) clamp(16px, 4vw, 48px); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { max-width: 640px; margin-bottom: 32px; }
.section-head h2 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 12px; }
.section-head p:last-child { color: var(--muted); font-size: 1.05rem; }

/* ---------- cups (shared) ---------- */
.cup-svg { width: 100%; height: auto; display: block; overflow: visible; }
.cup-body { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.cup-rim { fill: none; stroke: var(--ink); stroke-width: 3; }
.cup-handle { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round; }
.cup-shine { stroke: #fff; stroke-opacity: .35; stroke-width: 5; stroke-linecap: round; }
.surface-hi { fill: #fff; opacity: .16; }

/* ---------- pour lab ---------- */
.lab {
  display: grid; gap: 24px;
  grid-template-columns: 210px minmax(0, 1fr) 320px;
  grid-template-areas: "pitchers stage readout";
  align-items: start;
}
.pitchers { grid-area: pitchers; display: grid; gap: 8px; }
.stage { grid-area: stage; display: grid; gap: 14px; justify-items: center; }
.readout { grid-area: readout; display: grid; gap: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }

.pitcher {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); cursor: grab;
  user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none;
  transition: border-color .2s, background .2s, transform .15s;
}
.pitcher:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.pitcher-icon { grid-row: span 2; width: 40px; height: 40px; color: var(--ink); transition: transform .25s cubic-bezier(.3, 1.5, .6, 1); transform-origin: 30% 70%; }
.pitcher-name { font-weight: 600; font-size: .92rem; line-height: 1.2; }
.pitcher-ml { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pitcher.has-some { border-color: color-mix(in srgb, var(--ing) 70%, var(--line)); }
.pitcher.is-held { cursor: grabbing; background: var(--soft); border-color: var(--accent); transform: scale(.98); }
.pitcher.is-held .pitcher-icon { transform: rotate(-38deg); }

.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--soft); gap: 2px; }
.seg button { border: 0; background: none; padding: .45em 1em; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .9rem; display: grid; line-height: 1.15; }
.seg button small { font-weight: 400; font-size: .72rem; color: var(--muted); }
.seg button[aria-checked="true"] { background: var(--card); box-shadow: var(--shadow); }

.cup-wrap { position: relative; width: min(100%, 420px); }
#cupSvg { width: 100%; height: auto; display: block; overflow: visible; transition: transform .35s ease; transform-origin: 50% 95%; }
#cupSvg.is-sipping { transform: rotate(-9deg) translateY(-6px); }
.cup-wrap.is-full #cupSvg { animation: shake .4s; }
.cup-wrap.is-stirring #cupLayers { animation: swirl .6s ease; transform-origin: 140px 260px; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes swirl { 30% { transform: skewX(6deg); } 60% { transform: skewX(-5deg); } }

.stream rect { fill: var(--ing, #000); opacity: 0; transition: opacity .12s; }
.stream line { stroke: #fff; stroke-opacity: 0; stroke-width: 2; stroke-dasharray: 6 12; stroke-linecap: round; }
.stream.on rect { opacity: 1; }
.stream.on line { stroke-opacity: .35; animation: flow .4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -18; } }
.is-pouring .surface, .is-pouring .surface-hi { animation: wobble .35s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes wobble { from { transform: scaleY(.6); } to { transform: scaleY(1.5); } }

.steam path { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.steam.on path { animation: steam 3s ease-in-out infinite; }
.steam.on path:nth-child(2) { animation-delay: 1s; }
.steam.on path:nth-child(3) { animation-delay: 2s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(10px); } 40% { opacity: .35; } 100% { opacity: 0; transform: translateY(-14px); } }

.drip { animation: drip .9s ease-in forwards; }
@keyframes drip { to { transform: translateY(160px); opacity: 0; } }

.guide { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 5; }
.guide.done { stroke: var(--good); stroke-dasharray: none; }
.guide-label { font: 600 11px var(--sans); fill: var(--accent); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.guide-label.done { fill: var(--good); }

.tooltip { position: absolute; transform: translate(-50%, -140%); background: var(--ink); color: var(--bg); padding: 4px 10px; border-radius: 8px; font-size: .8rem; font-weight: 600; pointer-events: none; white-space: nowrap; }
.toast { position: absolute; top: 4px; left: 50%; transform: translate(-50%, -8px); background: var(--ink); color: var(--bg); padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600; opacity: 0; transition: .25s; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.cup-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#sipBtn { touch-action: none; }
#sipBtn.is-held { background: var(--soft); border-color: var(--accent); }

.field { display: grid; gap: 6px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.field select { font: 500 1rem var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); padding: .6em .8em; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); }
.recipe-hint { font-size: .88rem; background: var(--soft); padding: 10px 12px; border-radius: 12px; margin-top: -8px; }

.volume-row { font-variant-numeric: tabular-nums; margin-bottom: 6px; color: var(--muted); }
.volume-row strong { font: 700 2rem var(--serif); color: var(--ink); }
.meter { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.meter-fill { height: 100%; background: var(--accent); border-radius: inherit; transition: width .1s linear; }

.ratio-bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--line); background: var(--soft); }
.ratio-bar span { background: var(--ing); transition: flex .1s linear; min-width: 2px; }
.ratio-bar .ratio-empty { flex: 1; display: grid; place-items: center; font-size: .78rem; color: var(--muted); background: none; }
.ratio-text { margin-top: 8px; font-size: .95rem; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.ratio-text b { font: 700 1.15rem var(--serif); }
.ratio-text i { color: var(--muted); font-style: normal; }

.amounts { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .9rem; }
.amounts li { display: flex; align-items: center; gap: 8px; }
.amounts .amt { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ing); border: 1px solid rgb(0 0 0 / .15); }

.match { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: start; border-top: 1px solid var(--line); padding-top: 16px; }
.match.pop { animation: pop .35s ease; }
@keyframes pop { 0% { transform: scale(.97); opacity: .5; } 100% { transform: none; opacity: 1; } }
.match-empty { grid-column: 1 / -1; color: var(--muted); font-size: .92rem; }
.match-verdict { font-size: .8rem; color: var(--muted); }
.match-name { font: 700 1.5rem var(--serif); }
.match-pct { font-weight: 600; color: var(--accent); font-size: .9rem; }
.match-blurb { font-size: .86rem; margin-top: 6px; }
.match-next { font-size: .8rem; color: var(--muted); margin-top: 6px; }

/* ---------- drink guide ---------- */
.drink-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.drink-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: transform .2s, box-shadow .2s;
}
.drink-card:hover, .drink-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); }
.drink-card[hidden] { display: none; }
.drink-art { width: 100%; aspect-ratio: 300 / 238; }
.drink-card h3 { font-size: 1.35rem; margin-top: 4px; }
.drink-ratio { font-size: .82rem; font-weight: 600; color: var(--accent); }
.drink-blurb { font-size: .9rem; color: var(--muted); flex: 1; }
.drink-recipe { font-size: .78rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; }
.pour-this { align-self: flex-start; margin-top: 6px; }

/* ---------- anatomy ---------- */
.anatomy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.anatomy-figure { display: grid; gap: 18px; }
.anatomy-svg-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: center; }
#anatomySvg { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.anatomy-caption { font-weight: 600; color: var(--muted); font-size: .9rem; min-height: 1.5em; }

#anatomySvg .layer { cursor: pointer; transition: opacity .5s ease, transform .6s ease; transform-origin: 200px 225px; }
#anatomySvg .layer.is-gone { opacity: 0; transform: scale(1.12); pointer-events: none; }
#anatomySvg .shape, #anatomySvg .crease { transition: fill .8s, stroke .8s, transform .6s ease, opacity .3s; }
#anatomySvg.has-focus .layer:not(.is-focus) .shape { opacity: .8; }
#anatomySvg .layer.is-focus .shape { stroke: var(--accent); stroke-width: 3.5; }
#anatomySvg .layer.is-hover .shape { filter: brightness(1.07); opacity: 1; }
[data-layer="skin"] .shape { fill: #b8202e; }
[data-layer="skin"] .stem { fill: none; stroke: #5b3a22; stroke-width: 6; stroke-linecap: round; }
[data-layer="skin"] .leaf { fill: #5d8a4a; }
[data-layer="skin"] .gloss { fill: #fff; opacity: .22; pointer-events: none; }
[data-layer="pulp"] .shape { fill: #f2c27c; }
[data-layer="mucilage"] .shape { fill: #fbe9b0; stroke: rgb(150 110 40 / .25); stroke-width: 1.5; }
[data-layer="parchment"] .shape { fill: #ecdcb0; stroke: #c3ad7c; stroke-width: 1.5; }
[data-layer="silverskin"] .shape { fill: #e2e5da; stroke: #b4bba8; stroke-width: 1.5; }
[data-layer="bean"] .shape { fill: #a1b077; stroke: #7c8b55; stroke-width: 1.5; }
[data-layer="bean"] .crease { fill: none; stroke: #66753f; stroke-width: 3; stroke-linecap: round; pointer-events: none; }
[data-layer="embryo"] .shape { fill: #e9d59c; stroke: #b9a46a; stroke-width: 1; }
#anatomySvg.roasted [data-layer="bean"] .shape { fill: #6e4226; stroke: #3f2414; }
#anatomySvg.roasted [data-layer="bean"] .crease { stroke: #2e190d; }
#anatomySvg.roasted [data-layer="embryo"] .shape { fill: #4a2a17; stroke: #2e190d; }
#anatomySvg.split .side-l { transform: translateX(-12px); }
#anatomySvg.split .side-r { transform: translateX(12px); }
.flake { fill: #d6dacb; animation: flake 1.2s ease-out forwards; }
@keyframes flake { to { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 0; } }

.process { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.process-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.process-head .mini-title { margin: 0; }
.process-btns { display: flex; gap: 8px; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.stage-ticks { list-style: none; padding: 0; margin: 4px 0 12px; display: grid; grid-template-columns: repeat(5, 1fr); }
.stage-ticks button { background: none; border: 0; font-size: .72rem; color: var(--muted); cursor: pointer; padding: 2px; line-height: 1.2; text-align: center; width: 100%; }
.stage-ticks li:first-child button { text-align: left; }
.stage-ticks li:last-child button { text-align: right; }
.stage-ticks button[aria-current="step"] { color: var(--ink); font-weight: 700; }
.stage-text { font-size: .95rem; }

.layer-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.layer-list button {
  width: 100%; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left;
  padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; font-weight: 600; font-size: .92rem;
}
.layer-list .num { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-size: .8rem; }
.layer-list small { font-weight: 400; color: var(--muted); font-size: .75rem; font-style: italic; }
.layer-list button[aria-pressed="true"] { border-color: var(--accent); background: var(--soft); }
.layer-list button[aria-pressed="true"] .num { background: var(--accent); color: var(--accent-ink); }
.layer-list button.is-gone { opacity: .5; }

.layer-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; box-shadow: var(--shadow); }
.layer-num { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.layer-card h3 { font-size: 1.8rem; }
.layer-card h3 span { font: italic 400 1rem var(--sans); color: var(--muted); }
.layer-fact { background: var(--soft); padding: 10px 12px; border-radius: 12px; font-size: .92rem; }
.layer-gone { font-size: .88rem; color: var(--muted); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 32px; }
.fact { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; }
.fact h3 { font-size: 1.15rem; margin-bottom: 4px; }
.fact p { color: var(--muted); font-size: .92rem; }

/* ---------- roast ---------- */
.roast-bean-wrap { position: relative; width: min(100%, 300px); }
#roastBean { width: 100%; height: auto; display: block; overflow: visible; }
#roastBeanBody { transform-origin: 120px 150px; transition: transform .3s; }
#roastBeanBody.jolt { animation: jolt .18s; }
@keyframes jolt { 50% { rotate: 3deg; } }
#beanFill { stroke: rgb(0 0 0 / .18); stroke-width: 2; }
#beanCrease { fill: none; stroke-width: 6; stroke-linecap: round; }
.spark { fill: #f3d6a2; animation: spark .7s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.puff { fill: #9a8f87; opacity: 0; animation: puff 2.4s ease-out infinite; }
@keyframes puff { 0% { opacity: 0; transform: translateY(40px) scale(.6); } 30% { opacity: .35; } 100% { opacity: 0; transform: translateY(-60px) scale(1.5); } }

.flames { display: flex; justify-content: center; gap: 6px; height: 34px; margin-top: -6px; }
.flames span { width: 18px; height: 30px; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; background: linear-gradient(to top, #f7b733, #e8532a); opacity: 0; transform: scaleY(.3); transform-origin: bottom; transition: .25s; }
.flames.on span { opacity: .9; transform: scaleY(1); animation: flicker .25s ease-in-out infinite alternate; }
.flames.on span:nth-child(2n) { animation-delay: .1s; }
.flames.on span:nth-child(3n) { animation-delay: .18s; }
@keyframes flicker { to { transform: scaleY(.75) skewX(4deg); } }

.roast-controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.burner { font-size: 1.05rem; padding: .85em 1.6em; touch-action: none; }

.thermo-marks { position: relative; height: 20px; font-size: .72rem; color: var(--muted); }
.thermo-marks span { position: absolute; left: calc(var(--at) * 100%); transform: translateX(-50%); white-space: nowrap; }
.thermo-marks span::before { content: ''; display: block; width: 1.5px; height: 6px; background: var(--muted); margin: 0 auto 2px; }
.roast-note { color: var(--muted); min-height: 3em; }
.flavor-meters { display: grid; gap: 10px; }
.fm { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 12px; font-size: .88rem; font-weight: 500; }
.fm-track { height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.fm-fill { height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s; }
.fm.off { opacity: .45; }
.fm-note { font-size: .85rem; color: var(--muted); }
.best-for { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.best-for .mini-title { margin: 0 6px 0 0; }
.myth { background: var(--soft); border-radius: var(--radius); padding: 18px 20px; }
.myth h3 { font-size: 1.1rem; margin-bottom: 6px; }
.myth p { font-size: .92rem; }

.footer { text-align: center; padding: 40px 16px 60px; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); }


/* ---------- shared bits for new sections ---------- */
.sub-head { font-size: 1.6rem; margin: 48px 0 6px; }
.sub-lede { color: var(--muted); max-width: 640px; margin-bottom: 18px; }
.sp-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: .92rem; }
.sp-dl dt { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; padding-top: 2px; }
.sp-dl dd { margin: 0; }
.chip i.b-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--b); margin-right: 6px; }

/* ---------- 03 beans & roasts ---------- */
.sp-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.sp-tab { display: grid; justify-items: center; gap: 2px; padding: 8px 16px 10px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; font-weight: 600; }
.sp-tab[aria-pressed="true"] { border-color: var(--accent); background: var(--soft); }
.sp-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.sp-art { display: grid; justify-items: center; gap: 8px; text-align: center; }
.sp-shape { font-size: .85rem; color: var(--muted); }
.sp-info { display: grid; gap: 14px; }
.sp-info h3 { font-size: 2rem; }
.sp-info h3 span { font: italic 400 1rem var(--sans); color: var(--muted); }
.sp-taste { font-size: 1.05rem; }
.sp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-stats > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; }
.sp-stats .mini-title { grid-column: 1 / -1; margin: 0; }
.bar { height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .4s; }
.varieties { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.varieties li { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.varieties svg { flex: none; }
.varieties b { display: block; font-size: .95rem; }
.varieties span { font-size: .82rem; color: var(--muted); }
.varieties .v-meta { display: block; font-size: .72rem; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.name-ladder { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; box-shadow: var(--shadow); }
.name-ladder ol { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; counter-reset: n; }
.name-ladder li { position: relative; display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--soft); }
.name-ladder li + li::before { content: '→'; position: absolute; left: -9px; top: 50%; transform: translate(-50%, -50%); color: var(--muted); font-weight: 700; }
.name-ladder b { font-size: .95rem; }
.name-ladder span { font-size: .76rem; color: var(--muted); }
.name-ladder em { font: italic 600 1.05rem var(--serif); color: var(--accent); }
.name-eg { font-size: .95rem; }
@media (max-width: 760px) { .name-ladder ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .name-ladder li + li::before { display: none; } }
.caffeine-ladder { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; padding: 14px 18px; background: var(--soft); border-radius: var(--radius); overflow-x: auto; }
.caffeine-ladder .mini-title { margin: 0 4px 6px; white-space: nowrap; }
.caffeine-ladder button { flex: 1 0 80px; display: grid; justify-items: center; gap: 2px; background: none; border: 0; border-radius: 12px; padding: 6px; cursor: pointer; }
.caffeine-ladder i { width: 28px; border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, color-mix(in srgb, var(--accent) 45%, var(--card)), var(--accent)); }
.caffeine-ladder b { font-size: .88rem; }
.caffeine-ladder small { font-size: .72rem; color: var(--muted); }
.caffeine-ladder button[aria-pressed="true"] { background: var(--card); box-shadow: var(--shadow); }
.origins { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.origin { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.origin .mini-title { margin: 0; }
.origin h4 { font: 700 1.35rem/1.1 var(--serif); margin: 0; }
.o-notes { display: flex; flex-wrap: wrap; gap: 5px; }
.o-notes span { font-size: .76rem; font-weight: 600; padding: .2em .65em; border-radius: 999px; background: var(--soft); }
.o-bag { font-size: .85rem; background: color-mix(in srgb, var(--accent) 10%, var(--card)); padding: 8px 10px; border-radius: 10px; }
.o-fact { font-size: .88rem; color: var(--muted); flex: 1; }
.origin .link { align-self: flex-start; font-size: .88rem; }
.sp-name { background: var(--soft); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; font-size: .92rem; }
.sp-name .mini-title { margin: 0; }
.facts.rare { margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1020px) { .facts.rare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts.rare { grid-template-columns: minmax(0, 1fr); } }
.fact h3 i { font: italic 400 .85rem var(--sans); color: var(--muted); }
.rare-named { font-style: italic; color: var(--ink) !important; margin-bottom: 4px; }
.roast-levels { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.piles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pile { background: #f7f3ec; border: 2px solid transparent; border-radius: 16px; padding: 10px 6px 12px; cursor: pointer; display: grid; gap: 6px; justify-items: center; font: 700 1rem var(--serif); color: #4a2a14; transition: transform .2s, border-color .2s; }
.pile svg { width: 100%; height: auto; }
.pile:hover { transform: translateY(-3px); }
.pile[aria-pressed="true"] { border-color: var(--accent); }
.roast-card { grid-template-columns: 1fr; gap: 12px; }
.roast-card h3 { font-size: 1.8rem; }

/* ---------- 04 map ---------- */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.map-wrap { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
#mapSvg { width: 100%; height: auto; display: block; }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.map-loading[hidden] { display: none; }
.m-sphere { fill: color-mix(in srgb, #7fb2c9 18%, var(--card)); }
.m-grat { fill: none; stroke: var(--line); stroke-width: .5; }
.m-belt { fill: #e3a33b; opacity: .13; }
.m-tropic { stroke: #c98a2b; stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.m-tropic-label { font: 600 11px var(--sans); fill: #b07a25; }
.m-country { fill: var(--soft); stroke: var(--card); stroke-width: .6; transition: fill .3s, opacity .3s; }
.m-grows { fill: var(--c); cursor: pointer; }
.m-grows:hover, .m-grows:focus-visible { stroke: var(--ink); stroke-width: 1.2; outline: none; }
.m-picked { stroke: var(--accent) !important; stroke-width: 2.2 !important; }
.has-brand .m-grows:not(.m-from) { opacity: .25; }
.has-brand .m-from { stroke: var(--brand); stroke-width: 1.5; }
.m-dot { fill: #6b3d22; stroke: var(--card); stroke-width: 2; cursor: pointer; }
.m-arc { fill: none; stroke: var(--brand); stroke-width: 1.6; stroke-linecap: round; opacity: .85; stroke-dasharray: 4 5; animation: arcFlow 1.2s linear infinite; }
@keyframes arcFlow { to { stroke-dashoffset: -18; } }
.m-hq { fill: var(--brand); stroke: var(--card); stroke-width: 3; }
.m-hq-label { font: 700 13px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 4px; }
.map-legend { display: flex; gap: 8px; align-items: center; font-size: .75rem; color: var(--muted); padding: 6px 6px 0; flex-wrap: wrap; }
.map-legend i { width: 110px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, rgb(233 200 150), rgb(74 38 18)); }
.belt-key { margin-left: auto; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: rgb(227 163 59 / .2); color: #b07a25; }
.map-info { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); display: grid; gap: 10px; }
.map-info h3 { font-size: 1.7rem; }
.m-sold, .m-note { font-size: .88rem; }
.m-note { color: var(--muted); }
.m-top { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.m-top button { width: 100%; display: grid; grid-template-columns: 96px 1fr 34px; gap: 8px; align-items: center; background: none; border: 0; padding: 4px; border-radius: 8px; cursor: pointer; font-size: .86rem; text-align: left; }
.m-top button:hover { background: var(--soft); }
.m-top i { height: 10px; border-radius: 99px; }
.m-top b { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 06 grind ---------- */
.grind { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.grind-view { background: #f7f3ec; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; }
.grind-art { width: 100%; height: auto; display: block; border-radius: 12px; background: #efe6d6; }
.grind-mag { font-size: .8rem; color: #7b6556; margin-top: 8px; }
.grind-info { display: grid; gap: 14px; }
.grind-info .mini-title { display: inline; margin-right: 8px; }
.grind-scale { list-style: none; padding: 0; margin: -6px 0 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.grind-scale button { background: none; border: 0; font-size: .68rem; color: var(--muted); cursor: pointer; padding: 2px; line-height: 1.2; width: 100%; }
.grind-scale button[aria-current="step"] { color: var(--ink); font-weight: 700; }
.grind-like { color: var(--muted); margin-top: -8px; }

/* the passport */
.passport { margin-bottom: 18px; padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font: 500 .7rem var(--mono); letter-spacing: .24em; text-transform: uppercase; }
.pp-k { color: #e6b986; }
.pp-count { color: var(--muted); }
.pp-stamps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.pp-stamp { display: grid; justify-items: center; gap: 6px; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 4px; }
.pp-ring { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--muted); font: 900 .8rem var(--display); font-stretch: 125%; color: var(--muted); transition: transform .3s, border-color .3s, color .3s; }
.pp-stamp.got .pp-ring { border: 3px double #e3895a; color: #e3895a; transform: rotate(-12deg); }
.pp-stamp:hover .pp-ring { transform: scale(1.08) rotate(-6deg); border-color: #e6b986; }
.pp-name { font: 500 .62rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .pp-stamps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* a trip: full-screen travel feature */
.trip { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0705; color: #fffaf2; overflow: hidden; }
.trip::backdrop { background: #0b0705; }
.trip-photo { position: absolute; inset: 0; background: center / cover no-repeat, radial-gradient(ellipse at 70% 30%, var(--sky2), transparent 60%), linear-gradient(180deg, var(--sky1), #0b0705); transform: scale(1.15); }
.trip.in .trip-photo { animation: tripIn 6s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes tripIn { from { transform: scale(1.18); opacity: 0; } 15% { opacity: 1; } to { transform: scale(1.03); opacity: 1; } }
.trip-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 6 3 / .82), rgb(10 6 3 / .2) 65%), linear-gradient(0deg, rgb(10 6 3 / .8), transparent 50%); }
.trip-type { position: absolute; left: clamp(16px, 6vw, 96px); bottom: clamp(40px, 10vh, 100px); right: 16px; max-width: 760px; display: grid; gap: 14px; }
.trip-type > * { opacity: 0; }
.trip.in .trip-type > * { animation: up 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
.trip.in .trip-kicker { animation-delay: .5s; } .trip.in .trip-name { animation-delay: .7s; } .trip.in .trip-line { animation-delay: 1.1s; } .trip.in .trip-facts { animation-delay: 1.4s; } .trip.in .trip-btns { animation-delay: 1.7s; }
.trip-kicker { font: italic 400 clamp(1.4rem, 2.6vw, 2rem) var(--ital); color: #e6b986; }
.trip-name { font: 900 clamp(3.4rem, 13vw, 11rem)/.82 var(--display); font-stretch: 115%; letter-spacing: -.04em; text-transform: uppercase; }
.trip-line { font: 400 clamp(1.05rem, 1.6vw, 1.25rem)/1.5 var(--sans); color: #f0dcc4; max-width: 34em; }
.trip-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 4px 0 0; }
.trip-facts dt { font: 500 .62rem var(--mono); letter-spacing: .24em; text-transform: uppercase; color: #c9b49b; }
.trip-facts dd { margin: 2px 0 0; font: 600 .95rem var(--sans); }
.trip-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.trip-explore { background: #e6b986; border-color: #e6b986; color: #1b120c; }
.trip-btns .btn-ghost { color: #fffaf2; }
.trip-close { position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .35); background: rgb(10 6 3 / .4); color: #fffaf2; font-size: 1.6rem; cursor: pointer; }
.trip-notes span { position: absolute; left: calc(var(--x) + 30%); top: var(--y); font: italic 400 clamp(1.4rem, 3vw, 2.4rem) var(--ital); color: #fff2d6; opacity: 0; text-shadow: 0 2px 20px rgb(0 0 0 / .6); }
.trip.in .trip-notes span { animation: scentFloat 7s ease-in-out var(--d) infinite; animation-delay: calc(1.4s + var(--d)); }
@keyframes scentFloat { 0% { opacity: 0; transform: translateY(20px); filter: blur(4px); } 25% { opacity: .9; filter: blur(0); } 70% { opacity: .7; } 100% { opacity: 0; transform: translateY(-40px); filter: blur(3px); } }
.trip-stamp { position: absolute; right: clamp(20px, 8vw, 140px); top: clamp(70px, 14vh, 140px); width: clamp(120px, 16vw, 210px); color: #e3895a; opacity: 0; }
.trip-stamp svg { width: 100%; height: auto; font-family: var(--display); }
.trip-stamp.in { animation: stamp .5s cubic-bezier(.3,1.6,.5,1) .9s forwards; }
@keyframes stamp { from { opacity: 0; transform: scale(2.2) rotate(-30deg); } to { opacity: .92; transform: scale(1) rotate(-14deg); } }
.trip-credit { position: absolute; right: 20px; bottom: 14px; font: 400 .66rem var(--mono); color: rgb(255 255 255 / .55); }
.trip-credit a { color: inherit; }
body.on-trip .hud { opacity: 0; }

/* the menu: a fashion editorial, one drink at a time */
.dg { position: relative; }
.dg-story { position: relative; height: calc(var(--n, 8) * 75vh + 100vh); }
.dg-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 2vw; padding: 70px clamp(48px, 7vw, 96px) 50px clamp(16px, 5vw, 64px); }
.dg-glow { position: absolute; left: 10%; top: 50%; width: 60vh; height: 60vh; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c, #6b4429) 55%, transparent), transparent 65%); filter: blur(30px); opacity: .55; transition: background .4s; pointer-events: none; }
.dg-k { position: absolute; top: 84px; left: clamp(16px, 5vw, 64px); font: 500 .72rem var(--mono); letter-spacing: .3em; text-transform: uppercase; color: #e6b986; }
.dg-cup { position: relative; width: min(100%, 64vh); justify-self: center; }
.dg-cup svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .4)); }
.dg-copy { display: grid; gap: 12px; align-content: center; }
.dg-copy.in > * { animation: up .8s cubic-bezier(.2,.7,.2,1) both; }
.dg-copy.in > *:nth-child(2) { animation-delay: .06s; } .dg-copy.in > *:nth-child(3) { animation-delay: .12s; } .dg-copy.in > *:nth-child(4) { animation-delay: .18s; } .dg-copy.in > *:nth-child(5) { animation-delay: .24s; }
.dg-name { font: 900 min(7.5rem, max(2.2rem, calc(52vw / var(--len, 8))))/.85 var(--display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.035em; white-space: nowrap; }
.dg-meta { font: 500 .85rem var(--mono); letter-spacing: .3em; text-transform: uppercase; color: #e6b986; }
.dg-line { font: italic 400 clamp(1.4rem, 2.6vw, 2.1rem)/1.2 var(--ital); color: #f0dcc4; max-width: 18em; }
.dg-ratio { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 .75rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dg-ratio span { display: inline-flex; align-items: center; gap: 6px; }
.dg-ratio i { width: 10px; height: 10px; border-radius: 50%; background: var(--ing); border: 1px solid rgb(255 255 255 / .2); }
.dg-pour { justify-self: start; margin-top: 6px; background: none; border: 0; border-bottom: 1px solid currentColor; color: var(--ink); padding: 0 0 4px; font: 800 .78rem var(--display); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; cursor: pointer; }
.dg-dots { position: absolute; right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dg-dots button { display: flex; align-items: center; justify-content: flex-end; gap: 8px; background: none; border: 0; color: var(--ink); cursor: pointer; opacity: .35; font: 500 .62rem var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 2px; }
.dg-dots button::after { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; }
.dg-dots button span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .4s; }
.dg-dots button[aria-current="true"], .dg-dots button:hover { opacity: 1; }
.dg-dots button[aria-current="true"]::after { background: #e6b986; border-color: #e6b986; }
.dg-dots button:hover span { max-width: 110px; }
.dg-all-wrap { max-width: 1180px; margin: 0 auto; padding: 20px clamp(16px, 4vw, 48px) 80px; text-align: center; }
.dg-all { max-width: none; text-align: left; }
.dg-all summary { color: var(--ink); }
.dg-all-body { margin-top: 18px; }
@media (max-width: 760px) {
  .dg-pin { grid-template-columns: 1fr; align-content: center; gap: 10px; padding-top: 110px; }
  .dg-cup { width: min(70vw, 34vh); }
  .dg-name { font-size: min(4.5rem, max(2rem, calc(118vw / var(--len, 8)))); }
  .dg-glow { left: 50%; top: 35%; transform: translate(-50%, -50%); width: 70vw; height: 70vw; }
  .dg-dots { display: none; }
}

/* the grind game */
.gm { margin-top: 56px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.gm-k { font: 500 .72rem var(--mono); letter-spacing: .3em; text-transform: uppercase; color: #e6b986; }
.gm-title { font: 900 clamp(1.6rem, 3.6vw, 2.6rem)/1 var(--display); font-stretch: 110%; text-transform: uppercase; letter-spacing: -.02em; max-width: 18em; }
.gm-row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: center; }
.gm-pile { display: grid; justify-items: center; gap: 4px; padding: 10px 14px; border-radius: 20px; border: 1.5px dashed var(--accent); background: var(--soft); color: var(--ink); cursor: grab; touch-action: none; font: 600 .82rem var(--sans); }
.gm-pile:active { cursor: grabbing; }
.gm-pile svg { width: 120px; height: 80px; }
.gm-ghost { position: fixed; left: 0; top: 0; z-index: 70; width: 100px; height: 80px; pointer-events: none; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .5)); }
.gm-ghost svg { width: 100%; height: 100%; }
.gm-brewers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.gm-brewer { display: grid; justify-items: center; gap: 4px; width: 92px; padding: 12px 6px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; font: 600 .75rem var(--sans); transition: transform .2s, border-color .2s, background .2s; }
.gm-brewer svg { width: 44px; height: 42px; color: #e6b986; }
.gm-brewer.over { transform: translateY(-6px) scale(1.06); border-color: #e6b986; background: var(--soft); }
.gm-brewer.won { border-color: var(--good); }
.gm-brewer.won svg { color: var(--good); }
.gm-brewer.good { animation: gmGood .6s ease; }
.gm-brewer.bad { animation: shake .4s; }
@keyframes gmGood { 40% { transform: translateY(-10px) scale(1.08); } }
.gm-help { font-size: .85rem; color: var(--muted); }
.gm-say { min-height: 1.4em; font: italic 400 1.4rem/1.3 var(--ital); max-width: 34em; }
.gm-say.good { color: var(--good); }
.gm-say.bad { color: #f0a080; }
.gm-score { font: 500 .72rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .gm-brewers { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gm-brewer { width: auto; } }

/* ---------- 07 flavor wheel ---------- */
.wheel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.wheel-wrap { position: relative; max-width: 640px; width: 100%; margin: 0 auto; --aura: #e6b986; }
.wheel-aura { position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--aura) 45%, transparent), transparent 62%); opacity: .25; filter: blur(20px); transition: opacity .8s, background .8s; pointer-events: none; }
.wheel-wrap.aura-on .wheel-aura { opacity: .75; animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06); } }
#wheelSvg { position: relative; }
.w-seg { transition: opacity .35s, transform .6s cubic-bezier(.2,.8,.2,1.2); transform-box: view-box; transform-origin: 0 0; }
.w-float { position: absolute; z-index: 2; pointer-events: none; font: italic 400 1.6rem var(--ital); white-space: nowrap; transform: translate(-50%, -50%); text-shadow: 0 2px 12px rgb(0 0 0 / .6); animation: scent 2.6s ease-out forwards; }
@keyframes scent { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1.25); filter: blur(2px); } }
.palette { display: flex; height: 14px; border-radius: 99px; overflow: hidden; margin: 10px 0 2px; }
.palette:empty { display: none; }
.palette i { flex: 1; background: var(--c); }
#myNotes .chip { border-color: color-mix(in srgb, var(--c, #e6b986) 70%, transparent); }
.card-maker { display: grid; gap: 10px; margin-top: 14px; }
.card-maker[hidden] { display: none; }
.field input { font: 500 1rem var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); padding: .6em .8em; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); }
.card-dialog { border: 0; padding: 18px; border-radius: 22px; background: #1a110b; color: var(--ink); max-width: min(92vw, 460px); box-shadow: 0 30px 80px rgb(0 0 0 / .6); }
.card-dialog::backdrop { background: rgb(8 5 3 / .78); backdrop-filter: blur(6px); }
.card-dialog img { width: 100%; height: auto; display: block; border-radius: 14px; }
.card-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
#wheelSvg { width: 100%; height: auto; display: block; overflow: visible; }
.w-seg { cursor: pointer; }
.w-seg path { stroke: var(--bg); stroke-width: 1.5; transition: filter .2s; }
.w-seg:hover path, .w-seg:focus-visible path { filter: brightness(1.08) saturate(1.1); }
.w-seg:focus-visible { outline: none; }
.has-focus .w-seg:not(.is-focus) { opacity: .28; }
.w-note.is-picked path { stroke: var(--ink); stroke-width: 3; }
.w-note.is-picked text { font-weight: 800; }
.w-t1, .w-t2, .w-t3 { text-anchor: middle; dominant-baseline: central; pointer-events: none; fill: #24140b; }
.w-t1 { font: 700 13px var(--sans); fill: #fff; }
.w-t2 { font: 600 12px var(--sans); }
.w-t3 { font: 500 11px var(--sans); }
.w-hub { fill: var(--card); stroke: var(--line); cursor: pointer; }
.w-hub-t { text-anchor: middle; font: 700 15px var(--serif); fill: var(--ink); pointer-events: none; }
.wheel-side { display: grid; gap: 16px; }
.w-title { color: var(--c); }
.w-how { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: .95rem; }
.my-notes { background: var(--soft); border-radius: var(--radius); padding: 16px 18px; }
.my-notes .chips { margin: 8px 0 0; }
.notes-line { font: italic 500 1.1rem var(--serif); margin-top: 6px; }

/* ---------- 08 barista school ---------- */
.b-steps { list-style: none; padding: 0; margin: 0 0 18px; display: flex; gap: 6px; flex-wrap: wrap; }
.b-steps li { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--soft); }
.b-steps span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--card); font-size: .72rem; font-weight: 600; }
.b-steps .done span { background: color-mix(in srgb, var(--good) 35%, var(--card)); }
.b-steps .now { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.b-steps .now span { background: var(--accent); color: var(--accent-ink); }
.b-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; }
.b-stage { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; min-height: 360px; display: grid; place-items: center; position: sticky; top: 76px; }
.b-stage:empty { display: none; }
.b-stage:empty + .b-panel { grid-column: 1 / -1; }
.b-scene { width: 100%; max-width: 360px; height: auto; display: block; overflow: visible; }
.b-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 12px; align-items: center; width: 100%; }
.b-final { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 12px; align-items: center; width: 100%; }
.b-top { width: 100%; height: auto; display: block; }
.b-metal { fill: #c3c7cc; stroke: #8e949a; stroke-width: 2; }
.b-dark { fill: #3a3a3a; }
.b-spout { fill: none; stroke: #3a3a3a; stroke-width: 5; stroke-linecap: round; }
.b-spout-line { fill: none; stroke: #8e949a; stroke-width: 5; stroke-linecap: round; }
.b-stream { opacity: .95; }
.b-lcd { font: 700 15px ui-monospace, monospace; fill: #7cf29a; text-anchor: middle; }
.b-fall circle { animation: fall .35s linear infinite; }
@keyframes fall { from { transform: translateY(-14px); } to { transform: translateY(16px); opacity: .3; } }
.b-swirl { animation: swirlB .5s linear infinite; transform-origin: 150px 200px; }
@keyframes swirlB { 50% { transform: translateX(6px); } }
.b-steam-puff circle { fill: var(--muted); opacity: .25; animation: steam 1.4s ease-out infinite; }
.b-gauge { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto; }
.g-track, .g-good, .g-bad { fill: none; stroke-width: 14; stroke-linecap: butt; }
.g-track { stroke: var(--soft); }
.g-good { stroke: var(--good); }
.g-bad { stroke: #d0453a; }
.g-needle { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.g-hub { fill: var(--ink); }
.g-val { font: 700 22px var(--serif); fill: var(--ink); text-anchor: middle; }
.g-lbl { font: 600 10px var(--sans); fill: var(--muted); text-anchor: middle; }

.b-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); display: grid; gap: 14px; }
.b-top-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 30px; }
.b-top-row .mini-title { margin: 0; }
.b-top-row > div { display: flex; gap: 12px; align-items: center; }
.b-sound { padding: .3em .6em; }
.b-title { font-size: 2rem; }
.b-guide { font-size: .98rem; }
.b-guide[hidden] { display: none; }
.b-how { margin: 6px 0 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: .92rem; }
.b-how li.done { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--good); }
.b-how li.now { font-weight: 600; }
.b-controls { display: grid; gap: 14px; }
.b-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.b-hold { font-size: 1.05rem; padding: .85em 1.6em; touch-action: none; -webkit-touch-callout: none; }
.b-hold.is-held { transform: scale(.96); filter: brightness(.92); }
.b-feedback { min-height: 1.5em; font-weight: 500; background: var(--soft); border-radius: 12px; padding: 10px 12px; }
.b-feedback:empty { display: none; }
.b-next { justify-self: end; }
.b-next:disabled { opacity: .45; cursor: not-allowed; }
.b-next[hidden] { display: none; }

.b-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.b-drink { display: grid; gap: 2px; text-align: left; padding: 10px 12px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); cursor: pointer; transition: border-color .2s, transform .15s; }
.b-drink:hover { border-color: var(--accent); transform: translateY(-2px); }
.b-drink-art { aspect-ratio: 300 / 238; margin-bottom: 4px; }
.b-drink b { font: 700 1.1rem var(--serif); }
.b-drink small { font-size: .78rem; color: var(--muted); line-height: 1.35; }

.b-syrups { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.b-syrups li { display: grid; grid-template-columns: 18px 1fr auto 22px auto; gap: 8px; align-items: center; padding: 6px 8px 6px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-weight: 500; font-size: .92rem; }
.b-syrups b { text-align: center; font-variant-numeric: tabular-nums; }
.b-syrups .btn { padding: .2em .7em; }
.b-swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--s); border: 1px solid rgb(0 0 0 / .15); }

.b-grinds, .b-arts { display: flex; flex-wrap: wrap; gap: 6px; }
.b-grinds button, .b-arts button { padding: .4em .9em; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); cursor: pointer; font-size: .85rem; font-weight: 500; }
.b-grinds button[aria-checked="true"], .b-arts button[aria-checked="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.b-timer { font: 700 2.4rem var(--serif); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.b-extract { position: relative; flex: 1 1 200px; height: 12px; border-radius: 99px; align-self: center; margin-left: 12px;
  background: linear-gradient(90deg, #e6c64a, #e6c64a 30%, var(--good) 45%, var(--good) 60%, #8a3b1d 80%); }
.b-extract i { position: absolute; top: -5px; width: 4px; height: 22px; border-radius: 2px; background: var(--ink); transform: translateX(-50%); transition: left .1s linear; }
.b-extract-lbl { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-top: -10px; padding-left: 40%; }

.b-milks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.b-milk { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto auto; column-gap: 10px; text-align: left; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); cursor: pointer; }
.b-milk[aria-pressed="true"] { border-color: var(--accent); background: var(--soft); }
.b-carton { grid-row: span 3; width: 30px; height: 44px; background: var(--m); border: 2px solid var(--ink); border-radius: 3px; clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%); }
.b-milk b { font: 700 1.05rem var(--serif); }
.b-milk small { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.b-temp { font-size: .74rem; font-weight: 600; color: var(--accent); margin-top: 4px; }

.b-result { display: grid; gap: 10px; }
.b-result h3 { font-size: 1.9rem; }
.b-stars { font-size: 1.8rem; color: #e0a526; letter-spacing: 2px; }
.b-stars span { color: var(--line); }
.b-score { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: .9rem; }
.b-score li { display: grid; grid-template-columns: 90px 1fr 12px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.b-score span { color: var(--muted); }
.b-score i { width: 12px; height: 12px; border-radius: 50%; }
.b-score i.good { background: var(--good); }
.b-score i.ok { background: #e0a526; }
.b-score i.meh { background: #d0453a; }


/* =========================================================
   CINEMATIC LAYER: nav, hero, journey, chapter cards, sound,
   roastery, morning. Dark, photographic, type as image.
   ========================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; justify-content: space-between; align-items: center;
  padding: 14px clamp(16px, 4vw, 40px); color: var(--ink);
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
  transition: background .4s, color .4s, border-color .4s;
}
.nav.over-hero, body.menu-open .nav { background: linear-gradient(180deg, rgb(10 6 3 / .55), transparent); color: #fffaf2; border-color: transparent; backdrop-filter: none; }
.brand { font: 800 1rem var(--display); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: inherit; text-decoration: none; }
.nav-right { display: flex; gap: 10px; align-items: center; }
.nav-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid currentColor; color: inherit; border-radius: 999px; padding: .45em 1em; font: 600 .78rem var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; opacity: .9; }
.nav-btn:hover { opacity: 1; }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.eq i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; }
.sound-on .eq i { animation: eq .9s ease-in-out infinite; }
.sound-on .eq i:nth-child(2) { animation-delay: .2s; } .sound-on .eq i:nth-child(3) { animation-delay: .45s; }
@keyframes eq { 50% { height: 12px; } }
.menu { position: fixed; inset: 0; z-index: 35; background: var(--night); color: #fffaf2; display: grid; place-items: center; padding: 80px 24px 24px; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; width: min(100%, 760px); }
.menu-list a { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; gap: 16px; color: inherit; text-decoration: none; padding: 6px 0; border-bottom: 1px solid rgb(255 255 255 / .1); font: 800 clamp(1.4rem, 4vw, 2.6rem)/1.1 var(--display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em; transition: color .2s, padding .2s; }
.menu-list b { font: italic 400 1rem var(--ital); letter-spacing: 0; text-transform: none; color: #d7a86e; }
.menu-list a:hover { color: #d7a86e; padding-left: 8px; }

/* hero */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--night); color: #fffaf2; display: grid; align-items: end; }
.hero-photo { position: absolute; inset: 0; background: center 40% / cover no-repeat; transform: scale(1.08); animation: heroIn 3.2s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes heroIn { from { transform: scale(1.18); opacity: 0; } to { transform: scale(1.04); opacity: 1; } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 6 3 / .55) 0%, rgb(10 6 3 / .05) 35%, rgb(10 6 3 / .2) 60%, rgb(10 6 3 / .88) 100%); }
.hero-steam { position: absolute; left: 50%; top: 4%; width: 180px; transform: translateX(-50%); opacity: .5; pointer-events: none; }
.hero-steam path { fill: none; stroke: #fffaf2; stroke-width: 5; stroke-linecap: round; opacity: 0; animation: steamRise 5s ease-in-out infinite; }
.hero-steam path:nth-child(2) { animation-delay: 1.6s; } .hero-steam path:nth-child(3) { animation-delay: 3.2s; }
@keyframes steamRise { 0% { opacity: 0; transform: translateY(40px); } 35% { opacity: .35; } 100% { opacity: 0; transform: translateY(-60px); } }
.hero-type { position: relative; padding: 0 clamp(16px, 5vw, 64px) clamp(90px, 14vh, 150px); max-width: 1400px; }
.hero-kicker { font: 800 .8rem var(--display); font-stretch: 125%; letter-spacing: .5em; text-transform: uppercase; margin-bottom: 18px; opacity: 0; animation: up 1.2s .6s forwards; }
.hero h1 { font: 900 clamp(3.4rem, 12vw, 11rem)/.86 var(--display); font-stretch: 112%; letter-spacing: -.03em; text-transform: uppercase; opacity: 0; animation: up 1.4s .9s forwards; }
.hero h1 em { display: block; font: italic 400 1.02em/.9 var(--ital); text-transform: none; letter-spacing: -.02em; color: #e6b986; }
.hero-scroll { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; color: #fffaf2; text-decoration: none; font: 600 .72rem var(--sans); letter-spacing: .3em; text-transform: uppercase; opacity: 0; animation: up 1s 2s forwards; white-space: nowrap; }
.hero-scroll span { display: inline-block; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }
@keyframes up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* breathing moments */
.breath { min-height: 70vh; display: grid; place-items: center; padding: 15vh 24px; background: var(--night); color: #fffaf2; text-align: center; }
.breath-line { font: 800 clamp(1.8rem, 5vw, 4rem)/1.05 var(--display); font-stretch: 110%; text-transform: uppercase; letter-spacing: -.01em; opacity: 0; transform: translateY(30px); transition: 1.2s cubic-bezier(.2,.7,.2,1); }
.breath-line em { font: italic 400 1.05em var(--ital); text-transform: none; color: #e6b986; }
.breath.in .breath-line { opacity: 1; transform: none; }

/* the journey */
.story { position: relative; height: calc(var(--n, 13) * 100vh); background: var(--night); color: #fffaf2; --heat: 0; --wash: 0; --cream: 0; }
.story-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.story-bgs, .sbg, .story-shade, .story-wash { position: absolute; inset: 0; }
.sbg { background: center / cover no-repeat; opacity: 0; transform: scale(1.12); transition: opacity 1.1s ease, transform 7s ease-out; }
.sbg.on { opacity: 1; transform: scale(1.02); }
.story-shade { background:
  radial-gradient(circle at 70% 50%, rgb(255 120 40 / calc(var(--heat) * .55)), transparent 60%),
  linear-gradient(90deg, rgb(10 6 3 / .82) 0%, rgb(10 6 3 / .5) 45%, rgb(10 6 3 / .3) 100%),
  linear-gradient(0deg, rgb(10 6 3 / .7), transparent 40%); }
.story-wash { background: linear-gradient(180deg, transparent, rgb(120 180 210 / .3), transparent); opacity: var(--wash); transform: translateY(calc((var(--wash) - .5) * 60%)); pointer-events: none; }
.story-wash::after { content: ''; position: absolute; inset: 0; background: #f3e6cf; opacity: var(--cream); }
.story-chapter { position: absolute; top: 88px; left: clamp(16px, 5vw, 64px); display: flex; gap: 14px; align-items: baseline; }
.story-num { font: italic 400 1.4rem var(--ital); color: #e6b986; }
.story-name { font: 800 .8rem var(--display); font-stretch: 125%; letter-spacing: .4em; text-transform: uppercase; }
.story-obj { position: absolute; right: clamp(0px, 6vw, 120px); top: 50%; width: min(58vh, 46vw); height: min(58vh, 46vw); transform: translateY(-50%); overflow: visible; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .45)); }
.j-stencil { font: 900 34px var(--display); font-stretch: 125%; fill: #6b4a2c; letter-spacing: .1em; opacity: .75; }
.j-stencil.sm { font-size: 13px; letter-spacing: .3em; }
.j-steam { animation: steamRise 3.5s ease-in-out infinite; }
.story-copy { position: absolute; left: clamp(16px, 5vw, 64px); bottom: clamp(70px, 12vh, 120px); max-width: min(620px, 52vw); }
.story-copy.in .story-line, .story-copy.in .story-note { animation: up .9s cubic-bezier(.2,.7,.2,1) both; }
.story-copy.in .story-note { animation-delay: .12s; }
.story-line { font: 900 clamp(2.4rem, 6.4vw, 6rem)/.9 var(--display); font-stretch: 108%; letter-spacing: -.025em; text-transform: uppercase; }
.is-roast .story-line { font-size: clamp(4rem, 13vw, 11rem); font-variant-numeric: tabular-nums; color: #ffd8a8; text-shadow: 0 0 40px rgb(255 120 40 / calc(var(--heat) * .8)); }
.story-note { margin-top: 14px; font: italic 400 clamp(1.2rem, 2vw, 1.6rem) var(--ital); color: #f0dcc4; }
.is-roast .story-note { font: 800 .85rem var(--display); font-stretch: 125%; letter-spacing: .4em; text-transform: uppercase; font-style: normal; }
.story-rail { position: absolute; right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.story-rail button { background: none; border: 0; color: #fffaf2; display: flex; gap: 8px; align-items: center; justify-content: flex-end; cursor: pointer; opacity: .4; padding: 2px; font: 600 .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; transition: opacity .3s; }
.story-rail button span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .4s; }
.story-rail li.on button, .story-rail button:hover { opacity: 1; }
.story-rail li.on button span, .story-rail button:hover span { max-width: 90px; }
.story-rail b { font: italic 400 .95rem var(--ital); letter-spacing: 0; }
.story-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgb(255 255 255 / .08); }
.story-progress i { position: absolute; inset: 0; background: #e6b986; transform-origin: top; transform: scaleY(0); }

/* progressive disclosure: “Why? +” */
.why { margin-top: 18px; max-width: 560px; }
.why summary { list-style: none; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; font: 700 .72rem var(--sans); letter-spacing: .24em; text-transform: uppercase; padding: .5em 1em; border: 1px solid currentColor; border-radius: 999px; opacity: .85; }
.why summary::-webkit-details-marker { display: none; }
.why summary span { font-size: 1rem; transition: transform .3s; }
.why[open] summary span { transform: rotate(45deg); }
.why-body { margin-top: 12px; padding: 18px 20px; border-radius: 16px; background: rgb(18 11 7 / .78); backdrop-filter: blur(10px); color: #f2e6d8; display: grid; gap: 8px; font-size: .92rem; max-height: 46vh; overflow-y: auto; }
.why-body h4 { font: 700 1.05rem var(--sans); margin: 6px 0 0; }
.why-body h4 small { font-weight: 500; color: #d7a86e; margin-left: 6px; }
.why-body ul { margin: 0; padding-left: 1.1em; }
.why-fact { font-style: italic; color: #e6c9a6; }
.why-more { color: #e6b986; font-weight: 600; }

/* chapter cards */
.chapter-card { position: relative; min-height: 88vh; display: grid; align-items: end; overflow: hidden; background: var(--night); color: #fffaf2; }
.cc-photo { position: absolute; inset: 0; background: center / cover no-repeat; transform: scale(1.15); transition: transform 2.4s cubic-bezier(.2,.7,.2,1); }
.chapter-card.in .cc-photo { transform: scale(1.02); }
.chapter-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(10 6 3 / .9), rgb(10 6 3 / .2) 60%, rgb(10 6 3 / .35)); }
.cc-type { position: relative; z-index: 1; padding: 0 clamp(16px, 5vw, 64px) clamp(48px, 9vh, 96px); }
.cc-kicker { font: italic 400 1.5rem var(--ital); color: #e6b986; margin-bottom: 6px; }
.cc-title { font: 900 clamp(3rem, 11vw, 9.5rem)/.85 var(--display); font-stretch: 115%; letter-spacing: -.03em; text-transform: uppercase; }
.cc-line { margin-top: 16px; font: 500 1rem var(--sans); letter-spacing: .02em; color: #f0dcc4; max-width: 32em; }
.chapter-card .cc-kicker, .chapter-card .cc-title, .chapter-card .cc-line { opacity: 0; transform: translateY(30px); transition: 1.1s cubic-bezier(.2,.7,.2,1); }
.chapter-card.in .cc-kicker { opacity: 1; transform: none; }
.chapter-card.in .cc-title { opacity: 1; transform: none; transition-delay: .12s; }
.chapter-card.in .cc-line { opacity: 1; transform: none; transition-delay: .28s; }

/* the sound of coffee */
.soundboard { background: var(--night); color: #fffaf2; padding: 18vh clamp(16px, 5vw, 64px); text-align: center; }
.sb-kicker { font: 800 .75rem var(--display); font-stretch: 125%; letter-spacing: .4em; text-transform: uppercase; color: #e6b986; }
.sb-title { margin: 14px 0 48px; font: 900 clamp(2.6rem, 8vw, 6.5rem)/.9 var(--display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.03em; }
.sb-title em { font: italic 400 1.05em var(--ital); text-transform: none; color: #e6b986; }
.sb-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; max-width: 1000px; margin: 0 auto; }
.sb-key { aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(255 255 255 / .25); background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .08), transparent 60%); color: #fffaf2; font: 800 clamp(.8rem, 1.6vw, 1.05rem) var(--display); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: border-color .3s, background .3s, transform .2s; }
.sb-key:hover { border-color: #e6b986; }
.sb-key.hit { animation: hit .9s ease; }
@keyframes hit { 0% { transform: scale(.94); background-color: rgb(230 185 134 / .35); box-shadow: 0 0 0 0 rgb(230 185 134 / .5); } 100% { transform: none; background-color: transparent; box-shadow: 0 0 0 28px rgb(230 185 134 / 0); } }
.sb-note { margin-top: 28px; font: italic 400 1.2rem var(--ital); color: #c9b49b; }

/* roastery: dark, warms up as you heat */
.roastery { position: relative; overflow: hidden; color: #fffaf2; padding: clamp(60px, 10vh, 110px) clamp(16px, 5vw, 64px); --heat: 0;
  background: color-mix(in srgb, #2a0d03 calc(var(--heat) * 100%), var(--night)); transition: background .3s; }
.roast-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgb(255 120 40 / calc(var(--heat) * .5)), transparent 55%); pointer-events: none; }
.roast-scene { position: relative; display: grid; justify-items: center; gap: 18px; max-width: 900px; margin: 0 auto; }
.roast-temp { position: absolute; left: 0; top: 10%; display: block !important; font: 900 clamp(4rem, 13vw, 10rem)/.8 var(--display); font-stretch: 105%; font-variant-numeric: tabular-nums; letter-spacing: -.04em; color: #ffd8a8; text-shadow: 0 0 50px rgb(255 120 40 / calc(var(--heat) * .9)); display: grid; }
.roast-temp > span { display: inline; }
.roast-temp sup { font-size: .3em; letter-spacing: 0; vertical-align: top; margin-left: .08em; position: relative; top: .35em; }
.roast-temp small { display: block; margin-top: 12px; font: 800 .8rem var(--display); font-stretch: 125%; letter-spacing: .4em; text-transform: uppercase; text-shadow: none; color: #f0dcc4; }
.roast-bean-wrap { position: relative; width: min(100%, 380px); }
.burner { font: 800 .9rem var(--display); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; padding: 1.1em 2.2em; background: #e2531f; border-color: #e2531f; color: #fffaf2; touch-action: none; }
.burner.is-held, .burner:active { background: #ff7a2e; box-shadow: 0 0 40px rgb(255 120 40 / .6); }
.btn-ghost { background: transparent; color: inherit; border-color: rgb(255 255 255 / .3); }
.roastery .thermo { width: min(100%, 520px); }
.roastery .thermo-marks { color: #c9b49b; height: 34px; }
.roastery .thermo-marks span:nth-child(2) { top: 14px; }
.roastery .thermo-marks span::before { background: #c9b49b; }
.roast-flash { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; text-align: center; pointer-events: none; opacity: 0; }
.roast-flash b { font: 900 clamp(5rem, 20vw, 16rem)/.8 var(--display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.04em; color: #fffaf2; }
.roast-flash span { margin-top: 10px; font: 800 .9rem var(--display); font-stretch: 125%; letter-spacing: .4em; text-transform: uppercase; color: #ffd8a8; }
.roast-flash.on { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { opacity: 0; transform: scale(1.3); } 12% { opacity: 1; transform: scale(1); } 70% { opacity: .9; } 100% { opacity: 0; transform: scale(.96); } }
.why-dark { margin: 28px auto 0; text-align: center; max-width: 720px; }
.why-dark .why-body { text-align: left; max-height: none; }
.roast-info .fm-track { background: rgb(255 255 255 / .1); }
.roast-info .myth { background: rgb(255 255 255 / .06); }

/* the morning */
.morning { position: relative; min-height: 100vh; display: grid; align-items: center; overflow: hidden; background: var(--night); color: #fffaf2; }
.morning-photo { position: absolute; inset: 0; background: center / cover no-repeat; transform: scale(1.1); transition: transform 6s ease-out; }
.morning.in .morning-photo { transform: scale(1); }
.morning-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(20 12 6 / .75), rgb(20 12 6 / .15) 70%); }
.morning-type { position: relative; padding: 0 clamp(16px, 6vw, 96px); }
.m-small { font: italic 400 clamp(1.4rem, 2.6vw, 2rem) var(--ital); color: #f0dcc4; }
.m-big { margin-top: 10px; font: 900 clamp(2.8rem, 8vw, 7rem)/.88 var(--display); font-stretch: 110%; text-transform: uppercase; letter-spacing: -.03em; }
.m-big em { display: block; font: italic 400 1.05em var(--ital); text-transform: none; color: #ffd8a8; }
.m-again { display: inline-flex; gap: 10px; margin-top: 36px; color: #fffaf2; text-decoration: none; font: 800 .8rem var(--display); font-stretch: 125%; letter-spacing: .3em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 6px; }
.morning .m-small, .morning .m-big, .morning .m-again { opacity: 0; transform: translateY(30px); transition: 1.4s cubic-bezier(.2,.7,.2,1); }
.morning.in .m-small { opacity: 1; transform: none; transition-delay: .6s; }
.morning.in .m-big { opacity: 1; transform: none; transition-delay: 1.4s; }
.morning.in .m-again { opacity: 1; transform: none; transition-delay: 2.4s; }
.credits { margin-top: 8px; font-size: .78rem; }
.credits a { color: inherit; }

@media (max-width: 760px) {
  .story-obj { right: 50%; transform: translate(50%, 0); top: 120px; width: min(82vw, 46vh); height: min(82vw, 46vh); }
  .story-copy { max-width: none; right: 16px; bottom: 44px; }
  .story-rail { display: none; }
  .story-shade { background: radial-gradient(circle at 50% 40%, rgb(255 120 40 / calc(var(--heat) * .55)), transparent 60%), linear-gradient(0deg, rgb(10 6 3 / .9) 0%, rgb(10 6 3 / .5) 50%, rgb(10 6 3 / .35)); }
  .why-body { max-height: 34vh; }
  .sb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roast-temp { position: static; justify-items: center; text-align: center; }
  .roast-temp sup { position: static; }
  .menu-list a { grid-template-columns: 80px 1fr; }
  .nav-btn { padding: .4em .8em; font-size: .7rem; }
}
@media (max-width: 520px) {
  .hud-bar { display: none; }
  .brand { font-size: .82rem; letter-spacing: .08em; }
  .sound-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-right { gap: 6px; }
}

/* barista: behind the bar (dark tokens flip every component inside) */
.bar-dark { --bg: #17100b; --card: #22180f; --ink: #f4e8da; --muted: #b9a48f; --line: #3b2c20; --accent: #e3895a; --accent-ink: #1b120c; --soft: #2e2219; --good: #8cc47f;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 18px 40px rgb(0 0 0 / .35); max-width: none; background: radial-gradient(ellipse at 50% 0%, #2b1d13, #120b07 70%); color: var(--ink); }
.bar-dark > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.bar-dark .section-head h2 { font: 900 clamp(2.6rem, 7vw, 5.5rem)/.9 var(--display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.03em; }
.bar-dark .b-stage { background: radial-gradient(circle at 50% 30%, #3a2a1d, #1a120c); border-color: #3b2c20; min-height: 440px; }
.bar-dark .b-title { font: 900 clamp(1.8rem, 3.5vw, 2.6rem)/1 var(--display); font-stretch: 110%; text-transform: uppercase; letter-spacing: -.02em; }
.b-cue { font: italic 400 clamp(1.4rem, 2.4vw, 1.9rem)/1.2 var(--ital); color: #f0dcc4; }
.b-cue b { font-weight: 400; color: #e6b986; }
.b-cue[hidden] { display: none; }
.b-why { margin-top: 0; }
.b-why[hidden] { display: none; }
.b-why .why-body { max-height: none; background: rgb(255 255 255 / .04); }
.b-move[aria-pressed="true"] { border-color: var(--good); color: var(--good); }
.b-hold:disabled { opacity: .35; cursor: not-allowed; }
.b-drop { animation: bDrop .75s ease-in infinite; }
@keyframes bDrop { to { transform: translateY(var(--fall)); opacity: .3; } }
.b-spray { animation: bSpray .4s ease-out infinite; }
@keyframes bSpray { to { transform: translate(6px, 10px); opacity: 0; } }
.b-reveal-k { font: italic 400 1.4rem var(--ital); color: #e6b986; }
.b-reveal-name { font: 900 clamp(2rem, 4.4vw, 3.4rem)/.92 var(--display) !important; font-stretch: 110%; text-transform: uppercase; letter-spacing: -.02em; }
.b-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin: 8px 0; }
.b-stats div { border-top: 1px solid var(--line); padding-top: 8px; }
.b-stats dt { font: 700 .66rem var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.b-stats dd { margin: 2px 0 0; font: 900 clamp(2rem, 4vw, 3rem)/1 var(--display); font-stretch: 105%; font-variant-numeric: tabular-nums; }
.b-stats small { font: 600 .9rem var(--sans); margin-left: 3px; color: var(--muted); }
.b-taste { font: italic 400 1.35rem/1.25 var(--ital); color: #f0dcc4; }
.b-result .b-stars { font-size: 1.1rem; }
.b-result .b-stars small { font: 500 .78rem var(--sans); color: var(--muted); letter-spacing: 0; margin-left: 8px; }
.bar-dark .b-final { min-height: 420px; }

/* pour lab: the cup is the whole show */
.pourlab { padding: clamp(60px, 9vh, 100px) clamp(16px, 4vw, 48px); max-width: 1180px; margin: 0 auto; display: grid; gap: 18px; justify-items: center; text-align: center; }
.pl-title { font: 900 clamp(2.6rem, 8vw, 6rem)/.88 var(--display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.03em; }
.pl-title em { display: block; font: italic 400 1em var(--ital); text-transform: none; color: var(--accent); letter-spacing: -.01em; }
.pl-hint { margin-top: 10px; color: var(--muted); font-size: 1.02rem; }
.pl-stage { position: relative; width: min(100%, 640px); cursor: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.pl-stage #cupSvg { width: 100%; height: auto; display: block; overflow: visible; }
.pl-table { stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
.pl-pitcher { transition: transform .08s linear; filter: drop-shadow(0 6px 10px rgb(60 30 10 / .2)); pointer-events: none; }
.pl-pitcher.resting { opacity: .9; }
.pl-height { font: 700 13px var(--sans); fill: var(--muted); pointer-events: none; }
.pl-match { min-height: 1.2em; font: 900 clamp(1.8rem, 4.5vw, 3.4rem)/1 var(--display); font-stretch: 110%; text-transform: uppercase; letter-spacing: -.02em; margin-top: -10px; }
.pl-match small { display: block; font: italic 400 1.1rem var(--ital); text-transform: none; color: var(--muted); letter-spacing: 0; margin-bottom: 2px; }
.pourlab > *, .pourlab .readout { grid-area: auto; }
.pourlab .pitchers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.pourlab .pitcher { grid-template-columns: 28px auto; padding: 6px 12px 6px 8px; border-radius: 999px; cursor: pointer; }
.pourlab .pitcher-icon { width: 28px; height: 28px; grid-row: span 2; }
.pourlab .pitcher-name { font-size: .82rem; }
.pourlab .pitcher-ml { font-size: .7rem; }
.pourlab .pitcher[aria-checked="true"] { border-color: var(--accent); background: var(--soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.pl-controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.pl-why { max-width: 620px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; text-align: left; box-shadow: var(--shadow); }
.pl-why .mini-title { margin-bottom: 6px; }
.pl-why p:last-child { font: italic 400 1.2rem/1.35 var(--ital); }
.pl-why.pop { animation: pop .4s ease; }
.pl-numbers { width: min(100%, 520px); text-align: left; }
.pl-numbers summary { color: var(--ink); }
.pl-numbers .why-body { background: var(--card); color: var(--ink); border: 1px solid var(--line); max-height: none; gap: 18px; }
@media (hover: none) { .pl-stage { cursor: auto; } }

/* the world: particles float over everything, never catching clicks */
#world { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.gated #world { z-index: 60; }
main, .hero, .footer { position: relative; }
.card-glass, .layer-card, .sp-card, .map-info, .j-card, .readout, .b-panel, .origin, .drink-card, .varieties li, .process, .anatomy-svg-wrap, .name-ladder, .pl-why { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.section-head h2 { font: 900 clamp(2.2rem, 5.5vw, 4.2rem)/.92 var(--display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.025em; }

/* arrival gate */
.gate { position: fixed; inset: 0; z-index: 55; display: grid; place-content: center; justify-items: center; text-align: center; gap: 14px; padding: 24px;
  background: radial-gradient(ellipse at 50% 60%, rgb(36 22 13 / .96), rgb(8 5 3 / .99) 70%); color: #fffaf2; transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.gate.open { opacity: 0; transform: scale(1.06); pointer-events: none; }
.gate[hidden] { display: none; }
.gate-k { font: 500 .78rem var(--mono); letter-spacing: .3em; text-transform: uppercase; color: #e6b986; opacity: 0; animation: up 1.2s .3s forwards; }
.gate-title { font: 900 clamp(2.6rem, 10.5vw, 9rem)/.85 var(--display); font-stretch: 112%; letter-spacing: -.03em; text-transform: uppercase; opacity: 0; animation: up 1.6s .6s forwards; }
.gate-line { font: italic 400 clamp(1.2rem, 2.4vw, 1.7rem) var(--ital); color: #f0dcc4; opacity: 0; animation: up 1.2s 1.2s forwards; }
.gate-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; opacity: 0; animation: up 1s 1.7s forwards; }
.gate-btn { font: 800 .8rem var(--display); font-stretch: 125%; letter-spacing: .22em; text-transform: uppercase; padding: 1.1em 1.8em; border-radius: 999px; border: 1px solid rgb(255 250 242 / .4); background: transparent; color: #fffaf2; cursor: pointer; transition: background .3s, border-color .3s, transform .2s; }
.gate-btn:hover { border-color: #e6b986; }
.gate-btn.solid { background: #e6b986; border-color: #e6b986; color: #1b120c; }
.gate-btn.solid:hover { background: #f0c998; }
.gate-tip { margin-top: 18px; font: 400 .72rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #8f7c69; opacity: 0; animation: up 1s 2.4s forwards; }
/* nothing in the hero starts until you’re in */
.gated .hero-photo, .gated .hero-kicker, .gated .hero h1, .gated .hero-scroll { animation-play-state: paused; }

/* where you are on the trip */
.hud { position: fixed; left: clamp(12px, 3vw, 28px); bottom: 16px; z-index: 38; display: flex; align-items: center; gap: 10px; font: 500 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 250 242 / .75); pointer-events: none;
  padding: 7px 12px; border-radius: 999px; background: rgb(12 7 4 / .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgb(255 240 220 / .08); }
.hud-place { color: #e6b986; min-width: 9ch; }
.hud-bar { width: 80px; height: 2px; background: rgb(255 255 255 / .15); border-radius: 2px; overflow: hidden; }
.hud-bar i { display: block; height: 100%; background: #e6b986; transform-origin: left; transform: scaleX(0); }
.gated .hud, body.menu-open .hud { opacity: 0; }
.for-touch { display: none; }
@media (hover: none) { .for-mouse { display: none; } .for-touch { display: inline; } }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .map-layout, .b-bar { grid-template-columns: minmax(0, 1fr); }
  .b-stage { position: static; }
  /* pitchers sit right above the cup so you can watch it fill while you hold one */
  .lab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pitchers" "stage" "readout"; }
  .pitchers { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .pitcher { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 8px 4px; }
  .pitcher-icon { grid-row: auto; width: 32px; height: 32px; }
  .pitcher-name { font-size: .74rem; }
  .pitcher-ml { font-size: .68rem; }
  .cup-wrap { width: min(100%, 340px); }
}
@media (max-width: 760px) {
  .pitchers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .anatomy, .grind, .wheel, .b-bar, .map-layout, .roast-levels { grid-template-columns: minmax(0, 1fr); }
  .sp-card { grid-template-columns: 1fr; }
  .sp-stats { grid-template-columns: 1fr; }
  .piles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-stage { position: sticky; top: 52px; z-index: 5; min-height: 0; padding: 8px; box-shadow: var(--shadow); }
  .b-scene, .b-top, .b-gauge { max-height: 190px; width: auto; max-width: 100%; margin: 0 auto; }
  .b-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .b-steps li { flex: none; }
  .b-title { font-size: 1.6rem; }
}