/* ============================================================ TSDQ — The Synergist Daily / Quarterly ============================================================ Design-system bootstrap. Custom properties live in :root; the rest of the rules are deliberately minimal — just typographic defaults, body reset, and a placeholder for the reading-time badge. Page-creators add per-page styles in their own page files (or extend this file) as the eight static pages land. ── Accent decision: DEEP BLUE ────────────────────────────── Chose deep blue (#1e3a8a / #1e40af) over muted teal because TSDQ satirizes the editorial-establishment tech publication (NYT tech, Stratechery, The Atlantic). Deep blue is the establishment-publication color; muted teal reads as "indie / Substack". Deep blue lands the joke harder, pairs better with a warm-paper background (#fafaf7) for the print-magazine feel, and gives the reading-time badge gradient (deep blue → slate) crisp contrast. ── Typography stack ──────────────────────────────────────── Body serif: Source Serif Pro is the first-class choice (it was designed for body text at small sizes and reads editorial). Charter is the workhorse fallback (shipped with macOS / iOS, available on most Linux distros via Webcore). Georgia is the universal final fallback. No webfont is loaded yet — the spec calls for "real serif body" and these stacks all read serif on every modern OS without a network round trip. A future iteration may add a Source Serif Pro webfont under www/assets/fonts/. ── Measure (column width) ────────────────────────────────── --measure is the narrow body column for posts and most page content (38rem ≈ 608px ≈ 65 characters at the body font size — Robert Bringhurst's classic comfortable-reading measure). --measure-wide is the masthead / footer / archive listing width. ============================================================ */ :root { /* ── Color ──────────────────────────────────────────────── */ --color-bg: #fafaf7; /* warm off-white, paper feel */ --color-text: #1a1a1a; /* near-black, not pure black */ --color-muted: #6b6b6b; /* secondary text, bylines, dates */ --color-rule: #e5e5e0; /* hairline rules and dividers */ --color-card-bg: #ffffff; /* cards lift slightly above bg */ --color-accent: #1e3a8a; /* deep blue — primary accent */ --color-accent-hover: #1e40af; /* slightly brighter blue on hover */ --color-accent-soft: #eef2ff; /* very pale blue tint for chips */ --color-badge-from: #1e3a8a; /* reading-time badge gradient L→R */ --color-badge-to: #475569; /* slate, for the gradient endpoint */ /* ── Typography ─────────────────────────────────────────── */ --font-serif: "Source Serif Pro", "Source Serif 4", Charter, "Charter BT", Georgia, "Times New Roman", serif; --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace; --fs-body: 1.0625rem; /* 17px — comfortable post body */ --fs-small: 0.875rem; /* 14px — bylines, footnotes */ --fs-h1: 2.5rem; /* 40px — post headlines */ --fs-h2: 1.75rem; /* 28px — section headings */ --fs-h3: 1.25rem; /* 20px — subheads, debate turns */ --fs-display: 3rem; /* 48px — masthead / hero */ --lh-body: 1.6; --lh-tight: 1.2; /* ── Layout ─────────────────────────────────────────────── */ --measure: 38rem; /* narrow column for body copy */ --measure-wide: 64rem; /* masthead / footer / listings */ /* ── Spacing scale (8-step) ─────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* ── Radius ─────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-pill: 999px; } /* ── Base reset & typography ──────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "kern", "liga", "onum"; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); line-height: var(--lh-tight); margin: var(--space-6) 0 var(--space-3); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 var(--space-4); } a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--color-accent-hover); } hr { border: 0; border-top: 1px solid var(--color-rule); margin: var(--space-6) 0; } small, .tsdq-small { font-size: var(--fs-small); color: var(--color-muted); } /* ── Layout containers ────────────────────────────────────── */ .tsdq-main { max-width: var(--measure-wide); margin: 0 auto; padding: var(--space-6) var(--space-5); } .tsdq-post, .tsdq-debate, .tsdq-prose { max-width: var(--measure); margin: 0 auto; } /* ── Reading-time badge ───────────────────────────────────── */ /* Used by _partials/reading-time-badge.html. Subtle gradient pill aligned next to byline / date. */ .tsdq-reading-time-badge { display: inline-block; padding: var(--space-1) var(--space-3); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 500; color: #ffffff; background: linear-gradient( 90deg, var(--color-badge-from), var(--color-badge-to) ); border-radius: var(--radius-pill); letter-spacing: 0.01em; } /* ── Tag pills ────────────────────────────────────────────── */ /* Used by post-card and post detail pages. */ .tsdq-tag { display: inline-block; padding: var(--space-1) var(--space-3); font-family: var(--font-sans); font-size: var(--fs-small); background: var(--color-accent-soft); color: var(--color-accent); border-radius: var(--radius-pill); text-decoration: none; } .tsdq-tag:hover { color: var(--color-accent-hover); } /* Page-specific styles get added by the eight static-page creators (homepage, author-profile, tag-archive, archive, about, subscribe, privacy, terms) and by the render-post routine creator (post.html, debate.html). */ /* ============================================================ Page-level styles added by the P1 static-page batch. Shared infrastructure consumed by: • homepage (hero + latest grid + Editor's Picks sidebar) • about, privacy, terms (this batch) • archive, tag-archive, author-profile, subscribe (P2 batch) ============================================================ */ /* ── Accessible-but-visually-hidden utility ─────────────────── */ .tsdq-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ Header / masthead bar ============================================================ */ .tsdq-masthead-bar { border-bottom: 1px solid var(--color-rule); background: var(--color-bg); } .tsdq-masthead-bar-inner { max-width: var(--measure-wide); margin: 0 auto; padding: var(--space-5) var(--space-5); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } .tsdq-wordmark { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); text-decoration: none; line-height: 1.1; } .tsdq-wordmark:hover { color: var(--color-accent); } .tsdq-nav { display: flex; gap: var(--space-5); font-family: var(--font-sans); font-size: var(--fs-small); } .tsdq-nav a { color: var(--color-muted); text-decoration: none; letter-spacing: 0.02em; } .tsdq-nav a:hover { color: var(--color-accent); } @media (max-width: 600px) { .tsdq-masthead-bar-inner { gap: var(--space-3); } .tsdq-nav { gap: var(--space-4); } .tsdq-wordmark { font-size: 1.25rem; } } /* ============================================================ Footer ============================================================ */ .tsdq-footer { margin-top: var(--space-8); border-top: 1px solid var(--color-rule); background: var(--color-bg); } .tsdq-footer-inner { max-width: var(--measure-wide); margin: 0 auto; padding: var(--space-7) var(--space-5) var(--space-6); display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .tsdq-footer-inner { grid-template-columns: 2fr 1fr; grid-template-areas: "masthead q3" "links links" "satire satire" "colo colo"; } .tsdq-fake-masthead { grid-area: masthead; } .tsdq-q3-card { grid-area: q3; } .tsdq-footer-links { grid-area: links; } .tsdq-satire-qualifier { grid-area: satire; } .tsdq-footer-colophon { grid-area: colo; } } .tsdq-footer-heading { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 var(--space-3); } .tsdq-fake-masthead .tsdq-masthead-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); font-family: var(--font-serif); font-size: var(--fs-small); } .tsdq-masthead-role { display: block; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); } .tsdq-masthead-name { display: block; color: var(--color-text); } /* Q3-coming-soon card. Continuity bit: q3-coming-soon. */ .tsdq-q3-card { background: var(--color-card-bg); border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-5); } .tsdq-q3-eyebrow { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-2); } .tsdq-q3-title { font-family: var(--font-serif); font-size: 1.125rem; margin: 0 0 var(--space-2); line-height: 1.25; } .tsdq-q3-body { font-size: var(--fs-small); color: var(--color-muted); margin: 0; } .tsdq-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-5); font-family: var(--font-sans); font-size: var(--fs-small); padding-top: var(--space-5); border-top: 1px solid var(--color-rule); } .tsdq-footer-links a { color: var(--color-muted); text-decoration: none; } .tsdq-footer-links a:hover { color: var(--color-accent); } .tsdq-satire-qualifier { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--color-muted); margin: 0; } .tsdq-satire-qualifier a { color: var(--color-muted); text-decoration: underline; text-decoration-style: dotted; } .tsdq-satire-qualifier a:hover { color: var(--color-accent); } .tsdq-footer-colophon { font-family: var(--font-sans); font-size: 0.75rem; color: var(--color-muted); margin: 0; } /* ============================================================ Newsletter signup card (used inline by homepage + later pages) ============================================================ */ .tsdq-newsletter-signup { background: var(--color-card-bg); border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-6) var(--space-5); max-width: var(--measure); margin: var(--space-7) auto; } .tsdq-newsletter-eyebrow { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-2); } .tsdq-newsletter-title { font-family: var(--font-serif); font-size: var(--fs-h3); margin: 0 0 var(--space-3); line-height: 1.2; } .tsdq-newsletter-blurb { margin: 0 0 var(--space-5); color: var(--color-muted); } .tsdq-newsletter-form { display: grid; gap: var(--space-3); } .tsdq-newsletter-field { display: grid; gap: var(--space-1); } .tsdq-newsletter-field label { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--color-muted); letter-spacing: 0.02em; } .tsdq-newsletter-optional { color: var(--color-muted); font-style: italic; } .tsdq-newsletter-form input { font-family: var(--font-serif); font-size: var(--fs-body); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); } .tsdq-newsletter-form input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); } .tsdq-newsletter-submit { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em; padding: var(--space-3) var(--space-5); background: var(--color-accent); color: #ffffff; border: 0; border-radius: var(--radius-sm); cursor: pointer; justify-self: start; } .tsdq-newsletter-submit:hover { background: var(--color-accent-hover); } .tsdq-newsletter-fineprint { font-family: var(--font-sans); font-size: 0.75rem; color: var(--color-muted); margin: var(--space-2) 0 0; } /* ============================================================ Post card (homepage hero, grid, sidebar, P2 listing pages) ============================================================ */ .tsdq-post-card { background: var(--color-card-bg); border: 1px solid var(--color-rule); border-radius: var(--radius-md); overflow: hidden; transition: border-color 0.15s ease, transform 0.15s ease; } .tsdq-post-card:hover { border-color: var(--color-accent); } .tsdq-post-card-link { display: block; text-decoration: none; color: var(--color-text); } .tsdq-post-card-link:hover .tsdq-post-card-title { color: var(--color-accent); } .tsdq-post-card-thumb-wrap { aspect-ratio: 16 / 9; background: var(--color-rule); overflow: hidden; } .tsdq-post-card-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .tsdq-post-card-body { padding: var(--space-5); } .tsdq-post-card-title { font-family: var(--font-serif); font-size: 1.375rem; font-weight: 600; line-height: 1.25; margin: 0 0 var(--space-3); color: var(--color-text); transition: color 0.15s ease; } .tsdq-post-card-byline { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--color-muted); margin: 0 0 var(--space-3); } .tsdq-post-card-author { color: var(--color-text); } .tsdq-post-card-sep { color: var(--color-rule); } .tsdq-post-card-excerpt { font-family: var(--font-serif); color: var(--color-text); margin: 0 0 var(--space-4); } .tsdq-post-card-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ============================================================ Homepage layout ============================================================ */ .tsdq-homepage { display: grid; gap: var(--space-7); } /* Hero region — flagship post, full width of the main column. */ .tsdq-hero { display: grid; gap: var(--space-5); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-rule); } .tsdq-hero-eyebrow { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin: 0; } .tsdq-hero-title { font-family: var(--font-serif); font-size: var(--fs-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0; } .tsdq-hero-title a { color: var(--color-text); text-decoration: none; } .tsdq-hero-title a:hover { color: var(--color-accent); } .tsdq-hero-dek { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.4; color: var(--color-text); margin: 0; max-width: var(--measure); } .tsdq-hero-byline { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--color-muted); margin: 0; } .tsdq-hero-byline .tsdq-hero-author { color: var(--color-text); } .tsdq-hero-byline .tsdq-hero-sep { color: var(--color-rule); padding: 0 var(--space-2); } .tsdq-hero-image-wrap { aspect-ratio: 16 / 9; background: var(--color-rule); overflow: hidden; border-radius: var(--radius-md); } .tsdq-hero-image { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 768px) { .tsdq-hero-title { font-size: 3.5rem; } } /* Two-column body: latest grid + Editor's Picks rail. */ .tsdq-homepage-body { display: grid; gap: var(--space-7); } @media (min-width: 1024px) { .tsdq-homepage-body { grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--space-6); } } .tsdq-section-heading { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 var(--space-5); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-rule); } .tsdq-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; } @media (min-width: 768px) { .tsdq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Editor's Picks: desktop-only sidebar. Continuity bit: editors-picks-stale — never updates. The sidebar is hidden on mobile/tablet because (1) the column doesn't fit and (2) the joke lands harder when the picks live in the "important sidebar" position rather than as a tail-end mobile section. */ .tsdq-editors-picks { display: none; } @media (min-width: 1024px) { .tsdq-editors-picks { display: block; position: sticky; top: var(--space-5); align-self: start; } } .tsdq-editors-picks .tsdq-post-card { margin-bottom: var(--space-4); } .tsdq-editors-picks .tsdq-post-card-thumb-wrap { display: none; } .tsdq-editors-picks .tsdq-post-card-body { padding: var(--space-4); } .tsdq-editors-picks .tsdq-post-card-title { font-size: 1.125rem; } .tsdq-editors-picks .tsdq-post-card-excerpt { display: none; } /* ============================================================ Static-prose pages (about, privacy, terms) ============================================================ */ .tsdq-page-header { max-width: var(--measure); margin: 0 auto var(--space-7); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-rule); } .tsdq-page-eyebrow { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-2); } .tsdq-page-title { font-family: var(--font-serif); font-size: var(--fs-h1); font-weight: 600; line-height: 1.15; margin: 0; } .tsdq-page-deck { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.5; color: var(--color-muted); margin: var(--space-4) 0 0; } .tsdq-prose { max-width: var(--measure); margin: 0 auto; } .tsdq-prose h2 { font-family: var(--font-serif); font-size: var(--fs-h2); margin: var(--space-7) 0 var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-rule); } .tsdq-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .tsdq-prose h3 { font-family: var(--font-serif); font-size: var(--fs-h3); margin: var(--space-5) 0 var(--space-3); } .tsdq-prose ul, .tsdq-prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); } .tsdq-prose li { margin-bottom: var(--space-2); } .tsdq-prose dl { margin: 0 0 var(--space-5); } .tsdq-prose dt { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.02em; color: var(--color-text); margin-top: var(--space-3); } .tsdq-prose dd { margin: var(--space-1) 0 0; color: var(--color-muted); } /* About-page disclosure block — findable but not foregrounded. Slightly larger type than the surrounding prose; bordered top and bottom; serif. The content is sober, not in voice. */ .tsdq-disclosure { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.55; color: var(--color-text); padding: var(--space-5) 0; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); margin: var(--space-6) 0; } .tsdq-disclosure p { margin: 0; } .tsdq-disclosure p + p { margin-top: var(--space-3); } /* About-page inline masthead — visually distinct from the footer masthead because here it's the page's "About the team" section rather than chrome. Same content, different framing. */ .tsdq-about-masthead { display: grid; gap: var(--space-3); font-family: var(--font-serif); } .tsdq-about-masthead-row { display: grid; grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-rule); } @media (min-width: 600px) { .tsdq-about-masthead-row { grid-template-columns: 14rem 1fr; gap: var(--space-4); align-items: baseline; } } .tsdq-about-masthead-role { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .tsdq-about-masthead-name { font-family: var(--font-serif); color: var(--color-text); } .tsdq-policy-meta { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--color-muted); margin: var(--space-7) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-rule); } /* ============================================================ Loading / empty / error states ============================================================ Used by the homepage hero skeleton and by the archive/homepage list rendering for the "no posts yet" and "load failed" edges. Deliberately understated — these states are momentary, and a loud spinner / error banner would clash with the editorial tone. ============================================================ */ .tsdq-archive-empty, .tsdq-archive-error { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--color-muted); padding: var(--space-5) 0; margin: 0; } .tsdq-archive-error { color: var(--color-accent); } /* Hero shimmer — placeholder lines that match the rough geometry of the rendered hero (eyebrow + h1 + dek). Replaced as soon as the list-posts response arrives. */ .tsdq-hero-skeleton { display: grid; gap: var(--space-4); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-rule); } .tsdq-skeleton-line { display: block; height: 1em; background: linear-gradient( 90deg, var(--color-rule) 0%, var(--color-card-bg) 50%, var(--color-rule) 100% ); background-size: 200% 100%; border-radius: var(--radius-sm); animation: tsdq-skeleton-shimmer 1.4s ease-in-out infinite; } .tsdq-skeleton-line-title { height: 2.5em; max-width: 80%; } .tsdq-skeleton-line-dek { height: 1.25em; max-width: 60%; } @keyframes tsdq-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .tsdq-skeleton-line { animation: none; } } /* ============================================================ ╔══════════════════════════════════════════════════════════╗ ║ THEME V2 — "Establishment of Record" ║ ║ Scoped behind body.tsdq-theme-v2 so it can be tested ║ ║ page-by-page (currently: homepage + global header) before║ ║ rolling out to the entire site. ║ ╚══════════════════════════════════════════════════════════╝ Design intent: The Synergist Daily Quarterly is the *publication of record* for the AI era — at least, that's the bit. The visual language borrows from The Atlantic, MIT Technology Review, and the prestige-broadsheet end of editorial: high-contrast Garamond display type, a parchment background, a navy-and-bronze bicolor accent system, hairline rules, and bronze fleurons between sections. Nothing about the surface should suggest "blog" — it should suggest "authoritative quarterly" with the dry self-importance the satire requires. Palette — pulled directly from the wordmark: --ink-navy #0e1b3d masthead serifs / primary brand --ink-navy-deep #08122a for solid blocks (mast, hero ribbon) --bronze #a08147 accent rules, fleurons, eyebrows --bronze-bright #b9974f hover state for bronze --parchment #f6f1e7 warm background tint for cards/ribbons --bone #fbf9f4 page background (warmer than v1) --ink #14181f body text — slightly warm black --newsprint #5b5e66 secondary / byline text --hairline #d8d3c4 warm rule color, replaces cool gray Typography: The wordmark in the logo is high-contrast Garamond. We pair Cormorant Garamond (display) with Source Serif 4 (body) and Inter (UI). Cormorant is loaded from Google Fonts in the layout head; Source Serif 4 / Charter / Georgia is the stack-down. All three were already in the v1 stack. ============================================================ */ body.tsdq-theme-v2 { /* ── Color tokens (override v1) ─────────────────────────── */ --color-bg: #fbf9f4; /* bone — warmer than v1 */ --color-bg-deep: #f6f1e7; /* parchment for ribbons */ --color-text: #14181f; --color-muted: #5b5e66; --color-rule: #d8d3c4; --color-rule-strong: #b9b3a0; --color-card-bg: #ffffff; --ink-navy: #0e1b3d; --ink-navy-deep: #08122a; --ink-navy-soft: #1c2a52; --bronze: #a08147; --bronze-bright: #b9974f; --bronze-soft: #ede4cf; --color-accent: var(--ink-navy); --color-accent-hover: var(--bronze); --color-accent-soft: var(--bronze-soft); --color-badge-from: var(--ink-navy); --color-badge-to: #2a3a6c; /* ── Typography stack (override v1) ─────────────────────── */ --font-display: "Cormorant Garamond", "Source Serif 4", "Source Serif Pro", Charter, Georgia, "Times New Roman", serif; --font-serif: "Source Serif 4", "Source Serif Pro", Charter, "Charter BT", Georgia, "Times New Roman", serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* tightened fluid display scale */ --fs-display: clamp(2.75rem, 1.8rem + 4.5vw, 5.25rem); --fs-h1: clamp(2rem, 1.5rem + 2vw, 3rem); --fs-h2: 1.875rem; /* warmer body bg with a faint paper noise via CSS gradient */ background-color: var(--color-bg); background-image: radial-gradient(at 18% 12%, rgba(160,129,71,0.025) 0, transparent 38%), radial-gradient(at 82% 78%, rgba(14,27,61,0.02) 0, transparent 42%); background-attachment: fixed; color: var(--color-text); font-feature-settings: "kern", "liga", "onum", "ss01"; } /* Selection in v2 — bronze, not browser default. */ body.tsdq-theme-v2 ::selection { background: var(--bronze); color: #fff; } /* ============================================================ v2 — Header / masthead bar ============================================================ */ body.tsdq-theme-v2 .tsdq-masthead-bar { background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg) 100%); border-bottom: 0; position: relative; } body.tsdq-theme-v2 .tsdq-masthead-bar::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, transparent 0, var(--bronze) 18%, var(--bronze) 82%, transparent 100%); opacity: 0.85; } body.tsdq-theme-v2 .tsdq-masthead-bar::before { content: ""; position: absolute; inset: auto 0 3px 0; height: 1px; background: var(--ink-navy); opacity: 0.92; } body.tsdq-theme-v2 .tsdq-masthead-bar-inner { max-width: var(--measure-wide); margin: 0 auto; padding: var(--space-5) var(--space-5) var(--space-4); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5); } /* Hide the old text wordmark in v2 — replaced by the lockup */ body.tsdq-theme-v2 .tsdq-masthead-bar > .tsdq-masthead-bar-inner > .tsdq-wordmark { display: none; } /* The new lockup occupies the centre column. */ .tsdq-masthead-lockup { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--ink-navy); text-align: center; line-height: 1; } .tsdq-masthead-lockup__mark { height: 84px; width: auto; display: block; } .tsdq-masthead-lockup__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem); letter-spacing: 0.005em; line-height: 1.05; color: var(--ink-navy); margin: 0; } .tsdq-masthead-lockup__title em { font-style: italic; font-weight: 400; color: var(--ink-navy); } .tsdq-masthead-lockup__sub { font-family: var(--font-display); font-weight: 400; font-style: italic; letter-spacing: 0.32em; text-transform: uppercase; font-size: 0.75rem; color: var(--bronze); margin: 0; } /* The two flanking issue-info blocks — left = volume / number, right = nav. Hidden on small screens. */ .tsdq-masthead-flank { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--newsprint, var(--color-muted)); line-height: 1.6; } .tsdq-masthead-flank--left { justify-self: start; text-align: left; } .tsdq-masthead-flank--right { justify-self: end; text-align: right; } /* Tagline flank — used in place of the volume/edition chrome on the right side of the masthead. Wider, set in italic Cormorant with a bronze diamond and asterisk; the footnote line drops below in tiny italic letterspacing. Sized so it tracks the masthead's vertical rhythm and stays inside the column at common desktop widths. */ .tsdq-masthead-flank--tagline { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; letter-spacing: 0.01em; text-transform: none; color: var(--ink-navy); line-height: 1.3; max-width: 22rem; } .tsdq-masthead-tagline__main { display: block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.0625rem; letter-spacing: 0.01em; color: var(--ink-navy); } .tsdq-masthead-tagline__diamond { display: inline-block; margin: 0 0.45em; color: var(--bronze); font-style: normal; font-size: 0.7em; vertical-align: 0.18em; } .tsdq-masthead-tagline__star { color: var(--bronze); font-style: normal; font-weight: 700; margin-left: 0.05em; } .tsdq-masthead-tagline__sub { display: block; margin-top: 0.25em; font-family: var(--font-display); font-style: italic; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--newsprint, var(--color-muted)); } .tsdq-masthead-flank__row { display: block; } .tsdq-masthead-flank__label { color: var(--bronze); font-weight: 600; } /* v2 nav — bottom bar, centered, bronze on hover */ body.tsdq-theme-v2 .tsdq-masthead-bar .tsdq-nav { display: none; /* hide v1 nav, show v2 sub-nav instead */ } .tsdq-subnav { border-top: 1px solid var(--color-rule); background: var(--color-bg); } .tsdq-subnav__inner { max-width: var(--measure-wide); margin: 0 auto; padding: var(--space-3) var(--space-5); display: flex; align-items: center; justify-content: center; gap: clamp(var(--space-4), 4vw, var(--space-7)); flex-wrap: wrap; font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; } .tsdq-subnav__inner a { color: var(--ink-navy); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .tsdq-subnav__inner a:hover { color: var(--bronze); border-bottom-color: var(--bronze); } .tsdq-subnav__inner a[aria-current="page"] { color: var(--bronze); border-bottom-color: var(--bronze); } @media (max-width: 720px) { body.tsdq-theme-v2 .tsdq-masthead-bar-inner { grid-template-columns: 1fr; } .tsdq-masthead-flank { display: none; } .tsdq-masthead-lockup__mark { height: 64px; } } /* ============================================================ v2 — Page-shell helpers (containers and rule fleurons) ============================================================ */ /* Centered bronze fleuron used between sections. Use as Or with the extended style,
. */ .tsdq-fleuron { text-align: center; color: var(--bronze); font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.6em; margin: var(--space-7) 0; user-select: none; } .tsdq-fleuron::before { content: "❦"; } /* A horizontal rule with a bronze diamond in the middle. */ .tsdq-rule { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin: var(--space-7) auto; max-width: var(--measure-wide); color: var(--bronze); } .tsdq-rule::before, .tsdq-rule::after { content: ""; height: 1px; flex: 1; background: var(--color-rule); } .tsdq-rule__mark { font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.4em; color: var(--bronze); } /* ============================================================ v2 — Homepage ============================================================ */ body.tsdq-theme-v2 .tsdq-main { padding-top: var(--space-7); } body.tsdq-theme-v2 .tsdq-homepage { gap: var(--space-8); } /* ── Issue ribbon: above the hero, faux-broadsheet date + dek. */ .tsdq-issue-ribbon { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-3) 0; border-top: 1px solid var(--ink-navy); border-bottom: 1px solid var(--ink-navy); font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-navy); } .tsdq-issue-ribbon__left, .tsdq-issue-ribbon__right { display: flex; gap: var(--space-5); align-items: center; } .tsdq-issue-ribbon__sep { color: var(--bronze); font-weight: 700; } .tsdq-issue-ribbon__price { color: var(--bronze); font-weight: 600; } @media (max-width: 600px) { .tsdq-issue-ribbon { flex-wrap: wrap; gap: var(--space-2); } .tsdq-issue-ribbon__left, .tsdq-issue-ribbon__right { gap: var(--space-3); flex-wrap: wrap; } } /* ── Tagline strap (the cropped-out tagline, restored as site copy) */ .tsdq-tagline-strap { text-align: center; font-family: var(--font-display); font-style: italic; color: var(--ink-navy); margin: var(--space-6) auto var(--space-3); max-width: 44rem; } .tsdq-tagline-strap__main { font-size: clamp(1.125rem, 0.85rem + 0.9vw, 1.5rem); letter-spacing: 0.06em; text-transform: uppercase; font-style: normal; font-weight: 500; color: var(--ink-navy); } .tsdq-tagline-strap__star { color: var(--bronze); font-style: normal; margin: 0 0.15em; } .tsdq-tagline-strap__sub { display: block; margin-top: var(--space-2); font-size: 0.875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--newsprint, var(--color-muted)); font-style: italic; font-weight: 400; } .tsdq-tagline-strap__rule { display: block; width: 4rem; height: 1px; background: var(--bronze); margin: var(--space-4) auto; border: 0; } /* ── Hero (override v1 hero rules within v2) ─────────────── */ body.tsdq-theme-v2 .tsdq-hero { padding: var(--space-7) 0 var(--space-8); border-bottom: 0; text-align: center; align-items: center; } body.tsdq-theme-v2 .tsdq-hero-eyebrow { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bronze); font-weight: 600; margin: 0; position: relative; display: inline-block; } body.tsdq-theme-v2 .tsdq-hero-eyebrow::before, body.tsdq-theme-v2 .tsdq-hero-eyebrow::after { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--bronze); vertical-align: middle; margin: 0 var(--space-3); } body.tsdq-theme-v2 .tsdq-hero-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.012em; margin: var(--space-4) auto 0; max-width: 24ch; color: var(--ink-navy); } body.tsdq-theme-v2 .tsdq-hero-title a { color: inherit; background-image: linear-gradient(transparent 92%, var(--bronze) 92%, var(--bronze) 96%, transparent 96%); background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 0.4s ease, color 0.2s ease; } body.tsdq-theme-v2 .tsdq-hero-title a:hover { color: var(--ink-navy); background-size: 100% 100%; } body.tsdq-theme-v2 .tsdq-hero-dek { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem); line-height: 1.45; color: var(--newsprint, var(--color-muted)); margin: var(--space-5) auto 0; max-width: 52ch; } body.tsdq-theme-v2 .tsdq-hero-byline { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--newsprint, var(--color-muted)); margin: var(--space-5) 0 0; } body.tsdq-theme-v2 .tsdq-hero-byline .tsdq-hero-author { color: var(--ink-navy); font-weight: 600; } body.tsdq-theme-v2 .tsdq-hero-byline .tsdq-hero-sep { color: var(--bronze); padding: 0 var(--space-2); } /* ============================================================ v2 — Feature hero (lead story with surfaced image) ============================================================ Wraps a cinematic 21:9 banner image, a photo-essay caption set in italic Cormorant, then the eyebrow + title + dek + byline stack beneath. Everything is wrapped in a single anchor so the image works as the primary tap target on mobile. The whole thing is centered and bound to the wide measure so the image frames the full content column rather than sitting in the reading-width gutter. When a post has no `hero` frontmatter, the JS hides .tsdq-hero__ figure and the layout falls back gracefully to text-only — the centered Cormorant title + italic dek treatment is unchanged. ============================================================ */ body.tsdq-theme-v2 .tsdq-hero--feature { /* Override the inherited grid gap from the centered text hero so the figure can sit flush against the eyebrow, with the caption handling its own bottom margin. */ display: block; text-align: center; padding: var(--space-5) 0 var(--space-7); max-width: var(--measure-wide); margin: 0 auto; } /* The hero is one big link — strip the underline so the title gets a custom hover effect instead, and keep all child colors. */ body.tsdq-theme-v2 .tsdq-hero__link { display: block; color: inherit; text-decoration: none; } body.tsdq-theme-v2 .tsdq-hero__link:hover .tsdq-hero-title { color: var(--bronze); } body.tsdq-theme-v2 .tsdq-hero__link:hover .tsdq-hero__image { transform: scale(1.015); } /* Figure: image + caption block. Sits above the text content. */ body.tsdq-theme-v2 .tsdq-hero__figure { margin: 0 0 var(--space-6); position: relative; } /* Cinematic 21:9 banner. The aspect-ratio is wider than the post-card thumbs (16:10) so the lead story reads as a hierarchy step up. The bottom-fade overlay is the same gradient pattern the cards use on hover — it ties the lead story into the rest of the design system and keeps the navy-anchor feel even when the image is bright. */ body.tsdq-theme-v2 .tsdq-hero__image-wrap { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--ink-navy-deep); border: 1px solid var(--bronze); /* Hairline outer rule on the bronze border for that double-rule editorial feel, mirroring the masthead's bronze/navy stack. */ box-shadow: 0 0 0 1px var(--color-bg) inset, 0 0 0 4px var(--ink-navy) inset; padding: 0; } body.tsdq-theme-v2 .tsdq-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } body.tsdq-theme-v2 .tsdq-hero__image-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(8,18,42,0.32) 100%), /* Faint navy vignette in the corners for cinematic depth. */ radial-gradient(ellipse at center, transparent 60%, rgba(8,18,42,0.18) 100%); } /* Photo-essay caption. Lives directly under the image, italic Cormorant in newsprint gray with a tiny bronze leading dingbat. */ body.tsdq-theme-v2 .tsdq-hero__caption { font-family: var(--font-display); font-style: italic; font-size: 0.875rem; line-height: 1.5; color: var(--newsprint, var(--color-muted)); margin: var(--space-3) auto 0; max-width: 56ch; padding: 0 var(--space-4); text-align: center; } body.tsdq-theme-v2 .tsdq-hero__caption::before { content: "❖"; display: inline-block; margin-right: 0.5em; color: var(--bronze); font-style: normal; font-size: 0.75em; vertical-align: 0.15em; } /* Eyebrow gets a kicker tag (e.g. "— The Lead Story ❖ Debate —"). The kicker pulls the post's first tag and sits inline with the existing eyebrow flank rules. */ body.tsdq-theme-v2 .tsdq-hero--feature .tsdq-hero-eyebrow { margin-top: var(--space-3); } body.tsdq-theme-v2 .tsdq-hero-eyebrow__kicker { display: inline-block; margin-left: 0.6em; padding-left: 0.6em; border-left: 1px solid var(--bronze); color: var(--ink-navy); font-weight: 700; } body.tsdq-theme-v2 .tsdq-hero-eyebrow__kicker[hidden] { display: none; } /* Tighten the title — with an image above it, the title doesn't need quite as much breathing room and the dek can come up closer. */ body.tsdq-theme-v2 .tsdq-hero--feature .tsdq-hero-title { margin-top: var(--space-3); } body.tsdq-theme-v2 .tsdq-hero--feature .tsdq-hero-dek { margin-top: var(--space-4); } body.tsdq-theme-v2 .tsdq-hero--feature .tsdq-hero-byline { margin-top: var(--space-4); } /* Hero skeleton — match the v2 hero geometry */ body.tsdq-theme-v2 .tsdq-hero-skeleton { text-align: center; align-items: center; padding: var(--space-7) 0 var(--space-8); border-bottom: 0; } body.tsdq-theme-v2 .tsdq-hero--feature.tsdq-hero-skeleton { display: block; padding: var(--space-5) 0 var(--space-7); } body.tsdq-theme-v2 .tsdq-hero__image-wrap--skeleton { border: 1px solid var(--color-rule); box-shadow: none; background: var(--color-bg-deep); } body.tsdq-theme-v2 .tsdq-skeleton-line--image { position: absolute; inset: 0; height: auto; border-radius: 0; } body.tsdq-theme-v2 .tsdq-hero-dek { text-align: center; } body.tsdq-theme-v2 .tsdq-skeleton-line-title { margin: 0 auto; height: 3.2em; max-width: 60%; } body.tsdq-theme-v2 .tsdq-skeleton-line-dek { margin: 0 auto; max-width: 40%; } /* ── "Latest" section header — bronze diamond rule. */ body.tsdq-theme-v2 .tsdq-section-heading { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-navy); margin: 0 0 var(--space-6); padding-bottom: 0; border-bottom: 0; position: relative; display: flex; align-items: center; gap: var(--space-3); } body.tsdq-theme-v2 .tsdq-section-heading::before { content: ""; width: 12px; height: 12px; background: var(--bronze); transform: rotate(45deg); flex-shrink: 0; } body.tsdq-theme-v2 .tsdq-section-heading::after { content: ""; flex: 1; height: 1px; background: var(--ink-navy); opacity: 0.85; } /* ── Two-column layout */ body.tsdq-theme-v2 .tsdq-homepage-body { gap: var(--space-7); } @media (min-width: 1024px) { body.tsdq-theme-v2 .tsdq-homepage-body { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-8); } } /* ── Latest grid: alternate larger lead card on desktop */ body.tsdq-theme-v2 .tsdq-grid { gap: var(--space-6) var(--space-5); } /* ── Post-card overrides */ body.tsdq-theme-v2 .tsdq-post-card { background: transparent; border: 0; border-top: 1px solid var(--ink-navy); border-radius: 0; position: relative; transition: none; padding-top: var(--space-4); } body.tsdq-theme-v2 .tsdq-post-card::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 3px; background: var(--bronze); transition: width 0.25s ease; } body.tsdq-theme-v2 .tsdq-post-card:hover::before { width: 60%; } body.tsdq-theme-v2 .tsdq-post-card:hover { border-color: var(--ink-navy); } body.tsdq-theme-v2 .tsdq-post-card-link { display: grid; gap: var(--space-3); } body.tsdq-theme-v2 .tsdq-post-card-thumb-wrap { aspect-ratio: 16 / 10; background: var(--color-bg-deep); border-radius: 0; position: relative; overflow: hidden; } body.tsdq-theme-v2 .tsdq-post-card-thumb-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(14,27,61,0.18) 100%); pointer-events: none; } body.tsdq-theme-v2 .tsdq-post-card-body { padding: 0; } body.tsdq-theme-v2 .tsdq-post-card-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.005em; margin: 0 0 var(--space-3); color: var(--ink-navy); } body.tsdq-theme-v2 .tsdq-post-card-link:hover .tsdq-post-card-title { color: var(--bronze); } body.tsdq-theme-v2 .tsdq-post-card-byline { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--newsprint, var(--color-muted)); margin: 0 0 var(--space-3); } body.tsdq-theme-v2 .tsdq-post-card-byline .tsdq-post-card-author { color: var(--ink-navy); font-weight: 600; } body.tsdq-theme-v2 .tsdq-post-card-byline .tsdq-post-card-sep { color: var(--bronze); } body.tsdq-theme-v2 .tsdq-post-card-excerpt { font-family: var(--font-serif); font-size: 1rem; line-height: 1.55; color: var(--ink); margin: 0 0 var(--space-3); } /* ── Tag pills — restyle as small caps boxes, not pills */ body.tsdq-theme-v2 .tsdq-tag { display: inline-block; padding: 2px var(--space-2); font-family: var(--font-sans); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); background: transparent; border: 1px solid var(--bronze); border-radius: 0; } body.tsdq-theme-v2 .tsdq-tag:hover { color: var(--bronze-bright); border-color: var(--bronze-bright); } /* ── Editor's Picks rail — broadsheet styling. In v2 the rail uses a tighter card form: no thumb, no excerpt, no tags, smaller title. Wrapped in a parchment panel so it reads as a sidebar feature rather than a continuation of the main grid. */ body.tsdq-theme-v2 .tsdq-editors-picks { position: sticky; top: var(--space-5); align-self: start; background: var(--color-bg-deep); padding: var(--space-5) var(--space-5) var(--space-4); border-top: 3px solid var(--ink-navy); border-bottom: 1px solid var(--bronze); position: relative; } body.tsdq-theme-v2 .tsdq-editors-picks::before { content: ""; position: absolute; top: -3px; left: 0; width: 60px; height: 3px; background: var(--bronze); } body.tsdq-theme-v2 .tsdq-editors-picks .tsdq-section-heading { font-size: 0.7rem; margin-bottom: var(--space-4); } body.tsdq-theme-v2 .tsdq-editors-picks .tsdq-post-card { background: transparent; border-top: 1px solid var(--color-rule); border-bottom: 0; padding-top: var(--space-3); margin-bottom: var(--space-3); } body.tsdq-theme-v2 .tsdq-editors-picks .tsdq-post-card:first-child { border-top: 0; padding-top: 0; } body.tsdq-theme-v2 .tsdq-editors-picks .tsdq-post-card::before { display: none; } body.tsdq-theme-v2 .tsdq-editors-picks .tsdq-post-card-thumb-wrap { display: none; } body.tsdq-theme-v2 .tsdq-editors-picks .tsdq-post-card-link { gap: var(--space-2); } body.tsdq-theme-v2 .tsdq-editors-picks .tsdq-post-card-title { font-size: 1.0625rem; line-height: 1.2; margin: 0 0 var(--space-2); } body.tsdq-theme-v2 .tsdq-editors-picks .tsdq-post-card-byline { margin: 0; font-size: 0.65rem; letter-spacing: 0.16em; } body.tsdq-theme-v2 .tsdq-editors-picks .tsdq-post-card-excerpt { display: none; } body.tsdq-theme-v2 .tsdq-editors-picks .tsdq-post-card-tags { display: none; } /* ── Newsletter signup — re-skin as parchment broadsheet block */ body.tsdq-theme-v2 .tsdq-newsletter-signup { background: var(--ink-navy); color: #fbf9f4; border: 0; border-radius: 0; padding: var(--space-7) var(--space-6); max-width: var(--measure-wide); position: relative; margin: var(--space-8) auto; overflow: hidden; } body.tsdq-theme-v2 .tsdq-newsletter-signup::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(160,129,71,0.45); pointer-events: none; } body.tsdq-theme-v2 .tsdq-newsletter-signup::after { content: "❦"; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); color: var(--bronze); font-family: var(--font-display); font-size: 1.1rem; background: var(--ink-navy); padding: 0 var(--space-3); } body.tsdq-theme-v2 .tsdq-newsletter-eyebrow { text-align: center; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.32em; color: var(--bronze); margin: 0 0 var(--space-3); } body.tsdq-theme-v2 .tsdq-newsletter-title { text-align: center; font-family: var(--font-display); font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 600; letter-spacing: -0.005em; line-height: 1.05; color: #fbf9f4; margin: 0 0 var(--space-3); } body.tsdq-theme-v2 .tsdq-newsletter-title em { font-style: italic; color: var(--bronze); } body.tsdq-theme-v2 .tsdq-newsletter-blurb { text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.125rem; color: rgba(251,249,244,0.78); margin: 0 auto var(--space-6); max-width: 44ch; } body.tsdq-theme-v2 .tsdq-newsletter-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-3); max-width: 38rem; margin: 0 auto; } @media (max-width: 720px) { body.tsdq-theme-v2 .tsdq-newsletter-form { grid-template-columns: 1fr; } } body.tsdq-theme-v2 .tsdq-newsletter-field { gap: 4px; } body.tsdq-theme-v2 .tsdq-newsletter-field label { color: rgba(251,249,244,0.6); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; } body.tsdq-theme-v2 .tsdq-newsletter-form input { background: rgba(251,249,244,0.05); border: 1px solid rgba(160,129,71,0.4); color: #fbf9f4; font-family: var(--font-serif); font-size: 1rem; padding: var(--space-3) var(--space-4); border-radius: 0; } body.tsdq-theme-v2 .tsdq-newsletter-form input::placeholder { color: rgba(251,249,244,0.35); } body.tsdq-theme-v2 .tsdq-newsletter-form input:focus { border-color: var(--bronze); outline: 0; background: rgba(251,249,244,0.08); } body.tsdq-theme-v2 .tsdq-newsletter-submit { align-self: end; background: var(--bronze); color: var(--ink-navy); border: 0; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; padding: var(--space-4) var(--space-5); border-radius: 0; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } body.tsdq-theme-v2 .tsdq-newsletter-submit:hover { background: var(--bronze-bright); color: var(--ink-navy-deep); } body.tsdq-theme-v2 .tsdq-newsletter-fineprint { grid-column: 1 / -1; text-align: center; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.04em; color: rgba(251,249,244,0.45); margin: var(--space-3) 0 0; } body.tsdq-theme-v2 .tsdq-newsletter-fineprint a { color: var(--bronze); text-decoration: underline; text-decoration-color: rgba(160,129,71,0.5); } /* ── Featured-coverage strip (homepage exclusive) — bronze-on-parchment row of dingbats. */ .tsdq-coverage-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding: var(--space-5) var(--space-5); margin: var(--space-7) 0; background: var(--color-bg-deep); border-top: 1px solid var(--bronze); border-bottom: 1px solid var(--bronze); position: relative; } .tsdq-coverage-strip::before, .tsdq-coverage-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink-navy); } .tsdq-coverage-strip::before { top: -3px; } .tsdq-coverage-strip::after { bottom: -3px; } .tsdq-coverage-strip__item { text-align: center; font-family: var(--font-display); } .tsdq-coverage-strip__num { display: block; font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); font-weight: 600; color: var(--ink-navy); line-height: 1; } .tsdq-coverage-strip__label { display: block; font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--newsprint, var(--color-muted)); margin-top: var(--space-2); } @media (max-width: 720px) { .tsdq-coverage-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } } /* ── Drop-cap on hero dek — only takes effect when the dek is left-aligned (so a long magazine intro). On the centered hero we don't want a float because it would clash with the centred title. Activated when .tsdq-hero-dek has both .tsdq-dropcap and the parent block has .tsdq-hero--feature (a future variant). For now, the homepage centered hero uses .tsdq-dropcap as a no-op marker so we don't have to thread state from JS. */ .tsdq-hero--feature .tsdq-hero-dek.tsdq-dropcap::first-letter { font-family: var(--font-display); font-weight: 600; font-style: normal; float: left; font-size: 3.5em; line-height: 0.85; padding: 0.05em 0.1em 0 0; color: var(--bronze); } /* ── Loading/empty/error tweaks for v2 */ body.tsdq-theme-v2 .tsdq-archive-empty, body.tsdq-theme-v2 .tsdq-archive-error { text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--newsprint, var(--color-muted)); padding: var(--space-7) 0; } body.tsdq-theme-v2 .tsdq-archive-error { color: var(--bronze); } /* ── Footer minor v2 polish — bronze rule, navy headings */ body.tsdq-theme-v2 .tsdq-footer { background: var(--ink-navy); color: rgba(251,249,244,0.78); border-top: 0; margin-top: var(--space-8); position: relative; } body.tsdq-theme-v2 .tsdq-footer::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, transparent 0, var(--bronze) 18%, var(--bronze) 82%, transparent 100%); } body.tsdq-theme-v2 .tsdq-footer-heading { color: var(--bronze); letter-spacing: 0.24em; } body.tsdq-theme-v2 .tsdq-masthead-name { color: #fbf9f4; font-family: var(--font-display); font-size: 1.05rem; } body.tsdq-theme-v2 .tsdq-masthead-role { color: rgba(251,249,244,0.5); } body.tsdq-theme-v2 .tsdq-q3-card { background: rgba(251,249,244,0.04); border: 1px solid rgba(160,129,71,0.4); border-radius: 0; } body.tsdq-theme-v2 .tsdq-q3-eyebrow { color: var(--bronze); } body.tsdq-theme-v2 .tsdq-q3-title { color: #fbf9f4; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; } body.tsdq-theme-v2 .tsdq-q3-body { color: rgba(251,249,244,0.55); } body.tsdq-theme-v2 .tsdq-footer-links { border-top: 1px solid rgba(160,129,71,0.3); } body.tsdq-theme-v2 .tsdq-footer-links a { color: rgba(251,249,244,0.65); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.7rem; font-weight: 600; } body.tsdq-theme-v2 .tsdq-footer-links a:hover { color: var(--bronze); } body.tsdq-theme-v2 .tsdq-satire-qualifier { color: rgba(251,249,244,0.55); font-style: italic; font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.02em; text-align: center; } body.tsdq-theme-v2 .tsdq-satire-qualifier a { color: var(--bronze); text-decoration: underline; text-decoration-style: dotted; } body.tsdq-theme-v2 .tsdq-footer-colophon { color: rgba(251,249,244,0.4); text-align: center; letter-spacing: 0.08em; font-size: 0.7rem; text-transform: uppercase; } /* ============================================================ ╔══════════════════════════════════════════════════════════╗ ║ THEME V2 — Site-wide rollout ║ ║ Adds v2 styling to /about, /archive, /authors, ║ ║ /subscribe, /privacy, /terms — the six static pages that ║ ║ exist alongside the homepage. All rules are scoped ║ ║ behind body.tsdq-theme-v2 so swapping a page back to v1 ║ ║ remains a single body-class flip. ║ ╚══════════════════════════════════════════════════════════╝ Strategy: - One universal page-header treatment that the four pages with custom header classes (.tsdq-page-header / -archive- / -authors- / -subscribe-) all inherit from. Eyebrow in bronze caps with flank rules; title in Cormorant; deck in italic Cormorant in newsprint gray. - Two listing styles: archive (compact horizontal list rows) and authors (full bio panels with headshot + recent posts). - Subscribe form re-skinned to share the homepage newsletter ribbon's typography + parchment "What you'll receive" aside. - Prose pages (about / privacy / terms) get Cormorant H2/H3 and a polished disclosure block. ============================================================ */ /* ============================================================ Page header — universal v2 treatment ============================================================ Every static page above the body gets the same chrome shape regardless of which legacy class it uses. The selectors below match all the per-page header classes that exist in cut one (.tsdq-page-header, .tsdq-archive-header, .tsdq-authors-header, .tsdq-subscribe-header) plus the .tsdq-eyebrow shorthand that archive/authors/subscribe use instead of .tsdq-page-eyebrow. ============================================================ */ body.tsdq-theme-v2 .tsdq-page-header, body.tsdq-theme-v2 .tsdq-archive-header, body.tsdq-theme-v2 .tsdq-authors-header, body.tsdq-theme-v2 .tsdq-subscribe-header { max-width: var(--measure-wide); margin: var(--space-5) auto var(--space-7); padding: 0 0 var(--space-6); text-align: center; position: relative; border-bottom: 0; } body.tsdq-theme-v2 .tsdq-page-header::after, body.tsdq-theme-v2 .tsdq-archive-header::after, body.tsdq-theme-v2 .tsdq-authors-header::after, body.tsdq-theme-v2 .tsdq-subscribe-header::after { content: ""; display: block; width: 80px; height: 1px; background: var(--bronze); margin: var(--space-5) auto 0; } /* Eyebrow — same flank-ruled small caps shape used by the homepage hero, applied universally to every page-header eyebrow. */ body.tsdq-theme-v2 .tsdq-page-eyebrow, body.tsdq-theme-v2 .tsdq-eyebrow { display: inline-block; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bronze); margin: 0; position: relative; } body.tsdq-theme-v2 .tsdq-page-eyebrow::before, body.tsdq-theme-v2 .tsdq-page-eyebrow::after, body.tsdq-theme-v2 .tsdq-eyebrow::before, body.tsdq-theme-v2 .tsdq-eyebrow::after { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--bronze); vertical-align: middle; margin: 0 var(--space-3); } /* Page title — Cormorant Garamond display, fluid scale. */ body.tsdq-theme-v2 .tsdq-page-title, body.tsdq-theme-v2 .tsdq-archive-title, body.tsdq-theme-v2 .tsdq-authors-title, body.tsdq-theme-v2 .tsdq-subscribe-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); line-height: 1.05; letter-spacing: -0.005em; color: var(--ink-navy); margin: var(--space-4) auto 0; max-width: 28ch; } body.tsdq-theme-v2 .tsdq-page-title em, body.tsdq-theme-v2 .tsdq-authors-title em { font-style: italic; color: var(--ink-navy); } /* Page deck — italic Cormorant in newsprint gray, max one measure wide so it doesn't sprawl on desktop. */ body.tsdq-theme-v2 .tsdq-page-deck, body.tsdq-theme-v2 .tsdq-archive-dek, body.tsdq-theme-v2 .tsdq-authors-dek, body.tsdq-theme-v2 .tsdq-subscribe-dek { font-family: var(--font-display); font-style: italic; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.45; color: var(--newsprint, var(--color-muted)); margin: var(--space-4) auto 0; max-width: 56ch; } body.tsdq-theme-v2 .tsdq-page-deck em, body.tsdq-theme-v2 .tsdq-authors-dek em { font-style: italic; color: var(--ink-navy); } /* ============================================================ Prose (about, privacy, terms) ============================================================ The base v1 .tsdq-prose rules already give us correct measure and base typography. Here we add Cormorant H2 with a bronze short-rule above, italic-styled deck quotes, and a polished disclosure block. ============================================================ */ body.tsdq-theme-v2 .tsdq-prose { font-size: 1.0625rem; line-height: 1.7; } body.tsdq-theme-v2 .tsdq-prose p { margin-bottom: var(--space-5); } body.tsdq-theme-v2 .tsdq-prose h2 { font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1.15; letter-spacing: -0.005em; color: var(--ink-navy); margin: var(--space-8) 0 var(--space-4); padding-top: var(--space-5); border-top: 0; position: relative; } body.tsdq-theme-v2 .tsdq-prose h2::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: var(--bronze); } body.tsdq-theme-v2 .tsdq-prose h2:first-child { margin-top: 0; } body.tsdq-theme-v2 .tsdq-prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; color: var(--ink-navy); margin: var(--space-6) 0 var(--space-3); } body.tsdq-theme-v2 .tsdq-prose strong { color: var(--ink-navy); font-weight: 700; } body.tsdq-theme-v2 .tsdq-prose em { font-style: italic; } body.tsdq-theme-v2 .tsdq-prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bronze-soft); color: var(--ink-navy); padding: 0.1em 0.4em; border-radius: 2px; } body.tsdq-theme-v2 .tsdq-prose a { color: var(--ink-navy); text-decoration: underline; text-decoration-color: var(--bronze); text-decoration-thickness: 1px; text-underline-offset: 3px; } body.tsdq-theme-v2 .tsdq-prose a:hover { color: var(--bronze); } body.tsdq-theme-v2 .tsdq-prose ul, body.tsdq-theme-v2 .tsdq-prose ol { padding-left: var(--space-5); } body.tsdq-theme-v2 .tsdq-prose ul li::marker { color: var(--bronze); } body.tsdq-theme-v2 .tsdq-prose ol li::marker { color: var(--bronze); font-family: var(--font-display); font-weight: 600; } body.tsdq-theme-v2 .tsdq-prose dt { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); margin-top: var(--space-4); } body.tsdq-theme-v2 .tsdq-prose dd { margin: var(--space-1) 0 var(--space-3); color: var(--ink); } /* Disclosure block — parchment-tinted, bronze hairlines top and bottom, the second paragraph ("The recipes are real.") set in italic Cormorant for the deadpan punch. */ body.tsdq-theme-v2 .tsdq-disclosure { background: var(--color-bg-deep); border-top: 1px solid var(--bronze); border-bottom: 1px solid var(--bronze); padding: var(--space-6) var(--space-5); margin: var(--space-7) 0; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.55; color: var(--ink); position: relative; } body.tsdq-theme-v2 .tsdq-disclosure::before { content: "❦"; position: absolute; top: -0.7em; left: 50%; transform: translateX(-50%); background: var(--color-bg); padding: 0 var(--space-3); color: var(--bronze); font-family: var(--font-display); font-size: 1rem; line-height: 1; } body.tsdq-theme-v2 .tsdq-disclosure p { margin: 0; } body.tsdq-theme-v2 .tsdq-disclosure p + p { margin-top: var(--space-3); font-style: italic; color: var(--ink-navy); text-align: center; } /* About page — inline masthead block. Already had v1 styling that worked well; v2 gives it a bronze-tab + parchment row treatment so the names breathe. */ body.tsdq-theme-v2 .tsdq-about-masthead { margin: var(--space-5) 0 var(--space-7); } body.tsdq-theme-v2 .tsdq-about-masthead-row { border-bottom: 1px solid var(--color-rule); padding: var(--space-4) 0; position: relative; } body.tsdq-theme-v2 .tsdq-about-masthead-row::before { content: ""; position: absolute; top: -1px; left: 0; width: 16px; height: 1px; background: var(--bronze); } body.tsdq-theme-v2 .tsdq-about-masthead-row:first-child { border-top: 1px solid var(--ink-navy); } body.tsdq-theme-v2 .tsdq-about-masthead-role { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; color: var(--bronze); } body.tsdq-theme-v2 .tsdq-about-masthead-name { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink-navy); font-weight: 500; } /* Last-updated meta line on legal pages. */ body.tsdq-theme-v2 .tsdq-policy-meta { text-align: center; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--newsprint, var(--color-muted)); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-rule); } body.tsdq-theme-v2 .tsdq-policy-meta em { color: var(--bronze); font-style: italic; } /* ============================================================ Archive — list of all posts ============================================================ Compact list rows rather than full cards: title in Cormorant, small-caps byline, tag chips. Each row gets a bronze tab on hover that mirrors the homepage cards' hover signature so the site feels coherent without making this page noisy. ============================================================ */ body.tsdq-theme-v2 .tsdq-archive-page { max-width: var(--measure-wide); margin: 0 auto; padding: 0 var(--space-5); } body.tsdq-theme-v2 .tsdq-archive-list-section { max-width: var(--measure-wide); margin: 0 auto; } body.tsdq-theme-v2 .tsdq-archive-status { text-align: center; font-family: var(--font-display); font-style: italic; color: var(--newsprint, var(--color-muted)); padding: var(--space-7) 0; } body.tsdq-theme-v2 .tsdq-archive-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink-navy); } body.tsdq-theme-v2 .tsdq-archive-item { position: relative; padding: var(--space-5) var(--space-4) var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-rule); transition: background-color 0.2s ease; } body.tsdq-theme-v2 .tsdq-archive-item::before { content: ""; position: absolute; left: var(--space-2); top: 50%; width: 6px; height: 6px; background: var(--bronze); transform: translateY(-50%) rotate(45deg); transition: width 0.25s ease, height 0.25s ease; } body.tsdq-theme-v2 .tsdq-archive-item:hover { background: var(--color-bg-deep); } body.tsdq-theme-v2 .tsdq-archive-item:hover::before { width: 12px; height: 12px; } body.tsdq-theme-v2 .tsdq-archive-item:hover .tsdq-archive-item-title { color: var(--bronze); } body.tsdq-theme-v2 .tsdq-archive-item-heading { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.005em; } body.tsdq-theme-v2 .tsdq-archive-item-title { color: var(--ink-navy); text-decoration: none; background-image: none; transition: color 0.2s ease; } body.tsdq-theme-v2 .tsdq-archive-item-byline { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--newsprint, var(--color-muted)); margin: 0 0 var(--space-3); } body.tsdq-theme-v2 .tsdq-archive-item-author { color: var(--ink-navy); font-weight: 600; } body.tsdq-theme-v2 .tsdq-archive-item-sep { color: var(--bronze); } body.tsdq-theme-v2 .tsdq-archive-item-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } /* Pagination — small caps, bronze active. */ body.tsdq-theme-v2 .tsdq-pagination { margin: var(--space-7) 0; display: flex; justify-content: center; } body.tsdq-theme-v2 .tsdq-pagination-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0; margin: 0; align-items: center; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } body.tsdq-theme-v2 .tsdq-pagination-item a, body.tsdq-theme-v2 .tsdq-pagination-item span { display: inline-block; padding: var(--space-2) var(--space-3); min-width: 2.25rem; text-align: center; color: var(--ink-navy); text-decoration: none; border: 1px solid transparent; } body.tsdq-theme-v2 .tsdq-pagination-item a:hover { border-color: var(--bronze); color: var(--bronze); } body.tsdq-theme-v2 .tsdq-pagination-current span { background: var(--ink-navy); color: var(--bronze); border-color: var(--ink-navy); } body.tsdq-theme-v2 .tsdq-pagination-ellipsis span { color: var(--bronze); border-color: transparent; cursor: default; } body.tsdq-theme-v2 .tsdq-pagination-prev a, body.tsdq-theme-v2 .tsdq-pagination-next a { border-color: var(--color-rule); } body.tsdq-theme-v2 .tsdq-archive-newsletter { margin-top: var(--space-8); } /* ============================================================ Authors — bios + recent posts ============================================================ Each author is a two-column row: circular headshot on the left, bio + recent-posts list on the right. Top rule is navy with a bronze tab on the left side, matching the post-card vocabulary. ============================================================ */ body.tsdq-theme-v2 .tsdq-authors-page { max-width: var(--measure-wide); margin: 0 auto; padding: 0 var(--space-5); } body.tsdq-theme-v2 .tsdq-authors-list { list-style: none; padding: 0; margin: var(--space-7) 0 0; } body.tsdq-theme-v2 .tsdq-author-entry { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-7) 0; border-top: 1px solid var(--ink-navy); position: relative; } body.tsdq-theme-v2 .tsdq-author-entry::before { content: ""; position: absolute; top: -1px; left: 0; width: 60px; height: 3px; background: var(--bronze); } body.tsdq-theme-v2 .tsdq-author-entry:first-child { /* The first one's top rule is the same as the others, but the bronze tab serves as the "section opener" cue. */ } @media (max-width: 720px) { body.tsdq-theme-v2 .tsdq-author-entry { grid-template-columns: 1fr; gap: var(--space-4); } } body.tsdq-theme-v2 .tsdq-author-headshot-wrap { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; background: var(--color-bg-deep); border: 1px solid var(--bronze); position: relative; } body.tsdq-theme-v2 .tsdq-author-headshot-wrap::after { /* Bronze hairline outer ring for the editorial portrait feel. */ content: ""; position: absolute; inset: -6px; border: 1px solid var(--bronze); border-radius: 50%; pointer-events: none; opacity: 0.5; } body.tsdq-theme-v2 .tsdq-author-headshot { width: 100%; height: 100%; object-fit: cover; display: block; /* If the headshot fails to load, we fall back to showing the initials via a CSS pseudo-element on the wrap; the alt text on is the name, and most browsers render it inside the broken-image box for free. */ } @media (max-width: 720px) { body.tsdq-theme-v2 .tsdq-author-headshot-wrap { width: 140px; height: 140px; } } body.tsdq-theme-v2 .tsdq-author-name { font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 600; letter-spacing: -0.005em; line-height: 1.1; color: var(--ink-navy); margin: 0 0 var(--space-2); } /* Author register — italic Cormorant subhead, like a magazine contributor's section title. */ body.tsdq-theme-v2 .tsdq-author-register { font-family: var(--font-display); font-style: italic; font-size: 1rem; letter-spacing: 0.04em; color: var(--bronze); margin: 0 0 var(--space-4); padding: 0 0 var(--space-3); border-bottom: 1px solid var(--color-rule); position: relative; } body.tsdq-theme-v2 .tsdq-author-register::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 24px; height: 1px; background: var(--bronze); } body.tsdq-theme-v2 .tsdq-author-bio { font-family: var(--font-serif); font-size: 1rem; line-height: 1.7; color: var(--ink); margin: 0 0 var(--space-5); } body.tsdq-theme-v2 .tsdq-author-bio em { font-style: italic; color: var(--ink-navy); } body.tsdq-theme-v2 .tsdq-author-recent-heading { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-navy); margin: 0 0 var(--space-3); display: flex; align-items: center; gap: var(--space-3); } body.tsdq-theme-v2 .tsdq-author-recent-heading::before { content: ""; width: 8px; height: 8px; background: var(--bronze); transform: rotate(45deg); flex-shrink: 0; } body.tsdq-theme-v2 .tsdq-author-recent-heading::after { content: ""; flex: 1; height: 1px; background: var(--color-rule); } body.tsdq-theme-v2 .tsdq-author-recent-list { list-style: none; padding: 0; margin: 0; } body.tsdq-theme-v2 .tsdq-author-recent-item { font-family: var(--font-display); font-size: 1.0625rem; padding: var(--space-2) 0; border-bottom: 1px dotted var(--color-rule); display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; } body.tsdq-theme-v2 .tsdq-author-recent-item:last-child { border-bottom: 0; } body.tsdq-theme-v2 .tsdq-author-recent-title { color: var(--ink-navy); text-decoration: none; flex: 1; } body.tsdq-theme-v2 .tsdq-author-recent-title:hover { color: var(--bronze); } body.tsdq-theme-v2 .tsdq-author-recent-sep { color: var(--bronze); } body.tsdq-theme-v2 .tsdq-author-recent-date { font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--newsprint, var(--color-muted)); } body.tsdq-theme-v2 .tsdq-author-recent-status { font-family: var(--font-display); font-style: italic; color: var(--newsprint, var(--color-muted)); font-size: 0.95rem; margin: 0; padding: var(--space-2) 0; } body.tsdq-theme-v2 .tsdq-author-recent-empty { color: var(--newsprint, var(--color-muted)); } body.tsdq-theme-v2 .tsdq-author-recent-error { color: var(--bronze); } body.tsdq-theme-v2 .tsdq-authors-newsletter { margin-top: var(--space-8); } /* ============================================================ Subscribe — dedicated landing page ============================================================ The subscribe form on this dedicated page reuses .tsdq-newsletter- form selectors but is presented on the parchment background of the page rather than inside the navy newsletter ribbon. So we override the navy-ribbon styling for the form *when it lives inside .tsdq-subscribe-page*. The aside ("What you'll receive") becomes a parchment block with bronze rules. ============================================================ */ body.tsdq-theme-v2 .tsdq-subscribe-page { max-width: var(--measure); margin: 0 auto; padding: 0 var(--space-5); } /* Subscribe-page form — parchment / light variant of the navy newsletter ribbon. We undo the dark-bg styling that the homepage inherits and recolor for a light context. */ body.tsdq-theme-v2 .tsdq-subscribe-page .tsdq-newsletter-form, body.tsdq-theme-v2 .tsdq-subscribe-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); background: var(--color-bg-deep); border-top: 1px solid var(--bronze); border-bottom: 1px solid var(--bronze); padding: var(--space-6) var(--space-5); margin: var(--space-6) 0; position: relative; } body.tsdq-theme-v2 .tsdq-subscribe-page .tsdq-newsletter-form::before { content: "❦"; position: absolute; top: -0.6em; left: 50%; transform: translateX(-50%); background: var(--color-bg); padding: 0 var(--space-3); color: var(--bronze); font-family: var(--font-display); font-size: 1rem; } @media (max-width: 600px) { body.tsdq-theme-v2 .tsdq-subscribe-page .tsdq-newsletter-form, body.tsdq-theme-v2 .tsdq-subscribe-form { grid-template-columns: 1fr; } } body.tsdq-theme-v2 .tsdq-subscribe-page .tsdq-newsletter-field { display: grid; gap: var(--space-1); } body.tsdq-theme-v2 .tsdq-subscribe-page .tsdq-newsletter-field label { font-family: var(--font-sans); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); } body.tsdq-theme-v2 .tsdq-subscribe-page .tsdq-newsletter-optional { color: var(--newsprint, var(--color-muted)); font-style: italic; font-weight: 400; letter-spacing: 0.04em; text-transform: none; } body.tsdq-theme-v2 .tsdq-subscribe-page .tsdq-newsletter-form input { background: #fff; border: 1px solid var(--color-rule); color: var(--ink); font-family: var(--font-serif); font-size: 1rem; padding: var(--space-3) var(--space-4); border-radius: 0; } body.tsdq-theme-v2 .tsdq-subscribe-page .tsdq-newsletter-form input::placeholder { color: rgba(20,24,31,0.35); } body.tsdq-theme-v2 .tsdq-subscribe-page .tsdq-newsletter-form input:focus { outline: 0; border-color: var(--bronze); } body.tsdq-theme-v2 .tsdq-subscribe-page .tsdq-newsletter-submit { grid-column: 1 / -1; justify-self: center; background: var(--ink-navy); color: var(--bronze); font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; border: 0; padding: var(--space-4) var(--space-7); border-radius: 0; cursor: pointer; margin-top: var(--space-2); transition: background 0.15s ease, color 0.15s ease; } body.tsdq-theme-v2 .tsdq-subscribe-page .tsdq-newsletter-submit:hover { background: var(--bronze); color: var(--ink-navy); } body.tsdq-theme-v2 .tsdq-subscribe-page .tsdq-newsletter-fineprint { grid-column: 1 / -1; text-align: center; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--newsprint, var(--color-muted)); margin: 0; } body.tsdq-theme-v2 .tsdq-subscribe-page .tsdq-newsletter-fineprint a { color: var(--ink-navy); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 3px; } /* "What you'll receive" aside */ body.tsdq-theme-v2 .tsdq-subscribe-aside { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-rule); position: relative; } body.tsdq-theme-v2 .tsdq-subscribe-aside::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 1px; background: var(--bronze); } body.tsdq-theme-v2 .tsdq-subscribe-aside-title { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-navy); margin: 0 0 var(--space-4); } body.tsdq-theme-v2 .tsdq-subscribe-aside-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); } body.tsdq-theme-v2 .tsdq-subscribe-aside-list li { font-family: var(--font-display); font-size: 1.0625rem; padding: var(--space-2) 0 var(--space-2) var(--space-5); position: relative; color: var(--ink); } body.tsdq-theme-v2 .tsdq-subscribe-aside-list li::before { content: "❖"; position: absolute; left: 0; top: var(--space-2); color: var(--bronze); font-size: 0.85em; } body.tsdq-theme-v2 .tsdq-subscribe-aside-note { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--newsprint, var(--color-muted)); text-align: center; margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--color-rule); } /* ============================================================ v2 — Post detail (post.html and debate.html) ============================================================ The render-post routine reads these layouts at request time and injects the goldmark-rendered body. v2 styles mirror the homepage's typographic vocabulary: Cormorant Garamond for the title, italic dek, small-caps byline with bronze separators, cinematic 21:9 hero with the bronze double-rule frame from the homepage hero, and a comfortable serif body column at the --measure width. The body's prose comes back from goldmark unstyled — just

,

,

,

,