/* ── Legal documents ────────────────────────────────────────────────────────
 * The Terms, the Privacy Policy and the Creator–Brand Collaboration Agreement.
 * These are documents people read closely and put their name to, not app
 * screens, and Inter — the interface face — makes a contract read like a
 * settings panel.
 *
 * What does NOT change: brand colours, iconography, spacing, the eyebrow, the
 * heading face. Only the running text. Headings stay Cormorant Garamond so a
 * legal page still reads as Disambi rather than as a PDF someone pasted in.
 *
 * EB Garamond is the text-size cut of the same Garamond model as Cormorant,
 * which is why these two can sit together: one lineage, two optical sizes.
 * Cormorant is a display face — it goes thin and tiring below about 18px,
 * which is precisely where a contract lives.
 *
 * Loaded only on the three legal pages (partials/legal_head.html), so the rest
 * of the site pays nothing for it.
 */
.legal-doc {
  /* Scoped to this class rather than promoted to a :root token in tokens.css,
     deliberately: the webfont is only fetched on legal pages, so a site-wide
     token would silently fall back everywhere else and read as a bug. The
     fallbacks are all text serifs — if the webfont never arrives the page is
     still a formal document, not Times-by-accident. */
  --font-legal: 'EB Garamond', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  font-family: var(--font-legal);
  /* 17px, up from the 0.95rem Inter it replaces. EB Garamond's x-height runs
     smaller, so this is roughly the same apparent size, not a size increase. */
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-secondary);
  /* Garamonds default to old-style figures, where 3, 4, 7 and 9 drop below the
     baseline. Charming in prose, wrong for a contract: clause numbers, dates,
     percentages and money have to align and be unambiguous. */
  font-variant-numeric: lining-nums tabular-nums;
}

/* Headings keep the brand display face. */
.legal-doc h1,
.legal-doc h2,
.legal-doc h3 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--text-primary);
  font-variant-numeric: lining-nums tabular-nums;
}
.legal-doc h1 {
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin: 0.5rem 0 2rem;
}
.legal-doc h2 {
  font-weight: 700;
  font-size: 1.3rem;
  margin: 2.25rem 0 0.75rem;
}
.legal-doc h3 {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem;
}

.legal-doc p { margin: 0 0 1.25rem; }

/* Justified, as legal documents are set in print. Justification without
   hyphenation opens rivers of white space on a phone-width measure, so the two
   go together (hyphens needs <html lang>, which base.html sets). The last line
   of a paragraph stays ragged; a stretched final line reads as a bug. */
.legal-doc p,
.legal-doc li {
  text-align: justify;
  text-align-last: start;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Short lines that justification would only distort. */
.legal-doc .legal-doc__meta,
.legal-doc__toc li { text-align: start; hyphens: manual; -webkit-hyphens: manual; }

.legal-doc__meta { font-size: 0.95rem; color: var(--text-tertiary); }

/* The non-binding summary (Meta, Snap and Instagram all lead with one): set
   off from the clauses so nobody mistakes it for one. Radius 0, per the
   editorial direction. */
.legal-doc__summary {
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--copper-border);
  background: var(--bg-elevated);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.legal-doc__summary h2 { margin-top: 0; }

.legal-doc__toc { margin: 2rem 0 2.5rem; }
.legal-doc__toc ol { columns: 2 16rem; column-gap: 2rem; }
.legal-doc__toc li { break-inside: avoid; }

/* In-page links land with the heading clear of the fixed nav (h-16). */
.legal-doc [id] { scroll-margin-top: 5rem; }
/* A document ends on its last clause; the wrapper owns the space below it. */
.legal-doc > :last-child,
.legal-doc div > :last-child { margin-bottom: 0; }

.legal-doc ul,
.legal-doc ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.legal-doc li { margin-bottom: 0.5rem; }
/* Tailwind's preflight strips markers; in a contract they carry meaning (the
   three dispute steps in Terms cl.15 are an ordered sequence). */
.legal-doc ul { list-style: disc; }
.legal-doc ol { list-style: decimal; }
.legal-doc li::marker { color: var(--text-tertiary); }

/* Defined terms and the clauses that carry the obligation. Garamond's bold is
   gentle, so the weight lift is paired with the primary ink to make a
   "notwithstanding" actually catch the eye. */
.legal-doc strong { font-weight: 600; color: var(--text-primary); }
.legal-doc em { font-style: italic; }

.legal-doc a {
  color: var(--copper-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Long-form prose needs a measure. Without one these run the full container
   and the eye loses the line return — worse in a document nobody wants to
   re-read than anywhere else on the site. */
.legal-doc__body { max-width: 68ch; }

/* Content hashes and signature evidence: the one place a typewriter face is
   the formal choice rather than a retro one, and it is already what the
   agreement uses. Kept, with figures locked to tabular so two hashes stacked
   above each other line up. */
.legal-doc .hash,
.legal-doc .hash-full {
  font-family: 'Courier New', Courier, monospace;
  font-variant-numeric: tabular-nums;
}

/* The copper link and the eyebrow used to be branched here for light mode.
 * Both are site-wide problems, not legal-page ones — every copper and blue
 * text element on the site failed AA on cream — so they moved to --copper-ink
 * and --blue-ink in tokens.css / luxury.css. The rules above inherit them.
 * The underline on links stays regardless: colour is never the only signal. */