/* ==========================================================================
   BUILD INTERACTIVE — main.css
   No preprocessor, no framework, no build step.

   Cascade layers (lowest → highest priority):
     tokens      design decisions as custom properties
     reset       a small, modern reset
     base        element defaults & typography
     layout      containers, bands, angled dividers
     components  header, hero, work, services, about, case studies…
     utilities   single-purpose helpers (kept last so they always win)

   Brand notes:
     · Palette sampled from the original site: ink #141414 / #0e0e0e,
       bronze #7c6b4f, silver #c1c1c0, warm paper #f4f1ea.
     · Kepler Std Display carries the voice; Proxima Nova does the work.
     · Angles everywhere are cut from the same cloth: --cut.
   ========================================================================== */

@layer tokens, reset, base, layout, components, utilities;

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
@layer tokens {
	:root {
		/* Color — ink */
		--ink-950: #0e0e0e;
		--ink-900: #141414;
		--ink-850: #1b1b1b;
		--ink-800: #232323;
		--ink-700: #2e2e2e;

		/* Color — bronze (band bronze sampled at #7c6b4f) */
		--bronze-700: #675941;
		--bronze-600: #7c6b4f;
		--bronze-500: #8f7c5c;
		--bronze-400: #a8956e;
		--bronze-300: #c2ad82;

		/* Color — neutrals */
		--silver-400: #c1c1c0;
		/* client-logo silver, from the brand SVGs */
		--paper: #f4f1ea;
		--paper-dim: #aaa79e;
		--paper-faint: #8a877e;
		/* ≥4.5:1 on every ink shade */

		/* Semantic aliases */
		--bg: var(--ink-900);
		--bg-deep: var(--ink-950);
		--text: var(--paper);
		--text-dim: var(--paper-dim);
		--accent: var(--bronze-400);
		--accent-bright: var(--bronze-300);
		--line: var(--ink-800);

		/* Type */
		--font-serif: "kepler-std-display", "Iowan Old Style", "Palatino Linotype",
			Palatino, Georgia, serif;
		--font-sans: "proxima-nova", "Avenir Next", Avenir, "Helvetica Neue",
			system-ui, sans-serif;

		/* Fluid type scale */
		--text-xs: 0.75rem;
		/* eyebrows, labels   */
		--text-sm: 0.9375rem;
		--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
		--text-md: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
		--text-lg: clamp(1.5rem, 1.2rem + 1.4vw, 2.375rem);
		/* band ledes     */
		--text-xl: clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
		/* section titles */
		--text-2xl: clamp(2.5rem, 1.8rem + 3.5vw, 4.25rem);
		/* case titles    */

		/* Rhythm */
		--space-1: 0.5rem;
		--space-2: 1rem;
		--space-3: 1.5rem;
		--space-4: 2rem;
		--space-5: 3rem;
		--space-6: 4.5rem;
		--space-7: 7rem;
		--section-pad: clamp(4.5rem, 10vw, 8.5rem);

		/* The angle. One diagonal, used by every band and divider. */
		--cut: clamp(3.25rem, 6.5vw, 6.5rem);

		/* Chrome */
		--radius: 3px;
		--header-h: 4rem;
		--ease-out: cubic-bezier(0.22, 1, 0.36, 1);

		/* Film grain — inline SVG turbulence, desaturated, tiled */
		--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	}

	/* Home has no site-header; don't reserve its height. */
	body.is-home {
		--header-h: 0px;
	}
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
@layer reset {

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

	* {
		margin: 0;
	}

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

	body {
		min-height: 100svh;
		line-height: 1.6;
		-webkit-font-smoothing: antialiased;
	}

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

	img,
	video {
		height: auto;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	h1,
	h2,
	h3,
	h4,
	p,
	figure,
	blockquote,
	dl,
	dd {
		overflow-wrap: break-word;
	}

	ul[role="list"],
	ol[role="list"] {
		list-style: none;
		padding: 0;
	}
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
@layer base {
	html {
		color-scheme: dark;
		scroll-padding-block-start: calc(var(--header-h) + 1.5rem);
	}

	@media (prefers-reduced-motion: no-preference) {
		html {
			scroll-behavior: smooth;
		}
	}

	body {
		font-family: var(--font-sans);
		font-size: var(--text-base);
		font-weight: 400;
		color: var(--text);
		background-color: var(--bg);
	}

	/* Film grain over everything — the rustic in the machine */
	body::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 2147483647;
		pointer-events: none;
		background-image: var(--grain);
		background-repeat: repeat;
		opacity: 0.05;
	}

	h1,
	h2,
	h3 {
		font-family: var(--font-serif);
		font-weight: 400;
		line-height: 1.12;
		text-wrap: balance;
	}

	h4 {
		font-weight: 600;
		line-height: 1.3;
	}

	p {
		text-wrap: pretty;
	}

	a {
		color: inherit;
		text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
		text-underline-offset: 0.2em;
		transition: color 0.25s var(--ease-out), text-decoration-color 0.25s var(--ease-out);
	}

	a:hover {
		color: var(--accent-bright);
		text-decoration-color: currentColor;
	}

	:focus-visible {
		outline: 2px solid var(--accent-bright);
		outline-offset: 3px;
		border-radius: 1px;
	}

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

	strong {
		font-weight: 600;
	}

	small {
		font-size: var(--text-sm);
	}
}

/* --------------------------------------------------------------------------
   4. LAYOUT — containers, bronze bands, angled dividers
   -------------------------------------------------------------------------- */
@layer layout {
	.container {
		inline-size: min(100% - 3rem, 72rem);
		margin-inline: auto;
	}

	.container--wide {
		inline-size: min(100% - 3rem, 88rem);
		margin-inline: auto;
	}

	.section {
		position: relative;
		padding-block: var(--section-pad);
	}

	.section__head {
		max-inline-size: 46rem;
		margin-block-end: clamp(2.5rem, 6vw, 4.5rem);
	}

	.section__title {
		font-size: var(--text-xl);
		margin-block-start: var(--space-2);
	}

	.section__intro {
		color: var(--text-dim);
		font-size: var(--text-md);
		margin-block-start: var(--space-3);
		max-inline-size: 38rem;
	}

	/*
   * The bronze band. A trapezoid cut with the shared --cut angle —
   * the page ink shows through the clipped corners, so bands need
   * no negative margins and can sit anywhere in normal flow.
   */
	.band {
		position: relative;
		background-color: var(--bronze-600);
		color: var(--paper);
		padding-block: calc(var(--cut) + clamp(3rem, 7vw, 5.5rem));
		/* Parallelogram: top and bottom edges share the same slant */
		clip-path: polygon(0 0,
				100% var(--cut),
				100% 100%,
				0 calc(100% - var(--cut)));
	}

	.band--flip {
		clip-path: polygon(0 var(--cut),
				100% 0,
				100% 100%,
				0 calc(100% - var(--cut)));
	}

	.band ::selection {
		background-color: var(--ink-950);
		color: var(--paper);
	}
}

/* --------------------------------------------------------------------------
   5. COMPONENTS
   -------------------------------------------------------------------------- */
@layer components {

	/* ------------------------------------------------------------------------
     5.1 Site header & navigation
     ------------------------------------------------------------------------ */
	.site-header {
		position: fixed;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: 50;
		transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
		border-block-end: 1px solid transparent;
	}

	.site-header.is-scrolled {
		background-color: color-mix(in srgb, var(--ink-950) 88%, transparent);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-color: var(--line);
	}

	.site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		padding-block: 0.7rem;
	}

	.site-header__brand {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		text-decoration: none;
	}

	.site-header__brand:hover {
		color: var(--paper);
	}

	.site-header__mark {
		inline-size: 2.25rem;
		aspect-ratio: 394.77 / 312.26;
		block-size: auto;
		flex: none;
	}

	.site-header__wordmark {
		font-size: var(--text-sm);
		font-weight: 600;
		letter-spacing: 0.28em;
		line-height: 1;
		text-transform: uppercase;
		white-space: nowrap;
	}

	@media (min-width: 48em) {
		.site-header__brand {
			gap: 1rem;
		}

		.site-header__mark {
			inline-size: 2.875rem;
		}

		.site-header__wordmark {
			font-size: 1.0625rem;
			letter-spacing: 0.3em;
		}
	}

	.site-nav__list {
		display: flex;
		align-items: center;
		gap: clamp(1.25rem, 3vw, 2.5rem);
	}

	.site-nav__link {
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: 0.26em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--text-dim);
		padding-block: 0.5rem;
	}

	.site-nav__link:hover {
		color: var(--paper);
	}

	.site-nav__link[aria-current] {
		color: var(--accent-bright);
	}

	.site-nav__cta {
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: 0.26em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--paper);
		border: 1px solid var(--bronze-500);
		padding: 0.65rem 1.1rem;
		border-radius: var(--radius);
		transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
	}

	.site-nav__cta:hover {
		background-color: var(--bronze-600);
		color: var(--paper);
	}

	.site-nav__toggle {
		display: none;
		appearance: none;
		background: none;
		border: 0;
		padding: 0.75rem;
		margin-inline-end: -0.75rem;
		cursor: pointer;
	}

	.site-nav__burger {
		display: block;
		inline-size: 1.375rem;
		block-size: 2px;
		background-color: var(--paper);
		position: relative;
		transition: background-color 0.2s;
	}

	.site-nav__burger::before,
	.site-nav__burger::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		block-size: 2px;
		background-color: var(--paper);
		transition: translate 0.25s var(--ease-out), rotate 0.25s var(--ease-out);
	}

	.site-nav__burger::before {
		translate: 0 -7px;
	}

	.site-nav__burger::after {
		translate: 0 7px;
	}

	@media (max-width: 47.99em) {
		.site-nav__toggle {
			display: block;
		}

		.site-nav__list {
			position: absolute;
			inset-block-start: 100%;
			inset-inline: 0;
			flex-direction: column;
			align-items: stretch;
			gap: 0;
			padding: var(--space-2) var(--space-3) var(--space-4);
			background-color: var(--ink-950);
			border-block-end: 1px solid var(--line);
			display: none;
		}

		.site-header.is-open .site-nav__list {
			display: flex;
		}

		.site-header.is-open {
			background-color: var(--ink-950);
			border-color: var(--line);
		}

		.site-header.is-open .site-nav__burger {
			background-color: transparent;
		}

		.site-header.is-open .site-nav__burger::before {
			translate: 0;
			rotate: 45deg;
		}

		.site-header.is-open .site-nav__burger::after {
			translate: 0;
			rotate: -45deg;
		}

		.site-nav__link {
			display: block;
			padding-block: 0.875rem;
			border-block-end: 1px solid var(--ink-850);
		}

		.site-nav__cta {
			display: block;
			text-align: center;
			margin-block-start: var(--space-3);
		}
	}

	/* ------------------------------------------------------------------------
     5.2 Hero
     ------------------------------------------------------------------------ */
	.hero {
		position: relative;
		/* Floor so a short window cannot crush the lockup into the cue;
		   100svh in the middle; 590px cap on large screens */
		min-block-size: clamp(32rem, 100svh, 590px);
		display: grid;
		place-items: center;
		isolation: isolate;
		overflow: clip;
	}

	.hero__bg {
		position: absolute;
		inset: 0;
		z-index: -1;
	}

	.hero__bg img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		object-position: center top;
	}

	.hero__bg::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom,
				rgb(14 14 14 / 0.45),
				rgb(14 14 14 / 0.15) 45%,
				var(--ink-900) 96%);
	}

	.hero__inner {
		text-align: center;
		padding-inline: var(--space-3);
		padding-block: 0 var(--space-6);
	}

	.hero__mark {
		inline-size: clamp(4.25rem, 9vw, 5.5rem);
		margin-inline: auto;
		margin-block-end: var(--space-4);
	}

	.hero__wordmark {
		font-family: var(--font-sans);
		font-size: clamp(1.125rem, 4vw, 2.125rem);
		font-weight: 600;
		letter-spacing: 0.42em;
		text-indent: 0.42em;
		/* optically recenters letterspaced caps */
		text-transform: uppercase;
		line-height: 1.2;
	}

	.hero__tagline {
		margin-block-start: var(--space-2);
		color: var(--accent);
		font-size: var(--text-sm);
		letter-spacing: 0.03em;
	}

	.hero__cue {
		position: absolute;
		inset-block-end: calc(var(--cut) + 1.75rem);
		inset-inline-start: 50%;
		translate: -50% 0;
		color: var(--accent);
		padding: 0.75rem;
	}

	.hero__cue:hover {
		color: var(--paper);
	}

	.hero__cue svg {
		inline-size: 1.125rem;
	}

	@media (prefers-reduced-motion: no-preference) {
		.hero__cue svg {
			animation: cue-drift 2.6s ease-in-out infinite;
		}

		@keyframes cue-drift {

			0%,
			100% {
				translate: 0 0;
			}

			50% {
				translate: 0 0.4rem;
			}
		}
	}

	/* ------------------------------------------------------------------------
     5.3 Intro band — lede, client logos
     ------------------------------------------------------------------------ */
	.band--intro {
		margin-block-start: calc(-1 * var(--cut));
		text-align: center;
	}

	.band__lede {
		font-size: var(--text-xl);
		line-height: 1.2;
		margin-inline: auto;
	}

	.clients {
		margin-block-start: clamp(3rem, 7vw, 4.5rem);
	}

	.clients__list {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		justify-content: center;
		align-items: center;
		column-gap: clamp(1.75rem, 6vw, 3rem);
		row-gap: var(--space-4);
	}

	@media (min-width: 48em) {
		.clients__list {
			grid-template-columns: repeat(4, max-content);
			column-gap: clamp(2.5rem, 6vw, 4.5rem);
		}
	}

	/* Tone-on-tone marks, like the original site */
	.clients__list svg {
		inline-size: auto;
	}

	.clients__list svg path,
	.clients__list svg rect,
	.clients__list svg polygon {
		fill: rgb(20 17 10 / 0.58);
	}

	/*
   * Per-brand heights, tuned by eye: each viewBox carries a different
   * amount of whitespace and cap height, so equal heights read as
   * wildly unequal logos. Targets roughly equal optical width.
   */
	.brand-oracle {
		block-size: clamp(1.3rem, 2.1vw, 1.6rem);
	}

	.brand-disqus {
		block-size: clamp(1.35rem, 2.2vw, 1.65rem);
	}

	.brand-liberty-mutual {
		block-size: clamp(2.3rem, 3.7vw, 2.8rem);
	}

	.brand-walgreens {
		block-size: clamp(1.8rem, 2.9vw, 2.2rem);
	}

	/* ------------------------------------------------------------------------
     5.4 Work — alternating editorial rows (image + title).
     Images sit solid toward the type and fade toward the outer edge.
     ------------------------------------------------------------------------ */
	.work-list {
		display: grid;
		gap: clamp(4rem, 10vw, 6rem);
	}

	.work-row {
		display: grid;
		gap: var(--space-3);
		align-items: center;
	}

	@media (min-width: 48em) {
		.work-row {
			grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr);
			gap: 0;
		}

		.work-row--flip {
			grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.5fr);
		}

		.work-row--flip .work-row__media {
			order: 2;
		}

		.work-row--flip .work-row__body {
			text-align: end;
			padding-inline: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 2vw, 1.75rem);
		}

		.work-row__body {
			padding-inline: clamp(1rem, 2vw, 1.75rem) clamp(2rem, 5vw, 4.5rem);
		}
	}

	.work-row__media {
		display: block;
		overflow: hidden;
	}

	.work-row__media:focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: 3px;
	}

	.work-row__media img {
		display: block;
		inline-size: 100%;
		aspect-ratio: 1645 / 650;
		object-fit: cover;
		transform-origin: bottom center;
		transition: scale 0.8s var(--ease-out);
		mask-image: linear-gradient(to bottom, #000 55%, transparent);
		-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	}

	@media (min-width: 48em) {
		.work-row__media img {
			transform-origin: left center;
			mask-image: linear-gradient(to left, #000 62%, transparent);
			-webkit-mask-image: linear-gradient(to left, #000 62%, transparent);
		}

		.work-row--flip .work-row__media img {
			transform-origin: right center;
			mask-image: linear-gradient(to right, #000 62%, transparent);
			-webkit-mask-image: linear-gradient(to right, #000 62%, transparent);
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.work-row__media:hover img,
		.work-row:hover .work-row__media img {
			scale: 1.03;
		}
	}

	.work-row__title {
		font-size: var(--text-xl);
	}

	.work-row__title a {
		color: inherit;
		text-decoration: none;
	}

	.work-row__title a:hover,
	.work-row__title a:focus-visible {
		color: var(--accent-bright);
	}

	.work-row__category {
		margin-block-start: var(--space-2);
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: 0.34em;
		text-transform: uppercase;
		color: var(--accent);
	}

	/* ------------------------------------------------------------------------
     5.5 Services — contained two-column index: name + offerings
     ------------------------------------------------------------------------ */
	.section--services {
		background-color: var(--bg-deep);
	}

	.service-list {
		border-block-start: 1px solid var(--line);
	}

	.service-row {
		display: grid;
		gap: var(--space-2);
		padding-block: clamp(1.5rem, 3.2vw, 2.25rem);
		border-block-end: 1px solid var(--line);
	}

	.service-row:last-child {
		border-block-end: 0;
	}

	@media (min-width: 40em) {
		.service-row {
			grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 1fr);
			column-gap: clamp(2rem, 5vw, 4rem);
			row-gap: 0;
			align-items: baseline;
			padding-block: clamp(1.75rem, 3.6vw, 2.75rem);
		}
	}

	.service-row__title {
		font-family: var(--font-sans);
		font-size: var(--text-md);
		font-weight: 600;
		line-height: 1.3;
		text-wrap: pretty;
	}

	.service-row__detail {
		min-inline-size: 0;
		color: var(--text-dim);
		font-size: var(--text-base);
		line-height: 1.55;
	}

	/* ------------------------------------------------------------------------
     5.6 About
     ------------------------------------------------------------------------ */
	.section--about {
		background-color: var(--bg);
	}

	.about {
		display: grid;
		gap: var(--space-5);
		align-items: start;
	}

	@media (min-width: 48em) {
		.about {
			grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
			column-gap: var(--space-6);
		}
	}

	.about__aside {
		max-inline-size: 16rem;
	}

	.about__portrait {
		border-radius: var(--radius);
		border: 1px solid var(--line);
	}

	.about__body>p+p {
		margin-block-start: var(--space-3);
	}

	/* Editorial pull-quote treatment: clear air below the heading, bronze
     rule and italic so it reads as a distinct voice, not a lost first
     paragraph. */
	.about__body .lead {
		font-family: var(--font-serif);
		font-style: italic;
		font-size: var(--text-md);
		line-height: 1.6;
		color: var(--accent-bright);
		margin-block-start: var(--space-4);
		padding-inline-start: var(--space-3);
		border-inline-start: 2px solid var(--bronze-700);
	}

	/* ------------------------------------------------------------------------
     5.7 Contact band + buttons
     ------------------------------------------------------------------------ */
	.band--cta {
		text-align: center;
		/* Angled top only — the bottom sits flat against the site footer.
		   High-left, low-right (same direction as the default .band top). */
		clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%);
		padding-block-end: clamp(3.5rem, 7vw, 5.5rem);
	}

	.band__title {
		font-size: var(--text-xl);
		max-inline-size: 30ch;
		margin-inline: auto;
	}

	.band__copy {
		margin-block-start: var(--space-3);
		max-inline-size: 44ch;
		margin-inline: auto;
		color: var(--paper);
	}

	.band .button {
		margin-block-start: var(--space-5);
	}

	.button {
		display: inline-block;
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: 0.32em;
		text-indent: 0.32em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--paper);
		border: 1px solid color-mix(in srgb, var(--paper) 55%, transparent);
		border-radius: var(--radius);
		padding: 1.1rem 2.2rem;
		transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out),
			border-color 0.3s var(--ease-out);
	}

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

	/* Dark-background variant */
	.button--ink {
		border-color: var(--bronze-500);
	}

	.button--ink:hover {
		background-color: var(--bronze-600);
		border-color: var(--bronze-600);
	}

	/* ------------------------------------------------------------------------
     5.8 Footer
     ------------------------------------------------------------------------ */
	.site-footer {
		background-color: var(--bg-deep);
		padding-block: var(--space-5);
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: 0.24em;
		text-transform: uppercase;
		color: var(--paper-faint);
	}

	.site-footer__inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: var(--space-2) var(--space-4);
	}

	.site-footer__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2) var(--space-3);
	}

	.site-footer a {
		text-decoration-color: transparent;
	}

	.site-footer a:hover {
		color: var(--accent-bright);
		text-decoration-color: currentColor;
	}

	/* ------------------------------------------------------------------------
     5.9 Case studies
     ------------------------------------------------------------------------ */
	.case-hero {
		padding-block: calc(var(--header-h) + var(--space-6)) 0;
	}

	.case-hero__head {
		max-inline-size: 50rem;
	}

	.case-hero__title {
		font-size: var(--text-2xl);
		margin-block-start: var(--space-2);
	}

	.case-hero__lede {
		margin-block-start: var(--space-3);
		font-size: var(--text-md);
		color: var(--text-dim);
		max-inline-size: 40rem;
	}

	.case-meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3) var(--space-6);
		margin-block-start: var(--space-5);
		padding-block-start: var(--space-3);
		border-block-start: 1px solid var(--line);
	}

	.case-meta div {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	.case-meta dt {
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: 0.28em;
		text-transform: uppercase;
		color: var(--paper-faint);
	}

	.case-meta dd {
		font-size: var(--text-sm);
	}

	.case-body {
		max-inline-size: 42rem;
		padding-block: clamp(3.5rem, 8vw, 6rem);
	}

	.case-body h2 {
		font-size: var(--text-lg);
		margin-block-start: var(--space-5);
	}

	.case-body h2:first-child {
		margin-block-start: 0;
	}

	.case-body p {
		margin-block-start: var(--space-3);
		color: var(--text-dim);
	}

	.case-gallery {
		display: grid;
		gap: var(--space-4);
		padding-block: clamp(3.5rem, 8vw, 6rem) 0;
	}

	.case-gallery figure {
		margin: 0;
	}

	.case-gallery img {
		inline-size: 100%;
		border-radius: var(--radius);
		border: 1px solid var(--line);
	}

	.case-gallery figcaption {
		margin-block-start: var(--space-1);
		font-size: var(--text-sm);
		color: var(--paper-faint);
	}

	@media (prefers-reduced-motion: no-preference) {
		@supports (animation-timeline: view()) {
			html.js .case-gallery [data-reveal] {
				opacity: 1;
				translate: none;
				transition: none;
			}

			.case-gallery figure {
				animation: gallery-rise linear both;
				animation-timeline: view();
				animation-range: entry 0% entry 80%;
			}

			.case-gallery figure:nth-child(even) {
				animation-range: entry 8% entry 88%;
			}

			@keyframes gallery-rise {
				from {
					translate: 0 2.5rem;
					opacity: 0.4;
				}

				to {
					translate: 0 0;
					opacity: 1;
				}
			}
		}
	}

	.case-next {
		--cut-sm: clamp(1.75rem, 3.5vw, 3.5rem);
		margin-block-start: clamp(4rem, 10vw, 7rem);
		text-align: center;
		background-color: var(--bronze-600);
		color: var(--paper);
		/* Angled top only — the bottom sits flat against the site footer */
		clip-path: polygon(0 0, 100% var(--cut-sm), 100% 100%, 0 100%);
		padding-block: calc(var(--cut-sm) + 2.75rem) 3.25rem;
		padding-inline: var(--space-3);
	}

	.case-next ::selection {
		background-color: var(--ink-950);
		color: var(--paper);
	}

	.case-next__label {
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: 0.3em;
		text-transform: uppercase;
		color: var(--paper);
	}

	.case-next__title {
		font-size: var(--text-xl);
		margin-block-start: var(--space-2);
	}

	.case-next__title a {
		text-decoration: none;
	}

	.case-next__title a:hover {
		color: var(--ink-950);
	}

	/* ------------------------------------------------------------------------
     5.10 Error page
     ------------------------------------------------------------------------ */
	.error-page {
		min-block-size: 100svh;
		display: grid;
		place-items: center;
		text-align: center;
		padding-block: var(--space-7);
	}

	.error-page__code {
		font-family: var(--font-serif);
		font-size: clamp(5rem, 18vw, 11rem);
		line-height: 1;
		color: var(--bronze-600);
	}

	.error-page__note {
		margin-block-start: var(--space-3);
		color: var(--text-dim);
	}

	.error-page .button {
		margin-block-start: var(--space-5);
	}
}

/* --------------------------------------------------------------------------
   6. UTILITIES
   -------------------------------------------------------------------------- */
@layer utilities {
	.eyebrow {
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: 0.34em;
		text-transform: uppercase;
		color: var(--accent);
	}

	.band .eyebrow {
		color: var(--paper);
	}

	.visually-hidden {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.skip-link {
		position: fixed;
		inset-block-start: 0.75rem;
		inset-inline-start: 0.75rem;
		z-index: 100;
		translate: 0 calc(-100% - 1.5rem);
		background-color: var(--bronze-600);
		color: var(--paper);
		font-size: var(--text-sm);
		font-weight: 600;
		text-decoration: none;
		padding: 0.75rem 1.25rem;
		border-radius: var(--radius);
		transition: translate 0.2s var(--ease-out);
	}

	.skip-link:focus-visible {
		translate: 0 0;
	}
}

/* --------------------------------------------------------------------------
   7. MOTION — entrance reveals
   Reveal styling only applies when motion is welcome AND main.js has
   actually run (html.js), so content is never stranded invisible —
   not for no-JS visitors, and not if the script fails to arrive.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html.js [data-reveal] {
		opacity: 0;
		translate: 0 1.5rem;
		transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out);
	}

	html.js [data-reveal="2"] {
		transition-delay: 0.12s;
	}

	html.js [data-reveal="3"] {
		transition-delay: 0.24s;
	}

	html.js [data-reveal].is-visible {
		opacity: 1;
		translate: 0 0;
	}
}

/* --------------------------------------------------------------------------
   8. PRINT — because someone, somewhere, will print a portfolio
   -------------------------------------------------------------------------- */
@media print {

	body::after,
	.site-header,
	.hero__cue,
	.skip-link {
		display: none;
	}

	body {
		background: #fff;
		color: #111;
	}

	.band {
		clip-path: none;
		background: #fff;
		color: #111;
	}

	a::after {
		content: " (" attr(href) ")";
		font-size: 0.75em;
		color: #555;
	}
}