/* site.bundle.b5-20260710.css — single render-blocking stylesheet:
fonts/boring.css + tokens/base.css + tokens/boring.css + motion.css +
styles.b5-20260710.css (perf gate: one CSS request on the critical path) */
/* ============================================================
tryboringai.com — @font-face (self-hosted, latin subset)
Faces per design-card-boring.md §2 (AMENDED 2026-07-09):
Instrument Serif 400 (display serif — roman only;
the accent device is a mark, not a style — B-1c)
Space Grotesk 400/500/700 (body/UI grotesk — variable file, wght 300–700)
Space Mono 400/700 (annotation layer — B-1b; IBM Plex Mono is
GLP-house DNA and never appears on this site)
All files self-hosted woff2 (latin subset). OFL.
PRELOAD (the two above-the-fold display files):
============================================================ */
@font-face {
font-family: "Instrument Serif";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/instrument-serif/instrument-serif-latin-400.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Variable file: wght axis 300–700 covers the card's 400 / 500 / 700 */
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/fonts/space-grotesk/space-grotesk-latin-var.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Space Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/space-mono/space-mono-latin-400.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Space Mono";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/space-mono/space-mono-latin-700.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
flagship-v2 — shared reset/base
Consumed by all three sites AFTER the site's fonts/.css
and BEFORE (or with) tokens/.css.
Pure CSS: copies verbatim into any static public/ tree.
Rules sourced from playbook-distilled.md §1.3–1.5 (rem-based fluid
type, reduced-motion baseline, WCAG AA focus, no template defaults).
============================================================ */
/* ---- Reset ---- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* rem-based fluid type foundation: never lock root font-size in px */
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
min-height: 100vh;
font-family: var(--font-body, system-ui, sans-serif);
font-size: var(--text-body, 1rem);
line-height: var(--leading-body, 1.6);
background: var(--bg, #fff);
color: var(--text, #111);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: inherit;
overflow-wrap: break-word;
}
p {
overflow-wrap: break-word;
}
a {
color: inherit;
}
ul[role="list"],
ol[role="list"] {
list-style: none;
}
table {
border-collapse: collapse;
}
/* ---- Accessibility baseline ---- */
/* WCAG-visible focus, tokenized per site accent */
:focus-visible {
outline: 2px solid var(--focus-ring, var(--accent, currentColor));
outline-offset: 2px;
}
/* Reduced-motion CSS floor (WCAG 2.3.3). The JS layer additionally uses
gsap.matchMedia to REMOVE parallax/pinning entirely — this rule is only
the no-JS / CSS-animation floor, per playbook §1.4. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---- Shared primitives (parameterized only by site tokens) ---- */
/* Hairline rule — the only line the flagship sites draw */
.rule {
border: 0;
border-top: var(--hairline, 1px) solid var(--rule, currentColor);
}
/* 2–4% CSS noise grain overlay (playbook §1.4) — free, never baked into
assets. Opacity is a brand token (--grain-opacity). Apply the class to a
band; the overlay never intercepts input. */
.grain {
position: relative;
isolation: isolate;
}
.grain::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: var(--grain-opacity, 0.03);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 128px 128px;
}
/* Mono label chrome: chips/indices/locators. Chips encode state, price, or
eligibility only — never enthusiasm (all three cards). */
.mono {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: var(--text-label, 0.8125rem);
letter-spacing: var(--tracking-label, 0.08em);
font-variant-numeric: tabular-nums;
}
.mono--caps {
text-transform: uppercase;
}
/* Content measure for long-form / legal fine print */
.measure {
max-width: var(--measure, 68ch);
}
/* Layout container: 12-col grid ceiling shared by the ledger systems */
.container {
width: 100%;
max-width: var(--max-width, 75rem);
margin-inline: auto;
padding-inline: var(--gutter, clamp(1rem, 4vw, 2.5rem));
}
/* Screen-reader-only utility (locators/indices are presentational text) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ============================================================
BRAND TOKENS — tryboringai.com (Boring AI, B-4)
Source of truth: design-card-boring.md ("The Work Order")
Values marked CARD are verbatim from the card; values marked DERIVED
fill gaps the card leaves open (comment says from what) — adjust only
with a card change.
Load order: fonts/boring.css -> tokens/base.css -> this file.
============================================================ */
:root {
/* ---------------- TYPE FAMILIES (CARD §2) ---------------- */
--font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif; /* H1, H2 statements, giant prices; never below 2rem */
--font-body: "Space Grotesk", system-ui, "Helvetica Neue", sans-serif; /* body, ledger descriptions, CTAs (500), forms, nav */
--font-mono: "Space Mono", ui-monospace, "SF Mono", monospace; /* indices, meta, receipt, legal stamp — B-1b: Space Mono; IBM Plex Mono is GLP-house only */
--weight-body: 400; /* CARD */
--weight-ui: 500; /* CARD: buttons/CTAs */
--weight-strong: 700; /* CARD: inline only */
--weight-mono: 400; /* CARD */
--weight-mono-em: 700; /* CARD (amended): Space Mono ships 400/700 only */
/* ---------------- FLUID TYPE SCALE (CARD §2, verbatim) ----------------
Mechanical clamp(), rem-based, verified 375->2560px; step ratio ~1.42
(>= the 1.333 floor, playbook §1.3). */
--step-display: clamp(3.05rem, 1.9rem + 6.8vw, 8rem); /* H1, closer — 128px desktop */
--step-3: clamp(2.15rem, 1.41rem + 3.15vw, 4.25rem); /* H2 serif statements — 68px desktop (B-3 regenerated) */
--step-2: clamp(1.5rem, 1.24rem + 1.13vw, 2.25rem); /* ledger-row heads, H3 — 36px desktop (B-3 regenerated) */
--step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* body */
--step-0: 0.9375rem; /* small body, form notes */
--step-label: 0.8125rem; /* mono labels/indices — fixed */
/* Display:label contrast ratio ~9.8:1 at desktop (128px/13px).
CARD floor: never below 8:1. Exposed for QA tooling: */
--scale-contrast-ratio: 9.8;
/* Type detail */
--text-body: var(--step-1);
--text-label: var(--step-label);
--leading-display: 1.05; /* DERIVED — card silent; tight display leading, Locomotive lane */
--leading-body: 1.6; /* DERIVED — playbook body default */
--tracking-label: 0.08em; /* CARD: mono letter-spacing; uppercase only at label size */
/* ---------------- PALETTE (CARD §4, verbatim) ---------------- */
/* Ink register (dark bands: hero, fragment story, closer) */
--ink-900: #07111f; /* dark band bg — existing brand token, keep */
--ink-700: #0e1c30; /* raised panels on dark */
--text: #f8fafc; /* text on ink — existing token, keep */
--text-dim: #8fa3bd; /* two-tone de-emphasis on ink */
--amber: #ffb020; /* THE accent — existing token, keep */
--rule: rgba(248, 250, 252, 0.16); /* hairlines on ink */
--rule-hot: #ffb020; /* hover rule state */
/* Paper register (light editorial bands: process, capabilities, pricing, booking) */
--paper: #f4f1ea; /* warm work-order paper */
--paper-ink: #111827; /* text on paper */
--paper-dim: #5b6472; /* de-emphasis on paper */
--rule-paper: rgba(17, 24, 39, 0.18); /* hairlines on paper */
/* Semantic aliases (base.css contract; qa_gate.py keys map:
background=--ink-900, foreground=--text, accent=--amber) */
--bg: var(--ink-900);
--surface: var(--ink-700);
--accent: var(--amber);
--text-2: var(--text-dim);
--focus-ring: var(--amber);
/* CTA tokens (CARD §8): on ink -> amber block + ink text;
ghost = hairline outline. CTAs NEVER animate position/paint. */
--cta-bg: var(--amber);
--cta-text: #07111f;
--cta-ghost-border: var(--rule);
--cta-ghost-text: var(--text);
/* CONTRAST NOTES (CARD §4, WCAG AA gate):
amber #ffb020 on #07111f ~10.9:1 -> text/CTAs allowed on dark.
amber on paper FAILS AA for text -> on paper bands amber is marks only
(rule highlights, the deposit stamp, the ledger double-rule underscore —
amber never sets glyphs on paper; B-1c). No purple-blue anywhere. No gradients on type
or backgrounds. */
/* ---------------- SPACING ---------------- */
--space-1: 0.25rem; /* DERIVED mechanical ramp (playbook: spacing scale is a token layer) */
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2.5rem;
--space-7: 4rem;
--space-8: 6rem;
--row-pad: clamp(1.5rem, 3vw, 2.75rem); /* CARD §3: ledger-row block padding */
--band-pad: clamp(4rem, 9vw, 8rem); /* DERIVED: dark/paper band rhythm */
--gutter: clamp(1rem, 4vw, 2.5rem); /* DERIVED */
--max-width: 75rem; /* DERIVED: 1200px ceiling, sibling cards */
--ledger-cols: 6ch 1fr max-content; /* CARD §3: grid-template-columns */
/* ---------------- RADII (CARD §3/§8) ---------------- */
--radius-0: 0; /* ledger rows: no card backgrounds, no boxes, no radius */
--radius-cta: 2px; /* CARD §8: "2px radius (stamp, not pill)" */
/* BAN: uniform 16px-radius / 24px-padding cards (§1.5) */
/* ---------------- HAIRLINES ---------------- */
--hairline: 1px; /* CARD §3: border-top: 1px solid var(--rule) */
/* ---------------- GRAIN (CARD §3) ---------------- */
--grain-opacity: 0.03; /* 3% CSS noise — dark bands ONLY, never paper, never forms */
/* ---------------- MOTION TOKENS (CARD §5) ---------------- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* CARD: expo-out family — entrances */
--ease-in: cubic-bezier(0.64, 0, 0.78, 0); /* CARD: exits. Never default ease/linear */
--dur-nav: 100ms; /* CARD M4: nav link underline */
--dur-button: 120ms; /* CARD M4: button microstate */
--dur-row: 150ms; /* CARD M4: ledger-row hover (index nudge + rule-hot) */
--dur-transition: 400ms; /* DERIVED: playbook 300–500ms transitions band */
--dur-reveal: 900ms; /* CARD M1: masked line reveal 0.9s */
--stagger-reveal: 80ms; /* CARD M1 */
--parallax-max: 6%; /* CARD M3: hero media layer only, <=6% viewport */
--hover-nudge: 4px; /* CARD M4: index translateX */
}
/* ---------------- BAND REGISTERS ----------------
Hard cuts between ink-dark and paper-light bands (CARD §3) — no gradient
transitions, no divider SVGs. Scope flips the semantic aliases. */
[data-band="paper"] {
--bg: var(--paper);
--text: var(--paper-ink);
--text-2: var(--paper-dim);
--rule: var(--rule-paper);
--grain-opacity: 0; /* grain on dark bands only */
/* CTAs on paper are ink-filled (amber-as-text fails AA on paper) */
--cta-bg: var(--paper-ink);
--cta-text: var(--paper);
--cta-ghost-border: var(--rule-paper);
--cta-ghost-text: var(--paper-ink);
background: var(--bg);
color: var(--text);
}
[data-band="ink"] {
background: var(--bg);
color: var(--text);
}
/* ============================================================
flagship-v2/motion/motion.css — structural CSS for the approved
motion preset library (companion to motion/motion.js).
Pure static CSS: copies verbatim into any site's public/ tree.
Load order: fonts/.css → tokens/base.css → tokens/.css
→ this file. All values below resolve from brand tokens with safe
fallbacks — no per-site forks of this file, ever (playbook §1.4).
No-JS / reduced-motion safety: every rule here degrades to fully
visible, fully static content. The only hide is scoped to
html[data-mo="pending"], which is set by motion/head-guard.js
(inline, no-preference users only) and self-clears after 4s.
============================================================ */
/* ---- head-guard coordination (preset 1 · scroll-reveal) ----
Hide un-armed reveal targets only while the guard is pending so the
masked reveal doesn't flash-then-replay. motion.js arms each element
(data-mo-armed) the moment its split/initial state is applied, and
flips the root to data-mo="ready" | "reduced" at boot. */
html[data-mo="pending"] [data-motion="reveal"]:not([data-mo-armed]) {
visibility: hidden;
}
/* SplitText-equivalent masks: each word/char sits in an overflow-hidden
inline mask; the inner unit translates 110% -> 0 (transform only).
Masks are removed (markup reverted) once the reveal completes. */
.mo-mask {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
}
.mo-unit {
display: inline-block;
will-change: transform;
}
/* ---- preset 2 · parallax-drift ----
The drifting media needs bleed so edges never show at ±6% viewport
drift. Put the media element (data-motion="parallax") inside a
clipping frame. */
.mo-parallax-frame {
overflow: clip;
position: relative;
}
[data-motion="parallax"] {
will-change: transform;
}
.mo-parallax-frame > [data-motion="parallax"] {
height: 114%; /* 2 × 6% cap + 2% safety */
width: 100%;
object-fit: cover;
}
/* ---- preset 3 · hairline-draw ----
Element IS the rule. Initial scale is set by JS (progressive
enhancement: without JS the rule is simply visible). */
[data-motion="hairline"] {
display: block;
border: 0;
height: var(--hairline, 1px);
background: var(--rule, currentColor);
will-change: transform;
}
/* ---- preset 4 · counter-tick ----
Tabular figures so ticking digits never reflow neighbors. */
[data-motion="counter"] {
font-variant-numeric: tabular-nums;
}
/* ---- preset 5 · hero-loop-swap ----
The poster ![]()
is in-flow and defines the box (it is the LCP
element). The video overlays it and fades in via opacity only —
zero CLS. data-loop-live is set the moment playback actually starts. */
[data-motion="hero-loop"] {
position: relative;
overflow: clip;
}
[data-motion="hero-loop"] .mo-loop-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--dur-loop-fade, 400ms) var(--ease-out, var(--ease-expo-out, cubic-bezier(0.22, 1, 0.36, 1)));
}
[data-motion="hero-loop"][data-loop-live] .mo-loop-video {
opacity: 1;
}
/* Visible pause control — WCAG 2.2.2, required on any >5s loop.
Mono chip; colors resolve from brand tokens. */
[data-motion="hero-loop"] .mo-loop-toggle {
position: absolute;
right: var(--space-3, 1rem);
bottom: var(--space-3, 1rem);
z-index: 2;
border: var(--hairline, 1px) solid var(--rule, rgba(255, 255, 255, 0.4));
background: color-mix(in srgb, var(--bg, #000) 55%, transparent);
color: var(--text, #fff);
font-family: var(--font-mono, ui-monospace, monospace);
font-size: var(--text-label, 0.8125rem);
letter-spacing: var(--tracking-label, 0.08em);
padding: 0.375rem 0.75rem;
border-radius: var(--radius-chip, 2px);
cursor: pointer;
}
/* ---- preset 6 · sticky-index ----
DEFAULT (no JS, reduced motion, <1024px): plain stacked flow — every
item visible, nothing pins. data-mo-live (set by JS only when the pin
is actually created) switches the stage to the overlap layout. */
[data-motion="sticky-index"][data-mo-live] [data-sticky-stage] {
position: relative;
min-height: 100vh;
}
[data-motion="sticky-index"][data-mo-live] [data-sticky-item] {
position: absolute;
inset: 0;
}
[data-sticky-progress] {
display: block;
height: var(--hairline, 1px);
background: var(--rule, currentColor);
transform-origin: left center;
}
/* Hide index chrome when the pin isn't running (static list needs no
scrub readout). */
[data-motion="sticky-index"]:not([data-mo-live]) [data-sticky-current],
[data-motion="sticky-index"]:not([data-mo-live]) [data-sticky-total],
[data-motion="sticky-index"]:not([data-mo-live]) [data-sticky-progress] {
display: none;
}
/* ---- reduced-motion floor (belt and braces; JS handles the rest) ----
WCAG 2.3.3: the gsap.matchMedia harness REMOVES parallax/pinning and
renders reveals/counters instantly. These rules guarantee the same
final-state visibility even if JS never ran. */
@media (prefers-reduced-motion: reduce) {
html[data-mo] [data-motion="reveal"] {
visibility: visible !important;
}
[data-motion="hero-loop"] .mo-loop-video {
display: none;
}
.mo-mask,
.mo-unit {
transform: none !important;
}
}
/* ============================================================
tryboringai.com — "The Work Order" (B-5, flagship rebuild 2026-07-10)
Source of truth: design-card-boring.md (amended 2026-07-09).
Load order: /assets/fonts/boring.css -> /assets/tokens/base.css ->
/assets/tokens/boring.css -> /assets/motion.css -> this file.
One layout primitive: the full-bleed hairline-ruled ledger row (§3).
No card grids, no pill badges, no gradients, no radius above 2px.
============================================================ */
/* ---------------- page chrome ---------------- */
body {
background: var(--ink-900);
color: var(--text);
}
::selection {
background: var(--amber);
color: var(--ink-900);
}
.skip-link {
position: absolute;
left: -999px;
top: 0;
z-index: 99;
background: var(--amber);
color: var(--ink-900);
padding: 0.5rem 1rem;
font-family: var(--font-mono);
font-size: var(--step-label);
}
.skip-link:focus {
left: 0;
}
/* ---------------- header (never moves after load) ---------------- */
.site-header {
display: flex;
align-items: center;
gap: var(--space-5);
padding: var(--space-4) var(--gutter);
border-bottom: var(--hairline) solid var(--rule);
background: var(--ink-900);
color: var(--text);
}
.brand {
display: inline-flex;
align-items: baseline;
gap: 0.6rem;
text-decoration: none;
font-family: var(--font-body);
font-weight: var(--weight-ui);
margin-right: auto;
view-transition-name: brand-mark;
}
.brand-mark {
font-family: var(--font-display);
font-size: 1.5rem;
line-height: 1;
color: var(--amber);
}
.site-nav {
display: flex;
gap: var(--space-5);
}
.site-nav a {
text-decoration: none;
font-size: var(--step-0);
color: var(--text-dim);
padding-bottom: 2px;
background-image: none;
border-bottom: var(--hairline) solid transparent;
transition: color var(--dur-nav) var(--ease-out), border-color var(--dur-nav) var(--ease-out);
}
.site-nav a:hover,
.site-nav a:focus-visible {
color: var(--text);
border-bottom-color: var(--amber);
}
@media (max-width: 720px) {
.site-nav { display: none; }
}
/* ---------------- buttons (CTAs NEVER animate position on entrance) ------ */
.btn {
display: inline-block;
font-family: var(--font-body);
font-weight: var(--weight-ui);
font-size: var(--step-0);
line-height: 1.2;
text-decoration: none;
text-align: center;
padding: 0.9rem 1.6rem;
border-radius: var(--radius-cta);
border: var(--hairline) solid transparent;
cursor: pointer;
transition: transform var(--dur-button) var(--ease-out), border-color var(--dur-button) var(--ease-out);
}
.btn-primary {
background: var(--cta-bg);
color: var(--cta-text);
}
.btn-ghost {
background: transparent;
color: var(--cta-ghost-text);
border-color: var(--cta-ghost-border);
}
.btn:hover { transform: translateY(2px); }
.btn-ghost:hover { border-color: var(--amber); }
@media (prefers-reduced-motion: reduce) {
.btn:hover { transform: none; }
}
.under-cta {
font-family: var(--font-mono);
font-size: var(--step-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-2);
margin-top: var(--space-3);
}
.cta-pair {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
}
/* ---------------- type ---------------- */
h1, .display {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--step-display);
line-height: var(--leading-display);
letter-spacing: -0.01em;
}
h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--step-3);
line-height: 1.08;
letter-spacing: -0.005em;
}
h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--step-2);
line-height: 1.15;
}
strong { font-weight: var(--weight-strong); }
.dim { color: var(--text-2); }
.lede {
font-size: var(--step-1);
max-width: 46ch;
color: var(--text);
}
.small { font-size: var(--step-0); }
/* The ledger underscore (B-1c): one accent word per statement, roman glyphs,
amber DOUBLE hairline beneath — the accountant's rule under an audited
total. Never italic, never amber glyphs on paper. */
u.score, .score {
text-decoration: none;
display: inline-block;
line-height: 1.02;
padding-bottom: 0.05em;
border-bottom: 0.09em double var(--amber);
}
/* mono meta line (label chrome — information, never enthusiasm) */
.meta-line {
font-family: var(--font-mono);
font-size: var(--step-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-2);
}
/* ---------------- bands ---------------- */
.band {
padding-block: var(--band-pad);
background: var(--bg);
color: var(--text);
}
.band-flush { padding-block: 0; }
.texture {
position: relative;
isolation: isolate;
}
.texture > * { position: relative; z-index: 1; }
/* Texture tint plates are desktop-only: at small viewports the low-opacity
background becomes the page's LCP element and blows the conversion-page
budget (measured via Lighthouse mobile). Mobile paper stays flat. */
@media (min-width: 768px) {
.texture::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: url("/assets/media/tex-paper.b5-20260710.avif") center / cover;
opacity: 0.04;
}
.texture-desk::before {
background-image: url("/assets/media/tex-desk.b5-20260710.avif");
opacity: 0.35;
}
}
/* ---------------- ledger header (replaces eyebrow-pills, §3) ------------- */
.ledger-header {
display: flex;
align-items: baseline;
gap: var(--space-4);
border-top: var(--hairline) solid var(--rule);
padding-top: var(--space-4);
margin-bottom: var(--space-6);
}
.ledger-header .idx {
font-family: var(--font-mono);
font-size: var(--step-label);
letter-spacing: var(--tracking-label);
color: var(--text-2);
min-width: 6ch;
}
.ledger-header h2 { max-width: 22ch; }
.ledger-header .meta-line { margin-left: auto; text-align: right; }
@media (max-width: 720px) {
.ledger-header { flex-wrap: wrap; }
.ledger-header .meta-line { margin-left: 6ch; }
}
/* ---------------- THE ledger row (§3 — the one repeated primitive) ------- */
.ledger-row {
display: grid;
grid-template-columns: var(--ledger-cols);
gap: var(--space-2) var(--space-5);
border-top: var(--hairline) solid var(--rule);
padding-block: var(--row-pad);
transition: border-color var(--dur-row) var(--ease-out);
}
.ledger-list > .ledger-row:last-child {
border-bottom: var(--hairline) solid var(--rule);
}
.ledger-row .idx {
font-family: var(--font-mono);
font-size: var(--step-label);
letter-spacing: var(--tracking-label);
color: var(--text-2);
padding-top: 0.4em;
transition: transform var(--dur-row) var(--ease-out);
}
.ledger-row .ledger-body { grid-column: 2; max-width: 62ch; }
.ledger-row h3 { margin-bottom: 0.35em; }
.ledger-row p {
font-size: var(--step-0);
color: var(--text-2);
max-width: 58ch;
}
.ledger-row .ledger-meta {
grid-column: 3;
font-family: var(--font-mono);
font-size: var(--step-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-2);
text-align: right;
padding-top: 0.5em;
white-space: nowrap;
}
.ledger-row .ledger-meta .go {
display: inline-block;
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--dur-row) var(--ease-out), transform var(--dur-row) var(--ease-out);
}
.ledger-row:hover {
border-top-color: var(--rule-hot);
}
.ledger-row:hover .idx { transform: translateX(var(--hover-nudge)); }
.ledger-row:hover .ledger-meta .go { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
.ledger-row:hover .idx { transform: none; }
.ledger-row .ledger-meta .go { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
.ledger-row { grid-template-columns: 6ch 1fr; }
.ledger-row .ledger-meta {
grid-column: 2;
grid-row: 3;
text-align: left;
white-space: normal;
}
}
/* two-column ruled index table (Locomotive "Extras" treatment) */
.index-table {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--space-7);
border-bottom: var(--hairline) solid var(--rule);
}
.index-table .ledger-line {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: var(--space-4);
border-top: var(--hairline) solid var(--rule);
padding-block: var(--space-4);
}
.index-table .ledger-line strong {
font-family: var(--font-body);
font-weight: var(--weight-ui);
font-size: var(--step-0);
}
.index-table .ledger-line span {
font-size: var(--step-0);
color: var(--text-2);
text-align: right;
max-width: 32ch;
}
@media (max-width: 860px) {
.index-table { grid-template-columns: 1fr; }
}
/* ---------------- hero ---------------- */
.hero {
position: relative;
min-height: min(92vh, 60rem);
display: flex;
align-items: flex-end;
overflow: clip;
}
.hero-media {
position: absolute;
inset: 0;
}
.hero-media [data-motion="parallax"] { display: block; }
.hero-media figure,
.hero-media picture,
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-media figure { position: relative; }
/* The parallax layer is 114% tall and clipped by the frame; keep the
injected pause chip (WCAG 2.2.2) inside the VISIBLE area. */
.hero-media .mo-loop-toggle {
bottom: calc(13% + var(--space-3));
right: var(--space-4);
}
.hero-copy {
position: relative;
z-index: 1;
padding: var(--space-8) var(--gutter) var(--space-7);
max-width: 44rem;
}
.hero-copy h1 { max-width: 12ch; margin-bottom: var(--space-4); }
.hero-copy .lede { margin-bottom: var(--space-5); }
/* right-edge mono stat rail (replaces the hero command card) */
.hero-rail {
position: absolute;
z-index: 1;
right: var(--gutter);
bottom: var(--space-7);
display: grid;
gap: var(--space-3);
font-family: var(--font-mono);
font-size: var(--step-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-2);
text-align: right;
}
/* B1 (operator critique): labels sit PERFECTLY centered in their accent
boxes — flex centering both axes, symmetric padding, no stray text-align. */
.hero-rail span {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-top: var(--hairline) solid var(--rule);
padding: var(--space-2) var(--space-3);
background: color-mix(in srgb, var(--ink-900) 62%, transparent);
}
@media (max-width: 960px) {
.hero-rail { display: none; }
.hero { align-items: flex-end; }
}
/* M1 (operator critique): the old mobile hero stacked full copy on top of a
full 4:5 image — ~2.5 screens of scroll before any content. Now the copy
overlays the graded still (gracefully static-but-designed: the loop stays
off mobile by the card's perf rule), one short screen, first ledger row
arrives immediately after. Flat ink scrim keeps every line readable on
the rendered composite (contrast-over-imagery gate). */
@media (max-width: 767px) {
.hero {
min-height: min(82svh, 36rem);
align-items: flex-end;
}
.hero-media::after {
content: "";
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--ink-900) 60%, transparent);
}
.hero-copy {
padding-top: var(--space-7);
padding-bottom: var(--space-6);
}
}
/* ---------------- demand-fragments story (the ONE pinned scrub) ---------- */
.story-stage {
position: relative;
min-height: 100vh;
overflow: clip;
}
.story-plate {
position: absolute;
inset: 0;
z-index: 0;
}
.story-plate img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* B2 (operator critique, contrast-over-imagery gate): flat ink scrim over
the whole plate — the white paper fragments in the imagery made overlaid
text unreadable. Flat (no gradient — card §4 bans gradient backgrounds);
text blocks below add their own local backing so contrast is met on the
actual rendered composite across the ENTIRE section. */
.story-plate::after {
content: "";
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--ink-900) 65%, transparent);
}
.story-chrome {
position: absolute;
z-index: 3;
left: var(--gutter);
right: var(--gutter);
top: var(--space-4); /* B3: nudged up, stays inside the ink band */
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-2) var(--space-3);
background: color-mix(in srgb, var(--ink-900) 78%, transparent);
font-family: var(--font-mono);
font-size: var(--step-label);
letter-spacing: var(--tracking-label);
color: var(--text-2);
}
/* B3: in the static (non-pinned) layout the chrome line used to sit
absolutely on top of "State 1 · Noise" — flow it at the top of the band
instead, clear of the first state label and never touching the paper
band above. */
[data-motion="sticky-index"]:not([data-mo-live]) .story-chrome {
position: static;
margin: var(--space-4) var(--gutter) var(--space-5);
}
/* Static mode hides the scrub counter's digits (motion.css) — hide their
wrapper too so no stray " / " prefixes the section label. */
[data-motion="sticky-index"]:not([data-mo-live]) .story-chrome > span:first-child {
display: none;
}
.story-chrome [data-sticky-progress] { flex: 1; background: var(--rule); }
[data-motion="sticky-index"][data-mo-live] .story-item {
display: grid;
align-content: end;
padding: var(--space-8) var(--gutter);
}
/* stacked fallback (no JS / reduced motion / <1024px): plain ledger flow */
.story-item {
position: relative;
z-index: 2;
padding: var(--space-6) var(--gutter);
border-top: var(--hairline) solid var(--rule);
}
.story-item .meta-line { margin-bottom: var(--space-3); }
.story-item h3 { max-width: 20ch; margin-bottom: var(--space-3); font-size: var(--step-3); }
.story-item p { max-width: 52ch; color: var(--text); }
/* B2: every text block in the story carries its own local ink backing so
it stays readable wherever it lands over the plate (both pinned and
static layouts). fit-content keeps the backing tight to the line. */
.story-item .meta-line,
.story-item h3,
.story-item > p {
width: fit-content;
max-width: min(52ch, 100%);
background: color-mix(in srgb, var(--ink-900) 80%, transparent);
padding: var(--space-2) var(--space-3);
}
.story-item h3 { max-width: min(20ch, 100%); }
.story-ledger {
background: color-mix(in srgb, var(--ink-900) 80%, transparent);
padding: var(--space-2) var(--space-3);
}
/* fragment cloud (state 1) & ordered ledger (state 5) — real HTML text */
.frag-cloud {
list-style: none;
display: grid;
gap: var(--space-3);
max-width: 40rem;
}
.frag-cloud li {
border-top: var(--hairline) solid var(--rule);
padding: var(--space-3);
background: color-mix(in srgb, var(--ink-900) 80%, transparent);
}
.frag-cloud strong {
display: block;
font-family: var(--font-mono);
font-size: var(--step-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--amber);
}
.frag-cloud span {
font-size: var(--step-0);
color: var(--text-2);
}
/* scattered composition — only while the pin is actually live */
[data-mo-live] .frag-cloud {
position: absolute;
inset: 0;
display: block;
max-width: none;
}
[data-mo-live] .frag-cloud li {
position: absolute;
left: 50%;
top: 50%;
width: min(15rem, 34vw);
transform: translate(calc(-50% + var(--fx, 0%)), calc(-50% + var(--fy, 0%))) rotate(var(--fr, 0deg));
background: color-mix(in srgb, var(--ink-900) 85%, transparent); /* B2: was 72% — text washed out over the paper imagery */
border-top-color: var(--rule);
padding: var(--space-3);
}
.story-ledger {
list-style: none;
max-width: 40rem;
}
.story-ledger li {
display: grid;
grid-template-columns: 6ch 1fr;
gap: var(--space-4);
border-top: var(--hairline) solid var(--rule);
padding-block: var(--space-3);
font-size: var(--step-0);
}
.story-ledger .idx {
font-family: var(--font-mono);
font-size: var(--step-label);
letter-spacing: var(--tracking-label);
color: var(--amber);
}
/* ---------------- split copy ---------------- */
.split {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--space-6) var(--space-8);
align-items: start;
}
/* B5 (overflow gate): grid/flex children default to min-width:auto, so a
wide intrinsic child (the preview-type