/* ==========================================================================
   Utility pages — 404 and the legal/policy template.
   Theme: 404.php, page-legal.php
   ========================================================================== */

/* --- 404 ----------------------------------------------------------------- */
.notfound {
  padding-block: var(--s-16) var(--s-12);
  text-align: center;
  background:
    radial-gradient(70% 120% at 50% 0%, color-mix(in srgb, var(--brand-500) 9%, transparent), transparent 65%),
    var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.notfound__code {
  font-size: clamp(4rem, 16vw, 8rem); line-height: .9;
  font-weight: var(--fw-bold); letter-spacing: -.05em;
  color: transparent;
  background: linear-gradient(160deg, var(--brand-500), var(--sec-overseas));
  -webkit-background-clip: text; background-clip: text;
}
.notfound h1 { margin-top: var(--s-5); font-size: var(--fs-2xl); text-wrap: balance; }
.notfound p {
  margin: var(--s-3) auto 0; max-width: 48ch;
  color: var(--text-muted); font-size: var(--fs-md);
}
.notfound__search { max-width: 440px; margin: var(--s-6) auto 0; }
.notfound__actions {
  display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap;
  margin-top: var(--s-5);
}

/* --- Legal / policy template --------------------------------------------- */
.legal { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 900px) { .legal { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-10); } }

.legal-nav { display: grid; gap: var(--s-1); }
@media (min-width: 900px) { .legal-nav { position: sticky; top: calc(var(--header-h) + var(--s-4)); } }
.legal-nav__head {
  font-size: 11px; font-weight: var(--fw-semi); letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
  padding: var(--s-2) var(--s-3);
}
.legal-nav a {
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--text-muted);
  border-inline-start: 2px solid transparent;
}
.legal-nav a:hover { background: var(--surface-alt); color: var(--text); }
.legal-nav a[aria-current="page"] {
  color: var(--brand-500); font-weight: var(--fw-medium);
  background: var(--brand-100); border-inline-start-color: var(--brand-500);
}

.legal-doc { max-width: 68ch; }
.legal-doc__meta {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  padding-bottom: var(--s-4); margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.legal-doc h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-3); }
.legal-doc__lede { font-size: var(--fs-md); color: var(--text-muted); }
.legal-doc h2 {
  font-size: var(--fs-lg); margin-top: var(--s-10); margin-bottom: var(--s-3);
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}
.legal-doc h3 { font-size: var(--fs-md); margin-top: var(--s-6); margin-bottom: var(--s-2); }
.legal-doc p { margin-bottom: var(--s-4); }
.legal-doc ul { margin: 0 0 var(--s-4); padding-inline-start: var(--s-5); display: grid; gap: var(--s-2); }
.legal-doc a { color: var(--brand-500); text-decoration: underline; }
.legal-doc strong { font-weight: var(--fw-semi); }

/* --- Contact page --------------------------------------------------------- */
.contact-notice {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--danger) 36%, transparent);
  background: var(--danger-soft); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--text); line-height: var(--lh-base);
  margin-bottom: var(--s-6);
}
.contact-notice svg { width: 16px; height: 16px; color: var(--danger); flex: none; margin-top: 1px; }
.contact-notice--ok {
  border-color: color-mix(in srgb, var(--ok) 36%, transparent);
  background: var(--ok-soft);
}
.contact-notice--ok svg { color: var(--ok); }

.contact-form { display: grid; gap: var(--s-5); max-width: 52ch; }
/* Off-screen, not display:none — a screen reader still finds it, which is
   part of what makes it convincing to an automated submitter. */
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.callout {
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  border-inline-start: 3px solid var(--brand-500);
  background: var(--bg-subtle);
  font-size: var(--fs-sm); margin-bottom: var(--s-6);
}
.callout b { display: block; margin-bottom: var(--s-1); }