/* Article typography + shared theme tokens — used by the prerendered * standalone article pages AND the SPA (index.css maps its Tailwind theme to * the --sp-* tokens defined here; both render the same .sp-article markup). * * 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 pullquote 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. */ @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: 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: 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: 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: normal; font-weight: 700; font-display: swap; src: url("/fonts/figtree/figtree-v9-latin-700.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; } /* ── 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)); max-width: 720px; margin: 0 auto; font-family: var(--sp-serif); font-size: 1rem; line-height: 1.625; color: var(--sp-fg); } .sp-article ::selection { background-color: color-mix(in srgb, var(--article-accent) 30%, transparent); } /* Kicker: editor's label-caps in the article accent. */ .sp-article .kicker { font-family: var(--sp-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--article-accent); margin: 0 0 0.75rem; } /* Title: serif 36px bold (editor: mt-0 mb-3 text-4xl leading-tight font-bold). */ .sp-article h1 { font-size: 2.25rem; 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: 1.25rem; 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: 13px; 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; } .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: 1.125rem; 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). */ .sp-article p { margin: 0 0 0.875rem; white-space: pre-wrap; } /* Body heading: SANS 22px bold (editor h2: mt-7 mb-2 font-sans text-[22px] font-bold). */ .sp-article h2 { font-family: var(--sp-sans); font-size: 22px; font-weight: 700; line-height: 1.3; margin: 1.75rem 0 0.5rem; white-space: pre-wrap; } /* Container sub-heading: caps 15px bold (editor child heading h3: * label-caps mt-0 mb-2 text-[15px] font-bold tracking-wide). */ .sp-article h3 { font-family: var(--sp-sans); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.5rem; } /* Pullquote: sans 22px in the article accent with the ornament above * (editor: relative mx-0 my-4 pt-12 text-[22px] leading-snug accent). */ .sp-article blockquote { position: relative; font-family: var(--sp-sans); font-size: 22px; line-height: 1.375; color: var(--article-accent); margin: 1rem 0; padding: 3rem 0 0; } .sp-article blockquote .quote-ornament { position: absolute; top: 0; left: 0; height: 42px; width: auto; color: var(--article-accent); pointer-events: none; } .sp-article blockquote p { margin: 0 0 0.5rem; } /* Factbox: sans on a faint panel (editor aside: my-5 rounded-md border * bg-white/3 px-5 py-4 text-base leading-relaxed). */ .sp-article aside.factbox { font-family: var(--sp-sans); font-size: 1rem; line-height: 1.625; border: 1px solid var(--sp-border); border-radius: 6px; background: color-mix(in srgb, #ffffff 3%, transparent); padding: 1rem 1.25rem; margin: 1.25rem 0; } .sp-article aside.factbox p { margin: 0 0 0.5rem; } .sp-article aside.factbox p:last-child { margin-bottom: 0; } /* Images (editor figure: mx-0 my-4; img h-auto max-h-[70vh] w-full rounded-xs * object-contain; figcaption my-3 font-sans text-xs centered). */ .sp-article figure { margin: 1rem 0; } .sp-article figure img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: 2px; } /* SPA-managed loading state: the reserved box (width/height attrs) shows as a * muted placeholder; the image fades in when complete (ArticleView.tsx). * Applies to every article image incl. byline portraits. */ .sp-article figure:has(> img.img-loading) { background: var(--sp-muted-bg); border-radius: 2px; } .sp-article img { transition: opacity 0.25s ease; } .sp-article img.img-loading { opacity: 0; } .sp-article figcaption { font-family: var(--sp-sans); font-size: 12px; line-height: 1.5; color: var(--sp-fg); text-align: center; margin: 0.75rem 0; } /* Image galleries: a run of 2+ consecutive image blocks (articleHtml.ts). * Deliberately NOT cropped to a uniform tile height (no aspect-ratio + * object-fit:cover) — editorial photos keep their natural aspect ratio, at * the cost of a ragged row bottom when tiles differ in height. Flip to a * cropped/uniform grid here if that ragged look turns out to read as messy * in practice. Column count follows image count; `data-count` is stamped by * the publisher so pure CSS can key off it without JS. */ .sp-article .sp-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: start; gap: 0.75rem 1rem; margin: 1.25rem 0; } .sp-article .sp-gallery[data-count="2"] { grid-template-columns: repeat(2, 1fr); } .sp-article .sp-gallery[data-count="3"] { grid-template-columns: repeat(3, 1fr); } .sp-article .sp-gallery[data-count="4"] { grid-template-columns: repeat(2, 1fr); } .sp-article .sp-gallery > figure { margin: 0; } .sp-article .sp-gallery figcaption { margin: 0.5rem 0 0; } @media (max-width: 480px) { .sp-article .sp-gallery { grid-template-columns: 1fr; } } /* Lists (editor: pl-7 items, absolute muted marker, mb-1 per item). */ .sp-article ol, .sp-article ul { margin: 0 0 0.875rem; padding-left: 1.75rem; } .sp-article li { margin-bottom: 0.25rem; white-space: pre-wrap; } .sp-article li::marker { color: var(--sp-muted); font-variant-numeric: tabular-nums; } /* Footnote markers render sans (editor: [data-footnote-start] → font-sans). */ .sp-article sup.footnote { font-family: var(--sp-sans); color: var(--article-accent); } .sp-article mark { background: color-mix(in srgb, var(--article-accent) 25%, transparent); color: inherit; border-radius: 2px; }