/* ============ Who Is Heating the Planet? — broadsheet editorial ============ */

:root {
  --paper: #f7f1e5;
  --paper-deep: #efe6d2;
  --ink: #191410;
  --ink-soft: #4a4238;
  --rule: #d8ccb4;
  --perception: #a84a10;   /* ember — the story we tell */
  --perception-soft: #e6b596;
  --reality: #1e5f4a;      /* forest — what is measured */
  --reality-soft: #a3c4b4;
  --gold: #a87b2d;
  --dark: #0f1410;
  --dark-paper: #efe6d2;
  --serif: "Newsreader", Georgia, serif;
  --display: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* stop mobile Chrome/Safari from inflating font sizes (breaks the centered
     masthead: the boosted title overflows and clips) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.62;
  /* paper grain */
  background-image:
    radial-gradient(ellipse at top, rgba(255,255,255,.5), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

a { color: var(--reality); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- masthead ---------- */

.masthead {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4rem 1.5rem 2rem;
  border-bottom: 3px double var(--rule);
}

.kicker {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}

.masthead h1 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 600;
  font-size: clamp(2.5rem, 7.5vw, 5.2rem);
  line-height: 1.02;
  margin: 0 0 2rem;
  letter-spacing: -.01em;
}

.masthead h1 em { font-style: italic; color: var(--perception); }
.masthead h1 em.real { color: var(--reality); }
.masthead h1 .vs {
  font-family: var(--mono);
  font-size: .35em;
  vertical-align: .55em;
  font-style: normal;
  color: var(--ink-soft);
}

.standfirst {
  max-width: 38em;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 300;
  margin: 0 auto 1.4rem;
}

.byline {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--ink-soft);
  max-width: 46em;
  margin: 0 auto 2rem;
}

.legend-key { display: flex; gap: 1rem; justify-content: center; margin-bottom: 3rem; }
.key {
  font-family: var(--mono);
  font-size: .8rem;
  padding: .3rem .9rem;
  border-radius: 2rem;
  color: var(--paper);
}
.key--p { background: var(--perception); }
.key--r { background: var(--reality); }

.scroll-cue {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink-soft);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(8px); } }

/* ---------- prose sections ---------- */

.prose {
  max-width: 42em;
  margin: 0 auto;
  padding: 5rem 1.5rem 1rem;
}

.prose h2 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 720;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.08;
  margin: 0 0 1.2rem;
}

.myth-no {
  display: block;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--perception);
  margin-bottom: .8rem;
}
.myth-no::after {
  content: "";
  display: block;
  width: 3.2rem;
  border-bottom: 3px solid var(--perception);
  margin-top: .5rem;
}

/* ---------- scrolly ---------- */

.scrolly {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
  padding: clamp(1.25rem, 6vh, 2.5rem) 0 2.75rem;
  box-sizing: border-box;
  grid-column: 1;
  grid-row: 1;
}

.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; }

.steps { grid-column: 2; grid-row: 1; }

.step {
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: .28;
  transition: opacity .4s;
}
.step.active { opacity: 1; }

.step p {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  box-shadow: 0 2px 14px rgba(25,20,16,.07);
  padding: 1.3rem 1.5rem;
  margin: 0;
  font-size: 1.08rem;
}

.step-kicker {
  font-family: var(--mono) !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-size: .78rem !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 0 .5rem 0 !important;
}

/* ---------- solo charts & cards ---------- */

.chart-solo {
  max-width: 62em;
  margin: 2rem auto 3rem;
  padding: 0 1.5rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.2rem;
  max-width: 62em;
  margin: 2.5rem auto 4rem;
  padding: 0 1.5rem;
}

.belief-card {
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  padding: 1.4rem 1.5rem 1.2rem;
  position: relative;
}
.belief-card::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 4px;
  background: var(--perception);
}
.belief-card.card--fact::before { background: var(--reality); }

.belief-card .big {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  margin: 0 0 .5rem;
}
.belief-card.card--myth .big { color: var(--perception); }
.belief-card.card--fact .big { color: var(--reality); }
.belief-card p { margin: 0; font-size: 1rem; }
.belief-card .src {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-soft);
  margin-top: .8rem;
  display: block;
}

/* ---------- guess widget ---------- */

#guess-widget {
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  padding: 1.6rem 1.8rem;
  margin: 2rem 0 1rem;
}
#guess-widget .gw-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
#guess-widget input[type=range] {
  flex: 1;
  accent-color: var(--perception);
  height: 2rem;
}
#guess-widget .gw-value {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.4rem;
  min-width: 3.2ch;
  text-align: right;
  color: var(--perception);
}
#guess-widget button {
  font-family: var(--mono);
  font-size: .85rem;
  letter-spacing: .08em;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: .7rem 1.3rem;
  cursor: pointer;
}
#guess-widget button:hover { background: var(--perception); }
#guess-widget .gw-result { margin-top: 1rem; font-size: 1.05rem; display: none; }
#guess-widget.revealed .gw-result { display: block; }

/* ---------- dark section ---------- */

.dark {
  background: var(--dark);
  color: var(--dark-paper);
  margin-top: 5rem;
  padding: 4rem 0 5rem;
}
.prose--dark { color: var(--dark-paper); }
.prose--dark h2 { color: var(--dark-paper); }
.chart--dark {
  max-width: 62em;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

/* ---------- controls, tooltip, chart text ---------- */

.chart-toggle {
  display: inline-flex;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: .8rem;
  margin-bottom: 1rem;
}
.chart-toggle button {
  font: inherit;
  border: none;
  background: none;
  color: var(--ink);
  padding: .5rem 1.1rem;
  cursor: pointer;
}
.chart-toggle button.on { background: var(--ink); color: var(--paper); }

.tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: .74rem;
  padding: .5rem .7rem;
  max-width: 240px;
  opacity: 0;
  transition: opacity .15s;
  z-index: 50;
}

svg text { font-family: var(--mono); fill: var(--ink); }
svg .axis text { font-size: .68rem; fill: var(--ink-soft); }
svg .axis line, svg .axis path { stroke: var(--rule); }
svg .anno { font-size: .7rem; }
svg .chart-title { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }

.dark svg text { fill: var(--dark-paper); }
.dark svg .axis text { fill: #9a8f7d; }
.dark svg .axis line, .dark svg .axis path { stroke: #3a322a; }

/* ---------- close & footer ---------- */

.close-list li { margin-bottom: 1rem; }
.fin {
  font-family: var(--display);
  font-weight: 550;
  font-size: 1.35rem;
  line-height: 1.45;
  border-top: 3px double var(--rule);
  padding-top: 1.6rem;
  margin-top: 2.4rem;
}
.essay-trail {
  margin-top: 2rem;
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 1.7;
}
.essay-trail p { margin: 0; }
.essay-trail a { color: var(--ink-soft); text-underline-offset: 3px; }
.essay-trail a:hover { color: var(--ink); }
.essay-trail--before-sources {
  margin: 0 0 1.25rem;
  padding: 0;
  max-width: none;
}

.methodology {
  border-top: 3px double var(--rule);
  margin-top: 5rem;
  padding: 2.5rem 1.5rem 4rem;
  max-width: 46em;
  margin-left: auto;
  margin-right: auto;
  font-size: .88rem;
  color: var(--ink-soft);
}
.methodology h3 { font-family: var(--display); color: var(--ink); }
#sources-list { font-family: var(--mono); font-size: .74rem; line-height: 2; }
.series-nav {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: .5rem 0 1.5rem;
}
.series-nav a { color: var(--ink); text-decoration: none; }
.series-nav a:hover { text-decoration: underline; }
.series-nav .series-here { color: var(--ink-soft); font-style: italic; }

/* ---------- mobile ---------- */

@media (max-width: 820px) {
  .scrolly { grid-template-columns: 1fr; }
  .sticky { position: sticky; top: 0; height: auto; align-self: start; grid-column: 1;
            z-index: 1; background: var(--paper); align-items: flex-start;
            padding: .5rem 0 1.25rem; }
  .scrolly .sticky .grid-mount {
    width: min(360px, 78vw, calc((100vh - 14rem) * 480 / 520), calc((100dvh - 14rem) * 480 / 520));
  }
  #stage3b .sticky {
    align-items: center;
    padding: 1.25rem 0 2rem;
  }
  #stage3b .grid-mount {
    width: min(180px, 44vw);
  }
  #stage3b .grid-caption {
    margin-top: -4.5rem;
  }
  .steps { grid-column: 1; }
  .step { min-height: 70vh; }
  .step p { font-size: 1rem; }
}

/* very narrow screens (small phones, accessibility zoom): let the title shrink
   below its desktop minimum so it never overflows the viewport */
@media (max-width: 480px) {
  .masthead h1 { font-size: clamp(1.6rem, 11.5vw, 2.5rem); }
}

/* back link to the Notes & Tones home (added when folded into the blog) */
.site-back {
  font-family: "IBM Plex Mono", monospace;
  font-size: .8rem;
  letter-spacing: .04em;
  padding: .9rem clamp(1.2rem, 5vw, 2.4rem);
  border-bottom: 1px solid #d8ccb4;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .3rem 1.5rem;
}
.site-back a { color: #1e5f4a; text-decoration: none; }
.site-back a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============ The Climate Scale: scale-specific additions ============ */

/* sticky grid mount shared visual space for each stage.
   The svg viewBox is 480×520: the grid fills the top 480×480 and an optional
   row of person figures sits in the band below. Reserve enough below the mount
   for multi-line captions (stage 3b is three lines) plus sticky padding, using
   dvh so mobile browser chrome does not shove the caption under the fold. */
.scrolly .sticky .grid-mount {
  position: relative;
  width: min(480px, 88vw, calc((100vh - 15rem) * 480 / 520), calc((100dvh - 15rem) * 480 / 520));
  aspect-ratio: 480 / 520;
  height: auto;
  margin: 0 auto;
  display: block;
  flex-shrink: 0;
}
.scrolly .sticky .grid-mount svg,
.scrolly .sticky .grid-mount canvas.grid-dust {
  display: block;
  width: 100%;
  height: auto;
}

/* BEYOND / share: honest panel instead of a freezing dust field. */
.grid-beyond {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.7rem;
  padding: 1.4rem 1.2rem;
  box-sizing: border-box;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  color: var(--ink);
}
.grid-beyond-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.grid-beyond-count {
  font-family: var(--display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 600;
  font-size: clamp(1.55rem, 4.2vw, 2.35rem);
  line-height: 1.12;
  color: var(--reality);
  margin: 0;
}
.grid-beyond-qty {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.35;
  margin: 0;
  max-width: 22rem;
}
.grid-beyond-caveat {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0.35rem 0 0;
  max-width: 24rem;
}
.grid-beyond--fleet {
  background: linear-gradient(
    to bottom,
    rgba(246, 241, 231, 0.88) 0%,
    rgba(246, 241, 231, 0.25) 28%,
    rgba(246, 241, 231, 0) 55%
  );
  border: none;
  justify-content: flex-start;
  padding-top: 0.85rem;
  pointer-events: none;
}
.grid-beyond--fleet .grid-beyond-count {
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.25rem, 3.5vw, 1.85rem);
  text-shadow: 0 1px 0 rgba(246, 241, 231, 0.9);
}
.grid-beyond--fleet .grid-beyond-kicker,
.grid-beyond--fleet .grid-beyond-qty,
.grid-beyond--fleet .grid-beyond-caveat {
  text-shadow: 0 1px 0 rgba(246, 241, 231, 0.9);
}
  max-width: 24rem;
}
.grid-caption {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: center;
  min-height: 2.4em;
  width: min(480px, 88vw);
  max-width: 100%;
  min-width: 0;
  padding: 0 .5rem;
  box-sizing: border-box;
  white-space: pre-line;
  overflow-wrap: break-word;
  flex-shrink: 0;
}

/* Stage 4 inequality strip: wider than the ticket grid, still sticky. */
#stage4 .coda-mount {
  width: min(640px, 92vw);
  max-height: min(70vh, 640px);
  margin: 0 auto;
}
#stage4 .coda-mount svg {
  display: block;
  width: 100%;
  height: auto;
}
#stage4 .grid-caption {
  width: min(640px, 92vw);
}
#stage4 .sticky {
  align-items: center;
}
#stage4 .steps .step {
  min-height: 70vh;
}

/* Stage 3b is a single small square centred in a tall empty SVG. Shrink the
   mount, centre the sticky cluster, and pull the caption up into the empty
   band under the square so it does not sit near the bottom of the viewport. */
#stage3b .sticky {
  justify-content: center;
  padding: clamp(1.5rem, 6vh, 3rem) 0 clamp(2.5rem, 10vh, 5rem);
}
#stage3b .grid-mount {
  width: min(220px, 42vw);
}
#stage3b .grid-caption {
  margin-top: -5.75rem;
  width: min(420px, 90vw);
  position: relative;
  z-index: 1;
}

/* the seed square in the prologue */
#seed-square {
  display: inline-block;
  width: .72em;
  height: .72em;
  background: var(--reality);
  vertical-align: baseline;
  margin: 0 .15em;
}

/* tall scroll-past strips (gauntlet, sun) */
.strip {
  position: relative;
  width: 100%;
}
.strip .strip-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.strip canvas { display: block; width: 100%; height: 100%; }
.strip-counter {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--ink);
  background: rgba(247, 241, 229, .82);
  padding: .3rem .7rem;
  border: 1px solid var(--rule);
}
.strip-marker {
  position: absolute;
  left: 0;
  padding: .15rem .6rem .15rem .9rem;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--ink-soft);
  background: rgba(247, 241, 229, .82);
  border-left: 2px solid var(--rule);
}
/* the world-electricity marker: the honest "far past here" beat */
.strip-marker-electricity {
  color: var(--story, #a84a10);
  border-left-color: var(--story, #a84a10);
  font-weight: 600;
}
/* Beyond markers get their "another N× further" label from strip.js (not a
   static ::after), so the ratio stays honest with the strip's real length. */

/* The Sun strip is the opposite of the gauntlet: every square is drawn, so the
   canvas is its own natural height (set inline by strip.js), NOT the 100vh
   sticky viewport the gauntlet uses. Override the shared .strip canvas rule. */
#sun { padding: 2rem 0 4rem; }
#sun .sun-intro { max-width: 42rem; margin: 0 auto 2rem; padding: 0 1.2rem; }
#sun canvas { width: 100%; height: auto; }   /* height comes from strip.js */
/* Caption pinned at the top of the viewport while the tall field scrolls past.
   Sticky (not absolute) so it stays in view for the whole strip instead of
   pinning to the top of the 1,900px canvas and scrolling away. */
#sun .strip-counter {
  position: sticky;
  top: .8rem;
  left: auto;
  transform: none;
  display: table;
  margin: 0 auto;
  z-index: 2;
}

/* the gauntlet is tall on purpose: you scroll and scroll and barely dent it */
#gauntlet { min-height: 8600px; }
#gauntlet-defeat { max-width: 42rem; margin: 0 auto; padding: 3rem 1.2rem 5rem; }

/* a step tall enough to hold the summit beat */
.step.tall { min-height: 100vh; }

/* trailing scroll room after the coda's last step: the graphic stays pinned
   while the reader scrolls this, driving the coda's infinite-subdivision zoom */
.coda-outro { min-height: 140vh; }

/* sources definition list generated from quantities.json */
.sources-list dt { font-weight: 600; margin-top: .9rem; }
.sources-list dd { margin: .1rem 0 0 0; font-size: .95rem; color: var(--ink-soft); }

/* Redesign: single sticky particle field + cadence dial. */
.field-canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  image-rendering: auto;
}

.dial {
  margin: 1.25rem auto 0;
  max-width: 30rem;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: var(--ink, #191410);
}
.dial label { display: block; margin-bottom: 0.5rem; }
.dial output { font-weight: 600; }
.dial input[type="range"] {
  width: 100%;
  accent-color: var(--reality, #1e5f4a);
  cursor: pointer;
}
.dial-readout {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--reality, #1e5f4a);
}
.dial[hidden] { display: none; }

/* Beat-3 share bar: few people, most of the CO₂. */
.share-bar {
  margin: 0.9rem auto 0;
  max-width: 30rem;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
}
.share-bar[hidden] { display: none; }
.share-row {
  display: grid;
  grid-template-columns: 9rem 1fr 2.75rem;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
}
.share-row-label { text-align: right; color: var(--ink-soft, #4a4238); }
.share-track {
  height: 0.85rem;
  background: var(--paper-deep, #efe6d2);
  border: 1px solid var(--rule, #d8ccb4);
  border-radius: 2px;
  overflow: hidden;
}
.share-seg {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--perception, #a84a10);
}
.share-row-val { font-weight: 600; color: var(--perception, #a84a10); }