/* Article typography, the shared theme tokens, and the BLOCK VOCABULARY every
* published surface renders — a rule scoped `:is(.sp-article, .sp-site-prose)`
* is one of the latter. There is one published markup per kind, so its rules
* live once; /site.css loads after this sheet and states what a page wants
* differently. Every document that renders blocks links this sheet: the
* standalone article page, the baked site page (page-shell.html) and the SPA.
*
* The visuals are a 1:1 copy of the EDITOR's reader view
* (apps/editor/src/ArticleReader.tsx + ArticleBlock.tsx + index.css):
* Lora serif body, Figtree sans for headings/byline/captions/quotes/factboxes,
* 720px measure (wider than the editor's 592 — a deliberate reader choice),
* per-article accent (hsl hue cycle, theme-tuned lightness),
* the quote ornament, the bordered byline strip.
*
* Theme: `.light`/`.dark` on wins (the SPA's toggle); with neither
* class the OS preference applies. Standalone pages have no JS → OS pref.
* Each block below also declares `color-scheme` (form controls / scrollbars,
* plus the Android system nav bar via the browser's own UI negotiation); the
* SPA additionally mirrors the resolved value as a ``
* tag (theme.ts::syncThemeMeta) since that's the same early, explicit channel
* `theme-color` already uses for the status bar. */
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/lora/lora-v37-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/lora/lora-v37-latin-italic.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/lora/lora-v37-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/lora/lora-v37-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/lora/lora-v37-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/figtree/figtree-v9-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/figtree/figtree-v9-latin-300italic.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/figtree/figtree-v9-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/figtree/figtree-v9-latin-italic.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/figtree/figtree-v9-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/figtree/figtree-v9-latin-500italic.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/figtree/figtree-v9-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 600; font-display: swap; src: url("/fonts/figtree/figtree-v9-latin-600italic.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/figtree/figtree-v9-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/figtree/figtree-v9-latin-700italic.woff2") format("woff2"); }
/* ── Theme tokens (editor palette, index.css) ─────────────────────────── */
:root,
:root.light {
--sp-bg: #f5f5f4;
--sp-fg: #1c1c1c;
--sp-surface: #ffffff;
--sp-muted-bg: #e8e8e6;
--sp-muted: #6b6b6b;
--sp-border: #d4d4d0;
--sp-primary: #1a6ec9;
--sp-accent-l: 38%;
--sp-serif: "Lora", Georgia, "Times New Roman", serif;
--sp-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
color-scheme: light;
}
:root.dark {
--sp-bg: #1a1a1a;
--sp-fg: #e8e8e8;
--sp-surface: #232323;
--sp-muted-bg: #2a2a2a;
--sp-muted: #888888;
--sp-border: #333333;
--sp-primary: #4a9eff;
--sp-accent-l: 55%;
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not(.light):not(.dark) {
--sp-bg: #1a1a1a;
--sp-fg: #e8e8e8;
--sp-surface: #232323;
--sp-muted-bg: #2a2a2a;
--sp-muted: #888888;
--sp-border: #333333;
--sp-primary: #4a9eff;
--sp-accent-l: 55%;
color-scheme: dark;
}
}
/* Standalone article pages only (the SPA styles its own shell). */
body.sp-standalone {
margin: 0;
background: var(--sp-bg);
color: var(--sp-fg);
}
body.sp-standalone .sp-article {
padding: 2rem 1.25rem 6rem;
}
/* ── The block vocabulary's own tokens ────────────────────────────────────
* One markup bakes into an article page and into a site page, so the two roots
* both answer what its rules read. `.sp-article` retunes the accent per article
* and comes after this rule at equal specificity, so it keeps its own. */
:is(.sp-article, .sp-site-prose) {
--article-accent: var(--sp-primary);
--sp-gallery-gap: 6px;
}
/* ── Article scope ────────────────────────────────────────────────────── */
.sp-article {
/* Per-article accent: hue set inline (--accent-h) by the publish script,
* lightness by theme — mirrors the editor's articleColor(). */
--article-accent: hsl(var(--accent-h, 210) 70% var(--sp-accent-l));
/* THE image gutter — the gallery's in-row flex gap AND the gap between
* adjacent image blocks, one value so the two can never drift apart. MUST
* equal the editor's `--stpub-gallery-gap`. */
--sp-gallery-gap: 6px;
max-width: 720px;
margin: 0 auto;
font-family: var(--sp-serif);
/* Text-size control (views/ArticleView.tsx sets --article-font-scale on this
* element from prefs.ts's persisted pref; every scaled rule below reads it
* off inheritance). The standalone prerendered pages never set the var, so
* every use falls back to 1 — identical to today's fixed sizes. */
font-size: calc(1rem * var(--article-font-scale, 1));
line-height: 1.625;
color: var(--sp-fg);
/* Inherited by every descendant (title, subtitle, body, captions): break an
* over-long token — a URL, a long Norwegian compound — only when it would
* otherwise overflow the 720px measure. Normal wrapping is untouched.
* min-width:0 lets the article flex-shrink inside the split-view column so
* this measure is the real width, not the content's intrinsic max. */
overflow-wrap: break-word;
min-width: 0;
}
.sp-article ::selection {
background-color: color-mix(in srgb, var(--article-accent) 30%, transparent);
}
/* Deep-link arrival flash: a page-region click in the spread view scrolls the
* reader to the target block (ArticleView.tsx) and adds .block-flash — a brief
* accent wash so it's obvious where the jump landed. Ends transparent. */
@keyframes sp-block-flash {
from {
background-color: color-mix(in srgb, var(--article-accent) 32%, transparent);
}
to {
background-color: transparent;
}
}
.sp-article .block-flash {
animation: sp-block-flash 1.3s ease-out;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
.sp-article .block-flash {
animation: none;
}
}
/* Kicker: editor's label-caps in the article accent. */
.sp-article .kicker {
font-family: var(--sp-sans);
font-size: calc(11px * var(--article-font-scale, 1));
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--article-accent);
margin: 0 0 0.75rem;
}
/* Supertitle: a small sans all-caps label ABOVE the title (kicker-like). */
.sp-article .supertitle {
font-family: var(--sp-sans);
font-size: calc(0.875rem * var(--article-font-scale, 1));
line-height: 1.3;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: color-mix(in srgb, var(--sp-fg) 70%, transparent);
margin: 0 0 0.5rem;
}
/* Title: serif 36px bold (editor: mt-0 mb-3 text-4xl leading-tight font-bold). */
.sp-article h1 {
font-size: calc(2.25rem * var(--article-font-scale, 1));
line-height: 1.25;
font-weight: 700;
margin: 0 0 0.75rem;
}
/* Subtitle: serif 20px, fg/80 (editor: mb-4 text-xl font-normal text-foreground/80). */
.sp-article .subtitle {
font-size: calc(1.25rem * var(--article-font-scale, 1));
line-height: 1.4;
font-weight: 400;
color: color-mix(in srgb, var(--sp-fg) 80%, transparent);
margin: 0 0 1rem;
}
/* Byline strip: bordered, sans 13px muted (editor: mb-5 flex flex-col gap-3
* border-y py-3 font-sans text-[13px] text-muted-foreground). */
.sp-article .byline {
display: flex;
flex-direction: column;
gap: 0.75rem;
border-top: 1px solid var(--sp-border);
border-bottom: 1px solid var(--sp-border);
padding: 0.75rem 0;
margin-bottom: 1.25rem;
font-family: var(--sp-sans);
font-size: calc(13px * var(--article-font-scale, 1));
line-height: 1.45;
color: var(--sp-muted);
}
.sp-article .byline .author {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.sp-article .byline .portrait {
width: 3.5rem;
height: 3.5rem;
flex-shrink: 0;
border-radius: 2px;
object-fit: cover;
}
.sp-article .byline .author-text {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.sp-article .byline .author-name {
font-weight: 700;
color: var(--sp-fg);
}
.sp-article .byline .author-affiliation {
margin-top: 0.125rem;
font-style: italic;
white-space: pre-wrap;
}
/* The PORTRAIT's caption (e.g. a photo credit) — under the affiliation lines, one
* step quieter than them (editor: text-[11px] text-muted-foreground). */
.sp-article .byline .author-caption {
margin-top: 0.125rem;
font-size: 0.85em;
opacity: 0.8;
white-space: pre-wrap;
}
.sp-article .narration {
width: 100%;
margin-bottom: 1.25rem;
}
/* Blurb: sans 18px light, fg/90 (editor: mb-6 font-sans text-lg leading-normal
* font-light whitespace-pre-wrap text-foreground/90). Sits AFTER the header. */
.sp-article .blurb {
font-family: var(--sp-sans);
font-size: calc(1.125rem * var(--article-font-scale, 1));
line-height: 1.5;
font-weight: 300;
color: color-mix(in srgb, var(--sp-fg) 90%, transparent);
margin: 0 0 1.5rem;
white-space: pre-wrap;
}
/* Body paragraphs (editor: mt-0 mb-3.5 whitespace-pre-wrap, serif base). */
:is(.sp-article, .sp-site-prose) p {
margin: 0 0 0.875rem;
white-space: pre-wrap;
}
/* EMPHASIS BOX (v33 — promoted from a paragraph role to a container kind, so it
* is an `