/* Legal pages: privacy policy, terms of use.

   These carry supplied legal text verbatim, so the job here is legibility
   over personality. One narrow measure, a numbered spine down the left so a
   clause can be pointed at in an email, and nothing decorative competing
   with the words.

   Loaded after site.css, which supplies the tokens and the nav and footer. */

.legal-head{padding:88px 0 34px}
.legal-head h1{max-width:16ch}
.legal-head .lede{margin-top:18px;max-width:60ch}

.legal-meta{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:26px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ember-text);
}

/* the body measure. 66ch keeps clause text readable at 17px */
.legal-body{padding:12px 0 96px}
.legal-body .wrap{max-width:820px}

.legal-toc{
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  padding:24px 0;margin-bottom:44px;
}
.legal-toc h2{
  font-size:12px;font-family:'JetBrains Mono',monospace;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ember-text);
  margin-bottom:14px;
}
.legal-toc ol{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px 26px;
  counter-reset:toc;
}
.legal-toc li{counter-increment:toc}
.legal-toc a{
  color:var(--carbon-ink);text-decoration:none;font-size:15.5px;
  display:flex;gap:9px;align-items:baseline;
}
.legal-toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;
  color:var(--ember-text);flex:none;
}
.legal-toc a:hover{color:var(--ember-text);text-decoration:underline}

.clause{
  display:grid;grid-template-columns:52px 1fr;gap:0 20px;
  padding:34px 0;border-top:1px solid var(--line-light);
}
.clause:first-of-type{border-top:none;padding-top:0}
.clause__n{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;
  line-height:1;color:var(--ember);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;padding-top:3px;
}
.clause__b h2{
  font-size:1.34rem;line-height:1.22;margin-bottom:16px;
  letter-spacing:-.015em;scroll-margin-top:24px;
}
.clause__b > * + *{margin-top:15px}
.clause__b p{max-width:66ch}
.clause__b ul,.clause__b ol{margin-left:0;padding-left:0;list-style:none;max-width:66ch}
.clause__b li{padding-left:22px;position:relative}
.clause__b li + li{margin-top:11px}
.clause__b li::before{
  content:"";position:absolute;left:0;top:11px;width:9px;height:1px;
  background:var(--ember);
}
.clause__b ol{counter-reset:sub}
.clause__b ol li{counter-increment:sub;padding-left:30px}
.clause__b ol li::before{
  content:"(" counter(sub,lower-alpha) ")";
  width:auto;height:auto;background:none;top:0;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;
  color:var(--ember-text);
}
.clause__b strong{font-weight:600}
.clause__b a{color:var(--ember-text)}
.clause__b .caps{
  font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;
  letter-spacing:.03em;line-height:1.55;
}

.legal-foot{
  margin-top:52px;padding-top:26px;border-top:1px solid var(--line-light);
  display:flex;flex-wrap:wrap;gap:14px 30px;align-items:baseline;
}
.legal-foot p{font-size:15px;color:rgba(26,26,26,.66);max-width:56ch}
.legal-foot a{color:var(--ember-text)}

@media (max-width:620px){
  .clause{grid-template-columns:1fr;gap:8px}
  .clause__n{font-size:22px}
  .legal-head{padding:64px 0 26px}
}

/* A short legal page with a single section, so no clause spine and no
   contents list. The refund policy is its own document and runs to eight
   paragraphs; numbering one section would be decoration, not information. */
.legal-prose{max-width:66ch}
.legal-prose > * + *{margin-top:15px}
.legal-prose p{max-width:66ch}
.legal-prose .standfirst{
  font-size:18.5px;line-height:1.55;color:rgba(26,26,26,.72);
  padding-bottom:22px;border-bottom:1px solid var(--line-light);
}
.legal-prose a{color:var(--ember-text)}