/* Calistoga — Firecrawl blueprint craft × Calistoga colour lock
   Type: Geist + Geist Mono (Suisse→Geist stand-in; mono as credibility layer)
   Colours: frozen Calistoga / Alvorada tokens */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Calistoga colour lock */
  --c-brand: #ed6e41;
  --c-charcoal: #0b1220;
  --c-ink: #0b1220;
  --c-slate: #475569;
  --c-border: #e2e8f0;
  --c-paper: #f9f9f9;
  --c-white: #ffffff;
  --c-action: #c2410c;
  --c-brand-soft: #f0a68b;
  --c-brand-hover: #e05a29;
  --c-ember-inset: #c2410c;
  --c-text: #262626;
  --c-text-muted: #525252;
  --c-text-faint: #737373;
  --c-text-on-dark: #e5e5e5;
  --c-text-muted-on-dark: #a3a3a3;
  --c-grid: rgba(11, 18, 32, 0.06);
  --c-grid-strong: rgba(11, 18, 32, 0.12);

  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type scale — UI Academy `escala` / `tamanhos`: 4-and-8 rhythm, 10px floor,
     14–16 body base. Firecrawl's small-type-forward look is kept in the MONO
     labels; prose moves to a 16px base because this is read on a phone by a
     vendor, not by a developer at a desk. */
  --t-nano: 0.625rem; /* 10 — documented minimum, wordmark descriptor only */
  --t-micro: 0.75rem; /* 12 — data labels, legends, footer meta */
  --t-eyebrow: 0.75rem; /* 12 — section markers. Same size as micro by design:
                           the scale has no legal step between 12 and 16;
                           the roles differ by tracking, not size. */
  --t-caption: 0.875rem; /* 14 — secondary UI copy (`tamanhos` 14–16 band) */
  --t-body: 1rem; /* 16 — body base */
  --t-lead: 1.25rem; /* 20 */
  --t-h3: 1.5rem; /* 24 */
  --t-h2: clamp(2rem, 1.6rem + 1.6vw, 2.5rem); /* 32 → 40 */
  --t-h1: clamp(2.5rem, 1.75rem + 3.5vw, 4rem); /* 40 → 64 */
  --t-stat: clamp(2.5rem, 1.75rem + 3.5vw, 4rem); /* 40 → 64 */

  --track-display: -0.01em;
  --track-body: 0.005em;
  --track-small: 0.01em;
  --track-mono: 0.04em;
  --track-eyebrow: 0.14em;

  /* Leading — UI Academy `espacamento-entre-linhas`: font-size + ~10pt, with a
     shrinking addition as size grows (16→26, 12→20, 80→86). */
  --lh-display: 1.08; /* 60→65; matches the lesson's 80→86 ratio */
  --lh-body: 1.625; /* 16→26 exactly */
  --lh-caption: 1.5; /* 14→21 */

  /* Spacing — UI Academy `como-utilizar-espacamento`, the instructor's own
     ladder: 2 4 6 8 10 12 16 20 24 32 40 48 56 64 80 96 120. Nothing off it. */
  --sp-2: 0.125rem;
  --sp-4: 0.25rem;
  --sp-6: 0.375rem;
  --sp-8: 0.5rem;
  --sp-10: 0.625rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-20: 1.25rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-40: 2.5rem;
  --sp-48: 3rem;
  --sp-56: 3.5rem;
  --sp-64: 4rem;
  --sp-80: 5rem;
  --sp-96: 6rem;
  --sp-120: 7.5rem;

  /* Legacy aliases — all already on the ladder. */
  --s-1: var(--sp-8);
  --s-2: var(--sp-16);
  --s-3: var(--sp-24);
  --s-4: var(--sp-32);
  --s-5: var(--sp-48);
  --s-6: var(--sp-64);
  --s-7: var(--sp-96);
  --section-y: clamp(3rem, 2rem + 5vw, 6rem); /* 48 → 96, both on ladder */

  /* Grid — UI Academy `configuracoes-de-grids`, Website standard grid:
     frame 1920 · grid 1216 · 12 cols · gutter 32.
     Margins: Smartphone Grid 2 = 16 · Tablet = 48. */
  --maxw: 1216px;
  --gutter: var(--sp-32);
  --page-margin: var(--sp-16); /* 390px frame */
  --measure: 62ch; /* `comprimento-de-linhas`: 8–12 words desktop */
  --radius: 6px;
  --radius-sm: 4px;

  /* Accessibility constant — outranks the spacing ladder where they disagree. */
  --tap: 44px;

  --ease: ease;
  --t-fast: 150ms;
  --t-base: 200ms;

  --header-h: 3.5rem; /* 56 — on ladder */

  --elevate:
    0 40px 48px -20px rgba(0, 0, 0, 0.02),
    0 32px 32px -20px rgba(0, 0, 0, 0.03),
    0 16px 24px -12px rgba(0, 0, 0, 0.03),
    0 0 0 1px rgba(0, 0, 0, 0.03);

  --grid-size: 24px; /* on ladder; was 28 */
}

/* Tablet / desktop page margins — UI Academy grid presets. */
@media (min-width: 640px) {
  :root {
    --page-margin: var(--sp-48); /* 834px frame → 48 */
  }
}

/* Display-P3 upgrade — Firecrawl's progressive-enhancement architecture, but
   with a real colorimetric conversion (sRGB → linear → XYZ-D65 → P3), not
   sRGB coordinates re-labelled into a wider space. Firecrawl's re-label
   silently heats the accent and *lowers* contrast on light grounds; these
   values are converted and re-audited in both gamuts.
   Neutrals are omitted on purpose: sRGB and P3 share a white point, so greys
   do not move. */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --c-brand: color(display-p3 0.867 0.46 0.301); /* #ed6e41 */
    --c-action: color(display-p3 0.704 0.291 0.135); /* #c2410c */
    --c-ember-inset: color(display-p3 0.704 0.291 0.135); /* #c2410c */
    --c-brand-hover: color(display-p3 0.816 0.386 0.222); /* #e05a29 */
    --c-brand-soft: color(display-p3 0.899 0.663 0.563); /* #f0a68b */
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 0.75rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  color: var(--c-text);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Firecrawl weight ceiling: no bold. Emphasis is colour, not weight. */
strong {
  font-weight: 500;
  color: var(--c-ink);
}

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

/* UA default is `margin: 1em 40px` — it silently indents any <figure> out of
   alignment with the rest of the column. */
figure {
  margin: 0;
}

a {
  color: var(--c-action);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--c-ink);
}

:focus-visible {
  outline: 2px solid var(--c-action);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -100%;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--c-brand);
  color: var(--c-ink);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: var(--s-2);
}

.wrap {
  width: min(100% - (2 * var(--page-margin)), var(--maxw));
  margin-inline: auto;
}

/* ——— Blueprint ground ——— */

.blueprint {
  background-color: var(--c-paper);
  background-image:
    linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: -1px -1px;
}

.blueprint--dark {
  background-color: var(--c-charcoal);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

/* Crosshair registration marks */
.crosshair {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  color: var(--c-brand);
  opacity: 0.85;
}

.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.crosshair::before {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.crosshair::after {
  top: 50%;
  left: 0;
  height: 1px;
  width: 100%;
  transform: translateY(-50%);
}

.crosshair--tl {
  top: 1.25rem;
  left: 1.25rem;
}
.crosshair--tr {
  top: 1.25rem;
  right: 1.25rem;
}
.crosshair--bl {
  bottom: 1.25rem;
  left: 1.25rem;
}
.crosshair--br {
  bottom: 1.25rem;
  right: 1.25rem;
}

/* Mono bracket annotations */
.bracket {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 450;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--c-text-faint);
  white-space: nowrap;
}

/* On light grounds the brand orange is 2.89:1 — illegal as text. The darker
   action orange carries the same signal at 4.92:1. Brand orange stays the
   brand orange; only text call-sites move. */
.bracket--brand {
  color: var(--c-action);
}

.bracket--on-dark {
  color: rgba(255, 255, 255, 0.56); /* 6.37:1 — .45 measured 4.40 and failed */
}

.bracket--on-dark.bracket--brand {
  color: var(--c-brand);
}

/* ——— Header ——— */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--c-paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  height: 100%;
}

.wordmark {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
  min-height: 44px;
  justify-content: center;
}

.wordmark__name {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-caption); /* 14 — was 13, off the ladder */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink);
  line-height: 1.1;
}

.wordmark__tag {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-nano);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-action);
  line-height: 1.2;
}

.wordmark__group {
  font-size: 0.85em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--c-text-faint);
  text-transform: none; /* sentence case vs uppercase tag */
}

.wordmark__group::before {
  content: "·";
  margin-inline: 0.35em;
  font-style: normal;
  opacity: 0.7;
}

@media (max-width: 719px) {
  .site-header .wordmark__group {
    display: none;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-ink);
  cursor: pointer;
}

.nav-toggle__bars {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.site-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: var(--header-h);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  padding: var(--s-2);
  box-shadow: var(--elevate);
}

.site-nav.is-open {
  display: block;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.site-nav a {
  --nav-inset-x: 0.75rem;
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap; /* nav labels must never break mid-word */
  min-height: var(--tap);
  padding: 0.5rem var(--nav-inset-x);
  color: var(--c-text);
  text-decoration: none;
  font-weight: 450;
  font-size: var(--t-caption);
  letter-spacing: var(--track-small);
  transition: color var(--t-base) var(--ease);
}

/* L→R underline; drawer uses label inset, desktop sits on header bottom. */
.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: var(--nav-inset-x);
  bottom: 0.35rem;
  height: 2px;
  background: var(--c-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms var(--ease);
}

.site-nav a:hover,
.site-nav a[aria-current="true"] {
  color: var(--c-action);
}

.site-nav a:hover::after,
.site-nav a[aria-current="true"]::after {
  transform: scaleX(1);
}

/* EN | orange pill | PT — knob marks active locale. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: var(--tap);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-mono);
}

.lang-toggle__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  color: var(--c-text-faint);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}

.lang-toggle__opt.is-active,
a.lang-toggle__opt:hover {
  color: var(--c-ink);
}

.lang-toggle__switch {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--c-brand);
  border: 1px solid var(--c-action);
  box-shadow: inset 0 1px 3px rgba(11, 18, 32, 0.22);
  text-decoration: none;
}

.lang-toggle__switch:hover {
  background: var(--c-action);
  border-color: var(--c-action);
}

.lang-toggle__switch:focus-visible {
  outline: 2px solid var(--c-action);
  outline-offset: 3px;
}

.lang-toggle__knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid rgba(11, 18, 32, 0.08);
  box-shadow: 0 1px 3px rgba(11, 18, 32, 0.28);
  transition: transform var(--t-base) var(--ease);
}

.lang-toggle[data-active="pt"] .lang-toggle__knob {
  transform: translateX(1.2rem);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  order: 3; /* stays right of the nav once the nav goes inline at ≥900px */
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: block;
    position: static;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: var(--sp-2);
  }

  .site-nav a {
    --nav-inset-x: var(--sp-12);
    height: var(--header-h);
    min-height: var(--header-h);
    padding: 0 var(--nav-inset-x);
  }

  .site-nav a::after {
    bottom: 0;
  }

  /* Nav + lang toggle flush right. */
  .site-nav {
    order: 2;
    margin-left: auto;
    margin-right: var(--sp-16);
  }
}

/* ——— Language suggest ——— */

.lang-bar {
  display: none;
  background: var(--c-charcoal);
  color: var(--c-text-on-dark);
  font-size: var(--t-caption);
  font-family: var(--font-mono);
  letter-spacing: var(--track-mono);
}

.lang-bar.is-visible {
  display: block;
}

.lang-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: var(--sp-10);
}

.lang-bar a {
  color: var(--c-brand);
  font-weight: 500;
}

.lang-bar__dismiss {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--c-text-muted-on-dark);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

/* ——— Hero ——— */

.hero {
  position: relative;
  min-height: min(92vh, 780px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  color: var(--c-white);
  /* Charcoal decode fallback; photo is the ground (override blueprint grid). */
  background-color: var(--c-charcoal);
  background-image: none;
}

/* Photography layer — edge-to-edge; ::after wash handles legibility. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  margin: 0;
  overflow: hidden;
}

.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Field photo — keep horizon and tanks readable on the open right. */
  object-position: 60% 45%;
}

/* Soft charcoal wash: solid under the copy, long fade into the photograph.
   No hard panel — the image bleeds through the gradient. */
.hero::after {
  --ink: 11, 18, 32;
  --grid-line: rgba(255, 255, 255, 0.045);
  --wash-mask: linear-gradient(90deg, #000 0%, #000 55%, transparent 92%);
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(
      100deg,
      rgb(var(--ink)) 0%,
      rgba(var(--ink), 0.96) 22%,
      rgba(var(--ink), 0.78) 38%,
      rgba(var(--ink), 0.42) 52%,
      rgba(var(--ink), 0.14) 66%,
      rgba(var(--ink), 0) 82%
    ),
    linear-gradient(
      180deg,
      rgba(var(--ink), 0.4) 0%,
      rgba(var(--ink), 0) 28%,
      rgba(var(--ink), 0) 72%,
      rgba(var(--ink), 0.5) 100%
    ),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    var(--grid-size) var(--grid-size),
    var(--grid-size) var(--grid-size);
  -webkit-mask-image: var(--wash-mask);
  mask-image: var(--wash-mask);
}

.hero__frame,
.hero .crosshair {
  z-index: 2;
}

.hero__frame {
  position: relative;
  width: min(100% - (2 * var(--page-margin)), 34rem);
  margin: var(--s-5) auto var(--s-5) max(var(--page-margin), calc((100vw - var(--maxw)) / 2));
}

@media (max-width: 719px) {
  .hero__frame {
    width: min(100% - (2 * var(--page-margin)), var(--maxw));
    margin-inline: var(--page-margin);
  }

  /* Phone: wash from the bottom so the photo stays open at the top. */
  .hero::after {
    background-image:
      linear-gradient(
        180deg,
        rgba(var(--ink), 0.25) 0%,
        rgba(var(--ink), 0.55) 35%,
        rgba(var(--ink), 0.9) 62%,
        rgb(var(--ink)) 100%
      ),
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: var(--s-4);
}

/* Shared with .page-head h1 below — same display type, different margin,
   measure, and colour (the hero inherits white from .hero; .page-head sits on
   .section--dark, which is muted grey, so its h1 needs an explicit override). */
.hero h1,
.page-head h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.hero h1 {
  margin: 0 0 var(--s-3);
  max-width: 14ch;
}

.hero h1 .heat {
  color: var(--c-brand);
}

.hero__lead {
  margin: 0 0 var(--s-5);
  max-width: 34rem;
  font-size: var(--t-lead);
  font-weight: 400;
  color: var(--c-text-on-dark);
  line-height: 1.5;
}

.hero__lead .muted {
  color: var(--c-text-muted-on-dark);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: var(--s-5);
}

.hero__rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ——— Buttons ——— */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem var(--sp-24);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-caption);
  letter-spacing: var(--track-small);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease), color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

.btn--primary {
  background: var(--c-brand);
  color: var(--c-ink);
  box-shadow:
    inset 0 -6px 12px color-mix(in srgb, var(--c-ember-inset) 22%, transparent),
    0 2px 4px color-mix(in srgb, var(--c-brand) 14%, transparent),
    0 1px 1px color-mix(in srgb, var(--c-brand) 14%, transparent),
    0 0.5px 0.5px color-mix(in srgb, var(--c-brand) 18%, transparent),
    0 0.25px 0.25px color-mix(in srgb, var(--c-brand) 22%, transparent);
}

.btn--primary:hover {
  background: var(--c-brand-hover);
  color: var(--c-ink);
}

.btn--ghost {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.35);
}

.btn--ghost:hover {
  background: var(--c-white);
  color: var(--c-ink);
  border-color: var(--c-white);
}

/* ——— Sections ——— */

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--solid {
  background: var(--c-white);
}

.section--dark {
  color: var(--c-text-on-dark);
}

.section__inner {
  width: min(100% - (2 * var(--page-margin)), var(--maxw));
  margin-inline: auto;
}

.section__head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  max-width: 40rem;
}

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-10);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 450;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-action);
}

.section__eyebrow::before {
  content: "";
  width: 1.25rem;
  height: 2px;
  background: var(--c-brand);
  flex-shrink: 0;
}

.section--dark .section__eyebrow {
  color: var(--c-brand);
}

.section h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--c-ink);
  text-wrap: balance;
  max-width: 16ch;
}

.section--dark h2 {
  color: var(--c-white);
}

/* Two-tone headline. On light this must be the action orange: brand orange is
   2.89:1, which fails even the 3:1 large-text bar. */
.section h2 .heat {
  color: var(--c-action);
}

.section--dark h2 .heat {
  color: var(--c-brand);
}

.section__prose {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--t-lead);
  color: var(--c-text);
}

.section__prose + .section__prose {
  margin-top: var(--s-3);
}

.section__prose .muted {
  color: var(--c-text-muted);
}

.section--dark .section__prose {
  color: var(--c-text-on-dark);
}

.section--dark .section__prose .muted {
  color: var(--c-text-muted-on-dark);
}

/* ——— Stats as diagram nodes ——— */

.stats {
  display: grid;
  gap: 1px;
  margin-top: var(--s-5);
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--elevate);
}

.stat {
  background: var(--c-white);
  padding: var(--s-4);
  position: relative;
}

.stat__code {
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.stat__figure {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-stat);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

.stat__label {
  margin: 0.5rem 0 0;
  font-size: var(--t-caption);
  font-weight: 400;
  color: var(--c-text-muted);
  max-width: 16ch;
}

@media (min-width: 720px) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ——— Mission & values ——— */

/* The mission statement is longer than a section heading, so it needs more
   measure than the 16ch display cap. */
.section__head--wide {
  max-width: 52rem;
}

.section__head--wide h2 {
  max-width: 22ch;
}

.values {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-32);
}

.values li {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: var(--sp-16);
}

.values h3 {
  margin: 0 0 var(--sp-8);
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: var(--track-display);
  color: var(--c-white);
}

.values p {
  margin: 0;
  max-width: var(--measure);
  color: var(--c-text-on-dark);
}

@media (min-width: 720px) {
  .values {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-40);
  }
}

/* ——— Lease register ——— */

.leases {
  display: grid;
  gap: var(--sp-32);
  margin-top: var(--s-5);
}

@media (min-width: 720px) {
  .leases {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-24) var(--sp-40);
    align-items: start;
  }
}

.lease-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: var(--track-mono);
}

/* Flex on <caption> collapses width; flex the inner wrapper instead. */
.lease-table caption {
  padding-bottom: var(--sp-12);
  text-align: left;
}

.lease-table__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-8) var(--sp-12);
}

.lease-table__county {
  font-size: var(--t-h3);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: var(--track-display);
  color: var(--c-ink);
}

.lease-table__district {
  font-size: var(--t-micro);
  text-transform: uppercase;
  color: var(--c-action);
  white-space: nowrap; /* "[ District 05 ]" must never break across lines */
}

.lease-table th {
  text-align: left;
  font-weight: 450;
  font-size: var(--t-micro);
  text-transform: uppercase;
  color: var(--c-text-faint);
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--c-border);
}

.lease-table td {
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  vertical-align: top;
}

/* Lease numbers are the index column: tabular figures keep them aligned. */
.lease-table td:first-child {
  width: 8.5em;
  padding-right: var(--sp-16);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lease-table tbody tr:hover td {
  color: var(--c-ink);
}

/* ——— Principles as spec rows ——— */

.principles {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 44rem;
  border-top: 1px solid var(--c-border);
}

.principles li {
  display: grid;
  gap: var(--sp-6);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-border);
  grid-template-columns: auto 1fr;
  column-gap: var(--s-3);
  align-items: baseline;
}

.principles__idx {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mono);
  color: var(--c-action); /* 5.18:1 on white; brand was 3.04:1 at 12px */
  font-weight: 500;
}

.principles h3 {
  margin: 0;
  grid-column: 2;
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: var(--track-display);
  color: var(--c-ink);
}

.principles p {
  margin: 0;
  grid-column: 2;
  max-width: var(--measure);
  color: var(--c-text-muted);
  font-size: var(--t-body);
}

/* ——— Geography diagram ——— */

.geo {
  display: grid;
  gap: var(--s-4);
}

.geo--split {
  gap: var(--s-5);
  align-items: start;
}

@media (min-width: 900px) {
  .geo--split {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.95fr);
    gap: var(--sp-40);
    align-items: center;
  }
}

.geo__copy,
.geo-map {
  min-width: 0;
}

.geo__copy {
  display: grid;
  gap: var(--s-4);
}

.geo__copy .section__head {
  margin-bottom: 0;
}

.geo-map {
  margin: 0;
}

.geo-map__object,
.geo-map__object img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 28rem;
  border: 0;
  background: transparent;
}

.geo-map__caption {
  margin: var(--sp-12) 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.geo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--elevate);
  max-width: 40rem;
}

.geo-list li {
  background: var(--c-white);
  padding: var(--s-3) var(--s-4);
}

.geo-list__label {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 450;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--c-action);
}

.geo-list__value {
  margin: 0;
  font-size: var(--t-lead);
  color: var(--c-ink);
  font-weight: 450;
}

.nodes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nodes > li:not(.nodes__rail) {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--c-ink);
  padding: var(--sp-8) var(--sp-12);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-white);
  box-shadow: 0 0 0 4px var(--c-paper);
}

.nodes > li.is-active {
  border-color: color-mix(in srgb, var(--c-brand) 55%, var(--c-border));
  color: var(--c-action);
  box-shadow:
    0 0 0 4px var(--c-paper),
    0 0 0 5px color-mix(in srgb, var(--c-brand) 35%, transparent);
}

.nodes__rail {
  width: 1.5rem;
  height: 1px;
  padding: 0;
  border: 0;
  background: var(--c-border);
  flex-shrink: 0;
  box-shadow: none;
  list-style: none;
}

/* ——— Contact (split: copy | photo) ——— */

.contact {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--c-charcoal);
  color: var(--c-text-on-dark);
  overflow: hidden;
}

.contact__copy {
  position: relative;
  padding-block: var(--section-y);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: -1px -1px;
}

.contact__inner {
  width: min(100% - (2 * var(--page-margin)), calc(var(--maxw) / 2));
  margin-inline: auto;
}

.contact__inner .section__eyebrow {
  color: var(--c-brand);
}

.contact__inner h2 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--c-white);
  text-wrap: balance;
  max-width: 16ch;
}

.contact__media {
  display: block;
  position: relative;
  min-height: 16rem;
  margin: 0;
  background: var(--c-charcoal);
  overflow: hidden;
}

.contact__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 16rem;
  object-fit: cover;
  object-position: 68% 50%;
  /* Fade photo into charcoal (stacked: from the top). */
  --fade: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 22%,
    rgba(0, 0, 0, 0.85) 55%,
    #000 78%
  );
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}

@media (min-width: 900px) {
  .contact {
    grid-template-columns: 1fr 1fr;
    min-height: 28rem;
  }

  .contact__copy {
    display: flex;
    align-items: center;
  }

  .contact__inner {
    /* Same left edge as .section__inner / .site-footer__inner */
    width: min(100% - (2 * var(--page-margin)), 32rem);
    margin-left: max(var(--page-margin), calc((100vw - var(--maxw)) / 2));
    margin-right: var(--sp-40);
  }

  .contact__media {
    min-height: 100%;
  }

  .contact__media img {
    position: absolute;
    inset: 0;
    min-height: 100%;
    /* Desktop split: charcoal → photo left-to-right. */
    --fade: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 16%,
      rgba(0, 0, 0, 0.7) 40%,
      #000 68%
    );
  }
}

.contact-card {
  margin-top: var(--s-2);
  max-width: 36rem;
  padding: var(--sp-20);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: color-mix(in srgb, #000 20%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-charcoal) 50%, transparent);
}

.contact-card p {
  margin: 0 0 var(--s-3);
  color: var(--c-text-on-dark);
  font-size: var(--t-lead);
}

.contact-card a.contact-email {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font-mono);
  font-size: clamp(0.875rem, 0.7rem + 0.75vw, 1.25rem);
  font-weight: 450;
  letter-spacing: -0.01em;
  color: var(--c-brand);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-card a.contact-email:hover {
  color: var(--c-white);
  text-decoration: underline;
}

.contact-card__note {
  margin-top: var(--s-3) !important;
  font-size: var(--t-caption) !important;
  color: var(--c-text-muted-on-dark) !important;
  font-family: var(--font-mono);
  letter-spacing: var(--track-mono);
}

.contact-card__note a {
  color: var(--c-text-on-dark);
}

/* ——— Footer ——— */

.site-footer {
  position: relative;
  color: var(--c-text-muted-on-dark);
  padding-block: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__inner {
  width: min(100% - (2 * var(--page-margin)), var(--maxw));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.site-footer .wordmark__name {
  color: var(--c-white);
}

.site-footer p {
  margin: 0;
  max-width: 40rem;
  font-size: var(--t-caption);
  font-family: var(--font-mono);
  letter-spacing: var(--track-mono);
  line-height: 1.55;
}

.site-footer a {
  color: var(--c-text-on-dark);
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}

/* Standalone links, not inline in prose — they owe the full 44px target. */
.site-footer__meta a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/* ——— Legal (terms / privacy) ——— */

.legal__inner {
  width: min(100% - (2 * var(--page-margin)), 40rem);
  margin-inline: auto;
}

.legal h1 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--c-ink);
  text-wrap: balance;
}

.legal__updated {
  margin: 0 0 var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: var(--track-mono);
  color: var(--c-text-faint);
}

/* Overrides .section h2 (display size / 16ch cap) for long legal headings. */
.legal h2 {
  margin: var(--s-5) 0 var(--s-2);
  font-size: var(--t-h3);
  max-width: none;
}

.legal__list {
  margin: 0 0 var(--s-3);
  padding-left: 1.25rem;
  max-width: var(--measure);
  font-size: var(--t-lead);
  color: var(--c-text);
  line-height: 1.55;
}

.legal__list li + li {
  margin-top: var(--s-1);
}

/* ——— 404 ——— */

.page-404 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-404 main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6) var(--s-2);
  text-align: left;
}

.page-404 h1 {
  font-weight: 500;
  font-size: var(--t-h1);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  margin: 0 0 var(--s-3);
  color: var(--c-white);
}

.page-404 p {
  color: var(--c-text-on-dark);
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-caption);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ——— Production charts ——— */

.chart-figure {
  margin: var(--s-5) 0 0;
  padding: var(--sp-20);
  background: var(--c-white);
  border-radius: var(--radius);
  /* Hairline folded into the elevation stack rather than set as a border,
     plus a halo ring in the page colour to punch the panel clear of the
     graph-paper ground it sits on. */
  box-shadow:
    0 0 0 6px var(--c-paper),
    var(--elevate);
}

@media (min-width: 640px) {
  .chart-figure {
    padding: var(--sp-32);
  }
}

.chart-figure__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-16);
  margin-bottom: var(--sp-16);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}

.chart-figure__title {
  color: var(--c-ink);
  font-weight: 500;
}

.chart-figure__note {
  color: var(--c-text-muted);
}

/* Charts are authored at a fixed viewBox and scale to the column. Colour
   resolves through the site tokens (the SVG is inlined, so custom properties
   cascade in) — including the Display-P3 upgrade. No hardcoded hex. */
.chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Graph-paper rules, not chart junk: hairline, dashed, same weight as the
   blueprint ground underneath. */
.chart__grid {
  stroke: var(--c-border);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.chart__axis {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 450;
  letter-spacing: var(--track-mono);
  fill: var(--c-text-muted);
}

/* Filled = a complete reported period, textured rather than a flat colour so
   it matches the site's blueprint/diagram illustration grammar. */
.chart__barfill {
  fill: var(--c-brand);
}

.chart__bartex {
  fill: var(--c-ink);
  opacity: 0.18;
}

.chart__bar {
  fill: url(#dot);
}

/* Hollow = a partial period. Firecrawl's filled-vs-outline device, used here to
   show that a part-year is not a whole one. */
.chart__bar--partial {
  fill: none;
  stroke: var(--c-brand);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.chart__peak {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-mono);
  fill: var(--c-action);
}

/* Registration marks — the same furniture as the section crosshairs. */
.chart__reg line {
  stroke: var(--c-brand);
  stroke-width: 1;
}

.section__prose--after {
  margin-top: var(--s-4);
}

.link-arrow {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: var(--track-mono);
  color: var(--c-action);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.link-arrow:hover {
  color: var(--c-ink);
  text-decoration: underline;
}

/* ——— Interior page head ——— */

.page-head h1 {
  margin: 0;
  color: var(--c-white);
  max-width: 18ch;
}

.page-head .hero__rail {
  margin-top: var(--s-4);
}