/* ============================================================
   Songclimber — shared styles for legal / policy pages
   Reading-focused layout on the warm-paper system.
   ============================================================ */

:root{
  --maxw: 1120px;
  --read: 720px;
  --dark: var(--brand-deep);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }

/* paper grain texture, painted behind content */
.grain{
  background-image:url('assets/paper-grain.svg');
  background-size:360px 360px;
  background-repeat:repeat;
}

.wrap{
  position:relative; z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:clamp(20px,5vw,40px);
  padding-right:clamp(20px,5vw,40px);
}
.read{ max-width:var(--read); margin-inline:auto; }

/* ── topbar ───────────────────────────────────── */
.topbar{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding-top:clamp(18px,2.6vw,28px);
  padding-bottom:clamp(18px,2.6vw,28px);
}
.topbar .brand img{ height:30px; width:auto; }
.topbar .back{
  font-size:.9rem; font-weight:500;
  color:var(--fg-muted); text-decoration:none;
  display:inline-flex; align-items:center; gap:7px;
  transition:color var(--dur-fast) var(--ease-soft);
}
.topbar .back:hover{ color:var(--accent); }
.topbar .back svg{ width:16px; height:16px; }

/* ── page header ──────────────────────────────── */
.legal-head{
  padding-top:clamp(40px,6vw,72px);
  padding-bottom:clamp(28px,4vw,44px);
  border-bottom:1px solid var(--line);
}
.kick{
  font-family:var(--font-sans);
  font-size:var(--t-kicker);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 clamp(16px,2.4vw,22px);
}
.kick::before{
  content:""; width:28px; height:2px; background:var(--accent);
  display:inline-block;
}
.legal-title{
  font-family:var(--font-serif);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.04;
  color:var(--brand);
  margin:0;
  font-size:clamp(2.2rem,5.6vw,3.4rem);
  text-wrap:balance;
}
.legal-meta{
  margin:clamp(16px,2.4vw,22px) 0 0;
  font-size:.9rem;
  color:var(--fg-muted);
}
.legal-meta b{ color:var(--fg); font-weight:500; }

/* template / advisory note */
.advisory{
  margin:clamp(24px,3.4vw,32px) 0 0;
  background:var(--gold-soft, rgba(200,169,110,.14));
  border:1px solid var(--gold);
  border-radius:var(--r-lg);
  padding:16px 20px;
  font-size:.88rem;
  line-height:1.5;
  color:var(--fg);
}
.advisory b{ color:var(--gold-deep); }

/* ── body copy ────────────────────────────────── */
.legal-body{
  padding-top:clamp(36px,5vw,56px);
  padding-bottom:clamp(64px,9vw,104px);
}
.legal-body section{ scroll-margin-top:90px; }
.legal-body h2{
  font-family:var(--font-sans);
  font-size:clamp(1.25rem,2.4vw,1.55rem);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--brand);
  margin:clamp(40px,5vw,56px) 0 14px;
  padding-top:clamp(40px,5vw,56px);
  border-top:1px solid var(--line);
}
.legal-body section:first-child h2{
  margin-top:0; padding-top:0; border-top:0;
}
.legal-body h2 .num{
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  margin-right:.5em;
}
.legal-body h3{
  font-family:var(--font-sans);
  font-size:1.02rem;
  font-weight:700;
  color:var(--fg);
  margin:28px 0 8px;
}
.legal-body p,
.legal-body li{
  font-size:1.02rem;
  line-height:1.65;
  color:var(--fg);
  text-wrap:pretty;
}
.legal-body p{ margin:0 0 16px; }
.legal-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.legal-body a:hover{ color:var(--accent-hi); }
.legal-body strong{ font-weight:700; }
.legal-body ul,
.legal-body ol{ margin:0 0 16px; padding-left:24px; }
.legal-body li{ margin:0 0 9px; }
.legal-body li::marker{ color:var(--accent); }

/* fill-in placeholder token, e.g. [Company address] */
.fill{
  background:var(--surface-sunk);
  border-bottom:1px dashed var(--line-strong);
  border-radius:3px;
  padding:0 5px;
  color:var(--fg-muted);
  font-style:italic;
  font-weight:500;
  white-space:nowrap;
}

/* mini table of contents */
.toc{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:22px 24px;
  margin-bottom:clamp(36px,5vw,52px);
}
.toc h4{
  font-family:var(--font-sans);
  font-size:var(--t-kicker);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg-muted);
  margin:0 0 14px;
}
.toc ol{
  margin:0; padding:0; list-style:none;
  counter-reset:toc;
  columns:2; column-gap:32px;
}
.toc li{
  counter-increment:toc;
  margin:0 0 9px; padding:0;
  break-inside:avoid;
}
.toc a{
  font-size:.92rem; line-height:1.4;
  color:var(--fg); text-decoration:none;
  display:flex; gap:9px;
  transition:color var(--dur-fast) var(--ease-soft);
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:.82rem;
}
.toc a:hover{ color:var(--accent); }

@media (max-width:560px){
  .toc ol{ columns:1; }
}

/* contact callout at end of body */
.legal-contact{
  margin-top:clamp(44px,6vw,64px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm);
  padding:clamp(24px,3.4vw,32px);
}
.legal-contact h3{ margin-top:0; }
.legal-contact p:last-child{ margin-bottom:0; }

/* ── footer (mirrors index.html) ──────────────── */
.foot{
  background:var(--brand-shadow);
  color:var(--fg-on-brand-muted);
  padding-block:clamp(48px,6vw,72px);
}
.foot .wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.foot img{ height:30px; opacity:.95; }
.foot .legal-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; font-size:.85rem; }
.foot .legal-nav a{ color:var(--fg-on-brand-muted); text-decoration:none; }
.foot .legal-nav a:hover{ color:var(--gold); }
.foot .legal-nav a[aria-current="page"]{ color:var(--gold); }
.foot .cc{ font-size:.8rem; color:rgba(168,183,160,.7); }
.foot .sep{ color:rgba(168,183,160,.4); }