/* ==========================================================================
   Typography
   ========================================================================== */

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-serif);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--color-text);
	font-weight: 400;
}

/* --- Headings ------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: var(--lh-tight);
	color: var(--color-white);
	letter-spacing: var(--ls-tight);
	margin: 0 0 var(--sp-4);
}

h1, .h1 { font-size: var(--fs-4xl); font-weight: 600; }
h2, .h2 { font-size: var(--fs-3xl); }
h3, .h3 { font-size: var(--fs-2xl); }
h4, .h4 { font-size: var(--fs-xl); }
h5, .h5 { font-size: var(--fs-lg); }
h6, .h6 { font-size: var(--fs-md); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: var(--ls-wider); }

/* --- Display Heading (Hero) ---------------------------------------------- */

.display {
	font-family: var(--font-display);
	font-size: var(--fs-hero);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: var(--ls-tight);
	color: var(--color-white);
}

.display em,
.eyebrow em {
	font-style: italic;
	color: var(--color-accent);
}

/* --- Eyebrow / Kicker ---------------------------------------------------- */

.eyebrow {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--color-accent);
	margin: 0 0 var(--sp-3);
}

/* --- Lead Paragraph ------------------------------------------------------ */

.lead {
	font-family: var(--font-serif);
	font-size: var(--fs-lg);
	line-height: var(--lh-relaxed);
	color: var(--color-text);
	font-weight: 400;
}

/* --- Body Text ----------------------------------------------------------- */

p {
	margin: 0 0 var(--sp-4);
}

p:last-child {
	margin-bottom: 0;
}

strong, b { font-weight: 600; color: var(--color-white); }
em, i { font-style: italic; }

small, .small {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.muted    { color: var(--color-text-muted); }
.subtle   { color: var(--color-text-subtle); }
.accent   { color: var(--color-accent); }
.white    { color: var(--color-white); }

/* --- Meta / Datum -------------------------------------------------------- */

.meta {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
}

/* --- Links --------------------------------------------------------------- */

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}

a:hover,
a:focus-visible {
	color: var(--color-accent-soft);
}

.underline-link {
	position: relative;
	display: inline-block;
	color: var(--color-white);
	padding-bottom: 0.15em;
}

.underline-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--color-accent);
	transform: scaleX(0.6);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

.underline-link:hover::after,
.underline-link:focus-visible::after {
	transform: scaleX(1);
}

/* --- Lists --------------------------------------------------------------- */

ul, ol {
	margin: 0 0 var(--sp-4) var(--sp-5);
	padding: 0;
}

li {
	margin-bottom: var(--sp-2);
}

ul.unstyled,
ol.unstyled {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

/* --- Blockquote ---------------------------------------------------------- */

blockquote {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-style: italic;
	line-height: var(--lh-snug);
	color: var(--color-white);
	border-left: 2px solid var(--color-accent);
	margin: var(--sp-6) 0;
	padding: var(--sp-2) var(--sp-5);
	quotes: '\201C' '\201D' '\2018' '\2019';
}

blockquote p::before { content: open-quote; color: var(--color-accent); }
blockquote p::after  { content: close-quote; color: var(--color-accent); }

blockquote cite {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	color: var(--color-text-muted);
	margin-top: var(--sp-3);
}

/* --- Code ---------------------------------------------------------------- */

code, kbd, samp {
	font-family: var(--font-mono);
	font-size: 0.92em;
	background: var(--color-surface);
	color: var(--color-accent);
	padding: 0.1em 0.4em;
	border-radius: var(--radius-sm);
}

pre {
	background: var(--color-surface);
	color: var(--color-text);
	padding: var(--sp-4);
	border-radius: var(--radius-md);
	overflow-x: auto;
	border: 1px solid var(--color-border);
}

pre code {
	background: none;
	padding: 0;
	color: inherit;
}

/* --- Horizontal Rule ----------------------------------------------------- */

hr {
	border: none;
	height: 1px;
	background: var(--color-border);
	margin: var(--sp-7) 0;
}

.hr-accent {
	width: 60px;
	height: 2px;
	background: var(--color-accent);
	margin: var(--sp-5) 0;
	border: none;
}

/* --- Selection ----------------------------------------------------------- */

::selection {
	background: var(--color-accent);
	color: var(--color-bg);
}

/* --- Editor styles ------------------------------------------------------- */

.entry-content > * + * {
	margin-top: var(--sp-5);
}

.entry-content h2 { margin-top: var(--sp-7); }
.entry-content h3 { margin-top: var(--sp-6); }

.entry-content figure {
	margin: var(--sp-6) 0;
}

.entry-content figcaption {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--sp-2);
}