/* Whitestone Juniors — legal + error pages
   Loaded by privacy.html, accessibility.html and 404.html INSTEAD of
   sections.css. Those three need none of the section machinery (no hero, no
   marquee, no scroll seam, no founders slideshow), and sections.css is ~1100
   lines of exactly that. tokens.css / base.css / components.css still carry
   the type scale, the colours and the buttons, so nothing here re-declares a
   value that already exists. */

/* ------------------------------------------------------------
   Slim header — a wordmark that goes home, and nothing else.
   The real header is a floating pill with an inverting theme, a burger, a
   focus-trapped overlay menu and three scroll observers. None of that earns
   its keep on a privacy policy.
   ------------------------------------------------------------ */

.legal-head {
  padding: var(--space-6) var(--gutter);
  border-bottom: 1px solid rgba(11, 18, 77, 0.10);
}
.legal-head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: var(--container);
  margin-inline: auto;
}
.legal-head__logo { display: inline-flex; align-items: baseline; gap: var(--space-3); }
.legal-head__logo img { width: 132px; height: auto; }

/* The gutter lives on .section on the main page; these pages have no sections,
   so it has to come from here or the text runs into the viewport edge. */
.legal-main {
  padding-block: var(--space-16);
  padding-inline: var(--gutter);
}

.legal h1 { margin-bottom: var(--space-4); }
.legal__updated { margin-bottom: var(--space-12); color: var(--ink-45); }

.legal h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  font-size: var(--fs-h3);
}
.legal h2:first-of-type { margin-top: 0; }

.legal p, .legal li { max-width: 68ch; }
.legal p { margin-bottom: var(--space-4); }

.legal ul { margin: 0 0 var(--space-4) var(--space-6); }
.legal li { margin-bottom: var(--space-2); }

.legal dl { margin: 0 0 var(--space-6); }
.legal dt { margin-top: var(--space-4); font-weight: 700; }
.legal dd { margin: var(--space-1) 0 0; color: var(--ink-70); max-width: 68ch; }

/* Anything that is still waiting on a person, not on code. Same job as the
   .slot chips on the main page: visible, ugly on purpose, impossible to ship
   by accident. */
.legal__todo {
  display: block;
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--navy);
  background: var(--navy-tint);
  font-size: var(--fs-small);
}
.legal__todo strong { display: block; margin-bottom: var(--space-1); }

/* ------------------------------------------------------------
   404
   ------------------------------------------------------------ */

.nf {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 76svh;
}
@supports not (min-height: 76svh) { .nf { min-height: 76vh; } }

.nf__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 12vw, 12rem);
  line-height: 0.86;
  letter-spacing: var(--ls-display);
  color: var(--ghost-ink);
}
.nf h1 { margin: var(--space-4) 0 var(--space-4); }
.nf__lead { margin-bottom: var(--space-8); }

/* The column is a flex container, so the button would stretch to the full
   container width and stop looking like a button. The rule below it is meant
   to span, so this is per-child rather than align-items on the parent. */
.nf > .btn { align-self: flex-start; }

.nf__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(11, 18, 77, 0.12);
}
.nf__links a { color: var(--navy); }

/* ------------------------------------------------------------
   Slim footer
   ------------------------------------------------------------ */

.legal-foot {
  padding: var(--space-8) var(--gutter);
  border-top: 1px solid rgba(11, 18, 77, 0.10);
}
.legal-foot__in {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
  font-size: var(--fs-small);
  color: var(--ink-45);
}
.legal-foot__in a { color: var(--navy); }