/* ==========================================================================
   Cairn — base: reset, tokens, the chapter palette engine, motion policy
   ========================================================================== */

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

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

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul {
	margin: 0;
	padding: 0;
}

ol, ul { list-style: none; }

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

button, input, select, textarea {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
}

button { cursor: pointer; }

a { color: inherit; }

table { border-collapse: collapse; width: 100%; }

/* --- Global tokens ------------------------------------------------------ */

:root {
	color-scheme: light;

	--font-display: "Prata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
	--font-mono: "DM Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

	--step--2: 0.6875rem;
	--step--1: 0.78125rem;
	--step-0: clamp(0.9375rem, 0.905rem + 0.16vw, 1.0625rem);
	--step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem);
	--step-2: clamp(1.3125rem, 1.16rem + 0.75vw, 1.95rem);
	--step-3: clamp(1.75rem, 1.4rem + 1.7vw, 3rem);
	--step-4: clamp(2.25rem, 1.6rem + 3.2vw, 4.5rem);
	--step-5: clamp(2.75rem, 1.5rem + 6.2vw, 7.25rem);

	--wrap: 1560px;
	--gutter: clamp(1.25rem, 4.5vw, 4rem);
	--rail: 0rem;
	--col-gap: clamp(1.25rem, 2.4vw, 2.5rem);
	--row-gap: clamp(2rem, 4vw, 4.5rem);
	--band: clamp(4.5rem, 9vw, 10rem);
	--hair: 1px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 0.62s;
	--dur-fast: 0.28s;

	/* Ivory is the default ground; every chapter below re-points these. */
	--bg: #eeeae1;
	--ink: #1d1d1b;
	--ink-soft: #565450;
	--surface: #e6e2d8;
	--rule: rgba(29, 29, 27, 0.16);
	--rule-strong: rgba(29, 29, 27, 0.34);
	--accent: #8a6a4b;
	--accent-ink: #6e5133;
	--solid: #1d1d1b;
	--on-solid: #eeeae1;
	--shade: rgba(24, 24, 23, 0.06);
}

/* --- Chapters -----------------------------------------------------------
   A section declares data-chapter and every component inside it re-reads the
   same six tokens. Adding a ground is one block, not a hundred overrides.
   ----------------------------------------------------------------------- */

[data-chapter="graphite"] {
	--bg: #181817;
	--ink: #f1eee7;
	--ink-soft: #a9a49a;
	--surface: #201f1e;
	--rule: rgba(241, 238, 231, 0.16);
	--rule-strong: rgba(241, 238, 231, 0.4);
	--accent: #b59a6a;
	--accent-ink: #c9ae7d;
	--solid: #b59a6a;
	--on-solid: #181817;
	--shade: rgba(241, 238, 231, 0.07);
}

[data-chapter="limestone"] {
	--bg: #d8d1c4;
	--ink: #292927;
	--ink-soft: #5d594f;
	--surface: #e2dcd2;
	--rule: rgba(41, 41, 39, 0.2);
	--rule-strong: rgba(41, 41, 39, 0.42);
	--accent: #8a6a4b;
	--accent-ink: #6e5133;
	--solid: #292927;
	--on-solid: #f1eee7;
	--shade: rgba(41, 41, 39, 0.07);
}

[data-chapter="cream"] {
	--bg: #f4f1e9;
	--ink: #1d1d1b;
	--ink-soft: #57544e;
	--surface: #ebe7dd;
	--rule: rgba(29, 29, 27, 0.16);
	--rule-strong: rgba(29, 29, 27, 0.36);
	--accent: #a5654e;
	--accent-ink: #8a4e38;
	--solid: #1d1d1b;
	--on-solid: #f4f1e9;
	--shade: rgba(29, 29, 27, 0.05);
}

[data-chapter="concrete"] {
	--bg: #a7a39a;
	--ink: #262624;
	/* Measured, not eyeballed: a mid grey ground leaves very little room
	   under it, and #46443e lands at 3.87:1 here. */
	--ink-soft: #35342e;
	--surface: #b2aea5;
	--rule: rgba(38, 38, 36, 0.26);
	--rule-strong: rgba(38, 38, 36, 0.5);
	--accent: #3b3a33;
	--accent-ink: #262624;
	--solid: #262624;
	--on-solid: #eeeae1;
	--shade: rgba(38, 38, 36, 0.09);
}

[data-chapter="olive"] {
	/* Deeper than the brief's #697061 so a secondary ink can clear 4.5:1
	   against it; #697061 survives as the raised surface. */
	--bg: #4e5447;
	--ink: #e9e3d6;
	--ink-soft: #d0c9b8;
	--surface: #585f50;
	--rule: rgba(233, 227, 214, 0.22);
	--rule-strong: rgba(233, 227, 214, 0.45);
	--accent: #c4b48c;
	--accent-ink: #efe7d3;
	--solid: #e9e3d6;
	--on-solid: #2a2e26;
	--shade: rgba(233, 227, 214, 0.08);
}

[data-chapter="espresso"] {
	--bg: #2b2420;
	--ink: #e8ded3;
	--ink-soft: #a89a8c;
	--surface: #342c27;
	--rule: rgba(232, 222, 211, 0.18);
	--rule-strong: rgba(232, 222, 211, 0.42);
	--accent: #a8755c;
	--accent-ink: #c89178;
	--solid: #e8ded3;
	--on-solid: #2b2420;
	--shade: rgba(232, 222, 211, 0.07);
}

[data-chapter="mist"] {
	--bg: #d8d9d6;
	--ink: #20211f;
	--ink-soft: #51544f;
	--surface: #e2e3e0;
	--rule: rgba(32, 33, 31, 0.2);
	--rule-strong: rgba(32, 33, 31, 0.42);
	--accent: #5b6560;
	--accent-ink: #414a45;
	--solid: #20211f;
	--on-solid: #d8d9d6;
	--shade: rgba(32, 33, 31, 0.06);
}

[data-chapter="ivory"] {
	--bg: #eeeae1;
	--ink: #1d1d1b;
	--ink-soft: #565450;
	--surface: #e6e2d8;
	--rule: rgba(29, 29, 27, 0.15);
	--rule-strong: rgba(29, 29, 27, 0.34);
	--accent: #8a6a4b;
	--accent-ink: #6e5133;
	--solid: #1d1d1b;
	--on-solid: #eeeae1;
	--shade: rgba(29, 29, 27, 0.05);
}

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.6;
	font-weight: 400;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.section {
	position: relative;
	background: var(--bg);
	color: var(--ink);
	padding-block: var(--band);
	/* Sections are painted grounds; a stray horizontal overflow inside one
	   must not push the page wide. */
	contain: paint;
}

/* --- Focus and skip link ------------------------------------------------ */

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

.skip {
	position: fixed;
	inset-inline-start: 1rem;
	inset-block-start: -100%;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: #181817;
	color: #f1eee7;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	text-decoration: none;
}

.skip:focus { inset-block-start: 1rem; }

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

[hidden] { display: none !important; }

/* --- Reveal policy ------------------------------------------------------
   Only a JS-capable page hides anything, so a no-JS reader loses nothing.
   ----------------------------------------------------------------------- */

.js [data-reveal="up"],
.js [data-reveal="lines"] .line__i {
	opacity: 0;
	transform: translateY(1.15rem);
	transition:
		opacity var(--dur) var(--ease-out),
		transform var(--dur) var(--ease-out);
}

.js [data-reveal="lines"] .line {
	display: block;
	overflow: hidden;
}

.js [data-reveal="lines"] .line__i {
	display: block;
	transform: translateY(105%);
}

.js [data-reveal].is-in,
.js [data-reveal].is-in .line__i {
	opacity: 1;
	transform: none;
}

.js [data-reveal="lines"].is-in .line__i:nth-child(1) { transition-delay: 0.02s; }
.js [data-reveal="lines"] .line:nth-child(2) .line__i { transition-delay: 0.09s; }
.js [data-reveal="lines"] .line:nth-child(3) .line__i { transition-delay: 0.18s; }

/* Images uncover rather than fade: the frame clips, the picture moves. */
.js .frame[data-reveal="image"] > img {
	transform: scale(1.08);
	transition: transform 1.15s var(--ease-out), opacity 0.7s var(--ease);
	opacity: 0;
}

.js .frame[data-reveal="image"].is-in > img {
	transform: scale(1);
	opacity: 1;
}

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

	.js [data-reveal="up"],
	.js [data-reveal="lines"] .line__i,
	.js .frame[data-reveal="image"] > img {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}