/* ELAH — page styles.
   Every value here resolves to a token. tokens.css is the authority; nothing
   below invents a size, a colour, a duration or an easing. */

/* This page is substantially firing tables, cost ledgers and an ammunition
   data card, and figures appear inside running prose as often as inside the
   tables. Setting tabular figures once on the root is the honest reading of
   the rule for this page: every numeric context, not the ones I remembered.
   Not one of the 26 benchmark sites does this at all. */
body { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- chrome */

.skip-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  z-index: 90;
  padding: var(--space-2xs) var(--space-s);
  background: var(--accent);
  color: var(--accent-ink);
  font: var(--weight-medium) var(--step--1)/1 var(--font-mono);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* The graticule. Four hairlines fixed above everything and never scrolling,
   so every screen reads as an instrument rather than a page. Measured on both
   Ares and Atlas Motion; it costs four spans and one rule colour. */
.graticule {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
/* Reticle, not Scribe Line. The graticule is THE move that makes every screen
   read as an instrument rather than a page, and at rule colour it was so close
   to the ground that it did nothing. Ares runs theirs in the mint accent for
   exactly this reason. Furniture only: it never touches content. */
.graticule span { border-inline-start: 1px solid var(--instrument); opacity: 0.28; }
.graticule span:first-child { border-inline-start: 0; }

.topbar {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  gap: var(--space-2xs);
  color: var(--ink);
  text-decoration: none;
}
.topbar__brand .mark { inline-size: 1.5rem; block-size: 1.5rem; }
.topbar__word {
  font: var(--weight-semibold) var(--step-0)/1 var(--font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.topbar__meta {
  font: var(--weight-regular) var(--step--2)/1 var(--font-mono);
  letter-spacing: var(--tracking-meta);
  color: var(--instrument);
}

/* ---------------------------------------------------------------- shared */

.kicker {
  font: var(--weight-medium) var(--step--1)/1.4 var(--font-mono);
  letter-spacing: var(--tracking-meta);
  color: var(--ink-muted);
  text-transform: uppercase;
  max-inline-size: var(--measure-wide);
}

/* TOUCH TARGETS. Measured at 390px before this: the two CTAs were 37px tall,
   the seven footer source links 15px, and the brand 24px. WCAG 2.5.5 asks for
   44px and a thumb is about 45px wide, so every one of them was a miss waiting
   to happen. min-block-size rather than more padding, so the label keeps its
   optical size and only the hit area grows. */
.cta {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-m);
  background: var(--accent);
  color: var(--accent-ink);
  font: var(--weight-semibold) var(--step--1)/1 var(--font-mono);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  text-decoration: none;
  transition: filter var(--dur-fast) var(--ease-emphasis);
}
.cta::after { content: "\2192"; }
.cta:hover { filter: brightness(1.12); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------- 01 */

/* THE POSTER FRAME.
   IMAGE-FIRST rule 1: no page leaves the kit without one. Rules 2 and 3: the
   object wins, bleeds to at least two viewport edges, is cropped by the frame
   rather than floating inside it, and is a RENDERED still rather than live
   WebGL. The previous fold was a small canvas centred on flat olive with three
   quarters of the viewport empty, and visual-gate.mjs failed it at 29.1%
   coverage against a 30% floor. This bleeds to all four. */
.fold {
  position: relative;
  isolation: isolate;
  /* The media bleeds past the fold's own padding on purpose, and the amount it
     bleeds is a fixed token while the padding shrinks in a media query - so at
     320px it stuck 24px past the right edge and the page reflowed at 400% zoom.
     Clip at the section: the bleed is meant to reach the section's edges and
     nothing beyond them, so this removes the overflow without removing an inch
     of picture. */
  overflow: hidden;
  min-block-size: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--space-xl) var(--space-l) var(--space-m);
}

.fold__media { grid-area: 1 / 1 / -1 / -1; position: relative; }
.fold__media img {
  position: absolute;
  inset: calc(var(--space-xl) * -1) calc(var(--space-l) * -1) calc(var(--space-m) * -1);
  inline-size: calc(100% + var(--space-l) * 2);
  block-size: calc(100% + var(--space-xl) + var(--space-m));
  object-fit: cover;
  object-position: 50% 40%;
  /* The reset in tokens.css sets `img { max-width: 100% }`, which is right for
     every image on the page except this one: it silently clamped the bleed back
     to the content box, so the fold was 80px short on its right edge at 1440.
     A deliberate full-bleed has to opt out of the reset by name. */
  max-inline-size: none;
}

/* The scrim is a contrast guarantee, not a mood.
   Type sits directly on the render, which the benchmarks all do, but the frame
   has a bright horizon on the right and the headline crosses it. This lays the
   page's own ground back under the type at full strength and lets it fall away
   before it reaches the object. */
.fold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Dialled back. The scrim is a contrast guarantee and it had drifted into
     being a vignette: an opaque bottom third and a hard top band were eating
     the render on both edges. Each stop below is the lowest value that still
     clears AA for the text sitting on it - measured, not eyeballed - so the
     type is as safe as it was and there is more picture. */
  background:
    linear-gradient(to top, color-mix(in srgb, var(--surface) 88%, transparent) 0%,
                    color-mix(in srgb, var(--surface) 62%, transparent) 17%,
                    color-mix(in srgb, var(--surface) 14%, transparent) 38%, transparent 54%),
    linear-gradient(to right, color-mix(in srgb, var(--surface) 54%, transparent) 0%, transparent 42%),
    /* The brand and the meta line sit on the render's brightest area, so the
       top still needs a band - a lighter and shorter one than it had. */
    linear-gradient(to bottom, color-mix(in srgb, var(--surface) 58%, transparent) 0%,
                    color-mix(in srgb, var(--surface) 20%, transparent) 5%, transparent 10%);
}

.fold__type { grid-area: 2 / 1; position: relative; z-index: 2; display: grid; gap: var(--space-2xs); }

/* LANDING SHOWS THE HEADLINE AND NOTHING ELSE.
   The round is deploying for the first 2.4s and the headline is the only thing
   that has to be read against it; the kicker, the lede, the action and the
   nomenclature arrive once the round has finished opening, so the first frame
   is an object and four words rather than a paragraph over a moving image.

   Gated on html[data-film-state], which scroll-film sets only once it is
   running. With scripting off the flag never appears, this rule never applies,
   and the whole fold is present in the markup as it always was. :focus-within
   is the keyboard escape hatch: tabbing to the call to action during those 2.4
   seconds reveals it rather than focusing something invisible. */
html[data-film-state] .fold .kicker,
html[data-film-state] .fold .fold__foot {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--dur-slow) var(--ease-enter),
              transform var(--dur-slow) var(--ease-enter);
}
html[data-film-state] .fold[data-fold-open] .kicker,
html[data-film-state] .fold[data-fold-open] .fold__foot,
html[data-film-state] .fold .fold__foot:focus-within,
html[data-film-state] .fold .kicker:focus-within {
  opacity: 1;
  transform: none;
}
/* The kicker leads, the supporting block follows, so it reads as one move. */
html[data-film-state] .fold[data-fold-open] .fold__foot { transition-delay: 140ms; }

@media (prefers-reduced-motion: reduce) {
  html[data-film-state] .fold .kicker,
  html[data-film-state] .fold .fold__foot { opacity: 1; transform: none; transition: none; }
}

/* Sized to SPAN, not stepped off a ladder. 9.1vw is the measured factor for
   this string in Archivo w600 uppercase at -0.045em: eighteen characters at
   roughly 0.58em of advance each. It is the LCP element. */
.fold__headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 5.5vw, 6.6rem);
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-case);
  color: var(--ink);
  white-space: nowrap;
}

.fold__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m) var(--space-xl);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--space-2xs);
}
.fold__lede {
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--ink-muted);
  max-inline-size: 52ch;
}
.fold__caption {
  margin: 0;
  flex-basis: 100%;
  font: var(--weight-regular) var(--step--2)/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-meta);
  color: var(--ink-subtle);
}

@media (max-width: 60rem) {
  .fold { padding-block: var(--space-3xl) var(--space-l); }
  .fold__headline { white-space: normal; font-size: var(--display-2); }
  .fold__media img { object-position: 50% 30%; }
}

@media (max-width: 24rem) {
  .fold,
  .scene:not([data-film]),
  .scene__stage,
  .site-footer,
  .topbar { padding-inline: var(--space-s); }
}