/* ==========================================================================
   Quire — editorial atelier theme.
   Warm paper, ink, one clay accent. No glass, no glow, no neon: the other
   four themes in this line already own that territory. Sharp edges (0
   radius throughout), hairline rules instead of thick borders, and a
   serif/sans/mono type trio nobody else in the portfolio uses yet.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root {
	/* ── Paper / ink — warm, not pure neutral. A true-gray or true-black
	   here would read as "app UI"; the whole point is that it reads as
	   printed stock and set type instead. ── */
	--paper:      oklch(96.5% 0.012 80);
	--paper-soft: oklch(93%   0.016 75);
	--paper-deep: oklch(89%   0.02  72);
	--ink:        oklch(19%   0.014 55);
	--ink-soft:   oklch(34%   0.016 55);
	--ink-dim:    oklch(52%   0.016 60);
	--line:       oklch(60%   0.02  65 / .35);
	--line-strong: oklch(19%  0.014 55 / .7);

	/* ── The one accent. Used for exactly three things: links on hover,
	   the index numerals, and small status marks. Never a background
	   fill of more than a few px (a swatch, an underline) — spending it
	   on anything larger would start to read as "loud," which is the one
	   thing this theme is deliberately not. ── */
	--clay:      oklch(56% 0.145 40);
	--clay-soft: oklch(88% 0.05 45);
	--clay-glow: oklch(56% 0.145 40 / .18);

	--display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
	--body-f:  'Work Sans', -apple-system, 'Segoe UI', sans-serif;
	--mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

	--radius: 0px;
	--lw: 1px;
	--lw-2: 1.5px;
	--ease: cubic-bezier(.16,1,.3,1);
	--container: 1400px;
	--gutter: clamp(20px, 4vw, 56px);
}

html, body { background: var(--paper); color: var(--ink); }
body {
	margin: 0;
	font-family: var(--body-f);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	font-optical-sizing: auto; /* Fraunces' opsz axis: display sizes pull the
		high-contrast display cut, body-sized italics pull the calmer text
		cut — automatically, from the one variable-font file. */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ── Static grain — a very fine, fixed noise overlay for tactile "paper"
   quality everywhere, independent of the WebGL grain reserved for
   photography (quire-grain.js). Pure CSS/SVG, no image asset, no JS. ── */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 2000;
	pointer-events: none;
	opacity: .035;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Type scale ── */
h1, h2, h3, h4, .display {
	font-family: var(--display);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.08;
	margin: 0;
	color: var(--ink);
}
.eyebrow {
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink-dim);
}
.lede {
	font-size: clamp(1.05rem, 1.3vw, 1.25rem);
	color: var(--ink-soft);
	max-width: 52ch;
}
blockquote {
	font-family: var(--display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.6rem, 3.4vw, 2.6rem);
	line-height: 1.35;
	color: var(--ink);
	margin: 0;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ── Hairline rule utility — the print-page equivalent of Klaxon's thick
   glass borders: a single 1px line, never more. ── */
.hr { border: none; border-top: var(--lw) solid var(--line-strong); margin: 0; }

/* ── Skip link ── */
.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;
}
.skip-link.screen-reader-text:focus {
	background: var(--ink); color: var(--paper);
	clip: auto; clip-path: none; height: auto; width: auto;
	padding: 14px 20px; left: var(--gutter); top: 14px;
	z-index: 2100; font-family: var(--mono); font-size: .85rem;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.site-head {
	position: sticky; top: 0; z-index: 500;
	background: color-mix(in oklch, var(--paper) 92%, transparent);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	border-bottom: var(--lw) solid var(--line-strong);
}
.site-head__bar { display: flex; align-items: center; justify-content: space-between; padding-block: 20px; gap: 24px; }
.brand { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.5rem; color: var(--ink); }
.nav-desktop { display: flex; align-items: center; gap: 36px; }
.nav__list { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; }
.nav__list a, .nav__contact {
	font-family: var(--mono); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
	position: relative; padding-bottom: 3px;
}
.nav__list a::after, .nav__contact::after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--lw);
	background: var(--clay); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.nav__list a:hover::after, .nav__list a:focus-visible::after,
.nav__contact:hover::after, .nav__contact:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.burger { display: none; width: 40px; height: 40px; border: var(--lw) solid var(--line-strong); background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { width: 18px; height: var(--lw-2); background: var(--ink); display: block; }

/* ── Mobile popover menu ── */
#qr-mobile-menu {
	position: fixed; inset: 0; margin: 0; border: none; width: 100%; height: 100%; max-width: none; max-height: none;
	background: var(--paper); color: var(--ink);
	padding: 32px var(--gutter);
	flex-direction: column; justify-content: center;
}
/* `display` must ONLY be set here, scoped to :popover-open — a bare
   `display: flex` on the base selector above would override the popover
   UA stylesheet's default `display: none`, leaving the menu permanently
   visible (fixed, inset: 0) on top of every page regardless of open state. */
#qr-mobile-menu:popover-open { display: flex; }
.mmenu__close { position: absolute; top: 24px; right: var(--gutter); width: 44px; height: 44px; border: var(--lw) solid var(--line-strong); background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; }
#qr-mobile-menu nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
#qr-mobile-menu nav a { font-family: var(--display); font-size: clamp(2rem, 8vw, 3rem); border-bottom: var(--lw) solid var(--line); padding-block: 12px; display: block; }
@media (min-width: 901px) { .burger { display: none !important; } }
@media (max-width: 900px) {
	.nav-desktop { display: none; }
	.burger { display: flex; }
}

/* ── Contact dialog ── */
#qr-contact {
	border: var(--lw) solid var(--line-strong);
	border-radius: 0;
	width: min(520px, calc(100vw - 48px));
	padding: 0;
	background: var(--paper);
	color: var(--ink);
	opacity: 0; transform: translateY(10px);
	transition: opacity .3s var(--ease), transform .3s var(--ease), overlay .3s allow-discrete, display .3s allow-discrete;
}
#qr-contact[open] { opacity: 1; transform: translateY(0); }
@starting-style { #qr-contact[open] { opacity: 0; transform: translateY(10px); } }
#qr-contact::backdrop { background: rgb(25 22 20 / .4); }
.dlg__head { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: var(--lw) solid var(--line-strong); }
.dlg__body { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.dlg__body input, .dlg__body textarea {
	border: none; border-bottom: var(--lw) solid var(--line-strong);
	border-radius: 0; padding: 10px 2px; background: transparent; color: var(--ink); font-family: var(--body-f);
}
.dlg__body input:focus, .dlg__body textarea:focus { outline: none; border-bottom-color: var(--clay); }
.dlg__body input::placeholder, .dlg__body textarea::placeholder { color: var(--ink-dim); }
.dlg__close { border: var(--lw) solid var(--line-strong); background: none; width: 36px; height: 36px; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.dlg__status { font-family: var(--mono); font-size: .8rem; min-height: 1.2em; margin: 0; }
.dlg__body.is-sent .dlg__status { color: var(--clay); }
.dlg__body.is-error .dlg__status { color: var(--ink); text-decoration: underline wavy var(--clay); }
@media (prefers-reduced-motion: reduce) { #qr-contact { transition: none; } }

/* ── Buttons ── */
.btn {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--mono); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
	padding: 14px 26px;
	border: var(--lw-2) solid var(--ink);
	background: transparent; color: var(--ink);
	cursor: pointer;
	transition: background .3s var(--ease), color .3s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); }
.btn--clay { border-color: var(--clay); color: var(--clay); }
.btn--clay:hover, .btn--clay:focus-visible { background: var(--clay); color: var(--paper); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-foot { border-top: var(--lw) solid var(--line-strong); padding-block: clamp(56px, 8vw, 96px) 32px; margin-top: clamp(60px, 10vw, 120px); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: var(--lw) solid var(--line); }
.foot-brand { font-family: var(--display); font-style: italic; font-size: 1.5rem; }
.foot-col h4 { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); margin-bottom: 16px; font-weight: 400; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-col a:hover { color: var(--clay); }
.colophon { font-family: var(--mono); font-size: .76rem; color: var(--ink-dim); margin-top: 28px; }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 20px; font-family: var(--mono); font-size: .76rem; color: var(--ink-dim); }
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ── Generic page sections ───────────────────────────────────────────── */
.page-hero { padding-block: clamp(56px, 9vw, 100px) clamp(32px, 5vw, 56px); border-bottom: var(--lw) solid var(--line-strong); }
.page-hero .eyebrow { margin-bottom: 18px; }
.section { padding-block: clamp(48px, 8vw, 96px); border-bottom: var(--lw) solid var(--line-strong); }
.section:last-of-type { border-bottom: none; }

/* ── Index list — the magazine table-of-contents pattern used for the
   work archive, the journal, and any post listing. A numbered hairline
   list, not a card grid: restraint over density. ── */
.index-list { display: flex; flex-direction: column; }
.index-row {
	display: grid;
	grid-template-columns: 3.2rem 1fr auto auto;
	align-items: baseline;
	gap: 20px;
	padding-block: 26px;
	border-bottom: var(--lw) solid var(--line-strong);
	transition: padding-inline-start .3s var(--ease);
}
.index-row:first-child { border-top: var(--lw) solid var(--line-strong); }
.index-row__no { font-family: var(--mono); font-size: .82rem; color: var(--clay); }
.index-row__title { font-family: var(--display); font-size: clamp(1.3rem, 3vw, 2.1rem); line-height: 1.2; }
.index-row__meta { font-family: var(--mono); font-size: .78rem; color: var(--ink-dim); white-space: nowrap; }
.index-row__arrow { font-size: 1.2rem; opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.index-row:hover, .index-row:focus-visible {
	padding-inline-start: 14px;
}
.index-row:hover .index-row__arrow, .index-row:focus-visible .index-row__arrow { opacity: 1; transform: translateX(0); }
.index-row:hover .index-row__title, .index-row:focus-visible .index-row__title { color: var(--clay); }
@media (max-width: 640px) {
	.index-row { grid-template-columns: 2.4rem 1fr; row-gap: 6px; }
	.index-row__meta { grid-column: 2; }
	.index-row__arrow { display: none; }
}

/* ── Work index thumbnail — the one place a small photo sits directly in
   the text list rather than only appearing via the magnetic hover-preview.
   Muted (grayscale at rest, full colour on hover/focus) so it reads as a
   quiet index marker rather than a card-grid thumbnail; its real job is
   supplying a shared view-transition-name so the browser morphs it into
   the case-study hero image on navigation (see single.php) instead of a
   plain cross-fade — a native cross-document View Transition, no JS. ── */
.index-row--photo { grid-template-columns: 3.2rem 3.6rem 1fr auto auto; }
.index-row__thumb {
	width: 3.6rem; aspect-ratio: 4 / 5; overflow: hidden;
	filter: grayscale(1) contrast(1.05);
	transition: filter .4s var(--ease);
}
.index-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.index-row:hover .index-row__thumb, .index-row:focus-visible .index-row__thumb { filter: grayscale(0); }
@media (max-width: 640px) {
	.index-row--photo { grid-template-columns: 2.4rem 2.8rem 1fr; }
	.index-row--photo .index-row__meta { grid-column: 3; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(48px, 7vw, 88px) clamp(56px, 8vw, 100px); }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__title { font-size: clamp(2.6rem, 5.2vw, 4.6rem); margin-block: 22px 26px; max-width: 14ch; }
.hero__sub { margin-bottom: 30px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__plate-cap { display: block; margin-top: 14px; font-family: var(--mono); font-size: .76rem; color: var(--ink-dim); }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

/* ── Photo plate — figure + canvas pair for the WebGL grain/distortion
   layer (quire-grain.js). The <img> is always present and always the thing
   that's visible/printable if the canvas never initialises. ── */
.qr-plate { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-deep); }
.qr-plate img { width: 100%; height: 100%; object-fit: cover; }
.qr-plate canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s var(--ease); }
.qr-plate.is-grain-ready img { visibility: hidden; }
.qr-plate.is-grain-ready canvas { opacity: 1; }

/* ── Ticker — a quiet, single-line collaborator credit; the restrained
   counterpart to the other themes' loud marquees. Mono, no icons, no
   bold display type. ── */
.ticker { border-block: var(--lw) solid var(--line-strong); padding-block: 14px; overflow: hidden; white-space: nowrap; }
.ticker__track { display: inline-flex; gap: 48px; animation: qr-ticker 34s linear infinite; }
.ticker__item { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); }
@keyframes qr-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ── Pull-quote — a full-bleed tonal band (the existing --paper-deep token,
   no new color introduced) so this section reads as a distinct beat in the
   page's rhythm instead of one more identical cream panel between two
   others. ── */
.quote-section { text-align: center; background: var(--paper-deep); }
.mass-quote { max-width: 26ch; margin-inline: auto; }
.mass-quote span { transition: opacity .25s linear, filter .25s linear; }
.quote-attr { font-family: var(--mono); font-size: .8rem; color: var(--ink-dim); margin-top: 22px; }

/* ── Approach list — each row carries a large pale serif numeral as a
   background watermark (the page's one other beat of visual texture in an
   otherwise all-text section), independent of the small mono index tag
   used for consistency with the rest of the site's numbering language. ── */
.approach-list { display: flex; flex-direction: column; }
.approach-row {
	position: relative;
	display: grid; grid-template-columns: 3.2rem 1fr 1.4fr; gap: 32px; align-items: baseline;
	padding-block: 40px; border-bottom: var(--lw) solid var(--line-strong);
	overflow: clip;
}
.approach-row:first-child { border-top: var(--lw) solid var(--line-strong); }
.approach-row__no { font-family: var(--mono); font-size: .82rem; color: var(--clay); position: relative; z-index: 1; }
.approach-row__title { font-size: clamp(1.5rem, 3vw, 2.2rem); position: relative; z-index: 1; }
.approach-row__desc { position: relative; z-index: 1; }
.approach-row::before {
	content: attr(data-watermark);
	position: absolute;
	right: -0.06em;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--display);
	font-size: clamp(6rem, 14vw, 11rem);
	line-height: 1;
	color: var(--ink);
	opacity: .045;
	pointer-events: none;
	z-index: 0;
}
@media (max-width: 780px) {
	.approach-row { grid-template-columns: 2.4rem 1fr; }
	.approach-row__desc { grid-column: 2; margin-top: 8px; }
	.approach-row::before { display: none; }
}

/* ── Plates grid — two rows of two half-width plates. (An earlier draft
   only spanned the first pair to 2 columns each, leaving the second row's
   pair at their 1fr default — half the row's width, half left as bare
   paper. Every plate spans 2 columns now so both rows fill edge to edge.) ── */
.plates-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.plates-grid .qr-plate { grid-column: span 2; aspect-ratio: 16/10; }
.plates-grid .qr-plate--tall { aspect-ratio: 4/5; }
@media (max-width: 900px) { .plates-grid { grid-template-columns: 1fr 1fr; } .plates-grid .qr-plate { grid-column: span 2; } }
@media (max-width: 560px) {
	.plates-grid { grid-template-columns: 1fr; }
	.plates-grid .qr-plate { grid-column: span 1 !important; }
}

/* ── Plate unveil — the gallery's own reveal treatment (a print plate being
   uncovered, image settling from a slight zoom) rather than the generic
   opacity/translateY fade used everywhere else ([data-reveal]).

   This used to be driven by animation-timeline: view(), tied continuously
   to scroll position. That's wrong for a photo grid: the reveal range
   (entry 0%–cover 40%) takes long enough, relative to normal scroll speed,
   that images sat visibly clipped mid-frame for much of a normal downward
   scroll — and because a view()-timeline never "completes and stays," any
   upward scroll back past the trigger point re-clipped an already-seen
   image. Both read as the grid being broken, not as a considered reveal.

   Fixed by triggering off the SAME one-time `.is-in` class the rest of the
   site's reveals use (Motion.inView / IntersectionObserver, unobserved
   after first fire) — but the clip-path must live on the img/canvas
   CHILDREN, never on the figure that itself carries [data-reveal]. Putting
   clip-path on the observed element self-defeats the observer: browsers
   compute IntersectionObserver's ratio against the target's own clipped
   rect, so a figure clipped to 0% visible height always measures 0%
   intersection — its own hidden-state styling prevents it from ever being
   seen as "visible enough" to trigger the reveal that would un-hide it.
   Confirmed directly (raw IntersectionObserver on the clipped figure
   reported isIntersecting:true but intersectionRatio:0 regardless of
   scroll position; removing clip-path on the same element immediately
   read ratio:1). Observing an unclipped figure and clipping only its
   image/canvas children sidesteps the deadlock entirely. */
.qr-plate--reveal[data-reveal] { opacity: 1; transform: none; transition: none; }
.qr-plate--reveal img, .qr-plate--reveal canvas {
	clip-path: inset(0 0 100% 0);
	transform: scale(1.12);
	transition: clip-path .9s var(--ease), transform .9s var(--ease);
}
.qr-plate--reveal.is-in img, .qr-plate--reveal.is-in canvas {
	clip-path: inset(0 0 0% 0);
	transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
	.qr-plate--reveal img, .qr-plate--reveal canvas { transition: none; }
}

/* ── CTA band ── */
/* text-align:center on the section does nothing for the h2's own box
   position (text-align only centers inline content within a block, not
   the block itself) — the h2 needs its own centering. This previously read
   `margin-inline: auto 32px` (auto-left, fixed-32px-right), which pins the
   heading against the right edge instead of centering it: on a wide
   viewport that reads as "heading and button huddled in one corner of a
   mostly-empty band" rather than a deliberately generous, centered CTA. ── */
.cta-band { text-align: center; background: var(--paper-deep); padding-block: clamp(64px, 10vw, 120px); }
.cta-band h2 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 18ch; margin-inline: auto; margin-bottom: 32px; }
.cta-band .btn { margin-top: 8px; }

/* ── Scroll reveal (quire-fx.js) ──────────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: translateY(0); }
html.qr-motion-on [data-reveal] { transition: none; }
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── Magnetic image preview (quire-fx.js) ────────────────────────────── */
.qr-magnetic-preview {
	position: fixed; top: 0; left: 0; z-index: 700;
	width: 240px; aspect-ratio: 4 / 5;
	pointer-events: none;
	opacity: 0; transform: scale(.92);
	transition: opacity .3s var(--ease), transform .3s var(--ease);
	overflow: hidden;
	box-shadow: 0 24px 54px rgba(30, 24, 18, .28);
}
.qr-magnetic-preview.is-visible { opacity: 1; transform: scale(1); }
.qr-magnetic-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Mass pull-quote — scroll-driven per-word focus resolve. Falls back to
   the plain block-level [data-reveal] fade (declared above) wherever
   view()-timelines aren't supported or motion is reduced. ── */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mass-quote--split span {
			display: inline-block;
			opacity: .3;
			filter: blur(3px);
			animation: qr-mass-resolve linear both;
			animation-timeline: view();
			animation-range: entry 15% cover 45%;
		}
		@keyframes qr-mass-resolve { to { opacity: 1; filter: blur(0); } }
	}
}

/* ── Studio stat row ──────────────────────────────────────────────────── */
.stat-row { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); }
.stat-row__item { display: flex; flex-direction: column; gap: 6px; }
.stat-row__num { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--clay); }
.stat-row__label { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); }

/* ── Prose (single/page content) ──────────────────────────────────────── */
.prose { max-width: 68ch; font-size: 1.08rem; line-height: 1.7; color: var(--ink); }
.prose > * + * { margin-top: 1.3em; }
.prose h2 { font-size: 1.7rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.6em; }
.prose a { text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose strong { font-weight: 600; }
.prose blockquote { border-left: var(--lw-2) solid var(--clay); padding-left: 22px; font-family: var(--display); font-style: italic; color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose img { border: var(--lw) solid var(--line-strong); }
.prose code { font-family: var(--mono); background: var(--paper-soft); color: var(--clay); padding: .15em .4em; }

/* ── Single post media/tags ───────────────────────────────────────────── */
.single__media { margin-block: 32px; }
.single__tags { margin-top: 32px; display: flex; gap: 10px; flex-wrap: wrap; }
.single__tags a { font-family: var(--mono); font-size: .76rem; text-transform: uppercase; padding: 5px 12px; border: var(--lw) solid var(--line-strong); color: var(--ink-soft); }
.single__tags a:hover { border-color: var(--clay); color: var(--clay); }
.page-links { font-family: var(--mono); font-size: .85rem; color: var(--ink-soft); }

/* ── Pagination ───────────────────────────────────────────────────────── */
.pager, .navigation.pagination { display: flex; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.pager .page-numbers, .navigation.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding-inline: 10px;
	border: var(--lw) solid var(--line-strong);
	font-family: var(--mono); font-weight: 500; font-size: .85rem;
	color: var(--ink-soft);
}
.pager .page-numbers.current, .navigation.pagination .page-numbers.current { border-color: var(--clay); color: var(--clay); }

/* ── Comments ─────────────────────────────────────────────────────────── */
.comments { margin-top: 24px; }
.comments__title { font-family: var(--display); font-size: 1.6rem; margin-bottom: 24px; color: var(--ink); }
.comment-list { display: flex; flex-direction: column; gap: 20px; list-style: none; padding: 0; }
.comment-list .children { margin-top: 20px; padding-left: 28px; border-left: var(--lw) solid var(--line); list-style: none; }
.comment-list article { padding: 20px 0; border-bottom: var(--lw) solid var(--line-strong); }
.comment-form p { margin-top: 14px; }
.comment-form input, .comment-form textarea {
	width: 100%; border: none; border-bottom: var(--lw) solid var(--line-strong); padding: 10px 2px; background: transparent; color: var(--ink); font-family: var(--body-f);
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-bottom-color: var(--clay); }
.comment-form label { font-family: var(--mono); font-size: .76rem; text-transform: uppercase; display: block; margin-bottom: 6px; color: var(--ink-dim); }

/* ── Search form ──────────────────────────────────────────────────────── */
.search-form { display: flex; border-bottom: var(--lw-2) solid var(--ink); }
.search-form__input { flex: 1; border: none; padding: 12px 4px; background: transparent; color: var(--ink); font-family: var(--mono); }
.search-form__input:focus { outline: none; }
.search-form__input::placeholder { color: var(--ink-dim); }
.search-form__submit { border: none; background: none; color: var(--clay); padding: 0 8px; cursor: pointer; font-size: 1.1rem; }

/* ── Core WP content classes — captions, alignment, sticky posts. These
   only ever appear inside post content the_content() outputs, so they're
   scoped to .prose rather than declared globally. ── */
.prose .wp-caption { max-width: 100%; margin-bottom: 1.3em; }
.prose .wp-caption img { border: var(--lw) solid var(--line-strong); }
.prose .wp-caption-text {
	font-family: var(--mono); font-size: .78rem; color: var(--ink-dim);
	text-align: center; margin-top: 8px;
}
.prose .gallery-caption { font-family: var(--mono); font-size: .78rem; color: var(--ink-dim); text-align: center; }
.prose .alignleft { float: left; margin: 0 24px 12px 0; }
.prose .alignright { float: right; margin: 0 0 12px 24px; }
.prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.prose .bypostauthor { border-left: var(--lw-2) solid var(--clay); padding-left: 14px; }
.index-row.sticky .index-row__no { color: var(--ink); }
.index-row.sticky .index-row__no::after { content: '★'; margin-left: 4px; color: var(--clay); font-size: .7em; }

/* --- Section dropdown (nav) — theme-agnostic, added --- */
li:has(> .sub-menu){ position: relative; }
.sub-menu{ position:absolute; top:100%; left:0; min-width:210px; margin:12px 0 0; padding:8px; list-style:none; background:rgba(18,18,24,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14); border-radius:12px; box-shadow:0 26px 60px -26px rgba(0,0,0,.75); display:none; z-index:500; }
li:hover > .sub-menu, li:focus-within > .sub-menu{ display:block; }
.sub-menu li{ margin:0; padding:0; list-style:none; }
.sub-menu a{ display:block; padding:.55em .85em; border-radius:7px; color:#f2f2f5 !important; white-space:nowrap; font-size:.9rem; text-transform:none !important; letter-spacing:normal !important; opacity:1 !important; }
.sub-menu a::before, .sub-menu a::after{ display:none !important; content:none !important; }
.sub-menu a:hover{ background:rgba(255,255,255,.13); color:#fff !important; }