/* ============================================================
   The Chilli Scale — light theme, one morphing pod.

   Scroll drives one continuous position along the scale, and that position reshapes
   a single pod hanging from a fixed stem. The readout sits beside it and swaps text
   only once a chilli has settled.

   Note what CSS does *not* own here: the pod's shape is SVG path data regenerated
   per frame by pod.js, so there is no transform, no transition and no keyframe on
   it. CSS owns the layout the pod hangs in, and the resting look of everything else.
   ============================================================ */

:root {
  --paper:     #faf7f2;
  --paper-2:   #f2ece3;
  --card:      #ffffff;
  --ink:       #1b1613;
  --ink-dim:   #6a5f57;
  --ink-faint: #9c9089;
  --line:      rgba(27, 22, 19, 0.12);

  /* Rewritten by main.js as you scroll: --heat is the vivid accent, --heat-ink the
     darkened variant that stays legible as text on paper. */
  --heat:      #4c9a3f;
  --heat-ink:  #3a7a30;
  --heat-soft: rgba(76, 154, 63, 0.14);

  --shell: clamp(1.25rem, 5vw, 5rem);
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter,
          Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient wash — the paper warms as the heat climbs. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 70% at 50% 112%, var(--heat-soft) 0%, transparent 66%),
    linear-gradient(180deg, transparent 55%, var(--paper-2) 100%);
  transition: background 700ms var(--ease);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0 0 8px 0;
  font-size: 0.9rem;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--heat-ink);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------- top progress hairline ---------- */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 40;
  background: rgba(27, 22, 19, 0.07);
}
.progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--heat);
  transition: background 600ms var(--ease);
}

/* ---------- intro ---------- */

.intro {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--shell) 4rem;
  max-width: 62rem;
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 1.5rem;
  font-family: var(--mono);
  font-size: clamp(0.65rem, 1.4vw, 0.78rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--heat-ink);
  transition: color 600ms var(--ease);
}

.intro h1 {
  margin: 0 0 1.75rem;
  font-size: clamp(3rem, 12vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 700;
}

.lede {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1.02rem, 2.1vw, 1.35rem);
  line-height: 1.6;
  color: var(--ink-dim);
}

.scroll-cue {
  margin: 4rem 0 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.scroll-cue span { display: inline-block; animation: drift 2.4s var(--ease) infinite; }
.scroll-cue span::after { content: " ↓"; }

@keyframes drift {
  0%, 100% { transform: translateY(0);   opacity: 0.5; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* ---------- what a Scoville unit is ---------- */

.explainer {
  position: relative;
  z-index: 1;
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(3rem, 10vh, 7rem) var(--shell) clamp(4rem, 12vh, 8rem);
  border-top: 1px solid var(--line);
}
.explainer h2 {
  margin: 0 0 clamp(1.75rem, 4vh, 2.75rem);
  font-size: clamp(1.8rem, 5.5vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

/* The definition is the point of the section, so it is set as a statement rather
   than a paragraph — hanging off a heat-coloured rule, at reading size. */
.definition {
  border-left: 3px solid var(--heat);
  padding-left: clamp(1rem, 3vw, 1.75rem);
  margin-bottom: 1.5rem;
  transition: border-color 600ms var(--ease);
}
.def-line {
  margin: 0;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: -0.015em;
}
.def-line b,
.def-out b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--heat-ink);
  transition: color 600ms var(--ease);
}
.def-out {
  margin: 0.6rem 0 0;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  color: var(--ink-dim);
}

.lede-sm {
  margin: 0 0 clamp(2rem, 5vh, 3rem);
  max-width: 56ch;
  font-size: clamp(0.92rem, 1.5vw, 1.08rem);
  line-height: 1.65;
  color: var(--ink-dim);
}

.explainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.explainer-grid h3 {
  margin: 0 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--heat-ink);
  transition: color 600ms var(--ease);
}
.explainer-grid p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-dim);
}

.ceiling {
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.5rem);
  background: var(--heat-soft);
  border-radius: 12px;
  font-size: clamp(0.88rem, 1.5vw, 1rem);
  line-height: 1.6;
  max-width: 62ch;
  transition: background 700ms var(--ease);
}
.ceiling b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--heat-ink);
  transition: color 600ms var(--ease);
}

.sources {
  margin: 1.75rem 0 0;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 74ch;
}

/* ---------- the pinned stage ---------- */

/* Two columns, not two rows: the filmstrip takes the left, the readout sits beside
   it on the right. Nothing is stacked vertically, so the hero pod gets the full
   height of the viewport instead of half of it. */
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  z-index: 1;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  padding: 0 var(--shell);
}

/* Pulled up so the first chilli is centred the moment the stage pins; the tail
   padding keeps it pinned long enough to read the last one. */
#triggers {
  position: relative;
  z-index: 0;
  margin-top: -100vh;
  margin-top: -100svh;
  padding-bottom: 55svh;
}
/* Taller than the transition needs, because main.js spends the first and last fifth
   of each segment parked on the chilli rather than morphing (see HOLD). The middle
   60% is the actual morph, which lands at roughly the 72svh the whole segment used
   to be — so the pods change at the old speed and then hold still to be read. */
.trigger {
  height: 120vh;
  height: 120svh;
}

/* ---------- the pod ----------

   No card, no frame, no crop. The pod hangs in the open on the paper, because the
   whole point is that it is one continuous object changing shape — a box around it
   would read as a slide being swapped. The SVG's own viewBox does the sizing, so
   nothing here needs a per-frame write. */

.pod {
  position: relative;
  width: 100%;
  height: var(--pod-h, 60vh);
  display: flex;
  justify-content: center;
}

/* The pod is anchored by its stem, which lives at the top of the viewBox. Aligning
   the SVG box to the top of the column is what keeps that anchor pinned on screen
   while the body below it grows and shrinks. */
.pod-svg {
  height: 100%;
  width: 100%;
  display: block;
  overflow: visible;
  /* Offset toward the light, not straight down. A pod hanging from a stem in open
     air has nothing under it to cast onto; a centred drop shadow read as a ground
     shadow and quietly contradicted the whole staging. */
  filter: drop-shadow(7px 9px 16px rgba(27, 22, 19, 0.13));
}

.pod-body,
.pod-calyx,
.pod-stem { shape-rendering: geometricPrecision; }

/* ---------- readout ---------- */

/* Beside the strip the readout is one narrow column: head above side, not two
   columns side by side. Extra right padding keeps it clear of the fixed heat rail. */
.readout {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.4vh, 1rem);
  padding-right: 1.6rem;
  max-height: 100svh;
  transition: opacity 260ms var(--ease);
}

.head { min-width: 0; }

.rank {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.6rem;
}
.rank b { color: var(--heat-ink); font-weight: 600; transition: color 600ms var(--ease); }

.name {
  margin: 0 0 0.25rem;
  font-size: clamp(1.75rem, 3.2vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.alt     { margin: 0 0 0.15rem; color: var(--ink-dim); font-size: clamp(0.82rem, 1.6vw, 0.98rem); }
.species { margin: 0 0 1rem; font-style: italic; color: var(--ink-faint); font-size: clamp(0.78rem, 1.5vw, 0.92rem); }

.shu-row {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.shu {
  font-family: var(--mono);
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--heat-ink);
  transition: color 600ms var(--ease);
}
.shu small { font-size: 0.5em; letter-spacing: 0.16em; color: var(--ink-faint); margin-left: 0.4em; }
.range {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.meter {
  position: relative;
  height: 7px;
  border-radius: 99px;
  background: rgba(27, 22, 19, 0.09);
  overflow: hidden;
}
.meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #4c9a3f, #c9b52c 34%, #e08a1e 58%, #cf2b1c 82%, var(--heat));
  transition: width 760ms var(--ease);
}

.tolerance {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.tier {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 99px;
  border: 1px solid var(--heat-ink);
  color: var(--heat-ink);
  white-space: nowrap;
  transition: color 600ms var(--ease), border-color 600ms var(--ease);
}
.tier.is-danger { background: var(--heat-ink); color: #fff; border-color: transparent; font-weight: 600; }
.multiplier { font-family: var(--mono); font-size: 0.73rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.verdict { margin: 0.6rem 0 0; font-size: clamp(0.82rem, 1.1vw, 0.95rem); line-height: 1.5; }

.props {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.45rem clamp(0.9rem, 2.4vw, 1.6rem);
  margin: 0;
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  line-height: 1.5;
}
.props dt {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.25em;
}
.props dd { margin: 0; color: var(--ink-dim); }
.props dd.note { color: var(--ink); }

.credit {
  margin: 0.9rem 0 0;
  font-size: 0.66rem;
  color: var(--ink-faint);
}

/* The photograph, demoted to a reference. Small on purpose — it is here so you can
   check the drawing against the real pod, not to compete with it. */
.ref {
  margin: 1rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.ref img {
  width: 62px;
  height: 62px;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--paper-2);
}
.ref figcaption {
  font-size: 0.62rem;
  line-height: 1.4;
  color: var(--ink-faint);
}

/* ---------- heat rail ---------- */

.rail {
  position: fixed;
  right: clamp(0.6rem, 2vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.rail.is-visible { opacity: 1; }

.rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.42rem; }
.rail-cap {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  writing-mode: vertical-rl;
}
.rail-cap--hot { color: #c3281a; }

.tick { appearance: none; border: 0; background: none; padding: 4px 2px; cursor: pointer; display: block; line-height: 0; }
.tick i {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: rgba(27, 22, 19, 0.22);
  transition: width 320ms var(--ease), background 320ms var(--ease);
}
.tick:hover i { width: 24px; background: rgba(27, 22, 19, 0.5); }
.tick.is-active i { width: 30px; height: 3px; background: var(--heat); }

/* ---------- the contact sheet ---------- */

.sheet {
  position: relative;
  z-index: 1;
  padding: clamp(5rem, 14vh, 9rem) var(--shell) clamp(3rem, 8vh, 5rem);
  max-width: 78rem;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.sheet h2 {
  margin: 0 0 1.2rem;
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  letter-spacing: -0.035em;
}
.sheet .lede-sm { margin-bottom: clamp(2.5rem, 6vh, 4rem); }

.sheet-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem) clamp(0.5rem, 1.5vw, 1.25rem);
}

.sheet-cell {
  appearance: none;
  width: 100%;
  border: 0;
  background: none;
  padding: 0.75rem 0.4rem 0.9rem;
  border-radius: 10px;
  cursor: pointer;
  display: block;
  text-align: center;
  font: inherit;
  color: inherit;
  transition: background 260ms var(--ease), transform 260ms var(--ease);
}
.sheet-cell:hover,
.sheet-cell:focus-visible { background: var(--heat-soft); transform: translateY(-3px); }

/* The pods are drawn at a common scale, so the box has to be a common height too —
   a per-cell height would undo the size comparison the sheet exists to make. */
.sheet-pod { display: block; height: clamp(120px, 17vh, 190px); }
.sheet-pod .pod-svg { height: 100%; width: 100%; }

.sheet-name {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
}
.sheet-shu {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
}

/* ---------- outro ---------- */

#outro {
  position: relative;
  z-index: 1;
  padding: clamp(5rem, 14vh, 9rem) var(--shell) 6rem;
  max-width: 68rem;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
#outro h2 { margin: 0 0 3rem; font-size: clamp(1.9rem, 6vw, 3.4rem); letter-spacing: -0.035em; }
.outro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
#outro h3 { margin: 0 0 0.7rem; font-size: 1.02rem; color: var(--heat-ink); transition: color 600ms var(--ease); }
#outro p { margin: 0; color: var(--ink-dim); line-height: 1.65; font-size: 0.94rem; }
.fineprint {
  margin-top: 3.5rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem !important;
  color: var(--ink-faint) !important;
  max-width: 70ch;
}

/* ---------- responsive ---------- */

/* Side by side needs width to breathe. Below this the stage goes back to the
   original two-row split: pod on top, readout beneath it. */
@media (max-width: 1000px) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0;
    padding: 0;
  }
  .pod { padding: clamp(1rem, 4vh, 2.5rem) 0 clamp(0.5rem, 2vh, 1.25rem); }

  .readout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1rem, 4vw, 3.5rem);
    align-items: start;
    width: min(76rem, 100%);
    max-height: none;
    margin: 0 auto;
    padding: 0 calc(var(--shell) + 1.6rem) clamp(1rem, 4vh, 2.5rem) var(--shell);
  }

  .name    { font-size: clamp(1.9rem, 5vw, 3.6rem); }
  .shu     { font-size: clamp(1.25rem, 3.2vw, 2rem); }
  .verdict { font-size: clamp(0.85rem, 1.7vw, 1rem); }
  .props   { font-size: clamp(0.8rem, 1.6vw, 0.94rem); }
}

/* The readout keeps its two inner columns right down to the stacked breakpoint:
   collapsing them here would make it tall enough to squeeze the filmstrip out of
   the top of the pinned stage. */
@media (max-width: 900px) {
  .readout { gap: 0.9rem clamp(1rem, 3vw, 2rem); }
  .rail { right: 0.4rem; gap: 0.4rem; }
  .rail ol { gap: 0.3rem; }
  .tick { padding: 3px 2px; }
  .tick i { width: 10px; }
  .tick.is-active i { width: 18px; }
  .rail-cap { display: none; }
}

/* ---------- stacked mode (phones) ----------
   A pinned pod plus a full readout does not fit a phone screen, so below 700px the
   chillies become ordinary sections: pod, then text, one after another. Each section
   renders its own static pod — nothing morphs, because nothing is between two
   chillies. main.js switches to geometry-per-section and adds body.is-stacked. */

@media (max-width: 700px) {
  .stage       { position: static; height: auto; display: block; overflow: visible; }
  #pod         { display: none; }
  #triggers    { display: none; }

  .readout {
    display: block;
    width: auto;
    padding: 0;
    transition: none;
  }

  .section {
    padding: 2.5rem calc(var(--shell) + 1.2rem) 3rem var(--shell);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 480ms var(--ease), transform 620ms var(--ease);
  }
  .section.is-seen { opacity: 1; transform: none; }

  .pod--section {
    width: 100%;
    height: clamp(200px, 34svh, 300px);
    margin: 0 0 1.4rem;
  }
  .name { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .verdict { font-size: 0.88rem; }
  .props { grid-template-columns: 1fr; gap: 0.08rem 0; font-size: 0.86rem; }
  .props dt { padding-top: 0.5rem; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .readout,
  .section,
  .meter i,
  body::before,
  .tick i {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .section { transform: none; }
  .scroll-cue span { animation: none; }
}