:root {
  --ink:#070b14;
  --night:#0b1220;
  --panel:rgba(13,21,35,.86);
  --line:rgba(239,234,207,.38);
  --line-soft:rgba(210,223,233,.12);
  --ivory:#f0ead0;
  --white:#f5f7f4;
  --silver:#a8b5c0;
  --muted:#748596;
  --blue:#5db5ef;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  color:var(--silver);
  background:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 78% 5%,rgba(62,92,142,.25),transparent 27%),
    radial-gradient(circle at 12% 72%,rgba(77,58,116,.14),transparent 28%),
    linear-gradient(150deg,#070b14 0%,#0a101c 50%,#060910 100%);
}
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:.42;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 8% 16%,rgba(220,232,242,.8) 0 1px,transparent 1.6px),
    radial-gradient(circle at 63% 28%,rgba(220,232,242,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 31% 77%,rgba(220,232,242,.48) 0 1px,transparent 1.5px),
    radial-gradient(circle at 89% 63%,rgba(220,232,242,.62) 0 1px,transparent 1.6px);
  background-size:310px 270px,390px 340px,360px 310px,440px 380px;
}

a { color:var(--ivory); text-underline-offset:.22em; }
a:hover { color:var(--white); }

body > nav,
.legal-header {
  position:fixed;
  inset:0 0 auto;
  z-index:20;
  width:100%;
  min-height:76px;
  border-bottom:1px solid var(--line-soft);
  background:rgba(7,11,20,.86);
  backdrop-filter:blur(18px);
}
.nav-inner,
.legal-header .inner {
  width:min(1280px,calc(100% - 64px));
  min-height:76px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.logo,
.legal-header .brand {
  display:flex;
  align-items:center;
  gap:.7rem;
  color:var(--white);
  font:500 1.28rem/1 var(--serif);
  letter-spacing:.025em;
  text-decoration:none;
}
.logo img,
.legal-header .brand img { width:38px; height:38px; object-fit:contain; }
.back-link,
.legal-header .back {
  padding:.62rem 1rem;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ivory);
  font-size:.76rem;
  letter-spacing:.04em;
  text-decoration:none;
}

.legal-main {
  position:relative;
  width:min(960px,calc(100% - 64px));
  margin:0 auto;
  padding:clamp(9rem,14vw,12rem) 0 7rem;
}
.legal-main::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:5rem;
  right:-24rem;
  width:min(70vw,720px);
  aspect-ratio:1;
  opacity:.1;
  background:url("assets/moon-phases/waning-gibbous.png?v=3") center/contain no-repeat;
  filter:drop-shadow(0 0 55px rgba(203,216,229,.12));
}
.page-header,
.static-legal > .eyebrow,
.static-legal > h1,
.static-legal > .updated { position:relative; z-index:1; }
.page-header { margin-bottom:3rem; text-align:center; }
.page-header::before,
.static-legal > .eyebrow {
  content:"Policy & legal";
  display:block;
  margin:0 0 .8rem;
  color:var(--ivory);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.page-header h1,
.static-legal > h1 {
  margin:0;
  color:var(--white);
  font:400 clamp(3.6rem,8vw,6.6rem)/.92 var(--serif);
  letter-spacing:-.045em;
}
.updated,
.page-header .updated {
  margin:1.2rem 0 0;
  color:var(--muted);
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.content,
.static-legal {
  border-block:1px solid var(--line);
  background:linear-gradient(135deg,rgba(17,29,48,.72),rgba(7,11,20,.5));
  box-shadow:inset 0 0 80px rgba(104,122,160,.045);
}
.content { padding:clamp(2rem,6vw,4.5rem); }
.static-legal { margin-top:clamp(6rem,10vw,8rem); padding:clamp(3rem,7vw,5.5rem); }
.static-legal::before { top:-3rem; }
.static-legal > .eyebrow,
.static-legal > h1,
.static-legal > .updated { text-align:center; }
.static-legal > .updated { margin-bottom:3rem; }
.static-legal > .eyebrow { margin-bottom:.8rem; }

.content > h1:first-child,
.content > h1:first-child + p { display:none; }
.content h2,
.static-legal h2 {
  margin:3.7rem 0 1rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line-soft);
  color:var(--white);
  font:400 clamp(2rem,4vw,3rem)/1.05 var(--serif);
  letter-spacing:-.025em;
}
.content h2:first-of-type { margin-top:0; padding-top:0; border-top:0; }
.content h3,
.static-legal h3 { margin:2.3rem 0 .8rem; color:var(--ivory); font:500 1.45rem/1.2 var(--serif); }
.content p,
.static-legal p { margin:0 0 1.25rem; }
.content ul,
.static-legal ul { margin:1rem 0 1.8rem; padding:0; list-style:none; }
.content li,
.static-legal li { position:relative; margin:.75rem 0; padding-left:1.4rem; }
.content li::before,
.static-legal li::before { content:"✦"; position:absolute; left:0; top:.08em; color:var(--blue); font-size:.62rem; }
.content strong,
.static-legal strong { color:var(--white); font-weight:500; }
.callout {
  margin:0 0 2.5rem;
  padding:1.5rem 1.7rem;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--silver);
  background:rgba(7,11,20,.52);
}
.callout p:last-child { margin-bottom:0; }
.state { padding:4rem 1rem; color:var(--muted); text-align:center; }
.state .moon { margin-bottom:1rem; font-size:2rem; }

body > footer {
  width:100%;
  padding:3rem 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  border-top:1px solid var(--line-soft);
  color:var(--muted);
  background:transparent;
  text-align:center;
}
.legal-footer-brand { display:flex; align-items:center; gap:.7rem; color:var(--white); font:500 1.28rem/1 var(--serif); }
.legal-footer-brand img { width:38px; height:38px; object-fit:contain; }
body > footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; }
body > footer nav {
  position:static;
  inset:auto;
  z-index:auto;
  width:auto;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  backdrop-filter:none;
}
body > footer a,
body > footer small { color:var(--muted); font-size:.68rem; text-decoration:none; }
body > footer a:hover { color:var(--ivory); }
body > footer p { margin:0; }

@media (max-width:680px) {
  .nav-inner,
  .legal-header .inner,
  .legal-main { width:calc(100% - 32px); }
  .back-link,
  .legal-header .back { padding:.52rem .72rem; font-size:.68rem; }
  .legal-main { padding-top:8rem; padding-bottom:4rem; }
  .content,
  .static-legal { padding:2rem 1.35rem; }
  .static-legal { margin-top:6rem; }
  .page-header h1,
  .static-legal > h1 { font-size:3.7rem; }
}