:root {
	/* Compliance vocabulary: International's posters plastered across concrete walls 1970s Corbusian campus building IntersectionObserver required `threshold: 0.15`. function (`cubic-bezier(0.175 (Google italic italic-simulated angle (using `transform: */
	--abyss: #0a2540;
	--deep: #1b4965;
	--pelagic: #176b87;
	--bioluminescent: #40e0d0;
	--surface: #e8f1f5;
	--foam: #f4f9fc;
	--signal: #c0392b;
	--parchment: #f5f0e8;
	--body-ink: #2c3e50;
	--elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	background: var(--abyss);
}

body {
	min-width: 320px;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: clamp(1rem, 1.2vw, 1.25rem);
	line-height: 1.72;
	letter-spacing: 0.005em;
	color: var(--body-ink);
	background: var(--foam);
}

.site-root {
	overflow-x: hidden;
}

.hero {
	position: relative;
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(0, 60%) minmax(0, 40%);
	align-items: stretch;
	background: var(--abyss);
	overflow: hidden;
}

.hero-type {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: clamp(0rem, 2vw, 2rem);
	padding-right: 0;
}

.kicker,
.section-label,
.archive-kicker {
	font-family: "Space Grotesk", Arial, sans-serif;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

.kicker {
	width: min(40rem, 78vw);
	margin: 0 0 1rem 0.35rem;
	color: var(--surface);
	font-size: clamp(0.75rem, 1vw, 1rem);
	transform: skewX(-8deg);
	opacity: 0;
	animation: fadeLift 700ms var(--elastic) 450ms forwards;
}

.hero-title {
	font-family: "Anybody", "Space Grotesk", sans-serif;
	font-size: clamp(8rem, 15vw, 20rem);
	font-weight: 900;
	font-variation-settings: "wght" 900, "wdth" 118;
	line-height: 0.88;
	letter-spacing: -0.06em;
	color: var(--surface);
	white-space: nowrap;
	transform: translateX(0);
	mix-blend-mode: normal;
}

.hero-title span {
	display: inline-block;
	transform: translateY(40px);
	opacity: 0;
	transition: transform 620ms var(--elastic), opacity 620ms var(--elastic);
}

.hero-title span.stamped {
	transform: translateY(0);
	opacity: 1;
}

.hero-document {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 49vw;
	height: 100%;
	margin: 0;
	animation: elasticSlide 1.2s var(--elastic) 100ms both;
}

.hero-diagonal {
	position: absolute;
	z-index: 4;
	left: -6vw;
	top: 18vh;
	width: 112vw;
	height: 64vh;
	pointer-events: none;
	transform: rotate(15deg);
}

.hero-diagonal line {
	stroke: var(--signal);
	stroke-width: 3;
	stroke-dasharray: 112;
	stroke-dashoffset: 112;
	animation: slashDraw 800ms ease-out 600ms forwards;
}

.section-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0 0 1rem;
	color: var(--deep);
	font-size: 0.78rem;
}

.chamber {
	min-height: 100vh;
	padding: clamp(2rem, 5vw, 6rem) clamp(0.75rem, 2vw, 2rem);
	background: var(--foam);
}

.argument-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 2px;
	max-width: 1440px;
	margin: 0 auto;
}

.grid-block {
	position: relative;
	min-height: 28rem;
	display: grid;
	grid-template-rows: minmax(12rem, 48%) 1fr;
	border: 2px solid var(--abyss);
	border-radius: 0;
	background: var(--surface);
	overflow: hidden;
	opacity: 0;
	transform: scale(0.9) translateY(30px) rotate(0.3deg);
	transition: box-shadow 360ms var(--elastic), border-color 360ms var(--elastic);
}

.grid-block:nth-child(even) {
	transform: scale(0.9) translateY(30px) rotate(-0.2deg);
}

.grid-block.in-view {
	animation: elasticEnter 820ms var(--elastic) forwards;
}

.grid-block:nth-child(even).in-view {
	animation-name: elasticEnterEven;
}

.grid-block:hover {
	border-color: var(--deep);
	box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.24), 18px 18px 0 rgba(10, 37, 64, 0.08);
}

.span-three { grid-column: span 3; }
.span-four { grid-column: span 4; }
.span-five { grid-column: span 5; }
.span-seven { grid-column: span 7; }
.span-eight { grid-column: span 8; }
.span-nine { grid-column: span 9; }

.tall { min-height: 38rem; }
.wide { grid-template-columns: 45% 55%; grid-template-rows: 1fr; }
.compact { min-height: 24rem; }

.block-copy {
	padding: clamp(1rem, 2.2vw, 2rem);
}

.spine .block-copy,
.spine-inset {
	border-left: 3px solid var(--deep);
	padding-left: clamp(1.4rem, 2.5vw, 2.5rem);
}

.block-copy h2,
.archive-shell h2 {
	font-family: "Space Grotesk", Arial, sans-serif;
	font-size: clamp(1.4rem, 3vw, 2.8rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--deep);
}

.block-copy p {
	margin-top: 1rem;
}

.lead-copy h2 {
	font-family: "Anybody", "Space Grotesk", sans-serif;
	font-size: clamp(3rem, 7vw, 8rem);
	font-variation-settings: "wght" 900, "wdth" 130;
	letter-spacing: -0.06em;
	line-height: 0.88;
	color: var(--abyss);
	text-transform: none;
}

.dark-card {
	background: var(--abyss);
	color: var(--surface);
}

.dark-card h2 {
	color: var(--surface);
}

.dark-card p {
	color: var(--b8d4e3, #b8d4e3);
}

.note-mark {
	font-family: "Space Grotesk", Arial, sans-serif;
	font-size: 0.65rem;
	font-weight: 500;
	color: var(--pelagic);
}

.photo-plate {
	position: relative;
	margin: 0;
	min-height: 15rem;
	overflow: hidden;
	background: var(--abyss);
}

.photo-plate span,
.photo-plate::before,
.photo-plate::after {
	content: "";
	position: absolute;
	inset: 0;
}

.photo-plate span {
	filter: grayscale(100%) contrast(1.4) brightness(0.9);
	transition: filter 600ms var(--elastic), transform 600ms var(--elastic);
	transform: scale(1.02);
}

.grid-block:hover .photo-plate span,
.hero-document:hover span {
	filter: grayscale(0%) contrast(1.1) brightness(1);
	transform: scale(1.06);
}

.photo-plate::after {
	background: repeating-linear-gradient(0deg, rgba(244, 249, 252, 0.08) 0 1px, transparent 1px 5px);
	mix-blend-mode: overlay;
	pointer-events: none;
}

.corridor span {
	background:
		linear-gradient(109deg, transparent 0 31%, rgba(232, 241, 245, 0.82) 31.2% 33%, transparent 33.2% 100%),
		linear-gradient(72deg, transparent 0 45%, rgba(232, 241, 245, 0.42) 45.3% 46.5%, transparent 46.8% 100%),
		repeating-linear-gradient(90deg, rgba(244, 249, 252, 0.14) 0 8px, transparent 8px 58px),
		linear-gradient(140deg, #0a2540, #1b4965 42%, #e8f1f5 43%, #176b87 52%, #0a2540);
}

.podium span {
	background:
		linear-gradient(90deg, transparent 0 38%, #f5f0e8 38% 62%, transparent 62%),
		linear-gradient(0deg, #1b4965 0 22%, transparent 22%),
		radial-gradient(ellipse at 50% 32%, #e8f1f5 0 8%, transparent 8.5%),
		linear-gradient(145deg, #0a2540, #176b87 58%, #f4f9fc);
}

.columns span {
	background:
		repeating-linear-gradient(90deg, transparent 0 11%, rgba(245, 240, 232, 0.9) 11.5% 16%, transparent 16.5% 25%),
		linear-gradient(160deg, #0a2540, #1b4965 48%, #f4f9fc 49%, #176b87);
}

.books span {
	background:
		repeating-linear-gradient(172deg, #f5f0e8 0 18px, #1b4965 18px 22px, #e8f1f5 22px 46px, #0a2540 46px 50px),
		linear-gradient(135deg, #176b87, #0a2540);
}

.inscription span {
	background:
		repeating-linear-gradient(0deg, transparent 0 23px, rgba(10, 37, 64, 0.34) 23px 26px),
		repeating-linear-gradient(90deg, transparent 0 60px, rgba(232, 241, 245, 0.24) 60px 66px),
		linear-gradient(135deg, #f5f0e8, #b8d4e3 48%, #1b4965);
}

.gates span {
	background:
		repeating-linear-gradient(90deg, transparent 0 31px, #0a2540 31px 36px),
		repeating-linear-gradient(45deg, transparent 0 38px, rgba(10, 37, 64, 0.82) 38px 42px),
		linear-gradient(150deg, #e8f1f5, #176b87 52%, #0a2540);
}

.hallway span {
	background:
		linear-gradient(118deg, transparent 0 28%, rgba(244, 249, 252, 0.78) 28.2% 30%, transparent 30.2%),
		linear-gradient(62deg, transparent 0 56%, rgba(10, 37, 64, 0.72) 56.2% 58%, transparent 58.2%),
		repeating-linear-gradient(90deg, rgba(232, 241, 245, 0.13) 0 3px, transparent 3px 42px),
		linear-gradient(155deg, #0a2540, #176b87 50%, #f5f0e8);
}

.archive {
	position: relative;
	min-height: 100vh;
	padding: 0 clamp(1rem, 4vw, 5rem) clamp(5rem, 8vw, 9rem);
	background: linear-gradient(to bottom, var(--foam) 0, var(--foam) 1rem, var(--parchment) 13rem, var(--parchment) 100%);
}

.binding-stitch {
	width: 100vw;
	height: 6px;
	margin-left: calc(50% - 50vw);
	background: radial-gradient(circle, rgba(27, 73, 101, 0.2) 2px, transparent 2px);
	background-size: 24px 24px;
	transform-origin: left center;
	transform: scaleX(0);
}

.binding-stitch.in-view {
	animation: stitchDraw 1s ease-out forwards;
}

.archive-shell {
	position: relative;
	max-width: 1120px;
	margin: 0 auto;
	padding-top: clamp(5rem, 9vw, 9rem);
}

.archive-kicker {
	margin-bottom: 1rem;
	color: var(--pelagic);
	font-size: 0.8rem;
	transform: skewX(-8deg);
}

.archive-shell h2 {
	font-family: "Anybody", "Space Grotesk", sans-serif;
	font-size: clamp(4rem, 10vw, 14rem);
	font-variation-settings: "wght" 900, "wdth" 120;
	letter-spacing: -0.06em;
	line-height: 0.88;
	text-transform: none;
	color: var(--abyss);
	margin-bottom: 3rem;
	opacity: 0;
	transform: scale(0.96);
}

.archive-shell.in-view h2 {
	animation: archiveHead 1s var(--elastic) forwards;
}

.archive-text {
	position: relative;
	column-count: 2;
	column-gap: 3rem;
	column-rule: 1px solid var(--deep);
	max-width: 1000px;
	color: var(--body-ink);
}

.archive-text p {
	break-inside: avoid;
	margin-bottom: 1.55rem;
}

.margin-gloss {
	position: absolute;
	right: -120px;
	width: 100px;
	font-family: "Space Grotesk", Arial, sans-serif;
	font-size: 0.72rem;
	font-weight: 300;
	line-height: 1.25;
	color: var(--pelagic);
	transform: skewX(-8deg);
}

.floor {
	min-height: 100vh;
	display: flex;
	align-items: center;
	background: var(--abyss);
	padding: clamp(2rem, 6vw, 6rem);
}

.floor-statement {
	max-width: 1280px;
	font-family: "Anybody", "Space Grotesk", sans-serif;
	font-size: clamp(3rem, 6vw, 7rem);
	font-weight: 900;
	font-variation-settings: "wght" 900, "wdth" 120;
	line-height: 0.88;
	letter-spacing: -0.06em;
	color: var(--surface);
	opacity: 0;
	transform: scale(0.95);
}

.floor-statement.in-view {
	animation: floorScale 1.5s var(--elastic) forwards;
}

@keyframes elasticSlide {
	0% { transform: translateX(100%); }
	70% { transform: translateX(-3%); }
	85% { transform: translateX(1%); }
	100% { transform: translateX(0); }
}

@keyframes slashDraw {
	to { stroke-dashoffset: 0; }
}

@keyframes fadeLift {
	from { opacity: 0; transform: translateY(20px) skewX(-8deg); }
	to { opacity: 1; transform: translateY(0) skewX(-8deg); }
}

@keyframes elasticEnter {
	from { opacity: 0; transform: scale(0.9) translateY(30px) rotate(0.3deg); }
	to { opacity: 1; transform: scale(1) translateY(0) rotate(0.3deg); }
}

@keyframes elasticEnterEven {
	from { opacity: 0; transform: scale(0.9) translateY(30px) rotate(-0.2deg); }
	to { opacity: 1; transform: scale(1) translateY(0) rotate(-0.2deg); }
}

@keyframes stitchDraw {
	to { transform: scaleX(1); }
}

@keyframes archiveHead {
	to { opacity: 1; transform: scale(1); }
}

@keyframes floorScale {
	to { opacity: 1; transform: scale(1); }
}

@media (max-width: 980px) {
	.hero {
		grid-template-columns: 1fr;
	}

	.hero-type {
		min-height: 100vh;
		padding: 2rem 1rem;
	}

	.hero-title {
		font-size: clamp(4.2rem, 18vw, 10rem);
	}

	.hero-document {
		width: 58vw;
		opacity: 0.72;
	}

	.argument-grid {
		grid-template-columns: 1fr;
	}

	.span-three,
	.span-four,
	.span-five,
	.span-seven,
	.span-eight,
	.span-nine {
		grid-column: 1;
	}

	.wide {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(12rem, 44%) 1fr;
	}

	.archive-text {
		column-count: 1;
		column-rule: 0;
	}

	.margin-gloss {
		position: static;
		display: block;
		width: auto;
		margin: 0.6rem 0 0 1.2rem;
	}
}

@media (max-width: 520px) {
	.hero-title {
		font-size: clamp(3.2rem, 17vw, 5.8rem);
	}

	.hero-document {
		width: 72vw;
	}

	.hero-diagonal {
		top: 26vh;
		height: 42vh;
	}

	.chamber {
		padding-inline: 0.5rem;
	}

	.grid-block {
		min-height: 22rem;
	}

	.archive-shell h2 {
		font-size: clamp(3rem, 18vw, 5.6rem);
	}
}