/* ========================================================================= WEAR · RAE — type system The single source of truth for how large anything is set. Nine steps, tuned at 1920 wide and clamped so they still hold at 1280. deck.css lays out components and may reference a step. It must never invent one: no raw clamp(), no calc() on a size, no px in markup. If a component needs a different size, it needs a different *role*, and a role belongs in this file. The breadcrumb tier is one step (--type-label) and two colours. Anything that labels rather than speaks uses the step: section eyebrows, citations, paper names, card kickers, figure captions, table headers, the step counter, the HUD. Labels take --label (the accent); sources — citations, paper names, footnotes — take --source, because provenance speaks quieter than the claim it supports. ========================================================================= */ :root{ --display:'Russo One', Impact, sans-serif; --mono:'Roboto Mono', ui-monospace, Menlo, monospace; /* --- the frame ------------------------------------------------------- The deck is designed on a 16:9 frame. At 16:9 the frame is the window and the title sits at a fixed height on every beat. On a taller window the frame keeps 16:9, shrinks to fit the width, and is centred — so the space above and below is equal, and the title still lands in the same place relative to the content. `--frame-h` is the frame's height; everything below is a fraction of it, which is what makes 1080p and 4K identical. 1080 x 0.0210 = 22.7px body 1080 x 0.0720 = 77.8px frame inset, above the header and below the last block */ --frame-h: min(100vh, 56.25vw); /* Capped, so a very tall window does not push the frame into the middle of the screen with a field of dead space above it. */ --frame-gap: min(calc((100vh - var(--frame-h)) / 2), calc(var(--frame-h) * 0.12)); /* One inset for the whole frame: the same measure above the eyebrow and below the last block, so a beat is centred in its margins by construction rather than by eye. */ --frame-inset: calc(var(--frame-h) * 0.0720); /* --- the scale: one base, eight ratios ------------------------------- step ratio at 1080 hero 4.58 104 title 2.97 67 h2 2.03 46 h3 1.44 33 lead 1.10 25 body 1.00 23 dense 0.86 19 label 0.66 15 micro 0.53 12 */ --type-body: clamp(15px, calc(var(--frame-h) * 0.0210), 46px); --type-hero: calc(var(--type-body) * 4.58); --type-title: calc(var(--type-body) * 2.97); --type-h2: calc(var(--type-body) * 2.03); --type-h3: calc(var(--type-body) * 1.44); --type-lead: calc(var(--type-body) * 1.10); --type-dense: calc(var(--type-body) * 0.86); /* One role sits off the ladder: the headline figure. On the results beat the numeral is the finding rather than a caption to it, so it takes a step above the hero and becomes the largest thing in the deck. It only works because those figures are stacked rather than strung across three columns — side by side, the widest of the three sets the size of all of them. */ --type-stat: calc(var(--type-body) * 4.2); /* The two smallest steps keep a floor, because a proportional 9px label at 1280 is unreadable rather than consistent. The floor is low enough that the label still rides the body down to a 720-tall window: a fixed 12px floor stopped the breadcrumb tier scaling, so short viewports carried labels at 80% of body instead of 66% and the beats crowded. No ceiling: they ride the body up, so a 4K screen scales the whole deck rather than leaving the type behind at 1080p sizes. */ --type-label: max(9px, calc(var(--type-body) * 0.66)); --type-micro: max(8px, calc(var(--type-body) * 0.53)); /* Equations are their own role, not a title in disguise. The methodology beat sets its specification in this step beside a label rail, so 1.50 of body is the size at which the equation runs the full width of what is left of the card without shouting over the slide title. Subscripts take their own step off it: type-micro is right for a tick label and far too small for the index of a sum. */ --type-eq: calc(var(--type-body) * 1.42); --type-sub: calc(var(--type-eq) * 0.56); /* --- one line-height and one tracking value per step ------------------ */ --lh-hero:1.00; --tr-hero:.004em; --lh-title:1.04; --tr-title:.005em; --lh-h2:1.08; --tr-h2:.006em; --lh-h3:1.12; --tr-h3:.01em; --lh-lead:1.42; --tr-lead:-.004em; --lh-body:1.55; --lh-dense:1.42; --lh-label:1.30; --tr-label:.14em; --lh-micro:1.20; /* --- label tier ------------------------------------------------------- Violet on paper; the greyish lilac on dark, because violet-soft glows against indigo and stops reading as a label. */ --label:var(--violet); /* Sources are not labels. Citations, paper names and footnotes take the deck's muted ink rather than the accent, so provenance sits under the claim it supports instead of alongside the eyebrows and kickers. */ --source:rgba(16,21,40,.6); /* --- prose tier ------------------------------------------------------- Prose is one size and two colours. A claim takes the ink the title uses; a qualifier — the clause after a dash, the limit of a study — takes seventy per cent of it. Both sit on --type-body. Size is never what separates a claim from its qualifier; only colour is. */ --prose:var(--ink); --prose-dim:rgba(16,21,40,.7); } .slide.dark, #overview{ --label:var(--lilac);--source:rgba(255,255,255,.62); --prose:#fff;--prose-dim:rgba(255,255,255,.7); } #count.dark, #hint.dark{--label:var(--lilac);} /* ============================================================== steps === */ .t-hero{font-family:var(--display);font-weight:400;font-size:var(--type-hero); line-height:var(--lh-hero);letter-spacing:var(--tr-hero); text-transform:uppercase;} .t-1{font-family:var(--display);font-weight:400;font-size:var(--type-title); line-height:var(--lh-title);letter-spacing:var(--tr-title); text-transform:uppercase;} .t-2{font-family:var(--display);font-weight:400;font-size:var(--type-h2); line-height:var(--lh-h2);letter-spacing:var(--tr-h2); text-transform:uppercase;} .t-3{font-family:var(--display);font-weight:400;font-size:var(--type-h3); line-height:var(--lh-h3);letter-spacing:var(--tr-h3); text-transform:uppercase;} .lead{font-size:var(--type-lead);line-height:var(--lh-lead);letter-spacing:var(--tr-lead);} .body{font-size:var(--type-body);line-height:var(--lh-body);} .sm {font-size:var(--type-dense);line-height:var(--lh-dense);} .xs {font-size:var(--type-label);line-height:var(--lh-label);} /* ========================================================== label tier === */ /* Size, case and tracking: one rule for every breadcrumb in the deck. */ .eyebrow, th, .tag, .kicker, .why-k, .contrib-k, .lit-head span, .ov-label, .ov-label .n, .ov-keys, .ov-card .ov-n, .panel .pn, .step i, .plate figcaption, #count, #hint, #overview h3{ font-size:var(--type-label); line-height:var(--lh-label); letter-spacing:var(--tr-label); text-transform:uppercase; } /* Colour: the purple, everywhere it labels something. #count and #hint keep their own muted greys — they are chrome, not labels. */ .eyebrow, .kicker, .why-k, .contrib-k, .lit-head span, .tag, .step i, #overview h3{ color:var(--label); } /* Citations, paper names and footnotes are sources, not labels: they sit in the label tier's size but take the quieter ink. */ .cite, .lit-who .cite{ font-size:var(--type-label); line-height:1.4; letter-spacing:.01em; color:var(--source); } /* Footnotes, exponents, tick labels. */ sup,sub{font-size:var(--type-micro);line-height:0;position:relative;vertical-align:baseline;} sup{top:-.5em;} sub{bottom:-.28em;}