@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; }
/* The wordmark is a single long line, so it is sized by width. */
.site-logo img {
	width: clamp(220px, 30vw, 420px);
	height: auto;
	transition: filter .3s var(--ease);
}
@media (max-width: 560px) { .site-logo img { width: min(64vw, 280px); } }

/* Over the dark menu overlay the blue wordmark turns light. */
body.nav-open .site-logo img { filter: brightness(0) invert(.95); }

/* 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: 2px;
	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: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) 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(-6px) 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-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 at its own proportions (--hero-ratio, from the first slide):
   below the header, with no colour wash over it and the dots underneath. */
@media (max-width: 800px) {
	.hero {
		height: auto;
		min-height: 0;
		max-height: none;
		margin-top: var(--header-h);
		background: none;
	}
	.hero::before,
	.hero::after { display: none; }

	.hero__slides {
		position: relative;
		inset: auto;
		aspect-ratio: var(--hero-ratio, 9 / 5);
		overflow: hidden;
	}
	.hero__slide,
	.hero__slide.is-active {
		background-size: contain;
		transform: none;
	}

	.hero .hero__dots {
		position: static;
		padding-top: 16px;
	}
}

.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__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: work bands -- */
/* The four sections as square cards, edge to edge with no gap, four per
   row (two on narrow screens, one under 600px), each title set over its own
   image. */

.work-bands { padding-top: clamp(40px, 6vw, 84px); }

.bands {
	display: grid;
	grid-template-columns: repeat(min(var(--band-count, 2), 2), 1fr);
	gap: 0;
}
@media (min-width: 761px) {
	.bands { grid-template-columns: repeat(min(var(--band-count, 4), 4), 1fr); }
}
@media (max-width: 600px) {
	.bands { grid-template-columns: 1fr; }
}

.band {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	isolation: isolate;
	background: var(--overlay-bg);
	color: #fff;
	text-align: center;
}

.band__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.6s var(--ease);
}
.band:hover .band__img { transform: scale(1.05); }

/* A soft ink wash so the white title stays legible on light artwork. */
.band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 70% 60% at 50% 50%, rgba(12, 20, 30, .34), rgba(12, 20, 30, 0) 75%),
		linear-gradient(to bottom, rgba(12, 20, 30, .12), rgba(12, 20, 30, .26));
	transition: opacity .6s var(--ease);
}
.band:hover::before { opacity: .75; }

.band:hover,
.band:focus-visible { color: #fff; }
.band:focus-visible { outline-color: #fff; outline-offset: -8px; }

.band__body { padding-inline: clamp(12px, 3vw, 28px); }

.band__title {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(18px, 2.6vw, 34px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.01em;
	color: #fff;
	text-shadow: 0 2px 28px rgba(8, 14, 22, .3);
}

.band__cta {
	display: inline-block;
	margin-top: clamp(8px, 1vw, 14px);
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(255, 255, 255, .55);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #fff;
	transition: border-color .35s var(--ease), letter-spacing .5s var(--ease);
}
.band:hover .band__cta { border-bottom-color: #fff; letter-spacing: .3em; }

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

/* ----------------------------------------------- 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); }

/* Category listings: title sits closer to the header than other pages. */
.page-head--cat { padding-top: calc(var(--header-h) + clamp(16px, 3vw, 40px)); }
body.has-hero .page-head--cat { padding-top: clamp(16px, 3vw, 40px); }

.page-head__title {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: -.005em;
}

.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-top: clamp(20px, 3vw, 32px);
	margin-bottom: clamp(10px, 1.4vw, 18px);
}

.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(3, 1fr);
	gap: clamp(28px, 3.2vw, 52px) clamp(18px, 2.4vw, 36px);
}
@media (max-width: 760px) {
	.grid-projects { grid-template-columns: repeat(2, 1fr); }
}
@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;
}

/* Graphic Design only: project grid on the left, intro copy in a narrow
   column on the right. See $is_graphic_design in projects-x-cat.php. */
.project-cat-split { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) {
	.project-cat-split { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); align-items: start; }
}
.project-cat-split__aside { max-width: 46ch; }

/* ----------------------------------------------------- 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; }

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

/* Sized to the photo itself -- portrait, landscape or square -- so no empty
   background ever shows around it, top-aligned in its column. */
.project__lead {
	margin: 0;
	overflow: hidden;
}
.project__lead a {
	display: block;
	position: relative;
}
.project__lead img {
	display: block;
	width: 100%;
	height: auto;
}

/* 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; }

/* Beside the photos, the text pane is held to the photo column's height and
   scrolls on its own. The classes and --pane-h are set by site.js. */
.project__body.is-bounded { --pane-box: max(var(--pane-h, 0px), 360px); }
.project__body.is-bounded .project__text {
	max-height: var(--pane-box);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}
.project__body.is-bounded .project__text::-webkit-scrollbar { display: none; }
.project__text:focus-visible { outline-offset: 6px; }

.project__body.is-scrollable {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: clamp(18px, 2.2vw, 30px);
	max-width: calc(62ch + 80px);
}

/* Fade whichever edge the text continues past. */
.project__body.is-scrollable .project__text {
	--fade-top: 56px;
	--fade-end: 84px;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-end)), transparent 100%);
	        mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-end)), transparent 100%);
}
.project__body.is-scrollable.at-top .project__text { --fade-top: 0px; }
.project__body.is-scrollable.at-end .project__text { --fade-end: 0px; }

.scroll-rail { display: none; }
.project__body.is-scrollable .scroll-rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	height: var(--pane-box);
}

.scroll-rail__btn {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--rule-strong);
	border-radius: 50%;
	background: var(--paper);
	color: var(--brand);
	cursor: pointer;
	transition: background-color .3s var(--ease), border-color .3s var(--ease),
	            color .3s var(--ease), opacity .3s var(--ease);
}
.scroll-rail__btn svg { width: 20px; height: 20px; display: block; }
.scroll-rail__btn:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; }
.scroll-rail__btn:disabled { opacity: .3; cursor: default; }

/* Until the reader scrolls, the down arrow is filled and nudges to point the way. */
.project__body.at-top:not(.was-scrolled) .scroll-rail__btn[data-dir="1"] {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
	animation: lp-nudge 2.8s var(--ease) infinite;
}
@keyframes lp-nudge {
	0%, 60%, 100% { transform: translateY(0); }
	72%           { transform: translateY(5px); }
	84%           { transform: translateY(0); }
	92%           { transform: translateY(2px); }
}

.scroll-rail__track {
	position: relative;
	flex: 1;
	width: 16px;
	cursor: pointer;
}
.scroll-rail__track::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 50%;
	width: 1px;
	margin-left: -.5px;
	background: var(--rule-strong);
}
.scroll-rail__thumb {
	position: absolute;
	top: 0; left: 50%;
	width: 3px;
	margin-left: -1.5px;
	border-radius: 3px;
	background: var(--brand);
	transition: transform .1s linear;
}

.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; }
}