/* =========================================================
   Snap Fusion — Production stylesheet
   Breakpoints
     base   : mobile (matches Figma 402px)
     ≥768px : iPad (intermediate scaling)
     ≥1024px: desktop (matches Figma 1512px)
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
	--black: #000000;
	--white: #ffffff;
	--wafer: #cedc2e;

	--rule: rgba(255, 255, 255, 0.35);

	/* Helvetica Neue Medium primary; Inter 500 = closest free fallback */
	--font-display: "Helvetica Neue", "Inter", system-ui, -apple-system, sans-serif;
	/* Andale Mono primary; JetBrains Mono = closest free fallback */
	--font-mono: "Andale Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Type scale — mobile defaults */
	--fs-h1: 80px;
	--lh-h1: 90px;
	--fs-h2: 30px;
	--lh-h2: 1.05;
	--fs-h3: 32px;
	--lh-h3: 36px;
	--fs-copy: 16px;
	--lh-copy: 30px;
	--fs-info: 12px;
	--lh-info: 30px;

	--gutter: 22px;
	--section-y: 72px;
}

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

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

body {
	margin: 0;
	background: var(--black);
	color: var(--white);
	font-family: var(--font-mono);
	font-size: var(--fs-copy);
	line-height: var(--lh-copy);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a {
	-webkit-tap-highlight-color: transparent;
	color: inherit;
	text-decoration: none;
}

a:focus {
	outline: none;
	color: var(--wafer);
}

a:focus-visible {
	outline: 2px solid var(--wafer);
	outline-offset: 4px;
}

a:hover {
	color: var(--wafer);
}

/* Page wrapper — caps width at 1700, becomes the positioning context for
   absolutely-placed elements (logo, nav, decorative marks) so they don't
   fly to the viewport edges on ultra-wide screens. */
.page {
	position: relative;
	max-width: 1700px;
	margin: 0 auto;
	overflow-x: clip;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

ul, ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

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

hr.rule--top {
	margin-top: 32px;
}

/* Full-width rule extends to the page wrapper (not the viewport) so it stays
   inside the centered layout on widths > 1700px. */
hr.rule--full {
	width: 100%;
	margin-left: 0;
}

.intro__media {
	width: 100%;
	margin-left: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
	background: var(--wafer);
	color: var(--black);
	padding: 8px 12px;
	z-index: 100;
}

/* ---------- Layout primitives ----------
   Container uses gutter padding only — no centering max-width below desktop.
   On desktop we widen to viewport with the gutter as the content margin
   (matches the Figma spec where content begins at x = gutter, not gutter+inset).
   ---------------------------------------- */
.container {
	width: 100%;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	margin: 0 auto;
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-info);
	line-height: var(--lh-info);
	color: var(--wafer);
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 0;
}

.accent {
	color: var(--wafer);
}

/* ====================================================
   HEADER
   ==================================================== */
.header {
	position: relative;
	padding: 1px 0 var(--section-y); /* 1px top prevents hero margin collapse */
	isolation: isolate;
}

/* Logo: static, top-left, sits above lime menu in z-order */
.header__logo {
	position: absolute;
	top: 32px;
	left: var(--gutter);
	z-index: 30;
	display: block;
}

.header__logo img {
	width: 135px;
	height: auto;
}

/* Lime menu block in the upper right corner */
.nav {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 20;
	/* Mobile size: closed = just enough room for the word "MENU" */
	width: 60%;
	max-width: 232px;
	background: var(--wafer);
	color: var(--black);
}

/* Toggle visible only on mobile/tablet */
.nav__toggle {
	display: block;
	width: 100%;
	padding: 22px 22px 18px;
	text-align: right;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 20px;
	line-height: 1;
	color: var(--black);
	text-transform: uppercase;
	background: transparent;
}

.nav__toggle-label::after {
	content: " +";
	display: inline-block;
	margin-left: 6px;
	font-family: var(--font-mono);
	transition: transform .2s ease;
}

.nav.is-open .nav__toggle-label::after {
	content: " ×";
}

.nav__panel {
	display: none;
	padding: 0 22px 22px;
	text-align: right;
}

.nav.is-open .nav__panel {
	display: block;
}

.nav__heading {
	display: none; /* hidden on mobile (the toggle already says "Menu") */
	margin: 0 0 6px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
}

.nav__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 15px;
	line-height: 1.4;
	text-transform: uppercase;
}

.nav__list a:hover {
	text-decoration: underline;
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	margin-top: 200px; /* clear the menu/logo area on mobile */
}

.hero__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	margin: 0 0 28px;
	letter-spacing: -0.01em;
}

.hero__lede {
	max-width: 32ch;
	font-family: var(--font-mono);
	font-size: var(--fs-copy);
	line-height: var(--lh-copy);
	margin: 0 0 40px;
}

.hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* Big decorative SF "M" mark — lives INSIDE the nav so it travels with the
   menu. Hidden by default; revealed on widths ≥ 1450 only. */
.nav__mark {
	display: none;
	position: absolute;
	pointer-events: none;
}

.nav__mark img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 18px;
	font-family: var(--font-mono);
	font-size: var(--fs-info);
	line-height: 1;
	text-transform: uppercase;
	border-radius: 2px;
	transition: background-color .15s ease, color .15s ease;
}

.btn--primary {
	background: var(--wafer);
	color: var(--black);
	min-width: 219px;
}

.btn--primary:hover {
	background: #dcea3b;
}

.btn--secondary {
	background: transparent;
	color: var(--wafer);
	border: 1px solid var(--wafer);
	min-width: 115px;
}

.btn--secondary:hover {
	background: var(--wafer);
	color: var(--black);
}

/* ====================================================
   INTRO
   ==================================================== */
.intro {
	margin-top: var(--section-y);
}

.intro__media {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.intro__media img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.intro__text {
	margin-top: 32px;
	max-width: 480px;
}

.intro__copy {
	margin: 8px 0 0;
	font-family: var(--font-mono);
	font-size: var(--fs-copy);
	line-height: var(--lh-copy);
}

/* ====================================================
   THESIS
   ==================================================== */
.thesis {
	margin-top: calc(var(--section-y) + 16px);
}

.thesis__grid {
	display: block;
}

.thesis__statement {
	margin: 16px 0 24px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h2);
	line-height: 1.05;
	letter-spacing: -0.005em;
	max-width: 26ch;
}

.thesis__supporting {
	font-family: var(--font-mono);
	font-size: var(--fs-copy);
	line-height: var(--lh-copy);
	margin: 0;
	max-width: 60ch;
}

.rule--thesis {
	margin: 32px 0 12px;
}

.meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 22px;
	margin: 12px 0 0;
}

.meta__item dt {
	margin: 0 0 0;
}

.meta__item dd {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-copy);
	line-height: var(--lh-copy);
	text-transform: uppercase;
}

/* ====================================================
   ERAS OF ENERGY
   ==================================================== */
.eras {
	margin-top: var(--section-y);
}

.eras__title {
	margin: 12px 0 28px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h2);
	line-height: 1.1;
}

.eras__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.era {
	padding: 24px 0;
	border-bottom: 1px solid var(--rule);
}

.era__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}

.era__icon {
	width: 22px;
	height: 26px;
	object-fit: contain;
}

.era h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

.era__when {
	font-family: var(--font-mono);
	font-size: var(--fs-copy);
	line-height: var(--lh-copy);
	margin: 0;
}

.era__what {
	font-family: var(--font-mono);
	font-size: var(--fs-copy);
	line-height: var(--lh-copy);
	margin: 0;
	opacity: .9;
}

/* ====================================================
   MANIFEST
   ==================================================== */
.manifest {
	margin-top: var(--section-y);
}

.manifest__header {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 28px;
}

.manifest__no {
	font-family: var(--font-mono);
	font-size: var(--fs-info);
	line-height: var(--lh-info);
	text-transform: uppercase;
	margin: 0;
}

.manifest__grid {
	display: block;
}

.manifest__body p {
	font-family: var(--font-mono);
	font-size: var(--fs-copy);
	line-height: var(--lh-copy);
	margin: 0 0 28px;
}

.manifest__close {
	margin-top: 24px;
}

.manifest__h {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h2);
	line-height: 1.05;
	margin: 0 0 16px;
}

.manifest__belief {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
	margin: 0 0 24px;
}

.manifest__sig {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 16px 0 0;
	font-family: var(--font-mono);
	font-size: var(--fs-info);
	line-height: var(--lh-info);
	text-transform: uppercase;
}

/* ====================================================
   CONTACT
   ==================================================== */
.contact {
	margin-top: var(--section-y);
}

.contact__intro {
	display: block;
}

.contact__h {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h2);
	line-height: 1.05;
	margin: 12px 0 12px;
	max-width: 12ch;
}

.contact__highlight {
	display: block;
	background: var(--wafer);
	color: var(--black);
	font-family: var(--font-mono);
	font-size: var(--fs-copy);
	padding: 2px 4px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin-top: 24px;
}

.contact__card {
	padding-bottom: 24px;
}

.contact__email {
	display: block;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
	margin: 12px 0;
	word-break: break-word;
}

.contact__email:hover {
	color: var(--wafer);
}

.contact__divider.contact__divider {
	margin: 12px 0;
}

.contact__tags {
	font-family: var(--font-mono);
	font-size: var(--fs-info);
	line-height: var(--lh-info);
	margin: 0;
	position: relative;
	text-transform: uppercase;
}

.contact__linkedin {
	width: 20px;
	height: 20px;
	display: block;
	position: absolute;
	right: 1px;
	top: 5px;
}

.contact__linkedin img {
	width: 20px;
	height: 20px;
}

/* ====================================================
   FOOTER (mobile baseline)
   Spec layout: rule | wordmark + legal row | rule | marquee | rule | bottom row
   ==================================================== */
.footer {
	margin-top: 75px;
	position: relative;
	font-family: var(--font-mono);
	font-size: var(--fs-info);
	line-height: var(--lh-info);
	text-transform: uppercase;
}

.footer__top {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.footer__wordmark {
	display: block;
	width: 122px;
	line-height: 0;
	flex: 0 0 auto;
}

.footer__wordmark img {
	width: 122px;
	height: auto;
	display: block;
}

.footer__legal {
	display: flex;
	gap: 24px;
}

.footer__legal a:hover {
	color: var(--wafer);
}

.footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 14px;
	padding-bottom: 32px;
}

.footer__bottom p {
	margin: 0;
}

/* ---------- Marquee ---------- */
.marquee {
	position: relative;
}

.marquee__viewport {
	overflow: hidden;
	white-space: nowrap;
}

.marquee__track {
	display: inline-flex;
	white-space: nowrap;
	animation: marquee 45s linear infinite;
	padding: 14px 0;
	font-family: var(--font-mono);
	font-size: var(--fs-info);
	line-height: var(--lh-info);
	text-transform: uppercase;
}

.marquee__track span {
	padding-right: 7px;
}

@keyframes marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		animation: none;
	}

	html {
		scroll-behavior: auto;
	}
}

/* =========================================================
   ≥ 768px — iPad (768-1023)
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
	:root {
		--gutter: 48px;
		--section-y: 110px;
		--fs-h1: 132px;
		--lh-h1: 124px;
		--fs-h2: 40px;
		--fs-h3: 28px;
	}

	.header__logo {
		top: 42px;
	}

	.header__logo img {
		width: 180px;
	}

	.nav {
		width: 320px;
		max-width: 320px;
	}

	.nav__toggle {
		padding: 32px 32px 22px;
		font-size: 24px;
	}

	.nav__panel {
		padding: 0 32px 28px;
	}

	.hero {
		margin-top: 240px;
	}

	.hero__lede {
		font-size: 18px;
		max-width: 60ch;
	}

	.hero__cta .btn {
		padding: 0 24px;
	}

	/* Hide decorative mark on iPad — would overlap hero text at this width */
	.hero__mark {
		display: none;
	}

	/* Intro: image left, text right */
	.intro {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: end;
	}

	.intro__media {
		width: 100%;
		margin-left: 0;
	}

	.intro__text {
		margin-top: 0;
		align-self: end;
		padding-bottom: 12px;
	}

	/* Thesis: 2-column statement / supporting */
	.thesis__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: start;
	}

	.thesis__statement {
		margin-top: 0;
	}

	.meta {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 0 32px;
	}

	/* Eras: 2x2 grid on iPad */
	.eras__list {
		grid-template-columns: 1fr 1fr;
		gap: 0;
		border-top: 1px solid var(--rule);
	}

	.era {
		padding: 24px 28px;
		border-bottom: 1px solid var(--rule);
	}

	.era + .era {
		border-left: 1px solid var(--rule);
	}

	.era:nth-child(2n+1) {
		border-left: 0;
	}

	/* Manifest: side-by-side */
	.manifest__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 56px;
		align-items: start;
	}

	.manifest__header {
		margin-bottom: 36px;
	}

	.manifest__close {
		margin-top: 0;
	}

	.manifest__belief {
		font-size: 24px;
	}

	/* Contact split */
	.contact__intro {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: start;
	}

	.contact__h {
		font-size: 56px;
		max-width: 14ch;
	}

	.contact__grid {
		grid-template-columns: 1fr 1fr;
		gap: 24px 48px;
		padding-top: 32px;
	}

	/* Footer */
	.footer__top {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.footer__bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}

/* =========================================================
   ≥ 1024px — Compact desktop (1024-1449)
   Layout/typography for desktop, but with toggle menu (no full lime
   quadrant) and no decorative SF mark. Meta + contact use flexible
   columns so they fit any width up to 1449.
   ========================================================= */
@media (min-width: 1024px) {
	:root {
		--gutter: 75px;
		--section-y: 130px;
		--fs-h1: 132px;
		--lh-h1: 124px;
		--fs-h2: 48px;
		--fs-h3: 32px;
	}

	.header {
		padding: 1px 0 0;
	}

	.header__logo {
		top: 52px;
		left: var(--gutter);
	}

	.header__logo img {
		width: 240px;
	}

	.hero {
		margin-top: 220px;
		padding-bottom: 50px;
	}

	.hero__title {
		letter-spacing: -0.02em;
		max-width: 772px;
	}

	.hero__lede {
		max-width: 600px;
		font-size: 16px;
		margin-bottom: 32px;
	}

	/* Intro: at compact desktop, image stacks on top inside container, text below right-aligned */
	.intro {
		display: grid;
		grid-template-columns: 1fr;
		gap: 32px;
		align-items: start;
		margin-top: 0;
		position: relative;
	}

	.intro__media {
		width: 100%;
		margin-left: 0;
	}

	.intro__media img {
		width: 100%;
		max-width: 882px;
		height: auto;
	}

	.intro__text {
		align-self: end;
		padding: 0;
		margin-left: auto;
		max-width: 480px;
	}

	/* Thesis: 2-col where right column is flexible */
	.thesis__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 64px;
		align-items: start;
	}

	.thesis__statement {
		font-size: 48px;
		max-width: 603px;
	}

	.thesis__supporting {
		font-size: 16px;
		max-width: 480px;
	}

	/* Meta wraps below thesis grid, aligned to right column */
	.meta {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 24px;
		max-width: 600px;
		margin-left: auto; /* right-align under supporting column */
	}

	.thesis__grid + .rule--thesis {
		margin: 32px 0 12px auto;
		width: 100%;
		max-width: 600px;
	}

	/* Eras: 4 across with vertical separators */
	.eras__title {
		font-size: 48px;
		max-width: 603px;
	}

	.eras__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		border-top: 1px solid var(--rule);
		align-items: stretch;
		min-height: 226px;
	}

	.era {
		padding: 30px 24px;
		border-left: 1px solid var(--rule);
		border-bottom: 0;
		height: 100%;
		box-sizing: border-box;
	}

	.era:first-child {
		border-left: 0;
		padding-left: 0;
	}

	.era__head {
		gap: 16px;
		margin-bottom: 12px;
	}

	.era h3 {
		font-size: 32px;
	}

	.era__when {
		font-size: 16px;
	}

	.era__what {
		font-size: 16px;
		max-width: 289px;
	}

	/* Manifest: flexible 2-col with header in col 1, body in col 2.
		 Header & body share the same row so their tops align. */
	.manifest__grid {
		display: grid;
		grid-template-columns: minmax(220px, 350px) minmax(0, 1fr);
		gap: 0 48px;
		align-items: start;
	}

	.manifest__header {
		grid-column: 1 / 2;
		grid-row: 1;
		margin: 0;
		padding-top: 0;
	}

	.manifest__body {
		grid-column: 2 / 3;
		grid-row: 1;
		max-width: 663px;
	}

	.manifest__body p:first-child {
		margin-top: 0;
	}

	.manifest__close {
		grid-column: 2 / 3;
		grid-row: 2;
		margin-top: 32px;
		max-width: 663px;
	}

	.manifest__belief {
		font-size: 32px;
		line-height: 38px;
		max-width: 663px;
	}

	.manifest__h {
		font-size: 48px;
		max-width: 663px;
	}

	/* Contact: flexible 2-col */
	.contact__intro {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 64px;
		align-items: start;
	}

	.contact__h {
		font-size: 48px;
		max-width: 558px;
		line-height: 1.1;
		margin: 0;
	}

	.contact__highlight {
		font-size: 16px;
	}

	.contact__grid {
		margin-top: 26px;
		gap: 0 47px;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		position: relative;
	}

	.contact__grid::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		bottom: 0;
		width: 1px;
		background: var(--rule);
		transform: translateX(-50%);
	}

	.contact__card {
		padding-bottom: 0;
		min-height: 220px;
	}

	.contact__email {
		font-size: 24px;
	}

	/* Footer */
	.footer {
		margin-top: 32px;
	}

	.footer__top {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 22px;
		padding-bottom: 22px;
	}

	.footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 18px;
		padding-bottom: 56px;
	}
}

/* =========================================================
   ≥ 1450px — Full desktop (matches Figma 1512px reference)
   Lime menu becomes the 500×500 always-open quadrant, the SF "M" mark
   is shown next to it, and meta/contact snap to spec-fixed widths.
   ========================================================= */
@media (min-width: 1450px) {
	:root {
		--section-y: 160px;
		--fs-h1: 180px;
		--lh-h1: 170px;
	}

	/* Lime menu — 500×500 always-open quadrant */
	.nav {
		width: 500px;
		max-width: 500px;
		height: 500px;
		padding: 41px 47px 28px;
	}

	.nav__toggle {
		display: none;
	}

	.nav__panel {
		display: block !important;
		padding: 0;
		text-align: right;
	}

	.nav__heading {
		display: block;
		margin: 0 0 16px;
		font-size: 20px;
	}

	.nav__list {
		gap: 4px;
		font-size: 15px;
		line-height: 28px;
	}

	/* SF "M" mark — sits to the LEFT of the lime quadrant, grouped with it.
		 Spec node 13:31 at x=847 y=224 size=437x438 inside a 1512px frame, so
		 left edge sits 165px to the left of nav's left edge (1012-847=165). */
	.nav__mark {
		display: block;
		top: 224px;
		right: 100%; /* right edge of mark = left edge of nav */
		margin-right: -272px; /* pull the mark right so 165px sticks out */
		width: 437px;
		height: 438px;
		z-index: 25; /* above nav body (z:20) */
	}

	.hero {
		margin-top: 0;
		padding-top: 197px;
		padding-bottom: 50px;
		min-height: 730px;
	}

	.hero__lede {
		max-width: 480px;
	}

	/* Intro: bleed image 69px past page left edge */
	.intro {
		grid-template-columns: 882px 1fr;
		gap: 0;
		align-items: end;
		padding-left: 0;
		padding-right: 75px;
	}

	.intro__media {
		width: 882px;
		margin-left: -69px;
	}

	.intro__media img {
		width: 882px;
		max-width: 882px;
	}

	.intro__text {
		padding: 0 0 24px 23px;
		margin-left: 0;
	}

	/* Thesis: spec-exact column widths */
	.thesis {
		margin-top: 153px;
	}

	.thesis__grid {
		grid-template-columns: 603px 1fr;
		column-gap: 227px;
	}

	.meta {
		grid-template-columns: 109px 196px 186px;
		gap: 0 25px;
		max-width: none;
		margin-left: 830px;
	}

	.thesis__grid + .rule--thesis {
		margin: 0 0 12px 830px;
		width: 497px;
		max-width: 497px;
	}

	/* Eras */
	.eras {
		margin-top: 142px;
	}

	.era {
		padding: 30px 0 30px 32px;
	}

	/* Manifest spec: eyebrow column 350, body column 663px */
	.manifest {
		margin-top: 119px;
	}

	.manifest__grid {
		grid-template-columns: calc((100% / 2) - (663px / 2)) 663px;
		gap: 0;
	}

	/* Contact: spec equal 636×636 columns */
	.contact {
		margin-top: 58px;
	}

	.contact__intro, .contact__grid {
		gap: 0 47px;
	}

	.footer {
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}
}

/* IMPRINT & PRIVACY */

.imprint h1, .imprint h2, .imprint h3, .imprint h4, .imprint h5, .imprint h6, .privacy h1, .privacy h2, .privacy h3, .privacy h4, .privacy h5, .privacy h6 {
	font-family: var(--font-display);
}