/**
 * Candela — main stylesheet.
 *
 * LAYOUT ARCHETYPE: "the lighting plot".
 * A lighting designer issues a drawing, not a brochure. So this site is built
 * on the grammar of a real construction drawing: a fine drafting grid, fixture
 * symbols with circled index numbers, dimension lines with tick ends and a
 * measurement set into the rule, leader lines that point from a note to the
 * thing it describes, and a legend that decodes the symbols. Content sits ON
 * that drawing. Nothing here is a card grid with a drop shadow.
 */

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

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Fixed-position mobile menus have historically blown out
	   documentElement.scrollWidth on this codebase. Belt and braces. */
	overflow-x: hidden;
}

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

body {
	margin: 0;
	overflow-x: hidden;
	background: var( --ink-0 );
	color: var( --paper-1 );
	font-family: var( --ff-ui );
	font-size: var( --t-m );
	font-weight: 350;
	line-height: var( --lh-body );
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

:where( a, button, input, select, textarea, [tabindex] ):focus-visible {
	outline: 2px solid var( --lume );
	outline-offset: 3px;
	border-radius: 2px;
}

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

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

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	padding: var( --sp-2 ) var( --sp-3 );
	background: var( --lume ); color: var( --ink-0 );
	font-family: var( --ff-plot ); font-size: var( --t-xs );
}
.skip-link:focus { left: var( --sp-2 ); top: var( --sp-2 ); }

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

h1, h2, h3, h4 {
	margin: 0;
	font-family: var( --ff-display );
	font-weight: 400;
	line-height: var( --lh-head );
	letter-spacing: -0.012em;
	color: var( --paper-0 );
}

h1 { font-size: var( --t-display ); line-height: var( --lh-tight ); letter-spacing: -0.022em; }
h2 { font-size: var( --t-3xl ); }
h3 { font-size: var( --t-xl ); }
h4 { font-size: var( --t-l ); }

p { margin: 0 0 var( --sp-3 ); max-width: var( --measure ); }
p:last-child { margin-bottom: 0; }

.lede {
	font-size: var( --t-l );
	line-height: 1.5;
	color: var( --paper-1 );
	font-weight: 300;
}

.display-em { font-style: italic; color: var( --lume-hot ); }

/* The annotation layer. Mono, uppercase, wide-tracked — drawing labels. */
.plot-label,
.eyebrow {
	font-family: var( --ff-plot );
	font-size: var( --t-xs );
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --cool );
}

.eyebrow { display: flex; align-items: center; gap: var( --sp-2 ); margin-bottom: var( --sp-3 ); }
.eyebrow::before {
	content: '';
	width: clamp( 20px, 5vw, 54px ); height: 1px;
	background: currentColor; opacity: 0.55; flex: none;
}

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

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

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

.section-head { margin-bottom: var( --sp-6 ); }
.section-head h2 { max-width: 20ch; }
.section-head .lede { margin-top: var( --sp-3 ); }

/* ==================================================================
 * 4. The drafting grid + plot primitives  (the archetype)
 * ================================================================== */

/* A real drawing sheet: fine minor squares, heavier major squares.
   Applied per-section, never globally — a drawing has a border. */
.plot-sheet { position: relative; isolation: isolate; }
.plot-sheet::before {
	content: '';
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image:
		linear-gradient( to right, var( --plot-line ) 1px, transparent 1px ),
		linear-gradient( to bottom, var( --plot-line ) 1px, transparent 1px ),
		linear-gradient( to right, var( --plot-line-major ) 1px, transparent 1px ),
		linear-gradient( to bottom, var( --plot-line-major ) 1px, transparent 1px );
	background-size:
		var( --plot-minor ) var( --plot-minor ),
		var( --plot-minor ) var( --plot-minor ),
		var( --plot-major ) var( --plot-major ),
		var( --plot-major ) var( --plot-major );
	/* fade the sheet out at its edges so it reads as a drawing area,
	   not as wallpaper */
	-webkit-mask-image: radial-gradient( 120% 90% at 50% 40%, #000 25%, transparent 78% );
	        mask-image: radial-gradient( 120% 90% at 50% 40%, #000 25%, transparent 78% );
	opacity: 0.9;
}

/* Fixture symbol: a circled index, exactly like a plan key. */
.plot-mark {
	display: inline-grid; place-items: center;
	inline-size: 2.15rem; block-size: 2.15rem;
	border: 1px solid var( --hair-strong ); border-radius: 50%;
	font-family: var( --ff-plot ); font-size: var( --t-xs ); font-weight: 600;
	color: var( --lume ); background: var( --ink-1 );
	flex: none;
	transition: border-color var( --dur-micro ) var( --ease-out ),
	            box-shadow var( --dur-micro ) var( --ease-out );
}
.plot-mark::after {
	content: ''; position: absolute;
	inline-size: 3.1rem; block-size: 3.1rem;
	border: 1px solid var( --hair ); border-radius: 50%;
	opacity: 0; transition: opacity var( --dur-ui ) var( --ease-out );
}
:is( a, .card ):hover .plot-mark {
	border-color: var( --lume );
	box-shadow: 0 0 0 1px rgba( 255, 179, 92, 0.25 ), 0 0 26px -6px var( --lume );
}

/* Dimension line: tick — rule — [value] — rule — tick */
.plot-dim {
	display: flex; align-items: center; gap: var( --sp-2 );
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.1em; color: var( --paper-3 );
}
.plot-dim::before, .plot-dim::after {
	content: ''; flex: 1 1 auto; height: 1px;
	background: var( --hair );
	position: relative;
}
.plot-dim > span { flex: none; text-transform: uppercase; }

/* Legend block — decodes the symbols, exactly like a drawing key. */
.plot-key {
	border: 1px solid var( --hair );
	background: linear-gradient( 180deg, var( --surface-1 ), transparent );
	padding: var( --sp-3 );
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.07em; color: var( --paper-2 );
}
.plot-key dt { color: var( --cool ); text-transform: uppercase; }
.plot-key dd { margin: 0 0 var( --sp-2 ); }
.plot-key dd:last-child { margin-bottom: 0; }

/* Corner stamp — the title block of a drawing sheet. */
.plot-stamp {
	display: flex; flex-wrap: wrap; gap: var( --sp-1 ) var( --sp-3 );
	padding-top: var( --sp-2 );
	border-top: 1px solid var( --hair );
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.12em; text-transform: uppercase; color: var( --paper-3 );
}
.plot-stamp b { color: var( --paper-1 ); font-weight: 400; }

/* ==================================================================
 * 5. Atmosphere — every section reads the same --sun
 * ================================================================== */

.sky {
	position: relative;
	isolation: isolate;
}
.sky::after {
	content: '';
	position: absolute; inset: 0; z-index: -2; pointer-events: none;
	background:
		radial-gradient( 62% 78% at var( --sun-x ) var( --sun-y ),
			color-mix( in oklab, var( --glow-warm ) 42%, transparent ) 0%,
			transparent 68% ),
		linear-gradient( 180deg, var( --sky-zenith ) 0%, var( --ink-0 ) 62% );
}

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

.site-head {
	position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
	display: flex; align-items: center; justify-content: space-between;
	gap: var( --sp-3 );
	padding: var( --sp-3 ) var( --gutter );
	transition: background var( --dur-ui ) var( --ease-out ),
	            border-color var( --dur-ui ) var( --ease-out ),
	            padding var( --dur-ui ) var( --ease-out );
	border-bottom: 1px solid transparent;
}
.site-head.is-stuck {
	background: color-mix( in oklab, var( --ink-0 ) 82%, transparent );
	backdrop-filter: blur( 18px ) saturate( 140% );
	-webkit-backdrop-filter: blur( 18px ) saturate( 140% );
	border-bottom-color: var( --hair );
	padding-block: var( --sp-2 );
}

.brand { display: flex; align-items: center; gap: var( --sp-2 ); flex: none; }
.brand svg { inline-size: 30px; block-size: 30px; }
.brand-name {
	font-family: var( --ff-display ); font-size: var( --t-l );
	letter-spacing: 0.01em; color: var( --paper-0 ); line-height: 1;
}
.brand-sub {
	display: block; font-family: var( --ff-plot ); font-size: 0.62rem;
	letter-spacing: 0.22em; text-transform: uppercase; color: var( --paper-3 );
	margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: clamp( var( --sp-2 ), 2vw, var( --sp-4 ) ); }

/* wp_nav_menu() emits its own <ul>, which arrives with browser default list
   styling. Flatten it here rather than in the template so a hand-assigned
   menu, the fallback menu and the footer menu all behave identically. */
.nav ul,
.nav .nav-list {
	display: flex;
	align-items: center;
	gap: clamp( var( --sp-2 ), 2vw, var( --sp-4 ) );
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav li { margin: 0; }
.nav a {
	position: relative;
	font-size: var( --t-s ); letter-spacing: 0.04em; color: var( --paper-2 );
	padding-block: 4px;
	transition: color var( --dur-micro ) var( --ease-out );
}
.nav a::after {
	content: ''; position: absolute; inset-inline: 0; inset-block-end: 0;
	height: 1px; background: var( --lume );
	transform: scaleX( 0 ); transform-origin: left;
	transition: transform var( --dur-ui ) var( --ease-out );
}
.nav a:hover { color: var( --paper-0 ); }
.nav a:hover::after,
.nav .current-menu-item > a::after { transform: scaleX( 1 ); }
.nav .current-menu-item > a { color: var( --paper-0 ); }

.btn {
	display: inline-flex; align-items: center; gap: var( --sp-1 );
	padding: 0.72rem 1.4rem;
	border: 1px solid var( --hair-strong ); border-radius: var( --radius );
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var( --paper-0 ); background: transparent;
	cursor: pointer;
	transition: border-color var( --dur-micro ) var( --ease-out ),
	            background var( --dur-micro ) var( --ease-out ),
	            color var( --dur-micro ) var( --ease-out ),
	            box-shadow var( --dur-ui ) var( --ease-out );
}
.btn:hover {
	border-color: var( --lume ); color: var( --lume-hot );
	box-shadow: 0 0 34px -12px var( --lume ), inset 0 0 22px -18px var( --lume );
}
.btn--solid { background: var( --lume ); border-color: var( --lume ); color: var( --ink-0 ); }
.btn--solid:hover { background: var( --lume-hot ); border-color: var( --lume-hot ); color: var( --ink-0 ); }

.nav-toggle { display: none; }

@media ( max-width: 960px ) {
	.nav-toggle {
		display: inline-grid; place-items: center;
		inline-size: 44px; block-size: 44px;
		background: none; border: 1px solid var( --hair ); border-radius: var( --radius );
		color: var( --paper-0 ); cursor: pointer;
	}
	.nav {
		position: fixed; inset: 0;
		flex-direction: column; justify-content: center;
		gap: var( --sp-4 );
		background: var( --ink-0 );
		/* NOT transform-based: a translated fixed panel has previously blown
		   out documentElement.scrollWidth across this theme family. Clip
		   instead, so the panel never contributes layout width at all. */
		visibility: hidden; opacity: 0;
		transition: opacity var( --dur-ui ) var( --ease-out ), visibility 0s linear var( --dur-ui );
	}
	.nav.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
	.nav ul, .nav .nav-list { flex-direction: column; gap: var( --sp-3 ); }
	.nav a { font-family: var( --ff-display ); font-size: var( --t-2xl ); color: var( --paper-0 ); }
	.nav .btn { font-family: var( --ff-plot ); font-size: var( --t-xs ); }
}

/* ==================================================================
 * 7. Hero — the path-traced stage
 * ================================================================== */

.hero {
	position: relative;
	min-block-size: 100svh;
	display: grid;
	align-items: end;
	overflow: hidden;
	isolation: isolate;
}

.hero-stage { position: absolute; inset: 0; z-index: -1; }
.hero-stage canvas,
.hero-stage img {
	position: absolute; inset: 0;
	inline-size: 100%; block-size: 100%;
	object-fit: cover;
}
/* The still is the LCP element and the honest fallback: it is a capture of
   this very scene, so nothing about the page changes when the tracer takes
   over — it simply gets sharper. */
.hero-poster { z-index: 0; transition: opacity 900ms var( --ease-soft ); }
.hero-stage canvas { z-index: 1; opacity: 0; transition: opacity 900ms var( --ease-soft ); }
.hero-stage.is-live canvas { opacity: 1; }
.hero-stage.is-live .hero-poster { opacity: 0; }

.hero::after {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient( 175deg,
		color-mix( in oklab, var( --ink-0 ) 72%, transparent ) 0%,
		transparent 34%, transparent 48%,
		color-mix( in oklab, var( --ink-0 ) 88%, transparent ) 92% );
}

.hero-inner {
	position: relative;
	padding-block: calc( var( --sp-8 ) ) var( --sp-6 );
	display: grid;
	gap: var( --sp-5 );
	grid-template-columns: minmax( 0, 1fr );
}

.hero h1 { max-width: 15ch; }
.hero .lede { max-width: 46ch; margin-top: var( --sp-3 ); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var( --sp-2 ); margin-top: var( --sp-4 ); }

/* Live convergence readout — the tracer tells you what it is doing. */
.hero-meter {
	display: flex; align-items: center; gap: var( --sp-2 );
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.12em; text-transform: uppercase; color: var( --paper-3 );
}
.hero-meter-bar {
	inline-size: clamp( 60px, 14vw, 150px ); block-size: 2px;
	background: var( --hair ); position: relative; overflow: hidden;
}
.hero-meter-bar i {
	position: absolute; inset-block: 0; inset-inline-start: 0;
	inline-size: 0%; background: var( --lume ); display: block;
	transition: inline-size 220ms linear;
}

/* Materials selector — a real spec choice, and it re-develops the render. */
.glass-pick { display: flex; flex-wrap: wrap; gap: var( --sp-1 ); }
.glass-pick button {
	padding: 0.5rem 0.85rem;
	background: color-mix( in oklab, var( --ink-1 ) 70%, transparent );
	border: 1px solid var( --hair ); border-radius: var( --radius );
	font-family: var( --ff-plot ); font-size: 0.66rem; letter-spacing: 0.12em;
	text-transform: uppercase; color: var( --paper-2 ); cursor: pointer;
	backdrop-filter: blur( 8px );
	transition: color var( --dur-micro ) var( --ease-out ),
	            border-color var( --dur-micro ) var( --ease-out );
}
.glass-pick button:hover { color: var( --paper-0 ); border-color: var( --hair-strong ); }
.glass-pick button[aria-pressed="true"] { color: var( --ink-0 ); background: var( --lume ); border-color: var( --lume ); }

.hero-foot {
	display: flex; flex-wrap: wrap; align-items: end;
	justify-content: space-between; gap: var( --sp-3 );
}

/* ==================================================================
 * 8. Manifesto
 * ================================================================== */

.manifesto p {
	font-family: var( --ff-display );
	font-size: var( --t-statement );
	line-height: 1.26;
	letter-spacing: -0.014em;
	color: var( --paper-0 );
	max-width: 24ch;
}
.manifesto-grid {
	display: grid; gap: var( --sp-6 );
	grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, 0.95fr );
	align-items: start;
}
@media ( max-width: 900px ) { .manifesto-grid { grid-template-columns: 1fr; } }

/* ==================================================================
 * 9. Projects — the plot index
 * ================================================================== */

.proj-list { border-top: 1px solid var( --hair ); }

.proj {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax( 0, 1.5fr ) minmax( 0, 1fr ) auto;
	align-items: center;
	gap: var( --sp-3 ) var( --sp-4 );
	padding-block: var( --sp-3 );
	border-bottom: 1px solid var( --hair );
	transition: background var( --dur-ui ) var( --ease-out );
}
.proj:hover { background: linear-gradient( 90deg, var( --surface-1 ), transparent 70% ); }

.proj-title { font-family: var( --ff-display ); font-size: var( --t-xl ); color: var( --paper-0 ); }
.proj-meta {
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.1em; text-transform: uppercase; color: var( --paper-3 );
}
.proj-loc { color: var( --paper-2 ); }
.proj-go {
	font-family: var( --ff-plot ); font-size: var( --t-xs ); letter-spacing: 0.14em;
	text-transform: uppercase; color: var( --cool );
	opacity: 0; transform: translateX( -6px );
	transition: opacity var( --dur-ui ) var( --ease-out ), transform var( --dur-ui ) var( --ease-out );
}
.proj:hover .proj-go { opacity: 1; transform: none; }

/* Hover preview — the drawing pulls its own photograph up under the cursor. */
.proj-peek {
	position: fixed; z-index: 60; pointer-events: none;
	inline-size: clamp( 200px, 22vw, 340px ); aspect-ratio: 4 / 3;
	border: 1px solid var( --hair-strong );
	overflow: hidden; opacity: 0;
	transform: translate( -50%, -50% ) scale( 0.96 );
	transition: opacity var( --dur-ui ) var( --ease-out ), transform var( --dur-ui ) var( --ease-out );
	box-shadow: 0 40px 90px -30px #000;
}
.proj-peek img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.proj-peek.is-on { opacity: 1; transform: translate( -50%, -50% ) scale( 1 ); }

@media ( max-width: 860px ) {
	.proj { grid-template-columns: auto minmax( 0, 1fr ); }
	.proj-go { display: none; }
	.proj-peek { display: none; }
}

/* Project cards (archive / related) */
.card-grid {
	display: grid; gap: var( --sp-4 );
	grid-template-columns: repeat( auto-fit, minmax( min( 300px, 100% ), 1fr ) );
}
.card {
	position: relative; display: block;
	border: 1px solid var( --hair );
	background: var( --ink-1 );
	overflow: hidden;
	transition: border-color var( --dur-ui ) var( --ease-out ),
	            transform var( --dur-ui ) var( --ease-out );
}
.card:hover { border-color: var( --hair-strong ); transform: translateY( -3px ); }
.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var( --ink-2 ); }
.card-media img {
	inline-size: 100%; block-size: 100%; object-fit: cover;
	transition: transform 900ms var( --ease-soft ), filter var( --dur-ui ) var( --ease-out );
	filter: saturate( 0.85 ) brightness( 0.88 );
}
.card:hover .card-media img { transform: scale( 1.045 ); filter: saturate( 1 ) brightness( 1 ); }
.card-body { padding: var( --sp-3 ); display: grid; gap: var( --sp-1 ); }
.card-body h3 { font-size: var( --t-l ); }

/* ==================================================================
 * 10. Services / process
 * ================================================================== */

.svc {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) minmax( 0, 0.9fr );
	gap: var( --sp-3 ) var( --sp-5 );
	padding-block: var( --sp-4 );
	border-block-start: 1px solid var( --hair );
	align-items: start;
}
.svc h3 { font-size: var( --t-2xl ); }
.svc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var( --sp-1 ); }
.svc li {
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.06em; color: var( --paper-2 );
	padding-inline-start: var( --sp-3 ); position: relative;
}
.svc li::before {
	content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em;
	inline-size: 10px; block-size: 1px; background: var( --cool );
}
@media ( max-width: 900px ) { .svc { grid-template-columns: auto minmax( 0, 1fr ); } }

.process { display: grid; gap: var( --sp-4 ); grid-template-columns: repeat( auto-fit, minmax( min( 220px, 100% ), 1fr ) ); }
.process-step { border-block-start: 1px solid var( --hair-strong ); padding-block-start: var( --sp-2 ); }
.process-step b {
	display: block; font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.18em; color: var( --lume ); margin-bottom: var( --sp-2 );
}
.process-step h3 { font-size: var( --t-l ); margin-bottom: var( --sp-1 ); }
.process-step p { font-size: var( --t-s ); color: var( --paper-2 ); }

/* ==================================================================
 * 11. Stats — read as measured quantities on a drawing
 * ================================================================== */

.stats { display: grid; gap: var( --sp-4 ); grid-template-columns: repeat( auto-fit, minmax( min( 190px, 100% ), 1fr ) ); }
.stat { border-block-start: 1px solid var( --hair-strong ); padding-block-start: var( --sp-2 ); }
.stat-v {
	font-family: var( --ff-display ); font-size: var( --t-3xl );
	color: var( --paper-0 ); line-height: 1; display: block;
}
.stat-v sup { font-size: 0.45em; color: var( --lume ); vertical-align: super; }
.stat-l {
	display: block; margin-top: var( --sp-2 );
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.12em; text-transform: uppercase; color: var( --paper-2 );
}
.stat-n { display: block; font-size: var( --t-xs ); color: var( --paper-3 ); margin-top: 4px; }

/* ==================================================================
 * 12. Testimonials / journal / CTA
 * ================================================================== */

.quote { border-inline-start: 1px solid var( --lume ); padding-inline-start: var( --sp-3 ); }
.quote blockquote {
	margin: 0 0 var( --sp-3 );
	font-family: var( --ff-display ); font-size: var( --t-l );
	line-height: 1.42; color: var( --paper-0 );
}
.quote cite { font-style: normal; font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.1em; color: var( --paper-3 ); display: block; }
.quote cite b { display: block; color: var( --paper-1 ); font-weight: 400; margin-bottom: 2px; }

.journal-item {
	display: grid; gap: var( --sp-1 );
	padding-block: var( --sp-3 );
	border-block-end: 1px solid var( --hair );
}
.journal-item h3 { font-size: var( --t-l ); }
.journal-item:hover h3 { color: var( --lume-hot ); }

.cta { text-align: center; }
.cta h2 { margin-inline: auto; max-width: 18ch; }
.cta .lede { margin-inline: auto; margin-block: var( --sp-3 ) var( --sp-4 ); }
.cta p { margin-inline: auto; }

/* ==================================================================
 * 13. Footer
 * ================================================================== */

.site-foot {
	border-block-start: 1px solid var( --hair );
	padding-block: var( --sp-6 ) var( --sp-4 );
}
.foot-grid {
	display: grid; gap: var( --sp-5 );
	grid-template-columns: minmax( 0, 1.4fr ) repeat( 3, minmax( 0, 1fr ) );
}
@media ( max-width: 900px ) { .foot-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }
@media ( max-width: 520px ) { .foot-grid { grid-template-columns: 1fr; } }

.foot-col h4 {
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var( --cool ); margin-bottom: var( --sp-2 );
}
.foot-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var( --sp-1 ); }
.foot-col a { color: var( --paper-2 ); font-size: var( --t-s ); }
.foot-col a:hover { color: var( --lume-hot ); }

.foot-bottom {
	margin-block-start: var( --sp-5 );
	padding-block-start: var( --sp-3 );
	border-block-start: 1px solid var( --hair );
	display: flex; flex-wrap: wrap; gap: var( --sp-2 ) var( --sp-4 );
	justify-content: space-between;
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.08em; color: var( --paper-3 );
}

/* ==================================================================
 * 14. Inner pages
 * ================================================================== */

.page-head { padding-block: calc( var( --sp-9 ) ) var( --sp-5 ); }
.page-head h1 { max-width: 18ch; }

.crumbs {
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.12em; text-transform: uppercase; color: var( --paper-3 );
	margin-bottom: var( --sp-3 );
}
.crumbs a:hover { color: var( --lume ); }
.crumbs span { opacity: 0.5; margin-inline: 0.5em; }

.prose { max-width: var( --measure ); }
.prose h2 { font-size: var( --t-2xl ); margin-block: var( --sp-5 ) var( --sp-2 ); }
.prose h3 { font-size: var( --t-xl ); margin-block: var( --sp-4 ) var( --sp-2 ); }
.prose ul, .prose ol { padding-inline-start: var( --sp-3 ); margin-block: 0 var( --sp-3 ); }
.prose li { margin-bottom: var( --sp-1 ); }
.prose a { color: var( --lume ); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
	margin: var( --sp-4 ) 0; padding-inline-start: var( --sp-3 );
	border-inline-start: 1px solid var( --lume );
	font-family: var( --ff-display ); font-size: var( --t-l ); color: var( --paper-0 );
}
.prose img { margin-block: var( --sp-4 ); border: 1px solid var( --hair ); }
.prose code {
	font-family: var( --ff-plot ); font-size: 0.85em;
	background: var( --ink-2 ); padding: 0.15em 0.4em; border-radius: 2px;
}

.spec-table { inline-size: 100%; border-collapse: collapse; font-family: var( --ff-plot ); font-size: var( --t-xs ); }
.spec-table th, .spec-table td {
	text-align: start; padding: var( --sp-2 ) 0;
	border-block-end: 1px solid var( --hair );
	letter-spacing: 0.06em;
}
.spec-table th { color: var( --cool ); font-weight: 400; text-transform: uppercase; width: 42%; }
.spec-table td { color: var( --paper-1 ); }

.pager { display: flex; justify-content: space-between; gap: var( --sp-3 ); margin-block-start: var( --sp-6 ); }
.pager a {
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.12em; text-transform: uppercase; color: var( --paper-2 );
}
.pager a:hover { color: var( --lume ); }

/* Forms */
.field { display: grid; gap: var( --sp-1 ); margin-bottom: var( --sp-3 ); }
.field label {
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.12em; text-transform: uppercase; color: var( --paper-3 );
}
.field input, .field textarea, .field select {
	inline-size: 100%; padding: 0.8rem 0.9rem;
	background: var( --ink-1 ); color: var( --paper-0 );
	border: 1px solid var( --hair ); border-radius: var( --radius );
	font-family: var( --ff-ui ); font-size: var( --t-m );
	transition: border-color var( --dur-micro ) var( --ease-out );
}
.field input:focus, .field textarea:focus { border-color: var( --lume ); }
.form-note { font-family: var( --ff-plot ); font-size: var( --t-xs ); color: var( --paper-3 ); }
.form-note.is-ok { color: var( --lume ); }
.form-note.is-bad { color: #ff8f7a; }

/* ==================================================================
 * 15. Motion — directional reveal choreography
 * ================================================================== */

[data-reveal] {
	opacity: 0;
	transform: translate3d( var( --rv-x, 0 ), var( --rv-y, 22px ), 0 );
	transition:
		opacity var( --dur-reveal ) var( --ease-out ) var( --rv-delay, 0ms ),
		transform var( --dur-reveal ) var( --ease-out ) var( --rv-delay, 0ms );
	will-change: opacity, transform;
}
[data-reveal="left"]  { --rv-x: -34px; --rv-y: 0; }
[data-reveal="right"] { --rv-x: 34px;  --rv-y: 0; }
[data-reveal="up"]    { --rv-x: 0;     --rv-y: 30px; }
[data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

/* Anything that never gets observed (JS off, or the element is taller than
   the viewport so the threshold can never be met) must still be visible.
   This exact class of bug has shipped before — do not remove. */
.no-js [data-reveal],
[data-reveal].is-tall { opacity: 1; transform: none; }

@media ( prefers-reduced-motion: reduce ) {
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.card-media img, .card { transition: none; }
}

/* ==================================================================
 * 16. Responsive
 * ================================================================== */

@media ( max-width: 720px ) {
	.hero-inner { padding-block-start: var( --sp-9 ); }
	.hero-foot { flex-direction: column; align-items: flex-start; }
	.proj { grid-template-columns: auto minmax( 0, 1fr ); row-gap: var( --sp-1 ); }
	.proj-meta { grid-column: 2; }
}

@media ( print ) {
	.site-head, .hero-stage, .nav-toggle { display: none !important; }
	body { background: #fff; color: #000; }
}

/* ==================================================================
 * 17. Inner templates
 *
 * Added alongside the inner templates (archive, single, page, search,
 * comments). Everything below reuses an existing token — no new
 * colour, size, font or easing is introduced here, and every rule
 * exists because a template needed a style the vocabulary above did
 * not already cover.
 * ================================================================== */

/* Taxonomy filter row on the work archive. Same tab language as
   .glass-pick, but the controls are links rather than buttons because
   each one is a real, crawlable archive URL. */
.filter-row { display: flex; flex-wrap: wrap; gap: var( --sp-1 ); margin-block-end: var( --sp-5 ); }
.filter-row a {
	padding: 0.5rem 0.85rem;
	background: color-mix( in oklab, var( --ink-1 ) 70%, transparent );
	border: 1px solid var( --hair ); border-radius: var( --radius );
	font-family: var( --ff-plot ); font-size: 0.66rem; letter-spacing: 0.12em;
	text-transform: uppercase; color: var( --paper-2 );
	transition: color var( --dur-micro ) var( --ease-out ),
	            border-color var( --dur-micro ) var( --ease-out );
}
.filter-row a:hover { color: var( --paper-0 ); border-color: var( --hair-strong ); }
.filter-row a[aria-current="page"] { color: var( --ink-0 ); background: var( --lume ); border-color: var( --lume ); }

/* The one photograph on a project record. An aspect-ratio frame rather
   than fixed dimensions, because the bundled plates are not all the
   same shape and the layout must not shift when one loads. */
.figure-wide { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var( --hair ); background: var( --ink-2 ); }
.figure-wide img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Frequently asked questions. .plot-key is the drawing legend and is
   mono throughout, which is wrong for two sentences of prose, so the
   question takes the display face and the answer takes body copy. */
.faq { margin: 0; }
.faq div { border-block-start: 1px solid var( --hair ); padding-block: var( --sp-4 ); }
.faq dt {
	font-family: var( --ff-display ); font-size: var( --t-xl );
	line-height: var( --lh-head ); color: var( --paper-0 );
}
.faq dd { margin: var( --sp-2 ) 0 0; color: var( --paper-2 ); max-width: var( --measure ); }

/* Honeypot. Hidden from sight and from assistive technology alike —
   a screen-reader user must not be asked to fill it in either. */
.field--hp {
	position: absolute !important;
	inline-size: 1px; block-size: 1px;
	overflow: hidden; clip-path: inset( 50% );
	white-space: nowrap; opacity: 0; pointer-events: none;
}

/* Comments. Deliberately plain: an article's discussion is body copy
   with a mono byline, in the same key as .journal-item. */
.comment-list { margin: 0 0 var( --sp-5 ); padding: 0; list-style: none; }
.comment-list ol.children { margin: var( --sp-3 ) 0 0; padding-inline-start: var( --sp-3 ); list-style: none; border-inline-start: 1px solid var( --hair ); }
.comment-list li { margin-block-end: var( --sp-3 ); }
.comment-body { padding-block-end: var( --sp-3 ); border-block-end: 1px solid var( --hair ); }
.comment-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: var( --sp-1 ) var( --sp-2 );
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.1em; color: var( --paper-3 ); margin-block-end: var( --sp-2 );
}
.comment-meta b { color: var( --paper-1 ); font-weight: 400; }
.comment-body p { color: var( --paper-2 ); }
.comment-respond { border-block-start: 1px solid var( --hair-strong ); padding-block-start: var( --sp-4 ); }
.comment-respond .comment-reply-title { font-size: var( --t-xl ); margin-block-end: var( --sp-3 ); }
.comment-respond .comment-form-comment,
.comment-respond .comment-form-author,
.comment-respond .comment-form-email,
.comment-respond .comment-form-url { display: grid; gap: var( --sp-1 ); margin-block-end: var( --sp-3 ); }
.comment-respond label {
	font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.12em; text-transform: uppercase; color: var( --paper-3 );
}
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	inline-size: 100%; padding: 0.8rem 0.9rem;
	background: var( --ink-1 ); color: var( --paper-0 );
	border: 1px solid var( --hair ); border-radius: var( --radius );
	font-family: var( --ff-ui ); font-size: var( --t-m );
}
.comment-respond input:focus, .comment-respond textarea:focus { border-color: var( --lume ); }
.comment-respond .comment-notes, .comment-respond .form-submit { margin-block-start: var( --sp-3 ); }
.comment-respond .submit {
	padding: 0.7rem 1.15rem; cursor: pointer;
	background: var( --lume ); border: 1px solid var( --lume ); border-radius: var( --radius );
	color: var( --ink-0 ); font-family: var( --ff-plot ); font-size: var( --t-xs );
	letter-spacing: 0.12em; text-transform: uppercase;
}
.comment-respond .submit:hover { background: var( --lume-hot ); border-color: var( --lume-hot ); }

/* The 404 and empty-search states borrow the centred CTA rhythm but
   need their links to sit on one line. */
.link-row { display: flex; flex-wrap: wrap; gap: var( --sp-2 ); margin-block-start: var( --sp-4 ); }
.cta .link-row { justify-content: center; }