@layer components {
	/* ---------------------------------------------------------------- header */

	.site-header {
		position: fixed;
		inset: 0 0 auto;
		z-index: 100;
		height: var(--header-h);
		display: flex;
		align-items: center;
		gap: var(--space-m);
		padding-inline: var(--gutter);
		color: var(--ink);
		transition: background var(--dur) var(--ease-out),
			color var(--dur) var(--ease-out),
			border-color var(--dur) var(--ease-out);
		border-bottom: 1px solid transparent;
	}

	/*
	 * Over a full-bleed photograph the header has no plane of its own, so it
	 * switches to light ink and leans on a gradient scrim for contrast.
	 */
	.site-header[data-over-media="true"]:not([data-scrolled="true"]):not([data-menu-open="true"]) {
		color: var(--over-ink);
	}

	.site-header[data-over-media="true"]:not([data-scrolled="true"]):not([data-menu-open="true"])::before {
		content: "";
		position: absolute;
		inset: 0 0 -3rem;
		background: linear-gradient(
			to bottom,
			hsl(var(--over-scrim) / 0.55),
			hsl(var(--over-scrim) / 0)
		);
		pointer-events: none;
		z-index: -1;
	}

	/*
	 * An open menu gives the header a plane of its own, so it never sits dark
	 * over a photograph while the panel beneath it is light.
	 *
	 * The plane is near-opaque: at 80% over a bright photograph the blur let
	 * enough of the picture through that the navigation lost its contrast.
	 *
	 * It lives on a pseudo-element rather than on .site-header itself. A
	 * backdrop-filter makes its element a containing block for fixed-position
	 * descendants — which collapsed the full-screen mobile menu inside the
	 * header the moment the menu set data-menu-open.
	 */
	.site-header::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		opacity: 0;
		/*
		 * Opaque, with no backdrop-filter. At the opacity this needs for the
		 * navigation to stay legible over a bright photograph the blur was
		 * invisible anyway, and it cost a compositing artefact along the
		 * plane's edge.
		 */
		background: var(--bg);
		transition: opacity var(--dur) var(--ease-out);
		pointer-events: none;
	}

	.site-header[data-scrolled="true"]::after,
	.site-header[data-menu-open="true"]::after {
		opacity: 1;
	}

	.site-header[data-scrolled="true"],
	.site-header[data-menu-open="true"] {
		border-bottom-color: var(--line-strong);
	}

	.site-header[data-menu-open="true"] {
		color: var(--ink);
	}

	.site-header[data-menu-open="true"]::before {
		display: none;
	}

	.site-brand {
		font-family: var(--font-display);
		font-size: var(--step-1);
		line-height: 1;
		letter-spacing: -0.01em;
		text-decoration: none;
		margin-right: auto;
		white-space: nowrap;
	}

	.site-nav {
		display: flex;
		align-items: center;
		gap: clamp(var(--space-s), 2vw, var(--space-l));
	}

	.site-nav > ul {
		display: flex;
		align-items: center;
		gap: clamp(var(--space-s), 2vw, var(--space-l));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/*
	 * Small caps with open tracking, and a counter that numbers the sections.
	 * The numeral reads as an index rather than decoration and gives the item
	 * a fixed anchor for the hover line to grow from.
	 */
	.site-nav > ul {
		counter-reset: nav;
	}

	.site-nav > ul a {
		font-size: 0.78rem;
		font-weight: 500;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		text-decoration: none;
		position: relative;
		display: inline-flex;
		align-items: baseline;
		gap: 0.45em;
		padding-block: 0.35rem;
		color: color-mix(in oklab, currentColor 78%, transparent);
		transition: color var(--dur-fast) var(--ease-out);
	}

	.site-nav > ul li a::before {
		counter-increment: nav;
		content: counter(nav, decimal-leading-zero);
		font-size: 0.6em;
		letter-spacing: 0.08em;
		opacity: 0.5;
		transition: opacity var(--dur-fast) var(--ease-out);
	}

	.site-nav > ul a:hover,
	.site-nav .current-menu-item > a,
	.site-nav > ul [aria-current="page"] {
		color: currentColor;
	}

	.site-nav > ul a:hover::before,
	.site-nav .current-menu-item > a::before {
		opacity: 1;
	}

	/* Underline grows from the start edge rather than fading in */
	.site-nav > ul a::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		height: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--dur) var(--ease-out);
	}

	.site-nav > ul a:hover::after,
	.site-nav .current-menu-item > a::after,
	.site-nav > ul [aria-current="page"]::after {
		transform: scaleX(1);
	}

	/* --------------------------------------------------------------- menu button */

	/*
	 * Two bars, not three. Three hairlines at 1px read as a smudge at this
	 * size; two at 2px with rounded caps read as a mark, and they have a
	 * cross to become without a third bar to hide behind it.
	 */
	.nav-toggle {
		display: none;
		width: 2.75rem;
		height: 2.75rem;
		place-items: center;
		border-radius: 50%;
		border: 1px solid color-mix(in oklab, currentColor 28%, transparent);
		/* The bars are absolutely positioned; they need this as their origin. */
		position: relative;
		transition: border-color var(--dur-fast) var(--ease-out),
			background var(--dur-fast) var(--ease-out);
	}

	.nav-toggle:hover {
		border-color: currentColor;
		background: color-mix(in oklab, currentColor 10%, transparent);
	}

	.nav-toggle span {
		display: block;
		width: 1.25rem;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform var(--dur) var(--ease-out);
		transform: translateY(-3px);
	}

	.nav-toggle span::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 1.25rem;
		height: 2px;
		margin-left: -0.625rem;
		border-radius: 2px;
		background: currentColor;
		transform: translateY(2px);
		transition: transform var(--dur) var(--ease-out);
	}

	.nav-toggle[aria-expanded="true"] span {
		transform: translateY(-1px) rotate(45deg);
	}

	.nav-toggle[aria-expanded="true"] span::after {
		transform: translateY(-1px) rotate(-90deg);
	}

	/* The extra panel content is for the mobile sheet only. */
	.nav-extra { display: none; }

	/*
	 * 60rem, not 48. The horizontal nav carried six names and fitted; adding
	 * Wallpapers made seven, and between 768px and about 890px the row ran past
	 * the right edge of the header — twelve pixels of CONTACT cut off at 780,
	 * with only 24px left between the row and the signature. The sheet is the
	 * better answer on a tablet anyway, and 60rem is the width the catalogue
	 * already changes at, so the two now turn over together.
	 */
	@media (max-width: 60rem) {
		.nav-toggle { display: grid; }

		/*
		 * A full-height sheet, not a dropdown. The old panel left most of the
		 * screen empty with the page names squeezed into one corner.
		 */
		.site-nav {
			position: fixed;
			inset: 0;
			flex-direction: column;
			align-items: stretch;
			justify-content: space-between;
			gap: 0;
			padding: calc(var(--header-h) + var(--space-2xs)) var(--gutter)
				clamp(var(--space-s), 2.3vh, var(--space-xl));
			background: color-mix(in oklab, var(--bg) 97%, transparent);
			backdrop-filter: blur(24px) saturate(1.2);
			color: var(--ink);
			overflow-y: auto;
			overscroll-behavior: contain;
			clip-path: inset(0 0 100% 0);
			transition: clip-path var(--dur-slow) var(--ease-out);
		}

		.site-nav[data-open="true"] {
			clip-path: inset(0 0 0 0);
		}

		.site-nav > ul {
			flex-direction: column;
			align-items: stretch;
			gap: 0;
			width: 100%;
		}

		/*
		 * The page list only. Unscoped, this made every social link a
		 * full-width row with a rule under it and a numeral badge over the
		 * icon — four of them stacked down the sheet and off the bottom.
		 */
		.site-nav > ul li {
			width: 100%;
			border-bottom: 1px solid var(--line);
			opacity: 0;
			translate: 0 1rem;
			transition:
				opacity var(--dur-slow) var(--ease-out),
				translate var(--dur-slow) var(--ease-out);
		}

		/* Names arrive one after another as the sheet opens. */
		.site-nav[data-open="true"] > ul li { opacity: 1; translate: 0 0; }
		.site-nav[data-open="true"] > ul li:nth-child(1) { transition-delay: 80ms; }
		.site-nav[data-open="true"] > ul li:nth-child(2) { transition-delay: 140ms; }
		.site-nav[data-open="true"] > ul li:nth-child(3) { transition-delay: 200ms; }
		.site-nav[data-open="true"] > ul li:nth-child(4) { transition-delay: 260ms; }
		.site-nav[data-open="true"] > ul li:nth-child(5) { transition-delay: 320ms; }
		.site-nav[data-open="true"] > ul li:nth-child(6) { transition-delay: 380ms; }

		/*
		 * Big display type across the full width: numeral, name, and a chevron
		 * pinned to the right edge so the row is not a short label floating in
		 * a wide empty band.
		 */
		/*
		 * Scoped to the menu list, not to every link in the sheet. Written as
		 * `.site-nav a` these rules also caught the category links below —
		 * `.site-nav a` (0,1,1) outranks `.nav-cat` (0,1,0) — so each category
		 * took the three-column grid meant for a page name and the trailing
		 * arrow with it, and its count landed on top of its name.
		 */
		.site-nav > ul li {
			position: relative;
		}

		/*
		 * A leader between the name and the arrow. The row is 335px and the
		 * names are short, so pinning the arrow to the far edge left a hole
		 * across the middle and the name reading as shoved against the left.
		 * The rule ties the two ends together, the way the section links and
		 * the copy prompt already do.
		 */
		.site-nav > ul a {
			display: flex;
			align-items: center;
			padding-right: 1.75rem;
			gap: var(--space-s);
			/* Sized on the screen's height as well: six names, a category
			   block and the social row have to fit one sheet without it
			   scrolling, and only height tells you whether they do. */
			padding-block: clamp(var(--space-2xs), 1.4vh, var(--space-s));
			font-family: var(--font-display);
			font-size: clamp(1.75rem, min(10.5vw, 4.6vh), 3.1rem);
			font-weight: 400;
			line-height: 1;
			letter-spacing: -0.02em;
			text-transform: none;
			color: var(--ink);
		}

		.site-nav > ul li a::before {
			flex: 0 0 2.2rem;
			font-family: var(--font-ui);
			font-size: 0.68rem;
			letter-spacing: 0.12em;
			opacity: 0.4;
			align-self: center;
		}

		/* The desktop underline becomes the leader across the middle. */
		.site-nav > ul a::after {
			content: "";
			position: static;
			inset: auto;
			flex: 1;
			height: 1px;
			min-width: var(--space-m);
			background: currentColor;
			opacity: 0.16;
			transform: none;
			transition: opacity var(--dur-fast) var(--ease-out);
		}

		.site-nav > ul a:hover::after {
			opacity: 0.5;
		}

		/* The chevron sits on the row itself, holding its right edge. */
		.site-nav > ul li::after {
			content: "→";
			position: absolute;
			right: 0;
			top: 50%;
			translate: 0 -50%;
			font-family: var(--font-ui);
			font-size: 0.95rem;
			opacity: 0.35;
			pointer-events: none;
			transition: opacity var(--dur-fast) var(--ease-out),
				translate var(--dur-fast) var(--ease-out);
		}

		.site-nav > ul li:hover::after {
			opacity: 0.9;
			translate: 0.25rem -50%;
		}

		/* The lower half: what the site actually holds, plus where to find him. */
		.nav-extra {
			display: block;
			padding-top: clamp(var(--space-s), 2.3vh, var(--space-xl));
			opacity: 0;
			translate: 0 1rem;
			transition:
				opacity var(--dur-slow) var(--ease-out) 420ms,
				translate var(--dur-slow) var(--ease-out) 420ms;
		}

		.site-nav[data-open="true"] .nav-extra { opacity: 1; translate: 0 0; }

		.nav-extra-label {
			margin: 0 0 var(--space-s);
			font-size: 0.68rem;
			letter-spacing: 0.2em;
			text-transform: uppercase;
			color: var(--ink-3);
		}

		/*
		 * Two aligned columns rather than ragged pills. Wrapped chips left the
		 * counts drifting out of line and the block reading as clutter.
		 */
		.nav-cats {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			column-gap: var(--space-m);
			margin-bottom: clamp(var(--space-2xs), 1.5vh, var(--space-l));
		}

		/* An odd count left the last one alone beside an empty cell. */
		.nav-cat:last-child:nth-child(odd) {
			grid-column: 1 / -1;
		}

		.nav-cat {
			display: flex;
			align-items: baseline;
			gap: var(--space-2xs);
			padding-block: 0.6rem;
			border-top: 1px solid var(--line);
			font-size: var(--step--1);
			letter-spacing: 0.1em;
			text-transform: uppercase;
			text-decoration: none;
			color: var(--ink-2);
		}

		/* The same leader, so a short name and its count are one line. */
		.nav-cat::after {
			content: "";
			flex: 1;
			height: 1px;
			min-width: var(--space-s);
			background: currentColor;
			opacity: 0.16;
			order: 1;
		}

		.nav-cat span {
			order: 2;
			font-size: 0.78em;
			font-variant-numeric: tabular-nums;
			color: var(--ink-3);
		}

		.nav-extra .social-links {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: var(--space-2xs);
			padding-top: clamp(var(--space-2xs), 1.5vh, var(--space-m));
			border-top: 1px solid var(--line);
		}

		/* Nothing here is a page row: no rule, no numeral, no full width. */
		.nav-extra .social-links li {
			width: auto;
			border: 0;
		}

		/*
		 * On a short screen the category shortcut is what will not fit, so it
		 * is what goes. The menu's job is the six page names without a scroll;
		 * the categories are a convenience, and they are one tap away on the
		 * archive itself.
		 */
		@media (max-height: 48rem) {
			.nav-extra {
				display: none;
			}
		}
	}

	/* ----------------------------------------------------------------- footer */

	/* ----------------------------------------------------------------- footer */

	.site-footer {
		border-top: 1px solid var(--line);
		padding-block: clamp(var(--space-2xl), 10vh, var(--space-4xl)) var(--space-l);
		color: var(--ink-2);
		font-size: var(--step--1);
	}

	/* The line the whole site is built around, given room to be said. */
	.footer-top {
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		justify-content: space-between;
		gap: var(--space-l);
		padding-bottom: clamp(var(--space-xl), 7vh, var(--space-3xl));
	}

	.footer-statement {
		font-family: var(--font-display);
		font-size: clamp(2rem, 4.6vw, 4.25rem);
		line-height: 1.02;
		letter-spacing: -0.025em;
		color: var(--ink);
		max-width: 16ch;
		margin: 0;
		text-wrap: balance;
	}

	.footer-cta {
		display: flex;
		align-items: center;
		gap: 0.8em;
		min-width: min(22rem, 100%);
		padding-bottom: 0.4em;
		border-bottom: 1px solid var(--line-strong);
		font-size: var(--step--1);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--ink);
		white-space: nowrap;
		transition: gap var(--dur-fast) var(--ease-out),
			border-color var(--dur-fast) var(--ease-out);
	}

	.footer-cta:hover {
		gap: 1em;
		border-color: var(--ink);
	}

	/* Four columns: who, where to go, what is in it, where else to find him. */
	.footer-cols {
		display: grid;
		grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
		gap: var(--space-xl) var(--space-l);
		padding-block: var(--space-xl);
		border-top: 1px solid var(--line);
	}

	.footer-sig {
		width: clamp(130px, 14vw, 180px);
		margin-bottom: var(--space-m);
		opacity: 1;
	}

	.footer-blurb {
		margin: 0 0 var(--space-m);
		max-width: 30ch;
		line-height: 1.65;
	}

	.footer-stat {
		margin: 0;
		display: flex;
		align-items: baseline;
		gap: 0.5em;
	}

	.footer-stat strong {
		font-family: var(--font-display);
		font-size: var(--step-3);
		font-weight: 400;
		color: var(--ink);
		font-variant-numeric: tabular-nums;
	}

	.footer-stat span {
		font-size: 0.7rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--ink-3);
	}

	/*
	 * A standing label with nothing at the other end of its line reads as
	 * shoved into the left margin, however it is aligned — the line is short,
	 * not the alignment wrong. A leader rule carries it to the far edge and
	 * squares the block up. Used anywhere a label stands alone.
	 */
	.footer-head {
		display: flex;
		align-items: center;
		gap: var(--space-s);
		font-family: var(--font-ui);
		font-size: 0.68rem;
		font-weight: 500;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--ink-3);
		margin: 0 0 var(--space-s);
	}

	.footer-head::after {
		content: "";
		flex: 1;
		height: 1px;
		background: var(--line);
	}

	/*
	 * The leader sits between the label and its arrow. Flex order puts the
	 * pseudo-element after the anchor's own text node, which is order 0.
	 */
	.footer-cta::before,
	.section-link::before {
		content: "";
		flex: 1;
		height: 1px;
		background: var(--line);
		order: 1;
	}

	.footer-cta > span,
	.section-link > span {
		order: 2;
	}

	.footer-col ul,
	.footer-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.55rem;
	}

	.footer-col a {
		display: flex;
		align-items: center;
		gap: 0.6em;
		text-decoration: none;
		color: var(--ink-2);
		transition: color var(--dur-fast) var(--ease-out),
			padding-left var(--dur-fast) var(--ease-out);
	}

	.footer-col a:hover {
		color: var(--ink);
		padding-left: 0.25rem;
	}

	/* Counts sit against the right edge of their column. */
	.footer-list a span {
		margin-left: auto;
		font-size: 0.75em;
		font-variant-numeric: tabular-nums;
		color: var(--ink-3);
	}

	.footer-col svg {
		width: 0.95rem;
		height: 0.95rem;
		fill: currentColor;
		flex: none;
	}

	.footer-base {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-m);
		padding-top: var(--space-m);
		border-top: 1px solid var(--line);
		color: var(--ink-3);
	}

	.footer-base p {
		margin: 0;
	}

	.footer-top-link {
		margin-left: auto;
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		text-decoration: none;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		font-size: 0.68rem;
		color: var(--ink-3);
		transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
	}

	.footer-top-link:hover {
		color: var(--ink);
		gap: 0.85em;
	}

	.footer-menu {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-m);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	@media (max-width: 64rem) {
		.footer-cols {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.footer-col-brand {
			grid-column: 1 / -1;
		}
	}

	@media (max-width: 34rem) {
		/*
		 * A phone got one long column: fifteen links stacked end to end made
		 * the footer taller than the page it closes. The lists that are plain
		 * names pair up into two columns; only the categories stay single,
		 * because their counts need a right edge to sit against.
		 */
		.footer-cols {
			grid-template-columns: minmax(0, 1fr);
			gap: 0;
			padding-block: var(--space-l) 0;
		}

		.footer-col + .footer-col {
			margin-top: var(--space-l);
			padding-top: var(--space-l);
			border-top: 1px solid var(--line);
		}

		.footer-col-pages ul,
		.footer-col-social ul {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			column-gap: var(--space-m);
			row-gap: 0;
		}

		/*
		 * Every row is ruled to the edge of its column. Short labels left to
		 * themselves leave the right half of a narrow screen empty and the
		 * whole block reads as crammed into one side; the hairline is what
		 * occupies that space and squares the column up.
		 */
		.footer-col-pages li,
		.footer-col-social li,
		.footer-col-cats li {
			border-bottom: 1px solid var(--line);
		}

		.footer-col-pages a,
		.footer-col-social a,
		.footer-col-cats a {
			padding-block: 0.7rem;
		}

		/* Names push to one edge, their marker to the other. */
		.footer-col-pages a::after {
			content: "→";
			margin-left: auto;
			font-size: 0.8em;
			opacity: 0.35;
		}

		.footer-col-social a {
			justify-content: flex-start;
		}

		.footer-col-cats a span {
			font-size: 0.8em;
		}

		/*
		 * The closing statement is a coda, not a column of copy — there is no
		 * second element to pair it with on a phone, so it is centred. A
		 * leader rule here would only have dressed up the same short line
		 * sitting against the left margin.
		 */
		.footer-top {
			flex-direction: column;
			align-items: center;
			text-align: center;
			gap: var(--space-l);
			padding-block: var(--space-l) var(--space-2xl);
		}

		.footer-statement {
			font-size: clamp(2.1rem, 10.5vw, 2.8rem);
			max-width: 15ch;
			margin-inline: auto;
		}

		/* Centred with it: a button, not a full-width row with a leader. */
		.footer-cta {
			min-width: 0;
			gap: 0.7em;
			padding: 0.85em 1.5em;
			border: 1px solid var(--line-strong);
			border-radius: 100px;
		}

		.footer-cta::before {
			display: none;
		}

		/*
		 * Signature and count share a row so the mark is not stranded on the
		 * left with the right half of the screen empty beside it.
		 */
		.footer-col-brand {
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: end;
			column-gap: var(--space-m);
		}

		/*
		 * Rows are stated, not inferred. Left to auto-placement the count fell
		 * past the full-width blurb onto a third row, and the signature sat
		 * alone again with the right half of the screen empty beside it.
		 */
		.footer-sig {
			width: 140px;
			margin-bottom: 0;
			grid-row: 1;
			grid-column: 1;
		}

		.footer-stat {
			grid-row: 1;
			grid-column: 2;
			justify-self: end;
			align-items: baseline;
		}

		.footer-stat strong {
			font-size: var(--step-2);
		}

		.footer-blurb {
			grid-row: 2;
			grid-column: 1 / -1;
			max-width: none;
			margin-block: var(--space-s) 0;
		}

		/* Copyright and place read as one line; the top link keeps its own. */
		.footer-base {
			gap: var(--space-2xs) var(--space-m);
			margin-top: var(--space-l);
		}

		.footer-top-link {
			flex-basis: 100%;
			margin-left: 0;
			justify-content: flex-end;
			padding-top: var(--space-2xs);
		}
	}

	/* ------------------------------------------------- the social block */

	/*
	 * CoBlocks used to draw this block and dress it. The plugin is gone — it
	 * cost about 1.4 seconds of every page load and this one block was the
	 * only thing keeping it — so the theme renders it and, necessarily,
	 * styles it. The class names are the ones the plugin used, which is what
	 * lets every page-specific rule already written against them stand.
	 */
	.wp-block-coblocks-social ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wp-block-coblocks-social__button {
		display: inline-grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		border-radius: 50%;
		border: 1px solid color-mix(in oklab, currentColor 28%, transparent);
		color: inherit;
		text-decoration: none;
		transition:
			border-color var(--dur-fast) var(--ease-out),
			background var(--dur-fast) var(--ease-out);
	}

	.wp-block-coblocks-social__button:hover,
	.wp-block-coblocks-social__button:focus-visible {
		border-color: currentColor;
		background: color-mix(in oklab, currentColor 12%, transparent);
	}

	.wp-block-coblocks-social__icon {
		display: block;
		width: 1.15rem;
		height: 1.15rem;
	}

	.wp-block-coblocks-social__icon svg {
		display: block;
		width: 100%;
		height: 100%;
		fill: currentColor;
	}

	/* The mark says it; the word beside it is for screen readers. */
	.wp-block-coblocks-social__text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.social-links {
		display: flex;
		gap: var(--space-s);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.social-links a {
		display: grid;
		place-items: center;
		width: 2.25rem;
		height: 2.25rem;
		border-radius: 50%;
		border: 1px solid var(--line);
		text-decoration: none;
		transition: border-color var(--dur-fast) var(--ease-out),
			color var(--dur-fast) var(--ease-out),
			transform var(--dur-fast) var(--ease-out);
	}

	.social-links a:hover {
		border-color: var(--line-strong);
		color: var(--ink);
		transform: translateY(-2px);
	}

	.social-links svg {
		width: 1rem;
		height: 1rem;
		fill: currentColor;
	}

	/* ------------------------------------------------------------------ button */

	.btn {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		padding: var(--space-xs) var(--space-m);
		border: 1px solid currentColor;
		border-radius: var(--radius);
		font-size: var(--step--1);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-decoration: none;
		transition: background var(--dur-fast) var(--ease-out),
			color var(--dur-fast) var(--ease-out);
	}

	.btn:hover {
		background: var(--ink);
		color: var(--bg);
	}

	.btn-solid {
		background: var(--ink);
		color: var(--bg);
		border-color: var(--ink);
	}

	.btn-solid:hover {
		background: transparent;
		color: var(--ink);
	}

	/* ------------------------------------------------------------- eyebrow/meta */

	.eyebrow {
		display: flex;
		align-items: center;
		gap: var(--space-s);
		font-size: var(--step--1);
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--ink-3);
		margin: 0 0 var(--space-s);
	}

	.eyebrow::after {
		content: "";
		flex: 1;
		height: 1px;
		background: currentColor;
		opacity: 0.35;
	}

	.meta {
		font-size: var(--step--1);
		color: var(--ink-2);
	}
}