/* tokens.css — the site's type scale and spacing. Linked FIRST in every page (index.html, scripts/gen-projects.js, gen-op.js, gen-privacy.js), which is how /op — it never loads style.css — gets the same values. TYPE — every font-size on the site is one of these eight, chosen by ROLE: label-small tag pills inside a card label eyebrows, field labels,
, meta, standalone tags, footer body interface text, tables, forms, running copy body-large ledes, card titles, the wordmark, legal h2 title the title of a panel, page or form heading a section heading index a band of links set as display type (the discipline index) display the hero and the statement No px, no new clamp(), no step added to fit one element. An ornament inside big type may use max(var(--text-label), em) — the discipline counts do. The four reading steps (10/11/13/15) never change with width. The three big ones step down once, at 640px, and keep their order there: display > index > heading > title. SPACING — every margin, padding and gap is one of the tokens below, and which one is decided by WHAT the space separates, never by eye: --section-space top and bottom of every section band (×2 for the two bands set in display type: the hero and the statement) --block-space a label or heading and the content under it; blocks inside one section --item-space items of one list: paragraphs, rows, fields, cards' lines --tight-space a label and its own value --inline-space links side by side: nav, footer, header actions --col-gap columns; --grid-gap image and card grids --gutter the page's left and right edge — header, sections and footer all start on it Inside a component, the --sp- steps (n × 4px). Pills take --pill-padding (in em, so every pill keeps the same proportions at its own type size), buttons --button-padding. px is left only for hairlines and drawn icon geometry (the hamburger bars, the fake browser window), and em only for optical nudges tied to a line of text. */ :root { --text-label-small: 0.625rem; /* 10px */ --text-label: 0.6875rem; /* 11px */ --text-body: 0.8125rem; /* 13px */ --text-body-large: 0.9375rem; /* 15px */ --text-title: clamp(1.25rem, 1.9vw, 1.75rem); /* 20 → 28px */ --text-heading: clamp(2.125rem, 5vw, 5rem); /* 34 → 80px */ --text-index: clamp(2.25rem, 7.2vw, 6.5rem); /* 36 → 104px */ --text-display: clamp(3rem, 8.5vw, 8.75rem); /* 48 → 140px */ --sp-half: 0.125rem; /* 2 */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --gutter: clamp(var(--sp-5), 3vw, var(--sp-10)); /* 20 → 40 */ --section-space: clamp(var(--sp-5), 2.2vw, var(--sp-8)); /* 20 → 32 */ --block-space: var(--sp-4); /* 16 */ --item-space: var(--sp-3); /* 12 */ --tight-space: var(--sp-1); /* 4 */ --inline-space: clamp(var(--sp-4), 1.8vw, var(--sp-6)); /* 16 → 24 */ --col-gap: clamp(var(--sp-5), 2.8vw, var(--sp-10)); /* 20 → 40 */ --grid-gap: clamp(var(--sp-3), 1.6vw, var(--sp-6)); /* 12 → 24 */ --pill-padding: 0.45em 0.9em; --button-padding: var(--sp-3) var(--sp-6); /* 12 / 24 */ --header-h: 3rem; /* 48 — the fixed header */ } @media (max-width: 640px) { :root { --text-display: clamp(2.25rem, 9.6vw, 2.75rem); /* 36 → 44px */ --text-index: clamp(1.75rem, 7.2vw, 2.25rem); /* 28 → 36px */ --text-heading: clamp(1.5rem, 6vw, 1.75rem); /* 24 → 28px */ } } /* Inside .page-shell the three display steps measure the SHELL, not the window. cqi is 1% of the query container's inline size, and css/style.css gives .page-shell container-type: inline-size. With the detail panel closed the shell IS the window, so these resolve to the same sizes as the :root values above. With it open the shell is squeezed to 50vw and the type comes down with it — which vw can never do, because a media query only ever sees the outer window. On a 1920 screen that was the difference between 163px and 82px for the hero, inside a 960px column. Declared on `.page-shell > *`, never on `.page-shell` itself: a container query matches the container's DESCENDANTS, and the shell is not a descendant of itself, so a rule targeting it never matches. The block that used to sit here did exactly that and had been dead since the day it was written — the reason the hero stayed at 109px in a 640px column. Custom properties inherit, so setting them on each direct child reaches everything under it. */ @container shell { .page-shell > * { --text-display: clamp(3rem, 8.5cqi, 8.75rem); --text-index: clamp(2.25rem, 7.2cqi, 6.5rem); --text-heading: clamp(2.125rem, 5cqi, 5rem); } } @container shell (max-width: 640px) { .page-shell > * { --text-display: clamp(2.25rem, 9.6cqi, 2.75rem); --text-index: clamp(1.75rem, 7.2cqi, 2.25rem); --text-heading: clamp(1.5rem, 6cqi, 1.75rem); } }