/* ═══ THE FACES — DECLARED HERE, BECAUSE aria.html LOADS NOTHING ELSE ══════
   aria.html links blocks.css + chrome.css + aria.css + footer.css. It does
   NOT link site.css, and site.css is where all four @font-face rules lived.

   MEASURED, S8: document.fonts.size === 0 on aria.html. --face-d resolved to
   the string 'Fraunces' and rendered Georgia, because asking for a family is
   not the same as declaring where it lives. blocks.css names the same two
   families that site.css does, so the page LOOKED correctly specified in
   every stylesheet and shipped with no webfonts at all.

   This is the second page found this way. index.html was the first — see
   DOCS/CARRY-FORWARD.md §1. The pattern is the two design systems: a page
   loads one system's stylesheet and the faces are declared in the other's.

   Copied byte-for-byte from site.css, all four, including the unicode-range
   split, so the three systems cannot drift on the face while all three live.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/fraunces-normal-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/fraunces-normal-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CORVEXAL — THE ELEVEN BLOCKS
   Site Bible, Part II §0

   > Every interior page is built from the same eleven blocks.
   > Nothing is bespoke.

       HERO       eyebrow · H1 · one paragraph · fact rail
       STATEMENT  H2 left, body right, hairline above
       GRID       2–6 cards, Tetris-packed, never uniform
       SPEC       monospace, hairline rules, no fills
       DIAGRAM    scroll-bound, position-locked, reversible
       SHOWCASE   media, 24px radius, caption below
       QUOTE      one sentence, large, hairlines above and below
       TIMELINE   vertical, filled and hollow dots
       WEB        the tree component, reused
       LIMIT      a claim's boundary, always immediately after the claim
       DOOR       one action, one line of context

   When a page is needed in 2029 it is composed from these. That is how a
   site survives four years of additions without becoming a patchwork.

   ═══ THE PALETTE IS PER PAGE, AND MEASURED ══════════════════════════════

   Kevin, 2026-08-22: "ignore the cream directive from the document each page
   will have it's distinct color based on the template used."

   So cream is /network's colour because Vantara is cream. It is NOT the
   site's colour. Every palette below was read with getComputedStyle off that
   page's own template capture at 1440x900. Nothing here was chosen.

   Part I §8 — "when in doubt, a survey document" — governs the REGISTER:
   hairlines, coordinates, plate numbers, fact rails, monospace annotation.
   That survives every palette and is what keeps eight grounds one site.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

/* ── MOTION — Part I §7. One curve. Four durations. ─────────────────────
     "Nothing is linear. Nothing is ease."                                 */
  --e:      cubic-bezier(0.44, 0, 0.56, 1);
  --e-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --d1:     120ms;
  --d2:     200ms;
  --d3:     320ms;
  --d4:     480ms;

  /* THE FIFTH IS AMBIENT, NOT INTERACTIVE, and it is named so it cannot be
     mistaken for one of the four. d1-d4 are response times — something the
     reader did, answered. This is a loop that runs whether or not anybody
     is there: the verification beam on the control plane. Measured off
     references/Overhaul/animated-beam, whose duration is Math.random()*3+4
     per beam; 4.6s is the midpoint of that 4-to-7s range, taken flat
     because a static page has no mount to randomise at and five beams
     reading one clock is calmer than five reading none. */
  --d-amb:  4600ms;

  /* ── THE SCALE — Vantara's measured proportions, face-independent ────── */
  --t-h1: 86px;   --t-h1-lh: 86px;    --t-h1-ls: -2.5px;
  --t-h2: 70px;   --t-h2-lh: 73.5px;  --t-h2-ls: -1.5px;
  --t-h3: 32px;   --t-h3-lh: 36.8px;  --t-h3-ls: -0.5px;
  --t-h4: 28px;   --t-h4-lh: 32.2px;  --t-h4-ls: -0.3px;
  --t-lead: 30px; --t-lead-lh: 42px;
  --t-body: 20px; --t-body-lh: 32px;
  --t-sm:   15px; --t-sm-lh:   24px;
  --t-eye:  13px; --t-eye-ls:  1.6px;
  --t-mono: 13px; --t-mono-lh: 22px;

  --w-display: 700;
  --w-mid:     600;
  --w-label:   500;
  --w-body:    400;

  --face-d: 'Fraunces', Georgia, 'Times New Roman', serif;
  --face-u: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --face-m: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --cue-dur: 1800ms;
  --instant: 1ms;
  --band:   128px;
  --band-s: 88px;
  --gut:    40px;
  --colw:   1280px;
  --r-lg:   24px;
  --r-md:   16px;
  --tap:    44px;

  /* NO --amber TOKEN HERE, DELIBERATELY.

     Amber has three uses on the whole site and all three are already spent,
     in site.css: the point in the arrival, the EMBER column in the warm/cold
     split, and the primary action on /ember. Declaring the token in a second
     stylesheet is how a fourth use gets written by somebody who checks
     whether the token exists rather than whether the budget does.

     Each page's --acc below is that page's own metal. It is not amber. */
}

  .diag { position: relative; }
.diag svg { width: 100%; height: auto; overflow: visible; }

/* .diag moved to diagram.css, which index.html and aria.html both load. */


/* ═══ THE EIGHT GROUNDS ════════════════════════════════════════════════════
   ground · ink · muted · accent · card · line — all measured.

   ═══ WHY THERE ARE TWO ACCENTS ═══════════════════════════════════════════

   --acc       the metal. Fills, rules, marks, the current rail line.
   --acc-text  the same metal when it is TYPE.

   On seven of the eight pages they are identical and are declared
   identically, on purpose, so nobody has to remember which pages are the
   exception. On /network they are not, and that page is why the pair
   exists: Vantara's bronze #B68A5E on its own cream ground is 2.82:1. That
   fails AA at 13px and it fails at 64px, and .eye — the eyebrow above every
   section heading on the site — is 13px accent type.

   #8A6034 is the same bronze taken down until it clears: 5.03:1 on cream,
   5.52:1 on white. As a fill, the bright bronze stays; it is only as a
   letterform that it was never legible.

   Measured, not assumed. Every value in this block was checked against both
   of its own grounds; the two that failed are the two that changed.       */

/* PERFORM — the landing.
   --mut is #6F6F6F, not Perform's measured #888888. Measured is not the
   same as legible: #888888 on white is 3.54:1 and on --bg2 it is 3.20:1,
   and both fail AA for normal text. It carries .sm, .gc__b, .door__c and
   every fact rail label on the page, so this is not a corner case — it is
   most of the landing's small copy.
   #6F6F6F is the LIGHTEST grey that clears 4.5:1 on both grounds: 5.02 on
   #FFFFFF and 4.53 on #F4F3F1. Measured, not picked. */
[data-page="home"] {
  --bg: #FFFFFF; --bg2: #F4F3F1; --ink: #000000; --mut: #6F6F6F;
  --acc: #171717; --acc-text: #171717;
  --card: #FFFFFF; --line: rgba(0,0,0,.10); --oncard: #000000;
}
/* BE THE WIND — /ember */
[data-page="ember"] {
  --bg: #F7F3EB; --bg2: #FFFFFF; --ink: #20231F; --mut: #6C716B;
  --acc: #244A3A; --acc-text: #244A3A; --card: #FFFFFF; --line: rgba(32,35,31,.14); --oncard: #20231F;
}
/* AGENCIY + MAGNETTO — /aria. Black and white. No bronze, no amber. */
/* AGENCIY WAS MEASURED AT #000000 AND THIS PAGE NO LONGER USES IT.
   Kevin, 2026-08-24: "NO BLACK. --ground is the site's ground on every
   page. aria.html is currently rgb(0,0,0) and that is a defect, not a
   design." That supersedes the per-template ground for this page, and it
   agrees with L1 — "I don't like the dark version… I want to foster
   warmth."

   THE BIBLE'S INTENT SURVIVES: no bronze and no amber anywhere here, so
   the accent is the ink itself rather than the site's metal. This is still
   the coldest page on the site; it is no longer the darkest. */
[data-page="aria"] {
  --bg: #F7F4ED; --bg2: #FFFFFF; --ink: #121820; --mut: #5F6670;
  --acc: #121820; --acc-text: #121820; --card: #FFFFFF; --line: rgba(18,24,32,.14); --oncard: #121820;
}
/* VANTARA — /network */
[data-page="network"] {
  --bg: #F7F4ED; --bg2: #FFFFFF; --ink: #121820; --mut: #5F6670;
  --acc: #B68A5E; --acc-text: #8A6034; --card: #FFFFFF; --line: rgba(182,138,94,.30); --oncard: #121820;
}
/* TRAVELIO — a location page */
[data-page="location"] {
  --bg: #FFFFFF; --bg2: #F7F7F7; --ink: #1A1A17; --mut: #5E5E5E;
  --acc: #1A1A17; --acc-text: #1A1A17; --card: #FFFFFF; --line: rgba(26,26,23,.12); --oncard: #1A1A17;
}
/* SERENA — Arc Citizen */
[data-page="citizen"] {
  --bg: #FAF6F0; --bg2: #FFFFFF; --ink: #343837; --mut: #6E6763;
  --acc: #476B64; --acc-text: #476B64; --card: #FFFFFF; --line: rgba(71,107,100,.24); --oncard: #343837;
}
/* REALTAB — /museum */
[data-page="museum2"] {
  --bg: #F8F8F8; --bg2: #FFFFFF; --ink: #2A2A2A; --mut: #666666;
  --acc: #171717; --acc-text: #171717; --card: #FFFFFF; --line: rgba(42,42,42,.12); --oncard: #2A2A2A;
}
/* HASANI — the founder */
[data-page="founder"] {
  --bg: #E9E1D6; --bg2: #FFFFFF; --ink: #111111; --mut: #4A4A4A;
  --acc: #1B4A6B; --acc-text: #1B4A6B; --card: #FFFFFF; --line: rgba(17,17,17,.14); --oncard: #111111;
}

/* ═══ RESET ════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--face-u); font-size: var(--t-body); line-height: var(--t-body-lh);
  font-weight: var(--w-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd { margin: 0; }
ul,ol { margin: 0; padding: 0; list-style: none; }
img,video,svg,canvas { max-width: 100%; display: block; }
/* see landing.css — max-width without height:auto stretches an oversized image */
img { height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 3px; }
.vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ── TYPE ───────────────────────────────────────────────────────────────── */

.h1,.h2,.h3,.h4 {
  font-family: var(--face-d); font-optical-sizing: auto;
  color: var(--ink); text-wrap: balance;
}
.h1 { font-size: var(--t-h1); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-ls); font-weight: var(--w-display); }
.h2 { font-size: var(--t-h2); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); font-weight: var(--w-display); }
.h3 { font-size: var(--t-h3); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); font-weight: var(--w-mid); }
.h4 { font-size: var(--t-h4); line-height: var(--t-h4-lh); letter-spacing: var(--t-h4-ls); font-weight: var(--w-mid); }
.lead { font-size: var(--t-lead); line-height: var(--t-lead-lh); font-weight: 300; text-wrap: pretty; }
.body { font-size: var(--t-body); line-height: var(--t-body-lh); max-width: 62ch; }
.sm { font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--mut); }
.mut { color: var(--mut); }
.eye {
  font-family: var(--face-u); font-size: var(--t-eye); line-height: 1;
  letter-spacing: var(--t-eye-ls); text-transform: uppercase;
  font-weight: var(--w-label); color: var(--acc-text, var(--acc));
}
.mono { font-family: var(--face-m); font-size: var(--t-mono); line-height: var(--t-mono-lh); }

/* ── STRUCTURE ──────────────────────────────────────────────────────────── */

.band { padding: var(--band) var(--gut); position: relative; }
.band--s { padding-block: var(--band-s); }
.band--alt { background: var(--bg2); }
.col { max-width: var(--colw); margin-inline: auto; width: 100%; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ═══ 01 · HERO ════════════════════════════════════════════════════════════
   eyebrow · H1 · one paragraph · fact rail. The fact rail is the survey
   move — it REPORTS. Part I §1: if you cannot say what an element reports,
   delete it.                                                              */

.hero { padding: calc(var(--band) + 40px) var(--gut) var(--band); }
.hero__grid { display: grid; grid-template-columns: 1fr 300px; gap: 72px; align-items: start; }
.hero__eye { margin-bottom: 26px; }
.hero__h { max-width: 18ch; }
.hero__p { margin-top: 28px; max-width: 52ch; color: var(--mut); }

.rail {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--line); padding-top: 4px;
}
.rail__r {
  display: grid; grid-template-columns: 128px 1fr; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-family: var(--face-m); font-size: 12px; line-height: 18px;
}
.rail__k { color: var(--mut); text-transform: uppercase; letter-spacing: .9px; }
.rail__v { color: var(--ink); }

/* ═══ 02 · STATEMENT ═══════════════════════════════════════════════════════
   H2 left, body right, hairline above. The site's most-used block.       */

.stmt { border-top: 1px solid var(--line); padding-top: 34px; }
.stmt__eye { margin-bottom: 30px; }
.stmt__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: start; }
.stmt__b > * + * { margin-top: 22px; }

/* An H2 standing alone in a STATEMENT, without the body column beside it.
   Capped in characters rather than pixels: the measure is a property of the
   line, and a px cap re-breaks every time the type scale moves. */
.stmt > .h2 { max-width: 20ch; }

/* "The next thing in this block." One spacing decision, named once, so a
   table, a grid, a quote and a door do not each carry their own margin and
   then disagree by 6px. */
.stmt__after { margin-top: 40px; }
/* ═══ 03 · GRID ════════════════════════════════════════════════════════════
   Tetris-packed. NEVER a uniform row — Part I's anti-slop list calls a row
   of equal cards a tell, and it is right: equal weight means nothing is
   important.                                                              */

.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.gc {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; display: flex; flex-direction: column; gap: 12px;
  grid-column: span 2;
  transition: transform var(--d3) var(--e-out), border-color var(--d3) var(--e);
}
.gc:hover { transform: translateY(-3px); border-color: var(--acc); }
.gc--w2 { grid-column: span 2; }
.gc--w3 { grid-column: span 3; }
.gc--w4 { grid-column: span 4; }
.gc--w6 { grid-column: span 6; }
.gc--tall { grid-row: span 2; }
.gc__n { font-family: var(--face-m); font-size: 11px; letter-spacing: 1.3px; color: var(--mut); }
.gc__t { font-family: var(--face-d); font-optical-sizing: auto; font-size: var(--t-h4);
         line-height: var(--t-h4-lh); letter-spacing: var(--t-h4-ls); font-weight: var(--w-mid); }
.gc__t--lg { font-size: var(--t-h3); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); }
.gc__lead { font-size: var(--t-sm); line-height: var(--t-sm-lh); font-weight: var(--w-mid); color: var(--ink); }
.gc__b { font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--mut); }

/* Pushes the action to the bottom edge so two cards of different heights
   still line their buttons up. */
.gc__foot { margin-top: auto; padding-top: 10px; }

/* THE THREE PACKINGS USED ON THE LANDING.
   Each is a spacing decision, not a layout one — the packing itself comes
   from the span modifiers on the cards, which is why a fourth arrangement
   costs nothing to add and cannot drift from these three. */
.grid--portfolio { margin-top: 56px; }
.grid--three     { margin-top: 56px; }
.grid--tiers     { margin-top: 44px; }
.gc__media {
  aspect-ratio: 16/9; border-radius: var(--r-md); background: var(--bg2);
  border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden;
}
.gc__media video, .gc__media img { width: 100%; height: 100%; object-fit: cover; }
.gc__slot { font-family: var(--face-m); font-size: 11px; color: var(--mut); letter-spacing: 1px; }

.chip {
  font-family: var(--face-m); font-size: 11px; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 5px 10px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--mut); align-self: flex-start;
}
.chip--live { background: var(--acc); color: var(--bg); border-color: transparent; }

/* ═══ 04 · SPEC ════════════════════════════════════════════════════════════
   Monospace, hairline rules, NO FILLS. A spec table that is striped is a
   marketing table.                                                        */

.spec { width: 100%; border-collapse: collapse; font-family: var(--face-m); }
.spec caption { text-align: left; padding-bottom: 14px; }
.spec th, .spec td {
  text-align: left; padding: 13px 18px 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-mono); line-height: var(--t-mono-lh); font-weight: 400;
  vertical-align: top;
}
.spec th { color: var(--mut); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; }
.spec td:first-child { color: var(--ink); width: 34%; }
.spec td { color: var(--mut); }
.spec tr:last-child td { border-bottom: 0; }


:root {
  --speed-1: 0.15;
  --speed-2: 0.30;
  --speed-3: 0.50;
  --plane-span: 240px;
}
.plane { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .plane { animation: drift linear both; animation-timeline: view(); animation-range: cover; }
    [data-plane="1"] { --sp: var(--speed-1); }
    [data-plane="2"] { --sp: var(--speed-2); }
    [data-plane="3"] { --sp: var(--speed-3); }
    @keyframes drift {
      from { transform: translate3d(0, calc(var(--plane-span) * var(--sp, 0)), 0); }
      to   { transform: translate3d(0, calc(var(--plane-span) * var(--sp, 0) * -1), 0); }
    }
  }
}

/* ═══ 06 · SHOWCASE ════════════════════════════════════════════════════════ */

.show { display: flex; flex-direction: column; gap: 16px; }
.show__m { border-radius: var(--r-lg); overflow: hidden; background: var(--bg2); border: 1px solid var(--line); }
.show__m img, .show__m video { width: 100%; display: block; }
.show__c { font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--mut); max-width: 60ch; }

/* ═══ 07 · QUOTE ═══════════════════════════════════════════════════════════
   One sentence. Hairlines above and below. No quotation marks — the rules
   are the quotation marks.                                                */

.quote { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 56px 0; }
.quote__t {
  font-family: var(--face-d); font-optical-sizing: auto;
  font-size: 44px; line-height: 54px; letter-spacing: -1px; font-weight: var(--w-mid);
  max-width: 24ch; text-wrap: balance;
}
.quote__a { margin-top: 20px; }

/* ═══ 08 · TIMELINE ════════════════════════════════════════════════════════
   Filled dot = done. Hollow = planned. A timeline where everything is on
   schedule is a roadmap nobody believes.                                  */

.tl { border-left: 1px solid var(--line); padding-left: 32px; display: flex; flex-direction: column; gap: 34px; }
.tl__i { position: relative; }
.tl__i::before {
  content: ''; position: absolute; left: -37px; top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--acc); background: var(--bg);
}
.tl__i[data-done]::before { background: var(--acc); }
.tl__d { font-family: var(--face-m); font-size: 12px; letter-spacing: 1px; color: var(--acc-text, var(--acc)); }
.tl__t { font-family: var(--face-d); font-optical-sizing: auto; font-size: 22px;
         font-weight: var(--w-mid); letter-spacing: -.4px; margin: 6px 0 8px; }

/* ═══ 09 · WEB — the tree, reused ══════════════════════════════════════════
   Defined in site.css and shared. This block only re-skins it to the
   current page's palette so one implementation serves eight grounds.     */

.web__node { background: var(--card); border-color: var(--line); color: var(--ink); }
.web__branch { background: var(--card); border-color: var(--line); }
.web__leaf { color: var(--ink); }

/* ═══ 10 · LIMIT ═══════════════════════════════════════════════════════════
   A claim's boundary, ALWAYS immediately after the claim.

   Part I §4 calls this the site's signature move and asks for it at least
   six times across the site. Nobody else publishes where their own claim
   stops, which is exactly why it generates more trust than the claim did.

   It is marked in the markup so it can be COUNTED, not just written.     */

.limit {
  border-left: 2px solid var(--ink);
  padding: 4px 0 4px 26px;
  margin-top: 34px;
  max-width: 60ch;
}
.limit__k {
  font-family: var(--face-m); font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mut); display: block; margin-bottom: 10px;
}
/* see the note on .law__b in aria.css — these are the paragraphs that say
   what is NOT proven, which is the most important writing on the page */
.limit p { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--ink); }
.limit p + p { margin-top: 1em; }

/* ═══ 11 · DOOR ════════════════════════════════════════════════════════════
   One action, one line of context. Never two buttons where the second is a
   ghost — that is on the anti-slop list.                                  */

.door { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.door__c { font-size: var(--t-sm); line-height: var(--t-sm-lh); color: var(--mut); max-width: 52ch; }
.btn2 {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--tap); padding: 0 28px; border-radius: 100px; border: 0;
  background: var(--ink); color: var(--bg);
  font-family: var(--face-u); font-size: var(--t-sm); font-weight: var(--w-label);
  cursor: pointer;
  transition: transform var(--d2) var(--e-out), opacity var(--d2) var(--e);
}
.btn2:hover { transform: translateY(-2px); }
.btn2--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn2 svg { transition: transform var(--d1) var(--e-out); }
.btn2:hover svg { transform: translateX(2px); }

/* ═══ THE SCROLL CUE — Part I, Card 01 ═════════════════════════════════════
   A 1px hairline that draws downward and loops. No arrow, no "scroll"
   label. The hairline is the survey language and says the same thing.    */

.cue { position: absolute; left: 50%; bottom: 40px; width: 1px; height: 64px; overflow: hidden; }
.cue::after {
  content: ''; position: absolute; inset: 0; background: var(--ink); opacity: .45;
  animation: cue var(--cue-dur) var(--e) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  :root {
    --t-h1: 46px; --t-h1-lh: 50px; --t-h1-ls: -1.4px;
    --t-h2: 38px; --t-h2-lh: 44px; --t-h2-ls: -.9px;
    --t-h3: 26px; --t-h3-lh: 32px; --t-h4: 22px; --t-h4-lh: 28px;
    --t-lead: 24px; --t-lead-lh: 34px;
    --t-body: 18px; --t-body-lh: 29px;
    --band: 76px; --band-s: 56px; --gut: 22px;
  }
  .hero__grid, .stmt__grid { grid-template-columns: 1fr; gap: 36px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .gc, .gc--w3, .gc--w4, .gc--w6 { grid-column: span 2; }
  .gc--tall { grid-row: auto; }
  .quote__t { font-size: 28px; line-height: 36px; }
  .cue { display: none; }
}
@media (max-width: 560px) {
  :root { --t-h1: 34px; --t-h1-lh: 39px; --t-h2: 29px; --t-h2-lh: 35px; }
  .grid { grid-template-columns: 1fr; }
  .gc, .gc--w3, .gc--w4, .gc--w6 { grid-column: span 1; }
  .rail__r { grid-template-columns: 1fr; gap: 2px; }
  /* `width:100%` does not bind a table. Auto table layout sizes columns to
     their CONTENT and will happily exceed the 100% it was given — on aria.html
     at 320px the spec table measured 284.6px inside a 261px column and pushed
     the page 1.6px sideways. Small, but it is a real drag on a real phone and
     it is the only one left on the site.
     `table-layout: fixed` makes the declared width authoritative and divides
     the tracks evenly; the cells then need permission to break, or the
     overflow just moves inside them. */
  .spec { table-layout: fixed; }
  .spec th, .spec td { overflow-wrap: anywhere; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: var(--instant) !important; animation-duration: var(--instant) !important; }
  .cue::after { animation: none; opacity: .3; }
}