/* howfar.one — public site stylesheet.
   Editorial and rule-based: type, hairlines and space. No external fonts, images or
   imports: the Content-Security-Policy allows same-host styles only. */

:root {
  /* Light: the warm editorial surface. Ink is near-black, never pure; hairlines are warm greys. */
  --bg: #f4f1ea;
  --bg-2: #ebe7dd;
  --ink: #141413;
  --ink-2: #393832;
  --ink-3: #5a574f;
  --muted: #6f6c63;
  --faint: #7c786d;
  --rule: #d9d3c7;
  --rule-2: #e4dfd4;
  --rule-live: #a29c8f;
  --rule-strong: #141413;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1400px;
  --ease-quiet: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-quiet: 200ms;
  color-scheme: light;
}

/* Dark: a deep neutral page with paper-coloured ink. Contrast is held back a step so long reading stays calm;
   hairlines are quieter than in light, because light lines on dark read stronger. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131312;
    --bg-2: #1c1b19;
    --ink: #ece9e2;
    --ink-2: #cbc8c0;
    --ink-3: #a9a59c;
    --muted: #8f8b82;
    --faint: #7a766e;
    --rule: #2f2e2b;
    --rule-2: #262523;
    --rule-live: #5d5a53;
    --rule-strong: #b9b5ac;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131312;
  --bg-2: #1c1b19;
  --ink: #ece9e2;
  --ink-2: #cbc8c0;
  --ink-3: #a9a59c;
  --muted: #8f8b82;
  --faint: #7a766e;
  --rule: #2f2e2b;
  --rule-2: #262523;
  --rule-live: #5d5a53;
  --rule-strong: #b9b5ac;
  color-scheme: dark;
}

/* A theme change cross-fades colours only, and only when the visitor asks for it. */
@media (prefers-reduced-motion: no-preference) {
  html.theme-anim, html.theme-anim body, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
    transition: background-color 220ms var(--ease-quiet), color 220ms var(--ease-quiet), border-color 220ms var(--ease-quiet),
      fill 220ms var(--ease-quiet), stroke 220ms var(--ease-quiet), text-decoration-color 220ms var(--ease-quiet) !important;
  }
}

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

html {
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--bg);
}

main { min-width: 0; }

main:focus { outline: none; }

[id] { scroll-margin-top: 24px; }

h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }

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

a:hover { text-decoration-color: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  a { transition: text-decoration-color 160ms ease, color 160ms ease; }
}

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

code { font-family: var(--mono); font-size: 0.86em; }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 20;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 13px;
}

.skip:focus { top: 8px; }

.muted { color: var(--muted); }

.num { font-variant-numeric: tabular-nums lining-nums; }


/* --------------------------------------------------------------- page head */

.page-head { padding: 0 0 clamp(24px, 3vw, 40px); }

.eyebrow, .kicker, .cover-brand, .figure-k, .metric-name, .tile-k, .tl-kind, .win-cap {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

.eyebrow { display: flex; gap: 14px; margin-bottom: 12px; }
.eyebrow-n { color: var(--ink); }

.page-head h1, .page-head h2 {
  font-size: clamp(36px, 3.75vw, 54px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 32ch;
}

.lede {
  margin-top: 14px;
  max-width: 72ch;
  font-size: clamp(16px, 1.25vw, 18px);
  color: var(--ink-2);
}


/* ------------------------------------------------------------------ blocks */

.block {
  display: grid;
  grid-template-columns: minmax(150px, 2.6fr) minmax(0, 9fr);
  gap: 24px clamp(24px, 4vw, 56px);
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--rule);
}

.block-head h2 {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.metric-grid-block { display: block; padding-top: 18px; }
.metric-grid-block .block-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.metric-grid-block .block-head h2 { margin: 0; font-size: 18px; }
.metric-grid-block .block-head .kicker { margin: 0; font-size: 10px; }

.block-body > * + * { margin-top: 20px; }
.block-body p { max-width: 66ch; }
.block-quiet .block-body { color: var(--ink-2); }

.sub {
  margin-top: 48px !important;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.more, .metric-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.method-link {
  padding: 28px 0 8px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.empty-state {
  padding: 24px 0;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
  color: var(--ink-2);
}

.empty-title { font-size: 18px; color: var(--ink); margin-bottom: 6px !important; }

.pull {
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 30ch;
}

ul.plain { padding-left: 1.1em; }
ul.plain li + li { margin-top: 6px; }


/* ------------------------------------------------ legacy proof-surface pages */

.legacy .hero { padding: clamp(48px, 9vw, 112px) 0 clamp(32px, 5vw, 56px); }
.legacy .hero h1 { font-size: clamp(36px, 5.6vw, 72px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; max-width: 16ch; margin-top: 16px; }
.legacy .eyebrow { margin-bottom: 0; }
.legacy .panel, .legacy .section { padding: 32px 0; border-top: 1px solid var(--rule); }
.legacy .panel h2, .legacy .section h2 { font-size: 22px; font-weight: 500; margin: 8px 0 12px; }
.legacy .panel p + p { margin-top: 10px; }
.legacy .split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.panel .eyebrow { margin-bottom: 0; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); border-top: 1px solid var(--rule); margin: 12px 0; }
.metric-card { padding: 14px 16px 18px 0; border-bottom: 1px solid var(--rule); }
.metric-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.metric-card strong { display: block; margin-top: 8px; font-size: 26px; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.status-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: baseline; }
.status-row h2 { font-size: 28px; font-weight: 400; letter-spacing: -0.02em; }
.status { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; padding: 2px 7px; border: 1px solid var(--ink); }
.valuation .eyebrow { margin-bottom: 8px; }
.range-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0; border-top: 1px solid var(--ink); }
.range-row div { padding: 12px 12px 0 0; }
.range-row span { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--muted); }
.range-row strong { font-size: 32px; font-weight: 300; font-variant-numeric: tabular-nums; }
.metadata { margin-top: 12px; padding-left: 1.1em; color: var(--muted); font-size: 14px; }
.plain-list { padding-left: 1.1em; }


/* ----------------------------------------------------------------- consent */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  background: var(--bg);
  border-top: 1px solid var(--rule-strong);
}
.consent-in {
  max-width: var(--max);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: center;
}
.consent-t {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.consent-d { font-size: 14px; color: var(--ink-2); max-width: 72ch; }
.consent-a {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-family: var(--mono);
  font-size: 13px;
}
.consent-a-page { margin-top: 16px; }
html.consent-open body { padding-bottom: 168px; }
.btn {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 10px 14px;
  min-height: 40px;
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.linkish {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
}
.linkish:hover { text-decoration-color: currentColor; }

@media (max-width: 760px) {
  .consent-in { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html.consent-open body { padding-bottom: 232px; }
}

/* ============================================================ HowFar composition
   One editorial grid, one metric card. Cream surface, black ink, hairlines,
   square corners; only badges and period selectors are rounded. No decorative
   effects. Motion is limited to a few short, quiet state changes (links, a
   card's all-time layer); prefers-reduced-motion removes all of it. */

body.hf {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.45;
  font-feature-settings: "kern", "lnum";
}

.hf-top, .hf-main, .hf-foot {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 5%;
}

.hf-main { flex: 1 0 auto; padding-bottom: clamp(24px, 3vw, 44px); }

.hf-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-top: clamp(22px, 3.1vw, 44px);
}

.hf-mark {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  line-height: 1.2;
}

.hf-meta { text-align: right; }
.hf-meta-line { display: flex; justify-content: flex-end; align-items: baseline; gap: 18px; }

/* Appearance: two words, the current one in ink. */
.hf-theme { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.hf-theme[hidden] { display: none; }
.hf-theme button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted);
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  border-bottom: 1px solid transparent; transition: color 160ms var(--ease-quiet), border-color 160ms var(--ease-quiet);
}
.hf-theme button:hover { color: var(--ink); }
.hf-theme button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.hf-theme button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.hf-day {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.hf-nav { margin-top: 9px; }
.hf-nav-mobile { display: none; }

.hf-nav-row {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 10.5px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.hf-nav-row li { white-space: nowrap; }
.hf-nav-row li span { margin: 0 0.4em; }
.hf-nav-row a { color: var(--muted); text-decoration: none; }
.hf-nav-row a:hover { color: var(--ink); }
.hf-nav-row a[aria-current] { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- page head */

.hf-head { margin-top: clamp(6px, 1vw, 14px); }

.hf-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: clamp(14px, 1.6vw, 24px);
}
.hf-eyebrow-n { color: var(--ink); margin-right: 1.2em; font-variant-numeric: tabular-nums; }

.hf-head h1,
.hf-head h2 {
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.06;
  max-width: 24ch;
}

.hf-sub {
  margin-top: clamp(14px, 1.4vw, 20px);
  font-size: clamp(15.5px, 1.2vw, 18px);
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 62ch;
}

/* ------------------------------------------------------- the metric card */

.hf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px);
  margin-top: clamp(28px, 4vw, 60px);
}

.hf-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  aspect-ratio: 854 / 522;
  padding: clamp(14px, 1.25vw, 20px);
  border: 1px solid var(--rule);
  border-radius: 0;
  overflow: hidden;
}

.hf-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 2.35em;
  font-size: clamp(10.5px, 0.78vw, 11.5px);
}

.hf-card-label {
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1.25;
  color: var(--ink-3);
  min-width: 0;
}

.hf-badge {
  flex: none;
  display: inline-block;
  padding: 0.42em 1.05em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: clamp(9px, 0.66vw, 10px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}

.hf-badge-verified { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* Unknown is a quiet dashed outline: visibly different from a published status, never loud. */
.hf-badge-unknown, .hf-badge-withheld { border-style: dashed; color: var(--muted); }

.hf-card-value {
  margin-top: clamp(10px, 1.2vw, 18px);
  font-size: clamp(26px, 2.5vw, 38px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
.hf-card-value.is-missing { color: var(--faint); font-weight: 300; letter-spacing: 0; }
/* Preview only: the last accepted publication, labelled, beside the current measurement. Same voice as the cover strip's reference. */
.hf-card-ref { margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-3); overflow-wrap: anywhere; }

.hf-unit, .hf-card-value .n {
  font-size: 0.4em;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.hf-unit { margin-left: 0.15em; }

/* "≥" says minimum: present, but lighter than the digits it qualifies. */
.hf-u { font-size: 0.42em; letter-spacing: 0.08em; color: var(--muted); }
.hf-pre { font-size: 0.62em; font-weight: 300; color: var(--muted); margin-right: 0.08em; vertical-align: 0.14em; }

.hf-card-value .n { margin-left: 0.6em; }

.hf-card-copy {
  margin-top: auto;
  font-size: clamp(11.5px, 0.86vw, 13px);
  line-height: 1.45;
  color: var(--muted);
  max-width: 38ch;
}

/* ------------------------------------------- the card's all-time layer
   Same rectangle, second layer: at rest the value; on hover, keyboard focus or
   tap, the metric's all-time history. Nothing moves the layout: the layer is
   positioned inside the card body, the card keeps its size. */


.hf-card-h {
  position: relative;
  cursor: pointer;
  transition: border-color 160ms var(--ease-quiet);
  -webkit-tap-highlight-color: transparent;
}

/* A registration mark in the corner: there is more inside this rectangle. */
.hf-card-h::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--rule-live);
  border-bottom: 1px solid var(--rule-live);
  transition: border-color 160ms var(--ease-quiet);
}

.hf-card-h:focus { outline: none; }
.hf-card-h:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.hf-card-body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hf-card-rest {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: opacity var(--t-quiet) var(--ease-quiet), transform var(--t-quiet) var(--ease-quiet);
}

.hf-hist {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition:
    opacity var(--t-quiet) var(--ease-quiet),
    transform var(--t-quiet) var(--ease-quiet),
    visibility 0s linear var(--t-quiet);
}

.hf-hist-top, .hf-hist-foot {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1.3;
}

.hf-hist-top { margin-top: clamp(4px, 0.5vw, 8px); }
.hf-hist-v {
  margin-left: auto;
  font-family: var(--sans);
  font-size: clamp(12px, 0.95vw, 14px);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hf-hist-ev { color: var(--muted); }
.hf-hist-ev:hover, .hf-hist-ev:focus-visible { color: var(--ink); }

.hf-hist-plot {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* The printed scale: the axis bounds, always visible, aligned with the two hairlines. */
.hf-hist-y {
  position: absolute;
  left: 0;
  width: 40px;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
.hf-hist-y-hi { top: 6%; }
.hf-hist-y-lo { top: 94%; }

.hc {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 44px;
  width: calc(100% - 44px);
  height: 100%;
  overflow: visible;
  clip-path: inset(-8px 100% -8px -8px);
  transition: clip-path 240ms var(--ease-quiet) 40ms;
}

.hc line, .hc polyline, .hc path, .hc rect { vector-effect: non-scaling-stroke; }
.hc-bound, .hc-base { stroke: var(--rule); stroke-width: 1; }
.hc-bound { stroke-dasharray: 1 3; }
.hc-zero { stroke: var(--muted); stroke-width: 1; }
.hc-line { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.hc-dot { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.hc-now { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.hc-gap rect { fill: var(--bg-2); stroke: none; }
.hc-gap line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }

.hf-hist-foot { justify-content: space-between; }
.hf-hist-gap { color: var(--ink-2); }
.hf-hist-gap::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-right: 6px;
  background: var(--bg-2);
  border-left: 1px dashed var(--muted);
  border-right: 1px dashed var(--muted);
  vertical-align: -0.5px;
}

.hf-hist-states {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(11px, 0.86vw, 12.5px);
}
.hf-hist-states li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--rule);
}
.hf-hist-states li:first-child { color: var(--ink); }
.hf-hist-states li span + span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.hf-hist-states li.is-unknown { color: var(--muted); }

.hf-hist-empty {
  margin-top: auto;
  font-size: clamp(11px, 0.86vw, 12.5px);
  color: var(--muted);
}

/* Open: hover (devices that hover), keyboard focus, or a tap (.is-open). Escape
   sets .is-quiet until the pointer or focus leaves. */
@media (hover: hover) {
  .hf-card-h:hover:not(.is-quiet) { border-color: var(--rule-live); }
  .hf-card-h:hover:not(.is-quiet)::after { border-color: var(--ink); }
  .hf-card-h:hover:not(.is-quiet) .hf-card-rest { opacity: 0; transform: translateY(-3px); transition-delay: 60ms; }
  .hf-card-h:hover:not(.is-quiet) .hf-hist { opacity: 1; visibility: visible; transform: none; transition-delay: 60ms, 60ms, 0s; }
  .hf-card-h:hover:not(.is-quiet) .hc { clip-path: inset(-8px -8px -8px -8px); transition-delay: 100ms; }
}

/* Runtime fallback for environments whose CSS capability query says
   hover:none despite real non-touch mouse input. The class is set only after
   such input is observed, so touch-only devices keep the tap interaction. */
.hf-can-hover .hf-card-h:hover:not(.is-quiet) { border-color: var(--rule-live); }
.hf-can-hover .hf-card-h:hover:not(.is-quiet)::after { border-color: var(--ink); }
.hf-can-hover .hf-card-h:hover:not(.is-quiet) .hf-card-rest { opacity: 0; transform: translateY(-3px); transition-delay: 60ms; }
.hf-can-hover .hf-card-h:hover:not(.is-quiet) .hf-hist { opacity: 1; visibility: visible; transform: none; transition-delay: 60ms, 60ms, 0s; }
.hf-can-hover .hf-card-h:hover:not(.is-quiet) .hc { clip-path: inset(-8px -8px -8px -8px); transition-delay: 100ms; }

.hf-card-h:is(:focus-visible, :has(.hf-hist-ev:focus-visible), .is-open):not(.is-quiet) { border-color: var(--rule-live); }
.hf-card-h:is(:focus-visible, :has(.hf-hist-ev:focus-visible), .is-open):not(.is-quiet)::after { border-color: var(--ink); }
.hf-card-h:is(:focus-visible, :has(.hf-hist-ev:focus-visible), .is-open):not(.is-quiet) .hf-card-rest { opacity: 0; transform: translateY(-3px); }
.hf-card-h:is(:focus-visible, :has(.hf-hist-ev:focus-visible), .is-open):not(.is-quiet) .hf-hist { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hf-card-h:is(:focus-visible, :has(.hf-hist-ev:focus-visible), .is-open):not(.is-quiet) .hc { clip-path: inset(-8px -8px -8px -8px); }

/* ------------------------------------------------ metric evidence register
   The destination of every card's Evidence link: scientific language, one
   entry per metric, hairlines only. A deep-linked entry is marked by a rule. */

.hf-evidence { margin-top: clamp(40px, 6vw, 88px); }
.hf-evidence + .hf-evidence { margin-top: clamp(28px, 4vw, 56px); }
.hf-evidence-t, .hf-ev dt {
  font-size: clamp(10.5px, 0.8vw, 11.5px);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.hf-evidence-t { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; }
.hf-ev-depth { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.hf-evg > summary .hf-ev-depth { display: block; margin: 2px 0 0; }
.hf-ev-list { margin-top: 14px; border-top: 1px solid var(--rule-strong); }
.hf-evg > .hf-ev-list { margin-top: 0; border-top: 0; }

/* One closed row per metric: name, value, one line of provenance. The register opens beneath it. */
.hf-ev { border-bottom: 1px solid var(--rule); border-left: 2px solid transparent; padding-left: 12px; transition: border-color 200ms var(--ease-quiet); }
.hf-ev:target { border-left-color: var(--ink); }
.hf-evd > summary, .hf-evg > summary {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.6fr) minmax(0, 3.4fr) 1.2em; align-items: baseline; gap: 4px 16px;
  min-height: 48px; padding: 10px 0; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.hf-evg > summary { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--rule); }
.hf-evd > summary::-webkit-details-marker, .hf-evg > summary::-webkit-details-marker { display: none; }
.hf-evd > summary:focus-visible, .hf-evg > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hf-evd > summary:hover h3 { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.hf-evd[open] > summary .hf-chev::before, .hf-evg[open] > summary .hf-chev::before { content: "\2193"; }
.hf-ev h3 { margin: 0; font-size: clamp(15px, 1.2vw, 17.5px); font-weight: 400; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.hf-ev-v { font-size: clamp(15px, 1.2vw, 17.5px); font-variant-numeric: tabular-nums; }
.hf-ev-v.is-missing { color: var(--faint); }
.hf-ev-m { font-size: clamp(12px, 0.95vw, 13.5px); color: var(--muted); overflow-wrap: anywhere; }
.hf-evidence-support .hf-evd > summary { min-height: 36px; padding: 6px 0; }
.hf-evidence-support h3, .hf-evidence-support .hf-ev-v { font-size: clamp(13.5px, 1.05vw, 15px); }
.hf-evidence-support .hf-ev-m { font-size: clamp(11.5px, 0.88vw, 12.5px); }
.hf-evd > dl, .hf-tech dl { margin: 0; display: grid; gap: 6px; }
.hf-evd > dl { padding: 2px 0 10px; max-width: 920px; }
.hf-ev dl > div { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 4fr); gap: 16px; }
.hf-ev dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; max-width: 78ch; }
.hf-ev-code { font-family: var(--mono); font-size: 12.5px; }
.hf-ev-hist { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.hf-tech { max-width: 920px; margin: 0 0 12px; border-top: 1px solid var(--rule); }
.hf-tech > summary { min-height: 40px; padding: 6px 0; }
.hf-tech > summary .hf-acc-t { font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted); }
.hf-tech dl { padding: 4px 0 6px; }

/* The few compositions the mockup draws differently. */

.hf-card-lead, .hf-card-plain {
  aspect-ratio: auto;
}

.hf-card-lead { border-color: var(--rule-strong); }

.hf-grid > .hf-card-lead { grid-column: span 2; }

.hf-card-lead .hf-card-value { font-size: clamp(36px, 3.8vw, 58px); margin-top: clamp(12px, 1.6vw, 24px); letter-spacing: -0.025em; }
.hf-card-sub { margin-top: 0.4em; font-size: clamp(13px, 1.1vw, 16px); color: var(--ink-3); }
.hf-card-lead .hf-card-copy { padding-top: 10px; }

/* ------------------------------------------------------------ secondary lines */

.hf-note { margin-top: clamp(36px, 5.6vw, 84px); }

.hf-note h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: clamp(10px, 1.1vw, 16px);
}

.hf-note p { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.55; color: var(--ink-3); max-width: 72ch; }

.hf-taxonomy {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------- Overview */

.hf-cover { margin-top: clamp(40px, 7vw, 112px); }

.hf-cover h1 {
  font-size: clamp(40px, 5.6vw, 84px);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.02;
}

.hf-cover-sub { margin-top: clamp(18px, 2vw, 30px); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.45; color: var(--ink-3); max-width: 50ch; }


.hf-chart { position: relative; margin-top: clamp(48px, 6.4vw, 100px); }

.hf-chart-cap {
  display: flex; justify-content: space-between; gap: 16px;
  padding-bottom: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.hf-chart-cap span:first-child { color: var(--ink); }

.hf-plot-wrap { position: relative; }

.hf-plot {
  display: block;
  width: 100%;
  height: clamp(220px, 24vw, 380px);
  overflow: visible;
  border-bottom: 1px solid var(--rule-strong);
}

.hf-gl { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 1 5; vector-effect: non-scaling-stroke; }
.hf-seg { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hf-dot { fill: var(--ink); }
.hf-now { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; fill: var(--ink); }

.hf-chart-t {
  position: absolute; left: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--muted);
  pointer-events: none;
}
.hf-chart-t-hi { top: 0; }
.hf-chart-t-lo { bottom: 10px; }

.hf-chart-empty {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: min(88%, 44ch);
  text-align: center;
  font-size: clamp(13.5px, 1.05vw, 15px);
  color: var(--ink-3);
}
.hf-chart-empty-2 { margin-top: 6px; font-size: clamp(12px, 0.9vw, 13px); color: var(--muted); }

.hf-axis { position: relative; height: 36px; margin: 0; padding: 0; list-style: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hf-tick { position: absolute; top: 12px; transform: translateX(-50%); white-space: nowrap; }
.hf-tick::before { content: ""; position: absolute; left: 50%; top: -12px; height: 6px; border-left: 1px solid var(--rule-strong); }
.hf-tick-0 { left: 0; transform: none; }
.hf-tick-0::before { left: 0; }
.hf-tick-1 { left: 16.6667%; }
.hf-tick-2 { left: 33.3333%; }
.hf-tick-3 { left: 50%; }
.hf-tick-4 { left: 66.6667%; }
.hf-tick-5 { left: 83.3333%; }
.hf-tick-6 { left: 100%; transform: translateX(-100%); }
.hf-tick-6::before { left: 100%; }

.hf-cover-note { margin-top: clamp(16px, 1.6vw, 24px); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hf-warn { margin-top: 10px; font-size: 12px; color: var(--ink); }

/* ------------------------------------------------------------------- tables */

.hf-table-wrap { margin-top: clamp(32px, 4.6vw, 66px); }

.hf-table { width: 100%; border-collapse: collapse; text-align: left; }

.hf-table th, .hf-table td {
  padding: clamp(12px, 1.3vw, 19px) 12px clamp(12px, 1.3vw, 19px) 0;
  font-weight: 400;
  font-size: clamp(13px, 1.05vw, 15px);
  vertical-align: baseline;
}

.hf-table thead th {
  font-size: clamp(10.5px, 0.8vw, 11.5px);
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-bottom: clamp(12px, 1.4vw, 20px);
}

.hf-table tbody tr { border-bottom: 1px solid var(--rule); }
.hf-table tbody tr:first-child { border-top: 1px solid var(--rule); }
.hf-table .hf-status { color: var(--muted); letter-spacing: 0.03em; }
.hf-table-portfolio { table-layout: fixed; }
.hf-table-portfolio th:nth-child(1) { width: 25%; }
.hf-table-portfolio th:nth-child(2) { width: 14%; }
.hf-table-portfolio th:nth-child(3) { width: 14%; }
.hf-table-portfolio th:nth-child(4) { width: 15%; }
.hf-table-portfolio th:nth-child(5) { width: 11%; }
.hf-table-portfolio th:nth-child(6) { width: 12%; }
.hf-table-portfolio th:nth-child(7) { width: 9%; }
.hf-table-portfolio tbody td { color: var(--ink); }
.hf-table-portfolio + .hf-grid, .hf-table-wrap + .hf-grid { margin-top: clamp(24px, 3vw, 44px); }

/* History selectors */

.hf-win-in { position: absolute; opacity: 0; pointer-events: none; }

.hf-pills { display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px); margin-top: clamp(30px, 4.4vw, 62px); }

.hf-pills label, .hf-controls a {
  display: inline-block;
  min-width: 5.6em;
  padding: 0.55em 1.6em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  color: var(--muted);
  cursor: pointer;
}

.hf-win { display: none; }

.hf-history .hf-table-wrap { margin-top: clamp(20px, 2.6vw, 38px); }

#hf-w-30d:checked ~ .hf-table-wrap .hf-win-30d,
#hf-w-3m:checked ~ .hf-table-wrap .hf-win-3m,
#hf-w-6m:checked ~ .hf-table-wrap .hf-win-6m,
#hf-w-1y:checked ~ .hf-table-wrap .hf-win-1y,
#hf-w-all:checked ~ .hf-table-wrap .hf-win-all { display: table-row-group; }

#hf-w-30d:checked ~ .hf-pills label[for="hf-w-30d"],
#hf-w-3m:checked ~ .hf-pills label[for="hf-w-3m"],
#hf-w-6m:checked ~ .hf-pills label[for="hf-w-6m"],
#hf-w-1y:checked ~ .hf-pills label[for="hf-w-1y"],
#hf-w-all:checked ~ .hf-pills label[for="hf-w-all"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.hf-win-in:focus-visible ~ .hf-pills label { outline: 2px solid var(--ink); outline-offset: 3px; }

/* --------------------------------------------------------------- Valuation */

.hf-pair {
  display: grid;
  grid-template-columns: 1.03fr 1fr;
  gap: clamp(14px, 1.7vw, 24px);
  margin-top: clamp(28px, 3.6vw, 52px);
}

.hf-pair .hf-card { min-height: clamp(170px, 15.6vw, 226px); padding: clamp(16px, 1.6vw, 23px); }
.hf-pair .hf-card-value { margin-top: auto; }
.hf-pair .hf-card-copy { margin-top: clamp(10px, 1vw, 14px); }

.hf-ladder { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em 0.6em; }
.hf-ladder i { font-style: normal; color: var(--muted); font-size: 0.8em; }

.hf-rows { margin: clamp(30px, 4vw, 58px) 0 0; padding: 0; list-style: none; }

.hf-rows li {
  display: grid;
  grid-template-columns: minmax(150px, 17%) 1fr;
  gap: 12px;
  padding: clamp(11px, 1.15vw, 17px) 0;
  border-top: 1px solid var(--rule);
}

.hf-rows li:last-child { border-bottom: 1px solid var(--rule); }
.hf-rows h2 { font-size: clamp(10.5px, 0.8vw, 11.5px); font-weight: 400; letter-spacing: 0.04em; color: var(--muted); }
.hf-rows p { font-size: clamp(13px, 1.05vw, 15px); }

/* ---------------------------------------------------------------- Research */

.hf-pipeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.45vw, 21px);
  margin: clamp(30px, 3.4vw, 50px) 0 0;
  padding: 0;
  list-style: none;
}

.hf-stage {
  position: relative;
  min-height: clamp(96px, 9.4vw, 136px);
  padding: clamp(12px, 1.1vw, 16px);
  border: 1px solid var(--rule);
  min-width: 0;
}

.hf-stage-first { border-color: var(--ink); }
.hf-stage-n { font-size: clamp(10px, 0.75vw, 11px); color: var(--muted); }
.hf-stage h2 { margin-top: clamp(8px, 1.2vw, 18px); font-size: clamp(14px, 1.3vw, 19px); font-weight: 400; letter-spacing: 0.02em; }
.hf-stage-l { margin-top: 6px; font-size: clamp(10.5px, 0.8vw, 11.5px); color: var(--muted); }

.hf-arrow {
  position: absolute;
  left: calc(clamp(12px, 1.45vw, 21px) * -1);
  top: 50%;
  width: clamp(12px, 1.45vw, 21px);
  transform: translateY(-50%);
  text-align: center;
  font-size: 11px;
  color: var(--muted);
}

.hf-pipeline + .hf-grid { margin-top: clamp(40px, 7vw, 100px); }

/* ---------------------------------------------------------------- Evidence */

/* Progressive disclosure: native <details>, a hairline row and a small chevron. Closed by default; keyboard and
   assistive technology get the open state from the element itself. */

.hf-timeline { margin: clamp(24px, 3.2vw, 46px) 0 0; padding: 0; list-style: none; }
.hf-timeline > li { margin: 0; }
.hf-timeline-empty { padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--muted); }

.hf-acc { border-top: 1px solid var(--rule); }
.hf-acc > summary, .hf-tech > summary {
  display: flex; align-items: center; gap: 16px; min-height: 48px; padding: 10px 0;
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.hf-acc > summary::-webkit-details-marker, .hf-tech > summary::-webkit-details-marker { display: none; }
.hf-acc > summary:focus-visible, .hf-tech > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hf-acc-t { flex: 1 1 auto; min-width: 0; font-size: clamp(14px, 1.15vw, 16.5px); overflow-wrap: anywhere; }
.hf-acc > summary:hover .hf-acc-t, .hf-tech > summary:hover .hf-acc-t { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.hf-chev { flex: none; width: 1.2em; text-align: center; color: var(--muted); font-size: 14px; line-height: 1; }
.hf-chev::before { content: "\2192"; }
.hf-acc[open] > summary .hf-chev::before, .hf-tech[open] > summary .hf-chev::before { content: "\2193"; }
.hf-timeline .hf-acc > summary time {
  flex: 0 0 clamp(88px, 8vw, 118px); font-size: clamp(11px, 0.85vw, 12.5px); letter-spacing: 0.04em; color: var(--muted);
}
.hf-timeline .hf-acc > summary .hf-acc-t { font-size: clamp(15px, 1.25vw, 17.5px); }

.hf-timeline:not(:has(+ .hf-acc-all)) > li:last-child > .hf-acc, .hf-acc-all:not([open]), .hf-depth > .hf-acc:last-child:not([open]) {
  border-bottom: 1px solid var(--rule);
}
.hf-acc-all > .hf-timeline { margin-top: 0; }
.hf-acc-all[open] > .hf-timeline > li:last-child > .hf-acc { border-bottom: 1px solid var(--rule); }

.hf-acc-body { padding: 2px 0 18px calc(clamp(88px, 8vw, 118px) + 16px); }
.hf-acc-body dl, .hf-tech dl { margin: 0; display: grid; gap: 6px; }
.hf-acc-body dl > div { display: grid; grid-template-columns: minmax(84px, 1fr) minmax(0, 5fr); gap: 12px; }
.hf-acc-body dt { font-size: clamp(10.5px, 0.8vw, 11.5px); letter-spacing: 0.06em; color: var(--muted); }
.hf-acc-body dd { margin: 0; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.hf-acc-body p { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); max-width: 80ch; }
.hf-acc-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.hf-acc-links a { min-height: 32px; display: inline-flex; align-items: center; }

/* Measurement depth: two collapsed groups of compact rows. */

.hf-depth { margin-top: clamp(20px, 2.6vw, 38px); }
.hf-acc-group > summary { min-height: 56px; }
.hf-acc-group > summary .hf-acc-t { font-size: clamp(16px, 1.35vw, 19px); }
.hf-mrows { margin: 0; padding: 0 0 14px; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
.hf-mrows li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--rule); font-size: clamp(13px, 1.05vw, 14.5px);
}
.hf-mrow-n { min-width: 0; overflow-wrap: anywhere; }
.hf-mrow-n a { color: inherit; text-decoration: none; }
.hf-mrow-n a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hf-mrow-n a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hf-mrow-s { flex: 0 1 auto; max-width: 62%; min-width: 0; overflow-wrap: anywhere; text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hf-mrow-s.is-missing { color: var(--muted); }

.hf-controls { display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px); margin: clamp(20px, 2.6vw, 38px) 0 0; }
.hf-controls a:hover { color: var(--ink); border-color: var(--ink); }

/* ------------------------------------------------------------- Methodology */

.hf-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 6%;
  margin-top: clamp(24px, 3vw, 44px);
}

.hf-blocks { display: grid; gap: clamp(10px, 1.1vw, 16px); align-content: start; }

.hf-block {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: end;
  min-height: clamp(84px, 8vw, 116px);
  padding: clamp(12px, 1.3vw, 19px) clamp(14px, 1.45vw, 21px);
  border: 1px solid var(--rule);
}

.hf-block h2 { grid-column: 1 / -1; font-size: clamp(10px, 0.8vw, 11.5px); font-weight: 400; letter-spacing: 0.04em; color: var(--ink-3); }
.hf-block-v { font-size: clamp(18px, 1.65vw, 24px); line-height: 1.2; }
.hf-block-v a { text-decoration: none; }
.hf-block-l { font-size: clamp(10.5px, 0.8vw, 11.5px); color: var(--muted); padding-bottom: 0.3em; }

.hf-statuses { padding-top: clamp(20px, 3.4vw, 48px); }
.hf-statuses > h2, .hf-tools h2 { font-size: clamp(10px, 0.8vw, 11.5px); font-weight: 400; letter-spacing: 0.06em; color: var(--muted); }

.hf-status-list { margin: clamp(14px, 1.7vw, 24px) 0 0; padding: 0; list-style: none; }

.hf-status-list li {
  display: grid;
  grid-template-columns: minmax(110px, 30%) minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  padding: clamp(8px, 0.95vw, 14px) 0;
}

.hf-status-list h3 { font-size: clamp(14px, 1.25vw, 18px); font-weight: 400; letter-spacing: 0.02em; }
.hf-status-list p { font-size: clamp(11px, 0.85vw, 12.5px); color: var(--muted); }

.hf-tools { margin-top: clamp(14px, 1.8vw, 26px); }
.hf-tools p { margin-top: 12px; font-size: clamp(11.5px, 0.9vw, 13px); color: var(--muted); max-width: 60ch; }

/* ------------------------------------------------------------------- About */

.hf-manifesto { margin-top: clamp(40px, 8.6vw, 124px); }
.hf-manifesto h1, .hf-manifesto h2 { font-size: clamp(38px, 5vw, 72px); font-weight: 400; letter-spacing: 0.02em; line-height: 1.15; }
.hf-manifesto-2 { font-size: clamp(32px, 4.2vw, 60px); letter-spacing: 0.02em; line-height: 1.2; margin-top: clamp(8px, 1vw, 14px); }
.hf-manifesto-3 { font-size: clamp(22px, 2.5vw, 36px); color: var(--muted); margin-top: clamp(22px, 3vw, 44px); line-height: 1.25; }

.hf-manifesto-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-top: clamp(64px, 14vw, 200px);
  padding-top: clamp(16px, 1.9vw, 28px);
  border-top: 1px solid var(--rule);
}

.hf-m-a { font-size: clamp(13px, 1.1vw, 16px); }
.hf-m-right { text-align: right; }
.hf-m-right .hf-m-a { font-size: clamp(18px, 1.65vw, 24px); letter-spacing: 0.02em; }
.hf-m-c { margin-top: 12px; font-size: clamp(10px, 0.8vw, 11.5px); letter-spacing: 0.04em; color: var(--muted); }

/* ------------------------------------------------- the long page at / */

.hf-section + .hf-section {
  margin-top: clamp(56px, 6.4vw, 104px);
  padding-top: clamp(26px, 3vw, 46px);
  border-top: 1px solid var(--rule);
}

#overview { min-height: 0; }

/* ---------------------------------------------------------- footer + legacy */

.hf-foot { padding-bottom: clamp(18px, 2vw, 28px); }

.hf-sign { margin: clamp(48px, 7vw, 112px) 0 16px; font-size: 13px; letter-spacing: 0.02em; color: var(--ink-3); }

.hf-reuse { margin-top: clamp(18px, 2vw, 28px); padding-top: 12px; border-top: 1px solid var(--rule); max-width: 100ch; }
.hf-reuse h2 { margin: 0; font-size: 10.5px; font-weight: 400; letter-spacing: 0.08em; color: var(--muted); }
.hf-reuse p { margin: 4px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }

.hf-foot-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.hf-about-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: clamp(20px, 2.4vw, 34px);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.hf-about-notes a { text-decoration-color: transparent; }
.hf-about-notes a:hover { text-decoration-color: currentColor; }

.hf-foot-line .linkish { font: inherit; letter-spacing: inherit; color: inherit; }

/* The X mark: quiet as the line it sits in, with a full-size hit area around a small glyph. */
.hf-x {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 32px; height: 32px; margin: -10px -4px -10px 2px; color: var(--muted); text-decoration: none;
}
.hf-x:hover { color: var(--ink); }
.hf-x:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }

.hf-legacy { margin-top: clamp(16px, 2vw, 32px); }

/* --------------------------------------------------------------- responsive */

@media (max-width: 1099px) {
  .hf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hf-card-head { font-size: 11px; }
  .hf-card-copy { font-size: 12px; }
  .hf-grid > .hf-card-lead { aspect-ratio: 3.4; }
  .hf-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(12px, 1.45vw, 21px); }
  .hf-stage:nth-child(3n + 1) .hf-arrow { display: none; }
}

@media (max-width: 899px) {
  .hf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 759px) {
  .hf-top { flex-direction: column; gap: 6px; }
  .hf-meta { width: 100%; text-align: left; }
  .hf-nav { margin-top: 12px; }
  .hf-nav-desktop { display: none; }
  .hf-nav-mobile { display: block; font-size: 12px; }
  .hf-nav-mobile summary {
    display: inline-block;
    padding: 0.5em 1.4em;
    border: 1px solid var(--rule);
    border-radius: 999px;
    letter-spacing: 0.04em;
    list-style: none;
    cursor: pointer;
  }
  .hf-nav-mobile summary::-webkit-details-marker { display: none; }
  .hf-nav-mobile-list { margin-top: 8px; }
  .hf-nav-mobile .hf-nav-row { display: block; font-size: 14px; line-height: 1; }
  .hf-nav-mobile .hf-nav-row a { display: block; padding: 10px 0; }
  .hf-nav-mobile .hf-nav-row span { display: none; }
  .hf-nav-mobile .hf-nav-row li { white-space: normal; }
  .hf-day { text-align: left; }
  .hf-meta-line { justify-content: space-between; }

  .hf-grid { grid-template-columns: minmax(0, 1fr); }
  .hf-grid > .hf-card-lead { grid-column: auto; aspect-ratio: 854 / 522; }
  .hf-evd > summary { grid-template-columns: minmax(0, 1fr) auto 1.2em; }
  .hf-evd > summary .hf-ev-m { grid-column: 1 / 3; grid-row: 2; }
  .hf-evd > summary .hf-chev { grid-column: 3; grid-row: 1; }
  .hf-ev dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hf-pair, .hf-two { grid-template-columns: minmax(0, 1fr); }
  .hf-two { row-gap: 8px; }
  .hf-pipeline { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .hf-stage:nth-child(3n + 1) .hf-arrow { display: block; }
  .hf-arrow { left: 0; right: 0; top: -22px; width: auto; height: 22px; line-height: 22px; transform: none; font-size: 0; }
  .hf-arrow::before { content: "↓"; font-size: 13px; }
  .hf-rows li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hf-acc-body { padding-left: 0; }
  .hf-acc-body dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hf-timeline .hf-acc > summary { flex-wrap: wrap; row-gap: 0; }
  .hf-timeline .hf-acc > summary time { flex: 1 0 100%; padding-top: 2px; }
  .hf-timeline .hf-acc > summary .hf-acc-t { flex: 1 1 0; }
  .hf-mrows { grid-template-columns: minmax(0, 1fr); }
  .hf-mrows li { padding: 12px 0; }
  .hf-manifesto { margin-top: 72px; }
  .hf-manifesto-foot { flex-direction: column; margin-top: 150px; }
  .hf-foot { margin-top: 28px; }
  .hf-m-right { text-align: left; }
  .hf-tick { font-size: 10px; }

  .hf-table, .hf-table tbody, .hf-table tr, .hf-table td, .hf-table th { display: block; }
  .hf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hf-table tbody:not(.hf-win) { display: block; }
  .hf-table .hf-win { display: none; }
  #hf-w-30d:checked ~ .hf-table-wrap .hf-win-30d,
  #hf-w-3m:checked ~ .hf-table-wrap .hf-win-3m,
  #hf-w-6m:checked ~ .hf-table-wrap .hf-win-6m,
  #hf-w-1y:checked ~ .hf-table-wrap .hf-win-1y,
  #hf-w-all:checked ~ .hf-table-wrap .hf-win-all { display: block; }
  .hf-table td { padding: 4px 0; display: grid; grid-template-columns: 38% 1fr; }
  .hf-table tbody th { display: block; padding: 0 0 6px; font-size: 16px; }
  .hf-pills label { min-width: 0; padding: 0.6em 0; flex: 1 1 0; }
  .hf-pills { flex-wrap: nowrap; gap: 6px; }
  .hf-card-head { font-size: 11.5px; }
  .hf-card-copy { font-size: 14px; }
  .hf-badge { font-size: 10.5px; }
  .hf-note p, .hf-sub { font-size: 14px; }
  .hf-foot-line { flex-wrap: wrap; row-gap: 6px; }
  .hf-foot-line .linkish { order: 3; flex-basis: 100%; text-align: left; }
  .hf-table td::before { content: attr(data-label); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); }
  .hf-table tbody tr { padding: 12px 0; }
}

/* ------------------------------------------- subordinate (SUPPORT) cards
   AI spend, Infrastructure & tooling, Bugs confirmed, Bugs fixed: two small cards stacked in ONE grid cell beside
   the CORE card they support. Same facts, smaller: no all-time layer; the label is the metric's Evidence link.
   The cell keeps the card ratio, so nothing shifts whether a value exists or not. */

.hf-support-stack {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 0.9vw, 12px);
  min-width: 0;
  aspect-ratio: 854 / 522;
}

.hf-card-s {
  aspect-ratio: auto;
  min-height: 0;
  padding: clamp(7px, 0.7vw, 10px) clamp(10px, 1vw, 14px);
  border-color: var(--rule-2);
}

.hf-card-s { gap: 2px; }
.hf-card-s .hf-card-head { min-height: 0; align-items: flex-start; font-size: clamp(9.5px, 0.72vw, 10.5px); }
.hf-card-s .hf-card-label { letter-spacing: 0.02em; padding-right: 4px; overflow-wrap: break-word; }
.hf-card-s .hf-card-label a { color: inherit; text-decoration: none; }
.hf-card-s .hf-card-label a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hf-card-s .hf-card-label a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hf-card-s .hf-badge { padding: 0.25em 0.8em; font-size: clamp(9px, 0.62vw, 9.5px); }
.hf-card-s .hf-u, .hf-card-s .hf-unit { font-size: max(0.5em, 9.5px); }
.hf-card-s .hf-card-value { margin-top: clamp(4px, 0.5vw, 8px); font-size: clamp(17px, 1.45vw, 23px); letter-spacing: -0.015em; }
.hf-card-s .hf-card-copy { margin-top: auto; }
/* The one-sentence definition stays for assistive technology and in Evidence; it is drawn only on phones, where the cards are tall enough. */
.hf-card-s .hf-card-copy {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 759px) {
  .hf-support-stack { aspect-ratio: auto; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-card-s { min-height: clamp(104px, 32vw, 128px); }
  .hf-card-s .hf-card-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hf-card-s .hf-card-copy { position: static; width: auto; height: auto; margin: auto 0 0; clip: auto; white-space: normal; display: block; font-size: 10px; }
}

/* A lone supporting card fills its cell (and can show its sentence): the cell keeps the card ratio either way. */
.hf-support-stack:has(> .hf-card-s:only-child) { grid-template-rows: minmax(0, 1fr); }
.hf-card-s:only-child .hf-card-copy {
  position: static; width: auto; height: auto; margin: auto 0 0; overflow: visible; clip: auto; white-space: normal;
  font-size: clamp(10px, 0.8vw, 11.5px); line-height: 1.4;
}
@media (max-width: 759px) {
  .hf-support-stack:has(> .hf-card-s:only-child) { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------ the cover's orientation strip
   What is known today, from the canonical values: no cards, no No data. Each label is an Evidence link. */

.hf-facts {
  display: grid;
  /* Hours worked leads: the first column is wider, so the longest value never touches its hairline. */
  grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr));
  margin: clamp(28px, 3.2vw, 48px) 0 0;
  border-top: 1px solid var(--rule-strong);
}
.hf-fact { padding: clamp(14px, 1.3vw, 20px) clamp(12px, 1.2vw, 18px) clamp(14px, 1.3vw, 20px) 0; min-width: 0; }
.hf-fact + .hf-fact { border-left: 1px solid var(--rule); padding-left: clamp(12px, 1.2vw, 18px); }
.hf-fact dt { font-size: clamp(10.5px, 0.78vw, 11.5px); letter-spacing: 0.08em; text-transform: uppercase; }
.hf-fact dt a { color: var(--ink-3); text-decoration: none; display: inline-block; padding: 4px 0; }
.hf-fact dt a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hf-fact dt a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hf-fact dd { margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
.hf-fact-v { font-size: clamp(28px, 2.8vw, 42px); line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.hf-fact-c { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.hf-fact-r { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-3); overflow-wrap: anywhere; }
.hf-fact-s { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 1099px) {
  .hf-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hf-fact:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .hf-fact:nth-child(n + 4) { border-top: 1px solid var(--rule); }
}
@media (max-width: 759px) {
  .hf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-fact:nth-child(3n + 1) { border-left: 1px solid var(--rule); padding-left: 14px; }
  .hf-fact:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .hf-fact:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .hf-fact-v { font-size: clamp(26px, 8vw, 32px); }
}

/* ------------------------------------------------------------- unknown, set quieter
   A placeholder is never as large as a measured number: the eye finds what is known first. */

.hf-card-value.is-missing { font-size: clamp(20px, 1.8vw, 27px); }
.hf-card-lead .hf-card-value.is-missing { font-size: clamp(26px, 2.6vw, 38px); }
.hf-card-s .hf-card-value.is-missing { font-size: clamp(14px, 1.1vw, 17px); }

@media (max-width: 759px) {
  /* On a phone an empty card is a compact row, not a tall empty rectangle. */
  .hf-grid > .hf-card:not(.hf-card-lead):has(> .hf-card-value.is-missing),
  .hf-grid > .hf-card-h:has(.hf-card-value.is-missing) { aspect-ratio: auto; }
  .hf-grid > .hf-card:has(.hf-card-value.is-missing) .hf-card-copy { margin-top: 14px; }
  .hf-grid > .hf-card-h:has(.hf-card-value.is-missing) .hf-card-body { min-height: 118px; }
}

/* ------------------------------------------------------------------ motion
   Motion enhances content that is already visible; it never decides whether content exists. No rule here gives a
   piece of content a hidden resting state: each animation runs from a faded or clipped first frame to the element's
   normal, visible state, so if the script, the observer or the animation itself fails, the content is simply there.
   Numbers counting up are the script's (it writes the exact markup text back). Reduced motion removes all of it. */

@media (prefers-reduced-motion: no-preference) {
  @keyframes hf-open { from { opacity: 0; transform: translateY(-4px); } }
  @keyframes hf-rise { from { opacity: 0; transform: translateY(4px); } }
  @keyframes hf-draw { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(-4px); } }

  /* What a disclosure reveals fades in as it opens. */
  .hf-evd[open] > dl, .hf-evd[open] > .hf-tech, .hf-tech[open] > dl, .hf-evg[open] > .hf-ev-list,
  .hf-acc[open] > .hf-acc-body, .hf-acc[open] > .hf-mrows, .hf-acc-all[open] > .hf-timeline { animation: hf-open 220ms var(--ease-quiet); }

  /* The consent notice rises into place. */
  .consent:not([hidden]) { animation: hf-rise 240ms var(--ease-quiet); }

  /* The chart draws upward once, when the script marks it as in view. */
  html.js-motion .hf-chart.is-drawn .hf-plot { animation: hf-draw 900ms var(--ease-quiet); }

  /* A value that is counting does not shift its neighbours. */
  .is-counting { font-variant-numeric: tabular-nums; }
}

@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    :root { interpolate-size: allow-keywords; }
    .hf-acc::details-content, .hf-tech::details-content, .hf-evd::details-content, .hf-evg::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size 220ms var(--ease-quiet), content-visibility 220ms allow-discrete;
    }
    .hf-acc[open]::details-content, .hf-tech[open]::details-content, .hf-evd[open]::details-content, .hf-evg[open]::details-content { block-size: auto; }
  }
}

/* ------------------------------------------------------------ presentation (preview)
   One grid for every measured section (4 / 2 / 1 columns), a four-fact hero (4 / 2 x 2 / 1), compact disclosures. */

.hf-grid-m { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hf-grid-m > .hf-card { aspect-ratio: auto; min-height: clamp(168px, 14vw, 226px); }
.hf-subhead { margin: clamp(28px, 3.6vw, 52px) 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; font-weight: 400; color: var(--muted); }
.hf-subhead + .hf-grid { margin-top: 12px; }
@media (max-width: 999px) { .hf-grid-m { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .hf-grid-m { grid-template-columns: minmax(0, 1fr); } }

.hf-facts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hf-facts-4 .hf-fact:nth-child(n) { border-top: 0; border-left: 1px solid var(--rule); padding-left: clamp(12px, 1.2vw, 18px); }
.hf-facts-4 .hf-fact:nth-child(1) { border-left: 0; padding-left: 0; }
@media (max-width: 999px) {
  .hf-facts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-facts-4 .hf-fact:nth-child(n) { border-top: 0; border-left: 1px solid var(--rule); padding-left: clamp(12px, 1.2vw, 18px); }
  .hf-facts-4 .hf-fact:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .hf-facts-4 .hf-fact:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 599px) {
  .hf-facts-4 { grid-template-columns: minmax(0, 1fr); }
  .hf-facts-4 .hf-fact:nth-child(n) { border-left: 0; padding-left: 0; border-top: 0; }
  .hf-facts-4 .hf-fact:nth-child(n + 2) { border-top: 1px solid var(--rule); }
}

.hf-acc-v { flex: 0 1 auto; max-width: 70%; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); text-align: right; overflow-wrap: anywhere; }
.hf-acc-unmeasured, .hf-acc-ref, .hf-acc-secondary { margin-top: clamp(24px, 3vw, 44px); border-bottom: 1px solid var(--rule); }
.hf-acc-unmeasured:not([open]) > summary .hf-acc-t { color: var(--muted); }
.hf-acc-secondary > .hf-section { margin-top: clamp(24px, 3vw, 44px); }
.hf-acc-ref > .hf-acc-body { padding: 2px 0 18px 0; }
.hf-ref-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 4fr); gap: 4px 20px; padding: 12px 0; border-top: 1px solid var(--rule); }
.hf-ref-row dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); padding-top: 4px; }
.hf-ref-row dd { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hf-ref-v { font-size: clamp(15px, 1.2vw, 18px); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.hf-ref-n { font-size: clamp(12px, 0.9vw, 13.5px); line-height: 1.5; color: var(--ink-3); max-width: 78ch; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .hf-ref-row { grid-template-columns: minmax(0, 1fr); }
  .hf-acc-v { flex-basis: 100%; max-width: 100%; text-align: left; order: 3; }
  .hf-acc-secondary > summary, .hf-acc-ref > summary { flex-wrap: wrap; row-gap: 2px; }
}

.hf-qbar { display: block; width: 100%; height: 6px; margin-top: 12px; }
.hf-qbar-bg { fill: var(--rule); }
.hf-qbar-fg { fill: var(--ink); }