/* =============================================================================
   ATUM — legal.css
   The three legal pages: terms of service, cookie policy, disclaimer.

   These are the only pages on this site somebody reads end to end rather than
   scanning, and they are the only ones whose words are not ours to shorten. So
   the whole job here is reading comfort: one column, a real measure, generous
   leading, and headings that let somebody find section 7 without reading
   sections 1 to 6.

   THEY USE THE SITE'S OWN BODY TYPE AND ARE NOT A SPECIAL CASE. The site sits
   at 17px, which is a quarter of a point under the 13pt document floor at the
   narrow end, and that is a site-wide condition rather than something these
   pages introduce. Raising it is a change to the whole site and belongs on its
   own, not smuggled in behind a legal page — which is also the instruction that
   came with the drafts.

   THE STRONG TAGS ARE THE AUTHOR'S EMPHASIS, NOT DECORATION. Roughly a third of
   the sentences open with one. They are set in ink rather than in a heavier
   weight alone, because at 17px a second weight on a third of the page turns
   into a grey texture and stops meaning anything.
   ========================================================================== */

/* ---------- the contents list ------------------------------------------------
   It sits in the site's own sticky rail, where every other page keeps its
   section label. On a page of ten numbered clauses that column would otherwise
   hold one word, and somebody who arrived looking for clause 7 would have to
   scroll for it.

   No smooth scrolling anywhere in here. A jump that animates is a jump somebody
   with reduced motion switched on does not get, and the whole point of the list
   is that the destination arrives. */

.toc__list {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  counter-reset: none;
}

.toc__list > li + li { margin-top: var(--s1); }

.toc__link {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--s2);
  align-items: baseline;
  padding: var(--s2) 0;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: var(--border) solid transparent;
}

.toc__link:hover { color: var(--ink); }
.toc__link:hover .toc__n { color: var(--ochre); }

.toc__n {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: var(--track-mono);
  color: var(--rule-strong);
}

/* ---------- the reading column ----------------------------------------------- */

.legal {
  max-width: 42rem;
  font-size: var(--t-base);
  line-height: var(--lh-body);
}

/* The bar is sticky, so a heading jumped to would otherwise land underneath it.
   Same offset the rail uses to clear it. */
.legal h2[id] { scroll-margin-top: 7rem; }

.legal > p {
  margin: 0 0 var(--s5);
  color: var(--ink-2);
}

.legal strong {
  font-weight: 650;
  color: var(--ink);
}

/* ---------- headings --------------------------------------------------------
   The numbers are in the source text, so nothing here counts anything. */

.legal h2 {
  font-size: var(--t-lg);
  line-height: var(--lh-head);
  letter-spacing: var(--track-h3);
  margin: 0 0 var(--s4);
  color: var(--ink);
}

.legal h3 {
  font-size: var(--t-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-h4);
  margin: var(--s6) 0 var(--s3);
  color: var(--ink);
}

/* The divider between sections. It is a hairline and it carries the section
   break on its own, so the heading under it needs no extra rule of its own. */
.legal__rule {
  border: 0;
  border-top: var(--border) solid var(--rule);
  margin: var(--s7) 0 var(--s6);
}

/* ---------- the lettered list ------------------------------------------------
   The letters come from the source, so they are written rather than generated:
   an ordered list restyled with letters would renumber if a clause moved. */

.legal__alpha {
  list-style: lower-alpha;
  margin: 0 0 var(--s5);
  padding-left: var(--s6);
  color: var(--ink-2);
}

.legal__alpha > li { margin-bottom: var(--s3); }
.legal__alpha > li::marker { color: var(--ochre); }

/* ---------- the storage table ------------------------------------------------
   Four columns of prose. It scrolls inside its own box below the width where
   the columns stop being readable, rather than making the page scroll. */

.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  line-height: 1.6;
  min-width: 36rem;
}

/* The first column holds a storage key, which is one unbreakable token, so it
   is given exactly the room that token needs and no more. Without this the
   browser squeezes it and the other three columns get the space. */
.legal__table th:first-child,
.legal__table td:first-child { width: 1%; white-space: nowrap; }

.legal__table th,
.legal__table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: var(--border) solid var(--rule);
}

.legal__table th {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--rule-2);
  white-space: nowrap;
}

.legal__table td { color: var(--ink-2); }
.legal__table tr:last-child td { border-bottom: 0; }

/* A storage key is a single token and must never break across two lines: the
   page is telling somebody the exact name to look for, and "atum.lan / g" is
   the wrong name twice. It is short enough that nothing else has to give. */
.legal code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-2);
  border: var(--border) solid var(--rule);
  border-radius: var(--radius);
  padding: 0.1em 0.35em;
  color: var(--ochre-2);
  white-space: nowrap;
}

/* ---------- links in the prose ------------------------------------------------
   Underlined, because a legal page is the wrong place to make somebody hunt for
   what is clickable. */

.legal p a,
.legal li a {
  color: var(--ochre-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal p a:hover,
.legal li a:hover { color: var(--ochre); }

/* The closing "Last updated" line. The terms point at it by name, so it is
   findable rather than buried: it is the only thing after the final rule. */
.legal > .legal__rule:last-of-type + p {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: var(--track-mono);
  color: var(--ink-3);
}
.legal > .legal__rule:last-of-type + p strong { color: var(--ink-3); font-weight: 500; }