/*!
 * ELPI Landing — Cadastral Terminal design system (theme base layer)
 * Tokens: AURADESIGN.md v1.0.0 + a11y delta (performance-accessibility-map §10.1 #1–#6)
 * Page-specific section styles are appended by the page-build stage.
 */

/* ---------------------------------------------------------------------------
 * 1. Self-hosted fonts (latin + latin-ext, font-display: swap, 7 files)
 * ------------------------------------------------------------------------ */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-grotesk-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------
 * 2. Tokens
 * ------------------------------------------------------------------------ */
:root {
  /* Surfaces */
  --ink-900: #081A12;
  --ink-800: #0E2A1E;
  --ink-700: #143A2A;
  --forest-600: #1E4D35;
  --gridline: #2A5A41;
  --paper-100: #F4F1EA;
  --paper-200: #EDE8DD;
  --paper-300: #E2DBCB;
  /* Earth */
  --earth-700: #4A3826;
  --earth-500: #6B4F33;
  --earth-300: #A88E6F;
  /* Copper accent */
  --copper-500: #C47E3D;
  --copper-400: #D98E45;
  --copper-200: #E8C49A;
  --copper-600: #9C5F27; /* a11y delta: links/focus on paper */
  /* Utility / data */
  --sage-300: #9DB8A6;
  /* Signal colors (decision chips only) */
  --signal-pass: #3E7C5B;
  --signal-caution: #C9A227;
  --signal-reject: #A4502E;
  /* a11y delta: chip text on paper surfaces */
  --signal-pass-text-paper: #2F6147;
  --signal-caution-text-paper: #7E650F;
  --signal-reject-text-paper: #8F4527;
  /* a11y delta: error text on dark surfaces (signal-reject lightened for ink-900 contrast) */
  --signal-reject-text-dark: #E08B66;
  /* Text */
  --text-on-paper: #1A2620;
  --text-on-paper-muted: #5C6660;
  --text-on-dark: #EFEDE5;
  --text-on-dark-muted: #A8B5AC;
  --paper-hairline: #D6CFBD;
  --paper-grid: #E6E0D2;

  /* Typography */
  --font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --fs-hero-h1: clamp(40px, 5.2vw, 72px);
  --fs-h2: clamp(30px, 3.4vw, 44px);
  --fs-h3: clamp(22px, 2.2vw, 28px);
  --fs-body-lg: 19px;
  --fs-body: 16.5px;
  --fs-small: 14px;
  --fs-data-lg: clamp(28px, 3vw, 40px);
  --fs-data: 14px;
  --fs-label: 12px;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1360px;
  --gutter: 24px;
  --section-pad: 112px;
  --nav-height: 64px;

  /* Shape */
  --radius: 2px;
  --radius-card: 4px;
  --border-hairline-dark: 1px solid var(--gridline);
  --border-hairline-paper: 1px solid var(--paper-hairline);
  --border-cadastral: 1.5px dashed var(--earth-500);
  --rule-data: 1px solid rgba(232, 196, 154, 0.5);

  /* Depth (flat, print-like) */
  --shadow-card: 0 1px 0 rgba(8, 26, 18, 0.08), 0 8px 24px -16px rgba(8, 26, 18, 0.25);
  --shadow-raised: 0 12px 40px -20px rgba(8, 26, 18, 0.45);

  /* Focus (dual-surface, a11y delta #4) */
  --focus-ring-color: var(--copper-400);

  /* Surface-context defaults (paper) */
  --surface-bg: var(--paper-100);
  --surface-text: var(--text-on-paper);
  --surface-text-muted: var(--text-on-paper-muted);
  --surface-hairline: var(--paper-hairline);
  --surface-link: var(--copper-600);

  /* Motion */
  --dur-hover: 180ms;
  --dur-accordion: 0.3s;

  /* Graticule */
  --graticule-cell: 64px;
}

@media (max-width: 768px) {
  :root {
    --section-pad: 80px;
    --graticule-cell: 128px; /* density halves below 768px */
  }
}
@media (max-width: 480px) {
  :root {
    --section-pad: 64px;
  }
}

/* Surface contexts: components inherit correct text/hairline/focus tokens */
.surface-paper {
  --surface-bg: var(--paper-100);
  --surface-text: var(--text-on-paper);
  --surface-text-muted: var(--text-on-paper-muted);
  --surface-hairline: var(--paper-hairline);
  --surface-link: var(--copper-600);
  --focus-ring-color: var(--copper-600);
  background-color: var(--surface-bg);
  color: var(--surface-text);
}
.surface-paper--200 { --surface-bg: var(--paper-200); background-color: var(--paper-200); }
.surface-paper--300 { --surface-bg: var(--paper-300); background-color: var(--paper-300); }
.surface-dark {
  --surface-bg: var(--ink-800);
  --surface-text: var(--text-on-dark);
  --surface-text-muted: var(--text-on-dark-muted);
  --surface-hairline: var(--gridline);
  --surface-link: var(--copper-500);
  --focus-ring-color: var(--copper-400);
  background-color: var(--surface-bg);
  color: var(--surface-text);
}
.surface-dark--900 { --surface-bg: var(--ink-900); background-color: var(--ink-900); }
.surface-earth {
  --surface-bg: var(--earth-700);
  --surface-text: var(--text-on-dark);
  --surface-text-muted: var(--copper-200);
  --surface-hairline: rgba(244, 241, 234, 0.25);
  --surface-link: var(--copper-200);
  --focus-ring-color: var(--copper-400);
  background-color: var(--surface-bg);
  color: var(--surface-text);
}

/* ---------------------------------------------------------------------------
 * 3. Base / reset
 * ------------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background-color: var(--paper-100);
  color: var(--text-on-paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img,
svg,
canvas {
  max-width: 100%;
  height: auto;
  display: block;
}
/* <picture> is a WebP-source wrapper only; it must not create a layout box,
   so percentage sizing on the inner <img> keeps resolving against the figure. */
picture {
  display: contents;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  line-height: 1.12;
  margin: 0 0 0.5em;
  color: inherit;
}
h1 {
  font-size: var(--fs-hero-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
}
p {
  margin: 0 0 1em;
}
a {
  color: var(--surface-link, var(--copper-600));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-hover) ease-out;
}
a:hover {
  color: var(--copper-500);
}
ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.25em;
}
hr {
  border: 0;
  border-top: var(--border-hairline-paper);
  margin: 32px 0;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-data);
  font-size: var(--fs-data);
  font-variant-numeric: tabular-nums;
}
caption {
  text-align: left;
}
th,
td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: var(--rule-data);
}
thead th {
  background: var(--paper-300);
  color: var(--text-on-paper);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-label);
  border-bottom: var(--border-hairline-paper);
}
blockquote {
  margin: 0 0 1em;
  padding: 16px 24px;
  border-left: 2px solid var(--copper-500);
  background: var(--paper-200);
}
code,
pre,
kbd {
  font-family: var(--font-data);
  font-size: 0.9em;
}

/* Focus-visible: dual ring via surface context (WCAG 1.4.11, a11y delta #4) */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

::selection {
  background: var(--copper-200);
  color: var(--ink-900);
}

/* ---------------------------------------------------------------------------
 * 4. Utilities
 * ------------------------------------------------------------------------ */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--copper-500);
  color: var(--ink-900);
  font-family: var(--font-data);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top 0.15s ease-out;
}
.skip-link:focus {
  top: 8px;
}

.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container--wide {
  max-width: var(--container-wide);
}

.u-label {
  font-family: var(--font-data);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.u-data {
  font-family: var(--font-data);
  font-size: var(--fs-data);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.u-data-lg {
  font-family: var(--font-data);
  font-size: var(--fs-data-lg);
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.u-tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.u-muted {
  color: var(--surface-text-muted, var(--text-on-paper-muted));
}

/* ---------------------------------------------------------------------------
 * 5. Sections, bands, graticule
 * ------------------------------------------------------------------------ */
.section {
  position: relative;
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}
.band {
  position: relative;
}
/* Persistent graticule layer: 64px hairline grid at 4-6% */
.band--graticule::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--band-grid-color, rgba(42, 90, 65, 0.5)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--band-grid-color, rgba(42, 90, 65, 0.5)) 1px, transparent 1px);
  background-size: var(--graticule-cell) var(--graticule-cell);
  opacity: var(--band-grid-opacity, 0.05);
}
.band--graticule > * {
  position: relative;
  z-index: 1;
}
.surface-paper.band--graticule::before,
.surface-paper--200.band--graticule::before,
.surface-paper--300.band--graticule::before {
  --band-grid-color: #E6E0D2;
  --band-grid-opacity: 0.55; /* #E6E0D2 on paper ~= 4-6% perceptual */
}
.surface-earth.band--graticule::before {
  --band-grid-color: rgba(244, 241, 234, 0.6);
  --band-grid-opacity: 0.05;
}

/* Coordinate tick decor (aria-hidden, hidden on mobile) */
.coord-tick {
  position: absolute;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--surface-text-muted);
  opacity: 0.7;
  pointer-events: none;
}
@media (max-width: 768px) {
  .coord-tick {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * 6. Section transitions (cartographic joints — AURA_SECTION_TRANSITIONS)
 * ------------------------------------------------------------------------ */
/* contour-line-divider: inline SVG container between sections */
.joint-contour {
  display: block;
  width: 100%;
  height: 84px;
  margin: 0;
  line-height: 0;
}
.joint-contour svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* cadastral-cut: angular polyline clip on the leading section */
.joint-cadastral-cut {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), 64% calc(100% - 22px), 31% 100%, 0 calc(100% - 38px));
  padding-bottom: calc(var(--section-pad) + 56px);
}
.joint-cadastral-cut__edge {
  position: relative;
  z-index: 2;
  margin-top: -58px;
  height: 60px;
  pointer-events: none;
}
.joint-cadastral-cut__edge svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* layer-overlap: instrument crosses the seam 48-64px (24px mobile) */
.joint-layer-overlap {
  position: relative;
  z-index: 3;
  margin-bottom: -64px;
}
.joint-layer-overlap--target {
  padding-top: calc(var(--section-pad) + 64px);
}
@media (max-width: 768px) {
  .joint-layer-overlap {
    margin-bottom: -24px;
  }
  .joint-layer-overlap--target {
    padding-top: calc(var(--section-pad) + 24px);
  }
}
/* graticule-fade: leaving grid continues 120px into next band, fading out */
.joint-graticule-fade {
  position: relative;
}
.joint-graticule-fade::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--joint-fade-color, rgba(42, 90, 65, 0.5)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--joint-fade-color, rgba(42, 90, 65, 0.5)) 1px, transparent 1px);
  background-size: var(--graticule-cell) var(--graticule-cell);
  opacity: 0.06;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
/* ledger-rule: quiet double-hairline joint */
.joint-ledger-rule {
  border: 0;
  height: 6px;
  margin: 0;
  border-top: 1px solid var(--surface-hairline, var(--paper-hairline));
  border-bottom: 1px solid rgba(232, 196, 154, 0.5);
}

/* ---------------------------------------------------------------------------
 * 7. Buttons
 * ------------------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--dur-hover) ease-out, border-color var(--dur-hover) ease-out,
    color var(--dur-hover) ease-out, transform var(--dur-hover) ease-out;
}
.btn--primary {
  background-color: var(--copper-500);
  color: var(--ink-900);
}
.btn--primary:hover {
  background-color: var(--copper-400);
  color: var(--ink-900);
  transform: translateY(-1px);
}
.btn--primary:active {
  background-color: #B47436; /* copper-500 darkened 8% */
  transform: none;
}
.btn--secondary {
  background: transparent;
  border-color: var(--surface-hairline, var(--gridline));
  color: inherit;
}
.btn--secondary:hover {
  border-color: var(--copper-400);
  color: var(--copper-500);
  transform: translateY(-1px);
}
.btn[disabled],
.btn--disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Ledger link: textual section CTA (one copper button per viewport rule) */
.ledger-link {
  font-family: var(--font-data);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 1px solid var(--copper-500);
  padding-bottom: 3px;
  color: inherit;
  transition: color var(--dur-hover) ease-out, border-color var(--dur-hover) ease-out;
}
.ledger-link:hover {
  color: var(--copper-500);
}

/* ---------------------------------------------------------------------------
 * 8. Header / navigation
 * ------------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background-color: rgba(14, 42, 30, 0.92); /* ink-800 @92% */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-on-dark);
  --surface-text: var(--text-on-dark);
  --surface-hairline: var(--gridline);
  --surface-link: var(--copper-500);
  --focus-ring-color: var(--copper-400);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-hover) ease-out;
}
.site-header.is-scrolled {
  border-bottom-color: var(--gridline);
}
.admin-bar .site-header {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  height: 100%;
}
.site-header .wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-on-dark);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list a {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-on-dark);
  text-decoration: none;
  padding: 12px 14px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-hover) ease-out, border-color var(--dur-hover) ease-out;
}
.site-nav__list a:hover {
  color: var(--copper-400);
  border-bottom-color: var(--copper-400);
}
.site-nav__list a[aria-current="page"] {
  color: var(--copper-400);
  border-bottom-color: var(--copper-500);
}
.site-nav .btn {
  margin-left: 12px;
  padding: 10px 20px;
}
.nav-toggle {
  display: none;
  position: relative;
  background: transparent;
  border: 1px solid var(--gridline);
  border-radius: var(--radius);
  color: var(--text-on-dark);
  font-family: var(--font-data);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 16px;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}
.nav-toggle__icon {
  display: block;
  flex-shrink: 0;
}
.nav-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nav-toggle:hover {
  border-color: var(--copper-400);
  color: var(--copper-400);
}

@media (max-width: 1023px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .site-nav {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: var(--ink-900);
    flex-direction: column;
    align-items: stretch;
    padding: 32px var(--gutter);
    overflow-y: auto;
  }
  .admin-bar .site-nav {
    top: calc(var(--nav-height) + 46px);
  }
  .site-nav.is-open {
    display: flex;
  }
  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav__list a {
    display: block;
    padding: 16px 8px;
    min-height: 48px;
    font-size: 15px;
    border-bottom: 1px solid var(--gridline);
  }
  .site-nav .btn {
    margin: 24px 8px 0;
    padding: 16px 24px;
  }
}

/* ---------------------------------------------------------------------------
 * 9. Footer
 * ------------------------------------------------------------------------ */
.site-footer {
  position: relative;
  background: var(--ink-800);
  color: var(--text-on-dark);
  --surface-text: var(--text-on-dark);
  --surface-text-muted: var(--text-on-dark-muted);
  --surface-hairline: var(--gridline);
  --surface-link: var(--copper-500);
  --focus-ring-color: var(--copper-400);
  padding: 72px 0 40px;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(42, 90, 65, 0.6) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(42, 90, 65, 0.6) 1px, transparent 1px);
  background-size: var(--graticule-cell) var(--graticule-cell);
  opacity: 0.06;
}
.site-footer > .container {
  position: relative;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px var(--gutter);
}
@media (max-width: 1023px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}
.site-footer__heading {
  font-family: var(--font-data);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-on-dark-muted);
  margin: 0 0 16px;
}
.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__nav a {
  display: inline-block;
  padding: 6px 0;
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: var(--fs-small);
  border-bottom: 1px solid transparent;
}
.site-footer__nav a:hover {
  color: var(--copper-400);
  border-bottom-color: var(--copper-400);
}
.site-footer__desc {
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
  max-width: 36ch;
}
.site-footer__email {
  font-family: var(--font-data);
  font-size: var(--fs-data);
  color: var(--copper-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 196, 154, 0.5);
}
.site-footer__email:hover {
  color: var(--copper-200);
}
.site-footer__cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--gridline);
}
.site-footer__smallprint {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--gridline);
  font-family: var(--font-data);
  font-size: var(--fs-label);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--text-on-dark-muted);
}

/* ---------------------------------------------------------------------------
 * 10. Cookie consent banner
 * ------------------------------------------------------------------------ */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--ink-800);
  color: var(--text-on-dark);
  --surface-text: var(--text-on-dark);
  --surface-link: var(--copper-400);
  --focus-ring-color: var(--copper-400);
  border-top: 1px solid var(--gridline);
  padding: 16px 0;
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.cookie-banner__text {
  margin: 0;
  font-size: var(--fs-small);
  max-width: 70ch;
}
.cookie-banner__text a {
  color: var(--copper-400);
}
.cookie-banner__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cookie-banner .btn {
  padding: 10px 20px;
  min-height: 44px;
}

/* ---------------------------------------------------------------------------
 * 11. Forms (lead form + search + comments)
 * ------------------------------------------------------------------------ */
.form-field {
  margin-bottom: 20px;
}
.form-field label {
  display: block;
  font-family: var(--font-data);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  color: inherit;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="search"],
.form-field textarea {
  width: 100%;
  background: var(--paper-100);
  color: var(--text-on-paper);
  border: 1px solid var(--earth-500);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  min-height: 48px;
  transition: border-color var(--dur-hover) ease-out;
}
.form-field textarea {
  min-height: 140px;
  resize: vertical;
}
.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  border-color: var(--copper-500);
}
.form-field.has-error input,
.form-field.has-error textarea {
  border-color: var(--signal-reject);
}
.form-field__error {
  display: block;
  margin-top: 6px;
  font-family: var(--font-data);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--signal-reject-text-paper);
}
.surface-dark .form-field__error,
.surface-dark--900 .form-field__error {
  color: var(--signal-reject-text-dark); /* design fix C1 P2-1: tokenized (was hardcoded #E08B66) */
}
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 24px 0;
}
.form-consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--copper-500);
  flex: none;
}
.form-consent label {
  font-size: var(--fs-small);
  line-height: 1.5;
}
/* Honeypot: offscreen, AT-safe (NOT display:none) */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  margin-top: 16px;
}
.form-status__panel {
  padding: 20px 24px;
  border: var(--border-cadastral);
  border-radius: var(--radius);
  background: var(--paper-300);
  color: var(--text-on-paper);
  font-size: var(--fs-small);
}
.form-status__panel--error {
  border-color: var(--signal-reject);
}

.search-form {
  display: flex;
  gap: 12px;
  align-items: stretch;
  max-width: 560px;
}
.search-form input[type="search"] {
  flex: 1;
  background: var(--paper-100);
  color: var(--text-on-paper);
  border: 1px solid var(--earth-500);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-height: 48px;
  font-size: var(--fs-body);
}

/* ---------------------------------------------------------------------------
 * 12. Components (design-system layer)
 * ------------------------------------------------------------------------ */
/* Image plate: framed figure with cadastral dashed border + paper mat */
.image-plate {
  position: relative;
  margin: 0;
  padding: 16px;
  background: var(--paper-100);
  border: var(--border-cadastral);
  border-radius: var(--radius);
}
.surface-dark .image-plate,
.surface-dark--900 .image-plate,
.surface-earth .image-plate {
  background: var(--ink-700);
  border-color: var(--earth-300);
}
.image-plate img {
  width: 100%;
  border-radius: var(--radius);
}
.image-plate__caption {
  margin-top: 12px;
  font-family: var(--font-data);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--surface-text-muted);
}

/* Stat block: mono readout + label + source marker */
.stat-block__value {
  font-family: var(--font-data);
  font-size: var(--fs-data-lg);
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--copper-500);
}
.surface-paper .stat-block__value,
.surface-paper--200 .stat-block__value,
.surface-paper--300 .stat-block__value {
  color: var(--earth-700);
}
.stat-block__label {
  font-family: var(--font-data);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 8px;
  color: var(--surface-text-muted);
}
.stat-block__source {
  font-family: var(--font-data);
  font-size: 11px;
  margin-top: 6px;
  color: var(--surface-text-muted);
}

/* Capability tile */
.capability-tile {
  background: var(--paper-200);
  border: var(--border-hairline-paper);
  border-radius: var(--radius-card);
  padding: 28px;
  color: var(--text-on-paper);
  transition: border-color var(--dur-hover) ease-out, transform var(--dur-hover) ease-out;
}
.capability-tile:hover {
  border-color: var(--copper-200);
  transform: translateY(-1px);
}
.capability-tile__icon {
  display: inline-block; /* design fix C1 P1-1: inline span ignored 32px box, SVG stretched to tile width */
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  color: var(--copper-500);
}
.capability-tile__icon svg {
  display: block;
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}
.capability-tile__ref {
  margin-top: 16px;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-on-paper-muted);
}

/* Score panel: forest-600, bars copper-400, values text-on-dark (a11y delta #5) */
.score-panel {
  background: var(--forest-600);
  color: var(--text-on-dark);
  --surface-text: var(--text-on-dark);
  --surface-text-muted: var(--text-on-dark-muted);
  --focus-ring-color: var(--copper-400);
  border: 1px solid var(--gridline);
  border-radius: var(--radius-card);
  padding: 24px;
}
.score-panel__row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr 56px;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(42, 90, 65, 0.8);
}
.score-panel__row:last-child {
  border-bottom: 0;
}
.score-panel__label {
  font-family: var(--font-data);
  font-size: 14px; /* >=14px on forest-600 panels (contrast audit) */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-on-dark);
}
.score-panel__track {
  height: 6px;
  background: var(--gridline);
  border-radius: 1px;
  overflow: hidden;
}
.score-panel__bar {
  height: 100%;
  background: var(--copper-400);
  transform-origin: left center;
}
.score-panel__value {
  font-family: var(--font-data);
  font-size: var(--fs-data);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-on-dark);
}

/* Decision chip: signal bg 12%, dual-surface text tokens (a11y delta #1-#3) */
.chip {
  display: inline-block;
  font-family: var(--font-data);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.chip--pass {
  color: var(--signal-pass);
  background: rgba(62, 124, 91, 0.12);
}
.chip--caution {
  color: var(--signal-caution);
  background: rgba(201, 162, 39, 0.12);
}
.chip--reject {
  color: var(--signal-reject);
  background: rgba(164, 80, 46, 0.12);
}
.chip--neutral {
  color: var(--surface-text-muted);
  background: rgba(92, 102, 96, 0.1);
}
.surface-paper .chip--pass,
.surface-paper--200 .chip--pass,
.surface-paper--300 .chip--pass {
  color: var(--signal-pass-text-paper);
}
.surface-paper .chip--caution,
.surface-paper--200 .chip--caution,
.surface-paper--300 .chip--caution {
  color: var(--signal-caution-text-paper);
}
.surface-paper .chip--reject,
.surface-paper--200 .chip--reject,
.surface-paper--300 .chip--reject {
  color: var(--signal-reject-text-paper);
}

/* Fair value matrix: mobile horizontal scroll region */
.matrix-scroll {
  overflow-x: auto;
  border: var(--border-hairline-paper);
  border-radius: var(--radius);
  /* A grid/flex item defaults to min-width:auto, i.e. it refuses to shrink
     below its content. That silently defeated the overflow-x above: instead of
     staying inside the column and scrolling, this box grew to the table's
     640px min-width and pushed the whole PAGE to ~900px on a 390px phone.
     min-width:0 lets the item shrink so the scroll region actually scrolls. */
  min-width: 0;
  max-width: 100%;
}
.matrix-scroll table {
  min-width: 640px;
}

/* Every OTHER table on the site: methodology, compliance, the cookie table and
   the externally authored article bodies. Only the fair-value matrix ever got a
   scroll wrapper, so the rest pushed the page sideways on a phone (a 417px
   table in a 342px column). Article bodies are authored outside the theme, so
   this has to hold without a wrapper element.

   display:block turns the table into a scroll container in place; the row boxes
   still lay out as a table inside it. Scoped to <=1023px, where the splits have
   already collapsed to one column: above that the container is wide enough that
   no table overflows, and tables keep display:table so column widths still
   distribute across the full width exactly as before. */
@media (max-width: 1023px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  /* The matrix already scrolls via its wrapper; leave its table a real table. */
  .matrix-scroll table {
    display: table;
    overflow-x: visible;
  }
}
.matrix-scroll__hint {
  display: none;
  font-family: var(--font-data);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--surface-text-muted);
  padding: 8px 0 0;
}
@media (max-width: 768px) {
  .matrix-scroll__hint {
    display: block;
  }
}
.matrix-caption {
  font-family: var(--font-data);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--surface-text-muted);
  padding: 8px 0;
}

/* Provenance stamp */
.provenance-stamp {
  font-family: var(--font-data);
  font-size: var(--fs-data);
  font-variant-numeric: tabular-nums;
  background: var(--paper-300);
  color: var(--text-on-paper);
  border: var(--border-cadastral);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.provenance-stamp--dark {
  background: var(--ink-700);
  color: var(--text-on-dark);
  border-color: var(--earth-300);
}
.provenance-stamp__row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 0;
}
.provenance-stamp__key {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

/* Citation footnote row */
.citation-row {
  margin-top: 20px;
  padding-top: 12px;
  border-top: var(--rule-data);
  font-family: var(--font-data);
  font-size: var(--fs-label);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--surface-text-muted);
}
.citation-row sup,
.citation-marker {
  color: var(--copper-500);
}
.surface-paper .citation-row a,
.surface-paper--200 .citation-row a,
.surface-paper--300 .citation-row a {
  color: var(--copper-600);
}

/* Dataset row */
.dataset-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto 2fr;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: var(--rule-data);
  transition: border-color var(--dur-hover) ease-out;
}
.dataset-row:hover {
  border-bottom-color: var(--copper-500);
}
.dataset-row__name {
  font-family: var(--font-data);
  font-size: var(--fs-data);
}
.dataset-row__count {
  font-family: var(--font-data);
  font-size: var(--fs-data);
  font-variant-numeric: tabular-nums;
  color: var(--copper-500);
}
.surface-paper .dataset-row__count,
.surface-paper--200 .dataset-row__count {
  color: var(--earth-700);
}
.dataset-row__use {
  font-size: var(--fs-small);
  color: var(--surface-text-muted);
}
@media (max-width: 600px) {
  .dataset-row {
    grid-template-columns: 1fr auto;
  }
  .dataset-row__use {
    grid-column: 1 / -1;
  }
}

/* Definition block: paper-300 inset, FULL text-on-paper body (a11y delta #6) */
.definition-block {
  background: var(--paper-300);
  color: var(--text-on-paper);
  border: var(--border-cadastral);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 24px 0;
}
.definition-block__term {
  font-family: var(--font-data);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
  color: var(--earth-700);
}
.definition-block p {
  margin: 0;
  color: var(--text-on-paper); /* never the muted token on paper-300 */
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* FAQ accordion: button + grid-rows panel (height anim is the documented exception) */
.accordion {
  border-top: var(--border-hairline-paper);
}
.surface-dark .accordion,
.surface-dark--900 .accordion {
  border-top-color: var(--gridline);
}
.accordion__item {
  border-bottom: var(--border-hairline-paper);
}
.surface-dark .accordion__item,
.surface-dark--900 .accordion__item {
  border-bottom-color: var(--gridline);
}
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 56px;
  padding: 18px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
}
.accordion__marker {
  font-family: var(--font-data);
  font-size: 20px;
  line-height: 1;
  color: var(--copper-500);
  flex: none;
  transition: transform var(--dur-accordion) ease;
}
.accordion__trigger[aria-expanded="true"] .accordion__marker {
  transform: rotate(45deg); /* + becomes x */
}
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-accordion) ease;
}
.accordion__panel > div {
  overflow: hidden;
}
.accordion__panel.is-open {
  grid-template-rows: 1fr;
}
.accordion__panel-body {
  padding: 0 4px 24px;
  max-width: 70ch;
}
/* No-JS: panels fully open (html.js collapses them) */
html:not(.js) .accordion__panel {
  grid-template-rows: 1fr;
}

/* Blog / topic card */
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-100);
  border: var(--border-hairline-paper);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: var(--text-on-paper);
  transition: border-color var(--dur-hover) ease-out, transform var(--dur-hover) ease-out;
}
a.blog-card {
  text-decoration: none;
}
.blog-card:hover {
  border-color: var(--copper-200);
  transform: translateY(-1px);
}
.blog-card__media {
  aspect-ratio: 16 / 9;
  background: var(--paper-300);
  overflow: hidden;
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-card__body {
  padding: 20px 24px 24px;
}
.blog-card__meta {
  display: flex;
  gap: 16px;
  font-family: var(--font-data);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-on-paper-muted);
  margin-bottom: 10px;
}
.blog-card__title {
  font-size: var(--fs-h3);
  margin-bottom: 8px;
}
.blog-card__excerpt {
  font-size: var(--fs-small);
  color: var(--text-on-paper-muted);
  margin: 0;
}

/* Crosshair / SVG decor helpers */
.svg-decor {
  pointer-events: none;
  color: var(--copper-500);
}
.svg-decor svg {
  stroke: currentColor;
  fill: none;
}

/* ---------------------------------------------------------------------------
 * 13. Content templates (single, archive, search, 404, legal)
 * ------------------------------------------------------------------------ */
.page-shell {
  padding-top: 96px;
  padding-bottom: var(--section-pad);
}
.entry-content {
  max-width: 760px;
}
.entry-content > * {
  margin-bottom: 1.1em;
}
.entry-content h2 {
  margin-top: 1.6em;
}
.entry-content h3 {
  margin-top: 1.2em;
}
.entry-content img {
  border-radius: var(--radius);
}
.entry-content a {
  color: var(--copper-600);
}
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--font-data);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-on-paper-muted);
  margin-bottom: 24px;
}
.archive-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
@media (max-width: 1023px) {
  .archive-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .archive-list {
    grid-template-columns: 1fr;
  }
}
.pagination {
  margin-top: 48px;
  font-family: var(--font-data);
  font-size: var(--fs-data);
}
.pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  border: var(--border-hairline-paper);
  border-radius: var(--radius);
  margin-right: 6px;
  text-decoration: none;
  color: var(--text-on-paper);
}
.pagination .page-numbers.current {
  border-color: var(--copper-500);
  color: var(--copper-600);
}

/* 404: crosshair motif */
.error-404 {
  text-align: left;
  max-width: 720px;
}
.error-404__code {
  font-family: var(--font-data);
  font-size: var(--fs-data-lg);
  font-variant-numeric: tabular-nums;
  color: var(--earth-700);
  margin-bottom: 16px;
}
.error-404__crosshair {
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  color: var(--copper-500);
}
.error-404__links {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.error-404__links li {
  padding: 10px 0;
  border-bottom: var(--rule-data);
}

/* Legal template: paper + ledger rules, house typography */
.legal-shell .entry-content h2 {
  font-size: var(--fs-h3);
  padding-bottom: 8px;
  border-bottom: var(--rule-data);
}

/* ---------------------------------------------------------------------------
 * 13b. Anchor TOC (in-page navigation on long pages)
 * ------------------------------------------------------------------------ */
.anchor-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  padding: 20px 0 4px;
  border-bottom: var(--rule-data);
}
.anchor-toc__label {
  /* surface-aware token: adapts on paper and on ink without an override. */
  color: var(--surface-text-muted, var(--text-on-paper-muted));
  white-space: nowrap;
}
.anchor-toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.anchor-toc__link {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--earth-300);
  border-radius: 999px;
  font-family: var(--font-data);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.anchor-toc__link:hover,
.anchor-toc__link:focus-visible {
  border-color: var(--copper-500);
  color: var(--copper-500);
}

/* ---------------------------------------------------------------------------
 * 14. Motion base / reduced motion
 * ------------------------------------------------------------------------ */
/* Reveal start states are applied ONLY by JS (html.js) — no-JS sees content */
html.js [data-motion] {
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn--primary:hover,
  .btn--secondary:hover,
  .capability-tile:hover,
  .blog-card:hover {
    transform: none;
  }
  .accordion__panel {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 * 15. PAGE-BUILD LAYER (Aurora Page Builder, 2026-06-12)
 * Section layouts, hero, instruments and per-page apparatus for /, /platform/,
 * /methodology/, /compliance-provenance/, /contact/, /blog/.
 * ------------------------------------------------------------------------ */

/* Asymmetric splits (AURA: 7/5, 5/7, 8/4, 4/8 — content/instrument) */
.split {
  display: grid;
  gap: 48px var(--gutter);
  align-items: center;
}
/* Grid items default to min-width:auto and will not shrink below their content,
   so one wide child (a table, a long unbroken word) drags the whole page wider
   than the viewport instead of being constrained by its column. Opting every
   split child out of that is what makes the 1fr mobile collapse below actually
   hold. Children that must stay readable when narrowed handle it themselves:
   .matrix-scroll scrolls, headings break (see the long-word rule). */
.split > * { min-width: 0; }
.split--7-5 { grid-template-columns: 7fr 5fr; }
.split--5-7 { grid-template-columns: 5fr 7fr; }
.split--8-4 { grid-template-columns: 8fr 4fr; }
.split--4-8 { grid-template-columns: 4fr 8fr; }
.split--top { align-items: start; }
@media (max-width: 1023px) {
  .split--7-5, .split--5-7, .split--8-4, .split--4-8 {
    grid-template-columns: 1fr;
  }
}

/* Long-word safety. Estonian compounds are long ("metsainvesteeringute" sets at
   408px in the 40px h1, wider than a 390px phone viewport) and a single
   unbreakable word will push the page sideways no matter how the grid is
   configured. hyphens:auto gives a proper hyphenated break wherever the browser
   ships a dictionary for the page's lang (both trees set <html lang>);
   overflow-wrap is the guarantee for everywhere else. Headings only: body copy
   is short-worded enough and breaking it reads worse. */
h1, h2, h3, h4, h5, h6 {
  /* Guarantees a word can never push the page sideways, at any width. */
  overflow-wrap: break-word;
}

/* Hyphenation only where the column is genuinely too narrow for the word.
   On a wide screen the hero column is 751px and "metsainvesteeringute" sets at
   734px, so it FITS: leaving hyphens:auto on merely let the browser prefer a
   hyphenated break while balancing the lines, and the desktop headline read
   "metsain-vesteeringute" for no reason. Below 768px the column really is
   narrower than the longest Estonian compounds, so the hyphens stay there. */
@media (max-width: 767px) {
  h1, h2, h3, h4, h5, h6 {
    hyphens: auto;
  }
}

.lede {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  max-width: 62ch;
}
.section-eyebrow { margin-bottom: 16px; color: var(--copper-500); display: block; }
.surface-paper .section-eyebrow,
.surface-paper--200 .section-eyebrow { color: var(--earth-500); }
.section-head { max-width: 76ch; }
.measure { max-width: 68ch; }

/* Front hero band: ink-900 -> ink-800 gradient + graticule + contour */
.hero-band {
  background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-800) 100%);
  overflow: visible;
}
.hero-band .section { padding-top: calc(var(--section-pad) * 0.8); padding-bottom: 0; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}
.contour-backdrop {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(520px, 46%);
  opacity: 0.6;
  pointer-events: none;
  line-height: 0;
}

/* Hero instrument: static slab is the LCP; canvas mounts absolutely on top */
#elpi-hero-scene {
  position: relative;
  line-height: 0;
}
#elpi-hero-scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.hero-slab-static { width: 100%; height: auto; }
.hero__instrument {
  position: relative;
  align-self: end;
}
.hero__instrument .coord-tick { z-index: 2; }

/* Overlap-down: instrument crosses the seam into the next band
 * (layer-overlap joint; 48-64px desktop, 24px mobile, never clipped).
 * Plain variant assumes the section has no bottom padding (hero). */
.overlap-down {
  position: relative;
  z-index: 3;
  top: 48px;
}
@media (max-width: 768px) {
  .overlap-down { top: 24px; }
}
/* Deep variant: element extends past the section bottom edge by ~48px
 * (24px mobile) via a negative bottom margin larger than the padding.
 * The following band needs .joint-layer-overlap--target spacing. */
.overlap-down--deep {
  position: relative;
  z-index: 3;
  align-self: end;
  margin-bottom: calc(-1 * (var(--section-pad) + 48px));
}
@media (max-width: 768px) {
  .overlap-down--deep {
    margin-bottom: calc(-1 * (var(--section-pad) + 24px));
  }
}

/* Mono data strip (3 cited stats under the hero) */
.data-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin-top: 56px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--gridline);
}
@media (max-width: 768px) {
  .data-strip { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .data-strip { grid-template-columns: repeat(2, 1fr); }
  .data-strip .stat-block:last-child { grid-column: 1 / -1; }
  .hero-band .section { padding-top: calc(var(--section-pad) * 0.65); }
  .split { gap: 32px var(--gutter); }
}

/* Cited stat blocks grid (why-estonia) */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
}
@media (max-width: 640px) {
  .stat-grid { grid-template-columns: 1fr; }
}
.stat-card {
  background: var(--paper-200);
  border: var(--border-hairline-paper);
  border-radius: var(--radius-card);
  padding: 24px;
}
.stat-card__note {
  font-size: var(--fs-small);
  color: var(--text-on-paper-muted);
  margin: 10px 0 0;
}

.scale-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: var(--earth-500);
}

/* Score panel head/foot (instrument chrome) */
.score-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.score-panel__foot {
  margin: 14px 0 0;
  color: var(--text-on-dark-muted);
}
.provenance-stamp__title { margin: 0 0 10px; opacity: 0.75; }

/* Cashflow figure */
.cashflow { margin: 28px 0 0; }
.cashflow__svg { width: 100%; height: auto; }

/* CTA band (inner pages) */
.cta-band { text-align: center; }
.cta-band .section,
.cta-band .container { position: relative; }
.cta-band__crosshair {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  opacity: 0.8;
}
.cta-band__copy {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.35;
  max-width: 56ch;
  margin: 0 auto 28px;
}
.cta-band__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
}
.cta-band__note { margin: 18px 0 0; }

/* Capability tile mosaic: 2x4 asymmetric (wide tile per row pair) */
.tile-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gutter);
  margin-top: 40px;
}
.tile-mosaic .capability-tile { grid-column: span 2; }
.tile-mosaic .capability-tile--wide { grid-column: span 4; }
@media (max-width: 1023px) {
  .tile-mosaic { grid-template-columns: repeat(2, 1fr); }
  .tile-mosaic .capability-tile,
  .tile-mosaic .capability-tile--wide { grid-column: span 1; }
}
@media (max-width: 640px) {
  .tile-mosaic { grid-template-columns: 1fr; }
}

/* Mono numbered checklist (due-diligence, GEO answer block) */
.checklist {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  counter-reset: dd;
}
.checklist li {
  counter-increment: dd;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: var(--rule-data);
}
.checklist li::before {
  content: counter(dd, decimal-leading-zero);
  font-family: var(--font-data);
  font-size: var(--fs-data);
  font-variant-numeric: tabular-nums;
  color: var(--copper-400);
}

/* Mono flags list (compliance) */
.flags-list {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  font-family: var(--font-data);
  font-size: var(--fs-data);
}
.flags-list li {
  padding: 12px 0;
  border-bottom: var(--rule-data);
}
.flags-list .u-label { color: var(--earth-700); }
.surface-dark .flags-list .u-label,
.surface-earth .flags-list .u-label { color: var(--copper-200); }

/* Offer variants (contact + home contact band) */
.offer-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.offer-list li {
  padding: 14px 0;
  border-bottom: var(--rule-data);
  font-size: var(--fs-small);
}
.offer-list .u-label {
  display: block;
  margin-bottom: 4px;
  color: var(--copper-400);
}
.offer-panel {
  background: var(--ink-700);
  border: 1px solid var(--gridline);
  border-radius: var(--radius-card);
  padding: 28px;
}

/* Page hero (inner pages) */
.page-hero h1 { font-size: clamp(34px, 4vw, 56px); }
.page-hero .lede { margin-top: 16px; }
.breadcrumb-line { margin-bottom: 20px; opacity: 0.75; }
.version-badge {
  display: inline-block;
  font-family: var(--font-data);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  border: 1px solid var(--gridline);
  border-radius: var(--radius);
  padding: 8px 14px;
  margin-top: 20px;
  color: var(--text-on-dark-muted);
}
.single-tenant-line { margin-top: 20px; color: var(--text-on-dark-muted); }

/* Satellite backplate (platform hero): image at 25%, ink overlay base */
.page-hero--backplate { overflow: hidden; position: relative; }
.page-hero--backplate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(8, 26, 18, 0.92) 0%,
    rgba(8, 26, 18, 0.78) 42%,
    rgba(8, 26, 18, 0.55) 100%
  );
}
.backplate-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  z-index: 0;
}
.page-hero--backplate > .container { position: relative; z-index: 1; }

/* Overlap helpers (layer-overlap compositions across seams) */
.overlap-up {
  position: relative;
  z-index: 3;
  margin-top: -64px;
}
@media (max-width: 768px) {
  .overlap-up { margin-top: -24px; }
}
.joint-cadastral-cut { position: relative; z-index: 2; }
.joint-cadastral-follow {
  position: relative;
  margin-top: -56px;
  padding-top: 56px;
}

/* Definition panels grid (methodology three layers) */
.definition-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin-top: 32px;
}
@media (max-width: 1023px) {
  .definition-grid { grid-template-columns: 1fr; }
}
.definition-grid .definition-block { margin: 0; }

/* Sources ledger block (methodology) */
.sources-block {
  margin-top: 40px;
  padding: 20px 24px;
  background: var(--paper-200);
  border: var(--border-hairline-paper);
  border-radius: var(--radius);
  font-family: var(--font-data);
  font-size: var(--fs-data);
  line-height: 1.8;
}

/* Pre-call reading / footer-research ledger rows */
.reading-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  counter-reset: rd;
}
.reading-list li {
  counter-increment: rd;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: var(--rule-data);
}
.reading-list li::before {
  content: counter(rd, decimal-leading-zero);
  font-family: var(--font-data);
  color: var(--earth-500);
  font-size: var(--fs-data);
}

/* Blog hub */
.topic-labels { margin-top: 24px; color: var(--text-on-dark-muted); letter-spacing: 0.14em; }
.blog-cards { margin-top: 40px; }
.also-log {
  margin-top: 32px;
  font-family: var(--font-data);
  font-size: var(--fs-data);
  color: var(--text-on-paper-muted);
}

/* Form helper line */
.form-field__help { margin: 6px 0 0; letter-spacing: 0.06em; }
.accordion__heading { margin: 0; font-size: inherit; }
.expectation-line { margin-top: 20px; }

/* Coordinate tick corner placements */
.coord-tick--tl { top: 20px; left: 20px; }
.coord-tick--tr { top: 20px; right: 20px; }
.coord-tick--bl { bottom: 20px; left: 20px; }
.coord-tick--br { bottom: 20px; right: 20px; }

/* Split panel (flags vs decisions) keeps table semantics; tighten on paper */
.split-panel thead th { font-size: var(--fs-label); }
.split-panel td { font-size: var(--fs-small); font-family: var(--font-body); }

/* Timeline (audit trail) */
.timeline { margin: 32px auto 0; max-width: 760px; }
.timeline svg { width: 100%; height: auto; }

/* Dataset block spacing */
.dataset-list { margin-top: 24px; }

/* FAQ band: keep accordion readable width */
.faq-wrap { max-width: 860px; margin: 0 auto; }


/* ---------------------------------------------------------------------------
 * 16. MOTION LAYER (Aurora Team Motion, 2026-06-12)
 * Hero terrain canvas cross-fade + parcel tooltip. All JS-driven motion lives
 * in assets/dist/chunks/ (GSAP / Three.js); this block is presentation only.
 * ------------------------------------------------------------------------ */
#elpi-hero-scene canvas {
  transition: opacity 0.6s ease;
  pointer-events: auto;
}
#elpi-hero-scene canvas.is-live {
  opacity: 1;
}
.hero-slab-static {
  transition: opacity 0.6s ease;
}
.hero-slab-static.is-yielding {
  opacity: 0;
}
.terrain-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  padding: 4px 8px;
  background: var(--ink-900);
  border: 1px solid var(--copper-500);
  color: var(--copper-200);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.terrain-tooltip.is-visible {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  #elpi-hero-scene canvas,
  .hero-slab-static,
  .terrain-tooltip {
    transition: none;
  }
}

/* ----------------------------------------------------------------------------
   17. LANGUAGE SWITCH (ET / EN) — cartographic terminal, mono, header
   ------------------------------------------------------------------------- */
.lang-switch{display:inline-flex;align-items:center;gap:.45rem;margin:0 .4rem;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.lang-switch__opt{color:#A9B3AD;text-decoration:none;padding:.15rem .1rem;border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease}
.lang-switch__opt:hover{color:#EFEDE5}
.lang-switch__opt.is-active{color:#C47E3D;border-bottom-color:#C47E3D}
.lang-switch__opt:focus-visible{outline:2px solid #D98E45;outline-offset:3px;border-radius:1px}
.lang-switch__sep{color:#5A6B61}
@media (max-width:1023px){.lang-switch{margin:.6rem 0;font-size:.8rem}}

/* ----------------------------------------------------------------------------
   18. CODE TAG — muted monospace machine-code beside human label (methodology)
   ------------------------------------------------------------------------- */
.code-tag{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.72em;font-weight:400;color:#8A968E;letter-spacing:.01em;margin-left:.45em;white-space:nowrap;vertical-align:baseline}
.surface-dark .code-tag,.surface-earth .code-tag{color:#8FA096}

/* ----------------------------------------------------------------------------
   19. TOUCH TARGETS (mobile-ux-audit, 2026-08-07)
   Every control below failed the 44x44 minimum on HEIGHT only; widths were
   already fine. These are tap-area corrections, not restyling: nothing here
   changes colour, type or the visual rhythm, and all of it is scoped to
   <=1023px so the desktop layout is untouched.
   Fixes M1, M2, M4, M7, M8 in .mobile-ux-audit/report.md.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* M7 wordmark (92x36) and M8 footer mailto (101x19): both real actions. */
  .wordmark-link,
  .site-footer__email {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* M4 in-page section nav chips (34px tall). inline-flex keeps them on one
     row as chips; only the box grows. */
  .anchor-toc__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* M2 language switcher: 21x27, two adjacent targets, so the failure mode was
     switching to the wrong language. Needs width as well as height. */
  .lang-switch__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .lang-switch__sep { margin: 0 4px; }

  /* M1 footer nav: 36px tall AND 0px apart, the combination that produces
     mis-taps. Padding buys the height, the margin buys the 8px separation.
     Scoped to list links so the wordmark and email keep their own rules. */
  .site-footer li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .site-footer li + li { margin-top: 4px; }

  /* Standalone ledger links: a link alone on its own line is acting as a CTA
     ("All research notes", "Back to the research journal"), as are the hero
     and CTA-band action rows.

     Whether a ledger-link is standalone or inline is a property of the CONTENT,
     not of any class - a survey of every one on the site found p.u-data and
     unclassed <p> used BOTH ways - and CSS cannot test for sibling text. So
     these selectors cover the standalone cases and, as a side effect, catch
     about five inline links whose line box grows to 44px. That is the cheaper
     error: a slightly taller line beats an untappable control.

     .measure, .citation-row and .sources-block are prose-only in practice and
     stay excluded; WCAG 2.5.8 exempts inline text links anyway. */
  p:not([class]) > .ledger-link,
  p.u-data > .ledger-link,
  li > .ledger-link,
  .hero__actions .ledger-link,
  .cta-band__actions .ledger-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ----------------------------------------------------------------------------
   20. MOBILE NAV PANEL HEIGHT (2026-08-07)
   The drawer is `position: fixed; top: var(--nav-height); bottom: 0`, which
   should make it fill everything below the header. It did not: .site-header
   carries `backdrop-filter: blur(8px)`, and backdrop-filter (like transform,
   filter, perspective and will-change) makes an element a CONTAINING BLOCK for
   its fixed-position descendants. So top/bottom resolved against the 64px-tall
   header instead of the viewport and the panel collapsed to 64px with 508px of
   content inside it: one visible row, no reachable language switcher.

   An explicit height fixes it and is correct under BOTH containing blocks - the
   header's top edge and the viewport's top edge are the same 0, so
   `top: var(--nav-height)` lands in the same place either way. That keeps the
   fix working if the blur is ever removed.

   dvh accounts for mobile browser chrome; the vh line above it is the fallback
   for engines without dvh.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .site-nav {
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    bottom: auto;              /* height wins; drop the now-redundant constraint */
    overscroll-behavior: contain;  /* don't scroll the page behind the drawer */
  }
}

/* ----------------------------------------------------------------------------
   21. better-interface review remediation (2026-08-07)
   Findings 2, 3, 4 and 6 from .mobile-ux-audit/better-interface-review.md.
   ------------------------------------------------------------------------- */

/* F2a. --copper-600 is the shared --surface-link and --focus-ring-color token
   on paper surfaces, already introduced as an "a11y delta" but not taken far
   enough: .ledger-link measured 4.21:1 on paper-200, under the 4.5:1 AA floor
   that AURADESIGN.md:232 itself requires. Darkening the token fixes every link
   on every paper surface at once, and raises the paper focus ring with it.
   Measured after: 5.88:1 on paper-100, 5.43:1 on paper-200, 4.81:1 on
   paper-300. Hue preserved. */
:root {
  --copper-600: #85501F;
}

/* F2b. .section-eyebrow falls through to copper-500 on the earth surface,
   measuring 3.39:1. copper-200 is already the established label colour on dark
   surfaces (see .surface-earth .flags-list .u-label), so this reuses the
   existing token rather than inventing a value. Measured after: 6.79:1. */
.surface-earth .section-eyebrow {
  color: var(--copper-200);
}

/* F3. Mobile type floor. The label layer sets 11-12px, below the practical
   floor for a phone held at arm's length, and the 11px class includes
   .stat-block__source, the dataset-and-year provenance the product's
   credibility rests on. Raised one step on small viewports only; the desktop
   scale is untouched. */
@media (max-width: 767px) {
  :root {
    --fs-label: 13px;
  }
  .coord-tick,
  .stat-block__source {
    font-size: 12px;
  }
}

/* F4. On a 375x667 phone the hero CTA started at y=689, 22px below the fold,
   while the header CTA is collapsed into the hamburger. Reclaiming vertical
   space on short viewports only pulls it into the first screen without
   touching the hero on taller phones. */
@media (max-width: 767px) and (max-height: 700px) {
  .hero-band {
    padding-top: 20px;
  }
  .hero__copy .u-label { margin-bottom: 12px; }
  .hero__copy h1 { margin-bottom: 14px; }
  .hero__copy .lede { margin-bottom: 12px; }
}

/* The hero h1's 40px floor is the single largest block of vertical space on a
   phone, and trimming padding alone could not lift the CTA above a 667px fold:
   raising the label sizes in F3 gave back more height than the padding saved.
   32px is a normal mobile h1, keeps the headline dominant, and buys the ~40px
   the CTA needed.

   It also retires the Estonian hyphenation compromise. "metsainvesteeringute"
   sets at 408px in the 40px h1, wider than the 342px column, which forced the
   browser to break it as "metsain-vesteeringute": a valid syllabic division but
   not the preferred compound one. At 32px the word measures ~326px and fits
   whole, so the ET hero headline no longer breaks at all. The hyphens/
   overflow-wrap safety net stays for anything longer. */
@media (max-width: 767px) {
  :root {
    --fs-hero-h1: clamp(32px, 5.2vw, 72px);
  }
}

/* F6. Estonian compounds are long enough to need hyphens: auto already, which
   leaves headings ragged; balance evens the line lengths. pretty keeps a lone
   word off the last line of the intro paragraphs. */
h1, h2, h3 {
  text-wrap: balance;
}
.lede,
.blog-card__excerpt {
  text-wrap: pretty;
}

/* F5 (revised). The icon set is NOT four stroke weights: 2.4 is the wordmark
   logotype, 1.75 the hamburger control, and the 1s are full-bleed section
   dividers whose large viewBoxes render them as 0.27-0.61px hairlines. Those
   are three separate asset classes and correctly differ.

   The real inconsistency is inside .svg-decor, the line-art icon family: the
   crosshair (24 viewBox drawn at 32px) renders a 2.00px stroke while the
   layer-stack (96 viewBox at 96px) renders 1.00px, so one icon is twice the
   weight of the other. non-scaling-stroke pins the stroke to device pixels so
   both land on the 1.5px AURADESIGN.md:93 specifies, at any instantiated size. */
.svg-decor [stroke]:not([stroke="none"]) {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5;
}

/* F3 follow-up. Raising --fs-label from 12px to 13px widened .chip, whose
   `white-space: nowrap` then pushed the Estonian status labels ("KONTROLLITUD,
   KESKMINE KINDLUS") past a 320px viewport: a 279px chip inside a 215px
   column. nowrap is right at normal widths, where a broken badge reads as a
   bug, but at 320px an overflowing page is the worse failure, so the badge is
   allowed to wrap on the narrowest screens only. 320px is the WCAG 1.4.10
   reflow floor, so it has to hold there. */
@media (max-width: 359px) {
  .chip {
    white-space: normal;
    max-width: 100%;
  }
}

/* ============================================================
   Data figures (statistical charts in article bodies).
   Added 2026-08-25 for the Statistics Estonia content layer.

   Charts are static SVG emitted by teya-memory/blog/tools/charts.py and
   pasted into article.html as a trusted fragment. No JS, no chart library:
   the static export has no runtime, and a crawlable <table> under every
   chart is what actually gets cited.

   Series colours are chart-specific, NOT --copper-500/--signal-pass. Those
   two fail a categorical-palette check on paper: --signal-pass #3E7C5B sits
   below the chroma floor (reads grey next to copper) and --copper-500
   #C47E3D lands at 2.91:1 against #F4F1EA, under the 3:1 mark contrast
   floor. --chart-s1/--chart-s2 below are re-stepped from the same hues and
   pass lightness, chroma, CVD separation and contrast. Do not "correct"
   them back to the brand steps.
   ============================================================ */

.empi-figure {
  --chart-s1: #B4661F;
  --chart-s2: #2A8B5A;
  margin: 2em 0;
  border: 1px solid var(--paper-hairline);
  border-radius: var(--radius);
  background: var(--paper-200);
  overflow: hidden;
}
.empi-figure__head {
  padding: 18px 22px 6px;
}
.empi-figure__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--text-on-paper);
}
.empi-figure__sub {
  margin-top: 5px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-on-paper-muted);
}
.empi-figure__chart {
  padding: 6px 14px 4px;
  overflow-x: auto;
}
.empi-figure__chart svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.empi-figure__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 2px 22px 14px;
}
.empi-figure__legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--text-on-paper);
}
.empi-figure__swatch {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  flex: none;
}
.empi-figure__data > summary {
  cursor: pointer;
  padding: 10px 22px;
  font-family: var(--font-data);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-paper-muted);
  border-top: 1px solid var(--paper-hairline);
}
.empi-figure__data > summary:focus-visible {
  outline: 2px solid var(--copper-600);
  outline-offset: -2px;
}
.empi-figure__scroll {
  overflow-x: auto;
  border-top: 1px solid var(--paper-hairline);
}
.empi-figure table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-size: var(--fs-small);
}
.empi-figure th,
.empi-figure td {
  text-align: left;
  padding: 9px 16px;
  border-bottom: 1px solid var(--paper-hairline);
}
.empi-figure thead th {
  font-family: var(--font-data);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-on-paper-muted);
  background: var(--paper-300);
  white-space: nowrap;
}
.empi-figure tbody tr:last-child td {
  border-bottom: 0;
}
.empi-figure td.num {
  text-align: right;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.empi-figure__src {
  padding: 10px 22px;
  border-top: 1px solid var(--paper-hairline);
  background: var(--paper-300);
  font-family: var(--font-data);
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
  color: var(--text-on-paper-muted);
}

/* ============================================================
   Related reading, rendered after an article body by
   inc/related.php. Added 2026-09-01 to close the internal-link
   gap: before it, three articles had zero inbound links because
   links existed only where an author wrote one into the prose.
   ============================================================ */

.related {
  max-width: 760px;
  margin: 3em auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--paper-hairline);
}
.related__heading {
  font-family: var(--font-data);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-paper-muted);
  margin-bottom: 14px;
}
.related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.related__link {
  display: grid;
  grid-template-columns: minmax(88px, auto) 1fr;
  gap: 4px 18px;
  align-items: baseline;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--paper-200);
  text-decoration: none;
  color: var(--text-on-paper);
  transition: background 140ms ease;
}
.related__link:hover,
.related__link:focus-visible {
  background: var(--paper-300);
}
.related__link:focus-visible {
  outline: 2px solid var(--copper-600);
  outline-offset: 2px;
}
.related__label {
  font-family: var(--font-data);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-paper-muted);
}
.related__title {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.3;
}
@media (max-width: 559px) {
  .related__link {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}