/* ============================================================================ burn.css — BurnLab signature layer (AAA spec, per-site set piece) Loads AFTER data.css. Everything is namespaced .bl-* so it cannot collide with the shared component layer, which another session owns. Voice: FIELD NOTEBOOK / SPORTS LAB. Squared paper, a hand that presses hard (2.2px nib, butt caps, no rounded corners), everything annotated, the arithmetic written in the margin because a lab writes its working down. ========================================================================== */ /* --------------------------------------------------- 0. ACCENT REPAIR (local) data.css declares --accent: var(--site-accent, #3C4A55) on :root, but shell() writes --site-accent on . A custom property is substituted where it is DECLARED, so --accent resolves to the neutral fallback on every page of every ring site and the per-site hue never reaches the CSS. Repaired here rather than in the master because _shared is owned by another session mid-rollout — flag raised; the master fix is one line. burn light #B14A1E = 5.16:1 on paper · dark #E8875A = 7.07:1 on dark paper (both values are the ring's own, from _shared/contrast-check.mjs). */ :root { --accent: #B14A1E; --accent-2: #B14A1E; --accent-3: #B14A1E; --accent-soft: color-mix(in srgb, #B14A1E 9%, var(--paper)); } :root[data-theme="dark"] { --accent: #E8875A; --accent-2: #E8875A; --accent-3: #E8875A; --accent-soft: color-mix(in srgb, #E8875A 13%, var(--paper)); } :root[data-theme="dark"] .az a:hover, :root[data-theme="dark"] .pager .on, :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .unit-toggle button[aria-pressed="true"] { color: #1A1206; } /* ------------------------------------------------------ 1. micro-iconography burn's hand: 2.2px nib, BUTT caps, mitre joins, no fill. Drawn like someone pressing a pencil into squared paper. (fuel engraves at 1.4px with round caps; fly rules at 1px with solid survey marks; cook cuts solid shapes.) */ .bl-i { width: 1em; height: 1em; flex: none; vertical-align: -.13em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: butt; stroke-linejoin: miter; } /* ------------------------------------------------------------ 2. THE SET PIECE "Your 30 minutes" — the answer for one chosen duration, drawn on squared paper before the reader meets a single table. */ .bl-thirty { margin: var(--s4) 0 0; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 24px), repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 24px), var(--surface); background-position: -1px -1px; max-width: 760px; overflow: hidden; } :root[data-theme="dark"] .bl-thirty { background-blend-mode: normal; } .bl-tab { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 10px var(--s4); border-bottom: 1px solid var(--line-2); background: var(--surface); font-family: var(--sans); font-size: .68rem; font-weight: 650; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); } .bl-tab span:first-child { display: inline-flex; align-items: center; gap: 8px; } .bl-tab .bl-ref { color: var(--faint); letter-spacing: .1em; font-weight: 600; font-variant-numeric: tabular-nums; } .bl-body { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: var(--s4); align-items: center; padding: var(--s4); } @media (max-width: 560px) { .bl-body { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--s3); } .bl-ring { max-width: 158px; } } /* the duration ring — a graduated lab timer, no needle */ .bl-ring { width: 100%; height: auto; display: block; } .bl-ring .rtrack { fill: none; stroke: var(--line); stroke-width: 9; } .bl-ring .rswept { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: butt; transition: stroke-dasharray .2s linear; } .bl-ring .grad { stroke: var(--line-2); stroke-width: 1.4; } .bl-ring .grad-maj { stroke: var(--ink-2); stroke-width: 1.8; } .bl-ring .gnum { fill: var(--faint); font-family: var(--sans); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; } .bl-ring .rmin { fill: var(--ink); font-family: var(--sans); font-size: 40px; font-weight: 660; letter-spacing: -.045em; font-variant-numeric: proportional-nums; } .bl-ring .runit { fill: var(--muted); font-family: var(--sans); font-size: 10px; font-weight: 650; letter-spacing: .18em; } @media (prefers-reduced-motion: reduce) { .bl-ring .rswept { transition: none; } } /* the read-out */ .bl-read .figure-hero { margin-bottom: 6px; color: var(--accent); } .bl-read .bl-unit { font-family: var(--sans); font-size: .72rem; font-weight: 650; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); } /* the working, written out the way a lab notebook writes it */ .bl-working { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-family: var(--sans); font-size: .8rem; line-height: 1.65; color: var(--muted); font-variant-numeric: tabular-nums; } .bl-working b { color: var(--ink-2); font-weight: 650; } .bl-working .bl-eq { color: var(--faint); padding: 0 2px; } /* duration stops */ .bl-stops { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line-2); background: var(--surface); } .bl-stops-lab { flex: 0 0 100%; padding: 9px var(--s4) 0; font-family: var(--sans); font-size: .66rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .bl-stops .bl-stopwrap { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px var(--s4) 14px; } .bl-stops button { font: inherit; font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 5px 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); border-radius: 2px; cursor: pointer; transition: border-color .12s, color .12s; } .bl-stops button:hover { border-color: var(--accent); color: var(--accent); } .bl-stops button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); } @media (prefers-reduced-motion: reduce) { .bl-stops button { transition: none; } } /* provenance as ornament — a specimen line, not a footnote */ .bl-prov { border-top: 1px solid var(--line-2); background: var(--surface); padding: 10px var(--s4); font-family: var(--sans); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .bl-prov b { color: var(--muted); font-weight: 650; letter-spacing: .11em; } .bl-prov .bl-sep { color: var(--line-2); } /* ===================================== 2b. AAA+++ STUDIO PREMIUM, site-local The shared mechanics (grain, keel, mono voice, reveals, unboxed answer, method mini-spec, rel-cards) all live in data.css §20 and need nothing here. This block is only the three things that are burn's own call. ========================================================================== */ /* ---- 2b.1 the hero numeral stays in burn's LAB voice --------------------- §20.10 sets .answer.aaa .big in Fraunces 340, which is right for the ring's editorial sites. It is wrong here: the answer numeral sits 24px above the set piece's own read-out (.figure-hero, sans 650, tabular), and two different numeral voices stacked that close reads as an accident rather than a decision. burn's whole argument is "this is a lab, not a magazine", so the answer keeps the sans lab numeral — at the AAA+++ --fs-stat size, with the unit in the mono spec register. Per spec §5, hero composition is exactly where sameness across siblings is FORBIDDEN. */ .answer.aaa .big { font-family: var(--sans); font-weight: 650; font-size: var(--fs-stat); line-height: .96; letter-spacing: -.045em; font-variation-settings: normal; font-variant-numeric: proportional-nums lining-nums; } /* ---- 2b.2 entrance choreography on the shell-owned hero ----------------- The kicker and the h1 are emitted by the shared shell(), so their classes are not ours to set; the stack is choreographed by selector instead. Same keyframes, same 60ms stagger, same no-preference gate as §20.8 — a reduced-motion reader gets the finished page, never content at opacity 0. */ @media (prefers-reduced-motion: no-preference) { .hero .eyebrow { animation: aaa-rise var(--t-slow) var(--ease-out) both; } .hero h1 { animation: aaa-rise var(--t-slow) var(--ease-out) both; animation-delay: 60ms; } } /* ---- 2b.3 a bare .formula outside a .method block ----------------------- §20.11 scopes .formula to .method. /methodology sets the same ACSM equation in running prose, where a .method list would be wrong, so the mono spec block is extended to a bare .formula here rather than in the master. */ .formula { font-family: var(--mono); font-size: .875rem; line-height: 1.7; background: var(--accent-wash); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin: var(--s3) 0; overflow-x: auto; white-space: pre; color: var(--ink-2); } /* ---- 2b.4 provenance in the mono spec register --------------------------- .bl-prov is the set piece's own dated source line and keeps its bespoke position (attached to the bottom rule of the figure, not floating under it). Only the voice changes: mono, to match every other srcline in the ring. */ .bl-prov { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .06em; } .bl-prov b { letter-spacing: .09em; } /* ---- 2b.5 the set piece under warm basalt ------------------------------- Geometry is UNTOUCHED — the 2.2px butt-cap nib, the 9px ring, the 24px squared paper and the longhand equation are delivered work. These three rules only stop the drawing from going chalk-white at night: every stroke and label is pinned to the ink ramp (--ink-2 / --muted / --faint), never to #FFF, and the swept arc keeps the dark accent (#E8875A, 7.07:1 on basalt). §3.8: dark is the same material at night, not an inversion. */ :root[data-theme="dark"] .bl-ring .grad-maj { stroke: var(--ink-2); } :root[data-theme="dark"] .bl-ring .rmin { fill: var(--ink); } :root[data-theme="dark"] .bl-thirty { box-shadow: none; } /* --------------------------------------------------- 3. confident emptiness One near-empty full-width moment: the sentence the whole site exists to qualify. Cheap sites fill this space with another ad unit. */ .bl-honest { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .bl-honest .wrap { padding-top: var(--s8); padding-bottom: var(--s8); } .bl-honest p { font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 400; line-height: 1.45; letter-spacing: -.02em; color: var(--ink-2); max-width: 30ch; margin: 0; } .bl-honest p em { color: var(--ink); font-style: italic; } @media (max-width: 640px) { .bl-honest .wrap { padding-top: var(--s6); padding-bottom: var(--s6); } }