/* ==========================================================================
   The Panel — type system
   ========================================================================== */

@font-face {
	font-family: "Space Grotesk";
	src: url("../../fonts/space-grotesk-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Manrope";
	src: url("../../fonts/manrope-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Manrope";
	src: url("../../fonts/manrope-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("../../fonts/jetbrains-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("../../fonts/jetbrains-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

body.panel-theme {
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--ink-soft);
	background: var(--page);
}

body.panel-theme h1,
body.panel-theme h2,
body.panel-theme h3,
body.panel-theme h4,
body.panel-theme .panel-display {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ink);
	line-height: 1.1;
}

body.panel-theme h1 {
	font-size: 46px;
	line-height: 1.05;
	text-wrap: balance;
}

body.panel-theme h2 {
	font-size: 32px;
	line-height: 1.15;
	margin-top: var(--sp-7);
}

body.panel-theme h3 {
	font-size: 21px;
	line-height: 1.2;
}

body.panel-theme p {
	font-size: 18px;
	line-height: 1.7;
	max-width: 70ch;
	text-wrap: pretty;
}

body.panel-theme .panel-meta,
body.panel-theme .panel-eyebrow,
body.panel-theme .panel-mono {
	font-family: var(--font-mono);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 10.5px;
	letter-spacing: 0.13em;
	color: var(--muted);
}

body.panel-theme .panel-nav,
body.panel-theme .panel-btn {
	font-family: var(--font-body);
	font-weight: 500;
}

@media (max-width: 782px) {
	body.panel-theme h1 { font-size: 28px; }
	body.panel-theme h2 { font-size: 24px; margin-top: var(--sp-6); }
	body.panel-theme h3 { font-size: 19px; }
	body.panel-theme p { font-size: 16.5px; }
	body.panel-theme .panel-meta,
	body.panel-theme .panel-eyebrow,
	body.panel-theme .panel-mono { font-size: 10px; }
}

body.panel-theme blockquote {
	border-left: 2px solid var(--ink);
	background: none;
	padding-left: var(--sp-4);
	margin: var(--sp-5) 0;
	font-style: normal;
}

body.panel-theme .wp-block-image img,
body.panel-theme article img {
	border-radius: var(--radius-card);
	width: 100%;
}

body.panel-theme .wp-block-image figcaption {
	font-family: var(--font-mono);
	text-transform: uppercase;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	color: var(--muted);
	margin-top: var(--sp-2);
}