/*
* broadsheet.css — auapps mockup design language
*
* Required in each HTML :
*
*
*
*/
/* @property registrations — enable GPU-interpolation of custom property values.
The card hover trace animates --trace-angle from 0deg → 360deg; without
@property the angle wouldn't interpolate (CSS variables default to type-less). */
@property --trace-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
/* --glow registered as so its value transitions smoothly between
section-specific tints when the user opens different panes. */
@property --glow {
syntax: '';
initial-value: #FF5000;
inherits: true;
}
:root {
/* ── Palette (default · "bureau") ── */
--ink: #0E1117;
--ink-2: #161B23;
--ink-3: #1F2630;
--ink-line: #2A3340;
--ink-deep: #07090E;
--paper: #ECE6D6;
--paper-warm: #F5F2EC;
--paper-deep: #DDD4BD;
--paper-dim: #C9C4B9;
--news: #C72631;
--news-deep: #8C2127;
--news-tint: rgba(199, 38, 49, 0.10);
/* FBI brand colors — LOCKED. Never overridden by any palette scheme.
FBI card always shows red logo + black text + cream paper regardless of palette. */
--fbi-red: #C72631;
--fbi-red-deep: #8C2127;
--fbi-ink: #0E1117;
--fbi-paper: #F5F2EC;
--amber: #C99022;
--amber-deep: #8C7028;
--amber-tint: rgba(201, 144, 34, 0.14);
/* --glow — custom per-palette accent color for the hover glow-bar.
Chosen from WITHIN each palette's temperature family (a brighter cousin
of an existing palette color), so the glow feels like it belongs to the
whole page mood rather than contrasting against the dominant accent. */
--glow: #FF5000; /* LOCKED — universal glow, does not vary with palette */
--steel: #8E95A1;
--steel-paper:#5A6271;
--hair: rgba(236, 230, 214, 0.10);
--hair-bold: rgba(236, 230, 214, 0.22);
--hair-heavy: rgba(236, 230, 214, 0.40);
--dot-color: rgba(236, 230, 214, 0.10);
/* ── Type · swappable via body[data-display/body/mono] · locked defaults ── */
--f-display: 'Unbounded', sans-serif;
--f-body: 'Fraunces', Georgia, serif;
--f-mono: 'Martian Mono', ui-monospace, monospace;
--display-weight: 750;
/* Highlight color for AU mark + name letters — cobalt blue, locked.
Distinct from --news so it doesn't follow the dominant color cascade. */
--hl-color: #1F51FF; /* LOCKED — neon blue (AU monogram + name highlight) */
/* Port wine — locked accent for corner crosshairs + dek underline. */
--accent-port:#7A2848;
/* ── Motion ── */
--ease: cubic-bezier(0.7, 0, 0.2, 1);
--pane-dur: 460ms;
}
/* ── Font swaps · body[data-display/body/mono] ── */
body[data-display="fraunces"] { --f-display: 'Fraunces', serif; }
body[data-display="outfit"] { --f-display: 'Outfit', sans-serif; }
body[data-display="bowlbyone"] { --f-display: 'Bowlby One', sans-serif; }
body[data-display="archivoblack"] { --f-display: 'Archivo Black', sans-serif; }
body[data-display="anton"] { --f-display: 'Anton', sans-serif; }
body[data-display="bebas"] { --f-display: 'Bebas Neue', sans-serif; }
body[data-display="russo"] { --f-display: 'Russo One', sans-serif; }
body[data-body="inter"] { --f-body: 'Inter', system-ui, sans-serif; }
body[data-body="outfit"] { --f-body: 'Outfit', sans-serif; }
body[data-body="fraunces"] { --f-body: 'Fraunces', serif; }
body[data-body="dmserif"] { --f-body: 'DM Serif Text', serif; }
body[data-body="archivo"] { --f-body: 'Archivo', sans-serif; }
body[data-body="bricolage"] { --f-body: 'Bricolage Grotesque', system-ui, sans-serif; }
body[data-body="sora"] { --f-body: 'Sora', system-ui, sans-serif; }
body[data-body="ebgaramond"]{ --f-body: 'EB Garamond', Georgia, serif; }
body[data-body="lora"] { --f-body: 'Lora', Georgia, serif; }
body[data-body="newsreader"]{ --f-body: 'Newsreader', Georgia, serif; }
body[data-body="spectral"] { --f-body: 'Spectral', Georgia, serif; }
body[data-body="piazzolla"] { --f-body: 'Piazzolla', Georgia, serif; }
body[data-body="ysabeau"] { --f-body: 'Ysabeau', system-ui, sans-serif; }
body[data-body="andada"] { --f-body: 'Andada Pro', Georgia, serif; }
body[data-mono="jetbrains"] { --f-mono: 'JetBrains Mono', ui-monospace, monospace; }
body[data-mono="martian"] { --f-mono: 'Martian Mono', ui-monospace, monospace; }
body[data-mono="ibmplex"] { --f-mono: 'IBM Plex Mono', ui-monospace, monospace; }
body[data-mono="spacemono"] { --f-mono: 'Space Mono', ui-monospace, monospace; }
/* ── Palette schemes · body[data-scheme] ── */
body[data-scheme="vellum"] {
--ink: #1C1812;
--ink-2: #25201A;
--ink-3: #2F2922;
--ink-line: #3A3328;
--ink-deep: #14110C;
--paper: #E8DFC8;
--paper-warm: #EFE7D0;
--paper-dim: #B5A88B;
--news: #B23B2E;
--news-deep: #7E2820;
--amber: #C49A3A;
--amber-deep: #8E6E25;
--steel: #A09486;
--glow: #E8A547; /* burnt aged amber — same earth family as palette */
--dot-color: rgba(232, 223, 200, 0.13);
}
body[data-scheme="phosphor"] {
--ink: #06080A;
--ink-2: #0C1014;
--ink-3: #131A1F;
--ink-line: #1F2A30;
--ink-deep: #02040588;
--paper: #DFD9C5;
--paper-warm: #E8E2CE;
--paper-dim: #A8A48B;
--news: #1D9540;
--news-deep: #0F6B26;
--amber: #C99022;
--amber-deep: #8C7028;
--steel: #7A8275;
--glow: #94E59C; /* softened phosphor lime — brightened forest family */
--dot-color: rgba(58, 138, 76, 0.16);
}
body[data-scheme="atlas"] {
--ink: #161310;
--ink-2: #1F1B16;
--ink-3: #29241E;
--ink-line: #342D26;
--ink-deep: #0E0C09;
--paper: #E5DDC6;
--paper-warm: #EDE5CE;
--paper-dim: #B5AB91;
--news: #1F4E79;
--news-deep: #163355;
--amber: #D6A23B;
--amber-deep: #99732A;
--steel: #8C8273;
--glow: #F2C266; /* brass-bright — already in leather+brass family */
--dot-color: rgba(214, 162, 59, 0.14);
}
body[data-scheme="garnet"] {
--ink: #07060A;
--ink-2: #100C12;
--ink-3: #1A141C;
--ink-line: #261D28;
--ink-deep: #04030688;
--paper: #E5DDD0;
--paper-warm: #EDE5D8;
--paper-dim: #ADA59A;
--news: #7A2848;
--news-deep: #4F1A2D;
--amber: #D9B167;
--amber-deep: #9A7A3F;
--steel: #8B7E80;
--glow: #F0B58F; /* rose-gold — warm wine-adjacent peach */
--dot-color: rgba(217, 177, 103, 0.13);
}
body[data-scheme="slate"] {
--ink: #14181F;
--ink-2: #1C212B;
--ink-3: #252B36;
--ink-line: #2F3744;
--ink-deep: #0E1117;
--paper: #ECE9E3;
--paper-warm: #F3EFE6;
--paper-dim: #B6B3AB;
--news: #4D6F8C;
--news-deep: #2F4A60;
--amber: #C9C4B9;
--amber-deep: #8E8B82;
--steel: #8E95A1;
--glow: #C9D9E8; /* ice-blue-cream — softer cool, same steel family */
--dot-color: rgba(236, 233, 227, 0.10);
}
body[data-scheme="carbon"] {
--ink: #050608;
--ink-2: #0C0E10;
--ink-3: #14171A;
--ink-line: #1E2226;
--ink-deep: #00010188;
--paper: #EDE9DD;
--paper-warm: #F4F0E4;
--paper-dim: #B0AB9C;
--news: #B91C2C;
--news-deep: #7A111B;
--amber: #B89446;
--amber-deep: #7E6628;
--steel: #8A8983;
--glow: #DB8E4B; /* deep bronze-amber — luxe warm in jewel palette */
--dot-color: rgba(184, 148, 70, 0.12);
}
body[data-scheme="folio"] {
--ink: #12150E;
--ink-2: #1B1F14;
--ink-3: #25291C;
--ink-line: #303425;
--ink-deep: #0B0D08;
--paper: #E6E0CC;
--paper-warm: #EDE7D3;
--paper-dim: #ADA88E;
--news: #4A6A3F;
--news-deep: #2D4226;
--amber: #C99022;
--amber-deep: #8C7028;
--steel: #877F6C;
--glow: #E8C064; /* warm gold-mid — within literary palette family */
--dot-color: rgba(74, 106, 63, 0.16);
}
body[data-scheme="infrared"] {
--ink: #0A0608;
--ink-2: #130D10;
--ink-3: #1C1418;
--ink-line: #261C21;
--ink-deep: #050306;
--paper: #E6DDD0;
--paper-warm: #EFE6D8;
--paper-dim: #B0A595;
--news: #DD6648;
--news-deep: #9B3F26;
--amber: #F0B860;
--amber-deep: #B08240;
--steel: #8B7F73;
--glow: #F2A98E; /* salmon-peach — within hot coral family */
--dot-color: rgba(221, 102, 72, 0.13);
}
/* ── 6 new schemes — Atlas-blue / Carbon-alt-accent variations ── */
body[data-scheme="atlassky"] {
--ink: #161310;
--ink-2: #1F1B16;
--ink-3: #29241E;
--ink-line: #342D26;
--ink-deep: #0E0C09;
--paper: #E8E0CA;
--paper-warm: #EFE7D0;
--paper-dim: #B5AB91;
--news: #6BA3D1;
--news-deep: #3E7AAB;
--amber: #D6A23B;
--amber-deep: #99732A;
--steel: #8C8273;
--glow: #F0D293; /* cream-brass — warm anchor in mostly-cool palette */
--dot-color: rgba(107, 163, 209, 0.16);
}
body[data-scheme="atlasice"] {
--ink: #181612;
--ink-2: #211D18;
--ink-3: #2B2620;
--ink-line: #362F27;
--ink-deep: #100E0B;
--paper: #E8E2D2;
--paper-warm: #EFE9D9;
--paper-dim: #B5AE9C;
--news: #8FB8D1;
--news-deep: #5C8AAB;
--amber: #E0CFA8;
--amber-deep: #9F8E66;
--steel: #A2998C;
--glow: #F2D8A0; /* champagne — warm cream brightened */
--dot-color: rgba(143, 184, 209, 0.14);
}
body[data-scheme="cobalt"] {
--ink: #0A1024;
--ink-2: #131A30;
--ink-3: #1C243C;
--ink-line: #262E48;
--ink-deep: #050918;
--paper: #ECE6D0;
--paper-warm: #F2EDD8;
--paper-dim: #B5AE98;
--news: #3461C9;
--news-deep: #1F408C;
--amber: #F0E5C5;
--amber-deep: #B8AC85;
--steel: #8C92A1;
--glow: #9DB4F0; /* periwinkle — brighter cousin within blue family */
--dot-color: rgba(52, 97, 201, 0.15);
}
body[data-scheme="verdigris"] {
--ink: #050608;
--ink-2: #0C0E10;
--ink-3: #14171A;
--ink-line: #1E2226;
--ink-deep: #00010188;
--paper: #E8E2D0;
--paper-warm: #F0EBD9;
--paper-dim: #ADA89A;
--news: #4F9590;
--news-deep: #2E6764;
--amber: #B89446;
--amber-deep: #7E6628;
--steel: #8A8983;
--glow: #E89A6A; /* copper-rose — aged copper warm tone */
--dot-color: rgba(79, 149, 144, 0.14);
}
body[data-scheme="cinnabar"] {
--ink: #050608;
--ink-2: #0E0C0F;
--ink-3: #181417;
--ink-line: #221C20;
--ink-deep: #00010188;
--paper: #ECE0D0;
--paper-warm: #F2E6D6;
--paper-dim: #B0A695;
--news: #D45F44;
--news-deep: #9E3F2A;
--amber: #F2C66F;
--amber-deep: #B08D3C;
--steel: #8B8073;
--glow: #F4C5A8; /* peach-cream — softened coral, same family */
--dot-color: rgba(212, 95, 68, 0.15);
}
body[data-scheme="brass"] {
--ink: #050608;
--ink-2: #0E0D0A;
--ink-3: #18160F;
--ink-line: #221F16;
--ink-deep: #00010188;
--paper: #ECE5D0;
--paper-warm: #F2ECD8;
--paper-dim: #B0AB95;
--news: #BC8F46;
--news-deep: #876728;
--amber: #D6BB7E;
--amber-deep: #9C8A52;
--steel: #8A857A;
--glow: #F4D6A2; /* champagne-light — luxe brass family bright */
--dot-color: rgba(188, 143, 70, 0.15);
}
/* ────────────────────────────────────────────────────────────────
PALETTE 2 — Orange spectrum + Deep Carnelian × varied dominants
Anchors: Vermillion / Persimmon / Coral (bright orange × deep purple)
Plus deep-Carnelian variants with different dominants:
Hearth (phosphor green), Lagoon (teal), Bone (ivory), Saffron (mustard).
Plus Salmon (lighter pink-coral with plum dominant).
──────────────────────────────────────────────────────────────── */
body[data-scheme="vermillion"] {
--ink:#C73813; --ink-2:#D24521; --ink-3:#DC542F; --ink-line:#E76844; --ink-deep:#921F0A;
--paper:#F2E2CC; --paper-warm:#F7E8D4; --paper-dim:#B5A28D;
--news:#2D0E48; --news-deep:#1A0830;
--amber:#F2A856; --amber-deep:#A77236; --steel:#B59A8C;
--glow:#FFCB85; --dot-color:rgba(45,14,72,0.16);
}
body[data-scheme="persimmon"] {
--ink:#C85916; --ink-2:#D36524; --ink-3:#DD7233; --ink-line:#E78648; --ink-deep:#963E08;
--paper:#F2E2CC; --paper-warm:#F7E8D4; --paper-dim:#B5A28D;
--news:#321555; --news-deep:#1D0A35;
--amber:#F2AC5A; --amber-deep:#A77338; --steel:#B59A8C;
--glow:#FFC494; --dot-color:rgba(50,21,85,0.16);
}
body[data-scheme="coral"] {
--ink:#CC6B48; --ink-2:#D67756; --ink-3:#DE8463; --ink-line:#E69478; --ink-deep:#984C2E;
--paper:#F2E2D2; --paper-warm:#F7E8D8; --paper-dim:#B5A595;
--news:#3D1640; --news-deep:#210A23;
--amber:#F2B484; --amber-deep:#A87E54; --steel:#B5A296;
--glow:#FFB594; --dot-color:rgba(61,22,64,0.16);
}
body[data-scheme="hearth"] {
--ink:#6B1A02; --ink-2:#7C2308; --ink-3:#8C2D10; --ink-line:#9D3D1C; --ink-deep:#4A1100;
--paper:#F0DDC8; --paper-warm:#F5E4D0; --paper-dim:#AC9D86;
--news:#1D9540; --news-deep:#0F6B26;
--amber:#E89A4D; --amber-deep:#9C6A2D; --steel:#A89484;
--glow:#5FFF8E; --dot-color:rgba(29,149,64,0.18);
}
body[data-scheme="lagoon"] {
--ink:#6B1A02; --ink-2:#7C2308; --ink-3:#8C2D10; --ink-line:#9D3D1C; --ink-deep:#4A1100;
--paper:#F0DDC8; --paper-warm:#F5E4D0; --paper-dim:#AC9D86;
--news:#2A8273; --news-deep:#185A4F;
--amber:#E89A4D; --amber-deep:#9C6A2D; --steel:#A89484;
--glow:#6FC9B9; --dot-color:rgba(42,130,115,0.16);
}
body[data-scheme="bone"] {
--ink:#6B1A02; --ink-2:#7C2308; --ink-3:#8C2D10; --ink-line:#9D3D1C; --ink-deep:#4A1100;
--paper:#F0DDC8; --paper-warm:#F5E4D0; --paper-dim:#AC9D86;
--news:#E0CFA8; --news-deep:#A89B7A;
--amber:#E89A4D; --amber-deep:#9C6A2D; --steel:#A89484;
--glow:#F5EAD0; --dot-color:rgba(224,207,168,0.18);
}
body[data-scheme="saffron"] {
--ink:#6B1A02; --ink-2:#7C2308; --ink-3:#8C2D10; --ink-line:#9D3D1C; --ink-deep:#4A1100;
--paper:#F0DDC8; --paper-warm:#F5E4D0; --paper-dim:#AC9D86;
--news:#C99022; --news-deep:#876728;
--amber:#E89A4D; --amber-deep:#9C6A2D; --steel:#A89484;
--glow:#E8C064; --dot-color:rgba(201,144,34,0.16);
}
body[data-scheme="salmon"] {
--ink:#CC7563; --ink-2:#D5826F; --ink-3:#DC8E7C; --ink-line:#E59E91; --ink-deep:#94503E;
--paper:#F2E0D5; --paper-warm:#F7E6DB; --paper-dim:#B5A398;
--news:#3D1A4F; --news-deep:#210C2C;
--amber:#F2B594; --amber-deep:#A87E5C; --steel:#B59E97;
--glow:#FFBFA0; --dot-color:rgba(61,26,79,0.16);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--ink); }
body {
color: var(--paper);
font-family: var(--f-body);
font-weight: 500;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
min-height: 100vh;
overflow: hidden;
position: relative;
}
/* Inside cream notebook panes — let typographic variation (strong/em/u)
do the work of emphasis. Body weight stays at 500 so at 700
and /u at 500 italic/underlined have real visual range. */
body.as-pane .pane-body p,
body.as-pane .pane-body li,
body.as-pane .pane-dek {
font-weight: 500;
}
body.as-pane .pane-body p strong,
body.as-pane .pane-body li strong {
font-weight: 700;
color: var(--ink);
}
body.as-pane .pane-body p em,
body.as-pane .pane-body li em {
font-style: italic;
font-weight: 500;
color: var(--ink);
}
body.as-pane .pane-body p u,
body.as-pane .pane-body li u {
text-decoration: none;
border-bottom: 1.5px solid var(--news);
padding-bottom: 1px;
font-weight: 500;
}
/* Inline quoted phrase — small caps mono, gives a "dossier label" feel. */
body.as-pane .pane-body p .term,
body.as-pane .pane-body li .term {
font-family: var(--f-mono);
font-size: 0.88em;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
font-weight: 600;
}
/* Soft secondary phrase — italic + lighter color for atmospheric asides. */
body.as-pane .pane-body p .soft,
body.as-pane .pane-body li .soft {
font-style: italic;
color: rgba(46, 22, 8, 0.62);
font-weight: 500;
}
body.pane-open, body.route-notes, body.route-entry { overflow: hidden; }
::selection { background: var(--news); color: var(--paper); }
/* Corner registration crosshairs */
.crosshair {
position: fixed;
width: 22px; height: 22px;
z-index: 5;
pointer-events: none;
}
.crosshair::before, .crosshair::after {
content: ""; position: absolute; background: var(--accent-port);
}
.crosshair::before { left: 0; width: 14px; top: 50%; height: 1.5px; transform: translateY(-0.75px); }
.crosshair::after { top: 0; height: 14px; left: 50%; width: 1.5px; transform: translateX(-0.75px); }
.crosshair span {
position: absolute;
width: 5px; height: 5px;
border: 1px solid var(--accent-port);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.crosshair.tl { top: 12px; left: 12px; }
.crosshair.tr { top: 12px; right: 12px; transform: scaleX(-1); }
.crosshair.bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.crosshair.br { bottom: 12px; right: 12px; transform: scale(-1, -1); }
body.route-notes .crosshair, body.route-entry .crosshair { color: var(--ink); }
body.route-notes .crosshair::before, body.route-notes .crosshair::after,
body.route-entry .crosshair::before, body.route-entry .crosshair::after { background: var(--news); }
body.route-notes .crosshair span, body.route-entry .crosshair span { border-color: var(--news); }
/* ============== HOME STAGE ============== */
.stage {
position: fixed;
inset: 0;
display: grid;
grid-template-rows: auto 1fr auto auto;
/* z-index removed: .stage no longer forms a stacking context, so .name and
.dek-tag can lift above the scrim (z:50) via their own z-index. */
transition: opacity 420ms ease, filter 420ms ease;
}
/* Dim treatment when any overlay is open (pane OR notes). Inside the left
column, only the longer dek paragraphs dim — the name and the tagline
(.dek-tag) stay at full brightness. Everything else dims at the same
intensity as the panes for a single coherent home-dim state. */
body.pane-open .stage,
body.notes-mode .stage { pointer-events: none; }
body.pane-open .masthead,
body.notes-mode .masthead { opacity: 0.42; transition: opacity 420ms ease; }
body.pane-open .composition .left,
body.notes-mode .composition .left { opacity: 1; transition: opacity 420ms ease; }
body.pane-open .composition .left .dek,
body.notes-mode .composition .left .dek { opacity: 0.22; transition: opacity 420ms ease; }
body.pane-open .composition .right,
body.notes-mode .composition .right { opacity: 0.22; transition: opacity 420ms ease; }
body.pane-open .card-strip,
body.notes-mode .card-strip { opacity: 0.22; filter: saturate(0.85); transition: opacity 420ms ease, filter 420ms ease; }
body.pane-open .foot-bar,
body.notes-mode .foot-bar { opacity: 0.42; transition: opacity 420ms ease; }
.masthead, .composition .left, .composition .right, .card-strip, .foot-bar {
transition: opacity 420ms ease, filter 420ms ease;
}
.crosshair { transition: opacity 420ms ease; }
body.pane-open .crosshair,
body.notes-mode .crosshair { opacity: 0.28; }
body.route-notes .stage, body.route-entry .stage { display: none; }
/* Static name glow — subtle in normal home view, boosted in pane/notes
mode so the name reads distinctly against the dim scrim around it.
Uses LOCKED --glow color (#FF5000). */
.name {
text-shadow:
0 0 16px color-mix(in srgb, var(--glow) calc(26% * var(--name-glow-intensity)), transparent),
0 0 44px color-mix(in srgb, var(--glow) calc(15% * var(--name-glow-intensity)), transparent),
0 0 110px color-mix(in srgb, var(--glow) calc(8% * var(--name-glow-intensity)), transparent);
transition: text-shadow var(--pane-dur) var(--ease);
}
/* Pane-open / notes-mode: lift .name + .dek-tag above the scrim (z 50)
and the notes overlay (z 55). Conditional — at rest the lift would put
name letters above the card-strip and break the behind-the-card glow. */
body.pane-open .name,
body.notes-mode .name,
body.pane-open .dek-tag,
body.notes-mode .dek-tag {
position: relative;
z-index: 56;
}
body.pane-open .name,
body.notes-mode .name {
text-shadow:
0 0 28px color-mix(in srgb, var(--glow) calc(60% * var(--name-glow-intensity)), transparent),
0 0 70px color-mix(in srgb, var(--glow) calc(38% * var(--name-glow-intensity)), transparent),
0 0 150px color-mix(in srgb, var(--glow) calc(22% * var(--name-glow-intensity)), transparent);
}
/* AU initials (.hl) get their own cobalt-blue halo. The default --glow is
orange/red which bleeds into the cobalt letters and reads as reddish-pink.
Using a deep cobalt for the halo so the AU reads as cohesive blue. */
.name .hl {
text-shadow:
0 0 16px color-mix(in srgb, #1538B5 calc(30% * var(--name-glow-intensity)), transparent),
0 0 44px color-mix(in srgb, #1538B5 calc(18% * var(--name-glow-intensity)), transparent),
0 0 110px color-mix(in srgb, #1538B5 calc(10% * var(--name-glow-intensity)), transparent);
}
body.pane-open .name .hl,
body.notes-mode .name .hl {
text-shadow:
0 0 28px color-mix(in srgb, #1538B5 calc(65% * var(--name-glow-intensity)), transparent),
0 0 70px color-mix(in srgb, #1538B5 calc(42% * var(--name-glow-intensity)), transparent),
0 0 150px color-mix(in srgb, #1538B5 calc(25% * var(--name-glow-intensity)), transparent);
}
@media (prefers-reduced-motion: reduce) {
.pane, .pane-scrim, .stage, .crosshair { transition: none !important; }
.name, body.pane-open .name, body.notes-mode .name { animation: none !important; }
}
/* Masthead — subtle frosted glass, palette-aware tint */
.masthead {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 32px;
padding: 16px 40px 14px;
border-bottom: 1px solid var(--hair-heavy);
/* Lower alpha so the blurred dots behind read clearly through the glass */
background: color-mix(in srgb, var(--ink) 35%, transparent);
backdrop-filter: blur(8px) saturate(1.3);
-webkit-backdrop-filter: blur(8px) saturate(1.3);
position: relative;
z-index: 4;
}
.mast-l {
display: inline-flex; align-items: baseline; gap: 18px;
}
.mast-l .front-page {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--f-mono);
font-size: 11px; letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--steel);
}
.mast-l .front-page .am { color: var(--paper); font-weight: 600; }
.mast-l .front-page .sep { color: var(--steel); }
.au-mark {
font-family: var(--f-display);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.04em;
color: var(--paper);
text-decoration: none;
display: inline-flex;
align-items: baseline;
}
.au-mark .hl { color: var(--hl-color); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.edition-line {
display: flex; justify-content: center; gap: 20px;
align-items: center; /* center the small mono labels around AU's vertical midpoint */
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--paper);
font-weight: 500;
}
.edition-line .ttl { font-family: var(--f-display); font-weight: 600; letter-spacing: 0.18em; font-size: 14px; }
/* AU mark in the edition-line center — bigger than the flanking mono labels
so it reads as the brand anchor. Left (Front page) and right (Filed time)
share font-size: 11px; AU sits ~3x larger. */
.edition-line .au-mark {
font-size: 32px;
letter-spacing: -0.04em;
line-height: 1;
align-self: center;
display: inline-flex;
align-items: center;
}
/* Lab-hidden state — dot click on the name toggles this. Both the design lab
bar (top-right) and the standalone type-lab (top-left) fade out together. */
body.lab-hidden .lab-bar,
body.lab-hidden .type-lab {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.lab-bar, .type-lab {
transition: opacity 200ms ease, visibility 200ms;
}
.edition-line .sep { color: var(--steel); }
.edition-line .am { color: var(--news); }
.time-stamp {
/* Sits in the third grid column of .masthead, right-aligned in the cell.
Masthead align-items: center keeps it vertically aligned with the
edition-line's center (where Front page text sits). */
justify-self: end;
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--f-mono);
font-size: 11px; letter-spacing: 0.16em;
color: var(--paper); text-transform: uppercase;
}
.time-stamp .v {
border: 1.5px solid var(--amber);
color: var(--amber);
padding: 3px 9px;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0.05em;
min-width: 108px;
text-align: center;
}
.time-stamp .label { color: var(--steel); }
/* Composition — asymmetric editorial (lead-story-right vocabulary).
padding-right: 0 so the FBI section sits flush against the viewport edge. */
.composition {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
/* overflow: visible so dragged name letters can escape into the card-strip
area below — page is one continuous canvas for the letter physics. */
gap: 56px;
padding: 32px 0 0 40px;
align-items: start;
overflow: visible;
min-height: 0;
}
.left { display: flex; flex-direction: column; height: 100%; min-width: 0; padding-top: 12px; }
/* NOTE: .name and .dek-tag previously had `position: relative; z-index: 56`
to escape the pane scrim (z 50) when a pane opened. That lift was hoisting
ALL letters above the card-strip in normal mode too — which broke the
"letters slide BEHIND cards" interaction. Lift is now conditional and lives
in the body.pane-open / body.notes-mode block lower in this file. */
.name {
font-family: var(--f-display);
font-weight: var(--display-weight, 750);
font-variation-settings: 'wght' var(--display-weight, 750);
font-size: clamp(64px, 7vw, 132px);
line-height: 0.92;
letter-spacing: -0.015em;
margin: 0;
color: var(--paper);
/* z-index lift conditionalized — see body.pane-open .name rule below */
}
.name .hl { color: var(--hl-color); }
/* Per-letter interactivity — magnetic at rest, draggable on pointerdown,
stays where dropped (toy mode). Dot is a clickable reset button. */
.name .ch {
display: inline-block;
transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0);
cursor: grab;
touch-action: none;
user-select: none;
/* No position / z-index — letter stays at composition's stack level so
siblings later in DOM (card-strip, foot-bar) paint OVER it naturally.
Only the text-shadow glow extends past the section's edge. */
transition: text-shadow 280ms var(--ease);
-webkit-user-select: none;
will-change: transform;
}
.name .ch.is-dragging { cursor: grabbing; }
/* Section-aware letter glow — when a letter is dragged behind a section,
JS sets --letter-glow + data-over-section. Large text-shadow blur leaks
past the section's edge as a halo, so the letter is "seen from behind." */
.name .ch[data-over-section] {
text-shadow:
0 0 30px var(--letter-glow, var(--news)),
0 0 70px var(--letter-glow, var(--news)),
0 0 130px var(--letter-glow, var(--news));
}
/* Dimmed-mode (pane open / notes overlay) — boost glow for FBI (red) and
Workshop (orange) so they stay visible against the dimmed background. */
body.pane-open .name .ch[data-over-section="fbi"],
body.notes-mode .name .ch[data-over-section="fbi"],
body.pane-open .name .ch[data-over-section="workshop"],
body.notes-mode .name .ch[data-over-section="workshop"] {
text-shadow:
0 0 40px var(--letter-glow),
0 0 90px var(--letter-glow),
0 0 160px var(--letter-glow),
0 0 220px var(--letter-glow);
}
.name .ch.is-resetting {
transition: transform 380ms cubic-bezier(0.7, 0, 0.2, 1);
}
.name .ch.dot {
background: transparent;
border: 0;
color: var(--paper);
font: inherit;
padding: 0;
margin: 0;
cursor: pointer;
position: relative;
line-height: inherit;
letter-spacing: inherit;
outline: none;
caret-color: transparent;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
appearance: none;
}
.name .ch.dot:focus { outline: none; }
.name .ch.dot:focus-visible {
outline: 2px solid var(--glow);
outline-offset: 6px;
}
.name .ch.dot::selection { background: transparent; }
/* No hover ring — the dot is a hidden easter egg. People find it by trying. */
@media (prefers-reduced-motion: reduce) {
.name .ch { transform: none !important; transition: none !important; }
.name .ch.dot::after { transition: none !important; }
}
.news-rule {
border: 0; height: 4px; background: var(--paper);
margin: 18px 0 6px; width: 100%; position: relative;
}
.news-rule::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: var(--paper); }
/* Sub-tagline — sits just under the name, smaller than the main dek so
the hierarchy reads: name → tagline → narrative dek paragraphs.
Max-width is constrained so it stays fully visible even when a pane is
open on the right (panes start at ~35vw from the left). */
.dek-tag {
font-family: var(--f-body);
font-style: italic;
font-weight: 500;
font-size: 14.5px;
line-height: 1.4;
color: var(--paper);
max-width: clamp(480px, 36vw, 700px);
margin: 12px 0 0;
letter-spacing: 0.005em;
/* z-index lift conditionalized — see body.pane-open .dek-tag rule below */
}
.dek-tag strong {
font-style: normal;
font-weight: 700;
color: var(--paper);
}
.dek-tag .em {
font-style: normal;
font-weight: 700;
color: var(--paper);
border-bottom: 1px solid var(--accent-port);
padding-bottom: 1px;
}
.dek {
font-family: var(--f-body);
font-style: italic; font-weight: 500;
font-size: 18px; line-height: 1.5;
color: color-mix(in srgb, var(--paper) 90%, transparent);
max-width: clamp(540px, 62vw, 880px);
margin: 24px 0 0;
}
.dek strong {
font-style: normal;
font-weight: 800;
color: var(--paper);
letter-spacing: -0.005em;
}
.dek em {
font-style: italic;
font-weight: 600;
color: var(--paper);
}
.dek .em {
font-style: normal;
font-weight: 700;
color: var(--paper);
border-bottom: 1px solid var(--accent-port);
padding-bottom: 2px;
}
.dek .quiet {
font-style: italic;
font-weight: 400;
color: var(--steel);
}
/* FBI hero — editorial lead-story vocabulary (single-column composition) */
.fbi-wrap {
margin-top: 0; padding-top: 0; padding-bottom: 0;
display: block;
width: 100%; max-width: 620px;
}
.fbi {
position: relative;
display: block;
color: var(--fbi-ink);
border: 1px solid rgba(0,0,0,0.4);
padding: 0;
text-decoration: none;
/* Background-sensitive shadow — uses the current scheme's --ink-deep
(a deeper tone of the page bg) so the shadow integrates with the
palette instead of fighting bright backgrounds with pure black. */
box-shadow:
5px 6px 0 0 var(--ink-deep),
12px 18px 44px -10px color-mix(in srgb, var(--ink-deep) 65%, transparent);
/* Notebook grid — matches the pane treatment exactly: cream #F2E6C8 page
with 30px squared gridlines in ink-tinted brown. Visual continuity
between home's FBI teaser and the opened pane content. */
background-color: #F2E6C8; /* default: solid cream paper */
background-image:
linear-gradient(to right, rgba(46, 22, 8, 0.09) 1px, transparent 1px),
linear-gradient(to bottom, rgba(46, 22, 8, 0.09) 1px, transparent 1px);
background-size: 30px 30px;
z-index: 2;
cursor: pointer;
overflow: hidden;
/* Hover system — pure 3D on FBI, all glow disabled.
Tilt strength bumped to ±3° (vs ±1.5° on strip), translateZ pop on hover. */
--mx: 50%; --my: 50%;
--tx: 0deg; --ty: 0deg;
--lift: 0px;
--liftZ: 0px;
--tilt-strength: 6; /* ±3° — twice the strip cards */
--glow-blend: normal;
--glow-color: transparent;
--glow-alpha: 0;
transform-style: preserve-3d;
transform: perspective(1600px) translateZ(var(--liftZ)) translateY(var(--lift)) rotateX(var(--ty)) rotateY(var(--tx));
transition:
transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
box-shadow 320ms ease,
opacity 200ms ease;
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.fbi:hover {
--lift: -4px;
--liftZ: 24px;
/* Bigger, denser bg-sensitive shadow on hover — the 3D pop reads as
a real lift because the cast shadow comes from the scheme's --ink-deep. */
box-shadow:
7px 8px 0 0 var(--ink-deep),
22px 36px 70px -14px color-mix(in srgb, var(--ink-deep) 60%, transparent);
}
/* Compact LIVE badge — top-right of FBI card. Green pill, black text,
no dot — the badge itself pulses via expanding box-shadow ring. */
.fbi-live {
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: #00E676;
color: var(--fbi-ink);
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 800;
z-index: 4;
pointer-events: none;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.18);
animation: live-pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes live-pulse {
0%, 100% {
background: #00E676;
box-shadow:
0 0 0 0 rgba(0, 255, 128, 0),
0 0 0 0 rgba(0, 230, 118, 0);
transform: scale(1);
}
18% {
background: #5BFFAA;
box-shadow:
0 0 0 3px rgba(0, 255, 128, 0.55),
0 0 26px 5px rgba(0, 255, 128, 0.6);
transform: scale(1.08);
}
60% {
background: #00E676;
box-shadow:
0 0 0 16px rgba(0, 230, 118, 0),
0 0 36px 10px rgba(0, 230, 118, 0);
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.fbi-live { animation: none !important; }
}
/* FBI corner brackets — each corner has TWO arms (horizontal + vertical)
that draw outward from the corner. Bottom pair (BL + BR) forms a U:
horizontal arms meet in the middle of the bottom edge, verticals go up
halfway along the sides — open at top. Top pair (TL + TR) forms the
reverse-U at the top edge. Bottom is faster, finishes first; top draws
"afterwards" with a delay so the sequence reads as bottom → top.
Locked to --fbi-red (does not follow palette). */
.fbi-bracket {
position: absolute;
width: 50%; height: 50%;
pointer-events: none;
z-index: 4;
}
.fbi-bracket--tl { top: 0; left: 0; }
.fbi-bracket--tr { top: 0; right: 0; }
.fbi-bracket--bl { bottom: 0; left: 0; }
.fbi-bracket--br { bottom: 0; right: 0; }
.fbi-bracket svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fbi-bracket .arm {
stroke: var(--fbi-red);
stroke-width: 1.5;
fill: none;
stroke-linecap: square;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
/* Bottom — both arms fire immediately, fast draw (the U snaps in) */
.fbi-bracket--bl .arm,
.fbi-bracket--br .arm {
transition: stroke-dashoffset 400ms cubic-bezier(0.7, 0, 0.2, 1);
transition-delay: 0ms;
}
/* Top — both arms wait until the bottom U has completed, then draw slower
(the reverse-U emerges after, combining with the 3D tilt for depth) */
.fbi-bracket--tl .arm,
.fbi-bracket--tr .arm {
transition: stroke-dashoffset 760ms cubic-bezier(0.65, 0, 0.35, 1);
transition-delay: 420ms;
}
.fbi:hover .fbi-bracket .arm { stroke-dashoffset: 0; }
/* Top masthead strip — editorial red breaking-news bar */
.fbi-mast {
background: var(--fbi-red); color: var(--paper);
padding: 8px 22px;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--f-mono);
font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; font-weight: 700;
}
.fbi-mast-l { display: inline-flex; align-items: center; gap: 10px; }
.fbi-mast-l .pulse {
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: var(--amber);
animation: pulse 1.0s ease-in-out infinite;
}
.fbi-mast-r {
color: var(--amber);
font-weight: 700; letter-spacing: 0.20em;
font-variant-numeric: tabular-nums;
}
/* Body composition */
.fbi-body {
padding: 22px 28px 22px;
display: flex; flex-direction: column;
gap: 12px;
}
/* FBI logoblock — horizontal mark (court+reticle) LEFT, wordmark RIGHT.
Hover is scoped to JUST the logoblock (mark + wordmark + tagline overlay),
not the entire FBI card. The tagline absolutely-positions below the title
so it OVERLAYS the card body — does NOT push content below. */
.fbi-logoblock {
display: flex;
align-items: flex-start;
gap: 14px;
position: relative;
/* Small padding-bottom keeps the tagline area inside the :hover hit zone;
large negative margin pulls the lead paragraph below up close to the mark. */
padding-bottom: 8px;
margin-bottom: -8px;
cursor: pointer;
}
.fbi-mark {
width: 96px; height: 96px;
display: block;
flex-shrink: 0;
overflow: visible;
}
/* Reticle + court — exact-copy of the original v19 source's animation
(logos-v19.jsx AnimatedMark): JS toggles .is-focused on mouseenter,
reticle transitions over 700ms with cubic-bezier(0.7, 0, 0.2, 1) to the
contracted rim state, then unfocus returns it. The focused class is held
for 1400ms regardless of hover state, so the in-hold-out cycle always
completes. Same selectors used on home (.fbi-mark) and inside the
FBI pane iframe (same .fbi-mark class). */
.fbi-mark .reticle-g {
transform-origin: 70px 70px;
transform: translate(0px, 0px) scale(1);
transition: transform 700ms cubic-bezier(0.7, 0, 0.2, 1);
will-change: transform;
}
.fbi-mark.is-focused .reticle-g {
transform: translate(0px, -29.52px) scale(0.42);
}
.fbi-mark .court-g {
transition: opacity 500ms ease;
opacity: 1;
}
.fbi-mark.is-focused .court-g {
opacity: 0.65;
}
/* FBI pane title — horizontal layout: mark on the left, FBI wordmark
to its right (title + tagline stacked). Same timings as the original
v19 source. */
.fbi-pane-logoblock {
display: flex;
flex-direction: row;
align-items: center;
gap: 28px;
cursor: pointer;
user-select: none;
margin: 0 0 28px;
}
.fbi-pane-logoblock .fbi-mark {
width: clamp(120px, 13vw, 180px);
height: clamp(120px, 13vw, 180px);
display: block;
overflow: visible;
flex-shrink: 0;
}
.fbi-pane-wordmark {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
min-width: 0;
}
.fbi-pane-title {
font-family: var(--f-display);
font-weight: 800;
font-size: clamp(36px, 4.2vw, 50px);
letter-spacing: 0.12em;
color: var(--fbi-ink);
line-height: 1;
padding-left: 0.12em;
}
.fbi-pane-tagline {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(-8px);
transition:
max-height 600ms cubic-bezier(0.7, 0, 0.2, 1),
opacity 450ms ease 120ms,
transform 600ms cubic-bezier(0.7, 0, 0.2, 1);
}
.fbi-pane-tagline span {
font-family: var(--f-mono);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.26em;
color: #5A6378;
text-transform: uppercase;
white-space: nowrap;
}
.fbi-pane-logoblock .fbi-mark.is-hovered ~ .fbi-pane-wordmark .fbi-pane-tagline {
max-height: 60px;
opacity: 1;
transform: translateY(0);
}
/* Filed stamp — small mono "Filed · December 2025" tag anchored to the
right of the logoblock. Mirrors masthead's "Filed 23:47" treatment. */
.fbi-filed-stamp {
margin-left: auto;
align-self: flex-start;
display: inline-flex;
align-items: baseline;
gap: 8px;
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(46, 22, 8, 0.55);
padding: 6px 0 0;
}
.fbi-filed-stamp .lbl { color: rgba(46, 22, 8, 0.45); }
.fbi-filed-stamp .val {
color: var(--news);
border: 1px solid rgba(46, 22, 8, 0.32);
padding: 3px 8px;
font-weight: 600;
}
/* =================== FBI · TIER STRIP =================== */
.pane-body .fbi-tier-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin: 36px 0 32px;
padding: 28px 0;
border-top: 1.5px solid var(--ink);
border-bottom: 1.5px solid var(--ink);
}
.pane-body .fbi-tier-strip .tier {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 0 16px;
border-right: 1px solid rgba(46, 22, 8, 0.18);
}
.pane-body .fbi-tier-strip .tier:last-child { border-right: 0; }
.pane-body .fbi-tier-strip .tier .badge {
width: 42px;
height: 42px;
color: var(--news);
}
.pane-body .fbi-tier-strip .tier[data-tier="solid"] .badge { color: var(--ink); }
.pane-body .fbi-tier-strip .tier[data-tier="stream"] .badge { color: rgba(46, 22, 8, 0.60); }
.pane-body .fbi-tier-strip .tier[data-tier="drop"] .badge { color: rgba(46, 22, 8, 0.40); }
.pane-body .fbi-tier-strip .tier .label {
font-family: var(--f-display);
font-weight: 800;
font-size: 16px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
line-height: 1;
}
.pane-body .fbi-tier-strip .tier .meta {
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(46, 22, 8, 0.55);
line-height: 1;
}
/* =================== FBI · DATA FLOW =================== */
.pane-body .fbi-dataflow {
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto auto;
align-items: end;
justify-content: center;
gap: 10px;
margin: 28px 0;
padding: 28px 24px 20px;
border: 1.5px solid var(--ink);
background:
linear-gradient(to right, rgba(46, 22, 8, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
linear-gradient(to bottom, rgba(46, 22, 8, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
rgba(255, 250, 235, 0.3);
}
.pane-body .fbi-dataflow .flow-col {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.pane-body .fbi-dataflow .col-label {
font-family: var(--f-mono);
font-size: 8.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--news);
text-align: center;
margin-bottom: 4px;
font-weight: 700;
}
.pane-body .fbi-dataflow .src {
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--ink);
border: 1px solid var(--ink);
padding: 4px 10px;
text-align: center;
background: rgba(255, 250, 235, 0.6);
letter-spacing: 0.04em;
}
.pane-body .fbi-dataflow .node {
font-family: var(--f-display);
font-weight: 700;
font-size: 13px;
color: var(--ink);
border: 1.5px solid var(--ink);
padding: 10px 14px;
text-align: center;
background: rgba(255, 250, 235, 0.6);
display: flex;
flex-direction: column;
gap: 4px;
min-width: 110px;
}
.pane-body .fbi-dataflow .node .sub {
font-family: var(--f-mono);
font-weight: 400;
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(46, 22, 8, 0.6);
margin-top: 2px;
}
.pane-body .fbi-dataflow .node.bayesian {
background: rgba(199, 38, 49, 0.10);
border-color: var(--news);
}
.pane-body .fbi-dataflow .node.tier {
background: var(--news);
color: var(--paper);
border-color: var(--news-deep);
}
.pane-body .fbi-dataflow .flow-arrow {
font-family: var(--f-mono);
font-size: 22px;
color: var(--news);
line-height: 1;
padding: 0 2px;
padding-bottom: 12px;
}
.pane-body .fbi-dataflow figcaption {
grid-column: 1 / -1;
text-align: center;
margin-top: 18px;
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(46, 22, 8, 0.55);
}
@media (max-width: 900px) {
.pane-body .fbi-dataflow {
grid-template-columns: 1fr;
}
.pane-body .fbi-dataflow .flow-arrow {
transform: rotate(90deg);
align-self: center;
padding: 4px 0;
}
}
/* =================== FBI · FAILURE STAMPS =================== */
.pane-body .failures li {
position: relative;
}
.pane-body .failures .fail-stamp {
display: inline-block;
font-family: var(--f-mono);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--news);
border: 2px solid var(--news);
padding: 4px 10px;
background: rgba(255, 250, 235, 0.4);
transform: rotate(-3deg);
transform-origin: center center;
box-shadow: inset 0 0 0 1px rgba(199, 38, 49, 0.2);
margin-left: 14px;
align-self: center;
}
.pane-body .failures .fail-stamp[data-stamp="killed"] { transform: rotate(2deg); }
.pane-body .failures .fail-stamp[data-stamp="reverted"] { transform: rotate(-2deg); }
/* =================== FBI · LIVE DEPLOYMENT SCREENSHOT =================== */
.pane-body .fbi-deploy-shot {
width: 60%;
max-width: 560px;
margin: 24px 0 0;
border: 1.5px solid var(--ink);
background: rgba(255, 250, 235, 0.5);
overflow: hidden;
}
.pane-body .fbi-deploy-shot .browser-chrome {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--ink);
border-bottom: 1.5px solid var(--ink);
}
.pane-body .fbi-deploy-shot .chrome-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
}
.pane-body .fbi-deploy-shot .chrome-dot:first-child { background: var(--news); }
.pane-body .fbi-deploy-shot .chrome-url {
margin-left: 12px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.7);
}
.pane-body .fbi-deploy-shot .shot-body {
aspect-ratio: 16 / 10;
background:
repeating-linear-gradient(
45deg,
rgba(46, 22, 8, 0.04) 0,
rgba(46, 22, 8, 0.04) 1px,
transparent 1px,
transparent 14px
),
#F0E2C2;
display: grid;
place-items: center;
}
.pane-body .fbi-deploy-shot .shot-caption {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(46, 22, 8, 0.55);
padding: 6px 10px;
background: rgba(255, 250, 235, 0.7);
border: 1px solid rgba(46, 22, 8, 0.32);
}
.fbi-wordmark {
display: flex; flex-direction: column;
padding-top: 0;
min-width: 0;
position: relative; /* anchor for absolute tagline */
}
.fbi-wordmark .fbi-title { margin: 0; }
/* Tagline — absolutely positioned BELOW the FBI title.
Doesn't push content below; emerges as an overlay on hover. */
.fbi-tagline {
position: absolute;
top: 100%;
left: 0;
margin-top: 8px;
display: flex; flex-direction: column;
gap: 2px;
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition:
opacity 450ms ease 120ms,
transform 600ms cubic-bezier(0.7, 0, 0.2, 1);
}
.fbi-tagline span {
font-family: var(--f-mono);
font-weight: 600;
font-size: 10.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--steel-paper);
white-space: nowrap;
}
.fbi-mark.is-hovered ~ .fbi-wordmark .fbi-tagline {
opacity: 1;
transform: translateY(0);
}
.fbi-eye {
font-family: var(--f-mono);
font-size: 10px; letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--fbi-red-deep); font-weight: 700;
}
.fbi-title {
font-family: var(--f-display);
font-weight: 700;
font-size: clamp(48px, 4vw, 68px);
line-height: 0.9;
letter-spacing: -0.06em;
margin: 0;
color: var(--fbi-ink);
}
.fbi-title .dot { color: var(--fbi-red); }
/* Lead paragraph — the WHAT */
.fbi-lead {
font-family: var(--f-body);
font-weight: 700; font-style: normal;
font-size: 14.5px; line-height: 1.6;
color: var(--fbi-ink); max-width: 56ch;
margin: 4px 0 0;
}
.fbi-lead em {
font-style: italic;
color: var(--fbi-ink);
border-bottom: 1px solid var(--fbi-red);
padding-bottom: 1px;
}
/* Definition list — Built with · What I gained */
.fbi-list {
display: flex; flex-direction: column;
gap: 10px;
margin-top: 4px;
padding: 14px 0 4px;
border-top: 1px dashed rgba(14, 17, 23, 0.30);
}
.fbi-item {
display: flex; flex-direction: column;
gap: 4px;
}
.fbi-item-l {
font-family: var(--f-mono);
font-size: 9.5px; letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fbi-red-deep); font-weight: 700;
}
.fbi-item-v {
font-family: var(--f-body);
font-size: 13.5px; line-height: 1.5;
font-weight: 700;
color: var(--fbi-ink);
}
.fbi-item-v .live {
font-family: var(--f-mono);
color: var(--fbi-red); font-weight: 700;
border: 1.5px solid var(--fbi-red);
padding: 1px 6px; margin-left: 6px;
font-size: 9.5px; letter-spacing: 0.16em;
text-transform: uppercase;
vertical-align: 2px;
}
.fbi-item-v .q { color: rgba(14, 17, 23, 0.55); }
/* Bottom strip — "Open case study" cta */
.fbi-cta {
display: flex; justify-content: flex-end; align-items: center;
gap: 18px;
margin-top: 8px;
padding-top: 12px;
border-top: 1px solid rgba(14, 17, 23, 0.25);
}
.fbi-cta .open {
font-family: var(--f-display);
font-weight: 500; font-size: 13px;
letter-spacing: -0.01em;
color: var(--fbi-ink);
border-bottom: 2px solid var(--fbi-red);
padding-bottom: 2px;
transition: color 200ms ease, padding-right 200ms var(--ease);
}
.fbi:hover .fbi-cta .open { color: var(--fbi-red); padding-right: 4px; }
/* Right column — now hosts the FBI hero (was 3 cards) */
.right { display: flex; flex-direction: column; gap: 22px; padding-top: 0; min-width: 0; align-items: stretch; }
/* Card strip — asymmetric trio (Workshop wider · Notes mid · Meet compact).
border-top removed so the page reads as a single continuous body — letters
dragged from the name can pass through this region without a hairline break. */
.card-strip {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.85fr);
gap: 32px;
padding: 24px 40px 28px;
align-items: stretch;
isolation: isolate; /* contain card stacking contexts so glass + letter glow layering stays predictable */
}
.card-strip .section { height: 100%; }
.card-strip .card { height: 100%; display: flex; flex-direction: column; }
.card-strip .card p { max-width: none; }
.section { display: flex; flex-direction: column; gap: 10px; }
.section-eyebrow {
display: flex; align-items: center; gap: 12px;
font-family: var(--f-mono);
font-size: 11px; letter-spacing: 0.20em;
text-transform: uppercase; color: var(--steel);
border-bottom: 2px solid var(--paper);
padding-bottom: 6px;
}
.section-eyebrow .rule { flex: 1; height: 1px; background: transparent; }
.section-eyebrow .am { color: var(--news); font-weight: 600; }
.section-eyebrow .label { color: var(--paper); font-weight: 600; }
.section-fbi .section-eyebrow { width: 100%; max-width: 620px; }
.card {
position: relative;
z-index: 2; /* paint above letters; frosted-glass treatment is conditional (see triggers below) */
border: 1px solid var(--ink-line);
padding: 22px 26px 18px;
text-decoration: none; color: var(--paper);
background: var(--ink-2); /* default: solid palette block */
cursor: pointer;
transition:
transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
background 220ms ease,
backdrop-filter 220ms ease,
opacity 200ms ease;
/* Hover system — cursor-tracking + 3D tilt variables, GPU-only transforms */
--mx: 50%; --my: 50%;
--tx: 0deg; --ty: 0deg;
--lift: 0px;
--liftZ: 0px;
--tilt-strength: 3; /* JS reads this; ±1.5° at default */
--glow-blend: screen;
--glow-color: var(--glow);
--glow-alpha: 0.32;
transform-style: preserve-3d;
transform: perspective(1600px) translateZ(var(--liftZ)) translateY(var(--lift)) rotateX(var(--ty)) rotateY(var(--tx));
transition:
transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
background 220ms ease,
opacity 200ms ease;
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card:hover { background: var(--ink-3); --lift: -2px; }
/* Vertical sweep — GPU-friendly: transform instead of animating `left`.
Uses --glow (per-palette custom color) for cohesion with the perimeter trace. */
.card::after {
content: ""; position: absolute; top: 0; bottom: 0; left: 0;
width: 2px;
background: var(--glow);
filter:
drop-shadow(0 0 4px var(--glow))
drop-shadow(0 0 12px var(--glow));
transform: translateX(-8px);
opacity: 0;
transition: transform 700ms var(--ease), opacity 200ms ease;
pointer-events: none;
z-index: 3;
}
.card:hover::after {
/* --card-w is set by broadsheet-lab.js (offsetWidth → full border-box width). */
transform: translateX(calc(var(--card-w, 9999px) + 8px));
opacity: 1;
}
/* Perimeter trace — single-color glow-bar tracing the card edge.
Conic gradient creates a narrow "head" arc that travels around the
perimeter; stacked drop-shadow filters create the EL-wire halo bleed. */
.card::before {
content: ''; position: absolute; inset: 0;
padding: 1.5px;
background: conic-gradient(
from var(--trace-angle),
transparent 0deg,
var(--glow) 22deg,
var(--glow) 68deg,
transparent 92deg
);
-webkit-mask:
linear-gradient(#000, #000) content-box,
linear-gradient(#000, #000);
-webkit-mask-composite: xor;
mask-composite: exclude;
filter:
drop-shadow(0 0 4px var(--glow))
drop-shadow(0 0 12px var(--glow));
opacity: 0;
transition: opacity 200ms ease-out;
pointer-events: none;
z-index: 2;
}
.card:hover::before {
opacity: 1;
/* Infinite slow rotation — keeps all 4 sides lit over each cycle.
One-shot 700ms left the top/left dim after parking at 360°. */
animation: card-trace 2.8s linear infinite;
}
@keyframes card-trace {
from { --trace-angle: 0deg; }
to { --trace-angle: 360deg; }
}
.card h3 {
font-family: var(--f-display);
font-weight: 400; font-size: 25px;
line-height: 1.1; letter-spacing: -0.045em;
margin: 0 0 8px; color: var(--paper);
}
.card p { font-size: 14px; line-height: 1.55; margin: 0; color: var(--paper); max-width: 38ch; font-weight: 700; }
.card p .q { color: var(--steel); }
.card p em { font-style: italic; color: var(--paper); }
/* Card foot — single inline row, no dividers, no border-top */
.card .foot {
margin-top: auto;
padding-top: 18px;
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
font-family: var(--f-mono);
font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--steel);
}
.card .foot .am { color: var(--hl-color); }
/* Notes card "View all ↗" — Unbounded weight differentiator to signal
external/index navigation distinct from the other cards' Mono "→".
Color matches AU (cobalt) so all three card CTAs read as one family. */
.card .foot .notes-cta {
font-family: var(--f-display);
font-weight: 500;
font-size: 12px;
letter-spacing: -0.01em;
text-transform: none;
color: var(--hl-color);
}
/* Footer */
.foot-bar {
display: grid; grid-template-columns: 1fr auto;
gap: 24px; align-items: center;
padding: 14px 40px 16px;
border-top: 1px solid var(--hair-heavy);
font-family: var(--f-mono);
font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--steel);
/* Lower alpha so the blurred dots behind read clearly through the glass */
background: color-mix(in srgb, var(--ink) 35%, transparent);
backdrop-filter: blur(8px) saturate(1.3);
-webkit-backdrop-filter: blur(8px) saturate(1.3);
position: relative;
z-index: 4;
}
.foot-bar a { color: var(--paper); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.foot-bar a:hover { border-bottom-color: var(--news); }
/* Override .right (composition flex-column) for the foot-bar's right span,
which collides on class name. Without this, the 5 links stack vertically
and inflate the foot-bar height by ~140px, clipping the FBI hero card. */
.foot-bar .right { text-align: right; display: block; }
/* ============== NOTES OVERLAY (inline transparent layer) ==============
Special state for the Notes card. Unlike fbi/workshop/meet (slide pane),
Notes opens an in-place overlay that preserves the name (only 10–15% dim),
hides the card-strip, and surfaces two transparent backdrop-blurred panels:
an index on the bottom-left and a reader on the right. The dot grid + dek
remain visible through the blur. */
.notes-overlay {
position: fixed; inset: 0;
z-index: 55;
pointer-events: none;
opacity: 0;
background: transparent;
transition: opacity var(--pane-dur) var(--ease);
}
/* Pseudo-element acts as the scrim layer (same dark color + alpha as
.pane-scrim). Sits behind the real children (.notes-reader) so it dims
the home without affecting the reader. */
.notes-overlay::before {
content: "";
position: absolute;
inset: 0;
background: rgba(7, 9, 14, 0.65);
pointer-events: none;
}
body.notes-mode .notes-overlay {
opacity: 1;
pointer-events: auto;
}
/* Dim treatment is inherited from body.pane-open (which notes-mode also
applies). No duplicated rules — single source of truth. */
/* Notes reader — exact same properties as .pane (FBI/Workshop/Meet).
Slide-from-right, identical timing + easing. The index sidebar lives
inside the reader so it inherits this animation automatically. */
.notes-reader {
background-color: #F2E6C8;
background-image:
linear-gradient(to right, rgba(46, 22, 8, 0.09) 1px, transparent 1px),
linear-gradient(to bottom, rgba(46, 22, 8, 0.09) 1px, transparent 1px);
background-size: 30px 30px;
color: var(--ink);
transform: translateX(calc(100% + 8px));
transition: transform var(--pane-dur) var(--ease);
}
body.notes-mode .notes-reader { transform: translateX(0); }
/* INDEX — now a sidebar INSIDE the cream reader page. Same notebook bg
inherited from .notes-reader; only a vertical hairline divider sets it
apart from the article body. */
.notes-index {
position: static;
width: auto;
height: auto;
inset: auto;
padding: 56px 40px 56px 32px;
display: flex; flex-direction: column;
overflow: hidden;
background: transparent;
border: 0;
box-shadow: none;
color: var(--ink);
border-left: 1px solid rgba(46, 22, 8, 0.18);
}
.notes-index-eye {
display: flex; align-items: center; gap: 10px;
font-family: var(--f-mono);
font-size: 10.5px; letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(46, 22, 8, 0.55);
padding-bottom: 10px;
border-bottom: 1px solid rgba(46, 22, 8, 0.18);
margin-bottom: 12px;
}
.notes-index-eye .label { color: var(--ink); font-weight: 700; }
.notes-index-eye .hint { flex: 1; color: rgba(46, 22, 8, 0.55); font-weight: 500; }
.notes-close {
background: transparent; border: 1px solid rgba(46, 22, 8, 0.3);
color: var(--ink);
width: 26px; height: 26px;
display: grid; place-items: center;
cursor: pointer;
transition: border-color 180ms, color 180ms, transform 180ms var(--ease);
}
.notes-close:hover { border-color: var(--news); color: var(--news); transform: rotate(90deg); }
.notes-list {
list-style: none; padding: 0 4px 4px 0; margin: 0;
flex: 1;
display: flex; flex-direction: column;
gap: 4px;
overflow-y: auto; overflow-x: hidden;
overscroll-behavior: contain;
}
.notes-list li {
position: relative;
width: 100%;
display: grid;
grid-template-columns: 80px 1fr;
align-items: center;
column-gap: 16px;
padding: 10px 14px 10px 24px;
border-left: 3px solid transparent;
cursor: pointer;
overflow: hidden; /* clip the sweep line at row edges */
transition: background 180ms ease, border-color 180ms ease;
}
/* Vertical line that sweeps left-to-right on hover — same shape as the
home strip cards' ::after sweep, but with no glow / drop-shadow.
End position is calc(100%-3px) so the line stays fully visible at the
right edge rather than getting clipped past 100%. The active item also
parks its line at the right (replaces the old left-side border). */
.notes-list li::after {
content: "";
position: absolute;
top: 0; bottom: 0;
left: -3px;
width: 3px;
background: var(--news);
opacity: 0;
transition: left 700ms var(--ease), opacity 200ms ease;
pointer-events: none;
}
.notes-list li:hover::after,
.notes-list li.is-active::after {
left: calc(100% - 3px);
opacity: 1;
}
.notes-list li:hover {
background: rgba(46, 22, 8, 0.07);
}
.notes-list li.is-active {
background: rgba(46, 22, 8, 0.10);
/* No left-side border anymore — the line lives on the right via ::after */
}
.notes-list .num-btn {
grid-column: 1;
font-family: var(--f-mono);
font-size: 10.5px; letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: rgba(46, 22, 8, 0.6);
background: rgba(255, 250, 235, 0.55); /* solid light tint so badge pops on grid */
border: 1.5px solid rgba(46, 22, 8, 0.32);
padding: 7px 8px;
cursor: pointer;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
pointer-events: none;
transition:
color 180ms ease,
background 180ms ease,
border-color 180ms ease;
}
.notes-list li:hover .num-btn {
color: var(--news);
border-color: var(--news);
background: rgba(29, 149, 64, 0.10);
}
.notes-list li.is-active .num-btn {
color: var(--news);
border-color: var(--news);
background: rgba(29, 149, 64, 0.14);
}
.notes-list .note-meta {
grid-column: 2;
display: flex; flex-direction: column;
gap: 3px;
}
.notes-list .t {
font-family: var(--f-display);
font-weight: 600;
font-size: 16px; line-height: 1.18;
letter-spacing: -0.02em;
color: var(--ink);
}
.notes-list .d {
font-family: var(--f-mono);
font-size: 9.5px; letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(46, 22, 8, 0.55);
font-weight: 500;
}
/* Custom scrollbar — for cream notebook */
.notes-list::-webkit-scrollbar { width: 6px; }
.notes-reader-scroll::-webkit-scrollbar { width: 8px; }
.notes-list::-webkit-scrollbar-track,
.notes-reader-scroll::-webkit-scrollbar-track { background: transparent; }
.notes-list::-webkit-scrollbar-thumb,
.notes-reader-scroll::-webkit-scrollbar-thumb {
background: rgba(46, 22, 8, 0.22);
border-radius: 4px;
}
.notes-list::-webkit-scrollbar-thumb:hover,
.notes-reader-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(46, 22, 8, 0.4);
}
.notes-list, .notes-reader-scroll {
scrollbar-width: thin;
scrollbar-color: rgba(46, 22, 8, 0.28) transparent;
}
/* READER — mirrors pane geometry exactly (same width/min/max). Inside, a
2-column grid holds the article on the left and the index sidebar on the
right; both share the cream notebook bg, so the index reads as part of
the page. */
.notes-reader {
position: fixed;
top: 0;
bottom: auto;
right: 0;
height: 100vh;
width: 62%;
min-width: 700px;
max-width: 1240px;
padding: 0;
overflow: hidden;
display: flex; flex-direction: column;
overscroll-behavior: contain;
box-shadow: -32px 0 60px -28px rgba(0, 0, 0, 0.7);
border-left: 1px solid rgba(46, 22, 8, 0.18);
z-index: 60;
}
.notes-reader > .pane-header { flex: 0 0 auto; }
.notes-reader-grid {
flex: 1;
display: grid;
grid-template-columns: 1fr clamp(280px, 28%, 360px);
overflow: hidden;
min-height: 0;
}
.notes-reader .notes-reader-scroll {
overflow-y: auto;
overscroll-behavior: contain;
padding: 56px 56px 56px;
min-width: 0;
}
.notes-reader-eye {
display: flex; align-items: center; gap: 12px;
font-family: var(--f-mono);
font-size: 10.5px; letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(46, 22, 8, 0.55);
padding-bottom: 10px;
border-bottom: 1px solid rgba(46, 22, 8, 0.18);
margin-bottom: 16px;
}
.notes-reader-eye .meta-l { color: var(--news); font-weight: 700; }
.notes-reader-title {
font-family: var(--f-display);
font-weight: 600;
font-size: clamp(36px, 4.4vw, 56px);
line-height: 1.02;
letter-spacing: -0.035em;
margin: 0 0 20px;
color: var(--ink);
}
.notes-reader-body p {
font-family: var(--f-body);
font-size: 15px; line-height: 1.62;
font-weight: 500;
color: var(--ink);
margin: 0 0 14px;
max-width: 60ch;
}
.notes-reader-body p.lede {
font-size: 17px; font-weight: 600; font-style: italic;
color: rgba(46, 22, 8, 0.82);
margin-bottom: 18px;
}
.notes-reader-body em {
font-style: italic;
border-bottom: 1px solid var(--news);
padding-bottom: 1px;
}
.notes-reader-body .closing-mark {
font-family: var(--f-mono);
color: var(--news);
text-align: center;
font-size: 18px;
margin-top: 22px;
}
/* Reduced motion — instant on, no slide */
@media (prefers-reduced-motion: reduce) {
.notes-overlay, .notes-index, .notes-reader,
body.notes-mode .composition .left,
body.notes-mode .composition .right,
body.notes-mode .card-strip,
body.notes-mode .foot-bar { transition: none !important; }
.notes-index, .notes-reader { transform: none; }
}
/* Intermediate viewports (1024-1279) — narrower sidebar so the article
column still has room to breathe. */
@media (max-width: 1279px) and (min-width: 1024px) {
.notes-reader-grid {
grid-template-columns: 1fr clamp(240px, 30%, 320px);
}
.notes-reader .notes-reader-scroll { padding: 40px 36px 40px; }
.notes-index { padding: 40px 28px 40px 24px; }
}
/* Mobile — stack the article over the index */
@media (max-width: 1023px) {
.notes-reader { width: 100%; max-width: 100%; min-width: 0; }
.notes-reader-grid {
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
}
.notes-index {
border-left: 0;
border-top: 1px solid rgba(46, 22, 8, 0.18);
max-height: 38vh;
padding: 22px 24px;
}
}
/* ============== AS-PANE — cream notebook with square grid ==============
Applied when a standalone page (fbi/workshop/meet) renders inside the
home's iframe pane. The pane reads as a yellow-cream notebook page over
the dark home, with subtle squared gridlines. Text colors stay at the
standalone defaults (dark ink on cream — already readable). */
body.as-pane {
background-color: #F2E6C8 !important;
color: var(--ink) !important;
background-image:
linear-gradient(to right, rgba(46, 22, 8, 0.09) 1px, transparent 1px),
linear-gradient(to bottom, rgba(46, 22, 8, 0.09) 1px, transparent 1px) !important;
background-size: 30px 30px !important;
background-attachment: fixed !important;
}
body.as-pane .pane,
body.as-pane .pane-body {
background: transparent !important;
background-image: none !important;
}
/* Pane header — brown bar gone, texts sit directly on the cream notebook
with only a thin hairline under them (no green strip, no dark fill). */
body.as-pane .pane-header {
background: transparent !important;
border-bottom: 1px solid rgba(46, 22, 8, 0.28) !important;
padding: 16px 40px !important;
}
body.as-pane .pane-header .au-mini {
color: var(--hl-color) !important;
font-weight: 700 !important;
}
body.as-pane .pane-header .au-mini::after { display: none !important; }
body.as-pane .pane-header .crumb { color: rgba(46, 22, 8, 0.55) !important; }
body.as-pane .pane-header .crumb .curr { color: var(--ink) !important; }
body.as-pane .pane-header .crumb .am { color: var(--news) !important; }
body.as-pane .pane-header .filed { color: rgba(46, 22, 8, 0.55) !important; }
body.as-pane .pane-header .filed .v {
color: var(--news) !important;
border-color: rgba(46, 22, 8, 0.35) !important;
}
body.as-pane .pane-header .close {
color: var(--ink) !important;
border-color: rgba(46, 22, 8, 0.3) !important;
}
body.as-pane .pane-header .close:hover {
color: var(--news) !important;
border-color: var(--news) !important;
}
/* Hide the "TWO PROJECTS · SYSTEMS" / "SECTION B · WORKSHOP" eyebrow row —
removed for a cleaner top before the title. */
body.as-pane .pane-eye { display: none !important; }
/* Custom scrollbar — applied to BOTH the body's own scrollbar (which Chrome
renders in the iframe) and any descendant scrollbar. Without targeting
body::-webkit-scrollbar (no descendant space) the iframe falls back to
the OS scrollbar. Also covers html via :has() for browsers that hoist
the scrollbar to the root element. */
body.as-pane,
body.as-pane * {
scrollbar-width: thin;
scrollbar-color: rgba(46, 22, 8, 0.34) rgba(46, 22, 8, 0.06);
}
html:has(body.as-pane) {
scrollbar-width: thin;
scrollbar-color: rgba(46, 22, 8, 0.34) rgba(46, 22, 8, 0.06);
}
html:has(body.as-pane)::-webkit-scrollbar,
body.as-pane::-webkit-scrollbar,
body.as-pane *::-webkit-scrollbar {
width: 14px;
height: 14px;
}
html:has(body.as-pane)::-webkit-scrollbar-track,
body.as-pane::-webkit-scrollbar-track,
body.as-pane *::-webkit-scrollbar-track {
background:
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 11px,
rgba(46, 22, 8, 0.16) 11px,
rgba(46, 22, 8, 0.16) 12px
),
rgba(46, 22, 8, 0.05);
border-left: 1px solid rgba(46, 22, 8, 0.24);
}
html:has(body.as-pane)::-webkit-scrollbar-thumb,
body.as-pane::-webkit-scrollbar-thumb,
body.as-pane *::-webkit-scrollbar-thumb {
background: rgba(46, 22, 8, 0.32);
border: 4px solid transparent;
background-clip: padding-box;
border-radius: 0;
box-shadow: inset 0 0 0 1px rgba(46, 22, 8, 0.18);
min-height: 48px;
transition: background 180ms ease;
}
html:has(body.as-pane)::-webkit-scrollbar-thumb:hover,
body.as-pane::-webkit-scrollbar-thumb:hover,
body.as-pane *::-webkit-scrollbar-thumb:hover {
background: rgba(46, 22, 8, 0.48);
background-clip: padding-box;
}
html:has(body.as-pane)::-webkit-scrollbar-thumb:active,
body.as-pane::-webkit-scrollbar-thumb:active,
body.as-pane *::-webkit-scrollbar-thumb:active {
background: rgba(46, 22, 8, 0.62);
background-clip: padding-box;
}
body.as-pane::-webkit-scrollbar-corner,
body.as-pane *::-webkit-scrollbar-corner { background: transparent; }
/* =================== ASYMMETRIC SECTION HEADER ===================
Copied from matchup-A-broadsheet pattern: red ordinal (large display) +
title (medium serif/display) + tiny mono meta label (right-aligned).
The size ratio between ordinal (28px) and meta label (9.5px) creates the
visual disbalance that draws the eye to the section's anchor word. */
.pane-body .pane-sec-head {
display: flex;
align-items: baseline;
gap: 18px;
margin: 44px 0 20px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(46, 22, 8, 0.22);
flex-wrap: wrap;
}
.pane-body .pane-sec-head .ord {
font-family: var(--f-display);
font-weight: 800;
font-size: 30px;
letter-spacing: 0.01em;
color: var(--news);
line-height: 0.95;
flex-shrink: 0;
}
.pane-body .pane-sec-head .title {
font-family: var(--f-display);
font-weight: 600;
font-size: 26px;
line-height: 1.05;
letter-spacing: -0.018em;
color: var(--ink);
margin: 0;
}
.pane-body .pane-sec-head .meta {
margin-left: auto;
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(46, 22, 8, 0.55);
align-self: end;
padding-bottom: 4px;
}
/* =================== PANE LAYOUT VARIATIONS ===================
Utilities used inside .pane-body to break the all-left-aligned
monotony. Apply selectively — the default left-flow is still the
baseline for narrative paragraphs. */
/* Two-column flowing paragraph — for medium-length blocks that read well
in a newspaper-style split. */
.pane-body .pane-twocol {
column-count: 2;
column-gap: 44px;
column-rule: 1px solid rgba(46, 22, 8, 0.12);
max-width: none;
}
.pane-body .pane-twocol p { max-width: none; margin-bottom: 14px; }
.pane-body .pane-twocol p:last-child { margin-bottom: 0; }
/* Pull-quote — large centered emphasis, set off above and below.
Use sparingly; one per page max. */
.pane-body .pane-pullquote {
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--ink);
text-align: center;
max-width: 32ch;
margin: 36px auto;
padding: 24px 0;
border-top: 1px solid rgba(46, 22, 8, 0.2);
border-bottom: 1px solid rgba(46, 22, 8, 0.2);
font-style: italic;
}
.pane-body .pane-pullquote::before {
content: "";
display: block;
width: 36px; height: 2px;
background: var(--news);
margin: 0 auto 12px;
}
/* Split-grid — paragraph on the left + supporting side-note on the right.
Side-note is narrower, lighter, monospace. */
.pane-body .pane-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
gap: 48px;
align-items: start;
margin: 24px 0;
}
.pane-body .pane-split > p { margin: 0; max-width: none; }
.pane-body .pane-split > .pane-side {
font-family: var(--f-mono);
font-size: 11.5px;
line-height: 1.55;
letter-spacing: 0.04em;
color: rgba(46, 22, 8, 0.62);
border-left: 1px solid rgba(46, 22, 8, 0.22);
padding-left: 18px;
padding-top: 6px;
}
.pane-body .pane-split > .pane-side strong {
display: block;
font-family: var(--f-mono);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 8px;
}
/* Reverse split-grid — sidebar on LEFT, paragraph on RIGHT.
Mirror of .pane-split. Use for editorial contrast within a pane
so adjacent sections don't all anchor to the same side. */
.pane-body .pane-split-reverse {
display: grid;
grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
gap: 48px;
align-items: start;
margin: 24px 0;
}
.pane-body .pane-split-reverse > p { margin: 0; max-width: none; }
.pane-body .pane-split-reverse > .pane-side {
font-family: var(--f-mono);
font-size: 11.5px;
line-height: 1.55;
letter-spacing: 0.04em;
color: rgba(46, 22, 8, 0.62);
border-right: 1px solid rgba(46, 22, 8, 0.22);
padding-right: 18px;
padding-top: 6px;
text-align: right;
}
.pane-body .pane-split-reverse > .pane-side strong {
display: block;
font-family: var(--f-mono);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 8px;
}
@media (max-width: 800px) {
.pane-body .pane-split-reverse { grid-template-columns: 1fr; gap: 18px; }
.pane-body .pane-split-reverse > .pane-side {
border-right: 0;
border-bottom: 1px solid rgba(46, 22, 8, 0.22);
padding-right: 0;
padding-bottom: 14px;
text-align: left;
}
}
/* Visual-callout variant of .pane-side — big display number or single
word, for sections that need a striking visual counterweight rather
than a subtle mono annotation. Use inside .pane-split or .pane-split-reverse
by adding .pane-side-card alongside .pane-side. */
.pane-body .pane-side.pane-side-card {
padding: 14px 0 14px 18px;
border-left: 3px solid var(--news);
color: var(--ink);
text-align: left;
}
.pane-body .pane-split-reverse > .pane-side.pane-side-card {
border-left: 0;
border-right: 3px solid var(--news);
padding: 14px 18px 14px 0;
text-align: right;
}
.pane-body .pane-side.pane-side-card .label {
display: block;
font-family: var(--f-mono);
font-weight: 700;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--steel-paper);
margin-bottom: 10px;
}
.pane-body .pane-side.pane-side-card .num {
display: block;
font-family: var(--f-display);
font-weight: 800;
font-size: 56px;
line-height: 0.95;
letter-spacing: -0.04em;
color: var(--news);
}
.pane-body .pane-side.pane-side-card .word {
display: block;
font-family: var(--f-display);
font-weight: 600;
font-size: 32px;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
}
.pane-body .pane-side.pane-side-card .sub {
display: block;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--steel-paper);
margin-top: 10px;
font-weight: 500;
}
/* Right-aligned editorial note — sits inline with body flow but anchors
to the right edge. Use for short asides. */
.pane-body .pane-aside-right {
float: right;
width: clamp(180px, 28%, 260px);
margin: 6px 0 18px 32px;
font-family: var(--f-mono);
font-size: 11.5px;
line-height: 1.55;
color: rgba(46, 22, 8, 0.62);
border-left: 2px solid var(--news);
padding: 8px 0 8px 16px;
}
/* Narrow-centered text — for emphasized standalone statements that don't
warrant a full pullquote. */
.pane-body .pane-center-narrow {
max-width: 50ch;
margin: 24px auto;
text-align: center;
color: var(--ink);
}
@media (max-width: 800px) {
.pane-body .pane-twocol { column-count: 1; }
.pane-body .pane-split { grid-template-columns: 1fr; gap: 18px; }
.pane-body .pane-split > .pane-side { border-left: 0; border-top: 1px solid rgba(46, 22, 8, 0.22); padding-left: 0; padding-top: 14px; }
.pane-body .pane-aside-right { float: none; width: auto; margin: 14px 0; }
}
/* ============== PANE (slides from right) ============== */
.pane-scrim {
position: fixed; inset: 0;
background: rgba(7, 9, 14, 0.65);
opacity: 0; pointer-events: none;
transition: opacity var(--pane-dur) var(--ease);
z-index: 50;
}
.pane-scrim.open { opacity: 1; pointer-events: auto; }
.pane {
position: fixed; top: 0; right: 0;
height: 100vh; width: 62%;
min-width: 700px; max-width: 1240px;
background-color: #F2E6C8;
background-image:
linear-gradient(to right, rgba(46, 22, 8, 0.09) 1px, transparent 1px),
linear-gradient(to bottom, rgba(46, 22, 8, 0.09) 1px, transparent 1px);
background-size: 30px 30px;
color: var(--ink);
transform: translateX(calc(100% + 8px));
transition: transform var(--pane-dur) var(--ease);
z-index: 60;
display: flex; flex-direction: column;
overscroll-behavior: contain;
box-shadow: -32px 0 60px -28px rgba(0, 0, 0, 0.7);
border-left: 1px solid rgba(46, 22, 8, 0.18);
}
.pane.open { transform: translateX(0); }
/* Pane-header — transparent over cream notebook, thin hairline separator.
Same treatment whether rendered inside an iframe pane (FBI/Workshop/Meet)
or directly on the notes reader. Brown bar is gone; texts sit on cream. */
.pane-header {
flex: 0 0 auto;
background: transparent;
color: var(--ink);
padding: 16px 40px;
display: grid; grid-template-columns: auto 1fr auto auto;
align-items: center; gap: 24px;
border-bottom: 1px solid rgba(46, 22, 8, 0.28);
}
.pane-header .au-mini {
font-family: var(--f-display);
font-weight: 700; font-size: 18px;
letter-spacing: -0.05em;
color: var(--hl-color); text-decoration: none;
display: inline-flex; align-items: baseline; gap: 6px;
}
.pane-header .au-mini::after { display: none; }
.pane-header .crumb {
font-family: var(--f-mono);
font-size: 11px; letter-spacing: 0.20em;
text-transform: uppercase; color: rgba(46, 22, 8, 0.55);
display: inline-flex; align-items: baseline; gap: 12px;
}
.pane-header .crumb .curr { color: var(--ink); font-weight: 600; }
.pane-header .crumb .am { color: var(--news); }
.pane-header .filed {
font-family: var(--f-mono);
font-size: 10px; letter-spacing: 0.16em;
color: rgba(46, 22, 8, 0.55);
text-transform: uppercase;
}
.pane-header .filed .v {
color: var(--news);
border: 1px solid rgba(46, 22, 8, 0.35);
padding: 2px 8px; margin-left: 6px;
font-variant-numeric: tabular-nums;
}
.pane-header .close {
background: transparent;
border: 1.5px solid rgba(46, 22, 8, 0.3);
color: var(--ink);
width: 30px; height: 30px; cursor: pointer;
font-family: var(--f-mono); font-size: 14px;
display: grid; place-items: center;
transition: border-color 180ms, color 180ms;
text-decoration: none;
}
.pane-header .close:hover { border-color: var(--news); color: var(--news); }
.pane-body {
flex: 1; overflow-y: auto; overscroll-behavior: contain;
padding: 48px 80px 96px;
color: var(--ink);
}
.pane-body::-webkit-scrollbar { width: 8px; }
.pane-body::-webkit-scrollbar-track { background: transparent; }
.pane-body::-webkit-scrollbar-thumb { background: rgba(14,17,23,0.18); }
/* Pane article styling — newspaper inside spread */
.pane-eye {
display: flex; align-items: center; gap: 16px;
font-family: var(--f-mono);
font-size: 11px; letter-spacing: 0.20em;
text-transform: uppercase; color: var(--news-deep);
font-weight: 600;
padding-bottom: 8px;
border-bottom: 2px solid var(--ink);
margin-bottom: 18px;
}
.pane-eye .rule { flex: 1; height: 1px; background: transparent; }
.pane-eye .meta { color: var(--steel-paper); font-weight: 500; letter-spacing: 0.16em; }
.pane-title {
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(56px, 7vw, 96px);
line-height: 0.95;
letter-spacing: -0.055em;
color: var(--ink);
margin: 0 0 18px;
}
.pane-title .dot { color: var(--news); }
.pane-dek {
font-family: var(--f-body);
font-style: italic;
font-size: 19px; line-height: 1.5;
color: var(--ink); max-width: 64ch;
margin: 0 0 32px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(14,17,23,0.2);
}
.pane-dek .q { color: var(--steel-paper); }
.pane h3 {
font-family: var(--f-display);
font-weight: 500; font-size: 24px;
margin: 36px 0 12px;
color: var(--ink);
letter-spacing: -0.035em;
}
.pane p {
font-size: 15px;
line-height: 1.7;
color: var(--ink);
max-width: 66ch;
margin: 0 0 14px;
}
.pane p.lede::first-letter {
font-family: var(--f-display);
font-size: 76px;
line-height: 0.85;
float: left;
margin: 6px 14px -4px 0;
color: var(--news);
font-weight: 600;
letter-spacing: -0.05em;
}
.pane p .q { color: var(--steel-paper); }
.pane p code, .pane code {
font-family: var(--f-mono);
color: var(--news-deep);
font-size: 0.92em;
background: rgba(229, 75, 26, 0.08);
padding: 0 4px;
}
.pane .stack-strip {
display: flex; flex-wrap: wrap; gap: 6px 18px;
padding: 12px 0;
border-top: 1px solid rgba(14,17,23,0.18);
border-bottom: 1px solid rgba(14,17,23,0.18);
margin: 8px 0 24px;
font-family: var(--f-mono);
font-size: 11px; letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--steel-paper);
}
.pane .stack-strip .k { color: var(--ink); font-weight: 600; }
.pane .stack-strip .live { color: var(--news); border: 1.5px solid var(--news); padding: 1px 6px; font-weight: 700; }
.pane .stack-strip .status-paused { color: var(--news); border: 1.5px solid var(--news); padding: 1px 6px; font-weight: 700; }
.pane .visual-slot {
width: 100%; aspect-ratio: 16 / 9;
background:
repeating-linear-gradient(135deg, rgba(14,17,23,0.08) 0 8px, rgba(14,17,23,0.14) 8px 16px),
var(--paper);
border: 1.5px solid var(--ink);
display: grid; place-items: center;
margin: 8px 0 24px;
}
.pane .visual-slot .label {
font-family: var(--f-mono);
font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink); background: var(--paper-warm);
padding: 5px 10px; border: 1px solid var(--ink);
font-weight: 600;
}
/* Eval comparison strip inside FBI pane */
.eval-strip {
display: grid; grid-template-columns: 1fr auto 1fr;
border: 1.5px solid var(--ink);
margin: 8px 0 28px;
background: var(--paper);
}
.eval-strip .cell { padding: 22px 24px 20px; }
.eval-strip .cell + .cell { border-left: 1.5px solid var(--ink); }
.eval-strip .cell.sep { width: 1px; padding: 0; background: var(--ink); }
.eval-strip .h { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--steel-paper); margin-bottom: 8px; font-weight: 600; }
.eval-strip .vbig {
font-family: var(--f-display);
font-weight: 500; font-size: 48px;
line-height: 1; color: var(--ink);
letter-spacing: -0.05em;
font-variant-numeric: tabular-nums;
}
.eval-strip .vbig.lift { color: var(--news); }
.eval-strip .sub { margin-top: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--steel-paper); }
/* Stats grid */
.stats {
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: 1.5px solid var(--ink);
border-bottom: 1.5px solid var(--ink);
margin: 8px 0 28px;
}
.stat { padding: 14px 18px 14px; border-left: 1px solid rgba(14,17,23,0.18); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .n { font-family: var(--f-mono); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 28px; color: var(--news); line-height: 1; }
.stat .l { margin-top: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel-paper); }
/* Failures rail */
.failures { margin: 8px 0 16px; padding: 0; list-style: none; }
.failures li {
padding: 16px 0;
border-top: 1px dashed rgba(14,17,23,0.2);
display: grid; grid-template-columns: 70px 1fr auto auto;
gap: 16px; align-items: center;
}
.failures li:last-child { border-bottom: 1px dashed rgba(14,17,23,0.2); }
.failures .tag {
font-family: var(--f-mono);
font-size: 11px; letter-spacing: 0.14em;
color: var(--news); text-transform: uppercase; font-weight: 800;
}
.failures .what { font-size: 14px; color: var(--ink); line-height: 1.55; }
.failures .when { font-family: var(--f-mono); font-size: 10px; color: var(--steel-paper); letter-spacing: 0.08em; }
/* Workshop divider — newspaper column divider */
.ws-divider {
height: 2px; background: var(--ink);
margin: 48px 0 36px; position: relative;
}
.ws-divider::before {
content: "·"; position: absolute;
left: 50%; top: -12px;
transform: translateX(-50%);
background: var(--paper-warm);
color: var(--news);
padding: 0 18px; font-family: var(--f-mono); font-size: 18px;
}
.ws-num {
display: flex; align-items: baseline; gap: 16px;
margin: 8px 0 8px;
font-family: var(--f-mono);
font-size: 11px; letter-spacing: 0.20em;
text-transform: uppercase;
}
.ws-num .num { color: var(--news); font-weight: 700; }
.ws-num .lbl { color: var(--steel-paper); font-weight: 500; }
.ws-num .paused {
color: var(--news); border: 1.5px solid var(--news);
padding: 1px 7px; margin-left: 8px; font-weight: 700;
}
/* Meet pane */
.meet-grid {
display: grid; grid-template-columns: 1fr 290px;
gap: 56px; margin-top: 8px;
}
.meet-bio p { max-width: 56ch; font-size: 16px; line-height: 1.75; }
.meet-contact { border-left: 2px solid var(--ink); padding-left: 32px; }
.meet-contact h4 {
font-family: var(--f-mono);
font-size: 10px; letter-spacing: 0.20em;
text-transform: uppercase; color: var(--steel-paper);
margin: 0 0 12px; font-weight: 600;
}
.meet-contact a {
display: block;
font-family: var(--f-body);
font-size: 15px; color: var(--ink);
text-decoration: none;
padding: 8px 0;
border-bottom: 1px solid rgba(14,17,23,0.15);
transition: color 180ms ease, padding-left 180ms var(--ease);
}
.meet-contact a:last-of-type { border-bottom: 0; }
.meet-contact a:hover { color: var(--news); padding-left: 4px; }
.meet-contact .static-item {
display: block;
font-family: var(--f-body);
font-size: 15px;
color: var(--ink);
padding: 8px 0;
border-bottom: 1px solid rgba(14,17,23,0.15);
margin: 0;
}
.meet-contact .static-item:last-of-type { border-bottom: 0; }
.meet-contact .small { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.10em; color: var(--steel-paper); margin-left: 8px; }
/* ============== /notes ROUTE — magazine TOC ============== */
.notes-route {
display: none;
min-height: 100vh;
background: var(--paper-warm);
color: var(--ink);
padding: 0;
overflow-y: auto;
position: fixed; inset: 0; z-index: 30;
background-image: url("data:image/svg+xml;utf8,");
}
body.route-notes .notes-route { display: block; }
/* Notes header band — flip to ink masthead at top */
.notes-mast {
background: var(--ink);
color: var(--paper);
padding: 16px 40px 14px;
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: 32px;
border-bottom: 3px solid var(--news);
}
.notes-mast .au-mini {
font-family: var(--f-display);
font-weight: 500; font-size: 22px;
letter-spacing: -0.05em;
color: var(--paper); text-decoration: none;
display: inline-flex; align-items: baseline; gap: 8px;
}
.notes-mast .au-mini::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--news); transform: translateY(-2px); }
.notes-mast .center {
display: flex; justify-content: center; gap: 20px;
font-family: var(--f-mono);
font-size: 11px; letter-spacing: 0.20em;
text-transform: uppercase; color: var(--paper); font-weight: 500;
}
.notes-mast .center .ttl { font-family: var(--f-display); font-weight: 600; letter-spacing: 0.18em; font-size: 14px; }
.notes-mast .center .am { color: var(--news); }
.notes-mast .center .sep { color: var(--steel); }
.notes-mast .back {
font-family: var(--f-mono);
font-size: 11px; letter-spacing: 0.16em;
color: var(--paper); text-decoration: none;
border: 1.5px solid var(--paper);
padding: 4px 12px;
text-transform: uppercase; font-weight: 600;
transition: border-color 180ms, color 180ms;
}
.notes-mast .back:hover { border-color: var(--news); color: var(--news); }
.notes-shell {
max-width: 1280px; margin: 0 auto;
padding: 80px 56px 80px;
}
/* Masthead title */
.notes-bigtop {
display: grid; grid-template-columns: 1fr auto;
gap: 32px; align-items: end;
padding-bottom: 28px;
border-bottom: 4px solid var(--ink);
}
.notes-bigtop .left .eye {
font-family: var(--f-mono);
font-size: 11px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--news);
font-weight: 700; margin-bottom: 18px;
}
.notes-bigtop h1 {
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(72px, 11vw, 168px);
line-height: 0.9;
letter-spacing: -0.07em;
margin: 0; color: var(--ink);
}
.notes-bigtop h1 .am { color: var(--news); }
.notes-bigtop .deck {
font-family: var(--f-body);
font-style: italic;
font-size: 17px; line-height: 1.55;
color: var(--ink); max-width: 36ch;
margin: 0; padding-left: 28px;
border-left: 2px solid var(--news);
}
.notes-bigtop .deck .q { color: var(--steel-paper); }
/* Notes index list — newspaper TOC */
.notes-list {
margin: 0; padding: 0; list-style: none;
}
.notes-list li {
padding: 28px 0 24px;
border-bottom: 1px solid rgba(14,17,23,0.2);
display: grid;
grid-template-columns: 100px 1.2fr 1fr 110px;
gap: 32px; align-items: baseline;
cursor: pointer;
transition: padding-left 240ms var(--ease);
}
.notes-list li:hover { padding-left: 12px; }
.notes-list li:hover .nx-title { color: var(--news); }
.notes-list .nx-num {
font-family: var(--f-mono);
font-size: 11px; letter-spacing: 0.18em;
color: var(--news); font-weight: 700;
}
.notes-list .nx-title {
font-family: var(--f-display);
font-weight: 500; font-size: 28px;
line-height: 1.05; letter-spacing: -0.04em;
color: var(--ink);
transition: color 200ms ease;
}
.notes-list .nx-title .sub {
display: block;
font-family: var(--f-body);
font-style: italic; font-weight: 400;
font-size: 14px;
color: var(--steel-paper);
margin-top: 6px; letter-spacing: 0;
}
.notes-list .nx-teaser {
font-family: var(--f-body);
font-size: 14px; line-height: 1.55;
color: var(--ink);
}
.notes-list .nx-date {
font-family: var(--f-mono);
font-size: 10px; letter-spacing: 0.14em;
color: var(--steel-paper); text-transform: uppercase;
text-align: right;
}
.notes-foot {
margin-top: 64px;
padding: 16px 0;
border-top: 3px double var(--ink);
display: flex; justify-content: space-between;
font-family: var(--f-mono);
font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--steel-paper);
}
.notes-foot .am { color: var(--news); }
/* ============== /notes/ ENTRY ROUTE ============== */
.notes-entry-route {
display: none;
min-height: 100vh;
background: var(--paper-warm);
color: var(--ink);
overflow-y: auto;
position: fixed; inset: 0; z-index: 30;
background-image: url("data:image/svg+xml;utf8,");
}
body.route-entry .notes-entry-route { display: block; }
.entry-shell {
max-width: 1280px; margin: 0 auto;
padding: 64px 56px 80px;
}
.entry-meta {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 28px; padding: 28px 0;
border-top: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
margin-bottom: 56px;
}
.entry-meta .cell .l {
font-family: var(--f-mono);
font-size: 10px; letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--steel-paper); margin-bottom: 8px; font-weight: 600;
}
.entry-meta .cell .v {
font-family: var(--f-body);
font-size: 15px; color: var(--ink);
}
.entry-hero {
margin: 0 0 64px;
display: grid; grid-template-columns: 1fr 1fr;
gap: 56px; align-items: end;
}
.entry-hero h1 {
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(60px, 7vw, 120px);
line-height: 0.92;
letter-spacing: -0.06em;
margin: 0; color: var(--ink);
}
.entry-hero h1 .am { color: var(--news); }
.entry-hero .pull {
font-family: var(--f-body);
font-style: italic; font-size: 20px;
line-height: 1.45; color: var(--ink);
border-left: 2px solid var(--news);
padding: 0 0 0 28px; max-width: 40ch;
}
.entry-visual {
width: 100%; height: 380px;
background:
radial-gradient(circle at 30% 40%, rgba(229,75,26,0.20), transparent 55%),
repeating-linear-gradient(135deg, rgba(14,17,23,0.07) 0 10px, rgba(14,17,23,0.12) 10px 20px),
var(--paper-deep);
border: 2px solid var(--ink);
margin: 0 0 56px;
display: grid; place-items: center;
}
.entry-visual .label {
font-family: var(--f-mono);
font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink); background: var(--paper-warm);
border: 1.5px solid var(--ink); padding: 6px 12px;
font-weight: 600;
}
.entry-body {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
gap: 56px; align-items: start;
}
.entry-body .side { position: sticky; top: 32px; align-self: start; }
.entry-body .side .h {
font-family: var(--f-mono);
font-size: 10px; letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--steel-paper); margin-bottom: 14px; font-weight: 600;
}
.entry-body .side ol {
list-style: none; padding: 0; margin: 0;
border-top: 1px solid rgba(14,17,23,0.2);
}
.entry-body .side ol li {
padding: 10px 0;
border-bottom: 1px solid rgba(14,17,23,0.15);
font-family: var(--f-body);
font-size: 14px; color: var(--ink);
display: grid; grid-template-columns: 24px 1fr; gap: 12px;
}
.entry-body .side ol li .nm { font-family: var(--f-mono); font-size: 10px; color: var(--news); letter-spacing: 0.10em; font-weight: 700; }
.entry-body .main p {
font-family: var(--f-body);
font-weight: 400; font-size: 18px;
line-height: 1.75; color: var(--ink);
margin: 0 0 22px; max-width: 64ch;
text-wrap: pretty;
}
.entry-body .main p.lede::first-letter {
font-family: var(--f-display);
font-size: 86px; line-height: 0.85;
float: left; margin: 6px 14px -2px 0;
color: var(--news); font-weight: 600;
letter-spacing: -0.05em;
}
.entry-body .main h2 {
font-family: var(--f-display);
font-weight: 500; font-size: 28px;
margin: 44px 0 18px; color: var(--ink);
letter-spacing: -0.04em;
}
.entry-body .main .pull-quote {
font-family: var(--f-display);
font-weight: 400; font-size: 30px;
line-height: 1.25; letter-spacing: -0.04em;
color: var(--ink); margin: 36px 0;
padding: 24px 0;
border-top: 3px solid var(--news);
border-bottom: 3px solid var(--news);
max-width: 30ch;
}
.entry-foot {
margin-top: 80px;
padding-top: 18px;
border-top: 3px double var(--ink);
display: flex; justify-content: space-between;
font-family: var(--f-mono);
font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--steel-paper);
}
.entry-foot a {
color: var(--ink); text-decoration: none;
border-bottom: 2px solid var(--news); padding-bottom: 2px;
}
/* ============== RESPONSIVE ============== */
/* Compressed desktop — preserve asymmetric two-column at 1024-1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
.composition {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 32px;
padding: 22px 28px 0;
}
.name { font-size: clamp(60px, 8vw, 108px); }
.fbi-title { font-size: clamp(52px, 5vw, 76px); }
.fbi-body { padding: 20px 22px 20px; }
body { overflow: auto; }
.stage { position: static; min-height: 100vh; }
}
/* Single-column tablet — below 1024px */
@media (max-width: 1023px) {
.composition { grid-template-columns: 1fr; gap: 32px; overflow-y: auto; padding: 24px 32px 0; }
body { overflow: auto; }
.stage { position: static; min-height: 100vh; }
.fbi-wrap { padding-top: 8px; max-width: 100%; }
.card-strip { grid-template-columns: 1fr; padding: 24px 32px 28px; gap: 24px; }
}
@media (max-width: 767px) {
.masthead { padding: 12px 20px; grid-template-columns: auto auto; gap: 12px; }
.masthead .edition-line { display: none; }
.composition { padding: 24px 20px; gap: 28px; }
.name { font-size: clamp(60px, 16vw, 100px); }
.fbi-wrap { grid-template-columns: 1fr; max-width: 100%; }
.gauge { width: 100%; min-height: auto; flex-direction: row; padding: 10px 0; }
.gauge .gauge-l { writing-mode: horizontal-tb; transform: none; margin: 0; }
.gauge .tube-wrap { flex: 1; }
.pane { width: 100%; min-width: 0; max-width: 100%; transform: translateY(100%); }
.pane.open { transform: translateY(0); }
.pane-header { padding: 14px 20px; grid-template-columns: auto 1fr auto; gap: 12px; }
.pane-header .filed { display: none; }
.pane-body { padding: 32px 20px 60px; }
.pane-title { font-size: 48px; }
.stats { grid-template-columns: repeat(2, 1fr); }
.meet-grid { grid-template-columns: 1fr; gap: 28px; }
.meet-contact { border-left: 0; border-top: 2px solid var(--ink); padding-left: 0; padding-top: 22px; }
.notes-shell { padding: 40px 20px 60px; }
.notes-bigtop { grid-template-columns: 1fr; gap: 24px; }
.notes-bigtop .deck { padding-left: 16px; }
.notes-list li { grid-template-columns: 48px 1fr; }
.notes-list .nx-teaser, .notes-list .nx-date { grid-column: 2; }
.notes-list .nx-date { text-align: left; margin-top: 6px; }
.entry-shell { padding: 32px 20px 60px; }
.entry-hero { grid-template-columns: 1fr; gap: 24px; }
.entry-body { grid-template-columns: 1fr; }
.entry-body .side { position: static; }
.foot-bar { grid-template-columns: 1fr; gap: 10px; padding: 14px 20px; text-align: center; }
}
/* ============== CURSOR-FOLLOWING GLOW (all cards) ============== */
/* Real child span (not pseudo) because ::after is already used by the
vertical sweep on .card and we need a free layer on .fbi too. */
.card-glow {
position: absolute; inset: 0;
background: radial-gradient(
130px circle at var(--mx, 50%) var(--my, 50%),
var(--glow-color, var(--news)) 0%,
transparent 65%
);
opacity: 0;
pointer-events: none;
mix-blend-mode: var(--glow-blend, screen);
transition: opacity 280ms ease;
z-index: 1;
}
.card:hover .card-glow,
.fbi:hover .card-glow { opacity: var(--glow-alpha, 0.22); }
/* ============== SIBLING-AWARE DIMMING + CONDITIONAL FROSTED GLASS ==============
Default cards = solid palette blocks. Frosted-glass treatment triggers on:
(1) data-letter-behind="true" — set by broadsheet.js when a name letter is
dragged over this section. Lets the section-colored text-shadow bloom
through the frosted card.
(2) sibling hover — the dimmed (non-hovered) cards switch to frosted glass
while the hovered one stays solid + focused. */
/* Dim non-hovered siblings via `filter` rather than `opacity` so that the
frosted-glass card stays fully OPAQUE (backdrop-filter keeps blurring the
letter behind it). Opacity would make the whole card translucent and the
letter would show through clearly instead of staying blurred. */
.card-strip:has(.card:hover) .card:not(:hover),
.stage:has(.card:hover) .fbi:not(:hover),
.stage:has(.fbi:hover) .card:not(:hover) {
filter: brightness(0.55) saturate(0.85);
}
.stage:has(.card:hover) .fbi:not(:hover),
.stage:has(.fbi:hover) .card:not(:hover) {
filter: brightness(0.7) saturate(0.9);
}
/* Frosted-glass treatment — applied to dimmed siblings AND letter-behind cards. */
.card[data-letter-behind="true"],
.card-strip:has(.card:hover) .card:not(:hover),
.stage:has(.fbi:hover) .card:not(:hover) {
background: rgba(22, 27, 35, 0.45);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
box-shadow: inset 0 0 0 1px rgba(245, 242, 236, 0.05);
}
.fbi[data-letter-behind="true"],
.stage:has(.card:hover) .fbi:not(:hover) {
background-color: rgba(242, 230, 200, 0.62);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
}
/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
.fbi .fbi-mast .pulse { animation: none !important; }
.card, .fbi,
.card::after, .card::before,
.card-glow,
.fbi:hover, .fbi:hover .fbi-cta .open,
.fbi-mark .reticle-g, .fbi-mark .court-g,
.fbi-tagline,
.fbi-bracket .arm {
transition: none !important;
animation: none !important;
}
.card, .fbi { transform: none !important; }
.card:hover, .fbi:hover { transform: none !important; }
.card:hover::before {
/* static dual-tone gradient instead of rotating trace */
background: linear-gradient(135deg, var(--news), var(--amber)) !important;
opacity: 1 !important;
}
.fbi-mark:hover .reticle-g { transform: translate(0,0) scale(1) !important; animation: none !important; }
.fbi-mark:hover .court-g { opacity: 1 !important; }
.fbi-logoblock:hover .fbi-tagline { opacity: 1 !important; transform: none !important; }
.fbi:hover .fbi-bracket .arm { stroke-dashoffset: 0 !important; }
}
/* ============== LAB · interactive dot-grid background ============== */
/* Canvas lives inside .stage so frosted-glass bars can pick it up via
backdrop-filter. z-index 0 keeps it behind composition/card-strip
content (cards have their own bg) while still letting it show through
the bars' semi-transparent tint with the bars' blur applied. */
.lab-dot-grid {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
}
/* ============== LAB · combined bar (Palette + Type tabs) ============== */
.lab-bar {
position: fixed;
top: 14px; right: 14px;
z-index: 200;
width: 290px;
max-height: calc(100vh - 28px);
background: rgba(14, 17, 23, 0.94);
border: 1px solid var(--ink-line);
color: var(--paper);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
font-family: 'JetBrains Mono', monospace;
display: flex; flex-direction: column;
overflow: hidden;
transition: max-height 280ms var(--ease);
}
.lab-bar.is-collapsed { max-height: 42px; }
.lab-bar.is-collapsed .lab-bar-body { display: none; }
.lab-bar.is-collapsed .lab-bar-toggle span { transform: rotate(-90deg); }
.lab-bar-head {
flex: 0 0 auto;
display: flex; align-items: stretch;
border-bottom: 1px solid var(--ink-line);
background: rgba(0, 0, 0, 0.22);
}
.lab-bar-head .lab-flex { flex: 1; }
.lab-bar .lab-tab {
background: transparent;
border: 0;
border-right: 1px solid var(--ink-line);
color: var(--steel); cursor: pointer;
padding: 11px 14px 10px;
font-family: 'Unbounded', sans-serif;
font-weight: 700;
font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase;
transition: color 150ms var(--ease), background 150ms var(--ease);
}
.lab-bar .lab-tab:hover { color: var(--paper); }
.lab-bar .lab-tab.is-active {
color: var(--paper);
background: rgba(199, 38, 49, 0.12);
box-shadow: inset 0 -2px 0 var(--news);
}
.lab-bar .lab-bar-toggle {
background: transparent; border: 0;
color: var(--paper); cursor: pointer;
padding: 2px 14px; line-height: 1;
font-size: 14px;
}
.lab-bar .lab-bar-toggle span { display: inline-block; transition: transform 220ms var(--ease); }
.lab-bar-body {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--steel) transparent;
}
.lab-bar-body::-webkit-scrollbar { width: 6px; }
.lab-bar-body::-webkit-scrollbar-thumb { background: rgba(245, 242, 236, 0.18); }
.lab-pane { display: none; padding: 8px 10px 12px; }
.lab-pane.is-active { display: block; }
/* Composer — top-of-palette-tab dropdowns for Bg + Dominant override */
.lab-pane-palette .lab-composer {
display: flex; flex-direction: column;
gap: 8px;
padding: 8px 6px 12px;
border-bottom: 1px solid var(--ink-line);
margin-bottom: 8px;
}
.lab-composer-row {
display: grid; grid-template-columns: 80px 1fr;
gap: 8px; align-items: center;
}
.lab-composer-label {
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--steel);
}
.lab-composer select {
background: var(--ink-2);
border: 1px solid var(--ink-line);
color: var(--paper);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
padding: 5px 8px;
cursor: pointer;
width: 100%;
appearance: none;
-webkit-appearance: none;
/* Custom dropdown arrow */
background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%),
linear-gradient(135deg, var(--steel) 50%, transparent 50%);
background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 22px;
}
.lab-composer select:focus {
outline: none;
border-color: var(--amber);
}
.lab-composer-reset {
background: transparent;
border: 1px solid var(--ink-line);
color: var(--steel);
cursor: pointer;
padding: 5px 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.16em;
text-transform: uppercase;
margin-top: 4px;
transition: color 150ms, border-color 150ms;
}
.lab-composer-reset:hover { color: var(--paper); border-color: var(--steel); }
/* Section header inside the palette pane — groups schemes into named sets */
.lab-pane-palette .lab-section-header {
padding: 12px 7px 6px;
margin-top: 4px;
font-family: 'Unbounded', sans-serif;
font-weight: 700;
font-size: 8.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--amber, #C99022);
border-top: 1px solid var(--ink-line);
}
.lab-pane-palette .lab-section-header:first-child {
padding-top: 4px;
margin-top: 0;
border-top: 0;
}
/* Palette rows */
.lab-pane-palette .lab-row {
display: grid; grid-template-columns: 40px 1fr;
gap: 10px; align-items: center;
padding: 6px 7px; margin: 1px 0;
border: 1px solid transparent;
background: transparent;
color: inherit; cursor: pointer;
text-align: left;
transition: background 150ms var(--ease), border-color 150ms var(--ease);
width: 100%;
}
.lab-pane-palette .lab-row:hover { background: var(--ink-2); border-color: var(--ink-line); }
.lab-pane-palette .lab-row.is-active { background: var(--ink-2); border-color: var(--news); }
.lab-pane-palette .lab-swatch {
height: 20px; width: 40px;
border: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.lab-pane-palette .lab-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lab-pane-palette .lab-name {
font-family: 'Unbounded', sans-serif;
font-weight: 700;
font-size: 10.5px; letter-spacing: 0.05em;
color: var(--paper);
text-transform: uppercase;
}
.lab-pane-palette .lab-meta {
font-size: 8px; letter-spacing: 0.18em;
color: var(--steel);
text-transform: uppercase;
}
/* Type pane */
.lab-pane-type .lab-section { padding: 9px 0 6px; border-top: 1px solid var(--ink-line); }
.lab-pane-type .lab-section:first-child { border-top: 0; padding-top: 2px; }
.lab-pane-type .lab-sec-l {
display: block;
font-size: 8.5px; letter-spacing: 0.22em;
color: var(--amber); font-weight: 700;
text-transform: uppercase;
margin-bottom: 6px;
}
.lab-pane-type .lab-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 3px;
}
.lab-pane-type .lab-fbtn {
display: flex; flex-direction: column; gap: 2px;
padding: 6px 8px;
background: transparent;
border: 1px solid var(--ink-line);
color: var(--paper);
cursor: pointer;
text-align: left;
transition: background 150ms var(--ease), border-color 150ms var(--ease);
}
.lab-pane-type .lab-fbtn:hover { background: var(--ink-2); border-color: var(--steel); }
.lab-pane-type .lab-fbtn.is-active { background: var(--ink-2); border-color: var(--news); }
.lab-pane-type .lab-fname { font-size: 11px; line-height: 1.1; color: var(--paper); }
.lab-pane-type .lab-fmeta {
font-size: 7.5px; letter-spacing: 0.18em;
color: var(--steel);
text-transform: uppercase;
}
/* Font preview — each name in its own typeface */
.lab-pane-type [data-font-preview="unbounded"] { font-family: 'Unbounded', sans-serif; font-weight: 700; }
.lab-pane-type [data-font-preview="fraunces"] { font-family: 'Fraunces', serif; font-weight: 600; }
.lab-pane-type [data-font-preview="outfit"] { font-family: 'Outfit', sans-serif; font-weight: 700; }
.lab-pane-type [data-font-preview="bowlbyone"] { font-family: 'Bowlby One', sans-serif; }
.lab-pane-type [data-font-preview="archivoblack"] { font-family: 'Archivo Black', sans-serif; }
.lab-pane-type [data-font-preview="anton"] { font-family: 'Anton', sans-serif; }
.lab-pane-type [data-font-preview="bebas"] { font-family: 'Bebas Neue', sans-serif; }
.lab-pane-type [data-font-preview="russo"] { font-family: 'Russo One', sans-serif; }
.lab-pane-type [data-font-preview-body="inter"] { font-family: 'Inter', sans-serif; }
.lab-pane-type [data-font-preview-body="outfit"] { font-family: 'Outfit', sans-serif; }
.lab-pane-type [data-font-preview-body="fraunces"] { font-family: 'Fraunces', serif; }
.lab-pane-type [data-font-preview-body="dmserif"] { font-family: 'DM Serif Text', serif; }
.lab-pane-type [data-font-preview-body="archivo"] { font-family: 'Archivo', sans-serif; }
.lab-pane-type [data-font-preview-mono="jetbrains"]{ font-family: 'JetBrains Mono', monospace; }
.lab-pane-type [data-font-preview-mono="martian"] { font-family: 'Martian Mono', monospace; }
.lab-pane-type [data-font-preview-mono="ibmplex"] { font-family: 'IBM Plex Mono', monospace; }
.lab-pane-type [data-font-preview-mono="spacemono"]{ font-family: 'Space Mono', monospace; }
/* Weight buttons */
.lab-pane-type .lab-weights {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: 2px;
}
.lab-pane-type .lab-wbtn {
padding: 5px 0;
background: transparent;
border: 1px solid var(--ink-line);
color: var(--paper);
cursor: pointer;
font-family: 'Unbounded', sans-serif;
font-size: 10px;
transition: background 150ms var(--ease), border-color 150ms var(--ease);
}
.lab-pane-type .lab-wbtn:hover { background: var(--ink-2); border-color: var(--steel); }
.lab-pane-type .lab-wbtn.is-active { background: var(--news); border-color: var(--news); color: var(--paper); }
.lab-pane-type .lab-wbtn[data-display-weight="400"] { font-weight: 400; }
.lab-pane-type .lab-wbtn[data-display-weight="500"] { font-weight: 500; }
.lab-pane-type .lab-wbtn[data-display-weight="600"] { font-weight: 600; }
.lab-pane-type .lab-wbtn[data-display-weight="700"] { font-weight: 700; }
.lab-pane-type .lab-wbtn[data-display-weight="750"] { font-weight: 750; }
.lab-pane-type .lab-wbtn[data-display-weight="800"] { font-weight: 800; }
@media (max-width: 1023px) {
.lab-bar { width: 240px; right: 8px; top: 8px; }
}
/* ── Glow pane (color pickers + master toggle) ── */
.lab-pane-glow .lab-glow-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
margin-bottom: 12px;
}
.lab-pane-glow .lab-glow-toggle,
.lab-pane-glow .lab-glow-sync {
display: inline-flex;
align-items: center; gap: 8px;
padding: 7px 9px;
background: transparent;
border: 1px solid var(--ink-line);
color: var(--paper);
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.14em;
text-transform: uppercase;
text-align: left;
transition: background 150ms, border-color 150ms;
}
.lab-pane-glow .lab-glow-toggle:hover,
.lab-pane-glow .lab-glow-sync:hover {
background: var(--ink-2);
border-color: var(--steel);
}
.lab-pane-glow .lab-glow-toggle.is-active {
background: rgba(199, 38, 49, 0.12);
border-color: var(--news);
}
.lab-pane-glow .lab-glow-sync.is-active {
background: rgba(201, 144, 34, 0.12);
border-color: var(--amber);
}
.lab-pane-glow .lab-glow-toggle-state {
display: inline-block;
min-width: 22px;
padding: 2px 4px;
background: var(--ink-line);
color: var(--paper);
text-align: center;
font-weight: 700;
letter-spacing: 0.18em;
}
.lab-pane-glow .lab-glow-toggle.is-active .lab-glow-toggle-state {
background: var(--news);
}
.lab-pane-glow .lab-glow-toggle-label,
.lab-pane-glow .lab-glow-sync {
line-height: 1.1;
}
.lab-pane-glow .lab-glow-sync-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ink-line);
transition: background 150ms;
flex-shrink: 0;
}
.lab-pane-glow .lab-glow-sync-dot.is-on {
background: var(--amber);
box-shadow: 0 0 6px var(--amber);
}
/* Individual picker block */
.glow-picker {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--ink-line);
}
.glow-picker:first-of-type {
border-top: 0;
padding-top: 0;
margin-top: 0;
}
.glow-picker-head {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.glow-picker-label {
font-family: 'JetBrains Mono', monospace;
font-size: 8.5px; letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--amber);
font-weight: 700;
line-height: 1.2;
flex: 1;
}
.glow-reset {
background: transparent;
border: 1px solid var(--ink-line);
color: var(--steel);
cursor: pointer;
padding: 3px 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 8.5px; letter-spacing: 0.14em;
text-transform: uppercase;
transition: color 150ms, border-color 150ms;
}
.glow-reset:hover { color: var(--paper); border-color: var(--steel); }
/* Saturation × Value square — left-top = white, top-right = pure hue,
bottom = black. Hue updates via --picker-hue. */
.glow-sl-square {
position: relative;
width: 100%;
height: 120px;
margin-bottom: 6px;
background:
linear-gradient(to top, #000 0%, transparent 100%),
linear-gradient(to right, #FFF 0%, hsl(var(--picker-hue, 0), 100%, 50%) 100%);
border: 1px solid var(--ink-line);
cursor: crosshair;
user-select: none;
touch-action: none;
}
.glow-sl-thumb {
position: absolute;
width: 12px; height: 12px;
border: 2px solid #FFF;
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
background: transparent;
}
.glow-hue-bar {
position: relative;
width: 100%;
height: 12px;
background: linear-gradient(to right,
#FF0000 0%, #FFFF00 17%, #00FF00 33%, #00FFFF 50%,
#0000FF 67%, #FF00FF 83%, #FF0000 100%);
border: 1px solid var(--ink-line);
cursor: ew-resize;
user-select: none;
touch-action: none;
margin-bottom: 8px;
}
.glow-hue-thumb {
position: absolute;
top: -2px; bottom: -2px;
width: 5px;
background: #FFF;
border: 1px solid #000;
transform: translateX(-50%);
pointer-events: none;
}
.glow-picker-foot {
display: grid;
grid-template-columns: 28px 1fr;
gap: 8px;
align-items: center;
}
.glow-swatch {
width: 28px; height: 22px;
border: 1px solid var(--ink-line);
background: var(--glow, #FFF);
}
.glow-hex-input {
background: var(--ink-2);
border: 1px solid var(--ink-line);
color: var(--paper);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
padding: 5px 8px;
width: 100%;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.glow-hex-input:focus {
outline: none;
border-color: var(--amber);
}
/* Master glow-disable — kills the trace, sweep, cursor-glow, brackets */
body.no-glow .card::before,
body.no-glow .card::after,
body.no-glow .card-glow,
body.no-glow .fbi-bracket {
display: none !important;
}
/* Background tune — brightness + saturation sliders inside Palette tab */
.lab-bg-tune {
padding: 8px 6px 6px;
display: flex; flex-direction: column;
gap: 8px;
}
.lab-slider {
display: grid; grid-template-columns: 70px 1fr 28px;
gap: 8px; align-items: center;
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--steel);
}
.lab-slider-label { color: var(--paper); }
.lab-slider-val {
color: var(--amber);
font-variant-numeric: tabular-nums;
font-weight: 700;
text-align: right;
}
.lab-slider input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 3px;
background: var(--ink-line);
outline: none;
cursor: pointer;
}
.lab-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px; height: 12px;
background: var(--paper);
border: 1px solid var(--ink-line);
cursor: ew-resize;
}
.lab-slider input[type="range"]::-moz-range-thumb {
width: 12px; height: 12px;
background: var(--paper);
border: 1px solid var(--ink-line);
cursor: ew-resize;
}
/* Name-glow intensity slider in the Glow tab */
.lab-name-glow {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--ink-line);
}
.lab-name-glow-head {
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--steel);
margin-bottom: 8px;
}
.lab-name-glow-val {
color: var(--paper);
font-variant-numeric: tabular-nums;
}
.lab-name-glow-slider {
width: 100%;
height: 4px;
background: var(--ink-3);
border-radius: 2px;
outline: none;
appearance: none;
-webkit-appearance: none;
}
.lab-name-glow-slider::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 14px; height: 14px;
background: var(--glow);
border: 0;
border-radius: 50%;
cursor: ew-resize;
box-shadow: 0 0 8px color-mix(in srgb, var(--glow) 60%, transparent);
}
.lab-name-glow-slider::-moz-range-thumb {
width: 14px; height: 14px;
background: var(--glow);
border: 0;
border-radius: 50%;
cursor: ew-resize;
box-shadow: 0 0 8px color-mix(in srgb, var(--glow) 60%, transparent);
}
.lab-bg-reset {
background: transparent;
border: 1px solid var(--ink-line);
color: var(--steel);
cursor: pointer;
padding: 5px 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.16em;
text-transform: uppercase;
margin-top: 4px;
transition: color 150ms, border-color 150ms;
}
.lab-bg-reset:hover { color: var(--paper); border-color: var(--steel); }
/* ============== LOCKED GLOW + HIDDEN LAB ==============
Universal glow color #FF5000 — wins over per-palette --glow definitions.
Lab bar is preserved in code for future adjustments but hidden by default.
To re-enable temporarily: append "#lab" to the URL or add `data-lab="on"`
to . */
:root, body[data-scheme] {
--glow: #FF5000 !important;
--hl-color: #1F51FF !important;
}
/* Per-section glow tints + per-section default intensity — applied to body
when a specific pane is open. The slider's :root setting remains the
default for "no pane open"; these body-level values win whenever a pane
is active. */
body[data-pane="fbi"] {
--glow: #C72631 !important; /* FBI logo red */
--name-glow-intensity: 0.9 !important;
}
body[data-pane="workshop"] {
--glow: #FF5000 !important; /* orange */
--name-glow-intensity: 0.8 !important;
}
body[data-pane="notes"] {
--glow: #0F6B26 !important; /* dark green (was yellow #FFD400 — locked 2026-05-20) */
--name-glow-intensity: 0.8 !important;
}
body[data-pane="meet"] {
--glow: #B05BFF !important; /* violet */
--name-glow-intensity: 0.8 !important;
}
/* Per-card scope — hovering a card on home previews its section glow.
Card's perimeter trace + sweep both use var(--glow), so they pick up
the section color automatically. */
.fbi { --glow: #C72631 !important; }
.card[href*="workshop"] { --glow: #FF5000 !important; }
.card.notes { --glow: #FFD400 !important; }
.card[href*="meet"] { --glow: #B05BFF !important; }
/* Lab bar visible — Type tab carries the font pickers (display / body /
mono) which sync to open panes via postMessage. To hide for a clean
preview, append #lab-off to the URL. */
body[data-lab="off"] .lab-bar { display: none !important; }
body[data-lab="off"] .type-lab { display: none !important; }
/* =============== DEDICATED TYPE CONTROLLER ===============
Standalone floating panel at top-left so font experimentation has
its own focused space. Writes body[data-display/body/mono] which
postMessage syncs to open panes. */
.type-lab {
position: fixed;
top: 12px;
left: 12px;
z-index: 200;
width: 240px;
max-height: calc(100vh - 24px);
background: rgba(7, 9, 14, 0.92);
border: 1px solid var(--ink-line);
color: var(--paper);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
font-family: 'JetBrains Mono', monospace;
display: flex; flex-direction: column;
overflow: hidden;
transition: max-height 280ms var(--ease);
}
.type-lab.is-collapsed { max-height: 38px; }
.type-lab.is-collapsed .type-lab-body { display: none; }
.type-lab.is-collapsed .type-lab-collapse span { transform: rotate(-90deg); }
.type-lab-head {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--ink-line);
background: var(--ink-2);
}
.type-lab-title {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--paper);
font-weight: 700;
}
.type-lab-collapse {
background: transparent;
border: 0;
color: var(--steel);
cursor: pointer;
padding: 2px 6px;
}
.type-lab-collapse span { transition: transform 200ms var(--ease); display: inline-block; }
.type-lab-body {
flex: 1;
overflow-y: auto;
padding: 10px 12px 14px;
}
.type-lab-section { margin-bottom: 14px; }
.type-lab-section:last-child { margin-bottom: 0; }
.type-lab-label {
display: block;
font-size: 8.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--news);
margin-bottom: 6px;
font-weight: 700;
}
.type-lab-grid {
display: flex;
flex-direction: column;
gap: 2px;
}
.type-lab-btn {
background: transparent;
border: 1px solid transparent;
color: var(--paper);
text-align: left;
padding: 5px 8px;
cursor: pointer;
transition: background 150ms var(--ease), border-color 150ms var(--ease);
}
.type-lab-btn:hover {
background: var(--ink-2);
border-color: var(--ink-line);
}
.type-lab-btn.is-active {
background: var(--ink-2);
border-color: var(--news);
}
.type-lab-name {
font-size: 13px;
color: var(--paper);
}
.type-lab [data-font-preview="unbounded"] { font-family: 'Unbounded', sans-serif; font-weight: 700; }
.type-lab [data-font-preview="fraunces"] { font-family: 'Fraunces', serif; font-weight: 600; }
.type-lab [data-font-preview="outfit"] { font-family: 'Outfit', sans-serif; font-weight: 700; }
.type-lab [data-font-preview="bowlbyone"] { font-family: 'Bowlby One', sans-serif; }
.type-lab [data-font-preview="archivoblack"] { font-family: 'Archivo Black', sans-serif; }
.type-lab [data-font-preview="anton"] { font-family: 'Anton', sans-serif; }
.type-lab [data-font-preview="bebas"] { font-family: 'Bebas Neue', sans-serif; }
.type-lab [data-font-preview="russo"] { font-family: 'Russo One', sans-serif; }
.type-lab [data-font-preview-body="inter"] { font-family: 'Inter', sans-serif; }
.type-lab [data-font-preview-body="outfit"] { font-family: 'Outfit', sans-serif; }
.type-lab [data-font-preview-body="fraunces"] { font-family: 'Fraunces', serif; }
.type-lab [data-font-preview-body="dmserif"] { font-family: 'DM Serif Text', serif; }
.type-lab [data-font-preview-body="archivo"] { font-family: 'Archivo', sans-serif; }
.type-lab [data-font-preview-body="bricolage"] { font-family: 'Bricolage Grotesque', sans-serif; }
.type-lab [data-font-preview-body="sora"] { font-family: 'Sora', sans-serif; }
.type-lab [data-font-preview-body="ebgaramond"] { font-family: 'EB Garamond', serif; }
.type-lab [data-font-preview-body="lora"] { font-family: 'Lora', serif; }
.type-lab [data-font-preview-body="newsreader"] { font-family: 'Newsreader', serif; }
.type-lab [data-font-preview-body="spectral"] { font-family: 'Spectral', serif; }
.type-lab [data-font-preview-mono="jetbrains"]{ font-family: 'JetBrains Mono', monospace; }
.type-lab [data-font-preview-mono="martian"] { font-family: 'Martian Mono', monospace; }
.type-lab [data-font-preview-mono="ibmplex"] { font-family: 'IBM Plex Mono', monospace; }
.type-lab [data-font-preview-mono="spacemono"]{ font-family: 'Space Mono', monospace; }
/* Tunable name-glow intensity — slider sets this; multiplied into the
text-shadow alpha values so the user can dial in the sweet spot. */
:root {
--name-glow-intensity: 1;
}
/* ── Body weight + italic (set via lab) — 2026-05-20 ── */
:root { --body-weight: 500; --body-style: normal; }
body { font-weight: var(--body-weight, 500); font-style: var(--body-style, normal); }
/* Reset font-style on display/headings so italic toggle only affects body text */
.name, .name .ch,
.pane-title, .fbi-pane-title, .fbi-pane-tagline, .fbi-pane-tagline span,
.pane-sec-head .ord, .pane-sec-head .title, .pane-sec-head .meta,
.pane-eye, .pane-eye .meta,
.masthead, .masthead *,
.lab-bar, .lab-bar *, .type-lab, .type-lab *,
h1, h2, h3, h4, h5, h6,
.card .eyebrow, .card .label, .card .title, .card .foot,
.crumb, .crumb *, .filed, .filed *,
.fail-stamp, .fbi-filed-stamp, .fbi-filed-stamp *,
.fbi-tier-strip .label, .fbi-tier-strip .meta,
.fbi-rank-strip .grade, .fbi-rank-strip .phonetic, .stat .n, .stat .l,
.eval-strip .h, .eval-strip .vbig, .eval-strip .sub,
.fbi-dataflow, .fbi-dataflow *,
.sap-stage, .sap-arrow,
table.features th, table.features td:first-child {
font-style: normal;
}
/* ════════════════════════════════════════════════════════════════════
Global custom scrollbars — blend with the surface palette.
Light contexts (panes, paper-warm bg) get an ink-tinted thumb via the
body.as-pane block earlier in this file. Dark contexts (home, lab
pages, iframed mockups) get a paper-tinted thumb here. Both keep the
track transparent so the scrollbar reads as a thin gesture, not a UI
bar. The existing .notes-list / .notes-reader-scroll / body.as-pane
rules win via higher specificity where they apply.
════════════════════════════════════════════════════════════════════ */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: rgba(245, 242, 236, 0.16);
border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(245, 242, 236, 0.32); }
*::-webkit-scrollbar-corner { background: transparent; }
html { scrollbar-width: thin; scrollbar-color: rgba(245, 242, 236, 0.20) transparent; }
/* ════════════════════════════════════════════════════════════════════
Glassmorphism — accessibility + mobile fallbacks for the home cards.
`prefers-reduced-transparency` (Windows: Transparency effects off /
macOS: Reduce transparency / iOS: Reduce Transparency): revert to
opaque backgrounds + drop backdrop-filter. Letters lose the bloom
effect but the layout still works and contrast is preserved.
Mobile (≤760px): drop backdrop-filter blur from 16px → 8px for perf.
════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-transparency: reduce) {
.card,
.card:hover {
background: var(--ink-2);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.fbi {
background-color: #F2E6C8;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
@media (max-width: 760px) {
.card {
backdrop-filter: blur(8px) saturate(115%);
-webkit-backdrop-filter: blur(8px) saturate(115%);
}
.fbi {
backdrop-filter: blur(8px) saturate(115%);
-webkit-backdrop-filter: blur(8px) saturate(115%);
}
}