/**
 * onrecord.css — the ON RECORD shared public stylesheet (design.md Part II;
 * docs/design-on-record/design-v2.md). Loaded ONLY by layouts/base.html (public
 * S1–S10); office/portal never see it. Replaces public.css's role for the public
 * site — public.css itself is untouched and still serves the portal layouts.
 * Every value is var(--token) from public-tokens.css / tokens.css.
 */

/* ═══════════════ 1. Canvas, decks, seams, stencils ═══════════════ */

body {
  background: var(--color-bg);
  /* The entrance choreography holds elements translated ±44px past the inline
     edges until they latch; `clip` (NOT hidden — clip creates no scroll
     container, so position:sticky descendants keep working) guarantees the
     pre-states can never manufacture a horizontal scrollbar in either
     direction (visual_qa h-overflow, EN and AR). */
  overflow-x: clip;
}

.site-main:focus {
  outline: none;
}

.deck {
  border-block-start: var(--seam-size) solid var(--color-seam);
  padding-block: var(--deck-pad-block);
}
.deck--surface {
  background: var(--color-surface-alt);
}
.deck--deep {
  background: var(--color-bg-deep);
}
.deck__inner {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The welded seam + stencil: a hairline the stencil plate sits on. */
.seam {
  position: relative;
  border-block-start: var(--seam-size) solid var(--color-seam);
}
.seam--onsurface {
  border-block-start-color: var(--color-rule);
}
.stencil {
  position: absolute;
  /* Fixed offsets, NOT translateY(-50%): Chromium ghost-paints a fractionally
     transformed plate at both positions (a sliver of glyph tops bled out under
     the plate — caught in this session's render evidence; will-change did not
     cure it). -16px ≈ half the EN plate; AR overrides below. */
  inset-block-start: -16px;
  inset-inline-start: var(--gutter);
  padding: var(--stencil-pad);
  background: var(--color-bg-deep);
  color: var(--color-accent);
  font-family: var(--font-stack-mono);
  font-weight: 500;
  font-size: var(--text-label-lat);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
:lang(ar) .stencil {
  font-family: var(--font-stack-text-ar);
  font-weight: 500;
  font-size: var(--text-label-ar);
  letter-spacing: 0;
  inset-block-start: -18px; /* the Readex plate runs taller than the mono one */
}

/* ═══════════════ 2. Type utilities (ramp classes) ═══════════════ */

.t-hero,
.t-h1sub,
.t-h2,
.t-callsheet,
.t-mechkey,
.t-h3,
.t-slug,
.t-formhead,
.t-ceremony {
  font-family: var(--font-stack-display-lat);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.t-hero {
  font-size: var(--text-hero-lat);
  line-height: 0.9;
}
.t-h1sub {
  font-size: var(--text-h1sub-lat);
  line-height: 0.94;
}
.t-h2 {
  font-size: var(--text-h2-lat);
  line-height: 0.96;
}
.t-callsheet {
  font-size: var(--text-callsheet-lat);
  line-height: 1.05;
}
.t-mechkey {
  font-size: var(--text-mechkey-lat);
  line-height: 1.05;
}
.t-h3 {
  font-size: var(--text-h3-lat);
  line-height: 1.1;
}
.t-slug {
  font-size: var(--text-slug-lat);
  line-height: 1.2;
  letter-spacing: 0.03em;
}
.t-formhead {
  font-size: var(--text-formhead-lat);
  line-height: 1;
}
.t-ceremony {
  font-size: var(--text-ceremony-lat);
  line-height: 0.95;
}

:lang(ar) .t-hero,
:lang(ar) .t-h1sub,
:lang(ar) .t-h2,
:lang(ar) .t-callsheet,
:lang(ar) .t-mechkey,
:lang(ar) .t-h3,
:lang(ar) .t-formhead,
:lang(ar) .t-ceremony {
  font-family: var(--font-stack-display-ar);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0; /* Arabic is never tracked */
}
:lang(ar) .t-hero {
  font-size: var(--text-hero-ar);
  line-height: 1.1;
}
:lang(ar) .t-h1sub {
  font-size: var(--text-h1sub-ar);
  line-height: 1.18;
}
:lang(ar) .t-h2 {
  font-size: var(--text-h2-ar);
  line-height: 1.26;
}
:lang(ar) .t-callsheet {
  font-size: var(--text-callsheet-ar);
  line-height: 1.3;
}
:lang(ar) .t-h3 {
  font-size: var(--text-h3-ar);
  line-height: 1.3;
}
:lang(ar) .t-ceremony {
  font-size: var(--text-ceremony-ar);
  line-height: 1.22;
}

.t-lead {
  font-size: var(--text-lead-lat);
  line-height: 1.6;
  color: var(--color-ink-soft);
}
:lang(ar) .t-lead {
  font-size: var(--text-lead-ar);
  line-height: 1.85;
}
.t-sanctioned {
  font-weight: 600;
  font-size: var(--text-sanctioned-lat);
  line-height: 1.5;
}
:lang(ar) .t-sanctioned {
  font-family: var(--font-stack-text-ar);
  font-weight: 500;
  font-size: var(--text-sanctioned-ar);
  line-height: 1.8;
}
.t-mono-label {
  font-family: var(--font-stack-mono);
  font-weight: 500;
  font-size: var(--text-label-lat);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
:lang(ar) .t-mono-label {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  letter-spacing: 0;
}
.t-mono-key {
  font-family: var(--font-stack-mono);
  font-size: var(--text-key-lat);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.t-micro {
  font-family: var(--font-stack-mono);
  font-size: var(--text-micro-lat);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}
/* Plex Mono carries no Arabic — AR swaps to Readex at the 15px label floor
   (design-v2 §4.2; S2 agent's finding, was a system-font fallback at 11–12px). */
:lang(ar) .t-mono-key,
:lang(ar) .t-micro {
  font-family: var(--font-stack-text-ar);
  font-weight: 500;
  font-size: var(--text-label-ar);
  letter-spacing: 0;
  text-transform: none;
}
.t-data {
  font-family: var(--font-stack-mono);
  font-size: var(--text-data-lat);
  letter-spacing: 0.02em;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
/* Plex Mono has no Arabic: AR data text takes Readex (letters join again);
   digits stay Latin mono through their <bdi dir="ltr"> islands. */
:lang(ar) .t-data {
  font-family: var(--font-stack-text-ar);
  letter-spacing: 0;
  font-size: var(--text-value-ar);
}
:lang(ar) .t-data bdi {
  font-family: var(--font-stack-mono);
}

/* ═══════════════ 3. The wordmark (inline SVG partial) ═══════════════ */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-ink);
  text-decoration: none;
}
.wordmark svg {
  block-size: var(--wordmark-h-header);
  inline-size: auto;
}
:lang(ar) .wordmark svg {
  block-size: var(--wordmark-h-header-ar);
}
.wordmark__latin {
  font-family: var(--font-stack-display-lat);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.site-footer .wordmark svg {
  block-size: var(--wordmark-h-footer);
}
:lang(ar) .site-footer .wordmark svg {
  block-size: var(--wordmark-h-footer-ar);
}
.site-footer .wordmark__latin {
  font-size: 15px;
}
/* The mark never mirrors (design-v2 §9) — force LTR box inside RTL chrome. */
.wordmark svg {
  direction: ltr;
}

/* ═══════════════ 4. Header ═══════════════ */

.site-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-block-size: 64px;
  padding-inline: var(--gutter);
  background: var(--color-bg);
  border-block-end: var(--seam-size) solid var(--color-seam);
}
/* Over hero media (S1/S3): transparent on the top scrim; JS toggles the class. */
.has-hero .site-nav {
  position: fixed;
  inset-inline: 0;
}
.has-hero .site-nav.site-nav--over-hero {
  background: transparent;
  border-block-end-color: transparent;
  background-image: var(--scrim-top);
  background-repeat: no-repeat;
}
.site-nav__group {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}
.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 32px);
}
.site-nav__links a {
  font-size: var(--text-nav-lat);
  line-height: 1.4;
  text-decoration: none;
  color: var(--color-ink);
  min-block-size: var(--target-min);
  display: inline-flex;
  align-items: center;
}
:lang(ar) .site-nav__links a {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-nav-ar);
}
/* ≤480px: the EN chrome's min-content (mark + AFAWY + two nav links + toggle)
   overflows a 390 viewport and drags a horizontal scrollbar onto every
   non-hero screen (S2 agent's finding, reproduced on /en at 390). The Latin
   support text goes first; gaps tighten; the row may wrap as a last resort. */
@media (max-width: 480px) {
  .site-nav {
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-block: 8px;
  }
  .site-nav .wordmark__latin {
    display: none;
  }
  .site-nav__group {
    gap: 14px;
  }
  .site-nav__links {
    gap: 12px;
  }
}

/* ═══════════════ 5. THE DRAW — animated link underline (aliveness) ═══════════
   The underline draws in from the reading edge on hover/focus. Gradient sized
   0→100% inline; logical position start keeps AR mirroring automatic. */
.link-draw {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 calc(100% - 6px);
  transition: background-size var(--dur-hover) var(--ease-micro);
}
:dir(rtl) .link-draw {
  background-position: 100% calc(100% - 6px);
}
.link-draw:hover,
.link-draw:focus-visible {
  background-size: 100% 2px;
}
/* Accent variant for on-dark nav links */
.link-draw--accent {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
}

/* ═══════════════ 6. Language toggle ═══════════════ */

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lang-toggle a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  text-decoration: none;
  font-size: var(--text-nav-lat);
  color: var(--color-ink-muted);
}
.lang-toggle a[lang="ar"] {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-nav-ar);
}
.lang-toggle a[aria-current="true"] {
  color: var(--color-ink);
}
.lang-toggle a:hover,
.lang-toggle a:focus-visible {
  color: var(--color-ink);
}
.lang-toggle__sep {
  inline-size: 1px;
  block-size: 18px;
  background: var(--color-line);
}

/* ═══════════════ 7. Chips — ON RECORD hover (THE LIFT + fill sweep) ═══════════
   base.css paints the chip from bridged tokens; here: geometry + the animated
   hover the founder asked for (never a bare 0ms flip on links/CTAs). */
.chip,
.chip--ghost {
  min-block-size: var(--chip-height);
  position: relative;
  transition:
    transform var(--dur-lift) var(--ease-micro),
    background-color var(--dur-hover) var(--ease-micro),
    border-color var(--dur-hover) var(--ease-micro),
    color var(--dur-hover) var(--ease-micro),
    box-shadow var(--dur-hover) var(--ease-micro);
}
.chip--ghost,
.chip--secondary {
  min-block-size: var(--chip-height-secondary);
}
.chip:hover,
.chip:focus-visible {
  background: var(--color-accent-2);
  transform: translateY(var(--hover-lift));
}
.chip--ghost:hover,
.chip--ghost:focus-visible {
  border-color: var(--color-ink);
  transform: translateY(var(--hover-lift));
  box-shadow: inset 0 -2px 0 0 var(--color-accent); /* design-ok: inset hairline sweep, not a drop shadow */
}
.chip:active,
.chip--ghost:active {
  transform: translateY(0);
}

/* ═══════════════ 8. HUD kit (viewfinder chrome) ═══════════════
   Camera chrome NEVER mirrors (design-v2 §9): physical left/right on purpose. */
.hud-corner {
  position: absolute;
  inline-size: var(--hud-corner-arm);
  block-size: var(--hud-corner-arm);
  border: 0 solid var(--color-ink);
  opacity: 0.9;
  pointer-events: none;
}
/* physical pinning – identical in RTL */
.hud-corner--tl {
  top: var(--hud-inset-top);
  left: var(--hud-inset-side);
  border-top-width: var(--hud-corner-stroke);
  border-left-width: var(--hud-corner-stroke);
}
.hud-corner--tr {
  top: var(--hud-inset-top);
  right: var(--hud-inset-side);
  border-top-width: var(--hud-corner-stroke);
  border-right-width: var(--hud-corner-stroke);
}
.hud-corner--bl {
  bottom: var(--hud-inset-bottom);
  left: var(--hud-inset-side);
  border-bottom-width: var(--hud-corner-stroke);
  border-left-width: var(--hud-corner-stroke);
}
.hud-corner--br {
  bottom: var(--hud-inset-bottom);
  right: var(--hud-inset-side);
  border-bottom-width: var(--hud-corner-stroke);
  border-right-width: var(--hud-corner-stroke);
}

.hud-plate {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Camera chrome never mirrors (design-v2 §9) — the plate's inner row stays
     LTR (■ REC, HH:MM:SS) on both languages; the AR status plate re-opts into
     RTL below because its content is real Arabic copy, not chrome. */
  direction: ltr;
  padding: var(--hud-plate-pad);
  background: var(--scrim-hud);
  color: var(--color-ink);
  font-family: var(--font-stack-mono);
  font-size: var(--text-micro-lat);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hud-rec {
  top: calc(var(--hud-inset-top) + 14px);
  left: calc(var(--hud-inset-side) + 14px);
}
.hud-clock {
  top: calc(var(--hud-inset-top) + 14px);
  right: calc(var(--hud-inset-side) + 14px);
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.hud-clock time {
  font-size: var(--text-hud-time);
  letter-spacing: 0.1em;
}
.hud-status {
  bottom: calc(var(--hud-inset-bottom) + 14px);
  right: calc(var(--hud-inset-side) + 14px);
  max-inline-size: min(72vw, 420px);
  white-space: normal;
}
/* ≤767px the status plate collides with the lower-third's chip (S3 agent's
   measurement, reproduced on S1) — REC + clock carry the HUD on phones. */
@media (max-width: 767px) {
  .hud-status {
    display: none;
  }
}
:lang(ar) .hud-status {
  font-family: var(--font-stack-text-ar);
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
  direction: rtl;
}
.hud-rec__dot {
  inline-size: 10px;
  block-size: 10px;
  background: var(--color-accent);
  animation: rec-blink var(--blink-rec) steps(1) infinite;
}
@keyframes rec-blink {
  50% {
    opacity: 0.15;
  }
}

/* ═══════════════ 9. Hero — the viewfinder ═══════════════ */

.viewfinder {
  position: relative;
  min-block-size: max(100svh, var(--hero-min-height));
  background: var(--color-bg-deep);
  overflow: clip;
  display: flex;
  align-items: flex-end;
}
.hero-media {
  position: absolute;
  inset: 0;
  overflow: clip;
}
.hero-media::after {
  /* grain over media wells only (asset-manifest B) */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/public/brand/grain.svg");
  background-size: 160px;
  opacity: 0.15;
  pointer-events: none;
}
.hero-video,
.hero-poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.18) brightness(0.68);
  will-change: transform;
}
.hero-wash {
  position: absolute;
  inset: 0;
  background: var(--color-bg-deep);
  opacity: 0.34;
  mix-blend-mode: multiply;
}
/* interim placeholder ground (until footage): layered gradients + drift pools */
.hero-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      58% 42% at 24% 30%,
      var(--color-surface-raised),
      transparent 70%
    ),
    radial-gradient(
      52% 46% at 78% 72%,
      var(--color-surface-alt),
      transparent 72%
    ),
    linear-gradient(
      160deg,
      var(--color-bg-deep),
      var(--color-bg) 58%,
      var(--color-bg-deep)
    );
}
.hero-drift {
  position: absolute;
  inline-size: 46vw;
  block-size: 46vw;
  border-radius: 50%; /* design-ok: an off-screen light pool, not a UI surface radius */
  filter: blur(70px);
  opacity: 0.16;
  background: radial-gradient(circle, var(--chalk-300), transparent 65%);
  animation: drift 16s var(--ease-micro) infinite alternate;
}
.hero-drift--b {
  background: radial-gradient(circle, var(--hazard-500), transparent 68%);
  opacity: 0.05;
  animation-duration: 19s;
}
@keyframes drift {
  to {
    transform: translate3d(2.5%, -2.5%, 0) scale(1.08);
  }
}
.hero-media--degraded .hero-video,
.hero-media--degraded .hero-wash {
  display: none;
}

.lower-third {
  position: relative;
  z-index: 2;
  padding-inline: var(--gutter);
  padding-block-end: clamp(24px, 4.5svh, 48px);
  /* On short viewports the content column must never ride up into the HUD
     zone (REC/clock plates) — clearance grows the viewfinder instead. */
  padding-block-start: calc(var(--hud-inset-top) + 72px);
  max-inline-size: var(--container-max);
}
/* every text line over media sits on a plate — never raw on footage */
.plate-line {
  display: inline-block;
  background: var(--scrim-plate);
  padding: 0.05em 0.14em 0.1em;
}
.lead-plate {
  display: inline-block;
  background: var(--scrim-plate);
  padding: 13px 17px;
  max-inline-size: 52ch;
}
:lang(ar) .lead-plate {
  max-inline-size: 48ch;
}
.eyebrow-plate {
  display: inline-block;
  background: var(--color-bg-deep);
  color: var(--color-accent);
  padding: var(--stencil-pad);
  font-family: var(--font-stack-mono);
  font-weight: 500;
  font-size: var(--text-label-lat);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:lang(ar) .eyebrow-plate {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  letter-spacing: 0;
}
.hero-h1 {
  margin-block: 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: var(--color-ink);
}
.hero-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: 22px;
}

/* ═══════════════ 10. Spec bar (key–value manifest strip) ═══════════════ */

.spec-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--specbar-cell-min), 1fr));
  gap: var(--seam-size);
  background: var(--color-seam);
  border-block: var(--seam-size) solid var(--color-seam);
}
.spec-bar__cell {
  background: var(--color-surface-alt);
  padding: 16px var(--gutter) 18px;
}
.spec-bar__key {
  display: block;
  margin-block-end: 6px;
}
.spec-bar__value {
  margin-inline-start: 0; /* UA <dd> default indent */
  font-size: var(--text-body-lat-size);
  color: var(--color-ink);
}
:lang(ar) .spec-bar__value {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-value-ar);
  line-height: 1.7;
}

/* ═══════════════ 11. Manifest rows (how-it-works / call sheet) ═══════════════ */

.manifest {
  border-block-start: var(--seam-size) solid var(--color-rule);
}
.manifest__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px clamp(16px, 3vw, 40px);
  padding-block: clamp(18px, 2.6vw, 28px);
  border-block-end: var(--seam-size) solid var(--color-rule);
}
.manifest__idx {
  font-family: var(--font-stack-mono);
  font-size: var(--text-micro-lat);
  letter-spacing: 0.12em;
  color: var(--color-ink-faint);
  order: 3;
  margin-inline-start: auto;
}
.manifest__key {
  flex: 0 0 auto;
  min-inline-size: min(38vw, 300px);
  color: var(--color-ink);
}
.manifest__value {
  flex: 1 1 320px;
  margin-inline-start: 0; /* UA <dd> default indent */
  color: var(--color-ink-soft);
  font-size: var(--text-body-lat-size);
  line-height: 1.6;
}
:lang(ar) .manifest__value {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-body-ar-size);
  line-height: 1.85;
}

/* ═══════════════ 12. Ledger (the record) ═══════════════ */

.ledger__schema {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-block-end: 12px;
  border-block-end: var(--seam-size) solid var(--color-rule);
  font-family: var(--font-stack-mono);
  font-size: var(--text-micro-lat);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}
:lang(ar) .ledger__schema {
  font-family: var(--font-stack-text-ar);
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
}
.ledger__empty {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  margin-block-start: 18px;
  padding: clamp(20px, 3vw, 30px);
  background: var(--color-surface-alt);
  border: var(--seam-size) solid var(--color-rule);
}
.ledger__empty-text {
  flex: 1 1 320px;
}
.ledger__empty-label {
  display: block;
  margin-block-end: 8px;
}
.ledger__asof {
  margin-block-start: 12px;
}

/* ═══════════════ 13. Tier cards ═══════════════ */

.tiers-grid {
  display: grid;
  gap: var(--seam-size);
  background: var(--color-rule);
  border: var(--seam-size) solid var(--color-rule);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.tier {
  background: var(--color-surface);
  padding: clamp(22px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--dur-lift) var(--ease-micro);
}
.tier:hover {
  transform: translateY(var(--hover-lift));
}
.tier--featured {
  background: var(--color-invert-bg);
  color: var(--color-invert-ink);
}
.tier--featured .tier__count {
  color: var(--color-invert-ink-2);
}
.tier__count {
  font-family: var(--font-stack-mono);
  font-size: var(--text-data-lat);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}
:lang(ar) .tier__count {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-value-ar);
}
:lang(ar) .tier__count bdi {
  font-family: var(--font-stack-mono);
}
.tier__price:empty {
  display: none;
}
.tier__inclusions li {
  padding-block: 8px;
  border-block-start: var(--seam-size) solid var(--color-rule);
  font-size: var(--text-body-lat-size);
  line-height: 1.6;
  color: var(--color-ink-soft);
}
:lang(ar) .tier__inclusions li {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-body-ar-size);
  line-height: 1.85;
}
.tier--featured .tier__inclusions li {
  color: var(--color-invert-ink-2);
  border-block-start-color: var(--color-invert-ink-2);
}
.tier__chip {
  margin-block-start: auto;
}

/* ═══════════════ 14. 1px grids, loop strip, filmstrip ═══════════════ */

.grid-1px {
  display: grid;
  gap: var(--seam-size);
  background: var(--color-rule);
  border: var(--seam-size) solid var(--color-rule);
}
.loop-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seam-size);
  background: var(--color-rule);
  border: var(--seam-size) solid var(--color-rule);
}
.loop-strip__cell {
  flex: 1 1 150px;
  background: var(--color-surface);
  padding: 18px 16px 20px;
  transition:
    transform var(--dur-lift) var(--ease-micro),
    background-color var(--dur-hover) var(--ease-micro);
}
.loop-strip__cell:hover {
  transform: translateY(var(--hover-lift));
  background: var(--color-surface-raised);
}
.loop-strip__cell--raised {
  background: var(--color-surface-raised);
}
.loop-strip__idx {
  display: block;
  margin-block-end: 10px;
  /* ink-faint is certified 4.6:1 on bg only; on the surface cells it measures
     4.34 (visual_qa) — the idx takes muted here. */
  color: var(--color-ink-muted);
}
.loop-strip__label {
  font-family: var(--font-stack-display-lat);
  font-weight: 500;
  font-size: var(--text-slug-lat);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
}
:lang(ar) .loop-strip__label {
  font-family: var(--font-stack-text-ar);
  font-weight: 500;
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.6;
}

.filmstrip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: 8px;
}
.filmstrip__tile {
  position: relative;
  flex: 0 0 clamp(180px, 21vw, 240px);
  aspect-ratio: 9 / 16;
  background: var(--color-surface-alt);
  border: var(--seam-size) solid var(--color-rule);
  scroll-snap-align: start;
  overflow: clip;
  transition: transform var(--dur-lift) var(--ease-micro);
}
.filmstrip__tile:hover {
  transform: translateY(var(--hover-lift));
}
.filmstrip__tile img,
.filmstrip__tile video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.18) brightness(0.68);
  transition: transform var(--dur-lift) var(--ease-micro);
}
.filmstrip__tile:hover img,
.filmstrip__tile:hover video {
  transform: scale(var(--hover-media-scale));
}
.filmstrip__slug {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  padding: var(--hud-plate-pad);
  background: var(--scrim-hud);
  font-family: var(--font-stack-mono);
  font-size: var(--text-micro-lat);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.filmstrip__caption {
  position: absolute;
  inset-block-end: 10px;
  inset-inline: 10px;
  padding: var(--hud-plate-pad);
  background: var(--scrim-plate);
  font-size: 13px;
  color: var(--color-ink-soft);
}
:lang(ar) .filmstrip__caption {
  font-family: var(--font-stack-text-ar);
  font-size: 14px;
}

/* ═══════════════ 15. Pending marks + warn plates ═══════════════ */

.pending {
  text-decoration: underline dashed var(--color-accent-2) 1px;
  text-underline-offset: 5px;
}
.plate-warn {
  border-inline-start: 2px solid var(--color-accent-2);
  background: var(--color-surface-alt);
  padding: 16px 18px;
}

/* ═══════════════ 16. Footer ═══════════════ */

.site-footer {
  margin-block-start: var(--deck-pad-block);
}
.site-footer__inner {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter) 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px clamp(24px, 4vw, 56px);
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px clamp(24px, 4vw, 48px);
}
.footer-index {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px clamp(16px, 2.6vw, 30px);
}
.footer-index a {
  font-size: var(--text-nav-lat);
  text-decoration: none;
  color: var(--color-ink);
  min-block-size: var(--target-min);
  display: inline-flex;
  align-items: center;
}
:lang(ar) .footer-index a {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-nav-ar);
}
/* bottom row — CENTERED (founder ruling + acceptance #11) */
.site-footer__bottom {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding: 22px var(--gutter) 40px;
  border-block-start: var(--seam-size) solid var(--color-rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.footer-entity,
.footer-copyright {
  font-family: var(--font-stack-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
}
:lang(ar) .footer-entity,
:lang(ar) .footer-copyright {
  font-family: var(--font-stack-text-ar);
  font-size: 14px;
  letter-spacing: 0;
}

/* ═══════════════ 17. Reveal system (THE SHUNT / STAMP / WIPE / FLOOD) ═══════
   Server markup is complete; reveals exist only under `.js` (set by the nonced
   head snippet) so a no-JS visitor never sees hidden content. `.is-on` latches. */

.js [data-reveal] {
  opacity: 0;
}
.js [data-reveal].is-on {
  opacity: 1;
}
.js [data-reveal][data-move="shunt"] {
  /* Starts toward the READING edge (−44px in LTR): entering "from the reading
     edge" per motion-spec §1 — and start-edge overflow cannot create a
     horizontal scrollbar, where trailing-edge overflow does (visual_qa high). */
  transform: translateX(calc(var(--flow, 1) * -44px));
}
.js [data-reveal][data-move="shunt"].is-on {
  transform: translateX(0);
  transition:
    opacity 80ms linear,
    transform var(--dur-shunt) var(--ease-enter);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-reveal][data-move="stamp"] {
  transform: translateY(-14px);
}
.js [data-reveal][data-move="stamp"].is-on {
  transform: translateY(0);
  transition:
    opacity 60ms linear,
    transform var(--dur-stamp) var(--ease-enter);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-reveal][data-move="wipe"] {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
}
.js:dir(rtl) [data-reveal][data-move="wipe"] {
  clip-path: inset(0 0 0 100%);
}
.js [data-reveal][data-move="wipe"].is-on {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-plate) var(--ease-enter);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-reveal][data-move="flood"] {
  opacity: 1;
  filter: brightness(0.12);
}
.js [data-reveal][data-move="flood"].is-on {
  filter: brightness(1);
  transition: filter var(--dur-flood) steps(6, end);
  transition-delay: calc(var(--i, 0) * 90ms);
}
/* logical flow direction for the shunt: enters from the reading edge */
.js:dir(rtl) [data-reveal][data-move="shunt"] {
  transform: translateX(calc(var(--flow, 1) * 44px));
}

/* ═══════════════ 18. First-visit intro ═══════════════ */

/* Pre-JS cover: the nonced head snippet adds .intro-pending on <html> before
   first paint, so home's first visit never flashes content before the intro. */
.intro-pending body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--color-bg-deep);
  z-index: var(--z-intro);
}
.intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  background: var(--color-bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro__mark {
  inline-size: clamp(200px, 32vw, 320px);
  color: var(--color-ink);
}
:lang(ar) .intro__mark {
  inline-size: clamp(220px, 36vw, 340px);
}
.intro__mark svg {
  inline-size: 100%;
  block-size: auto;
  direction: ltr;
}
.intro__latin {
  position: absolute;
  inset-block-start: calc(50% + clamp(70px, 11vw, 110px));
  inset-inline: 0;
  text-align: center;
  font-family: var(--font-stack-display-lat);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.intro__latin span {
  opacity: 0;
}
.intro.is-run .intro__latin span {
  animation: intro-letter 1ms steps(1, end) forwards;
  animation-delay: calc(1040ms + var(--i, 0) * 50ms);
}
@keyframes intro-letter {
  to {
    opacity: 1;
  }
}
/* corner clip-ins at the viewport corners */
.intro .hud-corner {
  opacity: 0;
}
.intro.is-run .hud-corner {
  animation: corner-in var(--dur-corner) var(--ease-enter) forwards;
}
.intro.is-run .hud-corner--tl {
  animation-delay: 50ms;
}
.intro.is-run .hud-corner--tr {
  animation-delay: 120ms;
}
.intro.is-run .hud-corner--bl {
  animation-delay: 190ms;
}
.intro.is-run .hud-corner--br {
  animation-delay: 260ms;
}
@keyframes corner-in {
  from {
    opacity: 0;
    transform: translate(var(--cx, 0), var(--cy, 0));
  }
  to {
    opacity: 0.9;
    transform: translate(0, 0);
  }
}
.intro .hud-corner--tl {
  --cx: -12px;
  --cy: -12px;
}
.intro .hud-corner--tr {
  --cx: 12px;
  --cy: -12px;
}
.intro .hud-corner--bl {
  --cx: -12px;
  --cy: 12px;
}
.intro .hud-corner--br {
  --cx: 12px;
  --cy: 12px;
}

/* THE WRITE-ON: the calligraphy reveals right→left in BOTH languages.
   Body pieces wipe; dots stamp in scale. IDs come from the inline SVG partial. */
.intro__mark #word-right,
.intro__mark #word-left,
.intro__mark #dot-fa,
.intro__mark #dot-yaa-1,
.intro__mark #dot-yaa-2 {
  opacity: 0;
}
.intro.is-run #word-right {
  animation: mark-wipe 340ms var(--ease-micro) 300ms forwards;
}
.intro.is-run #dot-fa {
  animation: mark-dot 200ms var(--ease-enter) 620ms forwards;
}
.intro.is-run #word-left {
  animation: mark-wipe 340ms var(--ease-micro) 640ms forwards;
}
.intro.is-run #dot-yaa-1 {
  animation: mark-dot 200ms var(--ease-enter) 950ms forwards;
}
.intro.is-run #dot-yaa-2 {
  animation: mark-dot 200ms var(--ease-enter) 1030ms forwards;
}
@keyframes mark-wipe {
  from {
    opacity: 1;
    clip-path: inset(-5% -2% -5% 100%);
  }
  to {
    opacity: 1;
    clip-path: inset(-5% -2% -5% -2%);
  }
}
@keyframes mark-dot {
  from {
    opacity: 0;
    transform: scale(0.2);
    transform-box: fill-box;
    transform-origin: center;
  }
  60% {
    opacity: 1;
    transform: scale(1.15);
    transform-box: fill-box;
    transform-origin: center;
  }
  to {
    opacity: 1;
    transform: scale(1);
    transform-box: fill-box;
    transform-origin: center;
  }
}
.intro.is-exit {
  animation: intro-exit 240ms var(--ease-morph) forwards;
}
@keyframes intro-exit {
  to {
    opacity: 0;
  }
}

/* Hero entrance choreography — plays once the intro exits (html.intro-played)
   or, with no intro, immediately with compressed delays (html.no-intro). */
.js .lower-third .eyebrow-plate,
.js .lower-third .hero-h1 .plate-line,
.js .lower-third .lead-plate,
.js .lower-third .hero-chip-row,
.js .viewfinder .hud-plate,
.js .viewfinder > .hud-corner {
  opacity: 0;
}
.no-js .lower-third .eyebrow-plate {
  opacity: 1;
}
.intro-played .viewfinder > .hud-corner,
.no-intro .viewfinder > .hud-corner {
  animation: corner-in var(--dur-corner) var(--ease-enter) forwards;
}
.intro-played .viewfinder .hud-plate,
.no-intro .viewfinder .hud-plate {
  animation: hud-on 1ms steps(1, end) forwards;
}
@keyframes hud-on {
  to {
    opacity: 1;
  }
}
.intro-played .lower-third .eyebrow-plate,
.no-intro .lower-third .eyebrow-plate {
  animation: shunt-in var(--dur-shunt) var(--ease-enter) forwards;
}
.intro-played .lower-third .hero-h1 .plate-line,
.no-intro .lower-third .hero-h1 .plate-line {
  animation: plate-wipe var(--dur-plate) var(--ease-enter) forwards;
}
.intro-played .lower-third .lead-plate,
.no-intro .lower-third .lead-plate,
.intro-played .lower-third .hero-chip-row,
.no-intro .lower-third .hero-chip-row {
  animation: stamp-in var(--dur-stamp) var(--ease-enter) forwards;
}
@keyframes shunt-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--flow, 1) * -44px));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
:dir(rtl) .lower-third .eyebrow-plate {
  --flow: -1;
}
@keyframes plate-wipe {
  from {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}
:dir(rtl) .lower-third .hero-h1 .plate-line {
  animation-name: plate-wipe-rtl;
}
@keyframes plate-wipe-rtl {
  from {
    opacity: 1;
    clip-path: inset(0 0 0 100%);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}
@keyframes stamp-in {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  60% {
    transform: translateY(1px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* post-intro delays (kit §2: 1500–2100 window, rebased to overlay exit) */
.intro-played .viewfinder > .hud-corner {
  animation-delay: 0ms;
}
.intro-played .hud-rec {
  animation-delay: 80ms;
}
.intro-played .hud-clock {
  animation-delay: 140ms;
}
.intro-played .hud-status {
  animation-delay: 200ms;
}
.intro-played .lower-third .eyebrow-plate {
  animation-delay: 120ms;
}
.intro-played .lower-third .hero-h1 .plate-line:nth-child(1) {
  animation-delay: 200ms;
}
.intro-played .lower-third .hero-h1 .plate-line:nth-child(2) {
  animation-delay: 320ms;
}
.intro-played .lower-third .lead-plate {
  animation-delay: 480ms;
}
.intro-played .lower-third .hero-chip-row {
  animation-delay: 580ms;
}
/* no-intro (subpages / repeat visits): compressed 50–650ms */
.no-intro .viewfinder > .hud-corner {
  animation-delay: 50ms;
}
.no-intro .hud-rec {
  animation-delay: 120ms;
}
.no-intro .hud-clock {
  animation-delay: 170ms;
}
.no-intro .hud-status {
  animation-delay: 220ms;
}
.no-intro .lower-third .eyebrow-plate {
  animation-delay: 160ms;
}
.no-intro .lower-third .hero-h1 .plate-line:nth-child(1) {
  animation-delay: 240ms;
}
.no-intro .lower-third .hero-h1 .plate-line:nth-child(2) {
  animation-delay: 360ms;
}
.no-intro .lower-third .lead-plate {
  animation-delay: 520ms;
}
.no-intro .lower-third .hero-chip-row {
  animation-delay: 650ms;
}

/* ═══════════════ 19. Route transitions (cross-document) ═══════════════ */

@view-transition {
  navigation: auto;
}
.site-nav {
  view-transition-name: site-nav;
}
.site-nav .wordmark {
  view-transition-name: site-mark;
}
.site-nav .lang-toggle {
  view-transition-name: site-lang;
}
::view-transition-old(root) {
  animation: none;
}
::view-transition-new(root) {
  animation: route-wipe var(--dur-wipe) var(--ease-morph);
}
@keyframes route-wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
:dir(rtl)::view-transition-new(root) {
  animation-name: route-wipe-rtl;
}
@keyframes route-wipe-rtl {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ═══════════════ 20. THE SCRUB — pinned scroll scene (S1) ═══════════════
   JS sets --p (0→1) on .scene-stage; everything below animates by calc().
   The ON RECORD version of the Baker Media camera scene, in this world's
   grammar: viewfinder records → reviewed → seeded → the log stamps. */

.scene {
  height: 260vh;
  position: relative;
  background: var(--color-bg-deep);
  border-block-start: var(--seam-size) solid var(--color-seam);
}
.scene-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  --p: 0;
}
.scene-eyebrow {
  position: absolute;
  inset-block-start: max(86px, calc(var(--hud-inset-top) + 8px));
  inset-inline: var(--gutter);
  text-align: center;
  opacity: clamp(0, calc((0.45 - var(--p)) * 6), 1);
}
.scene-center {
  position: relative;
  inline-size: min(58vw, 300px);
  aspect-ratio: 1;
}
.scene-cam,
.scene-log {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}
/* Phase 1 — the camera records; fades/rotates away past p=.62 */
.scene-cam {
  opacity: clamp(0, calc((0.62 - var(--p)) * 5), 1);
  transform: rotate(calc(var(--p) * -8deg)) scale(calc(1 - var(--p) * 0.28));
}
.scene-cam__rings {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(calc(var(--p) * 300deg));
}
.scene-cam__iris {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(calc(1 - min(var(--p) * 1.2, 0.82)));
}
.scene-cam__rec {
  animation: rec-blink var(--blink-rec) steps(1) infinite;
}
/* Phase 2 — the logged stamp resolves in */
.scene-log {
  opacity: clamp(0, calc((var(--p) - 0.58) * 6), 1);
  transform: scale(
    calc(0.5 + clamp(0, calc((var(--p) - 0.56) * 2.4), 1) * 0.5)
  );
}
/* filmstrip band behind, advancing with scroll */
.scene-strip {
  position: absolute;
  inset-inline: -10%;
  display: flex;
  gap: 10px;
  opacity: min(
    clamp(0, calc((var(--p) - 0.08) * 5), 1),
    clamp(0, calc((0.7 - var(--p)) * 5), 1)
  );
  transform: rotate(-4deg) translateX(calc(var(--p) * -20%));
  z-index: -1;
}
:dir(rtl) .scene-strip {
  transform: rotate(4deg) translateX(calc(var(--p) * 20%));
}
.scene-strip span {
  flex: 0 0 96px;
  block-size: 58px;
  background: var(--color-surface-alt);
  border: var(--seam-size) solid var(--color-rule);
}
.scene-strip span:nth-child(3n + 1) {
  background: var(--color-surface);
}
/* phase chips that fly in around the camera (mechanism statements) */
.scene-chip {
  position: absolute;
  z-index: 1;
  --e: clamp(0, calc((var(--p) - var(--ph)) * 3.4), 1);
  opacity: var(--e);
  transform: translate(
    calc(var(--sx) * (1 - var(--e))),
    calc(var(--sy) * (1 - var(--e)))
  );
  padding: var(--hud-plate-pad);
  background: var(--scrim-hud);
  border: var(--seam-size) solid var(--color-rule);
  font-family: var(--font-stack-mono);
  font-size: var(--text-micro-lat);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}
:lang(ar) .scene-chip {
  font-family: var(--font-stack-text-ar);
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
}
.scene-chip--1 {
  top: -6%;
  inset-inline-start: -30%;
  --sx: -90px;
  --sy: -60px;
  --ph: 0.16;
}
.scene-chip--2 {
  top: -2%;
  inset-inline-end: -32%;
  --sx: 90px;
  --sy: -70px;
  --ph: 0.28;
}
.scene-chip--3 {
  bottom: -4%;
  inset-inline-start: -34%;
  --sx: -100px;
  --sy: 70px;
  --ph: 0.4;
}
.scene-chip--4 {
  bottom: -10%;
  inset-inline-end: -28%;
  --sx: 90px;
  --sy: 80px;
  --ph: 0.52;
}
:dir(rtl) .scene-chip--1 {
  --sx: 90px;
}
:dir(rtl) .scene-chip--2 {
  --sx: -90px;
}
:dir(rtl) .scene-chip--3 {
  --sx: 100px;
}
:dir(rtl) .scene-chip--4 {
  --sx: -90px;
}
/* three-phase captions at the bottom */
.scene-caps {
  position: absolute;
  inset-block-end: max(9vh, 64px);
  inset-inline: var(--gutter);
  block-size: 5em;
  text-align: center;
}
.scene-caps .cap {
  position: absolute;
  inset-inline: 0;
}
.scene-caps .cap b {
  display: block;
  font-family: var(--font-stack-display-lat);
  font-weight: 500;
  font-size: var(--text-callsheet-lat);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
:lang(ar) .scene-caps .cap b {
  font-family: var(--font-stack-display-ar);
  font-weight: 700;
  font-size: var(--text-callsheet-ar);
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}
.scene-caps .cap span {
  display: block;
  margin-block-start: 6px;
  color: var(--color-ink-muted);
  font-size: 14px;
}
:lang(ar) .scene-caps .cap span {
  font-family: var(--font-stack-text-ar);
  font-size: 15px;
}
.scene-caps .cap--1 {
  opacity: clamp(0, calc((0.24 - var(--p)) * 7), 1);
}
.scene-caps .cap--2 {
  opacity: min(
    clamp(0, calc((var(--p) - 0.3) * 7), 1),
    clamp(0, calc((0.56 - var(--p)) * 7), 1)
  );
}
.scene-caps .cap--3 {
  opacity: clamp(0, calc((var(--p) - 0.62) * 7), 1);
}

@media (max-width: 767px) {
  .scene {
    height: 200vh;
  }
  .scene-center {
    inline-size: min(64vw, 250px);
  }
  .scene-chip--1,
  .scene-chip--3 {
    inset-inline-start: -12%;
  }
  .scene-chip--2,
  .scene-chip--4 {
    inset-inline-end: -12%;
  }
}

/* ═══════════════ 21. Rail (≥1100, carried over) ═══════════════ */

.rail {
  display: none;
}
@media (min-width: 1100px) {
  .rail {
    position: fixed;
    inset-block-start: 50%;
    inset-inline-end: 14px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: var(--z-nav);
    opacity: 0;
    transition: opacity var(--dur-hover) var(--ease-micro);
    pointer-events: none;
  }
  .rail[data-rail-visible="true"] {
    opacity: 1;
  }
  .rail__notch {
    inline-size: 18px;
    block-size: 2px;
    background: var(--color-line);
    transition:
      background-color var(--dur-hover) var(--ease-micro),
      inline-size var(--dur-hover) var(--ease-micro);
  }
  .rail__notch[data-active="true"] {
    background: var(--color-accent);
    inline-size: 26px;
  }
}

/* ═══════════════ 22. Focus ═══════════════ */

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ═══════════════ 23. Reduced motion — end states everywhere ═══════════════ */

@media (prefers-reduced-motion: reduce) {
  /* The :dir(rtl) compounds MUST be listed too: they carry higher specificity
     than the base pre-state rules, so without them an AR reduced-motion visitor
     kept the +44px shunt offset and the 100%-inset wipe (invisible text) —
     caught by the reduced-motion visual_qa run, 2026-09-01. */
  .js [data-reveal],
  .js [data-reveal][data-move="shunt"],
  .js:dir(rtl) [data-reveal][data-move="shunt"],
  .js [data-reveal][data-move="stamp"],
  .js [data-reveal][data-move="wipe"],
  .js:dir(rtl) [data-reveal][data-move="wipe"],
  .js [data-reveal][data-move="flood"] {
    opacity: 1;
    transform: none;
    clip-path: none;
    filter: none;
    transition: none;
  }
  .hud-rec__dot,
  .scene-cam__rec {
    animation: none;
  }
  .hero-drift,
  .hero-drift--b {
    animation: none;
  }
  .chip,
  .chip--ghost,
  .tier,
  .loop-strip__cell,
  .filmstrip__tile,
  .filmstrip__tile img,
  .filmstrip__tile video,
  .link-draw {
    transition: none;
  }
  .chip:hover,
  .chip--ghost:hover,
  .tier:hover,
  .loop-strip__cell:hover,
  .filmstrip__tile:hover {
    transform: none;
  }
  .intro.is-run .hud-corner,
  .intro.is-run #word-right,
  .intro.is-run #word-left,
  .intro.is-run #dot-fa,
  .intro.is-run #dot-yaa-1,
  .intro.is-run #dot-yaa-2,
  .intro.is-run .intro__latin span {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
  .js .lower-third .eyebrow-plate,
  .js .lower-third .hero-h1 .plate-line,
  .js .lower-third .lead-plate,
  .js .lower-third .hero-chip-row,
  .js .viewfinder .hud-plate,
  .js .viewfinder > .hud-corner {
    opacity: 1;
    animation: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
  .scene {
    height: auto;
    padding-block: var(--deck-pad-block);
  }
  .scene-stage {
    /* relative, not static: the absolute strip/chips must stay contained by
       the stage's overflow clip when the pin is dropped */
    position: relative;
    height: auto;
    min-block-size: 70svh;
    --p: 1;
  }
  .scene-strip {
    display: none;
  }
  .scene-cam {
    opacity: 0;
  }
}

/* ═══════════════ 24. Failsafe — a failed bundle must never hide content ═════
   The head snippet stamps `.js` before paint; public.js stamps `.bundle-live`
   when it actually executes. If the bundle never runs, every JS-gated hidden
   state force-resolves to visible at 3s. `:not(.bundle-live)` keeps this rule
   from ever competing with the real choreography — on a healthy page it simply
   never matches, so it can't hijack animation-name from the entrance rules. */

.js:not(.bundle-live) [data-reveal],
.js:not(.bundle-live) .lower-third .eyebrow-plate,
.js:not(.bundle-live) .lower-third .hero-h1 .plate-line,
.js:not(.bundle-live) .lower-third .lead-plate,
.js:not(.bundle-live) .lower-third .hero-chip-row,
.js:not(.bundle-live) .viewfinder .hud-plate,
.js:not(.bundle-live) .viewfinder > .hud-corner {
  animation-name: reveal-failsafe;
  animation-duration: 1ms;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}
@keyframes reveal-failsafe {
  to {
    opacity: 1;
    transform: none;
    clip-path: none;
    filter: none;
  }
}
.intro-pending body::after {
  animation: cover-failsafe 300ms var(--ease-morph) 3s forwards;
}
@keyframes cover-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}