/* =====================================================================
   CADENCE · components
   style.css holds the token system and the base layer. This file holds
   everything composed from it. Nothing here introduces a colour, a font
   size or a section rhythm of its own — if a value is not derived from
   the five numbers in style.css, it is a bug.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */

.site-head {
	position: sticky;
	top: 0;
	z-index: 60;
	background: color-mix(in oklab, var(--bg) 78%, transparent);
	backdrop-filter: blur(14px) saturate(1.5);
	-webkit-backdrop-filter: blur(14px) saturate(1.5);
	border-bottom: 1px solid transparent;
	transition: border-color 300ms var(--ease), background 300ms var(--ease);
}
.site-head.stuck { border-bottom-color: var(--hair); }

.hd {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.6vw, 40px);
	height: calc(var(--sp) * 4.6);
}

.mark {
	display: inline-flex;
	align-items: baseline;
	gap: 0.42em;
	font-family: var(--ff-disp);
	font-weight: 700;
	font-size: var(--s1);
	letter-spacing: -0.045em;
	line-height: 1;
	margin-right: auto;
}
.mark__dot {
	width: 0.44em; height: 0.44em;
	border-radius: 50%;
	background: var(--acc);
	transform: translateY(-0.06em);
}
.mark__sub {
	font-family: var(--ff-mono);
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dim);
	font-weight: 500;
	align-self: center;
	padding-left: 0.55em;
	border-left: 1px solid var(--hair);
}
@media (max-width: 660px) { .mark__sub { display: none; } }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav a {
	font-size: var(--s-1);
	font-weight: 500;
	color: var(--ink-70);
	position: relative;
	padding-block: 4px;
	transition: color 220ms var(--ease);
}
.nav a::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: var(--acc);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 340ms var(--ease-out);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after,
.nav .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }
.nav .current-menu-item > a { color: var(--ink); }
@media (max-width: 1000px) { .nav { display: none; } }

.hd__acts { display: flex; align-items: center; gap: 8px; }

.icb {
	width: calc(var(--sp) * 2.35);
	height: calc(var(--sp) * 2.35);
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: var(--rad);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: border-color 220ms var(--ease), color 220ms var(--ease);
}
.icb:hover { border-color: var(--acc); color: var(--acc-ink); }
.icb svg { width: 17px; height: 17px; }
.icb__moon { display: none; }
:root[data-theme="dark"] .icb__sun { display: none; }
:root[data-theme="dark"] .icb__moon { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .icb__sun { display: none; }
	:root:not([data-theme]) .icb__moon { display: block; }
}

.burger { display: none; }
@media (max-width: 1000px) { .burger { display: grid; } }

.drawer {
	position: fixed;
	inset: calc(var(--sp) * 4.6) 0 0;
	background: var(--bg);
	z-index: 55;
	padding: calc(var(--sp) * 2) var(--edge);
	display: grid;
	align-content: start;
	gap: 0;
	transform: translateY(-14px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 280ms;
	list-style: none;
	margin: 0;
	overflow-y: auto;
}
.drawer.open { opacity: 1; transform: none; visibility: visible; }
.drawer a { display: block; }
.drawer a {
	font-family: var(--ff-disp);
	font-weight: var(--disp-wght);
	font-size: var(--s2);
	letter-spacing: -0.03em;
	padding-block: 0.42em;
	border-bottom: 1px solid var(--hair);
}
/* :has() lets the open drawer lock the page itself — no JS body styling */
body:has(.drawer.open) { overflow: hidden; }

/* ---------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */

.hero {
	position: relative;
	padding-block: calc(var(--sp) * 5.5) calc(var(--sp) * 4.5);
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	left: 58%; top: -40vh;
	width: min(150vw, 1600px);
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(closest-side,
		color-mix(in oklab, var(--acc) 26%, transparent),
		color-mix(in oklab, var(--acc-2) 11%, transparent) 50%,
		transparent 72%);
	opacity: calc(0.5 + var(--veil));
	pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero__in {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(30px, 4vw, 74px);
	align-items: end;
}
@media (max-width: 1040px) { .hero__in { grid-template-columns: minmax(0, 1fr); align-items: start; } }

.hero h1 { margin-block: calc(var(--sp) * 0.9) calc(var(--sp) * 1.25); }
.hero h1 em {
	font-family: "Newsreader", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.022em;
	color: var(--acc-ink);
}
.hero__sub { font-size: var(--s0); color: var(--ink-70); max-width: 48ch; margin-bottom: calc(var(--sp) * 1.7); }
.hero__acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------------------------------------------------------------------
   Client strip
   ------------------------------------------------------------------ */

.strip { padding-block: calc(var(--sp) * 2.2); border-block: 1px solid var(--hair); overflow: hidden; }
.strip__in { display: flex; align-items: center; gap: clamp(28px, 5vw, 74px); width: max-content; }
@media (prefers-reduced-motion: no-preference) {
	.strip__in { animation: strip-slide 52s linear infinite; }
	.strip:hover .strip__in { animation-play-state: paused; }
}
@keyframes strip-slide { to { transform: translateX(-50%); } }
.strip__in span {
	font-family: var(--ff-disp);
	font-size: var(--s1);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--dim);
	white-space: nowrap;
	transition: color 220ms var(--ease);
}
.strip__in span:hover { color: var(--acc-ink); }

/* ---------------------------------------------------------------------
   Capabilities — container queries
   ------------------------------------------------------------------ */

.caps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: 1px;
	background: var(--hair);
	border: 1px solid var(--hair);
	border-radius: calc(var(--rad) * 1.7);
	overflow: hidden;
}
.cap {
	container-type: inline-size;
	container-name: cap;
	background: var(--bg);
	padding: calc(var(--sp) * 1.85);
	display: grid;
	gap: calc(var(--sp) * 0.8);
	align-content: start;
	transition: background 300ms var(--ease);
}
.cap:hover { background: var(--sub); }
.cap__n { font-family: var(--ff-mono); font-size: 0.68rem; color: var(--acc); letter-spacing: 0.1em; }
.cap h3 { font-size: var(--s1); }
.cap p { color: var(--ink-70); font-size: var(--s-1); margin: 0; }
.cap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.cap li { font-size: var(--s-1); color: var(--dim); padding-left: 1.05em; position: relative; }
.cap li::before { content: "—"; position: absolute; left: 0; color: var(--acc); }
@container cap (min-width: 400px) {
	.cap { grid-template-columns: auto minmax(0, 1fr); column-gap: calc(var(--sp) * 1.3); }
	.cap__n { grid-row: 1 / span 3; padding-top: 0.4em; }
	.cap ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   Work
   ------------------------------------------------------------------ */

.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: calc(var(--sp) * 1.7); }
.works--wide { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
@media (max-width: 560px) { .works--wide { grid-template-columns: minmax(0, 1fr); } }

.wk {
	container-type: inline-size;
	container-name: wk;
	display: grid;
	gap: calc(var(--sp) * 0.75);
	align-content: start;
	position: relative;
	isolation: isolate;
}
.wk__media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: calc(var(--rad) * 1.7);
	overflow: hidden;
	background: var(--sub);
	border: 1px solid var(--hair);
	margin-bottom: calc(var(--sp) * 0.4);
}
.wk__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform 900ms var(--ease-out), filter 600ms var(--ease); }
/* Duotone: photography is tinted through the accent, so it retargets
   with the palette instead of fighting it. */
.wk__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(152deg,
		color-mix(in oklab, var(--acc) 66%, transparent),
		color-mix(in oklab, var(--acc-2) 40%, transparent));
	mix-blend-mode: color;
	opacity: 0.88;
	transition: opacity 600ms var(--ease);
	pointer-events: none;
}
.wk:hover .wk__media img { transform: scale(1.045); filter: grayscale(0.5) contrast(1.02); }
.wk:hover .wk__media::after { opacity: 0.4; }
.wk__tag {
	position: absolute; left: 12px; top: 12px; z-index: 2;
	font-family: var(--ff-mono);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: calc(var(--rad) * 1.3);
	background: color-mix(in oklab, var(--bg) 86%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--ink);
	border: 1px solid var(--hair);
}
.wk h3 { font-size: var(--s1); }
.wk h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.wk p { color: var(--ink-70); font-size: var(--s-1); margin: 0; }
.wk__meta { display: flex; flex-wrap: wrap; gap: 5px 14px; font-family: var(--ff-mono); font-size: 0.64rem; color: var(--dim); letter-spacing: 0.05em; }
@container wk (min-width: 470px) {
	.wk { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; column-gap: calc(var(--sp) * 1.5); }
	.wk__media { grid-row: 1 / span 4; aspect-ratio: 1 / 1; margin-bottom: 0; }
}

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

.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: calc(var(--sp) * 1.5); }
.fig { display: grid; gap: 6px; padding-top: calc(var(--sp) * 1); border-top: 2px solid var(--acc); align-content: start; }
.fig__n {
	font-family: var(--ff-disp);
	font-size: min(var(--s4), 14vw);
	font-weight: var(--disp-wght);
	font-variation-settings: "wght" var(--disp-wght);
	letter-spacing: -0.045em;
	line-height: 0.96;
	font-variant-numeric: tabular-nums;
}
.fig__n sup { font-size: 0.4em; vertical-align: super; letter-spacing: 0; color: var(--acc); font-weight: 500; }
.fig p { font-size: var(--s-1); color: var(--ink-70); margin: 0; max-width: 26ch; }

/* ---------------------------------------------------------------------
   Method — subgrid
   ------------------------------------------------------------------ */

.steps {
	display: grid;
	grid-template-columns: [n] auto [t] minmax(0, 1fr) [b] minmax(0, 1.3fr);
	column-gap: clamp(16px, 2.6vw, 46px);
}
.step {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
	align-items: start;
	padding-block: calc(var(--sp) * 1.55);
	border-top: 1px solid var(--hair);
}
.step:last-child { border-bottom: 1px solid var(--hair); }
.step__n { grid-column: n; font-family: var(--ff-mono); font-size: 0.72rem; color: var(--acc); letter-spacing: 0.08em; padding-top: 0.55em; }
.step h3 { grid-column: t; font-size: var(--s2); }
.step__b { grid-column: b; color: var(--ink-70); font-size: var(--s-1); }
.step__b ul { list-style: none; margin: 0.85em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.step__b li {
	font-family: var(--ff-mono);
	font-size: 0.64rem;
	letter-spacing: 0.06em;
	padding: 4px 9px;
	border: 1px solid var(--hair);
	border-radius: calc(var(--rad) * 1.3);
	color: var(--dim);
}
@media (max-width: 840px) {
	.steps { grid-template-columns: [n] auto [t] minmax(0, 1fr); }
	.step__b { grid-column: t; margin-top: 0.8em; }
}

/* ---------------------------------------------------------------------
   Testimony
   ------------------------------------------------------------------ */

.says { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: calc(var(--sp) * 1.3); }
.say {
	background: var(--bg);
	border: 1px solid var(--hair);
	border-radius: calc(var(--rad) * 1.9);
	padding: calc(var(--sp) * 1.6);
	display: grid;
	gap: calc(var(--sp) * 1.1);
	align-content: space-between;
	transition: border-color 300ms var(--ease), transform 300ms var(--ease);
}
.say:hover { border-color: var(--acc-line); transform: translateY(-3px); }
.say blockquote {
	margin: 0;
	font-size: var(--s1);
	line-height: 1.34;
	letter-spacing: -0.018em;
	font-family: var(--ff-disp);
	font-weight: 500;
	text-wrap: pretty;
}
.say__who { display: flex; align-items: center; gap: 11px; padding-top: calc(var(--sp) * 0.9); border-top: 1px solid var(--hair); }
.say__av {
	width: 34px; height: 34px; border-radius: 50%; flex: none;
	display: grid; place-items: center;
	background: var(--acc-soft);
	color: var(--acc-ink);
	font-family: var(--ff-mono);
	font-size: 0.68rem;
}
.say__who b { display: block; font-size: var(--s-1); font-weight: 600; }
.say__who span { display: block; font-family: var(--ff-mono); font-size: 0.63rem; color: var(--dim); letter-spacing: 0.04em; }

/* ---------------------------------------------------------------------
   Engagements
   ------------------------------------------------------------------ */

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: calc(var(--sp) * 1.2); }
.tier {
	border: 1px solid var(--line);
	border-radius: calc(var(--rad) * 2);
	padding: calc(var(--sp) * 1.6);
	display: grid;
	gap: calc(var(--sp) * 1);
	align-content: start;
	background: var(--bg);
	position: relative;
	transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.tier:hover { border-color: var(--acc-line); box-shadow: var(--shadow-1); }
.tier--now { border-color: var(--acc); box-shadow: var(--shadow-1); }
.tier--now::before {
	content: attr(data-flag);
	position: absolute; top: -0.75em; left: calc(var(--sp) * 1.6);
	background: var(--acc); color: var(--on-acc);
	font-family: var(--ff-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 4px 9px; border-radius: calc(var(--rad) * 1.3);
}
.tier h3 { font-size: var(--s1); }
.tier__p { font-family: var(--ff-disp); font-size: var(--s3); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; font-weight: var(--disp-wght); }
.tier__p small { font-family: var(--ff-mono); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--dim); display: block; margin-top: 0.6em; text-transform: uppercase; }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: var(--s-1); color: var(--ink-70); }
.tier li { padding-left: 1.4em; position: relative; }
.tier li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 2px; background: var(--acc); }

/* ---------------------------------------------------------------------
   FAQ — native disclosure, animated content box
   ------------------------------------------------------------------ */

.faq details { border-top: 1px solid var(--hair); }
.faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	padding-block: calc(var(--sp) * 1.15);
	font-family: var(--ff-disp);
	font-weight: var(--disp-wght);
	font-size: var(--s1);
	letter-spacing: -0.022em;
	line-height: 1.25;
	transition: color 220ms var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary:hover { color: var(--acc-ink); }
.faq summary i { flex: none; width: 18px; height: 18px; position: relative; }
.faq summary i::before, .faq summary i::after {
	content: "";
	position: absolute; left: 0; right: 0; top: 50%;
	height: 1px; background: currentColor;
	transition: transform 380ms var(--ease-out);
}
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq details[open] summary { color: var(--acc-ink); }
.faq__a { color: var(--ink-70); font-size: var(--s-1); max-width: 64ch; padding-bottom: calc(var(--sp) * 1.4); }

@supports (interpolate-size: allow-keywords) {
	:root { interpolate-size: allow-keywords; }
	.faq details::details-content {
		block-size: 0;
		overflow: clip;
		opacity: 0;
		transition: content-visibility 400ms allow-discrete, block-size 400ms var(--ease-out), opacity 300ms var(--ease);
	}
	.faq details[open]::details-content { block-size: auto; opacity: 1; }
}

/* ---------------------------------------------------------------------
   Journal
   ------------------------------------------------------------------ */

.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: calc(var(--sp) * 1.7); }
.post { display: grid; gap: calc(var(--sp) * 0.6); align-content: start; position: relative; }
.post__media {
	aspect-ratio: 16 / 10;
	border-radius: calc(var(--rad) * 1.6);
	overflow: hidden;
	background: var(--sub);
	border: 1px solid var(--hair);
	position: relative;
	margin-bottom: calc(var(--sp) * 0.35);
}
.post__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform 800ms var(--ease-out), filter 500ms var(--ease); }
.post__media::after { content: ""; position: absolute; inset: 0; background: var(--acc); mix-blend-mode: color; opacity: 0.82; transition: opacity 500ms var(--ease); }
.post:hover .post__media img { transform: scale(1.04); filter: grayscale(0.45); }
.post:hover .post__media::after { opacity: 0.32; }
.post__meta { font-family: var(--ff-mono); font-size: 0.63rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); display: flex; gap: 12px; flex-wrap: wrap; }
.post h3 { font-size: var(--s1); }
.post h3 a::after { content: ""; position: absolute; inset: 0; }
.post p { font-size: var(--s-1); color: var(--ink-70); margin: 0; }

/* ---------------------------------------------------------------------
   Call to action + footer
   ------------------------------------------------------------------ */

.cta { position: relative; overflow: hidden; background: var(--sub); }
.cta::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(72% 130% at 84% 4%, color-mix(in oklab, var(--acc) 22%, transparent), transparent 68%);
	pointer-events: none;
}
.cta__in { position: relative; display: grid; gap: calc(var(--sp) * 1.5); justify-items: start; }
.cta h2 { font-size: min(var(--s5), 11.5vw); }
.cta p { color: var(--ink-70); max-width: 48ch; margin: 0; }
.cta__row { display: flex; flex-wrap: wrap; gap: 12px; }

.site-foot { padding-block: calc(var(--sp) * 3.2) calc(var(--sp) * 2.2); border-top: 1px solid var(--hair); }
.foot { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: calc(var(--sp) * 1.8); }
@media (max-width: 880px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 470px) { .foot { grid-template-columns: minmax(0, 1fr); } }
.foot h4 { font-family: var(--ff-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 500; margin-bottom: 0.95em; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot a { font-size: var(--s-1); color: var(--ink-70); transition: color 200ms var(--ease); }
.foot a:hover { color: var(--acc-ink); }
.foot__blurb { font-size: var(--s-1); color: var(--ink-70); max-width: 36ch; margin-top: 1em; }
.foot__bar {
	margin-top: calc(var(--sp) * 2.6);
	padding-top: calc(var(--sp) * 1.2);
	border-top: 1px solid var(--hair);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
	font-family: var(--ff-mono);
	font-size: 0.63rem;
	letter-spacing: 0.06em;
	color: var(--dim);
}

/* ---------------------------------------------------------------------
   Interior pages
   ------------------------------------------------------------------ */

.phead { padding-block: calc(var(--sp) * 4.6) calc(var(--sp) * 2.4); position: relative; }
.phead h1 { font-size: min(var(--s5), 12vw); margin-block: calc(var(--sp) * 0.8) calc(var(--sp) * 1); }
.phead p { color: var(--ink-70); max-width: 58ch; margin: 0; }

.artmedia { border-radius: calc(var(--rad) * 2); overflow: hidden; border: 1px solid var(--hair); position: relative; background: var(--sub); }
.artmedia img { width: 100%; }
/* A lighter hand than the cards: enough tint to belong to the palette,
   not so much that the photograph stops being a photograph. */
.artmedia::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(158deg,
		color-mix(in oklab, var(--acc) 34%, transparent),
		color-mix(in oklab, var(--acc-2) 20%, transparent));
	mix-blend-mode: color;
	pointer-events: none;
}

.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: calc(var(--sp) * 1.2); padding-block: calc(var(--sp) * 1.5); border-block: 1px solid var(--hair); margin: 0; }
.dl div { display: grid; gap: 5px; align-content: start; }
.dl dt { font-family: var(--ff-mono); font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.dl dd { margin: 0; font-size: var(--s-1); font-weight: 500; }

.pager { display: flex; justify-content: space-between; gap: var(--gap); padding-top: calc(var(--sp) * 1.8); border-top: 1px solid var(--hair); margin-top: calc(var(--sp) * 2.6); }
.pager a { display: grid; gap: 5px; max-width: 46%; align-content: start; }
.pager a:last-child { text-align: right; }
.pager span { font-family: var(--ff-mono); font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.pager b { font-family: var(--ff-disp); font-size: var(--s1); font-weight: var(--disp-wght); letter-spacing: -0.022em; line-height: 1.2; }
.pager a:hover b { color: var(--acc-ink); }

.searchform { display: flex; gap: 8px; max-width: 480px; }
.searchform input[type="search"] {
	flex: 1; min-width: 0;
	padding: calc(var(--sp) * 0.72) calc(var(--sp) * 1);
	border: 1px solid var(--line);
	border-radius: var(--rad);
	background: var(--bg);
	color: var(--ink);
	font-family: inherit;
	font-size: var(--s-1);
}
.searchform input[type="search"]:focus { border-color: var(--acc); outline: none; }

.pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: calc(var(--sp) * 2.6); }
.pagination .page-numbers {
	min-width: 38px; height: 38px;
	display: grid; place-items: center;
	padding-inline: 10px;
	border: 1px solid var(--line);
	border-radius: var(--rad);
	font-family: var(--ff-mono);
	font-size: 0.72rem;
	color: var(--ink-70);
	transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--acc); color: var(--acc-ink); }
.pagination .current { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.notfound { display: grid; gap: calc(var(--sp) * 1.4); justify-items: start; }

/* Cross-document transitions: interior pages arrive rather than blink */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) { animation: vt-out 200ms var(--ease) both; }
	::view-transition-new(root) { animation: vt-in 380ms var(--ease-out) both; }
	@keyframes vt-out { to { opacity: 0; } }
	@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
}

/* WordPress housekeeping */
.alignleft { float: left; margin: 0 1.4em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.4em; }
.aligncenter { margin-inline: auto; display: block; }
.wp-caption-text { font-family: var(--ff-mono); font-size: var(--s-2); color: var(--dim); }
.sticky, .gallery-caption, .bypostauthor { display: block; }