/* ==========================================================================
   Legal pages - privacy and terms.
   Same world as the site: near-black ground, one grotesque, violet accent.
   Reading measure is the whole job here, so the type is larger and the
   column is narrower than anywhere else on the site.
   ========================================================================== */

.legal{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  padding-block:clamp(3rem,7vw,6rem) clamp(3rem,7vw,6rem);
  display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start;
}
@media(min-width:960px){.legal{grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem)}}

.legal-head{position:sticky;top:calc(var(--nav-h,64px) + 2rem);display:flex;flex-direction:column;gap:1.1rem}
@media(max-width:959px){.legal-head{position:static}}
.legal-head h1{
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:var(--t-big);line-height:.9;letter-spacing:-.035em;margin:0;color:var(--ink);
}
.legal-meta{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0}
.back{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  font-size:var(--t-sm);color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line-2);padding-bottom:2px;
}
.back:hover{color:var(--violet);border-color:var(--violet)}
.back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.legal-body{max-width:68ch}
.legal-body > p:first-of-type{
  font-size:var(--t-lede);line-height:1.45;color:var(--ink);margin:0 0 2.5rem;
}

.legal-body section{padding-top:2rem;margin-top:2rem;border-top:1px solid var(--line)}
.legal-body section:first-of-type{border-top:0;margin-top:0;padding-top:0}
.legal-body h2{
  font-family:var(--sans);font-size:1.15rem;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 .9rem;text-transform:none;line-height:1.25;
}
.legal-body h2::after{content:none}
.legal-body p{margin:0 0 1rem;color:var(--ink-2);line-height:1.7;font-size:.97rem}
.legal-body p:last-child{margin-bottom:0}
.legal-body strong{color:var(--ink);font-weight:600}
.legal-body a{color:var(--violet)}

.legal-body ul{margin:0 0 1rem;padding:0;list-style:none;display:grid;gap:.45rem}
.legal-body li{
  color:var(--ink-2);line-height:1.6;font-size:.97rem;
  padding-left:1.1rem;position:relative;
}
.legal-body li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:1px;background:var(--violet);
}

.legal-note{
  border-left:2px solid var(--violet);padding:.9rem 0 .9rem 1.1rem;
  margin:1.6rem 0 0;
}
.legal-note p{margin:0;color:var(--violet-lt);font-size:var(--t-sm)}

.legal-contact{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:.4rem}
.legal-contact a{font-size:var(--t-sm);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.legal-contact a:hover{color:var(--violet);border-color:var(--violet)}

/* Items the owner must supply before launch. Deliberately loud: a legal page
   that quietly ships a blank is worse than one that shows the gap. */
.todo{
  color:var(--violet-lt);font-weight:600;font-style:normal;
  border-bottom:1px dashed var(--violet);
}
.legal-meta b.todo{font-weight:600}