/* Legal pages (terms.html, privacy.html): a readable text column beside a
   contents slate that sticks on desktop and sits on top on mobile.
   Tokens and components come from piw.css. */

.legal{padding-block:calc(var(--header-h) + var(--s8)) var(--section-y)}
.legal-head{display:grid;justify-items:start;gap:var(--s4);margin-bottom:var(--s8)}
.legal-head h1{font-size:clamp(36px,4.4vw + 14px,80px)}
.legal-head .lede{max-width:62ch}

.legal-grid{display:grid;gap:var(--s7);align-items:start}
@media (min-width:1024px){
  .legal-grid{grid-template-columns:minmax(230px,290px) minmax(0,70ch);gap:clamp(48px,6vw,104px)}
  .legal-toc{position:sticky;top:calc(var(--header-h) + var(--s5))}
}

/* contents slate: numbered like a shot list */
.legal-toc{padding:var(--s5);--tick:14px}
.legal-toc .micro{margin-bottom:var(--s2);color:var(--gold-dim)}
.legal-toc ol{list-style:none;counter-reset:toc;display:grid;column-gap:var(--s5)}
.legal-toc li{counter-increment:toc;border-top:1px solid var(--line)}
.legal-toc a{display:grid;grid-template-columns:2.4em minmax(0,1fr);align-items:baseline;min-height:44px;padding-block:12px;
  color:var(--muted);font-size:14px;line-height:1.35;text-decoration:none;transition:color var(--t-fast)}
.legal-toc a::before{content:counter(toc,decimal-leading-zero);content:counter(toc,decimal-leading-zero) / "";
  font-size:var(--fs-micro);font-weight:600;font-stretch:75%;letter-spacing:.16em;color:var(--gold-dim);font-variant-numeric:tabular-nums}
.legal-toc a:hover{color:var(--gold-hi)}
@media (min-width:560px) and (max-width:1023px){.legal-toc ol{grid-template-columns:1fr 1fr}}
@media (min-width:1024px) and (pointer:fine){.legal-toc a{min-height:0;padding-block:7px}}

/* text column */
.legal-body{max-width:70ch;counter-reset:sec;overflow-wrap:break-word}
.legal-body section{counter-increment:sec;margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + var(--s5))}
.legal-body section:first-child{margin-top:0}
.legal-body section>*+*{margin-top:var(--s4)}
.legal-body h2{font-size:clamp(20px,1.2vw + 14px,28px);font-stretch:118%;line-height:1.15;letter-spacing:.02em;transition:color var(--t)}
.legal-body h2::before{content:counter(sec,decimal-leading-zero);content:counter(sec,decimal-leading-zero) / "";display:block;margin-bottom:var(--s2);
  font-size:var(--fs-micro);font-weight:600;font-stretch:75%;letter-spacing:.16em;color:var(--gold-dim);font-variant-numeric:tabular-nums}
.legal-body section:target>h2{color:var(--gold-hi)}
.legal-body h3{margin-top:var(--s6);font-size:clamp(16px,.4vw + 14.5px,19px);font-stretch:100%}
.legal-body ul{display:grid;gap:var(--s2);padding-left:1.25em}
.legal-body li{padding-left:.3em}
.legal-body li::marker{color:var(--gold-dim)}

/* client details still to fill in: <span class="ph">[...]</span> */
.ph{color:var(--gold-dim);text-decoration:underline dashed currentColor 1px;text-underline-offset:.22em}

@media (max-width:760px){
  .legal{padding-top:calc(var(--header-h) + var(--s7))}
  .legal-head{margin-bottom:var(--s7)}
}

/* print: black text on white paper, no site chrome */
@media print{
  .skip-link,.site-header,.bg,.grain,.tapes,.site-footer,.legal-toc{display:none!important}
  html,body{background:#fff;color:#000}
  .legal{padding:0}
  .legal *{color:#000!important}
}