/* Zoltiq — shared design system: an energy control room.
   A strong, slightly wide grotesk (Archivo) for headings and text, monospace for data labels,
   crisp cool-white (light) or near-black (dark) grounds, rounded app-style panels, and halftone
   illustrations of India's grid. One accent: saffron in light mode, gold in dark mode. */

:root {
  /* Light: cool white and ink, one saffron. */
  --bg: #f6f7f9;
  --bg-2: #eceef2;
  --ink: #0d0f12;
  --ink-soft: #565d69;
  --line: rgba(13, 15, 18, 0.12);
  --band: #0d0f12;
  --band-ink: #f6f7f9;
  --band-soft: #a9afba;
  --band-line: rgba(255, 255, 255, 0.14);
  --accent: #ff7a1a;
  --accent-ink: #0d0f12;
  --accent-soft: #ffd8b8;
  --bar: #cfd3da;
  --card-1: #eceef2;
  --card-2: #e3e6eb;
  --card-3: #d9dde4;
  --card-ink: #0d0f12;
  --footer: #060a19;
  --footer-ink: #f6f7f9;
  --footer-soft: #9aa0aa;

  /* Older names, kept as aliases of the roles above. */
  --paper: var(--bg);
  --paper-2: var(--bg-2);
  --crimson: var(--accent);
  --night: var(--band);
  --night-2: var(--footer);
  --night-ink: var(--footer-ink);
  --night-ink-soft: var(--footer-soft);

  /* Type: Archivo (wide cut for headings), JetBrains Mono for data labels */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 14px;

  --step-small: 0.875rem;
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --step-head: clamp(1.875rem, 1.25rem + 2vw, 3.25rem);
  --step-display: clamp(3rem, 1.6rem + 4.6vw, 6.5rem);

  --margin: clamp(1rem, 3vw, 2rem);
  --max: 1440px;
  --gap-section: clamp(6rem, 11vw, 10rem);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 104%;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}
h2 { font-size: var(--step-head); }
h3 { font-size: var(--step-lead); line-height: 1.12; }
p { margin: 0; }

.frame {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}
/* Most text sections hang from a column line at about 42% of the page. */
.axis {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
}
.axis > .on-axis { grid-column: 2; }
@media (max-width: 860px) {
  .axis { grid-template-columns: minmax(0, 1fr); }
  .axis > .on-axis { grid-column: 1; }
}

.skip {
  position: absolute; left: var(--margin); top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.6rem 0.9rem; text-decoration: none;
}
.skip:focus { top: 0.75rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  color: var(--ink);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.site-header.is-solid { background: rgba(246, 247, 249, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #0d0f12; }
body.dark-hero .site-header:not(.is-solid) { color: #f2f4f8; }
.site-header .frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
}
.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
  text-decoration: none;
  line-height: 1;
}
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a:not(.btn) {
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease, text-underline-offset 0.2s ease;
}
.nav a:not(.btn):hover, .nav a[aria-current="page"] { text-decoration-color: currentColor; text-underline-offset: 4px; }
.theme-toggle { display: none !important;

  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; color: inherit;
  border: 1.5px solid currentColor; border-radius: 10px; cursor: pointer;
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun, .theme-toggle[data-mode="dark"] .moon { display: none; }
.theme-toggle[data-mode="dark"] .sun { display: block; }
.header-tools { display: flex; align-items: center; gap: 0.75rem; order: 2; }
.nav { order: 1; }
.site-header .frame > .nav { margin-left: auto; }
.menu-btn {
  display: none;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 10px;
  font: 600 1rem var(--font-text);
  cursor: pointer;
}
@media (max-width: 980px) {
  .menu-btn { display: inline-block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--margin) 1.5rem;
    background: var(--paper);
    color: var(--ink);
  }
  .nav:not(.is-open) { display: none; }
  .nav a:not(.btn) { padding: 0.9rem 0; font-family: var(--font-display); font-size: 1.75rem; }
  .nav .btn { margin-top: 1rem; justify-content: center; }
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.2rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 10px;
  font: 600 0.9375rem/1 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.btn svg { width: 18px; height: 18px; transition: transform 0.18s ease; }
.btn:hover svg { transform: translateX(4px); }
.btn.paper { background: var(--paper); color: var(--ink); }
.btn.paper:hover { background: var(--bg-2); }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.ink:hover { filter: brightness(1.2); }
.btn.small { padding: 0.7rem 1rem; font-size: 1rem; }
.text-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-underline-offset 0.18s ease;
}
.text-link:hover { text-underline-offset: 8px; }

/* ---- Hero: a day on the grid. The sun (canvas) moves behind the pylon picture. ---- */
.hero {
  position: relative;
  min-height: max(100svh, 640px);
  margin-top: -4.6rem;
  padding-top: 4.6rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  /* The sky behind the words changes with the hour, so the hero sets its own text colours. */
  background: #0b1230;
  color: #0d0f12;
  transition: color 0.6s ease;
}
.hero.is-night { color: #f2f4f8; }
.hero .btn.paper { background: #ffffff; color: #0d0f12; }
.sky-page .site-header:not(.is-solid) { color: #0d0f12; transition: color 0.6s ease; }
.sky-page .site-header.over-night:not(.is-solid) { color: #f2f4f8; }
.hero-sky { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; }
.hero-slide {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 50%;
}

/* ---------- Fields: whole sections in one flat colour ---------- */
/* ---------- The day, continued: sections take the sky colour of a later hour ----------
   Each class sets the section's colour tokens, so panels, bars and text inside follow it.
   Light skies use dark ink; dusk and night use light ink and a gold accent. */
.sky-morning, .sky-noon, .sky-golden, .sky-sunset { --ink: #0d0f12; --ink-soft: #3f4653; --line: rgba(13, 15, 18, 0.14);
  --bg: #ffffff; --bg-2: #eef3f9; --card-ink: #0d0f12; --band: #0b1230; --band-ink: #f2f4f8; --band-soft: #aab3c8; color: var(--ink); --soft: var(--ink-soft); }
.sky-dusk, .sky-night { --ink: #f2f4f8; --ink-soft: #b6bdd2; --line: rgba(255, 255, 255, 0.16);
  --bg: #121a3d; --bg-2: #1b2550; --card-ink: #f2f4f8; --band: #070b1a; --band-ink: #f2f4f8; --band-soft: #8f98b5;
  --accent: #ffb238; --accent-soft: #5a4320; color: var(--ink); --soft: var(--ink-soft); }
.sky-morning { background: linear-gradient(180deg, #cfe2fa 0%, #e6f1fd 100%); --card-1: #ffffffcc; --card-2: #ffffffb3; --card-3: #ffffff99; --bar: #9fb9db; }
.sky-noon    { background: linear-gradient(180deg, #e6f1fd 0%, #f4f9ff 100%); --bar: #a9c4e6; }
.sky-golden  { background: linear-gradient(180deg, #f4f9ff 0%, #ffe8c4 35%, #ffc98e 100%); --card-1: #fff8ee; --card-2: #fff1de; --card-3: #ffe9cc; --bar: #e8a96a; }
.sky-sunset  { background: linear-gradient(180deg, #ffc98e 0%, #ff9f6e 55%, #e8686a 100%); --bar: #b8505e; --accent: #0b1230; --accent-ink: #ffffff; }
.sky-dusk    { background: linear-gradient(180deg, #5a3a7e 0%, #2c2766 55%, #171d4c 100%); --bar: #3b4685; --card-1: #ffffff14; --card-2: #ffffff1f; --card-3: #ffffff29; }
.sky-night   { background: linear-gradient(180deg, #171d4c 0%, #0a1028 60%, #060a19 100%); --bar: #2b3566; }
/* Stars over the night sections */
.stars { position: relative; isolation: isolate; }
.stars::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.7;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 44% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 61% 33%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 47%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 6% 66%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 35% 78%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 70% 70%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 93% 84%, #fff 50%, transparent 51%);
  background-size: 520px 420px;
}
/* The far ridge and pylon line, used to close a sky section like a horizon */
.horizon-line { height: clamp(90px, 12vw, 160px); background: url("../img/pylons-dark.webp") right bottom / cover no-repeat; margin-top: -1px; }
.sky-dusk .horizon-line, .sky-night .horizon-line { background-image: url("../img/pylons-light.webp"); opacity: 0.6; }

.field-plain { background: var(--bg); color: var(--ink); --soft: var(--ink-soft); }
.field-band { background: var(--band); color: var(--band-ink); --soft: var(--band-soft); }
.field-band .btn.ink { background: var(--band-ink); color: var(--band); }
.soft { color: var(--soft, var(--ink-soft)); }

.section { padding-block: var(--gap-section); }
.lede { font-size: var(--step-lead); line-height: 1.55; max-width: 42ch; }
.placeholder { opacity: 0.7; }

/* Sample label: a printer's proof stamp on anything drawn from sample data. */
/* Sample badge: marks anything drawn from sample data. */
.proof {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border: 1px dashed currentColor;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  opacity: 0.85;
}
.proof::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.mono { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Forms ---------- */
.field-input { display: grid; gap: 0.45rem; min-width: 0; }
.field-input label { font-size: 1rem; font-weight: 600; }
.field-input input, .field-input select, .field-input textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 1.0625rem;
}
.field-input input::placeholder { color: #8a8a82; }
.field-input input:focus, .field-input select:focus, .field-input textarea:focus { outline: 3px solid var(--accent); outline-offset: 0; }
.form-status { margin: 0; min-height: 1.5em; font-size: 1rem; }

/* ---------- Footer: the address is the headline ---------- */
.site-footer {
  background: var(--night-2);
  color: var(--night-ink);
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  padding-block: 2.5rem 1.5rem;
}
.site-footer .frame { flex: 1; display: flex; flex-direction: column; gap: 3rem; }
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.footer-top .brand { color: var(--night-ink); }
.footer-notes { display: grid; gap: 0.35rem; margin-top: 1rem; color: var(--night-ink-soft); font-size: 1rem; }
.subscribe h2 { font-size: var(--step-lead); line-height: 1.2; margin-bottom: 1rem; max-width: 26ch; }
.subscribe-row { display: flex; gap: 0.75rem; }
.subscribe-row input { flex: 1 1 auto; min-width: 0; }
.subscribe .field-input label { color: var(--night-ink-soft); font-weight: 400; }
.subscribe .form-status { color: var(--night-ink-soft); margin-top: 0.5rem; }
.footer-mail {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: clamp(1.75rem, 5.4vw, 5.75rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--accent);
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.footer-mail:hover { color: var(--footer-ink); }
.footer-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 2rem;
  font-size: var(--step-small);
  color: var(--night-ink-soft);
}
.footer-meta nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer-meta a { color: var(--night-ink); text-decoration: none; }
.footer-meta a:hover { text-decoration: underline; }
.footer-meta > :nth-child(2) { text-align: center; }
.footer-meta > :last-child { text-align: right; }
@media (max-width: 860px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-meta { grid-template-columns: minmax(0, 1fr); }
  .footer-meta > * { text-align: left !important; }
}
@media (max-width: 480px) { .subscribe-row { flex-direction: column; } }

/* ---------- Entrances: parts of each section rise in turn (only when script runs) ---------- */
.js .rise { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
.js .rise.in { opacity: 1; transform: none; }
.js .rise.d1 { transition-delay: 0.08s; }
.js .rise.d2 { transition-delay: 0.16s; }
.js .rise.d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .rise { opacity: 1; transform: none; }
}

/* ---------- Data pages: panels, charts, tables, controls ---------- */
/* Series colours (validated for colour-blind separation on light and dark grounds).
   Text never takes a series colour; a swatch beside it carries identity. */
:root, .sky-morning, .sky-noon, .sky-golden, .sky-sunset, .panel { --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #6250d6; --c-ref: var(--ink-soft); }
.sky-dusk, .sky-night, .sky-dusk .panel, .sky-night .panel { --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #9085e9; }

.page-section { padding-block: clamp(4rem, 8vw, 7rem); }
.page-section + .page-section { padding-top: 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(1.5rem, 3vw, 3rem); align-items: end; margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }
.section-head p { color: var(--ink-soft); max-width: 60ch; }
@media (max-width: 860px) { .section-head { grid-template-columns: minmax(0, 1fr); } }

.panel { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 2.5vw, 1.75rem); min-width: 0; }
.panel h3 { font-size: 1.125rem; margin-bottom: 0.35rem; }
.panel .sub { color: var(--ink-soft); font-size: 0.9375rem; margin-bottom: 1rem; }
.panel-grid { display: grid; gap: 16px; }
.panel-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .panel-grid.two { grid-template-columns: minmax(0, 1fr); } }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.stat { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; display: grid; gap: 0.3rem; align-content: start; }
.stat .k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.stat .v { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: clamp(1.625rem, 1.2rem + 0.9vw, 2.125rem); line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .n { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.45; }

.controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-bottom: 1rem; }
.controls label, .controls .lbl { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.controls select { font: inherit; font-size: 0.9375rem; padding: 0.45rem 0.6rem; border-radius: 8px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--bg-2); border-radius: 10px; }
.seg button { font: 600 0.875rem/1 var(--font-text); padding: 0.5rem 0.75rem; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.ctl { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.viz { position: relative; display: grid; gap: 0.5rem; }
.viz-plot { position: relative; width: 100%; }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.viz-grid { stroke: var(--line); stroke-width: 1; }
.viz-zero { stroke: var(--ink-soft); stroke-width: 1; }
.viz-ref { stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 4 4; }
.viz-tick { fill: var(--ink-soft); font: 500 11px var(--font-mono); }
.viz-end { fill: var(--ink); font: 600 12px var(--font-text); }
.viz-cross { stroke: var(--ink-soft); stroke-width: 1; }
.viz-dot { stroke: var(--bg); stroke-width: 2; }
.viz-bar { transition: opacity 0.12s ease; }
.viz-bar.is-hover { opacity: 0.7; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: 0.875rem; color: var(--ink-soft); }
.viz-key { display: inline-flex; align-items: center; gap: 0.45rem; }
.sw { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: var(--sw); flex: none; }
.sw.dash { background: repeating-linear-gradient(90deg, var(--sw) 0 5px, transparent 5px 8px); }
.sw.box { width: 11px; height: 11px; border-radius: 3px; }
.viz-tip { position: absolute; top: 0; z-index: 5; display: grid; gap: 0.2rem; min-width: 150px; max-width: 280px; padding: 0.55rem 0.7rem; background: var(--ink); color: var(--bg); border-radius: 8px; font-size: 0.8125rem; line-height: 1.35; pointer-events: none; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5); }
.viz-tip b { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.04em; }
.viz-tip span { display: flex; align-items: center; gap: 0.4rem; }
.viz-tip em { font-style: normal; font-family: var(--font-mono); margin-left: auto; padding-left: 0.75rem; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; color: var(--ink); }
.data-table caption { text-align: left; padding: 0.75rem 1rem; color: var(--ink-soft); font-size: 0.875rem; caption-side: bottom; }
.data-table th, .data-table td { padding: 0.6rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table thead th { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); position: sticky; top: 0; background: var(--bg); }
.data-table tbody th { font-weight: 600; }
.data-table .num { text-align: right; font-family: var(--font-mono); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tr.is-head > * { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.data-table tr.is-ref > * { color: var(--ink-soft); }
.table-scroll { max-height: 520px; overflow: auto; }

.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.note-list li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 0.5rem 1.5rem; align-items: baseline; padding: 1.1rem 1.25rem; background: color-mix(in srgb, var(--bg) 75%, transparent); border: 1px solid var(--line); border-radius: var(--radius); }
.note-list .k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.note-list a { font-weight: 600; }
.note-list .when { color: var(--ink-soft); font-size: 0.9375rem; white-space: nowrap; }
@media (max-width: 760px) { .note-list li { grid-template-columns: minmax(0, 1fr); } }

.prose { max-width: 68ch; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.4em; }
.prose figure { margin: 2em 0; max-width: none; }
.prose figcaption { color: var(--ink-soft); font-size: 0.9375rem; margin-top: 0.6rem; }
.prose .callout { padding: 1rem 1.25rem; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--bg) 80%, transparent); border-radius: 0 10px 10px 0; }
.wide { max-width: none; }
.fine { color: var(--ink-soft); font-size: 0.875rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.defs { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); gap: 0.6rem 1.25rem; margin: 0.75rem 0 0; font-size: 0.9375rem; }
.defs dt { font-weight: 600; }
.defs dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 560px) { .defs { grid-template-columns: minmax(0, 1fr); } .defs dd { margin-bottom: 0.5rem; } }
.steps { margin: 0.75rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.9rem; }
.steps b { font-weight: 700; }
.data-table.plain th, .data-table.plain td { white-space: normal; vertical-align: top; }
.data-table.plain td { color: var(--ink-soft); }
.findings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; counter-reset: f; }
.findings li { counter-increment: f; padding: 1.25rem 1.4rem; background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 0.5rem; align-content: start; }
.findings li::before { content: counter(f, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); letter-spacing: 0.06em; }
.findings h3 { font-size: 1.125rem; }
.findings p { color: var(--ink-soft); font-size: 0.9875rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.strat-card { display: grid; gap: 0.75rem; align-content: start; }
.strat-card .big-num { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1.1; }
.strat-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.9375rem; }
.strat-card li { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-top: 0.35rem; }
.strat-card li span { color: var(--ink-soft); }
.strat-card li b { font-family: var(--font-mono); font-weight: 500; font-size: 0.8125rem; text-align: right; }
.strat-card p { font-size: 0.9375rem; color: var(--ink-soft); }
.strat-card p b { color: var(--ink); }
.check { display: inline-flex; align-items: center; gap: 0.35rem; font: 600 0.875rem var(--font-text) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
details.panel summary { cursor: pointer; font-weight: 600; }
.num-input { width: 7rem; font: inherit; font-size: 1rem; padding: 0.45rem 0.6rem; border-radius: 8px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
.est-head { display: grid; gap: 0.25rem; margin: 0.5rem 0 1.25rem; }
.est-head .v { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); line-height: 1; letter-spacing: -0.04em; }
.est-head .n { color: var(--ink-soft); max-width: 60ch; }
.form-grid .form-status { margin-top: 0.75rem; }
.panel .field-input input, .panel .field-input select, .panel .field-input textarea { background: var(--bg-2); }
.note-side { display: grid; gap: 12px; align-content: start; position: sticky; top: 6rem; align-self: start; }
@media (max-width: 860px) { .note-side { position: static; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 2rem; } }
.prose .viz, .prose .table-wrap { font-size: 1rem; line-height: 1.5; }
.prose figure .controls { margin-bottom: 0.5rem; }
.panel .btn.paper { background: var(--bg-2); color: var(--ink); }
.panel .btn.ink { background: var(--ink); color: var(--bg); }

/* On a phone, the pylons on the other pages sit in a band below the words (as on Home). */
@media (max-width: 760px) {
  .page-hero .hero-slide { top: auto; bottom: 0; height: 46%; object-position: 72% 40%; }
}