/* =====================================================================
   VESPERS — Legal documents (Privacy Policy / Terms of Use)
   A calm, readable "document" layout. Light parchment hero (body.hdr-solid),
   a sticky table of contents on desktop, and a comfortable reading column.
   Inherits :root tokens from main.css.
   ===================================================================== */

.legal{background:var(--bg, var(--parchment-50));}

/* ── Hero ─────────────────────────────────────────────────────────── */
.legal-hero{position:relative; overflow:hidden; padding:clamp(96px, 12vw, 150px) 0 clamp(36px, 6vw, 60px);
  background:linear-gradient(180deg, var(--parchment-100) 0%, var(--parchment-50) 100%);
  border-bottom:1px solid var(--border);}
.legal-hero-glow{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 90% at 50% -10%, rgba(198,164,92,.16), transparent 70%);}
.legal-hero-inner{position:relative; max-width:780px; margin:0 auto; text-align:center; padding:0 24px;}
.legal-hero h1{font:600 clamp(2.1rem, 5vw, 3.1rem)/1.1 var(--font-display); color:var(--fg1); margin:.35em 0 .3em; letter-spacing:.3px;}
.legal-lead{font:400 clamp(1.02rem, 2.2vw, 1.18rem)/1.65 var(--font-body); color:var(--fg2); max-width:60ch; margin:0 auto 18px;}
.legal-meta{display:inline-flex; align-items:center; gap:7px; font:500 .85rem/1 var(--font-body);
  color:var(--accent-strong); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:8px 15px;}
.legal-meta vm-icon{color:var(--accent-strong);}

/* ── Shell: TOC + body ────────────────────────────────────────────── */
.legal-shell{display:grid; grid-template-columns:1fr; gap:34px;
  padding:clamp(38px, 6vw, 64px) 24px clamp(60px, 9vw, 110px);}
@media (min-width:900px){
  .legal-shell{grid-template-columns:240px minmax(0,1fr); gap:56px; align-items:start;}
}

.legal-toc{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px 22px;}
@media (min-width:900px){ .legal-toc{position:sticky; top:96px;} }
.legal-toc-h{font:600 .82rem/1 var(--font-body); text-transform:uppercase; letter-spacing:.12em; color:var(--accent-strong); margin:0 0 12px;}
.legal-toc ol{list-style:none; margin:0; padding:0; counter-reset:toc; display:flex; flex-direction:column; gap:2px;}
.legal-toc li{counter-increment:toc;}
.legal-toc a{display:block; padding:6px 8px; border-radius:8px; font:400 .92rem/1.4 var(--font-body);
  color:var(--fg2); text-decoration:none; transition:background-color .18s, color .18s;}
.legal-toc a::before{content:counter(toc, decimal-leading-zero) "  "; color:var(--gilt-500); font-variant-numeric:tabular-nums; font-size:.82em;}
.legal-toc a:hover, .legal-toc a:focus-visible{background:var(--parchment-100); color:var(--fg1);}
.legal-toc a:focus-visible{outline:2px solid var(--gilt-700); outline-offset:2px;}

.legal-body{max-width:72ch;}
.legal-intro{font:400 1.12rem/1.7 var(--font-body); color:var(--fg1); margin:0 0 14px; padding-bottom:22px; border-bottom:1px solid var(--border);}
.legal-body section{padding-top:14px;}
.legal-body section + section{margin-top:8px;}
.legal-body h2{font:600 clamp(1.32rem, 2.6vw, 1.62rem)/1.25 var(--font-display); color:var(--fg1);
  margin:30px 0 12px; scroll-margin-top:96px;}
.legal-body h3{font:600 1.04rem/1.4 var(--font-body); color:var(--fg1); margin:20px 0 8px;}
.legal-body p{font:400 1rem/1.72 var(--font-body); color:var(--fg2); margin:0 0 14px;}
.legal-body ul{margin:0 0 16px; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px;}
.legal-body li{position:relative; padding-left:24px; font:400 1rem/1.65 var(--font-body); color:var(--fg2);}
.legal-body li::before{content:""; position:absolute; left:4px; top:.66em; width:7px; height:7px; transform:rotate(45deg);
  background:var(--gilt-500); border-radius:1px;}
.legal-body a{color:var(--accent-strong); text-underline-offset:2px;}
.legal-body a:hover{color:var(--gilt-700);}

.legal-foot{margin-top:34px; padding-top:22px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;}
.legal-foot p{margin:0; font:400 .96rem/1.6 var(--font-body); color:var(--fg2);}