@charset "utf-8";
/* ==========================================================================
   Liminal Press + Bindery — 2026
   Palette and type are drawn from the studio's watercolour wordmark:
   indigo ink on warm paper, letterspaced caps for navigation, a book serif
   for display.
   ========================================================================== */

:root {
	--paper:        #FAF8F4;
	--paper-2:      #F2EEE7;
	--paper-3:      #E7E0D5;

	--ink:          #16202B;
	--ink-soft:     #3E4A57;
	--muted:        #77736C;

	--brand:        #2E5C8A;
	--brand-deep:   #1E3D5C;
	--brand-wash:   #DCE6F0;

	--rule:         rgba(22, 32, 43, .14);
	--rule-strong:  rgba(22, 32, 43, .28);

	/* The menu overlay is a dark panel so it reads as a layer above the page. */
	--overlay-bg:    #14273A;
	--overlay-fg:    #F4F1EB;
	--overlay-muted: rgba(244, 241, 235, .58);
	--overlay-rule:  rgba(244, 241, 235, .18);
	--overlay-accent:#9CC2E0;

	--sans:  'Jost', 'Gill Sans MT', 'Gill Sans', 'Futura', 'Helvetica Neue', Arial, sans-serif;
	--serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

	--maxw:   1320px;
	--narrow: 760px;
	--gutter: clamp(20px, 5vw, 72px);
	--header-h: 90px;

	--ease: cubic-bezier(.22, .61, .36, 1);

	/* Zoom glyph, shared by the lead image and the thumbnails. */
	--zoom-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.2'/%3E%3Cpath d='M15.4 15.4 20 20'/%3E%3Cpath d='M10.8 8.3v5M8.3 10.8h5'/%3E%3C/svg%3E");
}

@media (max-width: 760px) {
	:root { --header-h: 70px; }
}

/* --------------------------------------------------------------- reset -- */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.nav-open { overflow: hidden; }

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

a { color: var(--brand); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--brand-deep); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .6em; font-weight: 400; line-height: 1.18; }

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

ul, ol { margin: 0 0 1.35em; padding-left: 1.3em; }

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

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

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

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; top: 8px; left: 8px;
	z-index: 10000;
	transform: translateY(-200%);
	background: var(--ink); color: #fff;
	padding: 10px 18px;
	font: 500 12px/1 var(--sans);
	letter-spacing: .14em; text-transform: uppercase;
	transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* ------------------------------------------------------------- layout -- */

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

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

.section { padding-block: clamp(56px, 9vw, 130px); }
.section--tight { padding-block: clamp(40px, 6vw, 84px); }
.section + .section { padding-top: 0; }

.section-head {
	display: flex;
	align-items: baseline;
	gap: 24px;
	margin-bottom: clamp(28px, 4vw, 56px);
}
.section-head::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rule);
	transform: translateY(-4px);
}

.eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1.4;
}

.display {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(30px, 4.4vw, 58px);
	line-height: 1.1;
	letter-spacing: -.005em;
}

/* ------------------------------------------------------------- header -- */

.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1000;   /* above .nav-overlay so the close button stays reachable */
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: rgba(250, 248, 244, .82);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: background .35s var(--ease), border-color .35s var(--ease);
}
.site-header.is-stuck {
	background: rgba(250, 248, 244, .96);
	border-bottom-color: var(--rule);
}

/* While the menu is open the bar dissolves into the overlay. */
body.nav-open .site-header,
body.nav-open .site-header.is-stuck {
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Over a hero the bar floats on the artwork until the page is scrolled. */
body.has-hero .site-header {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
body.has-hero .site-header.is-stuck {
	background: rgba(250, 248, 244, .96);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
}

.site-header__inner {
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding-inline: var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-logo { display: block; line-height: 0; }
.site-logo img {
	width: auto;
	height: clamp(38px, 5.4vw, 56px);
}

/* Light stand-in for the dark wordmark while the overlay is open. */
.site-logo__text {
	display: none;
	font-family: var(--sans);
	font-size: clamp(12px, 1.3vw, 15px);
	font-weight: 500;
	letter-spacing: .22em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--overlay-fg);
}
body.nav-open .site-logo img  { display: none; }
body.nav-open .site-logo__text { display: block; }

/* Hamburger — the only navigation, on every breakpoint */
.nav-toggle {
	position: relative;
	z-index: 1001;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 2px 10px 12px;
	margin-right: -2px;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.nav-toggle__label { color: var(--ink); transition: color .3s var(--ease); }
@media (max-width: 560px) { .nav-toggle__label { display: none; } }

/* Over the dark overlay the whole control flips to light. */
body.nav-open .nav-toggle__label { color: var(--overlay-fg); }
body.nav-open .nav-toggle__bars span { background: var(--overlay-fg); }
body.nav-open .nav-toggle:hover .nav-toggle__label { color: var(--overlay-accent); }
body.nav-open .nav-toggle:hover .nav-toggle__bars span { background: var(--overlay-accent); }

.nav-toggle__bars {
	position: relative;
	width: 28px;
	height: 14px;
	flex: none;
}
.nav-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: var(--ink);
	transition: transform .38s var(--ease), opacity .2s var(--ease), background-color .3s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6.25px; }
.nav-toggle__bars span:nth-child(3) { top: 12.5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

.nav-toggle:hover .nav-toggle__bars span { background: var(--brand); }

/* Full-screen overlay menu */
.nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 950;
	background: var(--overlay-bg);
	color: var(--overlay-fg);
	display: flex;
	flex-direction: column;
	padding: var(--header-h) 0 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s var(--ease), visibility .4s;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: 0 24px 70px rgba(10, 18, 28, .45);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }

/* A hint of the watercolour, so the panel isn't a flat block of navy. */
.nav-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 80% at 88% 8%, rgba(90, 140, 185, .30), transparent 60%),
		radial-gradient(90% 70% at 5% 100%, rgba(46, 92, 138, .28), transparent 62%);
}
.nav-overlay__inner { position: relative; z-index: 1; }

.nav-overlay :focus-visible { outline-color: var(--overlay-accent); }

.nav-overlay__inner {
	width: 100%;
	flex: 0 0 auto;      /* margin:auto below cancels flex stretch, so pin the width */
	max-width: var(--maxw);
	margin: auto;
	padding: clamp(24px, 6vh, 64px) var(--gutter) clamp(32px, 8vh, 72px);
	display: grid;
	/* The studio note sits left, the menu itself is set flush right. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: end;
}
.nav-overlay__inner > * { min-width: 0; }

@media (max-width: 860px) {
	.nav-overlay__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

.nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	grid-column: 2;
	grid-row: 1;
	text-align: right;
}
@media (max-width: 860px) {
	.nav-list { grid-column: 1; grid-row: 1; }
}

.nav-list li {
	opacity: 0;
	transform: translateY(18px);
}
.nav-overlay.is-open .nav-list li {
	opacity: 1;
	transform: none;
	transition: opacity .5s var(--ease), transform .5s var(--ease);
	transition-delay: calc(60ms * var(--i, 0) + 90ms);
}

.nav-list a {
	display: inline-block;
	position: relative;
	padding: .18em 0;
	font-family: var(--serif);
	font-size: clamp(24px, 3.1vw, 38px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.005em;
	color: var(--overlay-fg);
}
.nav-list a::after {
	content: "";
	position: absolute;
	left: 0; bottom: .12em;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;   /* the list is set flush right */
	transition: transform .4s var(--ease);
}
.nav-list a:hover,
.nav-list li.active > a { color: var(--overlay-accent); }
.nav-list a:hover::after,
.nav-list li.active > a::after { transform: scaleX(1); }

.nav-sub {
	list-style: none;
	margin: .2em 0 .7em;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 3px 20px;
}
.nav-sub a {
	font-family: var(--sans);
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--overlay-muted);
}
.nav-sub a::after { display: none; }
.nav-sub a:hover { color: var(--overlay-accent); }

.nav-aside {
	font-size: 15px;
	color: var(--overlay-muted);
	border-top: 1px solid var(--overlay-rule);
	padding-top: 22px;
}
@media (min-width: 861px) {
	.nav-aside {
		grid-column: 1;
		grid-row: 1;
		max-width: 34ch;
		border-top: 0;
		padding: 4px 0;
	}
}
.nav-aside .eyebrow { margin-bottom: 12px; color: var(--overlay-muted); }
.nav-aside a { color: var(--overlay-fg); border-bottom: 1px solid var(--overlay-rule); }
.nav-aside a:hover { color: var(--overlay-accent); border-bottom-color: currentColor; }
.nav-aside p { margin-bottom: 1em; }
/* ------------------------------------------------------- social icons -- */

.social-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
}

.social-list a,
.site-footer .social-list a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--rule);
	border-radius: 50%;
	color: var(--brand);
	transition: color .3s var(--ease), border-color .3s var(--ease),
	            background-color .3s var(--ease), transform .3s var(--ease);
}
.social-list a:hover,
.site-footer .social-list a:hover {
	color: #fff;
	background: var(--brand);
	border-color: var(--brand);
	transform: translateY(-2px);
}

.social-list__icon { width: 19px; height: 19px; display: block; }

/* Inside the dark menu overlay */
.nav-aside .social-list a {
	border-color: var(--overlay-rule);
	color: var(--overlay-fg);
}
.nav-aside .social-list a:hover {
	color: var(--overlay-bg);
	background: var(--overlay-accent);
	border-color: var(--overlay-accent);
}
.nav-aside .social-list a { border-bottom-width: 1px; }

/* --------------------------------------------------------------- hero -- */

.hero {
	position: relative;
	height: 100svh;
	min-height: 480px;
	max-height: 1100px;
	background: var(--paper-2);
	overflow: hidden;
}

.hero__slides { position: absolute; inset: 0; isolation: isolate; }

/* Scrim so the logo, dots and scroll cue stay legible, and so the hero
   settles into the page instead of ending on a hard edge. */
.hero::before,
.hero::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	z-index: 2;
	pointer-events: none;
}
.hero::before {
	top: 0;
	height: calc(var(--header-h) + 60px);
	background: linear-gradient(to bottom, rgba(250, 248, 244, .72), rgba(250, 248, 244, 0));
}
.hero::after {
	bottom: 0;
	height: 190px;
	background: linear-gradient(to top, var(--paper) 2%, rgba(250, 248, 244, .55) 45%, rgba(250, 248, 244, 0));
}

.hero__slide {
	position: absolute;
	inset: 0;
	/* background-image is set inline (absolute URL); --img mirrors it for the
	   blurred fill below. */
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	transform: scale(1.045);
	transition: opacity 1.5s var(--ease), transform 8s linear;
	will-change: opacity, transform;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero__slide.is-link { cursor: pointer; }

/* The slide artwork carries its own typography, so on narrow screens the slide
   is shown whole rather than cropped, and the space around it is filled with a
   blurred copy of the same image so the hero still reads as full-bleed. */
@media (max-width: 800px) {
	/* Two stacked layers: a blurred cover behind, the whole slide in front. */
	.hero__slide { background-image: none !important; }
	.hero__slide::before,
	.hero__slide::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: var(--img);
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}
	.hero__slide::before {
		background-size: cover;
		filter: blur(34px) saturate(115%);
		transform: scale(1.2);
	}
	.hero__slide::after { background-size: contain; }
}

.hero__dots {
	position: absolute;
	left: 0; right: 0; bottom: 34px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 10px;
}
.hero__dot {
	width: 30px; height: 2px;
	padding: 0;
	border: 0;
	background: rgba(22, 32, 43, .22);
	cursor: pointer;
	transition: background-color .3s var(--ease);
}
.hero__dot:hover { background: rgba(22, 32, 43, .45); }
.hero__dot[aria-current="true"] { background: var(--brand); }

.hero__scroll {
	position: absolute;
	left: var(--gutter); bottom: 30px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--ink-soft);
	background: none; border: 0; cursor: pointer;
	font-family: var(--sans);
}
.hero__scroll::after {
	content: "";
	width: 1px; height: 34px;
	background: linear-gradient(to bottom, var(--rule-strong), transparent);
	animation: lp-drop 2.4s var(--ease) infinite;
}
@keyframes lp-drop {
	0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .4; }
	50%      { transform: scaleY(1);  transform-origin: top; opacity: 1; }
}
@media (max-width: 800px) { .hero__scroll { display: none; } }

/* ------------------------------------------------------- home: intro -- */

.studio-line {
	padding-block: clamp(52px, 8vw, 108px);
	text-align: center;
}
.studio-line__text {
	max-width: 22ch;
	margin: 0 auto;
	font-family: var(--serif);
	font-size: clamp(26px, 3.6vw, 46px);
	line-height: 1.24;
	font-weight: 400;
	color: var(--ink);
	text-wrap: balance;
}
.studio-line__text em { font-style: italic; color: var(--brand); }
.studio-line .cms-copy { max-width: 62ch; margin: 0 auto; text-align: left; }

.studio-line__link { margin: 28px 0 0; }
.studio-line__link a {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--rule-strong);
	color: var(--ink);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	transition: color .3s var(--ease), border-color .3s var(--ease);
}
.studio-line__link a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* -------------------------------------------------------- home: cards -- */

.cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 34px);
}
@media (max-width: 1024px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .cards { grid-template-columns: 1fr; } }

.card { display: block; color: var(--ink); }

.card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--paper-2);
	border: 1px solid var(--rule);
}
.card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease), filter .6s var(--ease);
}
.card:hover .card__media img { transform: scale(1.055); }

/* Wordmarks and tall broadsides are shown whole instead of cropped. */
.card__media img.is-contained,
.work__media img.is-contained,
.tile__media img.is-contained {
	object-fit: contain;
	padding: 9%;
	background: #fff;
}

.card__body {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding-top: 16px;
	border-top: 1px solid transparent;
	transition: border-color .35s var(--ease);
}
.card:hover .card__body { border-top-color: var(--ink); }

.card__title {
	margin: 0;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.35;
	transition: color .3s var(--ease);
}
.card:hover .card__title { color: var(--brand); }

.card__count {
	flex: none;
	font-size: 12px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------- home: selected works -- */

.works {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(26px, 3.4vw, 56px) clamp(18px, 2.6vw, 40px);
}
@media (max-width: 900px) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .works { grid-template-columns: 1fr; } }

.work { display: block; color: var(--ink); }

.work__media {
	position: relative;
	overflow: hidden;
	background: var(--paper-2);
	aspect-ratio: 1 / 1;
}
.work__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease);
}
.work:hover .work__media img { transform: scale(1.05); }

.work__body { padding-top: 14px; }

.work__cat {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 5px;
}

.work__title {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 400;
	line-height: 1.22;
	transition: color .3s var(--ease);
}
.work:hover .work__title { color: var(--brand); }

.works-more { margin-top: clamp(40px, 6vw, 76px); text-align: center; }

.btn-line {
	display: inline-block;
	padding: 14px 30px;
	border: 1px solid var(--rule-strong);
	color: var(--ink);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-line:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ------------------------------------------------------ page headings -- */

.page-head {
	padding-top: calc(var(--header-h) + clamp(40px, 7vw, 96px));
	padding-bottom: clamp(24px, 4vw, 52px);
}
body.has-hero .page-head { padding-top: clamp(40px, 7vw, 96px); }

.page-head__title {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(36px, 6vw, 76px);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -.012em;
}

.page-head__intro {
	max-width: 62ch;
	margin-top: clamp(18px, 2.6vw, 30px);
	font-size: clamp(17px, 1.4vw, 19px);
	color: var(--ink-soft);
}
.page-head__intro p:last-child { margin-bottom: 0; }

.crumb {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--brand); }

/* ------------------------------------------------------- CMS rich text -- */

.cms-copy { font-size: 17px; line-height: 1.78; color: var(--ink-soft); }
.cms-copy > *:last-child { margin-bottom: 0; }

.cms-copy h2 { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); color: var(--ink); margin-top: 1.6em; }
.cms-copy h3 { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin-top: 2em; }
.cms-copy a { border-bottom: 1px solid rgba(46, 92, 138, .3); }
.cms-copy a:hover { border-bottom-color: currentColor; }
.cms-copy img { margin: 0 0 1.4em; }
.cms-copy strong { font-weight: 500; color: var(--ink); }

/* Inline images pasted from the editor float on wide screens, stack on small. */
.cms-copy img[style*="float: left"],
.cms-copy img[style*="float:left"] { margin: 4px 32px 20px 0 !important; margin-left: 0 !important; }
.cms-copy img[style*="float: right"],
.cms-copy img[style*="float:right"] { margin: 4px 0 20px 32px !important; margin-right: 0 !important; }

@media (max-width: 640px) {
	.cms-copy img {
		float: none !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 0 1.4em !important;
	}
}

.imgleft  { float: left;  margin: 4px 32px 20px 0;  max-width: 46%; height: auto; }
.imgright { float: right; margin: 4px 0 20px 32px;  max-width: 46%; height: auto; }
.resp     { width: 100%; height: auto; }
.cfl      { float: left;  width: 38%; }
.cfr      { float: right; width: 58%; }

@media (max-width: 640px) {
	.imgleft, .imgright { float: none; max-width: 100%; margin: 0 0 20px; }
	.cfl, .cfr { float: none; width: 100%; }
}

.clearfix::after { content: ""; display: table; clear: both; }

/* ---------------------------------------------------- category filters -- */

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-bottom: clamp(28px, 4vw, 48px);
	padding-bottom: clamp(20px, 3vw, 32px);
	border-bottom: 1px solid var(--rule);
}

.filters a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--rule);
	border-radius: 999px;
	color: var(--ink-soft);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filters a:hover { border-color: var(--ink); color: var(--ink); }
.filters a.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.filters-note { max-width: 62ch; margin: -12px 0 clamp(28px, 4vw, 44px); color: var(--muted); font-size: 16px; }

/* ------------------------------------------------------- project grid -- */

.grid-projects {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: clamp(28px, 3.2vw, 52px) clamp(18px, 2.4vw, 36px);
}
@media (max-width: 560px) {
	.grid-projects { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 16px; }
}

.tile { display: block; color: var(--ink); }

.tile__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--paper-2);
}
.tile__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease);
}
.tile:hover .tile__media img { transform: scale(1.05); }

.tile__title {
	margin: 14px 0 0;
	font-family: var(--serif);
	font-size: clamp(18px, 1.5vw, 22px);
	font-weight: 400;
	line-height: 1.25;
	transition: color .3s var(--ease);
}
.tile:hover .tile__title { color: var(--brand); }

.empty {
	padding: 60px 0;
	text-align: center;
	color: var(--muted);
	font-family: var(--serif);
	font-size: 22px;
}

/* ----------------------------------------------------- project detail -- */

.project { display: grid; gap: clamp(32px, 5vw, 76px); }

/* Stacked layout: keep the lead image from swallowing the viewport. */
.project:not(.project--split) { max-width: 940px; margin-inline: auto; }
.project:not(.project--split) .project__lead { height: clamp(340px, 62svh, 660px); }

@media (min-width: 900px) {
	.project--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
}

/* Fixed height so swapping in a portrait or landscape photo on thumbnail hover
   never resizes the box and shunts the strip below it.
   The link must STRETCH (not centre) inside the figure, otherwise its height is
   indefinite, the image's max-height has nothing to resolve against, and the
   picture overflows the box and runs through the thumbnails underneath. */
.project__lead {
	margin: 0;
	height: clamp(300px, 52svh, 560px);
	background: var(--paper-2);
	overflow: hidden;
}
/* The image is positioned against the box rather than sized by percentages:
   inside a grid/flex parent a percentage max-height resolves to `none`, which
   let tall photos overflow and run through the thumbnails below. */
.project__lead a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
.project__lead img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Zoom affordance, pinned to the bottom right of the image container. */
.project__lead a::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: rgba(20, 39, 58, .78);
	background-image: var(--zoom-icon);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 22px 22px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transform: translateY(6px) scale(.94);
	transition: opacity .28s var(--ease), transform .28s var(--ease);
	pointer-events: none;
}
.project__lead a:hover::after,
.project__lead a:focus-visible::after {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	/* No hover on touch, so show it permanently. */
	.project__lead a::after { opacity: 1; transform: none; }
}

/* Wraps onto as many rows as it needs -- no sideways scrolling. */
.project__strip {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.project__thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 6px;
	background: var(--paper-2);
}
.project__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.project__thumb:hover img,
.project__thumb:focus-visible img { opacity: .5; transform: scale(1.05); }

/* Same zoom affordance as the lead image, scaled down. */
.project__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: rgba(20, 39, 58, .78);
	background-image: var(--zoom-icon);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 17px 17px;
	opacity: 0;
	transform: scale(.9);
	transition: opacity .26s var(--ease), transform .26s var(--ease);
	pointer-events: none;
}
.project__thumb:hover::after,
.project__thumb:focus-visible::after { opacity: 1; transform: none; }

.project__body { max-width: 62ch; }

.project__title {
	margin: 0 0 20px;
	font-family: var(--serif);
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 400;
	line-height: 1.14;
}

.project-nav {
	margin-top: clamp(48px, 7vw, 96px);
	padding-top: 26px;
	border-top: 1px solid var(--rule);
}

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

.site-footer {
	padding-block: clamp(46px, 6vw, 78px) clamp(30px, 4vw, 44px);
	/* A very slight warm fall-off toward the bottom right. */
	background: var(--paper-2);
	background-image: linear-gradient(135deg,
		#F5F2EC 0%,
		var(--paper-2) 48%,
		#EBE5DB 100%);
	border-top: 1px solid var(--rule);
	font-size: 15px;
	color: var(--ink-soft);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; gap: 32px; } }

.site-footer__mark img { width: 240px; max-width: 74%; margin-bottom: 20px; }

/* The column headings need room to read as headings. */
.site-footer .eyebrow { margin-bottom: 20px; }

.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 10px; }
.footer-nav li:last-child { margin-bottom: 0; }

/* Underline wipes in from the left on hover. */
.footer-nav a,
.footer-email {
	display: inline-block;
	position: relative;
	color: var(--ink-soft);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: color .3s var(--ease);
}
.footer-email { font-size: 15px; letter-spacing: .03em; text-transform: none; }

.footer-nav a::after,
.footer-email::after {
	content: "";
	position: absolute;
	left: 0; bottom: -3px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .38s var(--ease);
}
.footer-nav a:hover,
.footer-email:hover { color: var(--brand); }
.footer-nav a:hover::after,
.footer-nav a:focus-visible::after,
.footer-email:hover::after,
.footer-email:focus-visible::after { transform: scaleX(1); }

.site-footer .copyright {
	margin-top: clamp(34px, 5vw, 56px);
	padding-top: 22px;
	border-top: 1px solid var(--rule);
	font-size: 13px;
	color: var(--muted);
	max-width: 82ch;
}
.site-footer .copyright p { margin-bottom: .5em; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--brand); }

/* -------------------------------------------------------------- forms -- */

form.mainform { max-width: 640px; }
form.mainform > div { margin-bottom: 22px; }

form.mainform label.desc,
form.mainform legend {
	display: block;
	margin-bottom: 8px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}

form.mainform input[type=text],
form.mainform input[type=email],
form.mainform input[type=url],
form.mainform input[type=password],
form.mainform textarea,
form.mainform select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--rule);
	border-radius: 0;
	background: #fff;
	color: var(--ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 300;
	resize: vertical;
	transition: border-color .25s var(--ease);
}
form.mainform input:focus,
form.mainform textarea:focus,
form.mainform select:focus { border-color: var(--brand); outline: none; }

form.mainform input[type=submit] {
	-webkit-appearance: none;
	appearance: none;
	padding: 14px 32px;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .3s var(--ease), color .3s var(--ease);
}
form.mainform input[type=submit]:hover { background: var(--brand); border-color: var(--brand); }

form.mainform label.error {
	display: block;
	margin-top: 6px;
	padding: 0;
	background: none;
	color: #A6362B;
	font-size: 12.5px;
	letter-spacing: .02em;
	text-transform: none;
}

.tar { text-align: left; }

.msgbox, .msg, .msgboxok, .msgok, .msgboxnotok {
	padding: 14px 18px;
	border: 1px solid var(--rule);
	border-radius: 0;
	background: var(--paper-2);
	color: var(--ink-soft);
	text-align: center;
	font-size: 15px;
}
.msgboxok, .msgok { border-color: rgba(46, 92, 138, .35); background: var(--brand-wash); color: var(--brand-deep); }
.msgboxnotok { border-color: #C48A82; background: #F6E9E7; color: #8E2F24; }
.boxpos { width: 100%; max-width: 460px; margin: 0 auto 24px; }
.emptymsgbox { display: none; }

/* --------------------------------------------------------------- misc -- */

.faq { margin-bottom: 12px; border-bottom: 1px solid var(--rule); }
.faq_title { display: block; padding: 16px 40px 16px 0; cursor: pointer; position: relative; font-weight: 400; }
.faq_title::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 20px; color: var(--muted); }
.faq_title.minus::after { content: "\2013"; }
.faq_answer { display: none; padding: 0 0 18px; color: var(--ink-soft); }

#backtotop {
	position: fixed;
	right: 22px; bottom: 22px;
	z-index: 800;
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	padding: 0;
	border: 1px solid var(--rule-strong);
	border-radius: 50%;
	background: rgba(250, 248, 244, .94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--brand);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .3s var(--ease), transform .3s var(--ease),
	            visibility .3s, background-color .3s var(--ease),
	            color .3s var(--ease), border-color .3s var(--ease);
}
#backtotop.is-visible { opacity: 1; visibility: visible; transform: none; }
#backtotop svg { width: 20px; height: 20px; display: block; }
#backtotop:hover {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .8s var(--ease), transform .8s var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.reveal { opacity: 1; transform: none; }
	.hero__slide { transform: none; }
}

/* ------------------------------------------------------------ lightbox -- */

body.lightbox-open { overflow: hidden; }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 56px);
	background: rgba(12, 20, 30, .94);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__stage {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 100%;
	max-height: 100%;
}
.lightbox__img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	object-fit: contain;
	background: var(--paper-2);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.lightbox__caption {
	max-width: 62ch;
	text-align: center;
	font-size: 13px;
	letter-spacing: .06em;
	color: rgba(244, 241, 235, .75);
}

.lightbox__close,
.lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	padding: 0;
	background: none;
	border: 1px solid rgba(244, 241, 235, .28);
	border-radius: 50%;
	color: var(--overlay-fg);
	cursor: pointer;
	transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover {
	background: var(--overlay-fg);
	border-color: var(--overlay-fg);
	color: var(--overlay-bg);
}
.lightbox__close svg,
.lightbox__nav svg { width: 20px; height: 20px; display: block; }

.lightbox__close { top: clamp(14px, 3vw, 30px); right: clamp(14px, 3vw, 30px); }
.lightbox__nav--prev { left: clamp(10px, 2.5vw, 30px); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: clamp(10px, 2.5vw, 30px); top: 50%; transform: translateY(-50%); }
.lightbox__nav[hidden] { display: none; }

@media (max-width: 640px) {
	.lightbox__nav--prev { left: 8px; }
	.lightbox__nav--next { right: 8px; }
	.lightbox__img { max-height: 68vh; }
}