/* SAC Chronicle design tokens. The paper effect is built from four stacked layers, cheapest first: --paper-grain laid lines (repeating gradient) --paper-fiber pulp tooth — inline SVG fractal noise, ~500 bytes, no network request, rasterised once by the browser and tiled. This is what makes it read as paper instead of as a flat cream rectangle. --paper-foxing age freckles, the brown spots old stock develops --paper-stains larger tea/ink blooms --paper-edge-wear vignette, darker toward the trimmed edges All are `background-attachment: fixed` on , so the sheet stays put while the type scrolls over it — one composited layer, no repaint. */ :root { --paper: #f4eddd; --paper-soft: #fdf8ec; --paper-deep: #e9dfc9; --paper-edge: #cfc3ad; --paper-edge-wear: radial-gradient( ellipse 120% 100% at center, transparent 46%, rgba(74, 56, 30, 0.06) 78%, rgba(46, 34, 18, 0.16) 100% ); --paper-base: var(--paper); --paper-grain: repeating-linear-gradient( 115deg, rgba(24, 20, 16, 0.022) 0 1px, transparent 1px 4px ); /* fractalNoise at a high base frequency = pulp tooth rather than clouds */ --paper-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='0.055'/%3E%3C/svg%3E"); /* Soft-edged and low-contrast on purpose: crisp dots read as a repeating lattice the moment the tile wraps, blooms read as age. */ --paper-foxing: radial-gradient(circle at 18% 32%, rgba(120, 82, 34, 0.03), transparent 9px), radial-gradient(circle at 63% 12%, rgba(120, 82, 34, 0.025), transparent 14px), radial-gradient(circle at 88% 54%, rgba(126, 88, 40, 0.028), transparent 10px), radial-gradient(circle at 34% 78%, rgba(120, 82, 34, 0.022), transparent 18px), radial-gradient(circle at 74% 91%, rgba(126, 88, 40, 0.026), transparent 11px); --paper-stains: radial-gradient(ellipse at 12% 18%, rgba(126, 9, 9, 0.035), transparent 26%), radial-gradient(ellipse at 84% 76%, rgba(94, 62, 24, 0.055), transparent 30%), radial-gradient(ellipse at 52% 46%, rgba(120, 88, 40, 0.03), transparent 40%); --paper-texture-image: none; --ink: #181410; --ink-soft: #42392e; --ink-muted: #706454; --ink-base: var(--ink); --ink-rule: #8f806c; --ink-rule-strong: var(--ink); --rule: var(--ink); --rule-heavy: 3px double var(--rule); --rule-double: 4px double var(--rule); --accent: #830d0d; --accent-red: var(--accent); --accent-deep: #5f0808; --accent-gold: #b78d2f; --font-display: Impact, "Arial Narrow Bold", "Franklin Gothic Medium", Haettenschweiler, sans-serif; --font-body: Georgia, "Times New Roman", Charter, serif; --font-serif: var(--font-body); --font-mono: "Courier New", Courier, monospace; --font-mono-serif: var(--font-mono); --fs-scale: 1; --fs-xs: calc(0.72rem * var(--fs-scale)); --fs-sm: calc(0.86rem * var(--fs-scale)); --fs-base: 1rem; --fs-md: calc(1.15rem * var(--fs-scale)); --fs-lg: calc(1.5rem * var(--fs-scale)); --fs-xl: calc(2.05rem * var(--fs-scale)); --fs-2xl: calc(3rem * var(--fs-scale)); --fs-3xl: calc(4.2rem * var(--fs-scale)); --fs-4xl: calc(4.8rem * var(--fs-scale)); --sidebar-w: 218px; --sidebar-collapsed-w: 68px; /* Height of the sticky mobile masthead strip (see .mobile-topbar) */ --topbar-h: 54px; --max-w: 1240px; --max-w-content: var(--max-w); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.85rem; --space-4: 1.25rem; --space-5: 1.75rem; --space-6: 2.75rem; --space-7: 3.5rem; --radius: 0; --radius-sm: 0; --transition: 180ms ease; } [data-theme="dark"] { --paper: #1b1713; --paper-soft: #241e18; --paper-deep: #30271e; --paper-edge: #504335; --paper-edge-wear: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.35)); --ink: #f1e8d8; --ink-soft: #d7cbb8; --ink-muted: #ab9c87; --ink-rule: #8e806d; --ink-rule-strong: var(--ink); --accent: #d46b5f; --accent-red: var(--accent); --accent-deep: #f08c7d; --accent-gold: #d6b25b; } /* The settings texture choices are color/gradient swaps only. */ [data-theme="light"][data-texture="aged"] { --paper: #eee2cb; --paper-soft: #f8eedc; --paper-deep: #e2d2b4; } [data-theme="light"][data-texture="rustic"] { --paper: #e8d8bd; --paper-soft: #f3e5cf; --paper-deep: #d7c09b; } [data-theme="light"][data-texture="notice"] { --paper: #e8e5d5; --paper-soft: #f5f2e5; --paper-deep: #d6d1bb; } [data-theme="light"][data-texture="dark"] { --paper: #27221c; --paper-soft: #332b23; --paper-deep: #17130f; --ink: #f1e8d8; --ink-soft: #d7cbb8; --ink-muted: #ab9c87; --rule: #f1e8d8; --accent: #d46b5f; } [data-theme="light"][data-texture="kraft"] { --paper: #cdb58c; --paper-soft: #e0c99e; --paper-deep: #b99d6d; } [data-theme="light"][data-texture="parchment"] { --paper: #f3e8c8; --paper-soft: #fff4d8; --paper-deep: #e1d0a7; } [data-theme="light"][data-texture="slate"] { --paper: #d6d7d0; --paper-soft: #e8e9e2; --paper-deep: #bec1b8; } /* Newspaper-grade paper surfaces. - Default page starts with gradients only (fast paint, no raster). - Raster scans are lazy via settings; image-set gives retina readiness even though current assets are 1× — browsers fall back gracefully to 1×. - New textures (newsprint, ledger, blueprint) are pure CSS for instant load. */ [data-texture="natural"] { --paper-texture-image: image-set( url("../assets/natural-paper.png") 1x, url("../assets/natural-paper.png") 2x ); } [data-texture="fibers"] { --paper-texture-image: image-set( url("../assets/paper-fibers.png") 1x, url("../assets/paper-fibers.png") 2x ); } [data-texture="rice"] { --paper-texture-image: image-set( url("../assets/rice-paper.png") 1x, url("../assets/rice-paper.png") 2x ); } [data-texture="linen"] { --paper-texture-image: image-set( url("../assets/stressed-linen.png") 1x, url("../assets/stressed-linen.png") 2x ); } [data-texture="groove"] { --paper-texture-image: image-set( url("../assets/groovepaper.png") 1x, url("../assets/groovepaper.png") 2x ); } [data-texture="wall"] { --paper-texture-image: image-set( url("../assets/old-wall.png") 1x, url("../assets/old-wall.png") 2x ); } /* Pure-CSS newspaper extras — no network cost, instant paint */ [data-texture="newsprint"] { --paper-grain: repeating-linear-gradient(0deg, rgba(24, 20, 16, 0.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(24, 20, 16, 0.018) 0 1px, transparent 1px 4px); --paper-stains: radial-gradient(ellipse at 30% 20%, rgba(126, 9, 9, 0.035), transparent 28%), radial-gradient(ellipse at 78% 82%, rgba(24, 20, 16, 0.05), transparent 32%); } [data-texture="ledger"] { --paper-grain: repeating-linear-gradient( 0deg, transparent 0 28px, rgba(131, 13, 13, 0.07) 28px 29px, transparent 29px 30px ); --paper-stains: radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(24, 20, 16, 0.04) 100%); } [data-texture="blueprint"] { --paper: #eef2f7; --paper-soft: #f7f9fc; --paper-deep: #d6dce8; --paper-grain: repeating-linear-gradient( 0deg, transparent 0 24px, rgba(31, 62, 122, 0.08) 24px 25px ); } [data-reduce-motion] *, [data-reduce-motion="on"] *, [data-reduce-motion] *::before, [data-reduce-motion="on"] *::before, [data-reduce-motion] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }