/* FridgeToForks — privacy and terms.
 *
 * Page-scoped, per DESIGN.md: site.css is shared by every page, so anything
 * that exists only for these two lives here and cannot restyle the app.
 *
 * These pages are read, not sold. The job is a comfortable measure, a clear
 * numbered spine you can cite ("section 6"), and nothing competing with the
 * text. The mono numerals are the house ledger signal used for what it is
 * reserved for: counts and dates.
 */

.legal {
  max-width: calc(var(--measure) + 2 * clamp(1.25rem, 5vw, 2rem));
  margin-inline: auto;
  padding: var(--sp-7) clamp(1.25rem, 5vw, 2rem) var(--sp-8);
  counter-reset: sec;
}

.legal h1 { font-size: clamp(1.875rem, 6vw, 2.75rem); }

.legal .updated {
  font-family: var(--f-numeric);
  font-size: .8125rem;
  color: var(--c-ink-muted);
  margin: var(--sp-4) 0 0;
}

/* The lede carries the honest summary. Full rules above and below, never a
   side stripe. */
.legal .lede {
  border-top: 2px solid var(--c-ink);
  border-bottom: 1px solid var(--c-rule);
  padding: var(--sp-5) 0;
  margin: var(--sp-6) 0 var(--sp-7);
}
/* The section-heading rule below sets a 3rem top margin for the numbered spine.
   Inside the lede that margin has nothing to separate it from, so it just opens
   a hole under the rule. Reset it here rather than weakening the rule there. */
.legal .lede h2 {
  counter-increment: none;
  display: block;
  font-size: 1.125rem;
  margin: 0 0 var(--sp-4);
}
.legal .lede h2::before { content: none; }
.legal .lede p:last-child { margin-bottom: 0; }

/* Numbered spine. The number is a count, which is what the mono face is for. */
.legal h2 {
  counter-increment: sec;
  font-size: 1.3125rem;
  margin: var(--sp-7) 0 var(--sp-4);
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: baseline;
  gap: .35rem;
}
.legal h2::before {
  content: counter(sec);
  font-family: var(--f-numeric);
  font-weight: 500;
  font-size: .875rem;
  color: var(--c-tomato);
}

.legal h3 {
  font-size: 1.0625rem;
  margin: var(--sp-5) 0 .5rem;
  font-family: var(--f-body);
  font-weight: 600;
  letter-spacing: 0;
}

.legal p, .legal li { max-width: var(--measure); }
.legal p { margin: 0 0 var(--sp-4); }
.legal ul { padding-left: 1.15rem; margin: 0 0 var(--sp-4); }
.legal li { margin-bottom: .45rem; }
.legal a { font-weight: 600; }

/* The one thing on these pages that must not be skimmed past. Full border,
   warm ground, no stripe and no colour-only signal. */
.legal .critical {
  border: 2px solid var(--c-tomato);
  background: var(--c-paper-warm);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin: var(--sp-5) 0;
}
.legal .critical > :last-child { margin-bottom: 0; }
.legal .critical h3 { margin-top: 0; color: var(--c-tomato-deep); }

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.legal .tablewrap { overflow-x: auto; margin: 0 0 var(--sp-5); }
.legal table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .9375rem;
}
.legal th, .legal td {
  text-align: left;
  padding: .7rem .6rem;
  border-bottom: 1px solid var(--c-rule);
  vertical-align: top;
}
.legal thead th {
  border-bottom: 2px solid var(--c-ink);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-ink-muted);
}
.legal tbody th { font-weight: 600; }

.legalfoot {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-rule);
  font-size: .9375rem;
  color: var(--c-ink-muted);
}

/* ---------- 2026-09-07: the same upgrade the homepage got (D180) ----------
 * Scott: "several pages linked from the homepage such as privacy and terms --
 * needs your upgrades there too". Gabarito on the headings, a bigger h1, and
 * a contents list so a reader can jump to "section 6" instead of scrolling
 * 5,000px for it. Appended after the rules above so it wins on source order.
 */
.legal { --f-display: 'Gabarito', 'Public Sans', system-ui, sans-serif; }
.legal h1 {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 3.5rem); letter-spacing: -.03em; line-height: 1.02;
  margin: 0;
}
.legal h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.5rem; letter-spacing: -.02em;
}
.legal .lede h2 { font-size: 1.25rem; }
.legal .lede { border-top: 3px solid var(--c-tomato); }
/* The contents: one line per numbered section, the number in the ledger
   face, the title a plain link. Two columns from tablet width. */
.legal .toc { margin: 0 0 var(--sp-7); }
.legal .toc:empty { display: none; }
.legal .toc h2 {
  font-size: .8125rem; font-family: var(--f-body); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-muted);
  display: block; margin: 0 0 .6rem; counter-increment: none;
}
.legal .toc h2::before { content: none; }
.legal .toc ol { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 2rem; }
.legal .toc li { break-inside: avoid; display: flex; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid var(--c-rule); }
.legal .toc li span { font-family: var(--f-numeric); font-size: .8125rem; color: var(--c-tomato); min-width: 1.4rem; }
.legal .toc a { font-weight: 500; text-decoration: none; color: var(--c-ink); }
.legal .toc a:hover { color: var(--c-tomato-deep); text-decoration: underline; }
@media (min-width: 40rem) { .legal .toc ol { columns: 2; } }
.legal h2[id] { scroll-margin-top: 1.5rem; }