/**
 * Hayder Voice — Typography
 * Variable fonts, OpenType features, drop cap, selection.
 */

@layer base {

	/* ============================================================
	 * FONT FACE — Variable fonts
	 * ============================================================ */

	/* Cormorant Garamond VF — loaded via Google Fonts */
	/* @font-face declarations are here as fallback/override */
	@font-face {
		font-family: 'Cormorant Garamond VF';
		src: local('Cormorant Garamond'),
		     url('https://fonts.gstatic.com/s/cormorantgaramond/v22/co3YmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2') format('woff2');
		font-weight: 300 700;
		font-style: normal italic;
		font-display: swap;
		size-adjust: 100%;
	}

	/* ============================================================
	 * BASE TYPOGRAPHY
	 * ============================================================ */

	body {
		font-family: var(--font-serif);
		font-size: var(--text-base);
		color: var(--c-body);
		line-height: var(--lh-reading);
		writing-mode: horizontal-tb;
		text-orientation: mixed;
		direction: ltr;

		/* OpenType features */
		font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'onum' 1;
		font-variant-ligatures: common-ligatures contextual;
		font-variant-numeric: oldstyle-nums proportional-nums;
		font-optical-sizing: auto;
	}

	/* Headings */
	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-serif);
		font-weight: 400;
		color: var(--c-heading);
		line-height: var(--lh-snug);
		letter-spacing: var(--ls-tight);
		text-wrap: balance;
		writing-mode: horizontal-tb;
		text-orientation: mixed;
		font-feature-settings: 'kern' 1, 'liga' 1, 'swsh' 1;
	}

	h1 { font-size: var(--text-4xl); }
	h2 { font-size: var(--text-3xl); }
	h3 { font-size: var(--text-2xl); }
	h4 { font-size: var(--text-xl); }
	h5 { font-size: var(--text-lg); }
	h6 { font-size: var(--text-md); }

	/* Paragraphs */
	p {
		max-inline-size: 68ch;
		text-wrap: pretty;
	}

	/* Anchors */
	a {
		color: var(--c-amber);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
		transition: color var(--duration-fast) var(--ease-smooth);
	}

	a:hover {
		color: var(--c-heading);
	}

	/* Eyebrow text */
	.eyebrow {
		font-family: var(--font-sans);
		font-size: var(--text-2xs);
		font-weight: 500;
		letter-spacing: var(--ls-widest);
		color: var(--c-muted);
		text-transform: uppercase;
		display: block;
		margin-bottom: 0.75rem;
	}

	/* ============================================================
	 * PROSE — Article content styles
	 * ============================================================ */

	.prose {
		font-family: var(--font-sans);
		font-size: var(--text-base);
		line-height: var(--lh-reading);
		color: var(--c-body);
		max-width: 68ch;

		/* OpenType refinements */
		font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'onum' 1;
		font-variant-ligatures: common-ligatures contextual;

		/* Better hyphenation */
		hyphens: auto;
		hyphenate-limit-chars: 8 4 4;
		hyphenate-limit-last: always;
		overflow-wrap: break-word;
	}

	/* Drop cap on first paragraph */
	.prose > p:first-of-type::first-letter {
		initial-letter: 3 2;
		font-family: var(--font-serif);
		font-size: 4.2rem;
		font-weight: 700;
		color: var(--c-amber);
		margin-right: 0.08em;
		line-height: 0.8;
		padding: 0 0.1em 0 0;
		float: left;
		font-feature-settings: 'smcp' 0;
	}

	/* Fallback for browsers without initial-letter support */
	@supports not (initial-letter: 3) {
		.prose > p:first-of-type::first-letter {
			font-size: 4.5rem;
			float: left;
			line-height: 0.65;
			margin: 0.1em 0.1em 0 0;
		}
	}

	/* Prose heading sizes */
	.prose h2 { font-size: var(--text-2xl); margin-top: 2.5em; margin-bottom: 0.75em; }
	.prose h3 { font-size: var(--text-xl);  margin-top: 2em;   margin-bottom: 0.6em; }
	.prose h4 { font-size: var(--text-lg);  margin-top: 1.8em; margin-bottom: 0.5em; }

	.prose p { margin-bottom: 1.6em; }
	.prose p:last-child { margin-bottom: 0; }

	/* Prose links */
	.prose a {
		color: var(--c-amber);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
	}

	.prose a:hover { color: var(--c-heading); }

	/* Blockquote */
	.prose blockquote {
		border-left: 2px solid var(--c-amber-border);
		padding: 1.5rem 2rem;
		margin: 2.5rem 0;
		background: var(--c-amber-surface);
		border-radius: 0 var(--radius-md) var(--radius-md) 0;
	}

	.prose blockquote p {
		font-size: var(--text-md);
		font-style: italic;
		color: var(--c-heading);
		margin-bottom: 0;
		line-height: var(--lh-relaxed);
	}

	/* Code */
	.prose code {
		font-family: var(--font-mono);
		font-size: 0.875em;
		color: var(--c-amber);
		background: var(--c-surface);
		padding: 0.2em 0.4em;
		border-radius: var(--radius-sm);
		border: 1px solid var(--c-border);
	}

	.prose pre {
		background: var(--c-surface);
		border: 1px solid var(--c-border);
		border-radius: var(--radius-md);
		padding: 1.5rem;
		overflow-x: auto;
		margin: 2rem 0;
	}

	.prose pre code {
		background: none;
		border: none;
		padding: 0;
		color: var(--c-body);
	}

	/* Lists */
	.prose ul,
	.prose ol {
		padding-left: 1.75em;
		margin-bottom: 1.6em;
	}

	.prose li { margin-bottom: 0.5em; line-height: var(--lh-relaxed); }

	/* Images */
	.prose figure {
		margin: 2.5rem 0;
	}

	.prose figure img {
		width: 100%;
		border-radius: var(--radius-md);
	}

	.prose figcaption {
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		color: var(--c-muted);
		text-align: center;
		margin-top: 0.75rem;
		font-style: italic;
	}

	/* HR */
	.prose hr {
		border: none;
		border-top: 1px solid var(--c-border);
		margin: 3rem 0;
	}

	/* Strong / Em */
	.prose strong { color: var(--c-heading); font-weight: 600; }
	.prose em { color: var(--c-heading); font-style: italic; }

	/* Mark */
	.prose mark {
		background: var(--c-amber-overlay);
		color: var(--c-heading);
		padding: 0.1em 0.2em;
		border-radius: 2px;
	}

	/* Table */
	.prose table {
		width: 100%;
		border-collapse: collapse;
		margin: 2rem 0;
		font-size: var(--text-sm);
	}

	.prose th,
	.prose td {
		padding: 0.75rem 1rem;
		border: 1px solid var(--c-border);
		text-align: left;
	}

	.prose th {
		background: var(--c-surface);
		color: var(--c-heading);
		font-weight: 600;
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		letter-spacing: var(--ls-wide);
		text-transform: uppercase;
	}

	/* ============================================================
	 * CUSTOM SELECTION
	 * ============================================================ */

	::selection {
		background: var(--c-amber-overlay);
		color: var(--c-heading);
	}

	::-moz-selection {
		background: var(--c-amber-overlay);
		color: var(--c-heading);
	}

} /* @layer base */