/* ==========================================================================
   Legal page styles (/privacy, /terms). Every selector is scoped under
   .page-legal. Shared chrome/components live in assets/css/site.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero (navy page head)
   -------------------------------------------------------------------------- */

.page-legal .legal-hero { padding: clamp(30px, 3.2vw, 50px) 0; }

.page-legal .legal-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(var(--paper-rgb), 0.28);
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.page-legal .legal-hero h1 {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 15ch;
}

.page-legal .legal-hero-lead {
  margin: 16px 0 0;
  max-width: 640px;
  font: 400 clamp(16.5px, 1.2vw, 19px)/1.55 var(--font-sans);
  color: rgba(var(--paper-rgb), 0.84);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Body layout: sticky tab nav + document column
   -------------------------------------------------------------------------- */

.page-legal .legal-body {
  padding: clamp(30px, 3.5vw, 48px) 0 clamp(52px, 6vw, 96px);
}

.page-legal .legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* --------------------------------------------------------------------------
   Tab nav (active tab filled ink, inactive quiet outline)
   -------------------------------------------------------------------------- */

.page-legal .legal-tabs {
  display: grid;
  gap: 10px;
  align-content: start;
  position: sticky;
  top: 96px;
  max-width: 300px;
}

.page-legal .legal-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font: 500 14.5px/1 var(--font-sans);
  min-height: 48px;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.page-legal .legal-tab:hover { background: var(--band); color: var(--ink); }

.page-legal .legal-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.page-legal .legal-tab.is-active:hover { background: var(--ink); color: var(--paper); }

.page-legal .legal-tab-no {
  font-family: var(--font-mono);
  opacity: 0.6;
}

.page-legal .legal-tabs-note {
  margin: 8px 0 0;
  font: 400 13px/1.65 var(--font-mono);
  color: var(--ink3);
}

/* --------------------------------------------------------------------------
   Document prose overrides (legal copy runs smaller and tighter than the
   article prose defaults in site.css)
   -------------------------------------------------------------------------- */

.page-legal .prose h2 {
  margin: clamp(28px, 3vw, 40px) 0 0;
  font: 500 clamp(21px, 2.1vw, 27px)/1.18 var(--font-serif);
  letter-spacing: normal;
}
.page-legal .prose > h2:first-child { margin-top: 0; }

.page-legal .prose p {
  margin: 16px 0 0;
  font: 400 16.5px/1.7 var(--font-sans);
}
.page-legal .prose h2 + p,
.page-legal .prose h3 + p { margin-top: 12px; }

.page-legal .prose ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.page-legal .prose ul li {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  font: 400 16px/1.7 var(--font-sans);
  color: var(--ink2);
}
.page-legal .prose ul li:last-child { border-bottom: none; }

.page-legal .prose a {
  color: var(--dark);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.page-legal .prose a:hover { color: var(--accent-text); }