/* ============================================================ WorkGraph — Editorial design system ("The Issue") Ink-on-cream, Swiss-typographic. Fraunces (display + numerals), Newsreader (prose), JetBrains Mono (technical apparatus). Day edition (default) + Night edition via [data-theme="night"]. ============================================================ */ :root { --paper: #efe7d3; /* aged parchment */ --paper-2: #f7f1e1; /* raised cards */ --paper-3: #e7ddc5; /* sunken wells */ --ink: #1b1714; --ink-2: #5b534a; --ink-3: #8d8475; --rule: rgba(27, 23, 20, 0.16); --rule-2: rgba(27, 23, 20, 0.08); --accent: #d8381a; /* vermilion */ --accent-2: #b22d10; --accent-3: #c98a2b; /* ochre — fallback for the morning neon tertiary */ --ok: #3f7a52; --shadow: 18px 18px 0 rgba(27, 23, 20, 0.05); --serif: 'Fraunces', Georgia, serif; --body: 'Newsreader', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --gx: #0bb3d6; /* chromatic-glitch cyan companion */ --gy: #6fb600; /* chromatic-glitch lime companion */ /* RGB channels so Tailwind utilities (remapped in tailwind.config.js) get palette colors with alpha support, theme-adaptive. */ --accent-rgb: 216 56 26; --accent-2-rgb: 178 45 16; --accent-3-rgb: 201 138 43; --ok-rgb: 63 122 82; --gx-rgb: 11 179 214; --ink-rgb: 27 23 20; --ink-2-rgb: 91 83 74; --ink-3-rgb: 141 132 117; --paper-rgb: 239 231 211; --paper-2-rgb: 247 241 225; --paper-3-rgb: 231 221 197; color-scheme: light; } /* Morning edition — light risograph paper + neon trio, glitchy overprint. */ html[data-theme="morning"] { --paper: #f6f4ef; --paper-2: #fffefb; --paper-3: #ebe7dd; --ink: #14130f; --ink-2: #4a463f; --ink-3: #837c70; --rule: rgba(20, 18, 16, 0.20); --rule-2: rgba(20, 18, 16, 0.09); --accent: #ff2d55; /* neon pink — primary */ --accent-2: #0bb3d6; /* cyan */ --accent-3: #6fb600; /* lime */ --ok: #2fae6a; --accent-rgb: 255 45 85; --accent-2-rgb: 11 179 214; --accent-3-rgb: 111 182 0; --ok-rgb: 47 174 106; --gx-rgb: 11 179 214; --ink-rgb: 20 19 15; --ink-2-rgb: 74 70 63; --ink-3-rgb: 131 124 112; --paper-rgb: 246 244 239; --paper-2-rgb: 255 254 251; --paper-3-rgb: 235 231 221; --shadow: 18px 18px 0 rgba(20, 18, 16, 0.06); color-scheme: light; } html[data-theme="night"] { --paper: #15110d; --paper-2: #1d1812; --paper-3: #100d0a; --ink: #f3ece0; --ink-2: #b9b0a0; --ink-3: #837a6c; --rule: rgba(243, 236, 224, 0.18); --rule-2: rgba(243, 236, 224, 0.08); --accent: #ff5a33; --accent-2: #ff7a59; --accent-3: #e0a64a; --ok: #6fc08a; --accent-rgb: 255 90 51; --accent-2-rgb: 255 122 89; --accent-3-rgb: 224 166 74; --ok-rgb: 111 192 138; --gx-rgb: 11 179 214; --ink-rgb: 243 236 224; --ink-2-rgb: 185 176 160; --ink-3-rgb: 131 122 108; --paper-rgb: 21 17 13; --paper-2-rgb: 29 24 18; --paper-3-rgb: 16 13 10; --shadow: 18px 18px 0 rgba(0, 0, 0, 0.22); color-scheme: dark; } /* Synchronised theme cross-fade — `theme-transition` is added to only for the duration of a toggle (themeToggle.js), so every colour-bearing property on every element eases at once (CSS-variable changes don't transition otherwise). !important unifies elements that already have their own (differently-timed) transitions so nothing desyncs. */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, stroke .45s ease, box-shadow .45s ease, text-shadow .45s ease, outline-color .45s ease, text-decoration-color .45s ease !important; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; transition: background .5s ease, color .5s ease; } /* Aged-parchment grain that subtly "lives" — the tile drifts so the page breathes like a Daily Prophet illustration. */ body::before { content: ""; position: fixed; inset: -40px; z-index: 0; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: wg-grain 6s steps(6) infinite; } @keyframes wg-grain { 0%{transform:translate(0,0)} 16%{transform:translate(-8px,4px)} 33%{transform:translate(6px,-6px)} 50%{transform:translate(-4px,8px)} 66%{transform:translate(8px,2px)} 83%{transform:translate(-6px,-4px)} 100%{transform:translate(0,0)} } /* Faint vignette for an aged-paper edge. */ body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; box-shadow: inset 0 0 180px rgba(60, 44, 20, 0.10); } html[data-theme="night"] body::after { box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.5); } ::selection { background: var(--accent); color: var(--paper-2); } h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.05; } .mono { font-family: var(--mono); } .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); } .rule { height: 1px; background: var(--rule); border: 0; } /* ── App shell ───────────────────────────────────────────── */ .ed-app { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; } /* Masthead */ .ed-masthead { display: flex; align-items: baseline; gap: 20px; padding: 18px 40px 14px; border-bottom: 1.5px solid var(--ink); } .ed-mark { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -.02em; line-height: 1; } .ed-mark em { font-style: italic; color: var(--accent); } .ed-dateline { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); } .ed-mast-right { margin-left: auto; display: flex; align-items: center; gap: 22px; } .ed-live { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; } .ed-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); } /* Three-column editorial grid */ .ed-grid { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: var(--nav-w, 244px) minmax(0, 1fr) var(--feature-w, 720px); gap: 0; /* Delayed .15s so the column only narrows AFTER the labels finish fading — phase 1 = labels fade (nothing moves), phase 2 = column + icon glide. */ transition: grid-template-columns .4s cubic-bezier(.45,0,.15,1) .15s; } /* No transition while dragging the feature resizer (would lag the pointer). */ body.wg-resizing .ed-grid { transition: none; } /* Section index collapsed to an icon rail. Width is tuned so the index content box (nav − 48px padding − 1px border = 30px) exactly equals the icon box (18px icon + 12px item padding), so item shades, the toggle, AND the separators are all the same 30px box — no 1px mismatch. */ html.wg-nav-rail { --nav-w: 79px; } /* Feature column closed (the ✕). */ html.wg-feature-collapsed .ed-grid { grid-template-columns: var(--nav-w, 244px) minmax(0, 1fr) 0; } html.wg-feature-collapsed .ed-margin { display: none; } .ed-col { min-height: 0; overflow-y: auto; } .ed-index { border-right: 1px solid var(--rule); padding: 30px 24px; overflow-x: hidden; display: flex; flex-direction: column; } /* Pushes the bottom cluster (Collapse control + credit) to the panel bottom. */ .ed-index-push { margin-top: auto; } /* Don't let the flex column squash its children — the 1px separators would shrink to 0 (vanish) when the nav overflows; let it scroll instead. */ .ed-index > * { flex-shrink: 0; } .ed-main { padding: 0; display: flex; flex-direction: column; } .ed-margin { border-left: 1px solid var(--rule); background: var(--paper-3); } /* Section index (left) */ /* The collapse/expand control is a real nav-item row. Like every item it shrinks to its content (a