/*
 * Bassam Al Derazi — hybrid edition
 *
 * The logo is a solid D over an outlined D, and the page is built from the
 * same pair: ink cards with a small corner on the left and a rounder one on
 * the right, D-shaped masks, buttons and markers, and blue for the one thing
 * that is active.
 *
 *  1. Tokens and tones        6. Inner pages (page card, works index, project, reading)
 *  2. Base                    7. Footer
 *  3. Chrome                  8. Content blocks
 *  4. Shared pieces           9. Responsive
 *  5. Front page             10. Utilities, motion, print
 */

/* ---------- 1. Tokens and tones ---------- */

:root {
	--ink: #0B0F0E;
	--ink-2: #121816;
	--ink-3: #1B2421;
	--paper: #EEF0EB;
	--paper-2: #E1E5DE;
	--white: #FFFFFF;
	--blue: #638EFF;
	--blue-deep: #2B61F2;
	--blue-text: #2752CB;
	--bright: #80A1FF;
	--tint: #BDCEFF;
	--pale: #E5ECFF;
	--sand: #F5EFE3;

	--font: "Graphik", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

	--bg: var(--paper);
	--fg: var(--ink);
	--accent: var(--blue-text);

	--t-xs: 0.75rem;
	--t-sm: 0.875rem;
	--t-md: 1.0625rem;
	--t-lg: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
	--t-lede: clamp(1.2rem, 1rem + 0.65vw, 1.6rem);
	--t-xl: clamp(1.5rem, 1.05rem + 1.6vw, 2.5rem);
	--t-h2: clamp(2.25rem, 1.3rem + 3vw, 4.25rem);
	--t-2xl: clamp(2.125rem, 1.25rem + 3.3vw, 4.5rem);
	--t-3xl: clamp(3rem, 1.3rem + 6.4vw, 8.75rem);

	--wrap: 1680px;
	--gutter: clamp(1.25rem, 3.4vw, 3.5rem);
	--gap: clamp(1rem, 2vw, 2rem);
	--space-s: clamp(1.5rem, 3vw, 2.5rem);
	--space-m: clamp(2.5rem, 5vw, 4.5rem);
	--space-l: clamp(4rem, 8vw, 7.5rem);
	--space-xl: clamp(6rem, 13vw, 12rem);
	--head-h: 5.5rem;
	--bar-h: 4rem;

	/* The D. Cards sit a frame in from the window, flat on the left and round on the right. */
	--frame: clamp(0.5rem, 1vw, 1rem);
	--pad-x: calc(var(--gutter) - var(--frame));
	--r-flat: clamp(0.75rem, 1.3vw, 1.4rem);
	--r-round: clamp(1.75rem, 3.6vw, 3.5rem);
	--r-tile: clamp(0.5rem, 0.8vw, 0.75rem);

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-io: cubic-bezier(0.76, 0, 0.24, 1);
}

body,
[data-section] {
	--muted: color-mix(in srgb, var(--fg) 60%, transparent);
	--faint: color-mix(in srgb, var(--fg) 34%, transparent);
	--line: color-mix(in srgb, var(--fg) 15%, transparent);
	--line-strong: color-mix(in srgb, var(--fg) 34%, transparent);
	--grid: color-mix(in srgb, var(--fg) 6%, transparent);
}

[data-section="ink"] {
	--bg: var(--ink);
	--fg: var(--paper);
	--accent: var(--blue);
}

[data-section="paper"] {
	--bg: var(--paper);
	--fg: var(--ink);
	--accent: var(--blue-text);
}

[data-section="blue"] {
	--bg: var(--blue);
	--fg: var(--ink);
	--accent: var(--ink);
}

[data-section] {
	position: relative;
	background: var(--bg);
	color: var(--fg);
}

/* ---------- 2. Base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scrollbar-gutter: stable;
}

html:not(.has-smooth) {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--paper);
	color: var(--ink);
	font: 400 var(--t-md) / 1.5 var(--font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: none;
	overflow-x: clip;
}

html.is-preloading:not(.is-loaded) body {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: inherit;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

img,
svg {
	max-width: 100%;
}

img {
	display: block;
	height: auto;
}

figure {
	margin: 0;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

::selection {
	background: var(--blue);
	color: var(--ink);
}

.top-anchor {
	position: absolute;
	top: 0;
	left: 0;
}

.wrap {
	position: relative;
	z-index: 1;
	width: min(100% - 2 * var(--gutter), var(--wrap));
	margin-inline: auto;
}

strong,
b {
	font-weight: 600;
}

th {
	font-weight: 500;
}

/* ---------- 3. Chrome ---------- */

.skip-link {
	position: fixed;
	top: -100px;
	left: 1rem;
	z-index: 120;
	padding: 0.75rem 1.1rem;
	border-radius: 0 999px 999px 0;
	background: var(--blue);
	color: var(--ink);
	font-weight: 500;
	text-decoration: none;
}

.skip-link:focus {
	top: 1rem;
}

/*
 * Header: the name on the left; on the right one ink pill cut like the D that
 * holds the menu, the local time, how far down the page you are and the
 * Get in touch button. Once the page scrolls, the name sits in an ink capsule
 * too. At the top of a page the name takes the tone of what is under it.
 */
.site-head {
	--head-fg: var(--ink);
	--head-mark: var(--blue-deep);
	--cap-h: 3.1rem;
	--cap-end: calc(var(--cap-h) / 2);
	--cap-line: color-mix(in srgb, var(--paper) 14%, transparent);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 70;
	padding: calc((var(--head-h) - var(--bar-h)) / 2) var(--frame) 0;
	color: var(--head-fg);
	pointer-events: none;
	transition: color 0.45s var(--ease);
}

.site-head[data-tone="ink"] {
	--head-fg: var(--paper);
	--head-mark: var(--blue);
}

.site-head[data-tone="blue"] {
	--head-fg: var(--ink);
	--head-mark: var(--ink);
}

.admin-bar .site-head {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-head {
		top: 46px;
	}
}

.site-head__row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	height: var(--bar-h);
	padding: 0 max(0px, calc(var(--pad-x) - 0.65rem));
}

.site-head__row > * {
	pointer-events: auto;
}

.brand {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
	height: var(--cap-h);
	padding: 0 1.4rem 0 0.65rem;
	color: inherit;
	text-decoration: none;
}

.brand::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 0 var(--cap-end) var(--cap-end) 0;
	background: var(--ink);
	box-shadow: inset 0 0 0 1px var(--cap-line);
	opacity: 0;
	transform: scale(0.94);
	transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
}

.site-head.is-scrolled .brand::before {
	opacity: 1;
	transform: none;
}

.brand__logo {
	flex: none;
	width: auto;
	height: 2rem;
	overflow: visible;
	color: var(--head-mark);
	transition: color 0.45s var(--ease);
}

/* Point at the name and the mark's two halves part along the seam, then snap back together. */
.brand__logo path {
	transform-box: fill-box;
	transform-origin: center;
}

.brand:hover .brand__logo path:first-child,
.brand:focus-visible .brand__logo path:first-child {
	animation: bd-part-top 0.85s var(--ease-io);
}

.brand:hover .brand__logo path:last-child,
.brand:focus-visible .brand__logo path:last-child {
	animation: bd-part-bottom 0.85s var(--ease-io) 0.07s;
}

@keyframes bd-part-top {
	45% {
		transform: translate(15%, -14%);
	}
}

@keyframes bd-part-bottom {
	45% {
		transform: translate(-15%, 14%);
	}
}

.brand__image {
	width: auto;
	height: 2rem;
}

/* Name and tagline stacked like the two halves of the logo: the name heavy, the tagline light. */
.brand__text {
	display: flex;
	flex-direction: column;
	gap: 0.14rem;
	min-width: 0;
	line-height: 1.05;
	white-space: nowrap;
}

.brand__name {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.brand__tag {
	font-size: 0.88rem;
	font-weight: 300;
	letter-spacing: 0;
}

/* The pill: menu, local time, how far down the page you are, and Get in touch. */
.head-nav {
	position: relative;
	flex: none;
}

.pill {
	display: flex;
	align-items: center;
	height: var(--cap-h);
	padding: 0.3rem;
	border-radius: 0 var(--cap-end) var(--cap-end) 0;
	background: var(--ink);
	box-shadow: inset 0 0 0 1px var(--cap-line);
	color: var(--paper);
	font-size: var(--t-sm);
	font-weight: 500;
	line-height: 1;
	transition: border-radius 0.6s var(--ease);
}

.pill:hover {
	border-radius: var(--cap-end);
}

.pill :focus-visible {
	outline-color: var(--blue);
	outline-offset: 2px;
}

.pill__menu {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	height: 100%;
	padding: 0 1.05rem 0 0.85rem;
	border: 0;
	border-radius: 999px;
	background: none;
	color: inherit;
	font-weight: 500;
	cursor: pointer;
}

.pill__icon {
	display: grid;
	gap: 4px;
	width: 1.05rem;
}

.pill__icon span {
	display: block;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.6s var(--ease), width 0.45s var(--ease);
}

.pill__icon span:last-child {
	width: 64%;
}

.pill__menu:hover .pill__icon span:last-child {
	width: 100%;
}

.menu-open .pill__icon span:first-child {
	transform: translateY(2.75px) rotate(45deg);
}

.menu-open .pill__icon span:last-child {
	width: 100%;
	transform: translateY(-2.75px) rotate(-45deg);
}

.pill__label {
	min-width: 2.6em;
	text-align: left;
}

.pill__time,
.pill__progress {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 1.35rem;
	padding: 0 1rem;
	border-left: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
	color: color-mix(in srgb, var(--paper) 72%, transparent);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* Wide enough for "100%", so the pill keeps its width as you scroll; in blue. */
.pill__progress {
	min-width: 4.25rem;
	color: var(--blue);
	font-weight: 500;
}

/* Get in touch closes the pill: the blue button, flat against the rest, round at the end. */
.pill .pill__cta {
	min-height: 0;
	height: 100%;
	margin-left: 0.2rem;
	padding: 0 0.3rem 0 1.15rem;
	gap: 0.75rem;
	border: 0;
}

.pill__cta .dbtn__icon {
	width: 1.95rem;
	height: 1.95rem;
}

/* The card the menu opens, as wide as the pill: grouped links on paper, rising in one group after another. */
.site-menu {
	position: absolute;
	top: calc(100% + 0.55rem);
	right: 0;
	width: max(100%, 22rem);
	max-width: calc(100vw - 2 * var(--frame));
	max-height: calc(100vh - var(--head-h) - 1rem);
	max-height: calc(100svh - var(--head-h) - 1rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding: 1.5rem 1.5rem 1.2rem;
	border-radius: 0.6rem 1.75rem 1.75rem 0.6rem;
	box-shadow: 0 1.5rem 3rem -1rem rgba(11, 15, 14, 0.35), 0 0 0 1px rgba(11, 15, 14, 0.07);
	font-size: var(--t-md);
	font-weight: 400;
	line-height: 1.5;
	transform-origin: 100% 0;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-0.5rem) scale(0.97);
	transition: opacity 0.3s var(--ease), transform 0.5s var(--ease), visibility 0s linear 0.5s;
}

.site-menu.is-open {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.3s var(--ease), transform 0.6s var(--ease), visibility 0s;
}

.site-menu .label {
	margin-bottom: 0.85rem;
}

.site-menu__group,
.site-menu__foot {
	opacity: 0;
	transform: translateY(0.6rem);
	transition: opacity 0.25s var(--ease), transform 0.4s var(--ease);
}

.site-menu.is-open .site-menu__group,
.site-menu.is-open .site-menu__foot {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s var(--ease) calc(0.08s + var(--k, 0) * 0.06s), transform 0.7s var(--ease) calc(0.08s + var(--k, 0) * 0.06s);
}

.site-menu__group + .site-menu__group {
	margin-top: 1.35rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--line);
}

.site-menu__links,
.site-menu__works,
.site-menu__contact {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-menu__links {
	gap: 0.2rem;
}

.site-menu__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--fg);
	font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.035em;
	text-decoration: none;
}

.site-menu__link[aria-current="page"]::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--blue);
}

/* Link labels roll up a letter at a time on hover. */
.roll {
	display: inline-flex;
	flex-direction: column;
	height: 1.15em;
	overflow: hidden;
}

.roll__line {
	display: flex;
	white-space: pre;
}

.roll__line > span {
	display: block;
	transition: transform 0.55s var(--ease) calc(var(--i) * 14ms);
}

a:hover > .roll .roll__line > span,
a:focus-visible > .roll .roll__line > span {
	transform: translateY(-100%);
}

.site-menu__works {
	gap: 0.6rem;
}

.site-menu__work {
	display: grid;
	grid-template-columns: 4.25rem minmax(0, 1fr);
	align-items: center;
	gap: 0.9rem;
	color: var(--fg);
	text-decoration: none;
}

.site-menu__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	isolation: isolate;
	border-radius: 0.4rem;
	background: var(--paper-2);
}

.site-menu__thumb img,
.site-menu__thumb .swatch {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}

.site-menu__thumb .swatch__mark {
	font-size: 1.1rem;
}

.site-menu__work:hover .site-menu__thumb img,
.site-menu__work:focus-visible .site-menu__thumb img {
	transform: scale(1.06);
}

.site-menu__work-text {
	display: grid;
	gap: 0.15rem;
}

.site-menu__work-title {
	font-weight: 500;
	line-height: 1.2;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.3s;
}

.site-menu__work:hover .site-menu__work-title,
.site-menu__work:focus-visible .site-menu__work-title {
	text-decoration-color: currentColor;
}

.site-menu__work-info {
	color: var(--muted);
	font-size: var(--t-xs);
}

.site-menu__contact {
	gap: 0.25rem;
	font-weight: 500;
}

.site-menu__contact a {
	color: var(--fg);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	overflow-wrap: anywhere;
	transition: text-decoration-color 0.3s;
}

.site-menu__contact a:hover,
.site-menu__contact a:focus-visible {
	text-decoration-color: currentColor;
}

.site-menu__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	margin-top: 1rem;
}

.site-menu__actions .dbtn {
	min-height: 2.9rem;
}

/* A smaller disc for the lower button, so it sits as far from the top and bottom as from the end. */
.site-menu__actions .dbtn__icon {
	width: 2.3rem;
	height: 2.3rem;
}

.site-menu__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.5rem;
	margin: 1.3rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--t-xs);
}

.site-menu__foot .clock {
	color: var(--fg);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* Page curtain: two blue halves close along the logo's seam between pages. */
.curtain {
	position: fixed;
	inset: 0;
	z-index: 96;
	pointer-events: none;
}

.curtain__half {
	position: absolute;
	left: 0;
	right: 0;
	height: 50.5%;
	background: var(--blue);
	transition: transform 0.75s var(--ease-io);
}

.curtain__half--top {
	top: 0;
	transform: translateY(-101%);
}

.curtain__half--bottom {
	bottom: 0;
	transform: translateY(101%);
}

html.is-leaving .curtain__half,
html.is-entering .curtain__half {
	transform: none;
}

html.is-entering .curtain__half {
	transition: none;
}

html.is-entering .curtain__half--top {
	animation: bd-open-top 0.75s var(--ease-io) 4s forwards;
}

html.is-entering .curtain__half--bottom {
	animation: bd-open-bottom 0.75s var(--ease-io) 4s forwards;
}

.curtain__mark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: 4rem;
	color: var(--ink);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.85);
	transition: opacity 0.3s, transform 0.6s var(--ease);
}

html.is-leaving .curtain__mark,
html.is-entering .curtain__mark {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

html.is-leaving .curtain__mark {
	transition-delay: 0.35s;
}

html.is-entering .curtain__mark {
	transition: none;
}

html.is-leaving {
	pointer-events: none;
}

@keyframes bd-open-top {
	to {
		transform: translateY(-101%);
	}
}

@keyframes bd-open-bottom {
	to {
		transform: translateY(101%);
	}
}

/* Preloader: the logo assembles, a counter runs to 100, the halves part. */
.preloader {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	color: var(--ink);
}

html.is-preloading .preloader {
	display: block;
	animation: bd-failsafe-hide 0s 8s forwards;
}

.preloader__half {
	position: absolute;
	left: 0;
	right: 0;
	height: 50.5%;
	background: var(--blue);
	transition: transform 1.1s var(--ease-io);
}

.preloader__half--top {
	top: 0;
}

.preloader__half--bottom {
	bottom: 0;
}

html.is-loaded .preloader__half--top {
	transform: translateY(-101%);
}

html.is-loaded .preloader__half--bottom {
	transform: translateY(101%);
}

.preloader__inner {
	position: absolute;
	inset: 0;
	transition: opacity 0.35s ease;
}

html.is-loaded .preloader__inner {
	opacity: 0;
}

.preloader__mark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(4.5rem, 8vw, 7.5rem);
	aspect-ratio: 45.21 / 60.5;
	transform: translate(-50%, -50%);
}

.preloader__mark .piece {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: bd-piece-in 1.1s var(--ease) both;
}

.preloader__mark .piece--top {
	--from: -70%;
}

.preloader__mark .piece--bottom {
	--from: 70%;
	animation-delay: 0.18s;
}

.preloader__caption {
	position: absolute;
	left: var(--gutter);
	bottom: var(--gutter);
	margin: 0;
	font-size: var(--t-sm);
	font-weight: 500;
	line-height: 1.35;
}

.preloader__count {
	position: absolute;
	right: var(--gutter);
	bottom: calc(var(--gutter) - 0.1em);
	margin: 0;
	font-size: clamp(5rem, 17vw, 16rem);
	font-weight: 300;
	line-height: 0.78;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
}

@keyframes bd-piece-in {
	from {
		opacity: 0;
		transform: translateX(var(--from));
	}
}

@keyframes bd-failsafe-hide {
	to {
		visibility: hidden;
	}
}

/* Designer's grid: press G, or the footer button. */
.grid-overlay {
	position: fixed;
	inset: 0;
	z-index: 85;
	display: none;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	width: min(100% - 2 * var(--gutter), var(--wrap));
	margin-inline: auto;
	pointer-events: none;
}

.grid-overlay span {
	background: rgba(99, 142, 255, 0.07);
	border-inline: 1px solid rgba(99, 142, 255, 0.35);
}

html.show-grid .grid-overlay {
	display: grid;
}

/* ---------- 4. Shared pieces ---------- */

.label {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5em;
	margin: 0;
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--accent);
}

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

.label a {
	color: inherit;
}

.muted {
	color: var(--muted);
}

.dot {
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--blue);
}

[data-section="blue"] .dot {
	background: var(--ink);
}

.navlink {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	transition: text-decoration-color 0.3s;
}

.navlink:hover,
.navlink:focus-visible,
.navlink.is-current {
	text-decoration-color: currentColor;
}

/*
 * D-shaped button: flat on the left, round on the right; on hover it opens
 * into a pill. Buttons that lead somewhere end in a blue disc with an arrow.
 */
.dbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	min-height: 3.25rem;
	padding: 0 1.6rem 0 1.3rem;
	border: 1px solid currentColor;
	border-radius: 0 999px 999px 0;
	background: transparent;
	color: var(--fg);
	font-size: var(--t-sm);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-radius 0.6s var(--ease), background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}

.dbtn:hover {
	border-radius: 999px;
}

.dbtn:has(.dbtn__icon) {
	padding-right: 0.3rem;
}

.dbtn__icon {
	display: grid;
	place-items: center;
	flex: none;
	margin-left: auto; /* in a stretched button the disc stays at the round end */
	width: 2.55rem;
	height: 2.55rem;
	border-radius: 50%;
	background: var(--blue);
	color: var(--ink);
}

.dbtn__icon svg {
	width: 1rem;
	height: 1rem;
}

.dbtn--ink {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

.dbtn--paper {
	border-color: var(--paper);
	background: var(--paper);
	color: var(--ink);
}

.dbtn--solid {
	border-color: var(--blue);
	background: var(--blue);
	color: var(--ink);
}

.dbtn--solid .dbtn__icon {
	background: var(--ink);
	color: var(--blue);
}

.dbtn.is-copied,
.dbtn.is-copied:hover {
	border-color: var(--blue);
	background: var(--blue);
	color: var(--ink);
}

.link-btn {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* The D card: the solid half of the logo, as a surface. */
.dcard {
	isolation: isolate;
	overflow: clip;
	border-radius: var(--r-flat) var(--r-round) var(--r-round) var(--r-flat);
}

/* The letterhead's scallop pattern, faded toward the left. */
.hero__card::after,
.foot-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23EEF0EB' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='48'/%3E%3Ccircle cx='96' cy='0' r='48'/%3E%3Ccircle cx='0' cy='96' r='48'/%3E%3Ccircle cx='96' cy='96' r='48'/%3E%3Ccircle cx='48' cy='48' r='48'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 96px 96px;
	-webkit-mask-image: linear-gradient(to left, #000 10%, transparent 62%);
	mask-image: linear-gradient(to left, #000 10%, transparent 62%);
}

/* A half of the logo used as a marker: solid for "this one", outlined for the rest. */
.dmark {
	display: inline-block;
	flex: none;
	width: auto;
	height: 0.62em;
	aspect-ratio: 45.21 / 27.5;
	overflow: visible;
}

/* Section head: label and heading on the left, lead, note and button on the right. */
.sec-head {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	row-gap: var(--space-s);
	align-items: end;
	margin-bottom: var(--space-l);
}

.sec-head__main {
	grid-column: 1 / 8;
}

.sec-head__main .label {
	margin-bottom: 1.35rem;
}

.sec-title {
	max-width: 14em;
	font-size: var(--t-h2);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.042em;
	text-wrap: balance;
}

.sec-title sup {
	font-size: 0.3em;
	top: 0.5em;
}

.sec-head__aside {
	grid-column: 8 / 13;
	display: grid;
	justify-items: start;
	gap: 1.6rem;
	padding-bottom: 0.3rem;
}

.sec-head__text {
	max-width: 34em;
	color: var(--muted);
	font-size: var(--t-md);
	line-height: 1.5;
}

.sec-head__text p {
	margin: 0 0 0.9em;
}

.sec-head__text p:first-child {
	color: var(--fg);
	font-size: var(--t-lede);
	font-weight: 300;
	font-style: italic;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.sec-head__text p:last-child {
	margin-bottom: 0;
}

/* Figures under the studio text: the number large and light, its label small beneath. */
.figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem var(--gap);
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

.figures > div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 0.4rem;
}

.figures dd {
	margin: 0;
	color: var(--fg);
	font-size: var(--t-xl);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.03em;
}

.figures dt {
	color: var(--muted);
	font-size: var(--t-sm);
	line-height: 1.3;
}

.sec-head--center {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
}

.sec-head--center .sec-head__main,
.sec-head--center .sec-head__aside {
	grid-column: 1;
	justify-items: center;
}

.sec-head--center .sec-title {
	margin-inline: auto;
}

/* Split titles: letters rise out of their word on load. */
.split .word {
	display: inline-block;
	overflow: hidden;
	padding-block: 0.08em 0.1em;
	margin-block: -0.08em -0.1em;
	vertical-align: top;
	white-space: nowrap;
}

.split .char {
	display: inline-block;
	transition: transform 1.15s var(--ease);
	transition-delay: calc(var(--i) * 38ms + var(--d, 0ms));
}

html.js:not(.is-ready) .split .char {
	transform: translateY(110%);
	animation: bd-failsafe-show 0s 4s forwards;
}

[data-hero-fade] {
	transition: opacity 1.1s var(--ease) 0.45s, transform 1.3s var(--ease) 0.45s;
}

html.js:not(.is-ready) [data-hero-fade] {
	opacity: 0;
	transform: translateY(1.5rem);
	animation: bd-failsafe-show 0s 4s forwards;
}

@keyframes bd-failsafe-show {
	to {
		opacity: 1;
		transform: none;
	}
}

/* Works without a cover show their colour and initials. The class names follow the saved swatch keys. */
.swatch {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--ph-bg, var(--ink-3));
	color: var(--ph-fg, var(--paper));
}

.swatch--teal {
	--ph-bg: var(--blue);
	--ph-fg: var(--ink);
}

.swatch--bright {
	--ph-bg: var(--bright);
	--ph-fg: var(--ink);
}

.swatch--mint {
	--ph-bg: var(--tint);
	--ph-fg: var(--ink);
}

.swatch--pale {
	--ph-bg: var(--pale);
	--ph-fg: var(--ink);
}

.swatch--sand {
	--ph-bg: var(--sand);
	--ph-fg: var(--ink);
}

.swatch--ink {
	--ph-bg: var(--ink-3);
	--ph-fg: var(--tint);
}

.swatch__mark {
	font-size: clamp(3rem, 8vw, 8rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.06em;
}

.empty {
	padding: var(--space-m) 0;
	color: var(--muted);
	font-size: var(--t-lg);
}

.sec-head + .empty {
	padding-top: 0;
}

sup {
	font-size: 0.22em;
	font-weight: 400;
	line-height: 0;
	letter-spacing: 0.02em;
	vertical-align: top;
	position: relative;
	top: 0.6em;
	margin-left: 0.3em;
	font-variant-numeric: tabular-nums;
}

/* Small facts in a row: client, type, year. */
.facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem clamp(1.5rem, 4vw, 4.5rem);
	margin: 0;
}

.facts dt {
	margin-bottom: 0.35rem;
	color: var(--muted);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.facts dd {
	margin: 0;
	font-weight: 500;
}

.facts a {
	text-decoration: underline;
	text-decoration-color: var(--accent);
}

/* ---------- 5. Front page ---------- */

/*
 * The hero: a featured project's cover fills the whole screen, edge to edge,
 * with the tagline, the services and a button to the project over it and the
 * header on top. With no cover anywhere, the 3D mark stands in on ink.
 */
.hero__card {
	--pad-y: clamp(1.5rem, 2.8vw, 2.75rem);
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto 1fr auto auto;
	column-gap: var(--gap);
	min-height: 100vh;
	min-height: max(34rem, 100svh);
	padding: calc(var(--head-h) + var(--pad-y)) var(--gutter) var(--pad-y);
}

.hero__card > :not(.hero__media) {
	position: relative;
	z-index: 1;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

/* The latest projects take turns: each cover fades in over the last and settles from a slight zoom. */
.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.4s var(--ease-io);
}

.hero__slide.is-active {
	z-index: 1;
	opacity: 1;
}

.hero__img {
	position: absolute;
	inset: -8% 0;
	will-change: transform;
}

.hero__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	transition: transform 8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.hero__slide.is-active .hero__img img {
	transform: none;
}

/* A light shade under the header and along the bottom, where the words sit; the photo stays bright. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(180deg, rgba(11, 15, 14, 0.35) 0%, rgba(11, 15, 14, 0) 8rem),
		linear-gradient(0deg, rgba(11, 15, 14, 0.62) 0%, rgba(11, 15, 14, 0.3) 26%, rgba(11, 15, 14, 0) 50%);
}

.hero__card.has-feature .hero__kicker,
.hero__card.has-feature .hero__lede,
.hero__card.has-feature .hero__services {
	text-shadow: 0 1px 18px rgba(11, 15, 14, 0.45);
}

.hero__card.has-feature .hero__intro {
	color: color-mix(in srgb, var(--paper) 86%, transparent);
}

.hero__card.has-feature .hero__services-num {
	color: var(--tint);
}

.hero__card.has-feature .dot {
	background: var(--tint);
}

/* Over the photo at the top of the front page, the logo is light so it does not sink into the picture. */
.has-hero-photo .site-head[data-tone="ink"]:not(.is-scrolled) {
	--head-mark: var(--paper);
}

.hero__card.has-feature::after {
	display: none;
}

.hero__card.has-feature .hero__kicker {
	color: var(--paper);
}

.hero__card.has-feature .hero__services {
	grid-column: 1 / 9;
}

/* The button to the project on screen, bottom right; one per slide, stacked, only the current one shown. */
.hero__featured {
	grid-column: 9 / 13;
	grid-row: 4;
	align-self: end;
	justify-self: end;
	display: grid;
}

.hero__go {
	grid-area: 1 / 1;
	justify-self: end;
	transition: border-radius 0.6s var(--ease), background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease), opacity 0.6s var(--ease), transform 0.8s var(--ease), visibility 0s;
}

.hero__go:not(.is-active) {
	visibility: hidden;
	opacity: 0;
	transform: translateY(0.75rem);
	transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0.8s;
}

/* Which slide is on: the count, a line per project that fills while it shows, and pause. */
.hero__dots {
	grid-column: 9 / 13;
	grid-row: 3;
	align-self: end;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.4rem;
	color: var(--paper);
	text-shadow: 0 1px 18px rgba(11, 15, 14, 0.45);
}

.hero__count {
	margin-right: 0.6rem;
	font-size: var(--t-xs);
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.hero__dot {
	position: relative;
	width: 2.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.hero__dot::before,
.hero__dot-fill {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
}

.hero__dot::before {
	background: color-mix(in srgb, var(--paper) 35%, transparent);
	transition: background-color 0.4s var(--ease);
}

.hero__dot:hover::before {
	background: color-mix(in srgb, var(--paper) 65%, transparent);
}

.hero__dot-fill {
	background: var(--paper);
	transform: scaleX(0);
	transform-origin: left center;
}

.hero__dot.is-active .hero__dot-fill {
	transform: scaleX(var(--p, 0));
}

.hero__dots.is-paused .hero__dot.is-active .hero__dot-fill,
.hero__dots.is-still .hero__dot.is-active .hero__dot-fill {
	transform: scaleX(1);
}

.hero__pause {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-left: 0.35rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
	border-radius: 50%;
	background: none;
	color: var(--paper);
	cursor: pointer;
	transition: border-color 0.4s var(--ease);
}

.hero__pause:hover {
	border-color: var(--paper);
}

/* Two bars while it plays, a triangle once paused. */
.hero__pause-icon {
	width: 0.5rem;
	height: 0.55rem;
	border-left: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.hero__dots.is-paused .hero__pause-icon {
	width: 0;
	height: 0;
	margin-left: 0.15rem;
	border-style: solid;
	border-width: 0.3rem 0 0.3rem 0.5rem;
	border-color: transparent transparent transparent currentColor;
}

.hero__dot:focus-visible,
.hero__pause:focus-visible {
	outline: 2px solid var(--paper);
	outline-offset: 3px;
	border-radius: 4px;
}

.hero__pause:focus-visible {
	border-radius: 50%;
}

.hero__featured-label {
	color: color-mix(in srgb, var(--ink) 55%, transparent);
	font-size: var(--t-xs);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hero__kicker {
	grid-column: 1 / 8;
	grid-row: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	color: var(--accent);
	font-size: var(--t-sm);
	font-weight: 500;
}

.hero__lede {
	grid-column: 1 / 7;
	grid-row: 3;
	align-self: end;
	max-width: 34rem;
}

.hero__tagline {
	margin: 0 0 1rem;
	font-size: clamp(1.6rem, 1rem + 1.3vw, 2.4rem);
	font-weight: 300;
	font-style: italic;
	line-height: 1.25;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.hero__intro {
	margin: 0;
	color: var(--muted);
	font-size: var(--t-sm);
	line-height: 1.5;
}

.hero__services {
	grid-column: 1 / 10;
	grid-row: 4;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem var(--gap);
	list-style: none;
	margin: var(--space-s) 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--line);
	font-size: var(--t-sm);
	font-weight: 500;
	line-height: 1.3;
}

.hero__services li {
	display: grid;
	gap: 0.4rem;
}

.hero__services-num {
	color: var(--accent);
	font-size: var(--t-xs);
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

/* The 3D mark sits in the round side, where the logo's curve is. */
.hero__object {
	grid-column: 10 / 13;
	grid-row: 1 / -1;
	align-self: center;
	justify-self: center;
	position: relative;
	z-index: 2;
	width: min(16vw, 33svh, 17rem);
}

.solid {
	position: relative;
	width: 100%;
	aspect-ratio: 45.21 / 60.5;
	perspective: 1500px;
	container-type: inline-size;
}

.solid__body {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: rotateX(8deg) rotateY(-24deg);
	will-change: transform;
}

.solid__layer,
.solid__face {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.solid__layer {
	transform: translateZ(calc(var(--z) * -1.6px));
	transform: translateZ(calc(var(--z) * -0.42cqi));
}

.solid__face {
	transform: translateZ(0.5px);
}

.solid__shadow {
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: -16%;
	height: 9%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

/*
 * Studio: a two-by-two grid on the page columns. Top row: the title and the
 * lede, tops level. Second row, under a rule: the figures and the longer text.
 */
.studio {
	padding-block: var(--space-xl) var(--space-l);
}

.studio > .wrap > .label {
	margin-bottom: 1.35rem;
}

.studio__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	align-items: start;
}

.studio__title {
	grid-column: 1 / 8;
}

.studio__lede {
	grid-column: 8 / 13;
	max-width: 32em;
	margin: 0;
	padding-top: 0.4rem;
	font-size: var(--t-lede);
	font-weight: 300;
	font-style: italic;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.studio .figures,
.studio__text {
	grid-row: 2;
	margin: var(--space-m) 0 0;
	padding-top: var(--space-s);
	border-top: 1px solid var(--line);
}

.studio .figures {
	grid-column: 1 / 8;
}

.studio .figures dd {
	font-size: clamp(2rem, 1.3rem + 1.8vw, 3rem);
}

.studio__text {
	grid-column: 8 / 13;
	color: var(--muted);
	font-size: var(--t-md);
	line-height: 1.5;
}

.studio__text p {
	max-width: 32em;
	margin: 0 0 0.9em;
}

.studio__text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 800px) {
	.studio .studio__grid > * {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.studio__lede {
		margin-top: 1.5rem;
		padding-top: 0;
	}

	.studio__text {
		margin-top: var(--space-s);
	}
}

.statement {
	padding-top: var(--space-m);
	border-top: 1px solid var(--line);
}

.statement.has-portrait {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gap);
	align-items: start;
}

.statement__portrait {
	grid-column: 1 / 4;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 50% 50% var(--r-flat) var(--r-flat) / 40% 40% var(--r-flat) var(--r-flat);
}

.statement__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.statement__text {
	margin: 0;
	font-size: var(--t-2xl);
	font-weight: 300;
	line-height: 1.06;
	letter-spacing: -0.035em;
	text-indent: 25%;
}

.has-portrait .statement__text {
	grid-column: 4 / 13;
	text-indent: 0;
}

.statement__text .w {
	transition: opacity 0.25s linear;
}

html.js-ready .statement__text .w {
	opacity: var(--o, 0.14);
}

.w--img {
	display: inline-block;
	width: 1.7em;
	height: 0.78em;
	margin-inline: 0.02em;
	overflow: hidden;
	vertical-align: -0.04em;
	border-radius: 0 999px 999px 0;
	background: var(--ink-3);
	text-indent: 0;
}

html.js-ready .statement__text .w--img {
	opacity: 1;
	transform: scale(var(--s, 0));
	transform-origin: 0 50%;
	transition: transform 0.8s var(--ease);
}

.w--img img,
.w--img .swatch {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.w--img .swatch__mark {
	font-size: 0.42em;
}

/* Selected works: the six latest, in the same grid as the works index. */
.works {
	padding-block: var(--space-m) var(--space-xl);
}

/* The works grid: every cover in the same 4:3 frame, the title and "Type · Year" under it. */
.tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2.5rem, 4vw, 4rem) var(--gap);
}

.tile {
	min-width: 0;
}

.tile__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.tile__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--r-tile);
	background: var(--paper-2);
}

.tile__media img,
.tile__media .swatch {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease);
}

.tile__link:hover .tile__media img,
.tile__link:hover .tile__media .swatch,
.tile__link:focus-visible .tile__media img,
.tile__link:focus-visible .tile__media .swatch {
	transform: scale(1.04);
}

.tile__title {
	margin-top: 1rem;
	font-size: var(--t-lg);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}

.tile__info {
	margin: 0.3rem 0 0;
	color: var(--muted);
	font-size: var(--t-sm);
}

/* With a mouse, a "View" disc follows the pointer over a project and stands in for the cursor (main.js). */
.view-dot {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 65;
	width: 0;
	height: 0;
	pointer-events: none;
}

.view-dot span {
	position: absolute;
	left: -2.9rem;
	top: -2.9rem;
	display: grid;
	place-items: center;
	width: 5.8rem;
	height: 5.8rem;
	border-radius: 50%;
	background: var(--blue);
	color: var(--ink);
	font-size: var(--t-sm);
	font-weight: 500;
	transform: scale(0);
	transition: transform 0.5s var(--ease);
}

.view-dot.is-on span {
	transform: scale(1);
}

html.has-view-dot .tile__link {
	cursor: none;
}

@media (hover: none), (pointer: coarse) {
	.view-dot {
		display: none;
	}
}

/* Clients: every logo in one dark colour, weighted to the same size, in a ruled row. */
.clients {
	padding-block: 0 var(--space-xl);
}

.clients__group {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: clamp(2.5rem, 5vw, 4rem) 0 1rem;
	font-size: var(--t-lg);
	font-weight: 500;
	letter-spacing: -0.02em;
}

.clients__group:first-of-type {
	margin-top: 0;
}

.clients__group sup {
	color: var(--muted);
	font-size: var(--t-xs);
	font-weight: 400;
	letter-spacing: 0.04em;
}

/* Any number of columns: every cell rules its left and bottom edges, and the
   list clips the first column's left rule so the row stays open at the sides. */
.clients__list {
	--cols: 6;
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
	clip-path: inset(0 0 0 1px);
}

.client {
	display: grid;
	min-width: 0;
	aspect-ratio: 4 / 3;
	margin-left: -1px;
	border-left: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.client > img,
.client__link {
	place-self: center;
}

.client > img {
	margin: clamp(1rem, 2vw, 1.75rem);
}

.client__link {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: clamp(1rem, 2vw, 1.75rem);
	transition: background-color 0.4s var(--ease);
}

.client__link:hover,
.client__link:focus-visible {
	background: var(--grid);
}

.client__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

/* --w comes from the logo's shape (see bdbrand_client_logo). Greyscale and
   multiply keep a colour logo, or one on white, in the same ink on paper. */
.client__logo {
	--logo: clamp(2rem, 4.2vw, 4.75rem);
	width: calc(var(--logo) * var(--w, 1));
	max-width: 100%;
	height: auto;
	filter: grayscale(1);
	mix-blend-mode: multiply;
	opacity: 0.82;
	transition: opacity 0.4s var(--ease);
}

.client__link:hover .client__logo,
.client__link:focus-visible .client__logo {
	opacity: 1;
}

/* Services: a blue card. The D turns a quarter at each service inside a ring of text. */
.services {
	padding: 0 var(--frame);
}

.services__card {
	padding-block: var(--space-xl);
}

.services__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	align-items: start;
	width: min(100% - 2 * var(--pad-x), var(--wrap));
	margin-inline: auto;
}

.services__visual {
	grid-column: 1 / 6;
	position: sticky;
	top: calc(var(--head-h) + var(--space-s));
}

.services__svg {
	display: block;
	width: 100%;
	max-width: 36rem;
	height: auto;
	margin-inline: auto;
	overflow: visible;
}

.services__shape {
	transform-box: view-box;
	transform-origin: 250px 250px;
	transform: rotate(var(--rot, 0deg));
	transition: transform 1.3s var(--ease);
}

.services__shape path {
	fill: var(--paper);
	fill-opacity: 1;
	stroke: var(--paper);
	stroke-width: 0;
	stroke-linejoin: round;
	transition: fill-opacity 0.7s var(--ease), stroke-width 0.7s var(--ease);
}

.services__card.is-outline .services__shape path {
	fill-opacity: 0;
	stroke-width: 22;
}

/* The ring turns with the scroll, not on a timer. */
.services__ring {
	transform-box: view-box;
	transform-origin: 250px 250px;
	transform: rotate(var(--ring, 0deg));
}

.services__ring-text {
	fill: var(--ink);
	font-size: 21px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: opacity 0.35s ease;
}

.services__ring-text.is-swapping {
	opacity: 0;
}

.services__count {
	margin: 1.25rem 0 0;
	font-size: var(--t-sm);
	font-weight: 500;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.services__main {
	grid-column: 7 / 13;
}

.services .sec-head {
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: var(--space-m);
}

.services .sec-head__main,
.services .sec-head__aside {
	grid-column: 1;
}

.services__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

.service {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	padding-block: 1.6rem;
	border-bottom: 1px solid var(--line);
	transition: opacity 0.6s var(--ease);
}

html.js-ready .service {
	opacity: 0.42;
}

html.js-ready .service.is-active {
	opacity: 1;
}

.service__num {
	grid-row: 1 / 3;
	padding-top: 0.55rem;
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.service__name {
	font-size: var(--t-xl);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.service__desc {
	max-width: 32em;
	margin: 0.65rem 0 0;
	color: color-mix(in srgb, var(--fg) 74%, transparent);
}

/* Process: one row lights up at a time and takes the shape of the solid D. */
.process {
	padding-block: var(--space-xl);
}

.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

.step {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: 2.4rem 4.5rem minmax(0, 3fr) minmax(0, 5fr) 9.5rem;
	align-items: center;
	column-gap: var(--gap);
	min-height: 7.5rem;
	padding: 1.1rem 1rem 1.1rem 1.5rem;
	border-bottom: 1px solid var(--line);
}

.step::before {
	content: "";
	position: absolute;
	inset: -1px 0;
	z-index: -1;
	border-radius: var(--r-flat) 999px 999px var(--r-flat);
	background: var(--blue);
	opacity: 0;
	transform: scaleX(0.97);
	transform-origin: 0 50%;
	transition: opacity 0.45s var(--ease), transform 0.8s var(--ease);
}

.step.is-active::before {
	opacity: 1;
	transform: none;
}

.step__mark {
	position: relative;
	width: 2.2rem;
	aspect-ratio: 45.21 / 27.5;
}

.step__d {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.4s;
}

.step__d--on,
.step.is-active .step__d--off {
	opacity: 0;
}

.step.is-active .step__d--on {
	opacity: 1;
}

.step__num {
	font-size: var(--t-xl);
	font-weight: 300;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.step__name {
	font-size: var(--t-lg);
	font-weight: 500;
	letter-spacing: -0.02em;
}

.step__desc {
	max-width: 34em;
	margin: 0;
	color: var(--muted);
	font-size: var(--t-sm);
	line-height: 1.5;
}

.step.is-active .step__desc {
	color: color-mix(in srgb, var(--ink) 80%, transparent);
}

.step__img {
	grid-column: 5;
	justify-self: end;
	width: 9.5rem;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 0.35rem 999px 999px 0.35rem;
	opacity: 0;
	transform: translateX(-0.75rem);
	transition: opacity 0.45s var(--ease), transform 0.8s var(--ease);
}

.step.is-active .step__img {
	opacity: 1;
	transform: none;
}

.step__img img,
.step__img .swatch {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.step__img .swatch__mark {
	font-size: 1.5rem;
}

/* ---------- 6. Inner pages ---------- */

/* The ink D card at the top of every other page. */
.page-hero {
	padding: var(--head-h) var(--frame) 0;
}

.page-hero__card {
	--pad-y: clamp(1.5rem, 2.8vw, 2.75rem);
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto 1fr auto auto auto;
	column-gap: var(--gap);
	min-height: clamp(26rem, 64svh, 46rem);
	padding: var(--pad-y) var(--pad-x);
}

.page-hero__card.has-media {
	min-height: max(30rem, calc(100svh - var(--head-h) - var(--frame) * 2));
}

.page-hero__top {
	grid-column: 1 / 10;
	grid-row: 1;
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 2rem;
}

.back {
	color: var(--muted);
	font-size: var(--t-sm);
	font-weight: 500;
}

.page-title {
	grid-column: 1 / 11;
	grid-row: 3;
	align-self: end;
	position: relative;
	z-index: 2;
	margin: var(--space-m) 0 0 -0.05em;
	font-size: var(--t-3xl);
	font-weight: 500;
	line-height: 0.86;
	letter-spacing: -0.05em;
	text-transform: uppercase;
}

.page-hero__text {
	grid-column: 1 / 7;
	grid-row: 4;
	position: relative;
	z-index: 2;
	max-width: 30em;
	margin: var(--space-s) 0 0;
	color: color-mix(in srgb, var(--fg) 88%, transparent);
	font-size: var(--t-lede);
	font-weight: 300;
	font-style: italic;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.page-hero__bar {
	grid-column: 1 / -1;
	grid-row: 5;
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-top: var(--space-s);
	padding: 1.25rem calc(var(--r-round) * 0.3) 0 0;
	border-top: 1px solid var(--line);
}

.page-hero__cats {
	margin: 0;
	font-size: var(--t-sm);
}

/* Over a photo the label and the back link are set in paper; blue and grey can disappear into a light cover. */
.page-hero__card.has-media .page-hero__top .label,
.page-hero__card.has-media .back {
	color: var(--paper);
}

.page-hero__card.has-media .page-hero__top,
.page-hero__card.has-media .page-title,
.page-hero__card.has-media .page-hero__bar {
	text-shadow: 0 1px 12px rgba(11, 15, 14, 0.25);
}

/* With no image, the logo itself waits in the round side. */
.page-hero__mark {
	position: absolute;
	top: 44%;
	right: calc(var(--pad-x) + 4vw);
	z-index: 0;
	width: auto;
	height: 54%;
	color: color-mix(in srgb, var(--paper) 8%, var(--ink));
	transform: translateY(-50%);
}

.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.page-hero__img {
	position: absolute;
	inset: -8% 0;
	will-change: transform;
}

.page-hero__img img,
.page-hero__img .swatch {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(11, 15, 14, 0.25) 0%, rgba(11, 15, 14, 0) 7rem),
		linear-gradient(0deg, rgba(11, 15, 14, 0.45) 0%, rgba(11, 15, 14, 0.15) 26%, rgba(11, 15, 14, 0) 45%);
}

/* On phones the title sits higher on the photo, so the soft shade reaches up to it. */
@media (max-width: 800px) {
	.page-hero__media::after {
		background:
			linear-gradient(180deg, rgba(11, 15, 14, 0.25) 0%, rgba(11, 15, 14, 0) 7rem),
			linear-gradient(0deg, rgba(11, 15, 14, 0.5) 0%, rgba(11, 15, 14, 0.25) 40%, rgba(11, 15, 14, 0) 62%);
	}
}

/* Works index */
.filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem clamp(1rem, 2.5vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.filter a {
	color: var(--muted);
	font-size: var(--t-lg);
	font-weight: 400;
	letter-spacing: -0.015em;
	text-decoration: none;
	transition: color 0.3s;
}

.filter a:hover,
.filter .is-active a {
	color: var(--fg);
}

.filter sup {
	font-size: 0.55em;
	top: 0.2em;
}

/* Not ".archive": WordPress puts that class on <body> on archive pages. */
.archive-list {
	padding-block: var(--space-m) var(--space-xl);
}

/* Picking a type swaps the list in place: it fades out, the new rows rise in one after another. */
[data-archive] {
	transition: opacity 0.28s var(--ease), transform 0.5s var(--ease);
}

[data-archive].is-fading {
	opacity: 0;
	transform: translateY(0.75rem);
}

[data-archive] .tile {
	transition: opacity 0.6s var(--ease) calc(var(--n, 0) * 55ms), transform 0.9s var(--ease) calc(var(--n, 0) * 55ms);
}

[data-archive].is-arriving .tile {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: none;
}

.page-title.is-resetting .char {
	transform: translateY(110%);
	transition: none;
}

.listings {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

.listing__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 7fr) minmax(0, 2.5fr) minmax(0, 1fr) 2rem;
	align-items: center;
	column-gap: var(--gap);
	padding-block: clamp(1.25rem, 2.6vw, 2.25rem);
	border-bottom: 1px solid var(--line);
	color: var(--fg);
	text-decoration: none;
	transition: opacity 0.45s var(--ease);
}

.listings:hover .listing__link {
	opacity: 0.3;
}

.listings .listing__link:hover,
.listings .listing__link:focus-visible {
	opacity: 1;
}

.listing__num {
	color: var(--muted);
	font-size: var(--t-sm);
	font-variant-numeric: tabular-nums;
}

.listing__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
	font-size: var(--t-2xl);
	font-weight: 400;
	letter-spacing: -0.05em;
	line-height: 0.95;
}

.listing__meta {
	display: contents;
}

.listing__type,
.listing__year {
	color: var(--muted);
	font-size: var(--t-sm);
}

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

.listing__arrow {
	justify-self: end;
	font-size: var(--t-lg);
	opacity: 0;
	transition: opacity 0.4s;
}

.listing__link:hover .listing__arrow,
.listing__link:focus-visible .listing__arrow {
	opacity: 1;
}

/* A project: the deck beside the details, the story, then more work. */
.work-intro {
	padding-block: var(--space-l) var(--space-m);
}

.work-intro__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--space-s) var(--gap);
	align-items: start;
}

.work-deck {
	grid-column: 1 / 8;
	margin: 0;
	font-size: var(--t-xl);
	font-weight: 300;
	line-height: 1.18;
	letter-spacing: -0.03em;
	text-wrap: pretty;
}

.work-meta {
	grid-column: 9 / 13;
	margin: 0;
	border-top: 1px solid var(--line);
}

.work-meta > div {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: 1rem;
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--line);
}

.work-meta dt {
	padding-top: 0.15rem;
	color: var(--muted);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.work-meta dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.work-meta a {
	text-decoration: underline;
	text-decoration-color: var(--accent);
}

.work-body {
	padding-bottom: var(--space-l);
}

.reading .entry-content {
	max-width: 46rem;
	margin-inline: auto;
}

.reading {
	padding-block: var(--space-l) var(--space-xl);
}

/* Previous and next project under a story, then the way back to all works. With a
   mouse the cover of the one you point at follows the pointer (.work-hover, from
   assets/js/work-nav.js); on touch it sits under the title. */
.work-nav {
	padding-block: var(--space-m) var(--space-xl);
	border-top: 1px solid var(--line);
}

.work-nav__pair {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap);
}

.work-nav__pair::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: var(--line);
}

.work-nav__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding-block: var(--space-s);
	color: inherit;
	text-decoration: none;
}

.work-nav__link--next {
	align-items: flex-end;
	text-align: end;
}

.work-nav__label {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	color: var(--muted);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.work-nav__link--next .work-nav__label {
	flex-direction: row-reverse;
}

.work-nav__label .dbtn__icon {
	margin: 0;
	transition: transform 0.6s var(--ease);
}

.work-nav__link--prev .dbtn__icon svg {
	transform: scaleX(-1);
}

.work-nav__link--prev:hover .dbtn__icon {
	transform: translateX(-0.4rem);
}

.work-nav__link--next:hover .dbtn__icon {
	transform: translateX(0.4rem);
}

.work-nav__title {
	margin-top: var(--space-s);
	font-size: var(--t-h2);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.045em;
	text-wrap: balance;
	transition: color 0.45s var(--ease);
}

.work-nav__link:hover .work-nav__title,
.work-nav__link:focus-visible .work-nav__title {
	color: var(--accent);
}

.work-nav__info {
	margin-top: 0.75rem;
	color: var(--muted);
	font-size: var(--t-sm);
}

.work-nav__media {
	display: block;
	width: 100%;
	margin-top: var(--space-s);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--r-tile);
	background: var(--paper-2);
}

.work-nav__media img,
.work-nav__media .swatch,
.work-hover__item img,
.work-hover__item .swatch {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

html.has-work-hover .work-nav__media {
	display: none;
}

.work-nav__all {
	display: flex;
	justify-content: center;
	margin: var(--space-m) 0 0;
}

/* The cover that follows the pointer; work-nav.js moves it, and on a click grows it
   to fill the window while the next project loads. */
.work-hover {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 60;
	width: clamp(15rem, 24vw, 27rem);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--r-tile);
	background: var(--ink-3);
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}

.work-hover__item {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* 404 */
.notfound .page-hero__card {
	min-height: max(30rem, calc(100svh - var(--head-h) - var(--frame) * 2));
}

.notfound .page-title {
	text-transform: none;
}

.notfound__num {
	display: flex;
	align-items: center;
	gap: 0.04em;
	font-size: clamp(7rem, 24vw, 22rem);
	font-weight: 300;
	line-height: 0.8;
	letter-spacing: -0.06em;
}

.notfound__d {
	width: 0.75em;
	height: 0.75em;
	fill: var(--blue);
}

/* ---------- 7. Footer ---------- */

.site-foot {
	padding: var(--space-l) var(--frame) 0;
}

.foot-card {
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 2.25rem);
}

/* The call and the direct contacts on the left, the form on the right. */
.foot-main {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--space-m) clamp(2rem, 6vw, 7rem);
	align-items: start;
}

.foot-intro .label {
	margin-bottom: 1.25rem;
}

.foot-title {
	max-width: 9em;
	font-size: var(--t-2xl);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.foot-note {
	max-width: 26em;
	margin: 1.25rem 0 0;
	color: var(--muted);
}

.foot-direct {
	display: grid;
	gap: 0.55rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.foot-direct li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.9rem;
}

.foot-direct__label {
	min-width: 4.25rem;
	color: var(--muted);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.foot-direct a {
	color: var(--fg);
	font-size: var(--t-lg);
	font-weight: 300;
	letter-spacing: -0.015em;
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	overflow-wrap: anywhere;
}

.foot-direct .link-btn {
	color: var(--muted);
	font-size: var(--t-sm);
}

.foot-direct .link-btn.is-copied {
	color: var(--accent);
}

.foot-actions {
	margin-top: 1.4rem;
}

/* The contact form: quiet underlined fields on the ink card, the blue button to send. */
.contact-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem var(--gap);
	min-width: 0;
}

.contact-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.field {
	display: grid;
	gap: 0.45rem;
	min-width: 0;
}

.field--wide {
	grid-column: 1 / -1;
}

.field label {
	color: var(--muted);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.field label span {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.field input,
.field textarea {
	width: 100%;
	padding: 0.45rem 0 0.65rem;
	border: 0;
	border-bottom: 1px solid var(--line-strong);
	border-radius: 0;
	background: transparent;
	color: var(--fg);
	font: 300 var(--t-lg) / 1.4 var(--font);
	transition: border-color 0.3s;
}

.field textarea {
	min-height: 6.5rem;
	resize: vertical;
}

.field input:hover,
.field textarea:hover {
	border-bottom-color: color-mix(in srgb, var(--fg) 60%, transparent);
}

.field input:focus,
.field textarea:focus {
	outline: none;
	border-bottom-color: var(--blue);
	box-shadow: 0 1px 0 0 var(--blue);
}

.field input:-webkit-autofill {
	-webkit-text-fill-color: var(--fg);
	caret-color: var(--fg);
	box-shadow: 0 0 0 100px var(--bg) inset;
}

.contact-form__foot {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 0.3rem;
}

.contact-form__status {
	margin: 0;
	color: var(--muted);
	font-size: var(--t-sm);
}

.contact-form.is-sent .contact-form__status {
	color: var(--fg);
}

.contact-form.is-sending button[type="submit"] {
	opacity: 0.6;
	cursor: progress;
}

/* Links, local time and status in one slim row. */
.foot-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	margin-top: var(--space-m);
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	font-size: var(--t-sm);
}

.foot-meta p {
	margin: 0;
}

.foot-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.foot-meta__label {
	color: var(--muted);
}

.foot-clock .clock {
	font-variant-numeric: tabular-nums;
}

.foot-status {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.foot-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-block: 1.6rem 1.75rem;
	color: var(--muted);
	font-size: var(--t-xs);
}

.foot-bottom p {
	margin: 0;
}

.foot-bottom a {
	color: var(--fg);
}

/* ---------- 8. Content blocks ---------- */

.entry-content {
	font-size: var(--t-lg);
	line-height: 1.55;
	letter-spacing: -0.01em;
}

.entry-content > * {
	max-width: 100%;
}

.entry-content > .alignwide {
	width: min(100vw - 2 * var(--gutter), 80rem);
	max-width: none;
	margin-left: calc(50% - min(100vw - 2 * var(--gutter), 80rem) / 2);
}

.entry-content > .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

.entry-content h2 {
	margin: 2.2em 0 0.7em;
	font-size: var(--t-xl);
	font-weight: 500;
	letter-spacing: -0.035em;
}

.entry-content h3 {
	margin: 1.8em 0 0.6em;
	font-size: var(--t-lg);
	font-weight: 500;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
	margin: 0 0 1.2em;
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.3em;
}

.entry-content li {
	margin-bottom: 0.35em;
}

.entry-content a {
	text-decoration-color: var(--accent);
}

.entry-content a:hover {
	color: var(--accent);
}

.entry-content img {
	border-radius: var(--r-flat);
}

.entry-content .wp-block-image,
.entry-content .wp-block-gallery,
.entry-content .wp-block-embed,
.entry-content .wp-block-video {
	margin-block: 2.5rem;
}

.entry-content figcaption,
.wp-caption-text {
	margin-top: 0.75rem;
	color: var(--muted);
	font-size: var(--t-xs);
	letter-spacing: 0.08em;
	text-align: start;
	text-transform: uppercase;
}

.entry-content blockquote {
	margin: 2em 0;
	padding: 0 0 0 1.5rem;
	border-left: 3px solid var(--accent);
	font-size: var(--t-xl);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.03em;
}

.entry-content blockquote cite {
	display: block;
	margin-top: 0.75em;
	color: var(--muted);
	font-size: var(--t-xs);
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.entry-content pre,
.entry-content code {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 0.88em;
}

.entry-content pre {
	padding: 1rem 1.25rem;
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--fg) 7%, transparent);
	overflow-x: auto;
}

.entry-content hr {
	margin: 3em 0;
	border: 0;
	border-top: 1px solid var(--line);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-sm);
}

.entry-content th,
.entry-content td {
	padding: 0.7rem 0.75rem;
	border-bottom: 1px solid var(--line);
	text-align: start;
}

.entry-content .wp-block-button__link {
	border-radius: 0 999px 999px 0;
	background: var(--blue);
	color: var(--ink);
	font-weight: 500;
}

.page-links {
	margin-top: var(--space-s);
	font-weight: 500;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--space-l);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	height: 3rem;
	padding: 0 1rem;
	border: 1px solid var(--line-strong);
	border-radius: 0 999px 999px 0;
	color: var(--fg);
	font-weight: 500;
	text-decoration: none;
}

.pagination .page-numbers.current {
	border-color: var(--fg);
	background: var(--fg);
	color: var(--bg);
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: 36rem;
	margin-top: var(--space-s);
}

.search-field {
	flex: 1 1 14rem;
	min-width: 0;
	min-height: 3.25rem;
	padding: 0 1.25rem;
	border: 1px solid var(--line-strong);
	border-radius: 0 999px 999px 0;
	background: transparent;
	color: var(--fg);
	font: inherit;
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-list .comment {
	padding-block: var(--space-s);
	border-top: 1px solid var(--line);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--line-strong);
	border-radius: 0.5rem;
	background: transparent;
	color: var(--fg);
	font: inherit;
}

.comment-form .submit {
	min-height: 3.25rem;
	padding: 0 1.6rem 0 1.3rem;
	border: 0;
	border-radius: 0 999px 999px 0;
	background: var(--blue);
	color: var(--ink);
	font-weight: 500;
	cursor: pointer;
}

/* A project's story, the same for every work. It sits on the twelve columns of the
   intro above it: each heading opens a numbered section, with the number and title
   on the left and the text on the right, like the front page's section heads. The
   first paragraph is the overview. Images run the full width in 3:2 frames, alone,
   in twos or in threes; an image of another shape (a long band) keeps its own. */
.work-body .entry-content {
	counter-reset: story;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	max-width: none;
}

.work-body .entry-content > *,
.work-body .entry-content > .alignwide {
	grid-column: 1 / -1;
	width: auto;
	max-width: none;
	margin: 0;
}

.work-body .entry-content::before,
.work-body .entry-content > h2::before {
	display: block;
	color: var(--accent);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.6;
	text-transform: uppercase;
}

.work-body .entry-content::before {
	content: "Overview";
	grid-column: 1 / 6;
	padding-top: 0.45em;
}

.work-body .entry-content > h2 {
	grid-column: 1 / 6;
	margin-top: var(--space-l);
	font-size: var(--t-xl);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.work-body .entry-content > h2::before {
	counter-increment: story;
	content: "(" counter(story, decimal-leading-zero) ")";
	margin-bottom: 0.9rem;
}

.work-body .entry-content > p {
	grid-column: 7 / -1;
	margin-bottom: 1em;
	text-wrap: pretty;
}

.work-body .entry-content > h2 + p {
	margin-top: var(--space-l);
}

.work-body .entry-content > .wp-block-image,
.work-body .entry-content > .wp-block-columns {
	margin-top: var(--gap);
}

.work-body .entry-content > p + .wp-block-image,
.work-body .entry-content > p + .wp-block-columns {
	margin-top: var(--space-m);
}

.work-body .entry-content > .wp-block-columns {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: var(--gap);
}

.work-body .entry-content .wp-block-column {
	min-width: 0;
	margin: 0;
}

.work-body .entry-content .wp-block-column > .wp-block-image {
	margin: 0;
}

.work-body .entry-content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--r-tile);
}

.work-body .entry-content .wp-block-image.is-natural img {
	aspect-ratio: auto;
}

/* A film runs the full width at 16:9, with the pictures' corners. */
.work-body .entry-content > .wp-block-video {
	margin-top: var(--gap);
}

.work-body .entry-content > p + .wp-block-video {
	margin-top: var(--space-m);
}

.work-body .entry-content .wp-block-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-tile);
	background: var(--ink);
}


/* ---------- 9. Responsive ---------- */

@media (max-width: 1100px) {
	.hero__object {
		grid-column: 8 / 13;
		grid-row: 1 / 4;
		width: min(20vw, 27svh);
	}

	.hero__lede {
		grid-column: 1 / 9;
	}

	.hero__services,
	.hero__card.has-feature .hero__services {
		grid-column: 1 / 10;
	}

	.hero__featured {
		grid-column: 9 / 13;
		grid-row: 3;
	}

	.hero__dots {
		grid-column: 7 / 13;
		grid-row: 2;
	}

	.services__main {
		grid-column: 6 / 13;
	}

	.step {
		grid-template-columns: 2.2rem 3.75rem minmax(0, 3fr) minmax(0, 5fr);
	}

	.step__img {
		display: none;
	}
}

@media (max-width: 900px) {
	.work-body .entry-content::before,
	.work-body .entry-content > h2,
	.work-body .entry-content > p {
		grid-column: 1 / -1;
	}

	.work-body .entry-content::before {
		margin-bottom: 0.6rem;
		padding-top: 0;
	}

	.work-body .entry-content > h2 + p {
		margin-top: 1rem;
	}
}

@media (max-width: 600px) {
	.work-body .entry-content > .wp-block-columns {
		grid-auto-flow: row;
	}
}

@media (max-width: 960px) {
	.tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.clients__list {
		--cols: 4;
	}
}

@media (max-width: 640px) {
	.clients__list {
		--cols: 3;
	}

	.client__logo {
		--logo: 1.9rem;
	}

	/* Previous and next stack, with the next project first. */
	.work-nav__pair {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.work-nav__pair::before {
		display: none;
	}

	.work-nav__link--next {
		order: -1;
		align-items: flex-start;
		text-align: start;
	}

	.work-nav__link--next .work-nav__label {
		flex-direction: row;
	}

	.work-nav__link--prev {
		border-top: 1px solid var(--line);
	}
}

@media (max-width: 900px) {
	.foot-main {
		grid-template-columns: minmax(0, 1fr);
	}

	.sec-head__main,
	.sec-head__aside {
		grid-column: 1 / -1;
	}

	.sec-head__aside {
		max-width: 36rem;
	}

	.work-deck,
	.work-meta {
		grid-column: 1 / -1;
	}
}

@media (max-width: 800px) {
	:root {
		--head-h: 4.75rem;
		--bar-h: 3.6rem;
		--r-round: clamp(1.5rem, 6vw, 2.25rem);
	}

	.site-head {
		--cap-h: 2.8rem;
	}

	.site-head__row {
		gap: 0.5rem;
	}

	/* The card hangs from the whole bar, edge to edge. */
	.head-nav {
		position: static;
	}

	.pill__time {
		display: none;
	}

	.site-menu {
		left: 0;
		right: 0;
		width: auto;
		transform: translateY(-0.5rem) scale(0.98);
	}

	.site-menu.is-open {
		transform: none;
	}

	.hero__card {
		grid-template-rows: auto 1fr auto auto auto;
		min-height: max(36rem, 100svh);
	}

	.hero__img {
		inset: 0;
	}

	.hero__media::after {
		background:
			linear-gradient(180deg, rgba(11, 15, 14, 0.4) 0%, rgba(11, 15, 14, 0) 8rem),
			linear-gradient(0deg, rgba(11, 15, 14, 0.75) 0%, rgba(11, 15, 14, 0.45) 40%, rgba(11, 15, 14, 0) 70%);
	}

	.hero__featured {
		grid-column: 1 / -1;
		grid-row: 5;
		justify-self: start;
		margin: 1.75rem 0 0;
	}

	.hero__go {
		justify-self: start;
	}

	.hero__dots {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: start;
		margin-bottom: 1.1rem;
	}

	.hero__kicker {
		grid-column: 1 / -1;
	}

	.hero__object {
		grid-column: 6 / 13;
		grid-row: 2;
		justify-self: end;
		width: 34vw;
		margin: 1.25rem 3vw 0 0;
	}

	.hero__lede {
		grid-column: 1 / -1;
	}

	.hero__services,
	.hero__card.has-feature .hero__services {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.statement__text {
		text-indent: 0;
	}

	.statement.has-portrait > * {
		grid-column: 1 / -1;
	}

	.statement__portrait {
		width: 60%;
	}

	.services__visual {
		position: static;
		grid-column: 1 / -1;
		width: min(72%, 24rem);
		margin: 0 auto var(--space-m);
	}

	.services__main {
		grid-column: 1 / -1;
	}

	html.js-ready .service {
		opacity: 1;
	}

	.step {
		grid-template-columns: 2rem 2.6rem minmax(0, 1fr);
		grid-template-areas:
			"mark num name"
			". . desc";
		row-gap: 0.45rem;
		min-height: 0;
		padding: 1.15rem 1.5rem 1.15rem 1rem;
	}

	.step__mark {
		grid-area: mark;
		width: 1.9rem;
	}

	.step__num {
		grid-area: num;
		font-size: var(--t-lg);
	}

	.step__name {
		grid-area: name;
	}

	.step__desc {
		grid-area: desc;
	}

	.page-hero__card {
		grid-template-rows: auto auto auto auto auto;
		min-height: 0;
	}

	.page-hero__card.has-media {
		min-height: max(28rem, 76svh);
	}

	.page-hero__top,
	.page-title,
	.page-hero__text {
		grid-column: 1 / -1;
	}

	.page-title {
		margin-top: var(--space-l);
	}

	.page-hero__mark {
		top: 1.5rem;
		right: 9%;
		height: 9rem;
		transform: none;
	}

	.page-hero__bar {
		padding-right: 0;
	}

	.listing__link {
		grid-template-columns: 2rem minmax(0, 1fr);
		grid-template-areas:
			"num title"
			"num meta";
		row-gap: 0.5rem;
	}

	.listing__num {
		grid-area: num;
		align-self: start;
		padding-top: 0.4rem;
	}

	.listing__title {
		grid-area: title;
		font-size: var(--t-xl);
	}

	.listing__meta {
		grid-area: meta;
		display: flex;
		gap: 1rem;
	}

	.listing__arrow {
		display: none;
	}
}

/* Phones: the hero's words take less of the picture. A smaller tagline, and the four
   services as one short line instead of a two-by-two grid. */
@media (max-width: 600px) {
	.hero__tagline {
		margin-bottom: 0.6rem;
		font-size: 1.35rem;
		line-height: 1.2;
	}

	.hero__intro {
		font-size: 0.8125rem;
		line-height: 1.45;
	}

	.hero__services,
	.hero__card.has-feature .hero__services {
		display: flex;
		flex-wrap: wrap;
		gap: 0.2rem 0;
		margin-top: 1rem;
		padding-top: 0.75rem;
		font-size: 0.75rem;
	}

	.hero__services li {
		display: inline;
		white-space: nowrap;
	}

	/* The dot ends an item, so a line that wraps never starts with one. */
	.hero__services li:not(:last-child)::after {
		content: "·";
		margin: 0 0.45rem;
		color: var(--muted);
	}

	.hero__services-num {
		display: none;
	}

	.hero__featured {
		margin-top: 1.25rem;
	}
}

@media (max-width: 600px) {
	.pill__cta {
		display: none;
	}

	.tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	.contact-form {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 520px) {
	.brand__name {
		font-size: 0.95rem;
	}

	.brand__tag {
		font-size: 0.8rem;
	}

	.brand {
		padding-right: 1.1rem;
	}

	.pill__progress {
		display: none;
	}

	.foot-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.foot-meta {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- 10. Utilities, motion, print ---------- */

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

.screen-reader-text:focus {
	top: 5px;
	left: 5px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 1rem;
	clip: auto;
	clip-path: none;
	background: var(--blue);
	color: var(--ink);
}

[hidden] {
	display: none !important;
}

.alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption {
	max-width: 100%;
}

.sticky,
.bypostauthor,
.gallery-caption {
	/* Reserved WordPress classes. */
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}

	.preloader,
	.curtain {
		display: none !important;
	}

	.split .char,
	[data-hero-fade] {
		opacity: 1 !important;
		transform: none !important;
	}

	.hero__img img {
		transform: none;
		transition: none;
	}

	html.js-ready .statement__text .w {
		opacity: 1;
	}

	html.js-ready .statement__text .w--img {
		transform: none;
	}
}

@media print {
	.site-head,
	.curtain,
	.preloader,
	.grid-overlay {
		display: none !important;
	}

	[data-section] {
		background: #fff !important;
		color: #000 !important;
	}
}