/* legal.css — page-scoped additions for privacy.html, terms.html, 404.html (agent E). Loads after site.css and home.css; consume tokens, never redefine them. KIT 2026-09-13. */

/* ─────────────────────────────────────────────────────────────
   Legal pages. The prose measure is locked (60ch) and every sentence is
   the client's; all that changes is the room it sits in — the text is now
   banded, alternate bands carry the waveform strip, and each band rises on the
   reveal cascade instead of arriving as one grey slab.
   ───────────────────────────────────────────────────────────── */
body[data-page="privacy"] .section,
body[data-page="terms"] .section { padding-block: clamp(34px, 4.6vw, 60px); }
body[data-page="privacy"] .section .prose h2:first-child,
body[data-page="terms"] .section .prose h2:first-child { margin-top: 0; }

/* The masthead ends on a rule instead of 122px of nothing: band one is untinted, so
   without it the page's banding does not start until band two and the opening reads as a dropout. */
body[data-page="privacy"] .page-head,
body[data-page="terms"] .page-head {
  padding-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 0;
}

/* Wide screens: the heading moves into a left rail so the prose spans the band it sits in.
   Every band is a strict h2 / p sequence, so auto-placement pairs each heading with its own
   paragraph; the measure itself is untouched at 60ch. */
@media (min-width: 1000px) {
  body[data-page="privacy"] .section .prose,
  body[data-page="terms"] .section .prose,
  body[data-page="privacy"] .section .prose-body,
  body[data-page="terms"] .section .prose-body {
    max-width: none;
    display: grid;
    grid-template-columns: 240px minmax(0, 60ch);
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: clamp(22px, 2.6vw, 34px);
    align-items: start;
  }
  body[data-page="privacy"] .section .prose > h2,
  body[data-page="terms"] .section .prose > h2,
  body[data-page="privacy"] .section .prose-body > h2,
  body[data-page="terms"] .section .prose-body > h2 { grid-column: 1; margin: 0; }
  body[data-page="privacy"] .section .prose > p,
  body[data-page="terms"] .section .prose > p,
  body[data-page="privacy"] .section .prose-body > p,
  body[data-page="terms"] .section .prose-body > p { grid-column: 2; margin: 0; }
  /* the last band nests its prose: the inner grid spans both tracks so its rail lines up with
     the bands above, and the note sits under the paragraph column. No :has() — a browser
     without it would drop the whole rule and take the paragraph margins with it. */
  body[data-page="privacy"] .section .prose > .prose-body,
  body[data-page="terms"] .section .prose > .prose-body { grid-column: 1 / -1; }
  body[data-page="privacy"] .section .prose > .legal-note,
  body[data-page="terms"] .section .prose > .legal-note { grid-column: 2; max-width: 60ch; }
}

/* A link is the only interactive thing in a wall of prose, so rest and hover have to differ
   by more than a pixel of underline. Colour and thickness are set, never tweened. */
.prose a,
.legal-note a { text-decoration-color: rgba(255, 255, 255, .45); }
.prose a:hover,
.legal-note a:hover { text-decoration-color: #fff; text-decoration-thickness: 2px; }
.prose a:active,
.legal-note a:active { opacity: .72; }

/* The responsible-party / precedence note: a lit card, not a footnote adrift. */
.legal-note {
  margin-top: 26px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .022);
}
.legal-note p { margin: 0; font-size: .9rem; color: var(--muted); }
.legal-note p + p { margin-top: 8px; }

/* ─────────────────────────────────────────────────────────────
   404. This page loads no home.css, so every rule below stands on
   site.css tokens alone. A real night behind the film mask, one glass
   console on top of it, one lit way home.
   ───────────────────────────────────────────────────────────── */
body[data-page="404"] main { display: grid; }
.lost {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(520px, 74svh, 760px);
  padding-block: clamp(56px, 9vw, 110px);
}
.lost .xe-film-media { inset: 0; }
/* The light sits on the rig, not on the picnic tables: the radial centre moves right so the
   truss and the lighting bars are the part of the frame that reads. House grade untouched. */
.lost .xe-film-media img { filter: saturate(.88) contrast(1.06); opacity: .62; }
.lost .xe-film-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 38%, rgba(0, 0, 0, .30), rgba(0, 0, 0, .88) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .2) 45%, rgba(0, 0, 0, .78));
}

/* The band is a grid, so state the wrap width and centre the console explicitly
   rather than leaning on max-content sizing. */
.lost > .wrap { width: 100%; }
.lost-panel {
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(26px, 3.6vw, 44px);
  display: grid;
  gap: 16px;
  justify-items: start;
}
.lost-panel h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); margin: 2px 0 0; }
.lost-panel .lede { max-width: 44ch; margin: 0; }
.lost-actions { display: grid; gap: 14px; justify-items: start; margin-top: 6px; }

@media (max-width: 899px) {
  .lost { min-height: clamp(480px, 70svh, 640px); }
  .lost-panel { padding: 22px 18px; border-radius: var(--r-md); }
  .lost .xe-film-media img { opacity: .62; }
}