/* * Raconteur — design tokens & base system. * * Palette: "typewriter ribbon" — cool near-black ink ground, warm cream * book-paper text, a single spine-orange accent in the tradition of * colour-coded paperback spine livery (a real historic convention: mass- * market imprints have long colour-coded spines by genre/imprint so a * shelf reads at a glance). A muted moss taxonomy tone is used only as a * low-saturation utility color for tagging essays vs. novels — never as a * second brand accent. Two self-hosted families only (Raconteur Display / * Raconteur Text — Alegreya + Merriweather, see fonts.css). * * Layout archetype: the "reading room" — a persistent left-hand rail of * chapter/issue navigation plus a wide central reading column, distinct * from this catalogue's other editorial archetypes (Quire's cross-page * view-transition index, Dispatch's per-category ticker grid, Patina's * catalogue-spread). * * @package Raconteur */ *, *::before, *::after { box-sizing: border-box; } /* ---------- Reading modes govern the WHOLE site ---------- * * paper / sepia / night were once a skin for the chapter body only. They now * drive every chrome token on the page, so the same control that warms the * prose warms the shelf, the header and the footer with it. `paper` is the * default: this is a place to read fiction, and every comparable reading * platform opens on a light page, not a dark one. * * The mode lives in `data-read-mode` on — written synchronously by the * inline no-flash script in header.php, then persisted by * assets/js/raconteur-ui.js. The bare `:root` block below is therefore also * the paper palette, so a visitor with no stored preference (or with JS off) * still gets the light page rather than a flash of the wrong theme. * * Token names are identical in all three modes; only values change. Nothing * downstream branches on the mode except the handful of places called out in * comments (photo scrims, book jackets, on-accent text) where a surface is * genuinely mode-independent. */ :root, :root[data-read-mode="paper"] { --rc-ink: #f7f3e8; --rc-ink-soft: #efe9da; --rc-ink-elevated: #fffdf7; --rc-paper: #22201b; --rc-paper-dim: rgba(34, 32, 27, 0.74); --rc-paper-faint: rgba(34, 32, 27, 0.64); --rc-accent: #a8451c; --rc-accent-bright: #c1592f; --rc-moss: #55684d; --rc-moss-bright: #46583f; --rc-line: rgba(34, 32, 27, 0.13); --rc-line-strong: rgba(34, 32, 27, 0.24); --rc-glass-bg: rgba(255, 253, 247, 0.74); --rc-glass-border: rgba(34, 32, 27, 0.11); --rc-shadow: 0 24px 64px rgba(63, 52, 34, 0.13); --rc-field-tint: 0.133, 0.125, 0.106; --rc-read-bg: #f6f1e4; --rc-read-fg: #26221a; --rc-read-rule: rgba(38, 34, 26, 0.14); } /* Sepia: a warm middle, not a third brand. Surfaces are pulled from the * reading triad that already existed (#ecdfc4 / #3a2f1f) and the accent is * deepened one step so it still carries 4.5:1 against a tinted page. */ :root[data-read-mode="sepia"] { --rc-ink: #f2e6cd; --rc-ink-soft: #e9dcc0; --rc-ink-elevated: #fbf1dd; --rc-paper: #3a2f1f; --rc-paper-dim: rgba(58, 47, 31, 0.76); --rc-paper-faint: rgba(58, 47, 31, 0.72); --rc-accent: #9c3f18; --rc-accent-bright: #b8511f; --rc-moss: #55684d; --rc-moss-bright: #46583f; --rc-line: rgba(58, 47, 31, 0.16); --rc-line-strong: rgba(58, 47, 31, 0.28); --rc-glass-bg: rgba(251, 241, 221, 0.76); --rc-glass-border: rgba(58, 47, 31, 0.14); --rc-shadow: 0 24px 64px rgba(74, 58, 30, 0.16); --rc-field-tint: 0.227, 0.184, 0.122; --rc-read-bg: #ecdfc4; --rc-read-fg: #3a2f1f; --rc-read-rule: rgba(58, 47, 31, 0.16); } /* Night: the palette this theme shipped with, unchanged. */ :root[data-read-mode="night"] { --rc-ink: #14161a; --rc-ink-soft: #1a1d22; --rc-ink-elevated: #22262c; --rc-paper: #ece4d1; --rc-paper-dim: rgba(236, 228, 209, 0.72); /* Was 0.46, which measured 3.92:1 on ink — below AA for the 15px meta text * this token is used for. Raised to match the correction applied to the two * light modes; it is an opacity knob on the existing cream, not a repaint. * Everything else in this block is the palette the theme shipped with. */ --rc-paper-faint: rgba(236, 228, 209, 0.55); --rc-accent: #c1592f; --rc-accent-bright: #e07949; --rc-moss: #6f8368; --rc-moss-bright: #8ea287; --rc-line: rgba(236, 228, 209, 0.14); --rc-line-strong: rgba(236, 228, 209, 0.24); --rc-glass-bg: rgba(26, 29, 34, 0.66); --rc-glass-border: rgba(236, 228, 209, 0.12); --rc-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); --rc-field-tint: 0.929, 0.894, 0.820; --rc-read-bg: #14161a; --rc-read-fg: #ece4d1; --rc-read-rule: rgba(236, 228, 209, 0.16); } :root { /* Foreground for anything sitting ON the accent (buttons, active chips, * the active mode pip). The accent is a mid-dark orange in every mode, so * this one value is correct in all three — using --rc-paper here would put * near-black ink on an orange button the moment the site went light. */ --rc-on-accent: #fff8f0; --rc-font-display: 'Raconteur Display', Georgia, 'Times New Roman', serif; --rc-font-text: 'Raconteur Text', Georgia, 'Times New Roman', serif; --rc-font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; /* Type scale: base 17px x 1.25 (major third-ish), 8 sizes, reused everywhere. */ --rc-size-0: 0.9375rem; /* 15 */ --rc-size-1: 1.0625rem; /* 17 */ --rc-size-2: 1.3125rem; /* 21 */ --rc-size-3: 1.6875rem; /* 27 */ --rc-size-4: 2.0625rem; /* 33 */ --rc-size-5: 2.625rem; /* 42 */ --rc-size-6: 3.25rem; /* 52 */ --rc-size-7: 4.0625rem; /* 65 */ /* Spacing scale: base 8px. */ --rc-sp-1: 0.5rem; --rc-sp-2: 1rem; --rc-sp-3: 1.5rem; --rc-sp-4: 2rem; --rc-sp-5: 3rem; --rc-sp-6: 4rem; --rc-sp-7: 6rem; --rc-sp-8: 8rem; --rc-sp-9: 10rem; --rc-radius: 3px; --rc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --rc-ease-in: cubic-bezier(0.7, 0, 0.84, 0); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* `overflow-x: clip` clips exactly like `hidden` but does NOT turn the box * into a scroll container. With `hidden` here, became a scrollport of * its own, and a sticky box can only stick inside its own scrollport — which * silently disabled `.site-header { position: sticky }` on every template. * (assets/css/reader.css previously patched this for the chapter reader * alone; that scoped rule is now redundant but harmless, and the reader still * un-sticks the site header there so the toolbar keeps the top edge.) */ html, body { overflow-x: clip; } body { margin: 0; background: var(--rc-ink); color: var(--rc-paper); font-family: var(--rc-font-text); font-size: var(--rc-size-1); line-height: 1.55; -webkit-font-smoothing: antialiased; /* Neutralised wholesale by the reduced-motion block above. */ transition: background-color 0.4s var(--rc-ease-out), color 0.4s var(--rc-ease-out); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p, figure { margin: 0; } h1, h2, h3, h4 { font-family: var(--rc-font-display); font-weight: 700; line-height: 1.14; letter-spacing: -0.008em; text-wrap: balance; } .h-display { font-size: var(--rc-size-7); } .h-1 { font-size: var(--rc-size-6); } .h-2 { font-size: var(--rc-size-5); } .h-3 { font-size: var(--rc-size-4); } .h-4 { font-size: var(--rc-size-3); } @media (max-width: 720px) { .h-display { font-size: var(--rc-size-6); } .h-1 { font-size: var(--rc-size-5); } .h-2 { font-size: var(--rc-size-4); } } .eyebrow { font-family: var(--rc-font-text); font-size: var(--rc-size-0); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rc-accent-bright); } .lede { font-size: var(--rc-size-2); color: var(--rc-paper-dim); line-height: 1.5; } .tag { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.3em 0.75em; border-radius: 999px; border: 1px solid var(--rc-line-strong); font-size: var(--rc-size-0); letter-spacing: 0.04em; text-transform: uppercase; color: var(--rc-paper-dim); } /* Both borders used to be frozen copies of the night accent/moss. Mixing off * the live token instead keeps them in step when the page goes light. */ .tag--novel { border-color: color-mix(in srgb, var(--rc-accent) 42%, transparent); color: var(--rc-accent-bright); } .tag--essay { border-color: color-mix(in srgb, var(--rc-moss) 52%, transparent); color: var(--rc-moss-bright); } .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--rc-sp-4); } .container--narrow { max-width: 800px; } .container--reading { max-width: 700px; } section { position: relative; padding: var(--rc-sp-7) 0; } @media (max-width: 720px) { section { padding: var(--rc-sp-6) 0; } } .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.85em 1.6em; border-radius: var(--rc-radius); font-size: var(--rc-size-1); font-weight: 700; letter-spacing: 0.01em; transition: transform 0.3s var(--rc-ease-out), background 0.3s var(--rc-ease-out), border-color 0.3s var(--rc-ease-out); } .btn--primary { background: var(--rc-accent); color: var(--rc-on-accent); } /* * Night's accent (#c1592f) is only 4.43:1 from pure white, so NO foreground * clears WCAG AA on it — the primary CTA measured 4.21:1. The button surface * is darkened ~8% in night mode only (4.82:1). The accent token itself is * untouched, so headings, rules and links keep the exact signature orange; * this is scoped to the one element that has text sitting on top of it. */ :root[data-read-mode="night"] .btn--primary { background: color-mix(in srgb, var(--rc-accent) 92%, #000); } .btn--primary:hover { background: var(--rc-accent-bright); transform: translateY(-2px); } .btn--ghost { border: 1px solid var(--rc-line-strong); color: var(--rc-paper); } .btn--ghost:hover { border-color: var(--rc-accent-bright); color: var(--rc-accent-bright); transform: translateY(-2px); } .card { background: var(--rc-glass-bg); border: 1px solid var(--rc-glass-border); border-radius: 6px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .rule { border: none; border-top: 1px solid var(--rc-line); margin: var(--rc-sp-5) 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .visually-hidden-focusable:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* GPU word-frequency field host — fixed, full-viewport, sits behind all * content. Off by default until raconteur-field.js confirms a capable * tier; the Static fallback below covers reduced-motion/no-WebGL. * * Two direct body children only: the fixed field stage (z-index:0) and * .rc-page wrapping everything real (z-index:1) — an explicit two-child * stacking order, not a generic `body > *` rule, so nothing real content * ever adds as a third direct child can accidentally slip behind the * field or in front of it by omission. */ .rc-field-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--rc-ink); } #rc-field-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--rc-ease-out); } .rc-field-stage.is-ready #rc-field-canvas { opacity: 1; } .rc-page { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { #rc-field-canvas { display: none; } } /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--rc-accent); color: var(--rc-on-accent); padding: var(--rc-sp-2) var(--rc-sp-3); z-index: 200; } .skip-link:focus { left: 0; } /* ---------- Layout ---------- */ .wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--rc-sp-4); } @media (max-width: 720px) { .wrap { padding: 0 var(--rc-sp-3); } } .section { padding: var(--rc-sp-8) 0; } @media (max-width: 900px) { .section { padding: var(--rc-sp-6) 0; } } .section-head { max-width: 46rem; margin-bottom: var(--rc-sp-5); } .section-head + .section-head { margin-top: var(--rc-sp-5); } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--rc-line); background: var(--rc-glass-bg); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: var(--rc-sp-2) 0; } .brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--rc-font-display); font-size: var(--rc-size-3); color: var(--rc-paper); } .brand__mark { color: var(--rc-accent-bright); } .brand small { display: block; font-family: var(--rc-font-text); font-size: 0.6em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rc-paper-faint); } .nav-toggle { display: none; } .nav__close { display: none; } /* .nav must refuse to shrink too. Its children already do, so a shrunken .nav * simply overflowed to the right and slid underneath the reading-mode toggle * (measured 25px of overlap). The brand is the one flexible item in the * header — see .brand { min-width: 0 } below. */ .nav { display: flex; align-items: center; gap: var(--rc-sp-4); flex-shrink: 0; } .nav__links { display: flex; align-items: center; gap: var(--rc-sp-3); } /* * wp_nav_menu() is called with 'container' => false, so the menu arrives as a * bare