/* dayogreats / typography refinement layer
 *
 * Final-pass typographic tuning. Sits on top of tokens.css + prose.css.
 * Does NOT replace existing rules — refines them.
 *
 * Principles:
 *   1. Optical-size variable font features fully engaged
 *   2. Proper figures (oldstyle in prose, tabular in metadata)
 *   3. Modular scale on a major-third (1.25) ratio
 *   4. Tightened heading tracking, opened body tracking
 *   5. Vertical rhythm calibrated to 24px baseline
 *   6. Ligatures, contextual alternates, kerning all engaged
 *   7. Quote marks rendered properly
 *   8. Bracketed footnote markers
 */

/* ────────────────────────────────────────────────────────
 * 1 · GLOBAL OPTICAL-FONT FEATURES
 * Engage the variable font's full capability
 * ──────────────────────────────────────────────────────── */

html {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings:
		"kern" 1,        /* kerning */
		"liga" 1,        /* common ligatures */
		"calt" 1;        /* contextual alternates */
	font-optical-sizing: auto;
}

body {
	font-feature-settings:
		"kern" 1,
		"liga" 1,
		"calt" 1,
		"onum" 1;        /* oldstyle numerals in prose */
}

/* Metadata: tabular figures so columns of numbers align */
.case-pill, .status-badge, .pulse-dot,
.hero-meta, .hero-meta-value,
.case-eyebrow, .section-eyebrow,
[class*="-mono"], code, pre,
.feed-meta, .reader-settings, .footer-meta {
	font-feature-settings:
		"kern" 1,
		"tnum" 1,        /* tabular numerals */
		"lnum" 1;        /* lining numerals */
	font-variant-numeric: tabular-nums lining-nums;
}

/* ────────────────────────────────────────────────────────
 * 2 · RECALIBRATED MODULAR SCALE
 * Major-third ratio (1.25) anchored at 17px body
 * ──────────────────────────────────────────────────────── */

:root {
	/* Base unit */
	--type-scale-ratio: 1.25;
	--type-base: 17px;
	--baseline: 1.5rem;             /* 24px vertical grid */

	/* Scale (steps from base) */
	--text-xs:   13.6px;  /* −1.5 step · 0.8 */
	--text-sm:   14.2px;  /* −1 step · 0.836 */
	--text-md:   17px;    /* base */
	--text-lg:   21.25px; /* +1 step */
	--text-xl:   26.56px; /* +2 step */
	--text-2xl:  33.2px;  /* +3 step */
	--text-3xl:  41.5px;  /* +4 step */
	--text-4xl:  51.88px; /* +5 step */
	--text-5xl:  64.85px; /* +6 step */
	--text-hero: clamp(48px, 7vw, 96px);

	/* Line heights — tighter for display, looser for prose */
	--lh-tight:   1.05;
	--lh-snug:    1.15;
	--lh-base:    1.55;
	--lh-relaxed: 1.7;

	/* Letter-spacing — tightened headings, opened metadata */
	--tracking-tightest: -0.035em;
	--tracking-tight:    -0.02em;
	--tracking-snug:     -0.01em;
	--tracking-normal:   0;
	--tracking-wide:     0.02em;
	--tracking-mono:     0.16em;
	--tracking-mono-tight: 0.12em;
}

/* ────────────────────────────────────────────────────────
 * 3 · DISPLAY TYPE — heroes and section titles
 * ──────────────────────────────────────────────────────── */

.hero-name,
.case-title {
	font-feature-settings:
		"kern" 1,
		"liga" 1,
		"dlig" 1,        /* discretionary ligatures (ct, st, fi, fl) */
		"calt" 1,
		"ss01" 1;        /* stylistic set 1 if font supports */
	font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
	letter-spacing: var(--tracking-tightest);
	hyphens: none;
	text-wrap: balance;      /* better line-break distribution */
}

/* Italic accent in display headings — slightly different optical tuning */
.hero-name em,
.case-title em,
.section-title em {
	font-variation-settings: "opsz" 72;  /* maximize optical for display */
	font-feature-settings: "swsh" 1;     /* swashes if available */
}

/* ────────────────────────────────────────────────────────
 * 4 · BODY PROSE — tuned for sustained reading
 * ──────────────────────────────────────────────────────── */

.prose,
.case-main .prose,
.essay-body,
.entry-content {
	font-size: var(--text-md);
	line-height: var(--lh-base);
	letter-spacing: var(--tracking-normal);
	font-variant-numeric: oldstyle-nums proportional-nums;
	hanging-punctuation: first last;     /* hangs quotes/punctuation into margin */
	text-wrap: pretty;                    /* better orphan/widow control */
}

.prose p,
.case-main .prose p,
.essay-body p {
	margin: 0 0 var(--baseline);
	max-width: 65ch;          /* enforce ideal measure */
	orphans: 3;
	widows: 3;
}

/* First paragraph in prose — no top margin */
.prose > p:first-child,
.case-main .prose > p:first-child {
	margin-top: 0;
}

/* Lead/deck paragraphs */
.prose-lead,
.case-deck,
.section-deck {
	font-size: var(--text-lg);
	line-height: 1.5;
	letter-spacing: var(--tracking-snug);
	text-wrap: balance;
	max-width: 60ch;
}

/* ────────────────────────────────────────────────────────
 * 5 · TYPOGRAPHIC ORNAMENTS — quote marks, em-dashes, ellipses
 * ──────────────────────────────────────────────────────── */

/* Smart quote curling */
.prose q,
.prose blockquote {
	quotes: "\201C" "\201D" "\2018" "\2019";
}
.prose q::before { content: open-quote; }
.prose q::after  { content: close-quote; }

/* Sectioning symbol — § appears as a typographic landmark */
.case-eyebrow,
.section-eyebrow {
	font-feature-settings: "kern" 1, "tnum" 1;
}

/* ────────────────────────────────────────────────────────
 * 6 · LINK TYPOGRAPHY — hairline underline, generous offset
 * ──────────────────────────────────────────────────────── */

.prose a,
.case-main a,
.essay-body a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--rule);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: text-decoration-color 0.2s, color 0.2s;
}
.prose a:hover,
.case-main a:hover,
.essay-body a:hover {
	color: var(--accent);
	text-decoration-color: var(--accent);
}

/* ────────────────────────────────────────────────────────
 * 7 · FOOTNOTE / CITATION MARKERS — bracketed and superscript
 * ──────────────────────────────────────────────────────── */

sup.footnote-ref,
sup a[href^="#fn"],
sup a[href^="#footnote-"] {
	font-feature-settings: "sups" 1;
	font-size: 0.7em;
	margin: 0 0.05em 0 0.1em;
	letter-spacing: 0.04em;
}
sup.footnote-ref a::before { content: "["; color: var(--ink-faint); }
sup.footnote-ref a::after  { content: "]"; color: var(--ink-faint); }

/* ────────────────────────────────────────────────────────
 * 8 · HEADINGS WITHIN PROSE — proper spacing rhythm
 * ──────────────────────────────────────────────────────── */

.prose h2,
.essay-body h2 {
	margin-top: calc(var(--baseline) * 2);
	margin-bottom: calc(var(--baseline) * 0.5);
	font-size: var(--text-2xl);
	line-height: var(--lh-snug);
	letter-spacing: var(--tracking-tight);
	font-weight: 500;
}
.prose h3,
.essay-body h3 {
	margin-top: calc(var(--baseline) * 1.5);
	margin-bottom: calc(var(--baseline) * 0.4);
	font-size: var(--text-xl);
	line-height: var(--lh-snug);
	letter-spacing: var(--tracking-snug);
	font-weight: 500;
}
.prose h4,
.essay-body h4 {
	margin-top: var(--baseline);
	margin-bottom: calc(var(--baseline) * 0.3);
	font-size: var(--text-lg);
	line-height: var(--lh-snug);
	font-weight: 500;
}

/* Heading after heading — no double spacing */
.prose h2 + h3,
.prose h3 + h4 {
	margin-top: var(--baseline);
}

/* ────────────────────────────────────────────────────────
 * 9 · LISTS — tuned for prose embedding
 * ──────────────────────────────────────────────────────── */

.prose ul,
.prose ol,
.essay-body ul,
.essay-body ol {
	margin: 0 0 var(--baseline);
	padding-left: 1.6em;
	max-width: 62ch;
}
.prose li,
.essay-body li {
	margin-bottom: calc(var(--baseline) * 0.3);
	line-height: var(--lh-base);
}
.prose li > p {
	margin-bottom: calc(var(--baseline) * 0.3);
	max-width: none;
}

/* ────────────────────────────────────────────────────────
 * 10 · INLINE EMPHASIS — refined italic and bold
 * ──────────────────────────────────────────────────────── */

.prose em,
.prose i,
.essay-body em {
	font-style: italic;
	font-feature-settings: "kern" 1, "liga" 1, "swsh" 1;
}
.prose strong,
.prose b,
.essay-body strong {
	font-weight: 500;          /* lighter "bold" — Newsreader 500 weight */
	color: var(--ink);
}

/* ────────────────────────────────────────────────────────
 * 11 · SELECTION — themed selection color
 * ──────────────────────────────────────────────────────── */

::selection {
	background-color: var(--accent);
	color: var(--paper);
	text-shadow: none;
}
::-moz-selection {
	background-color: var(--accent);
	color: var(--paper);
	text-shadow: none;
}

/* ────────────────────────────────────────────────────────
 * 12 · CARETS — themed text caret in inputs
 * ──────────────────────────────────────────────────────── */

input:not([type="checkbox"]):not([type="radio"]),
textarea {
	caret-color: var(--accent);
}

/* ────────────────────────────────────────────────────────
 * 13 · MOBILE — recalibrate measure for thumb reading
 * ──────────────────────────────────────────────────────── */

@media (max-width: 760px) {
	.prose,
	.case-main .prose,
	.essay-body {
		font-size: 16px;
		line-height: 1.6;
	}
	.prose p,
	.case-main .prose p {
		max-width: 100%;
	}
	.hero-name,
	.case-title {
		text-wrap: pretty;     /* less aggressive than balance on mobile */
		letter-spacing: var(--tracking-tight);
	}
}

/* ════════════════════════════════════════════════════════
 * FIRST-VISIT POLISH
 * Eliminate FOUT and CLS during first paint
 * ════════════════════════════════════════════════════════ */

/* Reserve hero height before fonts load — prevents layout shift */
.hero {
	min-height: clamp(380px, 56vh, 720px);
	contain: layout style;
}

/* Reserve case study hero height */
.case {
	min-height: clamp(240px, 32vh, 420px);
}

/* Hide reveal-on-scroll content until JS runs — prevents flash of
   unrevealed content on slow connections */
@media (prefers-reduced-motion: no-preference) {
	.reveal-on-scroll:not(.is-revealed) {
		visibility: visible;     /* keep visible for SEO crawlers */
	}
}

/* Smooth font swap fallback — when system serif loads first, then
   Newsreader, prevent jarring metric change */
@supports (font-size-adjust: ex-height 0.5) {
	body {
		font-size-adjust: ex-height 0.5;
	}
}

/* Prevent zoom on iOS focus — preserves type scale */
@media screen and (max-width: 760px) {
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="password"],
	textarea,
	select {
		font-size: 16px;        /* iOS won't zoom if input is 16px or larger */
	}
}