/* forwardonly.ai — stylesheet
 *
 * Layer order follows the house's shipped sheet:
 *   preferences, reset, layout, components, state
 * Tokens arrive from tokens.css, which is linked first. No colour literal appears below.
 *
 * Standing rules this sheet obeys:
 *   no colour literal outside tokens.css
 *   mono is Cascadia Code, never JetBrains Mono
 *   a dark ground before any script runs
 *   relative links only
 *   tabular numerals in tables
 *   navigation degrades with no JavaScript
 *   reduced motion resolves to .01ms, never 0s
 *   one animation cycle, never infinite
 *   focus ring declared as two colours, offset positive
 *   44x44 CSS px minimum hit target
 *   no all-caps on first-party words
 */

@layer preferences, reset, layout, components, state;

/* ===========================================================================
   preferences — declared first so a viewer preference wins over everything
   =========================================================================== */
@layer preferences {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    /* Anything that only exists to move stops existing. */
    .ticker__track {
      animation: none !important;
      transform: none !important;
    }
  }

  @media (forced-colors: active) {
    .card,
    .btn,
    .pill,
    .bento__cell,
    .themeswitch {
      border: 1px solid CanvasText;
    }

    .art,
    .glow,
    .grain {
      display: none;
    }
  }
}

/* ===========================================================================
   reset
   =========================================================================== */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* An author `display` beats the user-agent rule for [hidden]. A control that only
     means something once script has wired it would otherwise show, and show dead. */
  [hidden] {
    display: none !important;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
  }

  body {
    margin: 0;
    background: var(--surface-ground);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: var(--leading-snug);
    text-wrap: balance;
  }

  p { margin: 0; text-wrap: pretty; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  img, svg, video { display: block; max-width: 100%; }

  a {
    color: var(--accent-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }

  a:hover { color: var(--text-primary); }

  code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    font-variant-numeric: tabular-nums;
  }

  button { font: inherit; color: inherit; background: none; border: 0; }
  summary { cursor: pointer; }
}

/* ===========================================================================
   layout
   =========================================================================== */
@layer layout {
  .skip {
    position: fixed;
    left: var(--space-md);
    top: var(--space-md);
    z-index: 90;
    transform: translateY(-250%);
    padding: 0.7rem 1rem;
    background: var(--surface-panel);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
  }

  .skip:focus-visible { transform: translateY(0); }

  .shell {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .shell--wide   { max-width: var(--page-wide); }
  .shell--narrow { max-width: var(--page-narrow); }

  /* A band is a full-bleed horizontal block. Colour-blocking the scroll is its job. */
  .band {
    position: relative;
    padding-block: var(--space-3xl);
    isolation: isolate;
  }

  .band--panel  { background: var(--surface-panel); }
  .band--raised { background: var(--surface-raised); }

  .band--edge {
    border-top: 1px solid var(--border-hairline);
    border-bottom: 1px solid var(--border-hairline);
  }

  .band--tight { padding-block: var(--space-2xl); }

  /* A band can carry its own hue. The wash is a tint of the hue over the ground, so a
     long scroll reads as a sequence of places rather than one undifferentiated column. */
  .band[data-hue="accent"] { --band-hue: var(--accent); --band-wash: var(--accent-wash); }
  .band[data-hue="two"]    { --band-hue: var(--hue-2);  --band-wash: var(--hue-2-wash); }
  .band[data-hue="three"]  { --band-hue: var(--hue-3);  --band-wash: var(--hue-3-wash); }

  .band[data-hue]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(120% 70% at 12% 0%, var(--band-wash), transparent 62%);
    pointer-events: none;
  }

  .stack > * + *    { margin-top: var(--space-md); }
  .stack-lg > * + * { margin-top: var(--space-xl); }

  .grid-2 {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  }

  .grid-3 {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  /* The split: a claim on one side, a picture on the other, and it alternates down
     the page so the eye has somewhere new to land each time. */
  .split {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
  }

  @media (min-width: 60rem) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
    .split--flip > :first-child { order: 2; }
  }

  /* The bento: an asymmetric grid of cells. The whole point is that a scanner's eye
     lands somewhere different in each one. */
  .bento {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1;
  }

  @media (min-width: 46rem) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento__cell--wide { grid-column: span 2; }
  }

  @media (min-width: 72rem) {
    .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .bento__cell      { grid-column: span 2; }
    .bento__cell--wide { grid-column: span 3; }
    .bento__cell--full { grid-column: span 6; }
    .bento__cell--tall { grid-row: span 2; }
  }

  /* ---- site header ---- */
  .siteheader {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid transparent;
    transition: background var(--motion-mid) var(--ease-move),
                border-color var(--motion-mid) var(--ease-move),
                backdrop-filter var(--motion-mid) var(--ease-move);
  }

  .siteheader[data-scrolled] {
    background: color-mix(in srgb, var(--surface-ground) 86%, transparent);
    backdrop-filter: blur(14px) saturate(130%);
    border-bottom-color: var(--border-hairline);
  }

  @supports not (backdrop-filter: blur(1px)) {
    .siteheader[data-scrolled] { background: var(--surface-ground); }
  }

  .siteheader__in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    min-height: 4.25rem;
    padding-block: var(--space-sm);
  }

  .sitenav {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;   /* a flex item's auto minimum would widen the page, not wrap */
    align-items: center;
    gap: 0.15rem 0.2rem;
    margin-inline-start: auto;
  }

  .sitenav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: 0.7rem;
    border-radius: var(--radius-md);
    color: var(--text-dim);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-move),
                background var(--motion-fast) var(--ease-move);
  }

  .sitenav a:hover,
  .sitenav a[aria-current="page"],
  .sitenav a[data-active] {
    color: var(--text-primary);
    background: var(--surface-raised);
  }

  .sitenav a[aria-current="page"],
  .sitenav a[data-active] { box-shadow: inset 0 -2px 0 var(--accent); }

  /* the reading rail: a hairline of progress across the top of the header */
  .progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    transform: scaleX(var(--progress, 0));
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
    pointer-events: none;
  }

  /* ---- footer ---- */
  .sitefooter {
    border-top: 1px solid var(--border-hairline);
    padding-block: var(--space-xl);
    color: var(--text-dim);
    font-size: var(--text-sm);
  }

  .sitefooter__in {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-xl);
    align-items: baseline;
    justify-content: space-between;
  }

  .sitefooter nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
  }
}

/* ===========================================================================
   components
   =========================================================================== */
@layer components {

  /* ---- wordmark. Lowercase is load bearing: it is the name. ---- */
  .wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    color: var(--text-primary);
    text-decoration: none;
  }

  .wordmark__tld { color: var(--accent-text); }
  a.wordmark:hover .wordmark__tld { color: var(--text-primary); }

  /* ---- eyebrow: lowercase, tracked, mono, with a leading tick ---- */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    color: var(--text-dim);
  }

  .eyebrow::before {
    content: "";
    width: 1.6em;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--band-hue, var(--accent));
  }

  .eyebrow--plain::before { display: none; }

  /* ---- display type ---- */
  .display-xl { font-size: var(--display-xl); line-height: var(--leading-tight); letter-spacing: -0.038em; }
  .band--mission h2 { max-width: 16ch; }

  .display-lg { font-size: var(--display-lg); line-height: var(--leading-tight); letter-spacing: -0.032em; }
  .display-md { font-size: var(--display-md); line-height: 1.06; letter-spacing: -0.028em; }
  .display-sm { font-size: var(--display-sm); line-height: 1.12; letter-spacing: -0.022em; }

  /* a word set in the accent, used to put one idea in relief inside a headline */
  .lit { color: var(--accent-text); }

  /* a headline word set in mono, for the voice change that marks a question */
  .mono { font-family: var(--font-mono); letter-spacing: -0.03em; }

  /* a ghost numeral behind a step, for depth without ornament */
  .ghostnum {
    font-family: var(--font-mono);
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary);
    opacity: 0.09;
    letter-spacing: -0.05em;
  }

  .lede {
    max-width: var(--measure);
    color: var(--text-dim);
    font-size: var(--text-md);
  }

  .lede strong { color: var(--text-primary); font-weight: 600; }

  /* ---- buttons ---- */
  .btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    min-height: 3.125rem;
    min-width: 11rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--border-control);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    transition: border-color var(--motion-fast) var(--ease-move),
                transform var(--motion-fast) var(--ease-move);
  }

  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, var(--accent-wash), transparent 60%);
    opacity: 0;
    transition: opacity var(--motion-fast) var(--ease-move);
  }

  .btn > * { position: relative; }

  .btn:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--text-primary); }
  .btn:hover::before { opacity: 1; }

  .btn__arrow {
    color: var(--accent-text);
    transition: transform var(--motion-fast) var(--ease-move);
  }

  .btn:hover .btn__arrow { transform: translateX(3px); }

  .btn--solid {
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: var(--surface-ground);
  }

  .btn--solid .btn__arrow { color: var(--surface-ground); }
  .btn--solid:hover { border-color: transparent; }

  /* ---- the two-theme switch ---- */
  .themeswitch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    background: var(--surface-panel);
  }

  .themeswitch__opt {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-height: 2.25rem;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: color var(--motion-fast) var(--ease-move),
                background var(--motion-fast) var(--ease-move);
  }

  .themeswitch__opt:hover { color: var(--text-primary); }

  .themeswitch__opt[aria-pressed="true"] {
    background: var(--surface-raised);
    color: var(--text-primary);
  }

  .themeswitch__dot {
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: var(--swatch, var(--accent));
    box-shadow: 0 0 0 1px var(--border-strong);
  }

  /* ---- state pill: word, hue and glyph all three carry the state ---- */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    max-width: 100%;
    padding: 0.22rem 0.65rem 0.22rem 0.55rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    white-space: normal;
  }

  .pill__glyph { font-size: 0.9em; line-height: 1; }
  .pill--built    { color: var(--state-built); }
  .pill--building { color: var(--state-building); }
  .pill--ambition { color: var(--state-ambition); }

  /* ---- card and bento cell ---- */
  .card,
  .bento__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--surface-panel);
    overflow: hidden;
    isolation: isolate;
  }

  /* the pointer spotlight: a soft light that follows the cursor across a cell.
     --mx and --my are written by script; with no script they stay unset, the
     gradient sits off-cell, and nothing is lost. */
  .card--lit::before,
  .bento__cell::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: radial-gradient(
      16rem 16rem at var(--mx, -50%) var(--my, -50%),
      var(--accent-wash), transparent 70%);
    opacity: 0;
    transition: opacity var(--motion-mid) var(--ease-move);
    pointer-events: none;
  }

  .card--lit:hover::before,
  .card--lit:focus-within::before,
  .bento__cell:hover::before,
  .bento__cell:focus-within::before { opacity: 1; }

  .card__head,
  .bento__head {
    font-size: var(--text-lg);
    letter-spacing: -0.02em;
  }

  .card__body,
  .bento__body {
    margin: 0;
    color: var(--text-dim);
  }

  .card__foot { margin-top: auto; padding-top: var(--space-sm); }

  .bento__cell--figure { padding: 0; }
  .bento__cell--figure .art { width: 100%; height: 100%; }

  /* ---- artwork ---- */
  .art {
    display: block;
    width: 100%;
    height: auto;
  }

  .art--bleed {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  .artframe {
    position: relative;
    margin: 0;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--surface-panel);
    overflow: hidden;
  }

  .artframe > figcaption {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-hairline);
    color: var(--text-dim);
    font-size: var(--text-sm);
  }

  .artframe > figcaption b { color: var(--text-primary); font-weight: 600; }

  /* ---- hero ---- */
  .hero {
    position: relative;
    display: grid;
    align-content: center;
    min-height: min(88svh, 50rem);
    padding-block: var(--space-3xl);
    overflow: hidden;
  }

  /* The hero's field is inlined straight into the section, so it is addressed by what
     it is rather than by a wrapper. preserveAspectRatio="slice" on the drawing itself
     does the work object-fit would do for a raster. */
  .hero > .art--frontier,
  .hero__art {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    pointer-events: none;
  }

  /* the mission band's field, same treatment */
  .band__art > .art {
    width: 100%;
    height: 100%;
  }

  /* the ground fades up over the art so text never fights it */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(70% 60% at 50% 120%, var(--surface-ground), transparent 70%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--surface-ground) 72%, transparent) 0%,
        color-mix(in srgb, var(--surface-ground) 20%, transparent) 42%,
        var(--surface-ground) 100%);
    pointer-events: none;
  }

  @supports not (background: color-mix(in srgb, red 50%, blue)) {
    .hero::after { background: linear-gradient(180deg, transparent 30%, var(--surface-ground) 100%); }
  }

  .hero__spot {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
      28rem 28rem at var(--px, 50%) var(--py, 30%),
      var(--surface-glow), transparent 68%);
    opacity: 0;
    transition: opacity var(--motion-slow) var(--ease-out);
    pointer-events: none;
  }

  [data-enhanced] .hero__spot { opacity: 1; }

  /* ---- hero layout ---- */
  .hero__grid {
    display: grid;
    gap: var(--space-2xl);
    align-items: end;
  }

  @media (min-width: 64rem) {
    .hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-3xl); }
  }

  .hero__lede {
    max-width: 26ch;
    margin-top: var(--space-lg);
    color: var(--text-primary);
    font-size: clamp(1.1875rem, 0.95rem + 1.1vw, 1.75rem);
    line-height: 1.3;
  }

  .hero .btns { margin-top: var(--space-xl); }

  .hero__gloss .pairs { background: transparent; border-color: var(--border-hairline); }
  .hero__gloss .pairs > div { background: color-mix(in srgb, var(--surface-panel) 72%, transparent); }

  @supports not (background: color-mix(in srgb, red 50%, blue)) {
    .hero__gloss .pairs > div { background: var(--surface-panel); }
  }

  .hero__cue { margin-top: var(--space-2xl); }

  /* ---- legend ---- */
  .legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
  }

  .legend__note { color: var(--text-dim); font-size: var(--text-sm); }

  .pill--refused { color: var(--text-dim); }

  /* ---- the what-if grid: four large cards, scanned not read ---- */
  .qgrid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
  }

  @media (min-width: 56rem) {
    .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
  }

  .qcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-height: 22rem;
    padding: var(--space-xl);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-xl);
    background: var(--surface-panel);
    overflow: hidden;
    isolation: isolate;
  }

  .qcard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(90% 60% at 100% 0%, var(--band-wash, var(--accent-wash)), transparent 70%);
    pointer-events: none;
  }

  .qcard__num {
    position: absolute;
    top: 0.25rem;
    right: var(--space-lg);
    z-index: -1;
    margin: 0;
  }

  /* the emblem: one drawing per question, all four cut from the same frame */
  .qcard__emblem {
    position: absolute;
    right: calc(var(--space-lg) * -1);
    bottom: calc(var(--space-lg) * -1);
    z-index: -1;
    width: clamp(8rem, 16vw, 13rem);
    opacity: 0.5;
    pointer-events: none;
  }

  .qcard__emblem svg { width: 100%; height: auto; }

  .qcard__ask { max-width: 22ch; }

  .qcard__answer {
    max-width: 30ch;
    color: var(--text-primary);
    font-weight: 600;
  }

  .qcard__sub {
    max-width: 38ch;
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-hairline);
    color: var(--text-dim);
    font-size: var(--text-sm);
  }

  .qcard__sub b { color: var(--text-primary); font-weight: 600; }

  .qcard--refused { border-color: var(--border-strong); }

  /* ---- bento foot ---- */
  .bento__foot { margin-top: auto; padding-top: var(--space-sm); }

  /* ---- art frame body ---- */
  .artframe__body { padding: var(--space-md); overflow-x: auto; }
  .artframe__body svg { width: 100%; height: auto; min-width: 18rem; }

  /* ---- the mission band: artwork bleeding behind a narrow column ---- */
  .band--mission { position: relative; overflow: hidden; }

  .band--mission .band__art {
    position: absolute;
    inset: auto 0 0 0;
    z-index: -1;
    height: 62%;
    opacity: 0.22;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
    mask-image: linear-gradient(180deg, transparent, #000 60%);
  }

  .band--mission .band__art svg { width: 100%; height: 100%; }

  /* ---- the audience cards ---- */
  .card--path {
    gap: var(--space-lg);
    padding: var(--space-2xl);
    border-color: var(--border-strong);
  }

  /* ---- takeaway ---- */
  .takeaway {
    display: flex;
    gap: var(--space-md);
    max-width: var(--measure);
    padding: var(--space-lg);
    border: 1px solid var(--border-hairline);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--surface-ground);
    color: var(--text-primary);
    font-size: var(--text-md);
  }

  .takeaway::before { content: "B8"; color: var(--accent-text); line-height: 1.45; }

  /* a sub-page hero: shorter, same art, same spotlight */
  .hero--sub { min-height: min(62svh, 34rem); }

  /* an emblem standing on its own, beside a claim */
  .emblem {
    margin: 0;
    display: grid;
    place-items: center;
    padding: var(--space-xl);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-xl);
    background: var(--surface-panel);
  }

  .emblem svg { width: min(100%, 17rem); height: auto; }

  /* an artwork plate: a drawing framed as an object, not as a background */
  .artplate {
    position: relative;
    margin: 0;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-xl);
    background: var(--surface-ground);
    overflow: hidden;
    aspect-ratio: 1 / 1;
  }

  .artplate--tall { aspect-ratio: 3 / 4; }

  .artplate > .art {
    width: 100%;
    height: 100%;
  }

  /* ---- scroll cue ---- */
  .cue {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-decoration: none;
  }

  .cue__rail {
    position: relative;
    width: 2px;
    height: 2.5rem;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
    overflow: hidden;
  }

  .cue__rail::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 40%;
    border-radius: var(--radius-pill);
    background: var(--accent);
    animation: cue-fall 2.4s var(--ease-move) infinite;
  }

  @keyframes cue-fall {
    0%   { transform: translateY(-110%); }
    100% { transform: translateY(260%); }
  }

  /* ---- the what-if question block ---- */
  .q__ask {
    font-family: var(--font-mono);
    font-weight: 600;
    text-transform: lowercase;
    text-wrap: balance;
  }

  .q__answer {
    max-width: var(--measure-tight);
    color: var(--text-primary);
    font-size: clamp(1.0625rem, 0.9rem + 0.7vw, 1.4rem);
    line-height: 1.35;
  }

  /* ---- labelled pair: the scannable alternative to a sentence ---- */
  .pairs { display: grid; gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); overflow: hidden; }
  .pairs > div { display: grid; gap: 0.2rem; padding: var(--space-md) var(--space-lg); background: var(--surface-panel); }
  .pairs dt, .pairs .term { color: var(--text-primary); font-weight: 600; }
  .pairs dd, .pairs .def { margin: 0; color: var(--text-dim); font-size: var(--text-sm); }

  /* ---- ticker ---- */
  .ticker {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    overflow: hidden;
    border-block: 1px solid var(--border-hairline);
    padding-block: var(--space-md);
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--surface-ground) 8%, var(--surface-ground) 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, var(--surface-ground) 8%, var(--surface-ground) 92%, transparent);
  }

  .ticker__track {
    display: flex;
    width: max-content;
    gap: var(--space-2xl);
    animation: ticker-slide 46s linear infinite;
  }

  .ticker:hover .ticker__track,
  .ticker:focus-within .ticker__track,
  .ticker[data-paused] .ticker__track { animation-play-state: paused; }

  .ticker__pause {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin-inline-start: var(--gutter);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    background: var(--surface-panel);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    cursor: pointer;
  }

  .ticker__pause:hover { color: var(--text-primary); border-color: var(--border-control); }

  .ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  .ticker__item::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
  }

  @keyframes ticker-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ---- scroller: wide content scrolls inside itself, never the page ---- */
  .scroller {
    overflow-x: auto;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
  }

  .scroller table { min-width: 34rem; }

  th, td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-hairline);
  }

  thead th {
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  tbody th { color: var(--text-primary); font-weight: 600; }
  td { color: var(--text-dim); }
  tbody tr:last-child th,
  tbody tr:last-child td { border-bottom: 0; }

  /* ---- disclosure ---- */
  .more {
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
  }

  .more > summary {
    display: flex;
    align-items: center;
    gap: 0.6em;
    min-height: 2.75rem;
    padding: 0.6rem var(--space-md);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .more > summary::marker,
  .more > summary::-webkit-details-marker { content: ""; display: none; }

  .more > summary::before {
    content: "\25B8";
    color: var(--accent-text);
    transition: transform var(--motion-fast) var(--ease-move);
  }

  .more[open] > summary::before { transform: rotate(90deg); }

  .more__body {
    padding: 0 var(--space-md) var(--space-md);
    color: var(--text-dim);
    font-size: var(--text-sm);
  }

  .more__body > * + * { margin-top: var(--space-md); }
}

/* ===========================================================================
   state
   =========================================================================== */
@layer state {
  /* The focus ring is declared, not derived: two colours, a positive offset, and the
     bright half measured against every ground it can land on. */
  :where(a, button, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-outer);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--focus-inner);
    border-radius: var(--radius-sm);
  }

  .btn:focus-visible,
  .themeswitch__opt:focus-visible,
  .more > summary:focus-visible { border-radius: var(--radius-md); }

  /* A drawing's station draws its own ring: outline on an SVG group is unreliable, and
     a focus moved by script does not always count as :focus-visible. */
  .art--loop .node:focus,
  .art--loop .node:focus-visible { outline: none; }

  .art--loop .node:focus .node__plate,
  .art--loop .node:focus-visible .node__plate,
  .art--loop .node:hover .node__plate {
    stroke: var(--focus-outer);
    stroke-width: 3;
  }

  .art--loop .node { cursor: pointer; }

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

  /* Reveal on scroll. The markup is visible by default; only a script that is actually
     running adds [data-reveal-armed], and only then can anything be hidden. With no
     script, every one of these rules is inert. */
  [data-reveal-armed] .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--motion-slow) var(--ease-out),
                transform var(--motion-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  [data-reveal-armed] .reveal[data-shown] {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal-armed] .reveal { opacity: 1; transform: none; }
  }

  @media print {
    .siteheader, .sitefooter, .themeswitch, .skip, .cue, .ticker { display: none; }
    .band { padding-block: 1.25rem; }
    .more > summary { display: none; }
    .more__body { padding: 0; }
    .hero { min-height: 0; }
  }
}