/* ============================================================
   OOPS ALL SOUPS — SHARED PAGE STYLES
   ------------------------------------------------------------
   Everything every page has in common: the reset, the body
   defaults, the page column, the heading scales, and the
   recurring pieces (label, links).

   No colors are defined here. Every color is a var(--token)
   from tokens.css, which every page links first. See STYLE.md.

   Layout that belongs to one page only goes in that page's own
   stylesheet, not here.
   ============================================================ */

html { color-scheme: light dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* The page column: one reading width and one set of margins for
   every page. Children space themselves with a top margin, so a
   page adds pieces without re-deciding the rhythm. */
.page {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  padding-inline: clamp(20px, 6vw, 48px);
  padding-block: clamp(40px, 8vw, 80px);
}

/* The eyebrow tier: labels and metadata. Marked by size,
   uppercase and letter-spacing as much as by color. */
.label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Links use the text-safe accent, which clears 4.5:1 at any
   size. --accent itself is reserved for display type. */
a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
a:hover { text-decoration: none; }

/* Headings. One display scale for every page title, and one for
   section headings beneath it. The accented word in an h1 is
   where --accent appears: at display size it clears the 3:1 bar
   it meets in light mode. */
h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 11vw, 4.75rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
h1 .accent { color: var(--accent); }
.label + h1 { margin-top: 24px; }

h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}