/* Layout and components. Tokens are in style.css. */

/* ---------- Shell ---------- */

.wrap {
	width: 100%;
	max-width: var(--page-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--narrow {
	max-width: 52rem;
}

.section {
	padding-block: clamp(3.5rem, 9vw, 8rem);
}

.section--tight {
	padding-block: clamp(2rem, 5vw, 4rem);
}

.rule {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 0;
}

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

/* Solid background, deliberately.
   This used to be a translucent ground with backdrop-filter blur. On iOS
   Safari a sticky element with backdrop-filter gets its own compositing
   layer, and that layer is repeatedly reported painting a solid band over
   the header's own contents — which is exactly how it showed up here, with
   the top of the logo sliced off. The blur was a small flourish; a header
   that renders reliably on a phone is worth more.
   color-mix() has gone with it: on any browser that does not support it the
   whole declaration is dropped and the header ends up transparent. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s var(--ease);
}

.site-header.is-scrolled {
	border-bottom-color: var(--rule);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 5.5rem;
	/* Padding as well as a minimum height: if the logo ever renders taller
	   than expected — a stylesheet still loading, a replacement image with
	   different proportions — the header grows to fit rather than cropping
	   the top off it. min-height still governs the normal case. */
	padding-block: 0.5rem;
}

.site-brand {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
}

.site-brand span {
	display: block;
	margin-top: 0.35em;
	font-size: 0.5rem;
	font-weight: 400;
	letter-spacing: 0.3em;
	color: var(--ink-faint);
}

/* The real logo, set in Appearance → Customize → Site Identity. WordPress
   wraps it in .custom-logo-link, which is a different element from the typed
   fallback — both need sizing or the logo renders at its full pixel width. */
.site-brand img,
.custom-logo-link img {
	max-height: 4rem;
	width: auto;
	display: block;
}

.custom-logo-link {
	display: block;
	line-height: 0;
}

@media (max-width: 800px) {
	.site-brand img,
	.custom-logo-link img {
		max-height: 2.75rem;
	}
}

/* ---------- Navigation ---------- */

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-sans);
	font-size: var(--step--1);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.nav__list a {
	text-decoration: none;
	padding-block: 0.5rem;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var(--ease);
}

.nav__list a:hover,
.nav__list .current-menu-item > a {
	border-bottom-color: var(--ink);
}

.nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: var(--step--1);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media (max-width: 800px) {
	.nav-toggle {
		display: block;
	}

	/* The drawer hangs BELOW the header rather than sliding up through it.

	   It used to be position:fixed, parked above the viewport with
	   translateY(-120%) — but that is 120% of the drawer's own height, not
	   the distance to the top of the screen, so a short menu never cleared
	   the header and its solid background painted over the logo. Hiding it
	   fixed that everywhere except iOS, where a position:fixed child of a
	   position:sticky parent is positioned and composited differently again.

	   Anchoring it at top:100% of the header removes the problem rather than
	   suppressing it: its resting position is past the bottom edge of the
	   header, so there is no overlap to paint even when it is fully open. */
	.nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--paper);
		border-bottom: 1px solid var(--rule);
		padding: 1.5rem var(--gutter) 2.5rem;
		opacity: 0;
		transform: translateY(-0.5rem);
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
	}

	.nav.is-open {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s;
	}

	.nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
		font-size: var(--step-1);
		letter-spacing: 0.06em;
		text-transform: none;
	}
}

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

.hero {
	position: relative;
	min-height: min(88svh, 46rem);
	display: grid;
	align-items: end;
	overflow: clip;
}

.hero__media {
	position: absolute;
	inset: 0;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Focus point from Studio details; centre when nothing has been chosen. */
	object-position: var(--hero-focus, 50% 50%);
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 11, 13, 0.62) 0%, rgba(10, 11, 13, 0.12) 42%, transparent 70%);
}

.hero__body {
	position: relative;
	padding-block: clamp(2.5rem, 6vw, 5rem);
	color: #fff;
	max-width: 46rem;
}

.hero__body h1 {
	font-size: var(--step-3);
	margin-bottom: 0.35em;
}

.hero__body p {
	font-size: var(--step-1);
	line-height: 1.45;
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
}

/* ---------- Eyebrow / meta labels ---------- */

.eyebrow {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 1.25rem;
}

.hero .eyebrow {
	color: rgba(255, 255, 255, 0.75);
}

/* ---------- Buttons ---------- */

.btn {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: var(--step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1rem 2rem;
	border: 1px solid currentColor;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

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

.hero .btn:hover {
	background: #fff;
	color: var(--ink);
	border-color: #fff;
}

/* ---------- Project grid ---------- */

.project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
	gap: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.card {
	margin: 0;
}

.card__media {
	/* This is an <a>. Without display:block the aspect-ratio below is ignored
	   and every card collapses to its image's own proportions. */
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: clip;
	background: var(--paper-warm);
}

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

.card:hover .card__media img {
	transform: scale(1.035);
}

.card__stage {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: rgba(255, 255, 255, 0.94);
	font-family: var(--font-sans);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.4rem 0.7rem;
}

.card__body {
	padding-top: 1rem;
}

.card__title {
	font-size: var(--step-1);
	margin: 0 0 0.25rem;
}

.card__title a {
	text-decoration: none;
}

.card__meta {
	font-family: var(--font-sans);
	font-size: var(--step--1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0;
}

/* A hero card that spans the grid — used for the most recent project. */
.project-grid > .card--wide {
	grid-column: 1 / -1;
}

.card--wide .card__media {
	aspect-ratio: 16 / 8;
}

/* ---------- Filters ---------- */

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0 0 clamp(2rem, 4vw, 3.5rem);
	padding: 0;
	list-style: none;
	font-family: var(--font-sans);
	font-size: var(--step--1);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.filters a {
	text-decoration: none;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid transparent;
}

.filters a:hover,
.filters .is-current a {
	border-bottom-color: var(--ink);
}

/* ---------- Project page ---------- */

.project-header {
	display: grid;
	gap: clamp(1.5rem, 4vw, 4rem);
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: start;
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

@media (max-width: 860px) {
	.project-header {
		grid-template-columns: 1fr;
	}
}

.project-header h1 {
	font-size: var(--step-2);
	margin-bottom: 0.4em;
}

.project-facts {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--step--1);
}

.project-facts div {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--rule);
}

.project-facts dt {
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.project-facts dd {
	margin: 0;
	text-align: right;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.tags li {
	font-family: var(--font-sans);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.4rem 0.75rem;
	background: var(--paper-warm);
	color: var(--ink-soft);
}

/* Galleries */

.gallery-section + .gallery-section {
	margin-top: clamp(3rem, 7vw, 6rem);
}

.gallery-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--rule);
}

.gallery-section__head h2 {
	font-size: var(--step-1);
	margin: 0;
}

.gallery-section__count {
	font-family: var(--font-sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
	letter-spacing: 0.1em;
}

/* One tile size for every section — photographs, visuals and drawings alike.
   17.5rem is about 20% down from the 22rem this used to be, so more work is
   visible at once and the three sections read as one grid rather than three
   different layouts. */
.gallery {
	display: grid;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	grid-template-columns: repeat(auto-fill, minmax(min(17.5rem, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Every tile is the same box, whatever shape the picture inside it is. */
.gallery__item button {
	aspect-ratio: 4 / 3;
	background: var(--paper-warm);
	overflow: clip;
}

.gallery__item img {
	width: 100%;
	height: 100%;
}

/* Photographs fill their tile. */
.gallery--photos img {
	object-fit: cover;
}

/* Drawings and rendered views are exported as A3 presentation sheets — a title
   block and two views on a white page. Cropping one to fill a tile cuts the
   drawing in half, so sheets sit whole inside the same box instead, on the
   warm ground. Click any of them for the full-size version. */
.gallery--plans img,
.gallery--visuals img {
	object-fit: contain;
	padding: 0.5rem;
}

.gallery__item {
	margin: 0;
	position: relative;
}

.gallery__item button {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.gallery__item figcaption {
	font-family: var(--font-sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
	padding-top: 0.6rem;
}

/* First image in a photo gallery reads as the lead image. */
/* The first photograph used to span the full width as a lead image. Every
   tile is equal now, so the three sections stay consistent. */

/* ---------- Lightbox ---------- */

.lightbox {
	border: 0;
	padding: 0;
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
	background: rgba(12, 13, 15, 0.96);
}

.lightbox::backdrop {
	background: rgba(12, 13, 15, 0.96);
}

.lightbox__figure {
	margin: 0;
	height: 100%;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
}

.lightbox__figure img {
	max-width: 100%;
	max-height: 84vh;
	width: auto;
	object-fit: contain;
}

.lightbox__caption {
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-sans);
	font-size: var(--step--1);
	padding-top: 1rem;
	text-align: center;
}

.lightbox__close,
.lightbox__nav button {
	position: absolute;
	background: none;
	border: 0;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	padding: 1rem;
	cursor: pointer;
	opacity: 0.7;
}

.lightbox__close:hover,
.lightbox__nav button:hover {
	opacity: 1;
}

.lightbox__close {
	top: 0.5rem;
	right: 0.75rem;
}

.lightbox__nav .prev {
	left: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
}

.lightbox__nav .next {
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
}

/* ---------- Editorial content ---------- */

.prose h2 {
	font-size: var(--step-1);
	margin-top: 2em;
}

.prose > *:first-child {
	margin-top: 0;
}

.prose ul,
.prose ol {
	max-width: var(--measure);
	padding-left: 1.25em;
}

.prose li {
	margin-bottom: 0.5em;
}

.prose blockquote {
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--accent);
	font-size: var(--step-1);
	line-height: 1.4;
}

/* ---------- Services ---------- */

/* Four services: two abreast on a tablet, four across on a wide screen —
   never three with an orphan on the second row. */
.services {
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40rem) and (max-width: 68rem) {
	.services {
		grid-template-columns: repeat(2, 1fr);
	}
}

.service {
	padding-top: 1.5rem;
	border-top: 1px solid var(--ink);
}

.service h3 {
	font-size: var(--step-1);
}

.service p {
	color: var(--ink-soft);
	margin-bottom: 0;
}

/* ---------- Process steps ---------- */

.steps {
	counter-reset: step;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.steps li {
	counter-increment: step;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
}

.steps li::before {
	content: counter(step, decimal-leading-zero);
	display: block;
	font-family: var(--font-sans);
	font-size: var(--step--1);
	letter-spacing: 0.16em;
	color: var(--accent);
	margin-bottom: 0.75rem;
}

.steps h3 {
	font-size: var(--step-0);
	font-weight: 600;
	margin-bottom: 0.4em;
}

.steps p {
	font-size: 0.95rem;
	color: var(--ink-soft);
	margin: 0;
}

/* ---------- Two-column feature ---------- */

.feature {
	display: grid;
	gap: clamp(2rem, 5vw, 5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
	align-items: center;
}

/* ---------- Contact ---------- */

.contact-grid {
	display: grid;
	gap: clamp(2rem, 5vw, 5rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

@media (max-width: 860px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

.contact-details {
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.7;
}

.contact-details a {
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
}

.wpcf7 label {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--step--1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--rule);
	background: var(--paper);
	font: inherit;
	font-family: var(--font-body);
	text-transform: none;
	letter-spacing: normal;
}

.wpcf7 input[type="submit"] {
	font-family: var(--font-sans);
	font-size: var(--step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 1rem 2.25rem;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--paper);
	color: var(--ink);
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 1.25rem 0 0;
	list-style: none;
	font-family: var(--font-sans);
	font-size: var(--step--1);
	color: var(--ink-faint);
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--rule);
}

.breadcrumbs a {
	text-decoration: none;
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--ink);
	color: rgba(255, 255, 255, 0.72);
	padding-block: clamp(3rem, 6vw, 5rem) 2rem;
	font-family: var(--font-sans);
	font-size: var(--step--1);
	line-height: 1.8;
}

.site-footer a {
	color: #fff;
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

.footer-grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	padding-bottom: 3rem;
}

.footer-grid h2 {
	font-size: var(--step--1);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 1rem;
}

.footer-grid ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.45);
}

/* ---------- Pagination ---------- */

.pagination {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 3rem;
	font-family: var(--font-sans);
	font-size: var(--step--1);
}

.pagination .page-numbers {
	padding: 0.6rem 0.95rem;
	border: 1px solid var(--rule);
	text-decoration: none;
}

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

/* ---------- About ---------- */

/* The portrait is shot on pure white with the figure to the right of frame.
   Rather than boxing it, the text takes the empty side and the photograph's
   own ground becomes the page. */
/* Text top-aligned, not centred.
   The portrait is tall — around 695px on a desktop column — and the text
   block is roughly 430px. Centring the two left 130px of dead space above
   the strapline, before the section's own top padding had even been added.
   Aligning to the top closes that up and starts the page on the name. */
.about-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: start;
	gap: clamp(1.5rem, 4vw, 4rem);
	padding-block: clamp(0.5rem, 1.5vw, 1.5rem) clamp(1.5rem, 3vw, 3rem);
}

.about-intro__text h1 {
	font-size: var(--step-3);
	margin-bottom: 0.2em;
}

.about-intro__creds {
	font-family: var(--font-sans);
	font-size: var(--step--1);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 1.75rem;
}

.about-intro__lede {
	font-size: var(--step-1);
	line-height: 1.45;
	margin: 0;
}

.about-intro__portrait {
	margin: 0;
}

/* Crop the empty left half away so the figure fills the frame.
   The portrait is shot on rgb(254,254,254) — one point off white, which is
   just enough to show as a faint grey rectangle on a #fff page. Lifting
   brightness by under one percent clamps that ground to pure white so the
   figure sits directly on the page, and moves the tones in the photograph
   itself by an amount no one can see. */
.about-intro__portrait img {
	width: 100%;
	aspect-ratio: 4 / 5;
	/* Capped so the portrait stays in proportion to the text beside it on a
	   wide screen instead of towering over it. */
	max-height: 32rem;
	object-fit: cover;
	object-position: 78% center;
	filter: brightness(1.008);
}

@media (max-width: 860px) {
	.about-intro {
		grid-template-columns: 1fr;
	}

	.about-intro__portrait {
		order: -1;
	}

	.about-intro__portrait img {
		aspect-ratio: 3 / 2;
		object-position: 72% center;
	}
}

/* Credentials strip */

.creds {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin: 0;
	padding: 2rem 0 0;
	border-top: 1px solid var(--rule);
	list-style: none;
}

.creds strong {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.creds span {
	color: var(--ink-soft);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* The biography runs at a comfortable measure but stays on the same left edge
   as the name, the credentials and the footer. Centring it inside the page
   reads as a misalignment, not a decision. */
.about-body {
	max-width: 46rem;
	margin-inline: 0;
}

/* Hero with no photograph behind it — before any projects have been added, or
   if a project has no cover image. The band keeps its white text on a solid
   dark ground rather than rendering white on white, and sits shorter, because
   without an image there is nothing to fill the height. */
.hero--plain {
	background: var(--ink);
	min-height: 0;
}

.hero--plain .hero__body {
	padding-block: clamp(4rem, 10vw, 8rem);
}

/* No portrait set yet — one column, so the text is not stranded beside an
   empty half of the page. */
.about-intro--noimage {
	grid-template-columns: 1fr;
	max-width: 62rem;
	margin-inline: 0;
}