/* ============================================================================= v10 ARTICLE OVERRIDES — Board 3 locks applied over the v9 article CSS. Loaded LAST in every bespoke article , after the per-article styles.css / motion.css, so it wins the cascade without editing them. Locks (see ../v10-explorations/01_DECISION-LADDER.md): 3A:2 620px measure, margin column alive on large screens 3B:1 drop cap — middle navy (--ink), the strong press of the body pen 3C:2 asterism section breaks (replaces the v9 wavy-ink SVG device) 3D:1 scholar's margin note (italic, quiet; folds on mobile as before) 3E:1 hero meta = DATE ONLY (tags stay in markup for tooling, hidden) L1/L2 Garamond display / Newsreader body · ink-deep titles / navy prose P reduced distractions forever (fake nav search dies) ============================================================================= */ /* ---- L1/L2 — type + ink ---- */ html, body { font-family: var(--font-body); font-optical-sizing: auto; } .prose p { font-size: 20px; line-height: 1.64; } .hero__title { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; color: var(--ink-deep); } .hero__dek { font-family: var(--font-body); color: var(--mute-1); } .closer-question { font-family: var(--font-body); /* v10.2: Georgia italic closer */ font-style: italic; color: var(--ink-deep); } /* ---- 3B:1 — drop cap in the middle navy ---- */ .prose p.lede::first-letter { color: var(--ink); /* #2A3B6E — a strong press, NOT the title's ink-deep */ font-family: inherit; /* the cap belongs to the paragraph, not the titles */ } /* ---- 3C:2 — asterism replaces the wavy-ink section device ---- */ .section-break svg, .section-break .section-break__mark { display: none; } .section-break::before { content: "· · ·"; display: block; text-align: center; font-family: var(--font-body); font-style: italic; font-size: 22px; letter-spacing: 0.35em; color: var(--mute-2); } /* ---- 3D:1 — scholar's note: italic, quiet, body face ---- */ .margin-note { font-family: var(--font-body); font-style: italic; color: var(--mute-1); } /* ---- 3E:1 — hero meta: date only. The tag spans stay in the DOM for tooling/recommendations; the reader never sees them. ---- */ .hero__meta span { display: none; } .hero__meta span:nth-child(2) { display: inline; } /* ---- P — reduced distractions: the decorative nav search bar dies ---- */ .nav-search { display: none !important; } /* the date span inherits a "·" separator ::before from the v9 meta rules (meant to sit between spans); with span 1 hidden it would lead the line */ .hero__meta span:nth-child(2)::before { content: none !important; } /* ---- NUMBERED MARGIN REFERENCES (v10-refs.js) — from the editorial template, re-set in the locked world. Vermilion numerals are hand-marks: the writer pointing. ---- */ sup.mn-ref { font-family: var(--font-mono); font-size: 0.58em; line-height: 0; color: var(--accent-ink); margin-left: 3px; cursor: pointer; border-bottom: 1px dotted var(--accent-ink); transition: color 250ms var(--ease); } sup.mn-ref.lit { color: var(--accent); } .margin-note .mn-ref-n { display: block; font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: 1.5px; color: var(--accent-ink); margin-bottom: 4px; } .margin-note { transition: opacity 600ms var(--ease), transform 600ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease); } .margin-note.lit { color: var(--ink); border-left-color: var(--accent); } /* mobile inline copy — only ever created below 901px by v10-refs.js */ .mn-inline-note { display: block; position: static; opacity: 1; transform: none; margin: 0.9em 0 1.3em; font-size: 14px; line-height: 1.6; font-style: italic; color: var(--mute-1); border-left: 2px solid var(--accent); padding-left: 14px; max-width: none; } .mn-inline-note.mn-hidden { display: none; } /* ---- pull quotes hold the prose's left edge. The v9 -80px outdent (org-chart) read as a broken margin in the calmer v10 page. ---- */ .pullquote { margin-left: 0; margin-right: 0; } /* ---- drop cap v10.1: RUBRICATION. The initial goes vermilion — the oldest red-ink tradition in bookmaking, and the editorial template's cue Tushar liked. Full --accent is correct here: a drop cap is large geometry, not body-size type. (One-line switch if the red overreaches: var(--ink-deep).) ---- */ .prose p.lede::first-letter { color: var(--accent); } /* ---- v10.1: prose darkens one step (Tushar, 3 Jul) — body runs in the middle navy; --prose (#3A4B82) retires from running text. The drop cap stays vermilion (rubrication). ---- */ .prose p { color: var(--ink); } /* #2A3B6E */ /* ---- the org-chart subline (.hero__title2) is a dek by another name — same rule as .hero__dek: Georgia italic, never display-face at reading scale ---- */ .hero__title2 { font-family: var(--font-body); font-style: italic; color: var(--mute-1); } /* ---- v10.2 seam: the injected read-next footer. The next-title was inheriting the display face at 24px — below the Garamond floor. It reads in the body voice; the excerpt stays quiet. ---- */ .article-footer .next-article__title { /* server injects article-footer.css AFTER this sheet — win on specificity, not order */ font-family: var(--font-body); font-style: italic; font-size: 22px; } /* ---- v10.2 (4 Jul): the article read time speaks the homepage's mono vocabulary — "6 MIN", quiet. (ABOUT ME retired from article navs; it remains homepage + drawer chrome.) ---- */ .nav__time { font-family: var(--font-mono) !important; font-size: 10.5px !important; letter-spacing: 2px; color: var(--mute-1) !important; } /* ---- v10.2: the endcard signs off in script, not with the seal ---- */ .endcard__wordmark { font-family: var(--font-script); font-size: 30px; color: var(--ink-deep); display: inline-block; }