/* * Blog styles — NYT-inspired newsprint redesign. * * Scope: applies on top of _legal.css and is only activated on pages with * `.blog-index-body` or `.blog-post-body` on . The legal pages keep the * warm beige palette; the blog switches to a classical newsprint white with * strong serif typography, kickers, drop caps, and rule-based hierarchy. * * Fonts: we already load Instrument Serif + DM Sans + JetBrains Mono via * _legal.css. We additionally pull in a classical Didone-flavored serif * ("Playfair Display") for the masthead and lead headline, plus Libre * Caslon Text for long-form reading — both closer to NYT Cheltenham/Imperial * than Instrument Serif and keep the page self-contained (no local fonts * required). */ @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap"); :root { --blog-prose-max: 720px; --blog-index-max: 960px; /* Newsprint palette — override _legal.css tokens inside blog pages. */ --blog-bg: #ffffff; --blog-ink: #121212; --blog-ink-soft: #363534; --blog-ink-muted: #6b6a66; --blog-rule: #121212; --blog-rule-soft: rgba(18, 18, 18, 0.15); --blog-rule-hair: rgba(18, 18, 18, 0.22); --blog-accent: #b12222; /* NYT-style red accent */ --blog-quote-border: #121212; --blog-code-bg: #f5f3ee; --blog-code-fg: #1a1a18; --blog-table-border: rgba(18, 18, 18, 0.14); --blog-serif-display: "Playfair Display", "Times New Roman", Georgia, serif; --blog-serif-text: "Libre Caslon Text", Georgia, "Times New Roman", serif; --blog-sans: "DM Sans", system-ui, -apple-system, sans-serif; } /* ---- Body-level override (blog pages only) ------------------------------ */ body.blog-index-body, body.blog-post-body { background: var(--blog-bg); color: var(--blog-ink); font-family: var(--blog-serif-text); font-size: 18px; line-height: 1.7; } .blog-post-body .legal-page, .blog-index-body .legal-page { max-width: var(--blog-prose-max); padding: 32px 28px 96px; } .blog-index-body .legal-page.blog-index { max-width: var(--blog-index-max); } /* ---- Masthead / nav ----------------------------------------------------- */ /* * NYT-style top banner: a thick rule, the publication wordmark in a bold * classical serif, a small date/edition line underneath, and a hairline * divider below. The `.legal-nav` element already exists on both index * and post pages, so we re-skin it here. */ .blog-post-body .legal-nav, .blog-index-body .legal-nav { position: relative; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 22px 0 12px; margin: 0 0 6px; border-top: 3px solid var(--blog-rule); border-bottom: 1px solid var(--blog-rule); text-transform: none; letter-spacing: 0; font-family: var(--blog-sans); font-size: 12px; } .blog-post-body .legal-nav .legal-brand, .blog-index-body .legal-nav .legal-brand { font-family: var(--blog-serif-display); font-weight: 900; font-size: clamp(40px, 7vw, 64px); letter-spacing: -0.01em; line-height: 1; color: var(--blog-ink); text-transform: none; padding: 2px 0 4px; } /* Left/right small links — position absolutely on wider screens so the * brand can sit centred like a proper masthead. */ .blog-post-body .legal-nav a:not(.legal-brand), .blog-index-body .legal-nav a:not(.legal-brand) { color: var(--blog-ink-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; text-decoration: none; } .blog-post-body .legal-nav a:not(.legal-brand):hover, .blog-index-body .legal-nav a:not(.legal-brand):hover { color: var(--blog-accent); text-decoration: underline; text-underline-offset: 3px; } @media (min-width: 720px) { .blog-post-body .legal-nav, .blog-index-body .legal-nav { padding: 26px 0 14px; } .blog-post-body .legal-nav a:not(.legal-brand), .blog-index-body .legal-nav a:not(.legal-brand) { position: absolute; top: 50%; transform: translateY(-50%); } .blog-post-body .legal-nav a:not(.legal-brand):first-of-type, .blog-index-body .legal-nav a:not(.legal-brand):first-of-type { left: 8px; } .blog-post-body .legal-nav a:not(.legal-brand):last-of-type, .blog-index-body .legal-nav a:not(.legal-brand):last-of-type { right: 8px; } } /* Edition strapline sits directly under the masthead. Rendered as a second * hairline bar by the `:after` of the nav container. */ .blog-post-body .legal-nav::after, .blog-index-body .legal-nav::after { content: ""; display: block; width: 100%; border-top: 1px solid var(--blog-rule); margin-top: 8px; } /* ---- Edition line (date / volume) --------------------------------------- */ .blog-edition { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 28px; font-family: var(--blog-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blog-ink-muted); } .blog-edition strong { color: var(--blog-ink); font-weight: 600; } /* ---- Language switch ---------------------------------------------------- */ .blog-post-body .legal-lang-switch, .blog-index-body .legal-lang-switch { margin: 0 0 32px; justify-content: center; font-family: var(--blog-sans); font-size: 12px; color: var(--blog-ink-muted); text-transform: uppercase; letter-spacing: 0.1em; } .blog-post-body .legal-lang-switch a, .blog-index-body .legal-lang-switch a { color: var(--blog-accent); } .blog-post-body .legal-lang-switch .is-current, .blog-index-body .legal-lang-switch .is-current { color: var(--blog-ink); font-weight: 700; } /* ---- Post header -------------------------------------------------------- */ .blog-post-header { margin: 8px 0 36px; text-align: center; } .blog-kicker { display: inline-block; margin: 0 0 14px; padding: 0; font-family: var(--blog-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blog-accent); } .blog-post-header h1 { font-family: var(--blog-serif-display); font-weight: 900; font-size: clamp(34px, 5.2vw, 52px); line-height: 1.08; letter-spacing: -0.015em; color: var(--blog-ink); margin: 0 0 18px; } .blog-post-lede { font-family: var(--blog-serif-text); font-style: italic; font-weight: 400; font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--blog-ink-soft); margin: 0 auto 24px; max-width: 640px; } .blog-post-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; font-family: var(--blog-sans); font-size: 11px; letter-spacing: 0.14em; color: var(--blog-ink-muted); text-transform: uppercase; margin: 16px 0 0; } .blog-post-meta .blog-byline { color: var(--blog-ink); font-weight: 700; } .blog-meta-dot { color: var(--blog-ink-muted); opacity: 0.6; } /* Rule below the header, before the body — classic NYT separator. */ .blog-post-header::after { content: ""; display: block; width: 56px; height: 2px; background: var(--blog-ink); margin: 28px auto 0; } .blog-cover { margin: 0 0 12px; } .blog-cover img { width: 100%; height: auto; border-radius: 0; display: block; border: none; } .blog-cover figcaption, .blog-figure figcaption { margin-top: 8px; font-family: var(--blog-sans); font-size: 12px; letter-spacing: 0.04em; color: var(--blog-ink-muted); text-align: left; text-transform: none; } /* ---- Prose -------------------------------------------------------------- */ .blog-prose { color: var(--blog-ink); font-family: var(--blog-serif-text); font-size: 19px; line-height: 1.72; max-width: 640px; margin: 0 auto; } .blog-prose > :first-child { margin-top: 0; } .blog-prose p { margin: 0 0 22px; color: var(--blog-ink); } /* Drop cap on the opening paragraph — hallmark NYT long-form treatment. */ .blog-prose > p:first-of-type::first-letter { font-family: var(--blog-serif-display); font-weight: 900; font-size: 4.4em; line-height: 0.85; float: left; padding: 6px 10px 0 0; color: var(--blog-ink); } .blog-prose h2 { font-family: var(--blog-serif-display); font-weight: 700; font-size: clamp(24px, 2.8vw, 30px); letter-spacing: -0.005em; margin: 56px 0 14px; color: var(--blog-ink); line-height: 1.2; } .blog-prose h3 { font-family: var(--blog-serif-text); font-weight: 700; font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--blog-ink); margin: 40px 0 10px; } .blog-prose h4 { font-family: var(--blog-sans); font-size: 12px; font-weight: 700; margin: 28px 0 8px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blog-ink-muted); } .blog-prose a { color: var(--blog-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--blog-rule-hair); transition: text-decoration-color 0.15s ease, color 0.15s ease; } .blog-prose a:hover { color: var(--blog-accent); text-decoration-color: var(--blog-accent); } .blog-prose strong { color: var(--blog-ink); font-weight: 700; } .blog-prose em { color: var(--blog-ink); font-style: italic; } .blog-prose ul, .blog-prose ol { padding-left: 22px; margin: 0 0 24px; color: var(--blog-ink); } .blog-prose li { margin-bottom: 10px; } .blog-prose li > p { margin-bottom: 10px; } .blog-prose hr { border: none; width: 56px; border-top: 2px solid var(--blog-ink); margin: 48px auto; } /* ---- Blockquotes / pull quotes ------------------------------------------ */ .blog-prose blockquote { border: none; border-top: 2px solid var(--blog-ink); border-bottom: 2px solid var(--blog-ink); background: transparent; padding: 24px 0; margin: 36px 0; border-radius: 0; color: var(--blog-ink); font-family: var(--blog-serif-display); font-style: italic; font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.3; text-align: center; } .blog-prose blockquote > p:last-child { margin-bottom: 0; } /* ---- Tables ------------------------------------------------------------- */ .blog-table-wrap { margin: 32px 0; overflow-x: auto; border: none; border-top: 2px solid var(--blog-ink); border-bottom: 2px solid var(--blog-ink); border-radius: 0; background: transparent; } .blog-table-wrap table { width: 100%; border-collapse: collapse; font-family: var(--blog-sans); font-size: 14px; } .blog-table-wrap th, .blog-table-wrap td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--blog-table-border); vertical-align: top; } .blog-table-wrap th { background: transparent; font-weight: 700; color: var(--blog-ink); letter-spacing: 0.08em; font-size: 11px; text-transform: uppercase; border-bottom: 1px solid var(--blog-ink); } .blog-table-wrap tr:last-child td { border-bottom: none; } /* ---- Code blocks -------------------------------------------------------- */ .blog-prose :not(pre) > code { background: var(--blog-code-bg); color: var(--blog-code-fg); padding: 2px 6px; border-radius: 2px; font-family: "JetBrains Mono", monospace; font-size: 0.86em; } .blog-prose pre { background: var(--blog-code-bg); color: var(--blog-code-fg); padding: 22px 24px; border-left: 3px solid var(--blog-ink); border-radius: 0; overflow-x: auto; margin: 32px 0; font-size: 13px; line-height: 1.6; } .blog-prose pre code { background: none; color: inherit; padding: 0; font-family: "JetBrains Mono", monospace; font-size: inherit; } /* highlight.js — muted newsprint palette */ .hljs-comment, .hljs-quote { color: #8a8a82; font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-link { color: #b12222; } .hljs-string, .hljs-attr { color: #7a5a1e; } .hljs-number, .hljs-built_in, .hljs-builtin-name, .hljs-type { color: #2a5d4e; } .hljs-title, .hljs-name { color: #3a3a38; font-weight: 700; } .hljs-variable, .hljs-template-variable, .hljs-regexp, .hljs-meta { color: #5a5550; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; } /* ---- Figures / images --------------------------------------------------- */ .blog-prose img { max-width: 100%; height: auto; display: block; border-radius: 0; border: none; margin: 28px auto 8px; } .blog-figure { margin: 32px 0; } /* ---- Tags --------------------------------------------------------------- */ .blog-tags { list-style: none; padding: 0; margin: 40px auto 0; max-width: 640px; display: flex; flex-wrap: wrap; gap: 16px; padding-top: 20px; border-top: 1px solid var(--blog-rule-soft); } .blog-tags li { background: transparent; border: none; color: var(--blog-ink-muted); padding: 0; border-radius: 0; font-family: var(--blog-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin: 0; font-weight: 600; } .blog-tags li::before { content: "#"; color: var(--blog-accent); margin-right: 2px; } /* ---- Index page --------------------------------------------------------- */ .blog-index-header { text-align: center; margin: 8px 0 12px; padding: 0 0 24px; border-bottom: 2px solid var(--blog-ink); } .blog-index-header h1 { font-family: var(--blog-serif-display); font-weight: 900; font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -0.005em; margin: 0 0 8px; color: var(--blog-ink); } .blog-index-body .legal-subtitle { color: var(--blog-ink-muted); font-family: var(--blog-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; } /* Featured (lead) story — first card gets a larger, centred treatment. */ .blog-index-list { list-style: none; padding: 0; margin: 0 0 72px; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--blog-rule-soft); } .blog-index-item { border-bottom: 1px solid var(--blog-rule-soft); margin: 0; } .blog-index-item.is-lead { border-bottom: 2px solid var(--blog-ink); } .blog-index-link { display: block; padding: 28px 4px; color: inherit; text-decoration: none; transition: background 0.15s ease; } .blog-index-link:hover { background: rgba(18, 18, 18, 0.025); } .blog-index-link:hover .blog-index-title { color: var(--blog-accent); } .blog-index-meta { display: flex; gap: 10px; align-items: center; justify-content: flex-start; font-family: var(--blog-sans); font-size: 11px; letter-spacing: 0.14em; color: var(--blog-ink-muted); text-transform: uppercase; margin-bottom: 10px; font-weight: 600; } .blog-index-kicker { color: var(--blog-accent); font-weight: 700; } .blog-index-title { font-family: var(--blog-serif-display); font-weight: 700; font-size: 28px; line-height: 1.15; margin: 0 0 10px; color: var(--blog-ink); letter-spacing: -0.005em; transition: color 0.15s ease; } .blog-index-item.is-lead .blog-index-link { text-align: center; padding: 40px 4px; } .blog-index-item.is-lead .blog-index-meta { justify-content: center; } .blog-index-item.is-lead .blog-index-title { font-size: clamp(32px, 4.4vw, 46px); font-weight: 900; margin-bottom: 14px; max-width: 720px; margin-left: auto; margin-right: auto; } .blog-index-item.is-lead .blog-index-description { font-family: var(--blog-serif-text); font-style: italic; font-size: clamp(17px, 1.9vw, 20px); color: var(--blog-ink-soft); max-width: 620px; margin: 0 auto 12px; } .blog-index-description { font-family: var(--blog-serif-text); font-size: 17px; color: var(--blog-ink-soft); margin: 0 0 12px; line-height: 1.55; } .blog-index-item .blog-tags { margin: 14px 0 0; padding-top: 0; border-top: none; max-width: none; } .blog-index-item.is-lead .blog-tags { justify-content: center; } .blog-empty { border: 1px dashed var(--blog-rule-soft); padding: 40px; border-radius: 0; text-align: center; color: var(--blog-ink-muted); font-family: var(--blog-sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; margin: 48px 0; } /* ---- Footer ------------------------------------------------------------- */ .blog-post-body .legal-footer, .blog-index-body .legal-footer { margin-top: 72px; padding-top: 20px; border-top: 3px double var(--blog-ink); font-family: var(--blog-sans); font-size: 11px; color: var(--blog-ink-muted); letter-spacing: 0.12em; text-transform: uppercase; } .blog-post-body .legal-footer a, .blog-index-body .legal-footer a { color: var(--blog-ink-muted); text-decoration: none; } .blog-post-body .legal-footer a:hover, .blog-index-body .legal-footer a:hover { color: var(--blog-accent); text-decoration: underline; } /* ---- Responsive --------------------------------------------------------- */ @media (max-width: 640px) { body.blog-index-body, body.blog-post-body { font-size: 17px; } .blog-prose { font-size: 17px; } .blog-prose h2 { font-size: 24px; margin: 44px 0 12px; } .blog-prose h3 { font-size: 18px; margin: 32px 0 8px; } .blog-post-lede { font-size: 17px; } .blog-index-title { font-size: 24px; } .blog-index-item.is-lead .blog-index-title { font-size: 30px; } .blog-table-wrap { font-size: 13px; } .blog-prose > p:first-of-type::first-letter { font-size: 3.6em; padding-right: 8px; } .blog-post-body .legal-nav, .blog-index-body .legal-nav { padding: 18px 0 10px; } .blog-post-body .legal-nav a:not(.legal-brand), .blog-index-body .legal-nav a:not(.legal-brand) { font-size: 10px; } }