/* 02-base.css — typography, links, forms, focus, core block styles.
   Also loaded as editor style so the editor matches the front end. */

body {
	font-family: var(--font-body);
	font-size: var(--step-0);
	color: var(--ink);
	background-color: var(--paper);
	position: relative;
	overflow-x: hidden;
}

/* Paper grain overlay. One of the few "texture" details on the site. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: .04;
	mix-blend-mode: multiply;
	background-image: url('../img/texture-paper.svg');
	background-size: 220px 220px;
}

:root[data-theme="dark"] body::before {
	mix-blend-mode: screen;
}

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

a {
	color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 140ms ease, text-decoration-thickness 140ms ease;
}

a:hover {
	color: var(--ink);
	text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

/* External links get a small glyph via CSS only. */
a[href^="http"]:not([href*="//looseleaf.example"])::after,
a[target="_blank"]::after {
	content: "↗";
	font-size: 0.75em;
	margin-left: 0.15em;
	vertical-align: super;
	text-decoration: none;
}

a.no-ext::after,
.site-footer__social a::after,
.site-footer a[href^="mailto:"]::after {
	content: none;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: var(--ink);
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }
h5, h6 {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 400;
}

p,
li,
dd,
dt {
	text-wrap: pretty;
}

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

.lede {
	font-size: var(--step-1);
	color: var(--ink-soft);
	max-width: 60ch;
}

/* ---------- Mono labels / meta ---------- */

.meta,
.label,
.tag,
.time,
figcaption,
.eyebrow {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	line-height: 1.4;
}

.meta,
.eyebrow {
	text-transform: uppercase;
	color: var(--ink-soft);
}

.num {
	font-variant-numeric: tabular-nums;
}

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

.prose ul,
.prose ol {
	padding-left: 1.3em;
	margin-block: 0 var(--s-4);
}

.prose li {
	margin-block: 0.35em;
}

/* ---------- Blockquotes / pull quotes ---------- */

blockquote {
	margin: var(--s-5) 0;
	padding-left: var(--s-4);
	border-left: 2px solid var(--accent);
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: 1.3;
	color: var(--ink);
	max-width: 65ch;
}

blockquote cite {
	display: block;
	margin-top: var(--s-3);
	font-family: var(--font-mono);
	font-size: var(--step--1);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
}

.wp-block-pullquote {
	border-top: var(--border);
	border-bottom: var(--border);
	padding: var(--s-5) 0;
	margin: var(--s-6) 0;
	text-align: left;
}

.wp-block-pullquote blockquote {
	border: 0;
	padding: 0;
	margin: 0;
	font-size: var(--step-2);
}

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

code,
kbd,
samp,
pre {
	font-family: var(--font-mono);
	font-size: 0.92em;
}

:not(pre) > code {
	background: var(--paper-2);
	border: var(--border-soft);
	border-radius: var(--radius);
	padding: 0.1em 0.35em;
}

pre {
	background: var(--paper-2);
	border: var(--border);
	border-radius: var(--radius);
	padding: var(--s-4);
	overflow-x: auto;
	line-height: 1.5;
	margin-block: 0 var(--s-4);
	position: relative;
}

pre code {
	background: none;
	border: 0;
	padding: 0;
}

.code-copy {
	position: absolute;
	top: var(--s-2);
	right: var(--s-2);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.3em 0.6em;
	border: var(--border-soft);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink-soft);
}

.code-copy:hover {
	color: var(--ink);
	border-color: var(--rule);
}

/* ---------- Figures ---------- */

figure {
	margin: var(--s-5) 0 var(--s-4);
}

figure img {
	border: var(--border);
	border-radius: var(--radius);
}

figcaption {
	margin-top: var(--s-2);
	color: var(--ink-faint);
	text-transform: none;
	letter-spacing: 0.02em;
}

/* ---------- Tables ---------- */

.wp-block-table,
.prose table {
	overflow-x: auto;
	display: block;
	margin-block: 0 var(--s-5);
}

.prose table {
	display: table;
}

table th,
table td {
	text-align: left;
	padding: var(--s-3) var(--s-3);
	border-bottom: var(--border-soft);
	vertical-align: top;
}

table th {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 400;
	border-bottom: var(--border);
}

/* ---------- Forms ---------- */

label,
.form-field label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--s-2);
	color: var(--ink-soft);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
	width: 100%;
	background: var(--paper);
	color: var(--ink);
	border: var(--border);
	border-radius: var(--radius);
	padding: 0.7em 0.8em;
	min-height: 44px;
	transition: background-color 140ms ease, border-color 140ms ease;
}

input:focus,
select:focus,
textarea:focus {
	background: var(--paper-2);
	border-color: var(--accent);
	outline: none;
	box-shadow: none;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 1px;
}

textarea {
	min-height: 10rem;
	resize: vertical;
}

::placeholder {
	color: var(--ink-faint);
}

.form-field {
	margin-bottom: var(--s-4);
}

.form-hint {
	font-size: var(--step--1);
	color: var(--ink-soft);
	margin-top: var(--s-1);
}

.form-field--invalid input,
.form-field--invalid textarea,
.form-field--invalid select {
	border-color: var(--error);
	background: color-mix(in srgb, var(--error) 6%, var(--paper));
}

.field-error {
	display: block;
	color: var(--error);
	font-size: var(--step--1);
	margin-top: var(--s-1);
}

/* ---------- Details / summary (FAQ) ---------- */

details {
	border-bottom: var(--border-soft);
	padding: var(--s-3) 0;
}

summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-4);
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 600;
	padding-block: var(--s-2);
}

summary::-webkit-details-marker {
	display: none;
}

summary::after {
	content: "+";
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: var(--step-1);
	color: var(--accent);
	flex: none;
}

details[open] summary::after {
	content: "–";
}

details > :not(summary) {
	margin-top: var(--s-3);
	max-width: 65ch;
	color: var(--ink-soft);
}

/* ---------- Separator ---------- */

hr,
.wp-block-separator {
	border: 0;
	border-top: var(--border);
	margin-block: var(--s-6);
}

/* ---------- Images ---------- */

.wp-block-image img {
	height: auto;
}

.alignwide {
	margin-inline: auto;
	max-width: 1200px;
}

.alignfull {
	max-width: none;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* ---------- Accessibility helpers ---------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: var(--ink);
	color: var(--paper);
	padding: var(--s-3) var(--s-4);
}

.skip-link:focus {
	left: var(--s-2);
	top: var(--s-2);
}