/* ---------------------------------------------------------------------------
   legal.css: the privacy, terms and 404 pages.

   Three pages of prose and one page of signposts, so this is mostly a
   measure and a rhythm: the reading column is held near 68 characters and
   the type scale comes from global.css rather than being restated here.
   The 404 borrows the same header and adds its own link list.
   --------------------------------------------------------------------- */

.ap-legal{
  padding:calc(var(--header-h, 84px) + 96px) 0 140px;
}

/* ---------- header ---------- */

.ap-legal-head{
  max-width:34ch;
  margin-bottom:72px;
}
.ap-legal-head h1{
  font-size:clamp(2.4rem, 5.2vw, 4rem);
  line-height:1.04;
  margin:18px 0 22px;
}
.ap-legal-head .ap-lead{
  max-width:52ch;
}
.ap-legal-date{
  margin-top:26px;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.ap-legal-date time{
  color:var(--paper);
  text-transform:none;
  letter-spacing:0;
}

/* ---------- the document ----------
   Numbered by the counter rather than by hand, so reordering a section in
   includes/data/legal.php cannot leave the numbers lying. */

.ap-legal-doc{
  counter-reset:apLegal;
  max-width:68ch;
  border-top:1px solid var(--line);
}
.ap-legal-sec{
  counter-increment:apLegal;
  padding:42px 0;
  border-bottom:1px solid var(--line);
}
.ap-legal-sec h2{
  display:flex;
  gap:14px;
  font-size:1.18rem;
  line-height:1.3;
  margin:0 0 18px;
}
.ap-legal-sec h2::before{
  content:counter(apLegal, decimal-leading-zero);
  flex:0 0 auto;
  font-size:.78rem;
  letter-spacing:.1em;
  padding-top:.35em;
  color:var(--orange);
  font-variant-numeric:tabular-nums;
}
.ap-legal-sec p,
.ap-legal-sec li{
  color:var(--muted);
  line-height:1.72;
  margin:0 0 14px;
}
.ap-legal-sec p:last-child,
.ap-legal-sec li:last-child{ margin-bottom:0 }
.ap-legal-sec ul{
  margin:0;
  padding-left:0;
  list-style:none;
}
.ap-legal-sec li{
  position:relative;
  padding-left:22px;
}
.ap-legal-sec li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.72em;
  width:6px; height:1px;
  background:var(--orange);
}
.ap-legal-sec a{
  color:var(--paper);
  text-decoration:underline;
  text-decoration-color:var(--orange-supersoft);
  text-underline-offset:3px;
}

.ap-legal-foot{
  margin:56px 0 0;
}

/* ---------- 404 ---------- */

/* The 404 headline breaks at its own <br>, so it needs room for the
   first line rather than the prose pages' 34ch measure. */
.ap-nf .ap-legal-head{ max-width:46ch; margin-bottom:56px }

.ap-nf-links{
  display:grid;
  gap:1px;
  max-width:68ch;
  background:var(--line);
  border:1px solid var(--line);
}
.ap-nf-link{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:6px 18px;
  padding:24px 26px;
  background:var(--ink);
  text-decoration:none;
  transition:background .25s ease;
}
.ap-nf-link:hover,
.ap-nf-link:focus-visible{ background:rgba(238,240,246,0.04) }
.ap-nf-link-label{
  font-size:.86rem;
  letter-spacing:.12em;
  color:var(--paper);
}
.ap-nf-link-note{
  grid-column:1;
  font-size:.92rem;
  color:var(--muted);
}
.ap-nf-link i{
  grid-row:1 / span 2;
  grid-column:2;
  color:var(--orange);
  transition:translate .25s ease;
}
.ap-nf-link:hover i{ translate:3px -3px }

@media (prefers-reduced-motion:reduce){
  .ap-nf-link,
  .ap-nf-link i{ transition:none }
}

@media (max-width:640px){
  .ap-legal{ padding-top:calc(var(--header-h, 84px) + 56px); padding-bottom:96px }
  .ap-legal-head{ margin-bottom:48px }
  .ap-legal-sec{ padding:32px 0 }
  .ap-nf-link{ padding:20px }
}

/* "Change my cookie choice": reopens the banner (global.js) */
.ap-legal-consent{
  padding:9px 14px; border-radius:6px; cursor:pointer;
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--paper); background:transparent; border:1px solid rgba(238,240,246,.35);
}
.ap-legal-consent:hover, .ap-legal-consent:focus-visible{border-color:var(--orange); color:var(--orange); outline:none}