/* Theme Name: Sawyer Continental Description: Editorial Hybrid design for sawyer.today — a magazine-grade automated daily briefing. Companion to the Sawyer Aggregator plugin. Built 4 September 2026, 14:20 GMT. 2.0.3 (RQ-354): the music digest at /digest/music finally has CSS. The fragment digest_render.py emits has been deliberately bare since 30 Aug, so every class it carries (.music-digest, .pick, .stars, .trow et al) was unstyled; they are now styled from the existing tokens — plum leisure hue set once on the root, Archivo display, Newsreader italic for blurbs, .rail-itm's grid for picks, .data-table's hairlines for track lists, and figure.img reused for square cover art. No new custom properties or components. Paired with plugin 1.8.2. Version: 2.0.3 Author: David Sawyer License: GPL-2.0-or-later Text Domain: sawyer-continental */ /* ------------------------------------------------------------------------- * Fonts — self-hosted (RQ-346, 4 Sep 2026), per design-system.md and the * self-host handover note. These @font-face rules MUST stay at the very top * of this file: the CDN font import they replace sat below the :root * blocks, where CSS ignores an import rule outright (it is only valid * before any other rule), so Archivo and Newsreader had never actually loaded * on the live site — every page rendered in Helvetica/Georgia. url() paths * resolve relative to this stylesheet, i.e. the theme root. * * Archivo: five static latin cuts, the weights the design system uses. * Newsreader: the two variable files (roman + italic), weight axis 400-700, * optical-size axis 6..72 — one file per style rather than eight statics. * ---------------------------------------------------------------------- */ @font-face { font-family: 'Archivo'; src: url('assets/fonts/archivo-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo'; src: url('assets/fonts/archivo-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo'; src: url('assets/fonts/archivo-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo'; src: url('assets/fonts/archivo-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo'; src: url('assets/fonts/archivo-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Newsreader'; src: url('assets/fonts/newsreader-variable.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Newsreader'; src: url('assets/fonts/newsreader-variable-italic.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; } /* ------------------------------------------------------------------------- * Design tokens — source of truth: 01 Projects/Websites/sawyer.today/design/design-tokens.css * Dark mode contract: system preference by default; overrides. * ---------------------------------------------------------------------- */ :root { --bg: #f7f1e6; --band: #eee5d2; --ink: #241c14; --muted: #75695a; --rule: rgba(36, 28, 20, 0.18); --rule-strong: rgba(36, 28, 20, 0.8); --c-news: #a8431f; /* rust — also the site accent */ --c-dev: #62703c; /* olive */ --c-watford: #c6921f; /* amber */ --c-research: #47606e; /* slate */ --c-faith: #3f6b5a; /* pine */ --c-prod: #8c5b2f; /* clay */ --c-leisure: #7a4a5c; /* plum */ --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --fs-masthead: 46px; --fs-masthead-sub: 28px; --fs-h1: 54px; --fs-h2: 30px; --fs-h3: 20px; --fs-rail: 17px; --fs-standfirst: 21px; --fs-body: 19px; --fs-pullquote: 27px; --fs-meta: 13px; --fs-caps: 11px; --ls-caps: 0.16em; --lh-body: 1.7; --measure-reading: 680px; --width-content: 1220px; --space-xs: 8px; --space-s: 14px; --space-m: 26px; --space-l: 44px; --space-xl: 56px; --pad-section: 40px; --rule-w-hair: 1px; --rule-w-section: 2px; --rule-w-accent: 3px; --tick-w: 32px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1e1913; --band: #27211a; --ink: #f1e9db; --muted: #a89b89; --rule: rgba(241, 233, 219, 0.17); --rule-strong: rgba(241, 233, 219, 0.75); --c-news: #d4713f; --c-dev: #93a463; --c-watford: #ddb04a; --c-research: #7d9aac; --c-faith: #74a68e; --c-prod: #c2905c; --c-leisure: #b0788e; } } [data-theme="dark"] { --bg: #1e1913; --band: #27211a; --ink: #f1e9db; --muted: #a89b89; --rule: rgba(241, 233, 219, 0.17); --rule-strong: rgba(241, 233, 219, 0.75); --c-news: #d4713f; --c-dev: #93a463; --c-watford: #ddb04a; --c-research: #7d9aac; --c-faith: #74a68e; --c-prod: #c2905c; --c-leisure: #b0788e; } /* ------------------------------------------------------------------------- * Base * ---------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } /* The admin bar is off on the front end (RQ-346 §E) and its wp_head bump callback is unhooked, but core also ships an admin-bar stylesheet that can re-apply the offset — belt and braces, the masthead starts at the top of the page. */ html { margin-top: 0 !important; } body { background: var(--bg); color: var(--ink); font-family: var(--font-display); line-height: 1.5; } a { color: var(--c-news); text-decoration: none; } a:hover { color: var(--ink); } img { max-width: 100%; display: block; } .wrap { max-width: calc(var(--width-content) + 60px); margin: 0 auto; padding: 0 30px; } .serif { font-family: var(--font-serif); } .caps { font-size: var(--fs-caps); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; } /* ------------------------------------------------------------------------- * Top-level nav — hover-flyout mega-menu with a section-hue dot per item. * ---------------------------------------------------------------------- */ .topnav { padding: 0 0 14px; display: flex; gap: 26px; border-bottom: 1px solid var(--rule); list-style: none; } .topnav li { display: block; } .topnav a { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); text-decoration: none; } .topnav a:hover { color: var(--c-news); } .topnav a.holding { color: var(--muted); cursor: default; } .topnav li.current-menu-item a, .topnav li.current_page_item a { box-shadow: inset 0 -2px 0 var(--c-news); } /* RQ-346 §B: the flyout keeps its hover/focus-within behaviour exactly as it was — it works and David likes it — but it is now a tinted paper panel with a 3px section-hue top rule and hairline item separators, rather than a bordered, drop-shadowed box. Labels are the design system's caps voice: 11px / 0.16em / 700, muted, with the active item in ink under a 2px hue underline. Dots stay. */ .topnav-mega { gap: 30px; padding: 13px 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); } .tn-item { position: relative; display: flex; align-items: center; } .tn-item > a { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-caps); font-weight: 500; letter-spacing: var(--ls-caps); text-transform: uppercase; } .tn-item > a:hover { color: var(--ink); } .tn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--hue, var(--muted)); } .tn-item.on > a { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--hue, var(--c-news)); padding-bottom: 12px; margin-bottom: -13px; } .tn-flyout { display: none; position: absolute; top: 100%; left: 0; flex-direction: column; background: var(--band); border: none; border-top: var(--rule-w-accent) solid var(--hue, var(--c-news)); min-width: 210px; z-index: 30; box-shadow: none; padding: 6px 0; } /* The flyout box starts flush at top:100% — a margin here would leave a dead zone the mouse has to cross, which closed the menu before you reached it (fixed 24 Aug 2026, kept). */ .tn-item:hover .tn-flyout, .tn-item:focus-within .tn-flyout { display: flex; } .tn-flyout a { padding: 11px 18px; font-size: var(--fs-caps); font-weight: 500; letter-spacing: var(--ls-caps); text-transform: uppercase; white-space: nowrap; color: var(--muted); box-shadow: none !important; border-top: 1px solid var(--rule); } .tn-flyout a:first-child { border-top: none; } .tn-flyout a:hover, .tn-flyout a:focus { color: var(--ink); background: none; } /* ------------------------------------------------------------------------- * Masthead * ---------------------------------------------------------------------- */ .sitehead { padding: 26px 0 0; } .bar { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 18px; gap: 16px; flex-wrap: wrap; } .logo { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-masthead); letter-spacing: -0.03em; text-decoration: none; color: var(--ink); line-height: 1; } /* One flex item, not three: the gap above must never fall between "sawyer", the stop and "today" — see the note in header.php. */ .logo .wordmark { display: inline-block; white-space: nowrap; } .logo .dot-stop { color: var(--c-news); } .logo .mark { width: var(--fs-masthead); height: var(--fs-masthead); display: inline-flex; color: var(--ink); flex-shrink: 0; } .logo .mark svg { width: 100%; height: 100%; } .bar .r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--muted); text-align: right; } .bar .r b { color: var(--ink); font-style: normal; font-weight: 500; } .bar .r .counts { font-size: 13px; } /* Masthead micro-row: DARK · ADMIN (RQ-346 §D/§E). Furniture, not navigation — caps, muted, quiet, and it never grows a border or a button. */ .bar .r .micro { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-style: normal; margin-top: 2px; } .bar .r .micro a { color: var(--muted); font-weight: 500; letter-spacing: var(--ls-caps); } .bar .r .micro a:hover { color: var(--ink); } .bar .r .micro .sep { color: var(--rule-strong); } .sitehead.slim { padding: 24px 0 0; } .sitehead.slim .bar { padding-bottom: 16px; align-items: baseline; } .sitehead.slim .logo { font-size: var(--fs-masthead-sub); gap: 10px; } .sitehead.slim .logo .mark { width: 30px; height: 30px; } /* Second-level strip — one pattern site-wide (RQ-346 §B). News, Research, Leisure and Watford all render this same component, always in the masthead: 10px caps, 2px strong top rule, 1px hairline bottom, the active tab in ink under a 2px underline in the section's own hue. */ .sections { display: flex; gap: 0; border-top: var(--rule-w-section) solid var(--rule-strong); border-bottom: var(--rule-w-hair) solid var(--rule); flex-wrap: wrap; align-items: stretch; } .sections a { padding: 11px 20px 10px; font-size: 10px; font-weight: 500; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); text-decoration: none; } .sections a:first-child { padding-left: 0; } .sections a:hover { color: var(--ink); } .sections a.on { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--hue, var(--c-news)); } .sections .push { margin-left: auto; color: var(--hue, var(--c-news)); padding-right: 0; } .sections .drop { position: relative; display: flex; } .sections .drop > a { display: flex; align-items: center; } /* Same tinted-paper panel as the top-nav flyout — no border, no shadow. */ .sections .drop-menu { display: none; position: absolute; top: 100%; left: 0; flex-direction: column; background: var(--band); border: none; border-top: var(--rule-w-accent) solid var(--hue, var(--c-news)); min-width: 200px; z-index: 20; box-shadow: none; padding: 6px 0; } .sections .drop:hover .drop-menu, .sections .drop:focus-within .drop-menu { display: flex; } .sections .drop-menu a { padding: 11px 18px; white-space: nowrap; border-top: 1px solid var(--rule); } .sections .drop-menu a:first-child { border-top: none; padding-left: 18px; } .sections .drop-menu a:hover { color: var(--ink); background: none; } /* Section header (used on landing/section pages) */ .section-header { display: flex; justify-content: space-between; align-items: flex-end; padding: 34px 0 24px; gap: 24px; flex-wrap: wrap; } .section-header .eyebrow { color: var(--muted); } .section-header h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: 48px; line-height: 1; margin-top: 8px; } .section-header .dek { font-family: var(--font-serif); font-style: italic; color: var(--muted); font-size: 16px; max-width: 420px; text-align: right; } /* ------------------------------------------------------------------------- * Signpost band — fixed furniture on section landing pages (Leisure/Faith/Productivity). * ---------------------------------------------------------------------- */ .signpost-band { background: var(--band); display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } .signpost { padding: 28px 32px 32px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 11px; } .signpost:last-child { border-right: none; } .signpost-icon { color: var(--ink); height: 40px; display: flex; align-items: flex-end; } .signpost-icon svg { width: 56px; height: 36px; } .signpost h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: 28px; } .signpost p { font-family: var(--font-serif); font-style: italic; color: var(--muted); font-size: 14.5px; line-height: 1.45; } .signpost .enter { font-size: 10px; margin-top: 2px; } .signpost.soon .enter { color: var(--muted); } /* Actions text-links */ .actions { display: flex; gap: 20px; margin-top: 16px; align-items: center; } .actions > *:not(:last-child)::after { content: '\00b7'; color: var(--rule-strong); font-weight: 400; margin-left: 20px; } .actions .sep { color: var(--rule-strong); } .actions .btn-read { color: var(--c-news); } .btn-read, .btn-save, .btn-research { font: inherit; font-family: var(--font-display); font-size: var(--fs-caps); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; border: none; background: none; color: var(--muted); padding: 0; cursor: pointer; } .btn-read:hover, .btn-save:hover, .btn-research:hover { color: var(--c-news); } .btn-save.active { color: var(--c-news); } .btn-research.active { color: var(--muted); cursor: default; } .actions.mini { margin-top: 10px; gap: 10px; } .actions.mini .btn-read, .actions.mini .btn-save, .actions.mini .btn-research { font-size: 9px; letter-spacing: var(--ls-caps); } .actions.mini > *:not(:last-child)::after { margin-left: 10px; } /* ------------------------------------------------------------------------- * Research / Saturday Read rows — hairline cards, no boxes. * ---------------------------------------------------------------------- */ .research-list { display: flex; flex-direction: column; margin-top: var(--space-m); } .research-row { border-top: 1px solid var(--rule); padding: 22px 0; } .research-row:first-child { border-top: none; } .research-row h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin-bottom: 6px; } .research-row h3 a { text-decoration: none; } .research-row h3 a:hover { color: var(--c-news); } .research-row .meta { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; } .research-row .summary { font-family: var(--font-serif); font-size: 16px; line-height: 1.65; color: var(--ink); } .research-row .summary p { margin-bottom: 12px; } .research-row .summary p:last-child { margin-bottom: 0; } .research-row-pending { opacity: 0.75; } /* Publications — front-page right-column section */ .pubs { margin-top: var(--space-l); padding-top: 20px; border-top: 2px solid var(--rule-strong); } .pubs h4.caps { margin-bottom: 14px; color: var(--ink); } .pub-row { display: block; padding: 14px 0; border-top: 1px solid var(--rule); text-decoration: none; } .pub-row:first-of-type { border-top: none; padding-top: 0; } .pub-name { font-size: 10px; font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-news); } .pub-date { font-size: 11.5px; color: var(--muted); margin-left: 8px; } .pub-row h5 { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -.2px; line-height: 1.25; margin-top: 4px; } .new { display: inline-block; background: var(--c-news); color: var(--bg); font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 2px 6px; vertical-align: middle; } /* Publications landing + individual publication page */ .pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-m); padding: 10px 0 40px; } .pub-card { display: block; border-top: 2px solid var(--rule-strong); padding-top: 18px; text-decoration: none; } .pub-card:hover h3 { color: var(--c-news); } .pub-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 8px; } .pub-card .meta { margin-bottom: 6px; color: var(--muted); font-size: 12.5px; } .pub-latest { max-width: var(--measure-reading); margin: 0 auto; padding: 20px 0 40px; } .pub-latest h1 { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 8px 0 18px; } .pub-body { font-family: var(--font-serif); font-size: var(--fs-body); color: var(--ink); line-height: var(--lh-body); margin-bottom: 22px; } .pub-body img { margin: 12px 0; } .pub-archive { margin: 20px 0 50px; border-top: 1px solid var(--rule); padding-top: 18px; } .pub-archive summary { cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: .5px; color: var(--muted); } .pub-archive ul { list-style: none; margin-top: 14px; } .pub-archive li { padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14.5px; } .pub-archive li:first-child { border-top: none; } .pub-archive a { color: var(--ink); text-decoration: none; } .pub-archive a:hover { color: var(--c-news); } .pub-back { padding: 24px 0 0; font-size: 13px; } .pub-back a { color: var(--c-news); font-weight: 700; text-decoration: none; } /* ------------------------------------------------------------------------- * Pool pages — the briefing layout (RQ-346 §G, 4 Sep 2026). * /news, /development, /finance, /watford and the tier archives all render * template-parts/pool.php, so all of this is one set of metrics rather than * four copies that had drifted. Numbers are from design-tokens.css and the * homepage mock: fluid lead column + fixed 360px ranked rail, 56px gutter. * ---------------------------------------------------------------------- */ /* Single-column page body. RQ-346: research.php, fpl.php and the Saturday Read archive used to wrap in .front — the lead+rail grid — so their sub-nav, H1, lede and tables were dealt alternately into two columns. .front is now only for pages that genuinely have a lead and a rail. */ main.page { display: block; padding: var(--pad-section) 0 30px; } .front { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-xl); align-items: start; padding: var(--pad-section) 0 var(--space-l); } .lead-col { display: flex; flex-direction: column; } .pool-empty { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--muted); padding: 40px 0; } /* Kicker: "01 — SECTOR · 7.2", in the item's own hue. The numbered-kicker device is core to the identity (design-system.md) — keep it. */ .num { font-family: var(--font-display); font-size: var(--fs-caps); font-weight: 700; letter-spacing: var(--ls-caps); color: var(--hue, var(--c-news)); text-transform: uppercase; display: block; } .lead h2 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.025em; line-height: 1.03; margin: 18px 0 0; } .lead p.d { font-size: var(--fs-standfirst); font-style: italic; color: var(--muted); max-width: 700px; margin-top: 16px; line-height: 1.42; } .lead > .img { margin-top: 20px; } .lead .meta { margin-top: 16px; } .lead h2 a, .second h3 a, .rail-itm h3 a, .scan-itm h3 a, .archive-row h3 a { text-decoration: none; color: inherit; } .lead h2 a:hover, .second h3 a:hover, .rail-itm h3 a:hover, .scan-itm h3 a:hover, .archive-row h3 a:hover { color: var(--hue, var(--c-news)); } .meta { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; } /* "Why it's here" — hairline top and bottom, run-in caps label in rust. Never a boxed callout. */ .why { margin-top: 16px; border-top: var(--rule-w-hair) solid var(--rule); border-bottom: var(--rule-w-hair) solid var(--rule); padding: 14px 0; font-size: 16.5px; line-height: 1.5; max-width: 700px; } .why .why-label { color: var(--c-news); margin-right: 10px; font-size: 10px; } .why .serif { font-family: var(--font-serif); } /* Second story — same furniture, one step down, opened by a strong rule. */ .second { border-top: var(--rule-w-section) solid var(--rule-strong); margin-top: var(--space-m); padding-top: 24px; } .second h3 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; margin: 10px 0 0; } .second p.d { font-size: 17px; font-style: italic; color: var(--muted); line-height: 1.45; max-width: 660px; margin-top: 10px; } .second .meta { margin-top: 10px; } /* Ranked rail — 360px, numbers and micro-kickers in each item's own hue. */ .rail { display: flex; flex-direction: column; } .rail-head { color: var(--ink); border-bottom: var(--rule-w-hair) solid var(--rule-strong); padding-bottom: 10px; } .rail-empty { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--muted); padding: 15px 0; } .rail-itm { display: grid; grid-template-columns: 26px minmax(0, 1fr) 96px; gap: 14px; padding: 15px 0; border-bottom: var(--rule-w-hair) solid var(--rule); align-items: start; } .rail-itm:last-of-type { border-bottom: none; } .rail-num { font-family: var(--font-display); font-size: var(--fs-rail); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--hue, var(--c-news)); } .rail-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rail-kicker { font-size: 9px; color: var(--hue, var(--c-news)); } .rail-itm h3 { font-family: var(--font-display); font-size: var(--fs-rail); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; } .rail-source { font-size: 13px; font-style: italic; color: var(--muted); } .rail-itm .img { margin-top: 2px; } /* Worth a scan — three across, 48px gutter. */ .bottom { border-top: var(--rule-w-section) solid var(--rule-strong); padding: 26px 0 8px; } .bottom-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: var(--space-m); flex-wrap: wrap; } .bottom-head h2 { color: var(--ink); font-size: var(--fs-caps); } .bottom-head p { font-family: var(--font-serif); font-size: 14px; font-style: italic; color: var(--muted); } .scan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; row-gap: var(--space-l); } .scan-itm { display: flex; flex-direction: column; gap: 9px; } /* The 32x3 hue tick: what a card gets instead of an image when there is no real one. See the note in template-parts/pool.php. */ .scan-itm .tick { display: block; width: var(--tick-w); height: var(--rule-w-accent); background: var(--hue, var(--c-news)); } .scan-kicker { font-size: 9px; color: var(--hue, var(--c-news)); } .scan-itm h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; } .scan-itm p.d { font-family: var(--font-serif); font-size: 14px; font-style: italic; color: var(--muted); line-height: 1.45; } .scan-itm .meta { font-size: 9px; } /* ------------------------------------------------------------------------- * Image slot (RQ-346 §C) — one component, three sizes, and the box is the * same whether it holds a photo or a drawn placeholder, so layout never * shifts between the two. Library crops: hero 1600x900, card 400x225, rail * thumb rendered at 96x54. All 16:9. * ---------------------------------------------------------------------- */ figure.img { display: block; margin: 0; } figure.img > img, figure.img > .ph { display: block; width: 100%; aspect-ratio: var(--ratio-hero, 16 / 9); background: var(--band); } figure.img > img { object-fit: cover; height: auto; } figure.img > .ph { overflow: hidden; color: var(--ink); } figure.img > .ph svg { display: block; width: 100%; height: 100%; } figure.img[data-slot="hero"] { max-width: 720px; } figure.img[data-slot="thumb"] { width: 96px; flex-shrink: 0; } figure.img figcaption { font-family: var(--font-serif); font-size: var(--fs-meta); font-style: italic; color: var(--muted); margin-top: 8px; } /* Footer strip */ .strip { display: flex; justify-content: space-between; gap: 14px; padding: 30px 0 50px; font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--muted); flex-wrap: wrap; } .strip a { font-family: var(--font-display); font-style: normal; color: var(--c-news); font-weight: 700; text-decoration: none; text-transform: uppercase; font-size: 10px; letter-spacing: var(--ls-caps); } /* Archive + lists */ .page-title { font-family: var(--font-display); font-size: 42px; font-weight: 800; letter-spacing: -0.03em; padding: 34px 0 6px; } .page-lede { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--muted); margin-bottom: 8px; max-width: 640px; } .page-subtitle { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); padding: 26px 0 4px; } /* ------------------------------------------------------------------------- * Data pages (RQ-346 §H, 4 Sep 2026) — FPL now, anything data-shaped later. * "Dense is fine when the visitor came for data" (design-system.md), and * David asked for slightly tighter still on FPL: ~40px table rows against the * mock's 44. The section hue gets braver here than on shared pages: band top * rules, stat ticks, the score column, and the FDR chips. * ---------------------------------------------------------------------- */ .data-page { padding-top: 0; } /* Page header: kicker + H1 left, provenance line and the third-level tab rail right. The five FPL views are a THIRD level of navigation (Leisure -> FPL -> view); stacking a second full-width strip under the masthead for them would be heavier than the pages deserve, so they sit on the header row itself. */ .data-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: 38px 0 24px; flex-wrap: wrap; } .data-header .eyebrow { color: var(--hue, var(--c-leisure)); } .data-header h1 { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.025em; line-height: 1; margin-top: 10px; } .data-header-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; } .data-header .provenance { font-size: 14px; font-style: italic; color: var(--muted); } .data-header .provenance code { font-family: var(--font-display); font-style: normal; font-size: 13px; } .fpl-tabs { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; } .fpl-tabs a { color: var(--muted); font-weight: 500; font-size: 10px; padding-bottom: 4px; } .fpl-tabs a:hover { color: var(--ink); } .fpl-tabs a.on { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--hue, var(--c-leisure)); } /* Stat tiles — hue tick, Archivo 800 tabular figure, caps label. No boxes. */ .stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 40px; padding: 8px 0 34px; } .stat-tile { display: flex; flex-direction: column; gap: 8px; } .stat-tile .tick { display: block; width: var(--tick-w); height: var(--rule-w-accent); background: var(--hue, var(--c-leisure)); } .stat-tile .figure { font-family: var(--font-display); font-weight: 800; font-size: 38px; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .stat-tile .label { font-size: 9px; color: var(--muted); } /* A tinted band, opened by a 3px hue rule — the one thing on the page that wants acting on. Content-height, never a fixed-height panel. */ .data-band { background: var(--band); border-top: var(--rule-w-accent) solid var(--hue, var(--c-leisure)); padding: 26px 32px 28px; margin-bottom: var(--space-l); } .data-band > h2 { color: var(--hue, var(--c-leisure)); font-size: 10px; margin-bottom: 14px; } .flag-list { list-style: none; } .flag-list li { font-size: 16px; line-height: 1.5; padding: 10px 0; border-bottom: var(--rule-w-hair) solid var(--rule); } .flag-list li:last-child { border-bottom: none; } .data-band .more { display: inline-block; margin-top: 14px; color: var(--hue, var(--c-leisure)); } .data-section { border-top: var(--rule-w-section) solid var(--rule-strong); padding: 24px 0 8px; margin-bottom: var(--space-l); } .data-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 16px; flex-wrap: wrap; } .data-section-head h2 { color: var(--ink); font-size: 13px; } .data-section-head p { font-size: 14px; font-style: italic; color: var(--muted); } .data-section .more { display: inline-block; margin-top: 18px; color: var(--hue, var(--c-leisure)); } .data-note { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--muted); padding: 6px 0 10px; } /* Tables: caps header row over a 2px strong rule, 1px hairline rows, tabular numerals throughout, the score column in the section hue. No verticals, no zebra, no box — hairlines only. */ .data-table-wrap { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-family: var(--font-display); font-size: 15px; font-variant-numeric: tabular-nums; } .data-table th { text-align: left; font-size: 9px; font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); padding: 10px 14px 10px 0; border-bottom: var(--rule-w-section) solid var(--rule-strong); white-space: nowrap; } .data-table td { padding: 11px 14px 11px 0; border-bottom: var(--rule-w-hair) solid var(--rule); vertical-align: baseline; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table th.ta-r, .data-table td.ta-r { text-align: right; padding-right: 0; } .data-table th:last-child, .data-table td:last-child { padding-right: 0; } .data-table .col-rank { width: 50px; font-weight: 700; color: var(--hue, var(--c-leisure)); } .data-table .col-score { color: var(--hue, var(--c-leisure)); font-weight: 800; } /* RQ-346 follow-up (4 Sep 2026): "Avg FDR" is a right-aligned data column followed immediately by a left-aligned one ("Next three" / "Fixtures") on the overview and fixture-planner tables. Both sides had zero padding at the seam — .ta-r zeroes padding-right for the numeral, and every th/td starts with padding-left:0 — so the two header labels ran together and the first FDR chip butted against the average figure. Give the score column a fixed width and its own right padding (after .ta-r in source order, so it wins the cascade tie), and give whatever follows it a left gutter. A CSS-only fix: col-score is the last column on the tables that don't have this problem (Gems, Leagues), so the sibling rule is a no-op there. */ .data-table th.col-score, .data-table td.col-score { width: 96px; padding-right: 20px; } .data-table th.col-score + th, .data-table td.col-score + td { padding-left: 20px; } .data-table td.strong { font-size: 17px; font-weight: 700; } .data-table td.serif { font-family: var(--font-serif); font-size: 14px; font-style: italic; } .data-table td.muted { color: var(--muted); } .data-table td.caps { font-size: 9px; font-weight: 500; letter-spacing: var(--ls-caps); text-transform: uppercase; } .data-table td.chips { white-space: normal; } /* David's own row in a mini-league: a 3px plum left tick, not a filled background — the hue marks the row, it doesn't sit behind the text. */ .data-table tr.is-me td { font-weight: 700; } .data-table tr.is-me td:first-child { box-shadow: inset var(--rule-w-accent) 0 0 var(--hue, var(--c-leisure)); padding-left: 12px; } /* FDR chips — the single place a solid hue block behind text is allowed, because here the colour IS the datum. Toned off the palette (pine -> olive -> amber -> clay -> rust) rather than the traffic-light greens and reds they arrived as, and drawn from tokens so dark mode comes free. */ .fpl-fdr { display: inline-block; padding: 4px 8px; margin: 2px 4px 2px 0; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--bg); white-space: nowrap; } .fpl-fdr-1 { background: var(--c-faith); } .fpl-fdr-2 { background: var(--c-dev); } .fpl-fdr-3 { background: var(--c-watford); } .fpl-fdr-4 { background: var(--c-prod); } .fpl-fdr-5 { background: var(--c-news); } .fpl-fdr-0 { background: var(--muted); } .archive-list { padding: 8px 0 40px; } .day-head { font-size: 11px; letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: 700; color: var(--muted); padding: 26px 0 8px; } .archive-row { display: flex; gap: 18px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--rule); } .archive-row .n { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-news); min-width: 38px; } .archive-row h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: 0; flex: 1; } .archive-row .s { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .pagination-wrap { padding-top: 20px; font-size: 14px; } .pagination-wrap a { color: var(--c-news); } /* Recently read */ .page-sub { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--muted); margin: -2px 0 20px; } .recent-read-list { padding-bottom: 40px; } .rr-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); } .rr-row h5 { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.25; } .rr-row .meta { margin-top: 4px; } /* Single item */ .single-item { max-width: var(--measure-reading); margin: 0 auto; padding: 38px 0 54px; } .single-item h1 { font-family: var(--font-display); font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 10px 0 10px; } .single-item .img { overflow: hidden; margin: 18px 0; background: var(--band); } .single-item .content { font-family: var(--font-serif); font-size: var(--fs-body); color: var(--ink); line-height: var(--lh-body); margin: 16px 0; } .readsource { display: inline-block; margin-top: 16px; color: var(--c-news); text-decoration: none; padding: 0; font-size: var(--fs-caps); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; } .readsource:hover { color: var(--ink); } /* ------------------------------------------------------------------------- * Responsive video embeds (oEmbed — pasted YouTube/Vimeo links etc.) * ---------------------------------------------------------------------- */ .wp-embed-responsive .wp-block-embed__wrapper, .wp-embed-aspect-16-9 .wp-block-embed__wrapper, .single-item .content .embed-wrap, .pub-body .embed-wrap, .research-row .summary .embed-wrap { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; margin: 20px 0; background: var(--band); } .wp-embed-responsive .wp-block-embed__wrapper iframe, .wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe, .single-item .content .embed-wrap iframe, .pub-body .embed-wrap iframe, .research-row .summary .embed-wrap iframe, .single-item .content iframe, .pub-body iframe, .research-row .summary iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ------------------------------------------------------------------------- * Public landing page (bio + contact — the only page visible logged-out) * ---------------------------------------------------------------------- */ body.landing { background: var(--bg); font-family: var(--font-display); color: var(--ink); } .land-wrap { max-width: 880px; margin: 0 auto; padding: 0 28px; } .land-head { text-align: center; padding: 60px 0 26px; } .land-head .mark { display: inline-flex; width: 52px; height: 52px; color: var(--ink); align-items: center; justify-content: center; margin-bottom: 16px; } .land-head .mark svg { width: 100%; height: 100%; } .land-head h1 { font-size: 42px; font-weight: 800; letter-spacing: -0.03em; } .land-strap { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--muted); margin-top: 8px; } .land-grid { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; padding: 30px 0 10px; border-top: 2px solid var(--rule-strong); } .land-bio p { font-family: var(--font-serif); font-size: 17px; color: var(--ink); margin-bottom: 16px; line-height: 1.65; } .land-bio a { color: var(--c-news); font-weight: 700; text-decoration: none; } .land-bio a:hover { text-decoration: underline; } .land-art img { width: 100%; height: auto; display: block; } .land-contact { margin: 34px 0 0; border-top: 2px solid var(--rule-strong); padding-top: 28px; } .land-contact h2 { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 18px; } .land-contact label { display: block; font-size: var(--fs-caps); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .land-contact input, .land-contact textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 2px; font: inherit; font-size: 15px; border: none; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); } .land-contact input:focus, .land-contact textarea:focus { outline: none; border-color: var(--c-news); } .land-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .land-contact button { background: none; border: 1px solid var(--rule-strong); color: var(--ink); font: inherit; font-size: var(--fs-caps); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; padding: 13px 28px; cursor: pointer; } .land-contact button:hover { border-color: var(--c-news); color: var(--c-news); } .land-sent { font-family: var(--font-serif); font-size: 16px; color: var(--ink); } .hp { position: absolute; left: -9999px; top: -9999px; } .land-foot { text-align: center; padding: 40px 0 50px; font-size: 12px; color: var(--muted); } @media (max-width: 700px) { .land-grid, .land-row { grid-template-columns: 1fr; } .land-art { order: -1; max-width: 240px; margin: 0 auto; } } /* ------------------------------------------------------------------------- * Responsive * ---------------------------------------------------------------------- */ @media (max-width: 900px) { .front { grid-template-columns: 1fr; } .scan-grid { grid-template-columns: 1fr 1fr; gap: var(--space-m); row-gap: var(--space-l); } figure.img[data-slot="hero"] { max-width: none; } .lead h2 { font-size: 34px; } .signpost-band { grid-template-columns: 1fr; } .signpost { border-right: none; border-bottom: 1px solid var(--rule); } .section-header { align-items: flex-start; } .section-header .dek { text-align: left; } } @media (max-width: 560px) { .scan-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .sitehead { padding: 16px 0 0; } .bar { padding-bottom: 12px; gap: 10px; } .logo { font-size: 24px; } .logo .mark { width: 28px; height: 28px; } .bar .r { display: none; } .topnav { gap: 16px; padding-bottom: 10px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .topnav::-webkit-scrollbar { display: none; } .topnav-mega { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .topnav-mega::-webkit-scrollbar { display: none; } .sections { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sections::-webkit-scrollbar { display: none; } .sections a { padding: 10px 14px 9px; font-size: 10px; letter-spacing: 1.2px; white-space: nowrap; flex: 0 0 auto; } .sections .push { margin-left: 0; } .sections .drop-menu { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; } .tn-flyout { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; } } /* Watford */ .watford-subnav { margin-bottom: var(--space-m); } .watford-fixtures { border-top: 2px solid var(--c-watford); padding-top: 16px; margin-bottom: var(--space-l); } .fx-row { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--rule); } .fx-row:last-child { border-bottom: none; } .fx-label { font-size: 10px; font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-watford); min-width: 54px; } .fx-detail { flex: 1; color: var(--ink); } .fx-venue { color: var(--muted); font-size: 12px; } .fx-date { color: var(--muted); font-size: 12px; } .watford-table { width: 100%; border-collapse: collapse; font-family: var(--font-display); font-size: 14px; margin-top: 4px; font-variant-numeric: tabular-nums; } .watford-table th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--rule-strong); } .watford-table th.num, .watford-table td.num { text-align: center; } .watford-table td { padding: 9px 10px; border-bottom: 1px solid var(--rule); } .watford-table tr.is-watford { background: var(--band); font-weight: 700; } .watford-table tr.is-watford td { color: var(--ink); } .watford-table td.pts { font-weight: 800; color: var(--c-watford); } .watford-fixture-list { margin-top: 8px; } .watford-fixture-list .fx-row { border-bottom: 1px solid var(--rule); } .watford-fixture-list .fx-row:last-child { border-bottom: none; } .fx-wdl { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; font-size: 10px; font-weight: 800; color: var(--bg); vertical-align: middle; } .fx-wdl-w { background: var(--c-dev); } .fx-wdl-d { background: var(--muted); } .fx-wdl-l { background: var(--c-news); } .fx-comp { margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); } .btn-results-toggle { display: block; margin-top: 14px; font: inherit; font-family: var(--font-display); font-size: var(--fs-caps); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; border: none; background: none; color: var(--muted); padding: 0; cursor: pointer; } .btn-results-toggle:hover { color: var(--c-watford); } .watford-results-more { margin-top: 6px; } /* ------------------------------------------------------------------------- * Saturday Read * ---------------------------------------------------------------------- */ .satread-banner { background: var(--band); border-top: 2px solid var(--c-news); padding: 28px 36px; margin: 28px 0 0; display: flex; align-items: center; gap: 44px; } .satread-banner .banner-text { flex-grow: 1; max-width: 720px; } .satread-banner .kicker { color: var(--c-news); font-size: 10px; } .satread-banner h2 { font-family: var(--font-serif); font-weight: 500; font-size: 32px; line-height: 1.12; margin: 9px 0 8px; color: var(--ink); } .satread-banner h2 a { text-decoration: none; } .satread-banner h2 a:hover { color: var(--c-news); } .satread-banner p.d { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--muted); line-height: 1.45; margin-bottom: 4px; } .satread-banner .more { font-size: var(--fs-caps); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; color: var(--c-news); white-space: nowrap; } .satread-banner .more:hover { color: var(--ink); } .satread-illustration { color: var(--ink); flex-shrink: 0; display: flex; } .satread-illustration svg { width: 210px; height: 120px; } .satread-list { display: flex; flex-direction: column; margin-top: var(--space-m); } .satread-row { border-top: 1px solid var(--rule); padding: 22px 0; } .satread-row:first-child { border-top: none; } .satread-row .meta { margin-bottom: 8px; } .satread-row h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 6px; } .satread-row h3 a { text-decoration: none; } .satread-row h3 a:hover { color: var(--c-news); } .satread-row p.d { font-family: var(--font-serif); font-size: 15px; color: var(--muted); font-style: italic; line-height: 1.5; } .single-satread { text-align: left; } .single-satread .satread-illustration { margin: 8px 0 20px; } .single-satread .content { font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); } .single-satread .content p { margin-bottom: 16px; } .single-satread .content blockquote { font-size: var(--fs-pullquote); font-style: italic; text-align: center; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 24px 0; margin: 28px 0; } .satread-feedback { margin-top: 32px; padding-top: 20px; border-top: 2px solid var(--rule-strong); } .satread-feedback-label { font-size: 11px; letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 10px; } .satread-feedback-buttons { display: flex; gap: 20px; flex-wrap: wrap; } .satread-feedback-buttons button { font: inherit; font-family: var(--font-display); font-size: var(--fs-caps); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; border: none; background: none; color: var(--muted); padding: 0; cursor: pointer; } .satread-feedback-buttons button:hover { color: var(--c-news); } .satread-feedback-buttons button.active { color: var(--c-news); } .satread-feedback-note { font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: var(--muted); margin-top: 10px; min-height: 1em; } /* ------------------------------------------------------------------------- * Music digest (RQ-354, 4 Sep 2026) — /digest/music * * digest_render.py (in the Music app, on the mini) emits a bare fragment: * no doctype, no