/* ============================================================================
   GLEE — PAGE INTERIOR NORMALISATION            v1 (2026-08-06)
   ----------------------------------------------------------------------------
   The nav is uniform; the interiors were not. Measured across 29 pages
   (tools/survey_page_interiors.py):

       h1 size        15px  →  82px      (5.5x range)
       content column 346px → 1140px     (3.3x range)
       column left     16px →  336px
       display faces   7    (Georgia, Inter, Iowan Old Style, Spectral,
                             Times New Roman, system-ui, ui-monospace)
       body faces      4

   Seven display typefaces across one site is the loudest possible signal that
   these pages are unrelated. This restores the type system glee-tokens.css
   already declares — "mono-first typography; serif reserved for display
   headings" — which pages had drifted off one at a time.

   DELIBERATELY CONSERVATIVE. It normalises TYPE and RHYTHM, which are safe and
   carry most of the "same site" feeling. It does NOT force column widths or
   layout: those are load-bearing per page, and breaking a working layout to win
   a consistency metric is a bad trade. Outliers are listed in the survey report
   for targeted work.

   Any page can opt out of a rule by being more specific; nothing here uses
   !important.
   ============================================================================ */

:root {
  --gp-measure: 68ch;        /* comfortable reading width */
  --gp-rhythm: 1.6;
}

/* ---------- the page itself wears the style ----------
   The token layer defined --bg and --ink but nothing ever APPLIED them to the
   document. Every page kept whatever root background its own CSS set, so under
   a light style the text correctly turned dark while the page stayed black —
   which is the entire reason `bone` and `paper` failed on 15 pages and passed
   in the styleguide, where the page is built on the tokens throughout. */
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono, ui-monospace, "Cascadia Code", Menlo, monospace);
  line-height: var(--gp-rhythm);
  -webkit-font-smoothing: antialiased;
}

/* TYPE ONLY — NEVER COLOUR.
   The first version set `color: var(--ink)` on headings and `var(--sand)` on
   links. Both broke real pages: an --ink heading landed on a light panel
   (contrast 1.21) and a --sand link landed on a --sand button (contrast 1.00,
   fully invisible). A global sheet cannot know what a heading is sitting on;
   inheriting is correct, because the local context already got it right. */
h1, h2, h3 {
  font-family: var(--serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif);
  font-weight: 400;
  line-height: 1.14;
  text-wrap: balance;
}
h4, h5, h6 {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- one heading scale ---------- */
h1 { font-size: clamp(30px, 4.4vw, 52px); margin: 0 0 .5em; }
h2 { font-size: clamp(21px, 2.4vw, 29px); margin: 2.2em 0 .5em; }
h3 { font-size: clamp(17px, 1.7vw, 21px); margin: 1.8em 0 .4em; }
h4 { font-size: .8rem;  margin: 1.6em 0 .4em; }
h5, h6 { font-size: .72rem; margin: 1.4em 0 .3em; }

/* the sentence that says what a page is — sits right under the title */
h1 + p { font-size: 1.05rem; color: var(--mist); max-width: var(--gp-measure); }

p, li { max-width: var(--gp-measure); }

/* ---------- links read as links, inside prose only ----------
   Scoped to text blocks. A link that is a button, a card or a nav item has its
   own background and its own colour; recolouring those is how "Back to GLEE"
   became sand-on-sand. */
p > a:not([class]), li > a:not([class]) {
  color: var(--sand);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--sand) 45%, transparent);
}
p > a:not([class]):hover, li > a:not([class]):hover {
  text-decoration-color: var(--sand);
}

/* ---------- optional standard column ----------
   Pages can opt IN with class="gpage" rather than being forced into it. */
.gpage {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 20px 96px;
}
.gpage-head { margin-bottom: 2.4rem; }
.gpage-eyebrow {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--patina-hot-text, var(--sand));
  margin: 0 0 .8rem;
}
.gpage-lede {
  font-size: 1.05rem;
  color: var(--mist);
  max-width: var(--gp-measure);
  margin: 0;
}

/* ---------- tables and code get the same treatment site-wide ---------- */
code, kbd, pre, samp {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .92em;
}
:not(pre) > code {
  background: color-mix(in srgb, var(--sand) 10%, transparent);
  border-radius: 2px;
  padding: .08em .35em;
}
pre { overflow-x: auto; }
table { border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }
th { color: var(--mist); font-weight: 500; font-size: .8rem;
     letter-spacing: .06em; text-transform: uppercase; }

/* ---------- focus is visible on every interactive thing ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}