/* ==========================================================================
   Better Roads — page styles
   Every colour here resolves to a token in tokens.css. Nothing is warm unless
   it is reporting road severity.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--road-void);
  color: var(--paint);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

::selection { background: var(--sev-1); color: var(--road-void); }

:focus-visible {
  outline: 2px solid var(--instr);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--sev-1); color: var(--road-void);
  padding: 12px 18px; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* --- Type ---------------------------------------------------------------- */

.d1, .d2, .d3 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin: 0;
  text-wrap: balance;
}
.d1 { font-size: var(--t-d1); }
.d2 { font-size: var(--t-d2); margin-bottom: 28px; }
.d3 {
  font-size: var(--t-d3); font-weight: 700;
  margin: 96px 0 18px; letter-spacing: -0.02em;
}
.d1 em {
  font-style: normal;
  color: var(--sev-2);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--instr);
  margin: 0 0 22px;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--paint-2);
  margin: 0 0 32px;
  max-width: 64ch;
}
.lead-narrow { max-width: 58ch; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.src {
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: var(--paint-3);
  white-space: nowrap;
}

.cap {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--paint-3);
  margin: 14px 0 0;
}
.cap-wide { max-width: 74ch; margin-top: 20px; }

/* --- Layout -------------------------------------------------------------- */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: 720px; }

.sec { padding-block: clamp(88px, 12vw, 168px); position: relative; }
.sec-alt { background: var(--road-0); }
.sec-limits { background: var(--road-0); }
.sec-join { background: var(--road-0); }

/* --- Chainage rail ------------------------------------------------------- */

.rail {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--rail);
  z-index: 90;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-right: 1px solid var(--road-2);
  background: var(--chrome-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
.rail-track {
  position: absolute; top: 96px; bottom: 96px; left: 50%;
  width: 1px; margin-left: -0.5px;
  background: var(--road-2);
}
.rail-fill {
  position: absolute; inset: 0;
  background: var(--sev-1);
  transform-origin: top;
  transform: scaleY(0);
}
.rail-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sev-1);
  writing-mode: vertical-rl;
  background: var(--road-void);
  padding-block: 8px;
  z-index: 1;
}
.rail-label {
  position: absolute; bottom: 28px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paint-3);
  writing-mode: vertical-rl;
}

@media (min-width: 1100px) {
  .rail { display: flex; }
  body { padding-left: var(--rail); }
}

/* --- Nav ----------------------------------------------------------------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; gap: 24px;
  padding: 16px var(--gutter);
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: var(--chrome-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--road-2);
}
@media (min-width: 1100px) { .nav { left: var(--rail); } }

.wordmark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin: 0;
  white-space: nowrap;
}
.wordmark-mark {
  width: 18px; height: 10px;
  background:
    linear-gradient(90deg, var(--sev-1) 0 6px, transparent 6px 10px, var(--sev-1) 10px 16px);
  border-radius: 1px;
  flex: none;
}

.nav-links { display: none; gap: 26px; margin-left: auto; }
@media (min-width: 940px) { .nav-links { display: flex; } }

.nav-link {
  font-size: 0.875rem;
  color: var(--paint-3);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease);
}
.nav-link:hover { color: var(--paint); }
.nav-link.is-active { color: var(--sev-1); }

/* Theme toggle. Labelled in the subject's own terms — roads are surveyed by
   day and driven by night — rather than with a sun/moon icon. */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 0;
  margin-left: auto;
  padding: 3px;
  background: transparent;
  border: 1px solid var(--road-2);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (min-width: 940px) { .theme-toggle { margin-left: 0; } }
.theme-toggle span {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--paint-3);
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
:root .theme-toggle span:first-child,
[data-theme="dark"] .theme-toggle span:last-child {
  background: var(--road-3);
  color: var(--paint);
}
[data-theme="dark"] .theme-toggle span:first-child {
  background: transparent;
  color: var(--paint-3);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px;
  background: var(--action);
  color: var(--action-ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--action);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease), filter var(--d-fast) var(--ease);
}
.btn:hover { filter: brightness(1.14); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* The toggle carries the flexible gap on narrow screens, the link list carries
   it on wide ones — so the button never floats away from the right edge. */
.nav .btn { margin-left: 0; }

.btn-sm { padding: 9px 18px; font-size: 0.8125rem; }

.btn-ghost {
  background: transparent;
  color: var(--paint);
  border-color: var(--road-3);
}
.btn-ghost:hover { background: var(--road-1); border-color: var(--instr-dim); }

.btn-full { width: 100%; }

/* --- Hero ---------------------------------------------------------------- */

/* The hero is two bands: type on top, road below. They do not overlap, which
   is what lets the road stay dark in the light theme instead of being washed
   out by the scrim the headline needs. */
/* Two stacked bands: type, then road. The road is the flexible one, so it
   absorbs whatever height the headline leaves and is always on screen — a
   fixed band plus variable type pushed it below the fold. Giving the road its
   own real estate is also what lets the camera look properly DOWN at the
   surface instead of skimming it edge-on at the horizon. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: clamp(88px, 12vh, 130px);
  overflow: hidden;
}

.hero-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: var(--road-band-min);
  margin-top: clamp(16px, 3vh, 40px);
}

#road-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
}

/* Fallback when WebGL is unavailable — the hero still reads as a surface
   receding into haze rather than as a broken canvas. */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 70% at 50% 100%, #d5d0c4 0%, var(--road-void) 62%),
    linear-gradient(180deg, #e6e3da 0%, var(--road-void) 40%);
}
[data-theme="dark"] .hero::before {
  background:
    radial-gradient(120% 70% at 50% 100%, #12171f 0%, var(--road-void) 62%),
    linear-gradient(180deg, #0a0d13 0%, var(--road-void) 40%);
}
body.has-webgl .hero::before { display: none; }

/* The scrim that lets the headline sit on top of the road. In daylight it has
   to work harder: the asphalt below is dark and the ink on top is too. */
/* Feathers only the band's own edges, so the horizon dissolves into the page
   and the near surface hands off to the next section. The type is untouched. */
.hero-veil {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    var(--veil-top) 0%,
    var(--veil-mid) 14%,
    transparent 34%,
    transparent 82%,
    var(--veil-end) 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  width: 100%;
}

.hero-inner { flex: 0 0 auto; }
.hero .d1 { max-width: 17ch; margin-bottom: 22px; }
.hero .lead { max-width: 60ch; color: var(--paint-2); margin-bottom: 24px; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 0; }

.hero-foot {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--paint-3);
  max-width: 44ch;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--road-2);
}

.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; z-index: 2;
  width: 1px; height: 46px;
  background: var(--road-3);
  overflow: hidden;
}
.scroll-hint span {
  position: absolute; inset: 0;
  background: var(--sev-1);
  animation: hint 2.4s var(--ease) infinite;
}
@keyframes hint {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* --- Panels and figures -------------------------------------------------- */

/* --- Plates ---------------------------------------------------------------
   Charts, diagrams and app screens follow the theme like the rest of the page:
   each SVG ships a light and a dark variant generated from the same tokens,
   and the canvas charts read their palette from those tokens at draw time.
   A dark plate marooned on a light page reads as a hole in the document. */

.panel {
  background: var(--road-1);
  border: 1px solid var(--road-2);
  border-radius: var(--radius);
  padding: 18px;
  margin: 0;
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.panel-title {
  font-size: 0.8125rem;
  color: var(--paint-2);
  letter-spacing: 0.01em;
}
.panel-meta { font-size: 0.6875rem; color: var(--paint-3); }
.panel canvas { width: 100%; display: block; }
.panel .cap { color: var(--paint-3); }

.figure { margin: 0 0 34px; }
.figure img {
  width: 100%;
  background: var(--road-1);
  border: 1px solid var(--road-2);
  border-radius: var(--radius);
}
.figure figcaption {
  font-size: 0.8125rem;
  color: var(--paint-3);
  margin-top: 12px;
  max-width: 62ch;
}
.figure-wide { margin-bottom: 44px; }

.two-up { display: grid; gap: 28px; }
@media (min-width: 900px) { .two-up { grid-template-columns: 1fr 1fr; } }

/* --- Signal section ------------------------------------------------------ */

.signal-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) {
  .signal-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; }
}

.signal-left { min-width: 0; }
.wave-panel canvas { height: 260px; }

.signal-copy p { margin: 0 0 20px; color: var(--paint-2); }

.callout {
  border-left: 2px solid var(--sev-2);
  padding: 4px 0 4px 18px;
  color: var(--paint-2) !important;
}
.callout strong { color: var(--paint); font-weight: 600; }

.specs { margin: 30px 0 0; padding: 0; }
.specs > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--road-2);
}
.specs dt { color: var(--sev-1); font-size: 0.875rem; }
.specs dd {
  margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--paint-3);
}

/* --- Convergence --------------------------------------------------------- */

.converge-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) {
  .converge-grid { grid-template-columns: 1.35fr 1fr; gap: 48px; }
}
.converge-grid canvas { height: 320px; }

.slider-label {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 0.8125rem;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--paint-3);
  margin-bottom: 14px;
}
.slider-out { font-size: 1.75rem; color: var(--sev-1); line-height: 1; }

#passes {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; margin: 0 0 30px;
  background: var(--road-3);
  border-radius: 2px; cursor: pointer;
}
#passes::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--sev-1);
  border: 3px solid var(--road-void);
  box-shadow: 0 0 0 1px var(--sev-1);
  cursor: grab;
}
#passes::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--sev-1);
  border: 3px solid var(--road-void);
  box-shadow: 0 0 0 1px var(--sev-1);
  cursor: grab;
}

.readout { margin: 0 0 18px; }
.readout > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--road-2);
}
.readout dt { font-size: 0.8125rem; color: var(--paint-3); }
.readout dd { margin: 0; font-size: 1rem; color: var(--paint); }

.bar {
  height: 4px; background: var(--road-3);
  border-radius: 2px; overflow: hidden; margin-bottom: 16px;
}
.bar span {
  display: block; height: 100%; width: 28%;
  background: var(--sev-3);
  transition: width var(--d-mid) var(--ease), background var(--d-mid) var(--ease);
}

.verdict {
  font-size: 0.875rem; line-height: 1.5;
  margin: 0; min-height: 4.2em;
  color: var(--paint-2);
  padding-left: 14px;
  border-left: 2px solid var(--sev-3);
  transition: border-color var(--d-mid) var(--ease);
}
.verdict[data-state="mid"] { border-left-color: var(--sev-2); }
.verdict[data-state="ok"]  { border-left-color: var(--sev-1); }

.note {
  margin-top: 56px;
  padding: 26px 28px;
  background: var(--road-1);
  border: 1px solid var(--road-2);
  border-left: 2px solid var(--instr);
  border-radius: var(--radius);
  max-width: 68ch;
}
.note-title {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 112;
  font-size: 1.0625rem; font-weight: 700;
  margin: 0 0 10px;
}
.note p { margin: 0; color: var(--paint-2); font-size: 0.9375rem; }

/* --- Screens strip ------------------------------------------------------- */

.screens {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 236px);
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--road-3) transparent;
}
.screens::-webkit-scrollbar { height: 6px; }
.screens::-webkit-scrollbar-thumb { background: var(--road-3); border-radius: 3px; }

.screen { margin: 0; scroll-snap-align: start; }
.screen img {
  width: 100%;
  border: 1px solid var(--road-2);
  border-radius: 10px;
  background: var(--road-1);
}
.screen figcaption {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paint-3);
  margin-top: 12px;
}

/* --- Limits -------------------------------------------------------------- */

.limits { list-style: none; counter-reset: lim; margin: 48px 0 0; padding: 0; }
.limits li {
  counter-increment: lim;
  position: relative;
  padding: 30px 0 30px 62px;
  border-top: 1px solid var(--road-2);
  max-width: 74ch;
}
.limits li::before {
  content: counter(lim, decimal-leading-zero);
  position: absolute; left: 0; top: 32px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--sev-3);
}
.limits h3 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 112;
  font-size: 1.25rem; font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.limits p { margin: 0; color: var(--paint-2); font-size: 0.9375rem; }

/* --- India --------------------------------------------------------------- */

.india-grid { display: grid; gap: 40px; align-items: center; margin-bottom: 56px; }
@media (min-width: 1000px) {
  .india-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.india-vis { margin: 0; }
#india-canvas {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 520px;
  display: block;
}
.india-copy p { margin: 0 0 20px; color: var(--paint-2); }

/* --- Join ---------------------------------------------------------------- */

.join { margin-top: 8px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paint-3);
  margin-bottom: 8px;
}
.field input, .field select {
  width: 100%;
  padding: 13px 14px;
  background: var(--road-1);
  border: 1px solid var(--road-3);
  border-radius: var(--radius);
  color: var(--paint);
  font-family: var(--font-body);
  font-size: 1rem;
}
.field input::placeholder { color: var(--paint-3); }
.field input:focus, .field select:focus { border-color: var(--instr); }

.join-note {
  font-size: 0.875rem; line-height: 1.5;
  margin: 16px 0 0; min-height: 1.5em;
  color: var(--paint-2);
}
.join-note[data-state="error"] { color: var(--sev-3); }
.join-note[data-state="ok"] { color: var(--sev-1); }
.join-note a { color: var(--instr); }

/* --- Footer -------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--road-2);
  padding-block: 56px 72px;
  background: var(--road-void);
}
.foot-grid { display: grid; gap: 34px; }
@media (min-width: 800px) {
  .foot-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; }
}
.wordmark-foot { font-size: 1rem; margin-bottom: 10px; }
.foot-h {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paint-3);
  margin: 0 0 12px;
}
.foot-note {
  font-size: 0.8125rem; line-height: 1.55;
  color: var(--paint-3);
  margin: 0 0 8px;
  max-width: 42ch;
}
.foot-note a { color: var(--instr); }

/* Build attribution. Set in the utility face and given a hairline above it so
   it reads as a maker's mark rather than another line of body copy. */
.foot-built {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--paint-2);
  margin: 18px 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--road-2);
  max-width: 42ch;
}
.foot-built a {
  color: var(--paint);
  text-decoration: none;
  border-bottom: 1px solid var(--sev-1);
  padding-bottom: 1px;
}
.foot-built a:hover { color: var(--sev-1); }

/* --- Reveal -------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .scroll-hint { display: none; }
  html { scroll-behavior: auto; }
}