/* One designed theme: a dark roaster's table. Bean colours are read from these tokens by js/story.js. */
:root {
  --bg: #130f0c;
  --card: rgba(26, 20, 16, 0.8);
  --ink: #f3eadf;
  --ink2: #b9aa9b;
  --muted: #86776a;
  --line: #2f251e;
  --grid: #2a211b;
  /* beans */
  --bean: #6b4a38;
  --bean-faint: #2f231c;
  --raw: #8aa39a;
  --accent: #e5853f;
  --ramp-1: #6e4023;
  --ramp-2: #8f5229;
  --ramp-3: #b56a32;
  --ramp-4: #dc8540;
  --ramp-5: #f6b27c;
  --matcha-1: #5c7a30;
  --matcha-2: #7c9e3b;
  --matcha-3: #a2c24f;
  --matcha-4: #d0e384;
  /* chart marks */
  --rival: #b9aa9b;
  --rival-dim: #6a5d53;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; }
b { font-weight: 600; }

/* ---------- scrolly: a full-screen stage with the text riding over its left side */
.scrolly { display: grid; position: relative; }
.graphic {
  grid-area: 1 / 1;
  position: sticky; top: 0;
  align-self: start;
  width: 100%;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
#stage, #overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#overlay { pointer-events: none; overflow: visible; }
#overlay .hit { pointer-events: all; cursor: default; }

.steps {
  grid-area: 1 / 1;
  position: relative; z-index: 2;
  width: min(400px, 33vw);
  margin-left: max(28px, 5vw);
  pointer-events: none;
}
.step {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0.16;
  transition: opacity 450ms ease;
}
.step.is-active { opacity: 1; }
.step .card { pointer-events: auto; }
.step p { margin: 0 0 12px; font-size: 18px; line-height: 1.5; }
.step.hero { justify-content: flex-start; padding-top: clamp(64px, 12vh, 140px); }
.step.hero .card { width: min(900px, 68vw); }
.kicker {
  font: 500 12px/1.4 var(--mono) !important;
  letter-spacing: 0.04em;
  color: var(--ink2);
  text-transform: uppercase;
}
h1 {
  font: 600 clamp(40px, 5.7vw, 96px)/0.98 var(--sans);
  letter-spacing: -0.04em;
  margin: 14px 0 22px;
  text-wrap: balance;
}
.lede { max-width: 400px; color: var(--ink2); }
.big {
  font: 600 clamp(60px, 7.4vw, 124px)/0.92 var(--sans) !important;
  letter-spacing: -0.05em;
  margin: 0 0 18px -0.04em !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.muted { color: var(--ink2); font-size: 15px !important; }
.hint { font: 500 13px/1 var(--mono) !important; color: var(--muted); margin-top: 28px !important; }

/* the query behind the current step, as a caption */
.query {
  position: absolute; right: 28px; bottom: 20px; z-index: 3;
  margin: 0; max-width: 62%;
  font: 400 11px/1.5 var(--mono);
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 250ms ease;
}
.query b { font-weight: 500; color: var(--ink2); }
.graphic.no-query .query { opacity: 0; }

/* chart key inside a text card */
.key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px !important; font: 400 12px/1.4 var(--mono) !important; color: var(--ink2); }
.key span { white-space: nowrap; }
.k { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
.k-ca { background: var(--accent); }
.k-w1 { width: 9px; height: 9px; border: 1.5px solid var(--accent); }
.k-half { width: 8px; height: 8px; background: var(--rival); }
.k-rest { width: 6px; height: 6px; background: var(--rival-dim); vertical-align: 1px; }

/* svg overlay */
#overlay text { font-family: var(--mono); fill: var(--ink2); font-size: 11px; }
#overlay .strong { fill: var(--ink); font-weight: 500; }
#overlay .name { font-family: var(--sans); font-size: 13px; fill: var(--ink2); }
#overlay .name.focal { fill: var(--ink); font-weight: 600; }
#overlay .num { font-family: var(--sans); font-weight: 600; fill: var(--ink); letter-spacing: -0.02em; }
#overlay .num.focal { fill: var(--ramp-5); }
#overlay .gridline { stroke: var(--grid); stroke-width: 1; fill: none; }
#overlay .baseline { stroke: var(--line); stroke-width: 1; }
#overlay .leader { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; fill: none; }
#overlay .outline { stroke: var(--muted); stroke-width: 1.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#overlay .outline.soft { stroke: var(--line); }
#overlay .stain { fill: none; stroke: #c9a27f; stroke-linecap: round; }

/* mini bars inside a step */
.minibars { display: grid; grid-template-columns: max-content 1fr max-content; gap: 7px 12px; align-items: center; margin-top: 16px; font-size: 14px; }
.minibars .lab { color: var(--ink2); }
.minibars .lab.focal { color: var(--ink); font-weight: 600; }
.minibars .track { height: 8px; position: relative; }
.minibars .bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--bean); width: 0; transition: width 800ms cubic-bezier(.2,.7,.2,1); }
.minibars .bar.focal { background: var(--accent); }
.minibars .val { font: 500 13px/1 var(--mono); color: var(--ink); }

/* tooltip */
.tip {
  position: absolute; z-index: 4; pointer-events: none;
  padding: 9px 11px; max-width: 290px;
  font: 400 12px/1.5 var(--mono); color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.tip .dim { color: var(--ink2); }
.tip .t { font-family: var(--sans); font-weight: 600; font-size: 13px; margin-bottom: 2px; }

.nogl { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--ink2); }

/* ---------- table view */
.numbers { border-top: 1px solid var(--line); padding: 80px 0 110px; position: relative; z-index: 3; background: var(--bg); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.numbers h2 { font: 600 40px/1.05 var(--sans); letter-spacing: -0.03em; margin: 0 0 10px; }
.numbers h3 { font: 600 17px/1.3 var(--sans); margin: 44px 0 12px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; white-space: normal; min-width: 180px; }
th { font: 500 12px/1.3 var(--mono); color: var(--ink2); }
td { font-variant-numeric: tabular-nums; color: var(--ink2); }
td.sig { font-weight: 600; color: var(--ink); }
tr.focal td { color: var(--ink); }
tr.focal td:first-child { font-weight: 600; }
.method { padding-left: 18px; color: var(--ink2); font-size: 15px; }
.method li { margin-bottom: 8px; }

/* ---------- phones and tablets: beans on top, text cards over the lower part */
@media (max-width: 900px) {
  .steps { width: auto; margin: 0 14px; }
  .step { min-height: 100svh; justify-content: flex-end; padding-bottom: 5svh; opacity: 1; }
  .step.hero { justify-content: flex-end; padding-top: 0; }
  .step.hero .card { width: auto; }
  .step .card {
    background: var(--card);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px 16px 6px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  }
  .step p { font-size: 16px; }
  h1 { font-size: 34px; margin: 8px 0 12px; }
  .big { font-size: 52px !important; margin-bottom: 10px !important; }
  .query, .key { display: none; }
  .numbers h2 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .step, .query, .minibars .bar { transition: none; }
}