/* ─────────────────────────────────────────────────────────────
   legal.css — the privacy notice

   One column, one measure, no ornament. The page exists to be
   read and believed, so it uses the reading end of the system
   and nothing from the marketing end: no display sizes above
   the h1, no signal green except on links.
   ───────────────────────────────────────────────────────────── */

.legal {
  padding-block: clamp(56px, 9vh, 104px) var(--section-y);
}

.legal__wrap { max-width: min(72ch, var(--page-max)); }

/* The 404 is the one legal-family page that isn't a document to read start
   to finish — it's a single dead-end message, so it gets the centered
   treatment a document page doesn't. */
.legal--404 .legal__wrap { margin-inline: auto; text-align: center; }
.legal--404 .legal__lede { margin-inline: auto; }
.legal--404 .legal__back { justify-content: center; }

.legal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.legal__title em { font-style: italic; color: var(--signal); }

/* ── 404 ──────────────────────────────────────────────────
   A number this size only ever appears once on the site, so it
   borrows nothing — display-scale serif, set loose, over the real
   heading rather than replacing it.

   The glitch is an easter egg, not a feature: js/lost-signal.js
   adds .is-glitching for a short burst every few seconds and
   removes it — the number reads calmly the rest of the time. Two
   duplicate layers (::before/::after, driven by the same
   data-text the digits already carry) slice and re-offset in the
   brand's own ink/signal colors rather than an RGB channel-split,
   so it still looks like this site's static, not a stock effect.
   Skipped entirely under prefers-reduced-motion — js/lost-signal.js
   never adds the class, so this code simply never runs. */
.legal p.error404__code {
  position: relative;
  margin: 0 0 var(--space-3);
  padding: 0.05em 0.15em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 148px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--signal-soft);
}

.error404__code.is-glitching {
  animation: glitch-jitter 0.3s steps(2) infinite, glitch-fringe 0.3s steps(2) infinite;
}

.error404__code::before,
.error404__code::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  opacity: 0;
}

.error404__code.is-glitching::before {
  opacity: 0.85;
  color: var(--signal);
  clip-path: polygon(0 12%, 100% 8%, 100% 22%, 0 28%, 0 41%, 100% 37%, 100% 44%, 0 48%);
  animation: glitch-shift-a 0.34s steps(3) infinite;
}

.error404__code.is-glitching::after {
  opacity: 0.8;
  color: var(--signal-deep);
  clip-path: polygon(0 54%, 100% 58%, 100% 67%, 0 63%, 0 76%, 100% 80%, 100% 90%, 0 86%);
  animation: glitch-shift-b 0.24s steps(3) infinite reverse;
}

@keyframes glitch-jitter {
  0%, 100% { transform: translate(0, 0) skewX(0deg); }
  20%      { transform: translate(-4px, 2px) skewX(-2deg); }
  40%      { transform: translate(5px, -2px) skewX(1deg); }
  60%      { transform: translate(-3px, -3px) skewX(3deg); }
  80%      { transform: translate(4px, 1px) skewX(-1deg); }
}

/* A cheap RGB-split cue layered under the clip-path bands above — most of
   the "chromatic aberration" read comes from this, the bands add the tear. */
@keyframes glitch-fringe {
  0%, 100% { text-shadow: 0 0 transparent; }
  25%      { text-shadow: 6px 0 var(--signal), -6px 0 var(--ink); }
  50%      { text-shadow: -5px 1px var(--signal-deep), 5px -1px var(--ink); }
  75%      { text-shadow: 4px -2px var(--signal), -4px 2px var(--signal-deep); }
}

@keyframes glitch-shift-a {
  0%   { transform: translate(-10px, 0); }
  50%  { transform: translate(9px, -3px); }
  100% { transform: translate(-7px, 3px); }
}

@keyframes glitch-shift-b {
  0%   { transform: translate(8px, 0); }
  50%  { transform: translate(-10px, 3px); }
  100% { transform: translate(7px, -3px); }
}

.legal__meta {
  margin: var(--space-3) 0 0;
  font-size: var(--t-meta);
  color: var(--ink-muted);
}

.legal__lede {
  margin: var(--space-5) 0 0;
  max-width: 34em;
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-soft);
}

.legal h2 {
  margin: var(--space-6) 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.legal h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.3;
  color: var(--ink);
}

.legal p {
  margin: 0 0 var(--space-4);
  font-size: var(--t-body);
  line-height: 1.66;
  color: var(--ink-soft);
}

.legal ul {
  margin: 0 0 var(--space-4);
  padding-left: 1.25em;
}

.legal li {
  margin-bottom: 8px;
  font-size: var(--t-body);
  line-height: 1.66;
  color: var(--ink-soft);
}

.legal strong { color: var(--ink); font-weight: 600; }

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

.legal a:hover { color: var(--signal-deep); }

/* A standalone navigation control, not a link inside a sentence — so it does
   not get 2.5.8's inline exemption and buys its own 24px with padding. */
.legal__back {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: baseline;
}

.legal__back a {
  display: inline-block;
  padding: 4px 0;
}