/* Legal pages — minimal, readable, same dark cosmic palette */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400&family=Inter:wght@300;400;500&display=swap');

:root {
  --bg: #0e0a07;
  --bg-2: #1a120c;
  --gold: #c8a26b;
  --ink: #f4ece3;
  --ink-mid: rgba(244, 236, 227, 0.78);
  --ink-dim: rgba(244, 236, 227, 0.55);
  --ink-faint: rgba(244, 236, 227, 0.32);
  --line: rgba(244, 236, 227, 0.10);
  --line-strong: rgba(244, 236, 227, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background:
    radial-gradient(ellipse 80% 50% at 12% 88%, rgba(160, 60, 22, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 92% 10%, rgba(78, 36, 110, 0.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Nav */
.legal-nav {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 880px; margin: 0 auto;
  padding: 28px 36px;
  border-bottom: 1px solid var(--line);
}
.legal-nav .mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.legal-nav .mark .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 8px rgba(200, 162, 107, 0.6);
}
.legal-nav .back {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint); text-decoration: none;
  transition: color 0.3s ease;
}
.legal-nav .back:hover { color: var(--gold); }

/* Main */
main.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 88px 36px 120px;
}

.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 36px;
}
.kicker .bar { width: 28px; height: 1px; background: var(--line-strong); }

main.legal h1 {
  font-family: "Fraunces", serif;
  font-weight: 300;
  font-size: clamp(48px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
  color: var(--ink);
}
main.legal h1 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 300;
}

main.legal .lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-mid);
  font-weight: 300;
  margin: 0 0 18px;
  max-width: 60ch;
}
main.legal .lede em {
  font-style: italic;
  color: var(--ink);
}

main.legal .meta {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 64px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

main.legal section {
  margin: 0 0 56px;
}

main.legal h2 {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 18px;
  color: var(--ink);
}

main.legal h3 {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 28px 0 10px;
  color: var(--gold);
}

main.legal p,
main.legal li {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-mid);
  margin: 0 0 14px;
  font-weight: 300;
  text-wrap: pretty;
}

main.legal p em,
main.legal li em {
  font-style: italic;
  color: var(--ink);
}

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

main.legal ul {
  padding-left: 22px;
  margin: 0 0 18px;
}

main.legal li {
  margin-bottom: 8px;
}

main.legal a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 162, 107, 0.28);
  transition: border-color 0.3s ease, color 0.3s ease;
}
main.legal a:hover {
  border-bottom-color: var(--gold);
}

/* Footer */
.legal-foot {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 36px 48px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint);
}
.legal-foot a {
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.3s ease;
}
.legal-foot a:hover { color: var(--gold); }
.legal-foot .sep { color: var(--line-strong); }
.legal-foot .copy { margin-left: auto; }

@media (max-width: 640px) {
  .legal-nav { padding: 20px 24px; }
  main.legal { padding: 64px 24px 88px; }
  main.legal h1 { font-size: clamp(40px, 9vw, 60px); }
  main.legal .lede { font-size: 17px; }
  .legal-foot { padding: 24px; }
  .legal-foot .copy { margin-left: 0; flex-basis: 100%; }
}