/* ═══════════════════════════════════════════════════════════════
   EHE 2027 — LEGAL PAGES (template-legal.php)
   Rides on home.css for tokens, nav, footer and type voices; this file only
   adds the long-form layout. Prose is set in the .body register (mixed case,
   400) at reading size rather than the homepage's display scale.
   ═══════════════════════════════════════════════════════════════ */

/* The hero light, but scrolled away with the header instead of fixed: a
   fixed light would sit behind the prose the whole way down and lower its
   contrast. */
.ehe-legal .glowlayer{position:absolute; height:100vh}
.ehe-legal .glow--hero{position:absolute; --glow:.5}

.legal-page{position:relative; z-index:1}

.legal-head{
  padding-top:clamp(140px, 22vh, 240px);
  padding-bottom:clamp(8px, 1.6vw, 20px);
}
.legal-head .kicker{color:var(--ink-70)}
.legal-head__title{max-width:14ch; margin-top:var(--gap)}
.legal-head .rule{margin-top:clamp(28px, 3.2vw, 48px)}

.legal-body{
  display:grid; grid-template-columns:minmax(180px, 1fr) minmax(0, 2.6fr);
  gap:clamp(28px, 5vw, 96px);
  padding-top:clamp(28px, 3vw, 44px);
  padding-bottom:var(--sect);
}

.legal-aside{position:sticky; top:96px; align-self:start}
.legal-aside .micro{color:var(--ink-45); margin-bottom:6px}
.legal-aside__val{
  font-size:var(--t-sub); font-weight:400; color:var(--ink);
  margin-bottom:24px; overflow-wrap:anywhere;
}
.legal-aside__link{border-bottom:1px solid rgba(0,180,190,.5); transition:border-color .3s var(--ease)}
.legal-aside__link:hover{border-color:var(--accent)}
.legal-aside__back{display:inline-block; margin-top:8px; color:var(--accent)}

/* ── prose: whatever the editor produces ── */
.legal-prose{
  max-width:68ch;
  font-size:clamp(1rem, 1.08vw, 1.125rem); line-height:1.72;
  font-weight:400; color:var(--ink-70);
}
.legal-prose > * + *{margin-top:1.2em}
.legal-prose > p:first-child{
  font-size:clamp(1.1rem, 1.35vw, 1.35rem); line-height:1.55; color:var(--ink);
}
.legal-prose h2,.legal-prose h3,.legal-prose h4{
  color:var(--ink); text-transform:uppercase; font-weight:500; line-height:1.15;
}
.legal-prose h2{font-size:var(--t-heading-sm); margin-top:2.4em}
.legal-prose h3,.legal-prose h4{font-size:var(--t-sub); margin-top:2em; color:var(--accent)}
.legal-prose strong,.legal-prose b{color:var(--ink); font-weight:500}
.legal-prose a{
  color:var(--ink); border-bottom:1px solid rgba(0,180,190,.5);
  transition:border-color .3s var(--ease);
}
.legal-prose a:hover{border-color:var(--accent)}
.legal-prose ul,.legal-prose ol{padding-left:1.3em}
.legal-prose ul{list-style:none}
.legal-prose ul > li{position:relative}
.legal-prose ul > li::before{
  content:""; position:absolute; left:-1.1em; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.legal-prose ol{list-style:decimal}
.legal-prose ol > li::marker{color:var(--accent)}
.legal-prose li + li{margin-top:.5em}
.legal-prose blockquote{
  margin-left:0; padding-left:1.2em; border-left:1px solid var(--accent);
  color:var(--ink);
}
.legal-prose hr{border:0; border-top:1px dashed var(--border); margin:2.4em 0}

@media (max-width:860px){
  .legal-body{grid-template-columns:1fr}
  .legal-aside{position:static; display:grid; grid-template-columns:auto 1fr;
    gap:4px 16px; align-items:baseline}
  .legal-aside .micro{margin:0}
  .legal-aside__val{margin:0 0 8px}
  .legal-aside__back{grid-column:1 / -1; justify-self:start}
}