/* ==========================================================================
   Polder — main stylesheet

   Layout and components only. Every value here resolves to a variable defined
   in tokens.css; do not hard-code colors, typefaces, or sizes in this file.

   Contents
     1.  Base
     2.  Typography
     3.  Layout utilities
     4.  Eyebrow device
     5.  Buttons and links
     6.  Header and navigation
     7.  Footer
     8.  Hero
     9.  Homepage sections
     10. Cards and grids
     11. Project archive
     12. Single project
     13. Story page
     14. Basements page
     15. Generic pages and index
     16. WordPress block support
     17. Reveal on scroll
   ========================================================================== */


/* 1. Base ================================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--porcelain);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 400;
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.nav-open {
	overflow: hidden;
}

img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

:focus-visible {
	outline: 2px solid var(--bronze);
	outline-offset: 3px;
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--s-2) var(--s-3);
	background: var(--ink);
	color: var(--porcelain);
	font-size: var(--step--1);
	letter-spacing: var(--tracking-nav);
	text-transform: uppercase;
	text-decoration: none;
}

.skip-link:focus {
	left: var(--s-2);
	top: var(--s-2);
}

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


/* 2. Typography =========================================================== */

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 300;
	letter-spacing: var(--tracking-display);
	line-height: var(--leading-display);
	margin: 0 0 var(--s-3);
	text-wrap: balance;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p {
	margin: 0 0 var(--s-3);
	text-wrap: pretty;
}

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

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	transition: color var(--dur-fast) var(--ease);
}

.lead {
	font-size: var(--step-1);
	line-height: 1.5;
	color: var(--ink-70);
}

.display {
	font-family: var(--font-display);
	font-weight: 300;
	letter-spacing: var(--tracking-display);
	line-height: var(--leading-display);
}

.caption {
	font-size: var(--step--1);
	color: var(--ink-55);
	letter-spacing: 0.02em;
}

blockquote {
	margin: var(--s-5) 0;
	padding-left: var(--s-3);
	border-left: 1px solid var(--rule-bronze);
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-style: italic;
	font-weight: 300;
	line-height: 1.4;
}


/* 3. Layout utilities ===================================================== */

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

.container--wide {
	max-width: var(--container-wide);
}

.container--narrow {
	max-width: calc(var(--container-narrow) + (var(--gutter) * 2));
}

.section {
	padding-block: var(--section-y);
}

.section--tight {
	padding-block: calc(var(--section-y) * 0.62);
}

.section--stone { background: var(--stone); }

.section--ink {
	background: var(--ink);
	color: var(--porcelain);
}

.section--ink p { color: var(--paper-72); }
.section--ink a { color: var(--porcelain); }

.section__head {
	margin-bottom: var(--s-5);
}

.section__head--center {
	text-align: center;
	max-width: 46rem;
	margin-inline: auto;
}

/* The heading inside a .section__head. Sits directly under the eyebrow, so it
   carries no top margin of its own. */
.section__title {
	margin: 0;
	font-size: var(--step-2);
}

.rule {
	height: 1px;
	background: var(--rule);
	border: 0;
	margin: 0;
}


/* 4. Eyebrow device ======================================================= */

/* — OUR WORK — : the signature section label, lifted from the logo. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin: 0 0 var(--s-3);
	color: var(--bronze);
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: var(--tracking-eyebrow);
	line-height: 1;
	text-transform: uppercase;
}

.eyebrow__text {
	/* The tracking adds space after the final letter; pull it back. */
	margin-right: calc(var(--tracking-eyebrow) * -1);
	white-space: nowrap;
}

.eyebrow__rule {
	flex: 0 0 auto;
	width: clamp(1.75rem, 4vw, 3.25rem);
	height: 1px;
	background: var(--rule-bronze);
}

/* Centred variant: rules stretch to fill the available width. */
.eyebrow--center {
	justify-content: center;
}

.eyebrow--center .eyebrow__rule {
	flex: 1 1 auto;
	max-width: 4.5rem;
}

/* On the hero and other dark grounds the rules need a touch more presence. */
.eyebrow--on-ink .eyebrow__rule {
	background: var(--bronze);
	opacity: 0.7;
}


/* 5. Buttons and links ==================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	justify-content: center;
	max-width: 100%;
	padding: 0.95rem 2rem;
	border: 1px solid var(--ink);
	background: transparent;
	text-align: center;
	/* The email address is the longest label on the site; let it break rather
	   than push the layout wider than the screen on a small phone. */
	overflow-wrap: anywhere;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: var(--tracking-nav);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease);
}

.btn:hover,
.btn:focus-visible {
	background: var(--ink);
	color: var(--porcelain);
}

.btn--on-ink {
	border-color: var(--rule-light);
	color: var(--porcelain);
}

.btn--on-ink:hover,
.btn--on-ink:focus-visible {
	background: var(--porcelain);
	border-color: var(--porcelain);
	color: var(--ink);
}

/* Quiet text link with a bronze rule that extends on hover. */
.link-arrow {
	display: inline-block;
	padding-bottom: 0.35em;
	border-bottom: 1px solid var(--rule-bronze);
	color: inherit;
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: var(--tracking-nav);
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease);
}

.link-arrow:hover,
.link-arrow:focus-visible {
	border-color: var(--bronze);
	color: var(--bronze);
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3) var(--s-4);
}

@media (max-width: 380px) {
	.btn {
		padding-inline: 1.25rem;
	}
}


/* 6. Header and navigation ================================================ */

.site-header {
	position: relative;
	z-index: 20;
	background: var(--porcelain);
	border-bottom: 1px solid var(--rule);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding: var(--s-3) var(--gutter);
}

/* Over the opening photograph on the homepage and single projects. */
.site-header--overlay {
	position: absolute;
	inset: 0 0 auto 0;
	background: transparent;
	border-bottom: 0;
	color: var(--porcelain);
}

.site-header__brand {
	display: flex;
	align-items: center;
	min-width: 0;
}

.brand-wordmark {
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-decoration: none;
	white-space: nowrap;
}

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

.site-header .custom-logo {
	width: auto;
	height: clamp(1.75rem, 3.4vw, 2.5rem);
}

/* The logo is dark artwork; invert it where the header sits on a photograph. */
.site-header--overlay .custom-logo {
	filter: brightness(0) invert(1);
}

.site-nav .nav__list,
.site-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.6vw, 2.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	position: relative;
	display: inline-block;
	padding-block: 0.35em;
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: var(--tracking-nav);
	text-transform: uppercase;
	text-decoration: none;
}

.site-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--bronze);
	transition: width var(--dur-fast) var(--ease);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav .current-menu-item > a::after,
.site-nav .current_page_item > a::after {
	width: 100%;
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: var(--tracking-nav);
	text-transform: uppercase;
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 1px;
	background: currentColor;
	transition: transform var(--dur-fast) var(--ease),
	            opacity var(--dur-fast) var(--ease);
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;
}

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

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

@media (max-width: 899px) {

	.nav-toggle {
		display: inline-flex;
		position: relative;
		z-index: 2;
	}

	.site-nav {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 1;
		background: var(--ink);
		color: var(--porcelain);
		padding: calc(var(--s-7) + var(--s-2)) var(--gutter) var(--s-5);
		overflow-y: auto;
	}

	/* The toggle sits immediately before the nav in the markup. */
	.nav-toggle[aria-expanded="true"] + .site-nav {
		display: block;
	}

	.site-nav .nav__list,
	.site-nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-3);
	}

	.site-nav a {
		font-family: var(--font-display);
		font-size: var(--step-2);
		font-weight: 300;
		letter-spacing: var(--tracking-display);
		text-transform: none;
	}

	.site-nav a::after {
		display: none;
	}

	.site-header--overlay .nav-toggle[aria-expanded="true"],
	.nav-toggle[aria-expanded="true"] {
		color: var(--porcelain);
	}
}


/* 7. Footer =============================================================== */

.site-footer {
	background: var(--ink);
	color: var(--paper-72);
	padding-top: var(--section-y);
}

.site-footer a {
	color: var(--porcelain);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease);
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--bronze);
	border-color: var(--rule-bronze);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5) var(--grid-gap);
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding: 0 var(--gutter) var(--s-6);
}

@media (min-width: 700px) {
	.site-footer__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.site-footer__inner {
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
	}
}

.site-footer__wordmark {
	margin-bottom: var(--s-1);
	color: var(--porcelain);
	font-size: var(--step-0);
	font-weight: 600;
	letter-spacing: 0.22em;
}

.site-footer__area {
	color: var(--paper-45);
	font-size: var(--step--1);
}

.site-footer__heading {
	margin-bottom: var(--s-2);
	color: var(--bronze);
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
}

.site-footer p,
.site-footer li {
	font-size: var(--step--1);
	line-height: 2;
}

.site-footer__address {
	color: var(--paper-45);
}

.site-footer__social,
.site-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__base {
	border-top: 1px solid var(--rule-light);
}

.site-footer__base p {
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding: var(--s-3) var(--gutter);
	color: var(--paper-45);
	font-size: var(--step--1);
}


/* 8. Hero ================================================================= */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* min-height would win over max-height, so cap inside the value itself.
	   The floor is 70vh, with a rem floor under it so a short landscape phone
	   still gets a usable band. svh keeps mobile browser chrome out of it. */
	height: min(88vh, 980px);
	height: min(88svh, 980px);
	min-height: max(70vh, 26rem);
	min-height: max(70svh, 26rem);
	overflow: hidden;
	background: var(--stone);
	color: var(--porcelain);
	isolation: isolate;
}

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

.hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The house sits on the upper third; hold it in frame as the crop narrows. */
	object-position: center;
}

/* A flat wash for legibility, deepened top and bottom so the transparent
   header and the headline both keep their contrast over a bright sky. */
.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, var(--scrim-deep) 0%, rgb(0 0 0 / 0) 30%),
		linear-gradient(to top, var(--scrim-deep) 0%, rgb(0 0 0 / 0) 55%),
		var(--scrim-hero);
}

.hero__inner {
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding: var(--s-6) var(--gutter) var(--s-5);
}

/* Sized in rem, not ch: ch here would be measured in the body font while the
   headline is set in the much wider display font. */
.hero__content {
	max-width: 52rem;
}

.hero__title {
	margin: 0 0 var(--s-3);
	font-size: var(--step-4);
	font-weight: 300;
}

.hero__subtitle {
	max-width: 46rem;
	margin: 0;
	color: rgb(247 246 244 / 0.9);
	font-size: var(--step-0);
	letter-spacing: 0.01em;
}

.hero__actions {
	margin: var(--s-4) 0 0;
}

.hero__note {
	margin-top: var(--s-3);
	color: rgb(247 246 244 / 0.7);
	font-size: var(--step--1);
}


/* 9. Homepage sections ==================================================== */

/* Intro ------------------------------------------------------------------ */
.intro__body {
	max-width: 54ch;
}

.intro__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4) var(--grid-gap);
	align-items: start;
}

@media (min-width: 900px) {
	.intro__grid {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
		gap: var(--s-6);
	}
}

/* Featured work ---------------------------------------------------------- */
.featured__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--s-3);
	margin-bottom: var(--s-5);
}

.featured__title {
	margin: 0;
}

/* Story teaser ----------------------------------------------------------- */
.story-teaser {
	text-align: center;
}

.story-teaser__inner {
	max-width: 58ch;
	margin-inline: auto;
}

.story-teaser__title {
	margin-bottom: var(--s-3);
	font-size: var(--step-3);
	font-style: italic;
}

.story-teaser .link-arrow {
	margin-top: var(--s-3);
}

/* Services --------------------------------------------------------------- */
.services__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4) var(--grid-gap);
	margin-top: var(--s-5);
}

@media (min-width: 760px) {
	.services__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.service {
	padding-top: var(--s-3);
	border-top: 1px solid var(--rule-bronze);
}

.service__name {
	margin: 0 0 var(--s-1);
	font-size: var(--step-1);
}

.service__line {
	margin: 0;
	color: var(--ink-70);
	font-size: var(--step--1);
	line-height: 1.7;
}

/* Contact ---------------------------------------------------------------- */
.contact {
	text-align: center;
}

.contact__inner {
	max-width: 48ch;
	margin-inline: auto;
}

.contact__title {
	margin-bottom: var(--s-3);
	font-size: var(--step-3);
}

.contact .btn-row {
	justify-content: center;
	margin-top: var(--s-4);
}

.contact__phone {
	color: var(--paper-72);
	font-size: var(--step--1);
	letter-spacing: var(--tracking-nav);
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.contact__phone:hover,
.contact__phone:focus-visible {
	border-color: var(--rule-bronze);
	color: var(--bronze);
}


/* 10. Cards and grids ===================================================== */

/* The shared panel: square corners, a hairline, no shadow. Sits on stone or
   porcelain and takes its own paper ground so it reads as a distinct block. */
.card {
	display: flex;
	flex-direction: column;
	padding: var(--s-4);
	background: var(--porcelain);
	border: 1px solid var(--rule);
}

.project-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5) var(--grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.project-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1040px) {
	.project-grid--three {
		grid-template-columns: repeat(3, 1fr);
	}
}

.project-card {
	position: relative;
}

.project-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--stone);
	margin-bottom: var(--s-3);
}

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

.project-card:hover .project-card__media img,
.project-card:focus-within .project-card__media img {
	transform: scale(1.035);
}

/* Empty state for a project with no photograph yet. */
.project-card__media--empty::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(160deg, var(--stone) 0%, #e2ddd3 100%);
}

.project-card__title {
	margin: 0 0 0.35rem;
	font-size: var(--step-1);
	font-weight: 300;
}

.project-card__title a {
	text-decoration: none;
}

/* Make the whole card clickable without nesting interactive elements. */
.project-card__title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.project-card__location {
	margin: 0;
	color: var(--ink-55);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}


/* 11. Project archive ===================================================== */

.archive-head {
	padding-block: calc(var(--section-y) * 0.8) var(--s-5);
}

.archive-head__inner {
	max-width: 52ch;
}

.archive-head__title {
	margin-bottom: var(--s-3);
	font-size: var(--step-3);
}

.archive-grid {
	padding-bottom: var(--section-y);
}

.archive-empty {
	padding-block: var(--s-6);
	color: var(--ink-55);
}

.polder-pagination {
	margin-top: var(--s-6);
	padding-top: var(--s-4);
	border-top: 1px solid var(--rule);
	font-size: var(--step--1);
	letter-spacing: var(--tracking-nav);
	text-transform: uppercase;
}

.polder-pagination .page-numbers {
	padding: 0.4em 0.7em;
	text-decoration: none;
}

.polder-pagination .current {
	color: var(--bronze);
}


/* 12. Single project ====================================================== */

.project-hero {
	position: relative;
	margin: 0;
	height: min(78vh, 900px);
	height: min(78svh, 900px);
	min-height: 22rem;
	overflow: hidden;
	background: var(--stone);
}

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

.project-intro {
	padding-block: var(--section-y) calc(var(--section-y) * 0.6);
}

.project-intro__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4) var(--grid-gap);
	align-items: start;
}

@media (min-width: 900px) {
	.project-intro__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: var(--s-6);
	}
}

.project-intro__title {
	margin: 0 0 var(--s-2);
	font-size: var(--step-3);
}

.project-intro__location {
	margin: 0;
	color: var(--ink-55);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Title block for a project with no lead photograph. */
.project-title-block {
	padding-block: calc(var(--section-y) * 0.7) 0;
}

.project-body {
	padding-bottom: var(--section-y);
}

/* Prose keeps a readable measure; photographs are free to run wide. */
.project-body p,
.project-body h2,
.project-body h3,
.project-body h4,
.project-body ul,
.project-body ol,
.project-body blockquote {
	max-width: var(--container-narrow);
	margin-inline: auto;
}

.project-body p {
	margin-bottom: var(--s-3);
}

.project-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-3);
	padding-block: var(--s-4);
	border-top: 1px solid var(--rule);
}

.project-nav__link {
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: var(--tracking-nav);
	text-transform: uppercase;
	text-decoration: none;
}

.project-nav__link:hover,
.project-nav__link:focus-visible {
	color: var(--bronze);
}


/* 13. Story page ========================================================== */

.story-head {
	padding-block: calc(var(--section-y) * 0.9) var(--s-5);
	text-align: center;
}

.story-head__title {
	margin: 0;
	font-size: var(--step-4);
	font-style: italic;
	font-weight: 300;
}

.story-body {
	padding-bottom: var(--section-y);
}

.story-body .container > * {
	max-width: var(--container-narrow);
	margin-inline: auto;
}

.story-body p {
	margin-bottom: var(--s-4);
	font-size: var(--step-1);
	line-height: 1.62;
	color: var(--ink-70);
}

.story-body p:first-of-type {
	color: var(--ink);
}

.story-pull {
	margin-block: var(--s-6);
	padding: 0;
	border: 0;
	text-align: center;
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-style: italic;
	font-weight: 300;
	line-height: 1.3;
	color: var(--ink);
}

.story-close {
	margin-top: var(--s-6);
	padding-top: var(--s-4);
	border-top: 1px solid var(--rule-bronze);
	text-align: center;
}

.story-close p {
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-style: italic;
	color: var(--ink);
}

/* Placeholder block for copy that is still to be written. */
.story-placeholder {
	margin-block: var(--s-5);
	padding: var(--s-4);
	background: var(--stone);
	border-left: 1px solid var(--rule-bronze);
}

.story-placeholder p {
	margin-bottom: var(--s-2);
	font-size: var(--step-0);
	color: var(--ink-70);
}

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


/* 14. Basements page ====================================================== */

/* Hero -------------------------------------------------------------------
   Two modes. With assets/img/hero-basement.jpg present it is a full-bleed
   photograph with light copy and the transparent header over it; without,
   a quiet stone band with the normal dark copy. */

.basement-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
}

.basement-hero--image {
	height: min(72vh, 820px);
	height: min(72svh, 820px);
	min-height: max(60vh, 24rem);
	min-height: max(60svh, 24rem);
	background: var(--stone);
	color: var(--porcelain);
}

/* No photograph yet: a stone band sized by its copy, not by the viewport. */
.basement-hero--plain {
	padding-block: calc(var(--section-y) * 0.9);
	background: var(--stone);
	color: var(--ink);
}

.basement-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.basement-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.basement-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, var(--scrim-deep) 0%, rgb(0 0 0 / 0) 30%),
		linear-gradient(to top, var(--scrim-deep) 0%, rgb(0 0 0 / 0) 55%),
		var(--scrim-hero);
}

.basement-hero__inner {
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.basement-hero--image .basement-hero__inner {
	padding-block: var(--s-6) var(--s-5);
}

/* Sized in rem rather than ch: the headline is set in the display font, which
   is much wider than the body font a ch would be measured in. */
.basement-hero__content {
	max-width: 46rem;
}

.basement-hero__title {
	margin: 0 0 var(--s-3);
	font-size: var(--step-4);
	font-weight: 300;
}

.basement-hero__subtitle {
	max-width: 42rem;
	margin: 0;
	font-size: var(--step-0);
	letter-spacing: 0.01em;
}

.basement-hero--image .basement-hero__subtitle {
	color: rgb(247 246 244 / 0.9);
}

.basement-hero--plain .basement-hero__subtitle {
	color: var(--ink-70);
}

.basement-hero__actions {
	margin: var(--s-4) 0 0;
}

/* Offers -----------------------------------------------------------------
   Three cards side by side. They fall to one column early, at 900px, because
   each one carries a list and gets tall and narrow before that. */

.offer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: stretch;
}

@media (min-width: 900px) {

	.offer-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Three cards of unequal copy would otherwise put their "Best for:" rules
	   at three different heights. Subgrid hands every card the same five row
	   tracks, so the rules and the buttons line up however the copy is
	   rewritten. Without subgrid the cards simply stack in normal flow. */
	@supports (grid-template-rows: subgrid) {

		.offer-grid {
			grid-template-rows: auto auto auto 1fr auto;
			/* The grid gap would otherwise open up between every row inside
			   the cards too; their own margins handle that spacing. */
			row-gap: 0;
		}

		.offer-card {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 5;
		}
	}
}

.offer-card {
	position: relative;
	/* The flag on the featured card is taken out of flow and this top padding
	   reserved on all three, so every card's name starts on the same line. */
	padding-top: var(--s-5);
}

.offer-card--featured {
	border-color: var(--rule-bronze);
}

.offer-card__flag {
	position: absolute;
	top: var(--s-4);
	left: var(--s-4);
	right: var(--s-4);
	margin: 0;
	color: var(--bronze);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: var(--tracking-eyebrow);
	line-height: 1;
	text-transform: uppercase;
}

.offer-card__name {
	margin: 0 0 var(--s-2);
	font-size: var(--step-1);
}

.offer-card__hook {
	margin: 0 0 var(--s-3);
	color: var(--ink-70);
}

.offer-card__best {
	margin: 0 0 var(--s-3);
	padding-top: var(--s-3);
	border-top: 1px solid var(--rule);
	font-size: var(--step--1);
	color: var(--ink-70);
}

.offer-card__best-label {
	color: var(--ink);
	font-weight: 600;
}

.offer-card__list {
	/* Pushes the button to the foot of the card so all three line up. */
	flex: 1 1 auto;
	margin: 0 0 var(--s-4);
	padding: 0;
	list-style: none;
	font-size: var(--step--1);
}

.offer-card__list li {
	position: relative;
	padding-left: var(--s-3);
	margin-bottom: var(--s-2);
	color: var(--ink-70);
	line-height: 1.6;
}

.offer-card__list li:last-child {
	margin-bottom: 0;
}

/* A hairline tick rather than a bullet — the same rule used everywhere else. */
.offer-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 0.5rem;
	height: 1px;
	background: var(--rule-bronze);
}

.offer-card__actions {
	margin: 0;
}

.offer-card__actions .btn {
	width: 100%;
}

/* Types ------------------------------------------------------------------ */

.type-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5) var(--grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.type-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1040px) {
	.type-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.type-card__figure {
	margin: 0;
}

.type-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--stone);
	margin-bottom: var(--s-2);
}

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

.type-card__caption {
	margin: 0;
	color: var(--ink);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-align: left;
	text-transform: uppercase;
}


/* 15. Generic pages and index ============================================= */

.page-head {
	padding-block: calc(var(--section-y) * 0.8) var(--s-4);
	border-bottom: 1px solid var(--rule);
}

.page-head__title {
	margin: 0;
	font-size: var(--step-3);
}

.page-media {
	margin: var(--s-5) 0 0;
}

.entry-content,
.page-content {
	padding-block: var(--s-5) var(--section-y);
}

.entry-content .container > *,
.page-content .container > * {
	max-width: var(--container-narrow);
	margin-inline: auto;
}

.page-links {
	margin-top: var(--s-4);
	font-size: var(--step--1);
	letter-spacing: var(--tracking-nav);
}

.entry-list {
	padding-block: var(--s-5) var(--section-y);
}

.entry-list__item {
	padding-block: var(--s-4);
	border-bottom: 1px solid var(--rule);
}

.entry-list__title {
	margin-bottom: var(--s-1);
	font-size: var(--step-2);
}

.entry-list__title a {
	text-decoration: none;
}


/* 16. WordPress block support ============================================= */

.alignwide,
.alignfull {
	max-width: none;
}

.entry-content .alignwide,
.page-content .alignwide,
.project-body .alignwide {
	width: min(var(--container-wide), 100%);
	margin-inline: auto;
}

.entry-content .alignfull,
.page-content .alignfull,
.project-body .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.alignleft  { float: left; margin: 0 var(--s-3) var(--s-3) 0; }
.alignright { float: right; margin: 0 0 var(--s-3) var(--s-3); }
.aligncenter { margin-inline: auto; }

.wp-block-image figcaption,
.wp-caption-text,
figcaption {
	margin-top: var(--s-1);
	color: var(--ink-55);
	font-size: var(--step--1);
	text-align: left;
}

.wp-block-gallery {
	gap: var(--grid-gap) !important;
	margin-block: var(--s-5);
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	overflow: hidden;
}

.project-body .wp-block-gallery,
.project-body .wp-block-image {
	max-width: var(--container-wide);
	margin-inline: auto;
}

.project-body .wp-block-image img {
	width: 100%;
}


/* 17. Reveal on scroll ==================================================== */

/* Applied by main.js; without JS everything is simply visible. */
.js .reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--dur) var(--ease),
	            transform var(--dur) var(--ease);
	will-change: opacity, transform;
}

.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .reveal {
		opacity: 1;
		transform: none;
	}
}