/* ==========================================================================
   FutureNet — "Community Scrip"
   The security print of local currencies: intaglio teal, iris split-fountain
   inks, guilloché rosettes, serial numerals, UV-fluorescent fibres.
   ========================================================================== */

@font-face { font-family: "Bodoni Moda"; src: url(../fonts/bodoni-moda-normal.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(../fonts/bodoni-moda-italic.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(../fonts/archivo-normal.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(../fonts/source-serif-normal.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(../fonts/source-serif-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
	--ink: #0d3640;
	--ink-deep: #072229;
	--ink-soft: #154a55;
	--ink-line: rgba(233, 239, 233, .2);
	--paper: #e9efe9;
	--paper-2: #dde7e1;
	--paper-3: #c9d8cf;
	--text: #0f2d33;
	--text-2: #3a5a60;
	--on-ink: #e9efe9;
	--on-ink-2: #b9cdc8;
	--teal: #1a7f86;
	--teal-text: #0f646b;
	--violet: #6c4fa3;
	--amber: #e6a43a;
	--amber-deep: #b97a17;
	--uv: #c9ff4d;
	--rose: #c0587a;
	--ink-a: #1a7f86;
	--ink-b: #e6a43a;

	--f-display: "Bodoni Moda", "Didot", Georgia, serif;
	--f-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--f-text: "Source Serif 4", Georgia, serif;

	--ease-out: cubic-bezier(.23, 1, .32, 1);
	--ease-io: cubic-bezier(.77, 0, .175, 1);
	--gutter: clamp(16px, 4vw, 56px);
	--radius: 14px;
	--max: 1440px;

	color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; }
body {
	margin: 0;
	background-color: var(--ink);
	background-image:
		repeating-linear-gradient(115deg, rgba(233, 239, 233, .028) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(65deg, rgba(233, 239, 233, .022) 0 1px, transparent 1px 9px);
	color: var(--on-ink);
	font-family: var(--f-ui);
	font-size: 1rem;
	line-height: 1.5;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--uv); color: var(--ink-deep); }
:focus-visible { outline: 2px solid var(--uv); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: var(--teal) var(--ink-deep); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-deep); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--teal), var(--violet)); border-radius: 8px; border: 3px solid var(--ink-deep); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--uv); color: var(--ink-deep); padding: 10px 16px; border-radius: 6px; font-weight: 700; transition: top .2s var(--ease-out); }
.skip:focus { top: 12px; }

.microtext {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	font-family: var(--f-ui);
	font-size: 7.5px;
	font-weight: 600;
	font-stretch: 112%;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: rgba(233, 239, 233, .55);
	line-height: 1;
	padding: 6px 18px;
}

/* ---------- buttons ---------- */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	font-family: var(--f-ui);
	font-weight: 700;
	font-stretch: 115%;
	font-size: .8125rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn--amber { background: var(--amber); color: var(--ink-deep); }
.btn--amber::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 45%, var(--uv) 52%, transparent 70%);
	transform: translateX(-110%);
	transition: transform 600ms var(--ease-out);
}
.btn--ghost { background: transparent; color: var(--on-ink); box-shadow: inset 0 0 0 1px rgba(233, 239, 233, .55); }
@media (hover: hover) and (pointer: fine) {
	.btn--amber:hover::before { transform: translateX(110%); }
	.btn--ghost:hover { background: var(--on-ink); color: var(--ink-deep); }
}

/* ---------- masthead ---------- */
.masthead {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(13, 54, 64, .82);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	border-bottom: 1px solid transparent;
	transition: border-color 300ms ease, background-color 300ms ease;
}
.masthead.is-scrolled { border-bottom-color: var(--ink-line); background: rgba(7, 34, 41, .9); }
.masthead__bar {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--gutter);
	height: 72px;
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
}
.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-family: var(--f-display);
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: -.01em;
	margin-right: auto;
	color: var(--on-ink);
}
.wordmark__a { font-weight: 600; }
.wordmark__b { font-style: italic; color: var(--amber); font-weight: 500; }
.wordmark__seal {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, #5fd0d6, var(--paper), var(--amber), #b59bff, #5fd0d6);
	-webkit-mask: url(../img/rosette-seal.svg) center / contain no-repeat;
	mask: url(../img/rosette-seal.svg) center / contain no-repeat;
	transition: transform 900ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.wordmark:hover .wordmark__seal { transform: rotate(120deg); }
}
.masthead__nav ul { display: flex; gap: clamp(14px, 2.2vw, 30px); list-style: none; }
.masthead__nav a {
	position: relative;
	display: block;
	padding: 8px 0;
	text-decoration: none;
	font-size: .75rem;
	font-weight: 600;
	font-stretch: 112%;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--on-ink-2);
	transition: color 200ms ease;
}
.masthead__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--ink-a), var(--ink-b));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.masthead__nav a:hover { color: var(--on-ink); }
	.masthead__nav a:hover::after { transform: scaleX(1); }
}
.masthead__tools { display: flex; align-items: center; gap: 14px; }
.langs { display: flex; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ink-line); padding: 3px; }
.langs a {
	display: grid;
	place-items: center;
	min-width: 36px;
	height: 30px;
	padding: 0 8px;
	border-radius: 999px;
	text-decoration: none;
	font-size: .72rem;
	font-weight: 700;
	font-stretch: 112%;
	letter-spacing: .1em;
	color: var(--on-ink-2);
	transition: background-color 200ms ease, color 200ms ease;
}
.langs a[aria-current] { background: var(--on-ink); color: var(--ink-deep); }
.menu-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 14px 0 18px;
	border: 0;
	border-radius: 999px;
	background: rgba(233, 239, 233, .08);
	box-shadow: inset 0 0 0 1px var(--ink-line);
	cursor: pointer;
	font-size: .72rem;
	font-weight: 700;
	font-stretch: 112%;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.menu-btn:active { transform: scale(.97); }
.menu-btn__icon { display: grid; gap: 5px; width: 18px; }
.menu-btn__icon i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 300ms var(--ease-out); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover { background: rgba(233, 239, 233, .16); } }

/* menu sheet */
.sheet {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--ink-deep);
	border-bottom: 1px solid var(--ink-line);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55);
	clip-path: inset(0 0 0 0);
	transition: clip-path 360ms var(--ease-out);
}
.sheet[hidden] { display: block; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 220ms var(--ease-out), visibility 0s 220ms; }
.sheet__inner { max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 34px; display: grid; gap: 26px; }
.sheet__search label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-2); margin-bottom: 10px; }
.sheet__search .field { display: flex; gap: 8px; max-width: 640px; }
.sheet__search input { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--ink-line); background: rgba(233, 239, 233, .06); }
.sheet__search input::placeholder { color: var(--on-ink-2); opacity: .8; }
.sheet__search button { height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--amber); color: var(--ink-deep); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; cursor: pointer; }
.sheet__hubs { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sheet__hubs a {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	column-gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border-radius: 12px;
	text-decoration: none;
	background: linear-gradient(110deg, rgba(233, 239, 233, .04), transparent);
	box-shadow: inset 0 0 0 1px var(--ink-line);
	transition: background-color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out);
}
.sheet__hubs a:active { transform: scale(.98); }
.sheet__hubs .emblem { width: 40px; height: 40px; color: var(--ink-b); }
.sheet__no { font-size: .66rem; font-weight: 700; letter-spacing: .2em; color: var(--on-ink-2); font-variant-numeric: tabular-nums; }
.sheet__name { font-family: var(--f-display); font-size: 1.2rem; line-height: 1.15; }
@media (hover: hover) and (pointer: fine) {
	.sheet__hubs a:hover { background-color: rgba(233, 239, 233, .06); box-shadow: inset 0 0 0 1px var(--ink-b); }
}
.sheet__more { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: .9rem; }
.sheet__more a { color: var(--on-ink-2); text-underline-offset: 4px; }
.sheet:not([hidden]) .sheet__hubs li { animation: lift 420ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 35ms); }
@keyframes lift { from { opacity: 0; transform: translateY(10px); } }

/* ---------- shared section scaffolding ---------- */
.front > section, .hub > section, .page > section, .explainer > section {
	max-width: var(--max);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); align-items: end; gap: 12px 40px; margin-bottom: clamp(22px, 3vw, 36px); }
.section-head h2 { font-family: var(--f-display); font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.02; letter-spacing: -.015em; }
.section-head p { color: var(--on-ink-2); font-size: .95rem; }

/* ---------- note (the shared component) ---------- */
.note {
	--mx: 70%;
	--my: 30%;
	--lamp: 0;
	position: relative;
	border-radius: var(--radius);
	isolation: isolate;
	list-style: none;
}
.note__face {
	position: relative;
	display: grid;
	height: 100%;
	padding: 20px 22px;
	border-radius: inherit;
	text-decoration: none;
	color: var(--on-ink);
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--ink-b) 46%, transparent), transparent 60%),
		linear-gradient(118deg, #0f3d47 0%, color-mix(in oklab, var(--ink-a) 58%, #0d3640) 55%, color-mix(in oklab, var(--ink-b) 52%, #0d3640) 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 18px 40px -24px rgba(0, 0, 0, .7);
	transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.note__face::before {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: calc(var(--radius) - 5px);
	border: 1px solid rgba(233, 239, 233, .38);
	box-shadow: inset 0 0 0 3px rgba(13, 54, 64, .0), inset 0 0 0 4px rgba(233, 239, 233, .14);
	pointer-events: none;
}
/* iris foil that follows the pointer */
.note__face::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: calc(var(--lamp) * .9);
	background:
		radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 255, 255, .22), transparent 60%),
		conic-gradient(from calc(var(--hue, 0) * 1deg) at var(--mx) var(--my), rgba(201, 255, 77, .25), rgba(108, 79, 163, .3), rgba(230, 164, 58, .28), rgba(26, 127, 134, .25), rgba(201, 255, 77, .25));
	mix-blend-mode: soft-light;
	transition: opacity 260ms ease;
}
.note__ros {
	position: absolute;
	right: -18%;
	top: -30%;
	width: 78%;
	aspect-ratio: 1;
	z-index: 0;
	pointer-events: none;
	background: conic-gradient(from 200deg, var(--ink-a), #e9efe9, var(--ink-b), var(--violet), var(--ink-a));
	-webkit-mask: url(../img/rosette-note.svg) center / contain no-repeat;
	mask: url(../img/rosette-note.svg) center / contain no-repeat;
	opacity: .5;
	transition: transform 1200ms var(--ease-out), opacity 300ms ease;
}
/* UV lamp: fluorescent fibres visible only inside the pointer's cone */
.note__fibres {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: url(../img/uv-fibres.svg) 0 0 / 240px 240px repeat;
	opacity: calc(var(--lamp) * 1);
	-webkit-mask: radial-gradient(150px circle at var(--mx) var(--my), #000 0, rgba(0, 0, 0, .55) 45%, transparent 75%);
	mask: radial-gradient(150px circle at var(--mx) var(--my), #000 0, rgba(0, 0, 0, .55) 45%, transparent 75%);
	filter: drop-shadow(0 0 2px rgba(201, 255, 77, .8));
	transition: opacity 260ms ease;
}
.note__face > :not(.note__ros):not(.note__fibres) { position: relative; z-index: 3; }
.note__serial {
	font-family: var(--f-ui);
	font-stretch: 62%;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .1em;
	color: var(--amber);
	font-variant-numeric: tabular-nums;
}
.note__title { font-family: var(--f-display); font-size: clamp(1.45rem, 2vw, 1.85rem); line-height: 1.08; letter-spacing: -.01em; transition: font-variation-settings 420ms var(--ease-out); }
.note__blurb { font-size: .9rem; line-height: 1.45; color: var(--on-ink-2); }
@media (hover: hover) and (pointer: fine) {
	.note:hover { --lamp: 1; }
	.note:hover .note__face { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 30px 50px -24px rgba(0, 0, 0, .8); }
	.note:hover .note__ros { transform: rotate(40deg) scale(1.06); opacity: .75; }
}
.note__face:active { transform: scale(.985); }
.note:focus-within { --lamp: .8; }

/* ---------- hero: the big community note ---------- */
.hero { position: relative; z-index: 5; padding-top: clamp(10px, 1.6vw, 20px); }
.hero__note {
	--mx: 30%;
	--my: 40%;
	--lamp: 0;
	position: relative;
	border-radius: 24px;
	padding: 4px 10px;
	background: linear-gradient(100deg, #0f4651 0%, #17616a 30%, #3c477c 62%, #6c4fa3 80%, #b4824c 100%);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .12);
	isolation: isolate;
	background-size: 170% 100%;
	background-position: calc(var(--px, .3) * 100%) 50%;
}
.hero__frame {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	min-height: clamp(440px, 56vh, 520px);
	border-radius: 16px;
	border: 1px solid rgba(233, 239, 233, .5);
	outline: 1px solid rgba(233, 239, 233, .16);
	outline-offset: -9px;
	background:
		radial-gradient(70% 90% at 72% 50%, rgba(7, 34, 41, .72), rgba(7, 34, 41, .2) 70%),
		repeating-radial-gradient(circle at 23% 50%, rgba(233, 239, 233, .06) 0 1px, transparent 1px 7px);
}
.hero__fibres {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: 16px;
	background: url(../img/uv-fibres.svg) 0 0 / 200px 200px repeat;
	opacity: var(--lamp);
	-webkit-mask: radial-gradient(240px circle at var(--mx) var(--my), #000 30%, transparent 75%);
	mask: radial-gradient(240px circle at var(--mx) var(--my), #000 30%, transparent 75%);
	filter: drop-shadow(0 0 3px rgba(201, 255, 77, 1)) drop-shadow(0 0 8px rgba(201, 255, 77, .6));
	transition: opacity 300ms ease;
}
.hero__frame::after {
	content: attr(data-uv);
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: 16px;
	background: radial-gradient(280px circle at var(--mx) var(--my), rgba(150, 120, 255, .26), rgba(201, 255, 77, .08) 50%, transparent 72%);
	mix-blend-mode: screen;
	opacity: var(--lamp);
	transition: opacity 300ms ease;
}
.hero__secret {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	border-radius: 16px;
	pointer-events: none;
	display: grid;
	align-content: start;
	gap: 5px;
	padding-top: 6px;
	font-size: 8px;
	font-weight: 700;
	font-stretch: 112%;
	letter-spacing: .3em;
	white-space: nowrap;
	color: var(--uv);
	text-shadow: 0 0 6px rgba(201, 255, 77, .8);
	opacity: var(--lamp);
	-webkit-mask: radial-gradient(200px circle at var(--mx) var(--my), #000 25%, transparent 70%);
	mask: radial-gradient(200px circle at var(--mx) var(--my), #000 25%, transparent 70%);
	transition: opacity 300ms ease;
}
.hero__secret span:nth-child(even) { margin-left: -60px; }
.hero__ros { position: relative; z-index: 0; justify-self: center; width: min(100%, 470px); padding: 24px; }
.hero__ros .rosette { width: 100%; height: auto; filter: drop-shadow(0 0 18px rgba(26, 127, 134, .35)); }
.hero__ros .rosette--seal { position: absolute; left: 50%; top: 50%; width: 40%; transform: translate(-50%, -50%); filter: none; opacity: .9; }
@supports (animation-timeline: scroll()) {
	.hero__ros .rosette--seal > g { transform-origin: 200px 200px; animation: turn-back linear both; animation-timeline: scroll(root); animation-range: 0 120vh; }
	@keyframes turn-back { to { transform: rotate(-70deg); } }
}
.hero__copy { position: relative; z-index: 2; padding: clamp(28px, 3.4vw, 44px) clamp(24px, 5vw, 72px) clamp(28px, 3.4vw, 44px) 0; }
.hero__copy h1 {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: clamp(2.6rem, 5.8vw, 5.3rem);
	line-height: .96;
	letter-spacing: -.02em;
	max-width: 11ch;
}
.hero__copy h1 em { font-style: italic; color: #f4d49c; }
.hero__lede { margin-top: 22px; max-width: 36rem; font-family: var(--f-text); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; color: #d4e2de; }
.hero__legend, .hero__serial, .hero__denom { position: absolute; z-index: 2; pointer-events: none; }
.hero__legend { left: 26px; top: 22px; font-size: .66rem; font-weight: 700; font-stretch: 118%; letter-spacing: .26em; text-transform: uppercase; color: var(--on-ink-2); }
.hero__serial { font-stretch: 62%; font-weight: 700; font-size: 1.5rem; letter-spacing: .08em; color: var(--amber); font-variant-numeric: tabular-nums; }
.hero__serial--a { right: 30px; top: 18px; }
.hero__serial--b { left: 26px; bottom: 18px; color: rgba(230, 164, 58, .8); font-size: 1.1rem; }
.hero__denom { right: 30px; bottom: 6px; font-family: var(--f-display); font-size: clamp(5rem, 10vw, 9.5rem); line-height: 1; color: rgba(233, 239, 233, .9); text-align: right; }
.hero__denom small { display: block; margin-top: -8px; font-family: var(--f-ui); font-size: .62rem; font-weight: 700; font-stretch: 125%; letter-spacing: .32em; text-transform: uppercase; }
.hero__chips { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: .85rem; color: var(--on-ink-2); }
.hero__chips span { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hero__chips a { color: var(--on-ink); text-decoration: underline; text-decoration-color: rgba(233, 239, 233, .4); text-underline-offset: 5px; transition: text-decoration-color 200ms ease, color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
	.hero__note:hover { --lamp: 1; }
	.hero__chips a:hover { color: var(--uv); text-decoration-color: var(--uv); }
}

/* rosette draw-in on load, slow turn with scroll */
.js .rosette .ros-l { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.2s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 45ms + 150ms); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@supports (animation-timeline: scroll()) {
	.hero__ros .rosette > g { transform-origin: 200px 200px; animation: turn linear both; animation-timeline: scroll(root); animation-range: 0 120vh; }
	@keyframes turn { to { transform: rotate(50deg); } }
}

/* ---------- search with suggestions ---------- */
.ask { position: relative; margin-top: 30px; max-width: 40rem; }
.ask__field {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 20px;
	border-radius: 999px;
	background: rgba(7, 34, 41, .62);
	box-shadow: inset 0 0 0 1px rgba(233, 239, 233, .55);
	transition: box-shadow 200ms ease, background-color 200ms ease;
}
.ask__field:focus-within { box-shadow: inset 0 0 0 2px var(--uv), 0 0 0 6px rgba(201, 255, 77, .12); background: rgba(7, 34, 41, .8); }
.ask__icon { width: 20px; height: 20px; flex: none; color: var(--on-ink-2); }
.ask input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; font-size: 1.05rem; outline: none; }
.ask input::placeholder { color: #a9c0bb; }
.ask input::-webkit-search-cancel-button { display: none; }
.ask__go-icon { display: none; width: 20px; height: 20px; }
.ask__list {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	z-index: 30;
	list-style: none;
	padding: 8px;
	border-radius: 18px;
	background: var(--ink-deep);
	box-shadow: inset 0 0 0 1px var(--ink-line), 0 24px 50px -20px rgba(0, 0, 0, .8);
	transform-origin: top left;
	transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
	@starting-style { opacity: 0; transform: scale(.97) translateY(-4px); }
}
.ask__list[hidden] { display: none; }
.ask__list a, .ask__list .ask__empty { display: block; padding: 11px 14px; border-radius: 12px; text-decoration: none; font-size: .98rem; }
.ask__list a small { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-2); margin-top: 2px; }
.ask__list a[aria-selected="true"], .ask__list a:hover { background: rgba(233, 239, 233, .08); }
.ask__empty { color: var(--on-ink-2); }

/* ---------- uncut sheet of topic notes ---------- */
.uncut { padding-top: clamp(28px, 3vw, 40px); }
.front .uncut .section-head { margin-bottom: 16px; align-items: center; }
.front .uncut .section-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.front .uncut__sheet { padding-top: 24px; }
.uncut__sheet {
	position: relative;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 34px 30px;
	padding: 30px;
	border-radius: 6px;
	background:
		linear-gradient(90deg, transparent calc(100% - 1px), rgba(233, 239, 233, .14) 0) 0 0 / calc((100% - 60px + 30px) / 4) 100% no-repeat,
		rgba(233, 239, 233, .025);
	border: 1px dashed rgba(233, 239, 233, .26);
}
.note--hub { min-height: 252px; }
.note--hub .note__face { grid-template-rows: auto 1fr auto; grid-template-columns: 1fr auto; gap: 10px; }
.note--hub .note__title, .note--hub .note__blurb { grid-column: 1 / -1; }
.note--hub .note__title { padding-right: 26px; }
.note__corner { position: absolute !important; right: 16px; top: 18px; writing-mode: vertical-rl; font-stretch: 62%; font-weight: 700; font-size: .9rem; letter-spacing: .1em; color: var(--amber); font-variant-numeric: tabular-nums; }
/* crop marks at each note's corners */
.note--hub::before {
	content: "";
	position: absolute;
	inset: -16px;
	pointer-events: none;
	background:
		linear-gradient(rgba(233, 239, 233, .45), rgba(233, 239, 233, .45)) 0 15px / 10px 1px no-repeat,
		linear-gradient(rgba(233, 239, 233, .45), rgba(233, 239, 233, .45)) 15px 0 / 1px 10px no-repeat,
		linear-gradient(rgba(233, 239, 233, .45), rgba(233, 239, 233, .45)) 100% 15px / 10px 1px no-repeat,
		linear-gradient(rgba(233, 239, 233, .45), rgba(233, 239, 233, .45)) calc(100% - 15px) 0 / 1px 10px no-repeat,
		linear-gradient(rgba(233, 239, 233, .45), rgba(233, 239, 233, .45)) 0 calc(100% - 15px) / 10px 1px no-repeat,
		linear-gradient(rgba(233, 239, 233, .45), rgba(233, 239, 233, .45)) 15px 100% / 1px 10px no-repeat,
		linear-gradient(rgba(233, 239, 233, .45), rgba(233, 239, 233, .45)) 100% calc(100% - 15px) / 10px 1px no-repeat,
		linear-gradient(rgba(233, 239, 233, .45), rgba(233, 239, 233, .45)) calc(100% - 15px) 100% / 1px 10px no-repeat;
}
.note--hub .note__emblem { grid-row: 3; grid-column: 1; align-self: end; display: block; width: 44px; height: 44px; color: var(--on-ink); opacity: .92; transform-origin: 30% 50%; transition: transform 600ms var(--ease-out); }
.note--hub .note__emblem .emblem { width: 100%; height: 100%; }
.note--hub .note__title { margin-top: 2px; max-width: 13ch; }
.note--hub .note__denom { grid-row: 3; grid-column: 2; align-self: end; display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.note__denom b { font-family: var(--f-display); font-weight: 500; font-size: 2.6rem; line-height: .9; }
.note__denom small { font-size: .62rem; font-weight: 700; font-stretch: 118%; letter-spacing: .22em; text-transform: uppercase; color: var(--on-ink-2); }
@media (hover: hover) and (pointer: fine) {
	.note--hub:hover .note__title { font-variation-settings: "opsz" 96; }
	.note--hub:hover .note__emblem { transform: rotate(-8deg) scale(1.08); }
}
.uncut__sheet--small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; padding: 22px; }
.uncut__sheet--small .note--hub { min-height: 190px; }
.uncut__sheet--small .note__blurb { display: none; }

/* ---------- register (ledger of explainers) ---------- */
.register { padding-top: clamp(64px, 9vw, 120px); }
.ledger { list-style: none; border-top: 1px solid var(--ink-line); counter-reset: row; }
.ledger__row { border-bottom: 1px solid var(--ink-line); }
.ledger__link {
	position: relative;
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr) 13rem 9rem;
	grid-template-areas: "serial title hub date" ". preview preview .";
	align-items: baseline;
	column-gap: 24px;
	padding: 20px 12px;
	text-decoration: none;
	transition: background-color 260ms ease;
}
.ledger__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 12px;
	background: linear-gradient(90deg, var(--ink-a), var(--violet), var(--ink-b));
	-webkit-mask: url(../img/guilloche-rule.svg) 0 0 / 96px 12px repeat-x;
	mask: url(../img/guilloche-rule.svg) 0 0 / 96px 12px repeat-x;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 520ms var(--ease-out);
	pointer-events: none;
}
.ledger__serial { grid-area: serial; font-stretch: 62%; font-weight: 700; font-size: .95rem; letter-spacing: .08em; color: var(--amber); font-variant-numeric: tabular-nums; }
.ledger__title { grid-area: title; font-family: var(--f-display); font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.15; letter-spacing: -.005em; }
.ledger__hub { grid-area: hub; display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 600; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-2); }
.emblem--sm { width: 22px; height: 22px; flex: none; color: var(--ink-b); }
.ledger__date { grid-area: date; justify-self: end; font-size: .78rem; color: var(--on-ink-2); font-variant-numeric: tabular-nums; }
.ledger__preview {
	grid-area: preview;
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	font-family: var(--f-text);
	font-size: 1rem;
	line-height: 1.55;
	color: #cfe0db;
	max-width: 62ch;
	transition: grid-template-rows 360ms var(--ease-out), opacity 300ms ease, margin 360ms var(--ease-out);
}
.ledger__preview-in { display: block; min-height: 0; overflow: hidden; }
.ledger__preview-label { display: block; font-family: var(--f-ui); font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--uv); margin-bottom: 4px; }
@media (hover: hover) and (pointer: fine) {
	.ledger__link:hover { background: rgba(233, 239, 233, .04); }
	.ledger__link:hover::after { transform: scaleX(1); }
	.ledger__link:hover .ledger__preview { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }
}
.ledger__link:focus-visible::after { transform: scaleX(1); }
.ledger__link:focus-visible .ledger__preview { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }

.empty-note {
	padding: 34px;
	border-radius: var(--radius);
	border: 1px dashed rgba(233, 239, 233, .35);
	text-align: center;
	color: var(--on-ink-2);
	font-family: var(--f-text);
	font-size: 1.1rem;
	display: grid;
	gap: 10px;
	justify-items: center;
}
.empty-note a { color: var(--amber); }

/* ---------- anatomy of a note ---------- */
.anatomy { padding-top: clamp(64px, 9vw, 120px); }
.anatomy__plate { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.anatomy__note {
	position: relative;
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	grid-template-areas: "title stamp" "short short" "where critics" "sources serial";
	gap: 14px 26px;
	border-radius: 18px;
	padding: 30px 32px 26px;
	background:
		repeating-radial-gradient(circle at 86% 22%, rgba(233, 239, 233, .07) 0 1px, transparent 1px 6px),
		linear-gradient(110deg, #10414b, #1a6c73 50%, #6c4fa3 85%, #b4824c);
	box-shadow: inset 0 0 0 1px rgba(233, 239, 233, .4), 0 30px 60px -30px rgba(0, 0, 0, .7);
	color: var(--on-ink);
}
.anatomy__note::before { content: ""; position: absolute; inset: 8px; border-radius: 12px; border: 1px solid rgba(233, 239, 233, .25); pointer-events: none; }
.anatomy__note > * { position: relative; }
.a-title { grid-area: title; font-family: var(--f-display); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1; }
.a-short { grid-area: short; font-family: var(--f-text); font-size: 1.02rem; line-height: 1.5; color: #e2ece8; max-width: 44ch; }
.a-where { grid-area: where; list-style: none; display: grid; gap: 8px; font-size: .8rem; }
.a-where li { position: relative; display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; background: rgba(7, 34, 41, .45); box-shadow: inset 0 0 0 1px rgba(233, 239, 233, .18); }
.a-where b { font-weight: 700; font-stretch: 108%; letter-spacing: .04em; }
.a-where span { color: var(--on-ink-2); }
.a-critics { grid-area: critics; align-self: start; font-family: var(--f-text); font-style: italic; font-size: .95rem; color: #f4d49c; }
.a-sources { grid-area: sources; display: grid; gap: 6px; align-content: end; }
.a-sources span { display: block; height: 1px; background: rgba(233, 239, 233, .55); width: 92%; }
.a-sources span:nth-child(3) { width: 76%; } .a-sources span:nth-child(4) { width: 84%; }
.a-stamp { grid-area: stamp; justify-self: end; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; border: 2px double rgba(230, 164, 58, .9); color: var(--amber); text-align: center; transform: rotate(-10deg); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; padding: 14px 0; }
.a-stamp b { font-stretch: 62%; font-size: 1.2rem; letter-spacing: .06em; }
.a-serial { grid-area: serial; justify-self: end; align-self: end; font-stretch: 62%; font-weight: 700; color: var(--amber); letter-spacing: .08em; }
.anatomy__note .pin {
	position: absolute;
	left: -44px;
	top: 0;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink-deep);
	font-style: normal;
	font-weight: 800;
	font-size: .75rem;
	box-shadow: 0 0 0 4px rgba(230, 164, 58, .25);
}
.a-where .pin, .a-critics .pin, .a-sources .pin { left: -14px; top: -14px; }
.a-short .pin { left: -46px; top: 2px; }
.anatomy__keys { list-style: none; display: grid; gap: 22px; counter-reset: key; }
.anatomy__keys li { counter-increment: key; display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; }
.anatomy__keys li::before {
	content: counter(key);
	grid-row: 1 / 3;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--amber);
	color: var(--amber);
	font-weight: 700;
	font-size: .85rem;
}
.anatomy__keys b { font-family: var(--f-display); font-weight: 500; font-size: 1.35rem; }
.anatomy__keys span { color: var(--on-ink-2); }

/* ---------- classroom band ---------- */
.classroom { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); }
.classroom__inner {
	--mx: 20%;
	--my: 50%;
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	align-items: center;
	gap: clamp(20px, 4vw, 56px);
	padding: clamp(28px, 4vw, 52px);
	border-radius: 22px;
	background: var(--paper);
	color: var(--text);
	box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7);
	background-image: url(../img/guilloche-band.svg);
	background-repeat: repeat-x;
	background-position: 0 100%;
	background-size: 240px 28px;
}
.classroom__inner { position: relative; padding-top: clamp(40px, 5vw, 60px); }
.classroom__inner > .microtext { position: absolute; left: 0; right: 0; top: 10px; color: rgba(15, 45, 51, .45); }
.classroom__serial { position: absolute; right: 24px; bottom: 34px; font-stretch: 62%; font-weight: 700; font-size: 1rem; letter-spacing: .1em; color: var(--teal-text); }
.classroom__inner .rosette { width: 180px; }
.classroom__inner .rosette g { stroke: var(--violet); }
.classroom h2 { font-family: var(--f-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; }
.classroom p { margin: 12px 0 22px; max-width: 46ch; font-family: var(--f-text); font-size: 1.1rem; color: var(--text-2); }
.classroom .btn--ghost { color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
@media (hover: hover) and (pointer: fine) { .classroom .btn--ghost:hover { background: var(--text); color: var(--paper); } }

/* ---------- band: page header on ink ---------- */
.band { position: relative; padding: clamp(28px, 4vw, 48px) 0 clamp(44px, 6vw, 76px); }
.band::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 28px;
	background: linear-gradient(90deg, var(--ink-a), var(--violet), var(--ink-b));
	-webkit-mask: url(../img/guilloche-band.svg) 0 0 / 240px 28px repeat-x;
	mask: url(../img/guilloche-band.svg) 0 0 / 240px 28px repeat-x;
	opacity: .7;
}
.band__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.band h1 { font-family: var(--f-display); font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: 1; letter-spacing: -.02em; margin-top: 18px; max-width: 18ch; }
.band__intro { margin-top: 20px; max-width: 62ch; font-family: var(--f-text); font-size: 1.15rem; line-height: 1.6; color: #d0e0db; display: grid; gap: 12px; }
.band__intro a { color: var(--amber); }
.band__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 10px; }
.band__seal { position: relative; width: 220px; aspect-ratio: 1; }
.band__seal .rosette { width: 100%; }
.band__seal .emblem--seal { position: absolute; inset: 31%; width: 38%; height: 38%; color: var(--on-ink); }
.band__series { margin-top: 12px; font-stretch: 62%; font-weight: 700; font-size: 1.05rem; letter-spacing: .1em; color: var(--amber); font-variant-numeric: tabular-nums; }
.band__copy h1 { margin-top: 0; }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .74rem; font-weight: 600; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-2); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; opacity: .5; margin-right: 2px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--on-ink); }
.emblem--crumb { width: 18px; height: 18px; color: var(--ink-b); }

/* hub lead notes */
.hub__lead { padding-top: clamp(40px, 5vw, 64px); }
.lead-notes { list-style: none; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 26px; }
.note--story { min-height: 320px; }
.note--story .note__face { grid-template-rows: auto auto 1fr auto; gap: 12px; }
.note__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.note__vignette { display: block; margin: 4px -6px 6px; border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 2; box-shadow: inset 0 0 0 1px rgba(233, 239, 233, .3); }
.note__vignette img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); transition: transform 900ms var(--ease-out), filter 400ms ease; }
.note--first .note__title { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.note__more { justify-self: start; font-size: .7rem; font-weight: 700; font-stretch: 115%; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
@media (hover: hover) and (pointer: fine) { .note--story:hover .note__vignette img { transform: scale(1.04); filter: saturate(1) contrast(1.05); } }

/* ---------- explainer ---------- */
.ex-head { position: relative; padding: clamp(28px, 4vw, 48px) 0 clamp(36px, 5vw, 64px); }
.ex-head::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 4px;
	height: 12px;
	background: linear-gradient(90deg, var(--ink-a), var(--violet), var(--ink-b));
	-webkit-mask: url(../img/guilloche-rule.svg) 0 0 / 96px 12px repeat-x;
	mask: url(../img/guilloche-rule.svg) 0 0 / 96px 12px repeat-x;
	opacity: .85;
}
.ex-head__inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.ex-head h1 { margin-top: 22px; font-family: var(--f-display); font-size: clamp(2.3rem, 5.2vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; max-width: 20ch; }
.ex-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 20px; font-size: .82rem; color: var(--on-ink-2); }
.ex-meta a { color: var(--on-ink); text-underline-offset: 4px; }
.ex-meta__serial { font-stretch: 62%; font-weight: 700; letter-spacing: .08em; color: var(--amber); font-size: .95rem; }
.ex-head__answer { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 54rem) 150px; gap: 28px; align-items: center; }
.short { max-width: 54rem; }
.seal { position: relative; width: 150px; aspect-ratio: 1; justify-self: center; transform: rotate(-8deg); }
.seal .rosette { width: 100%; }
.seal__text { position: absolute; inset: 22%; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 50%; background: radial-gradient(circle, rgba(7, 34, 41, .92) 60%, rgba(7, 34, 41, 0) 72%); text-align: center; }
.seal__text small { font-size: .55rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--on-ink-2); }
.seal__text b { font-stretch: 62%; font-size: 1.2rem; letter-spacing: .06em; color: var(--amber); }
.short.note { --mx: 85%; --my: 20%; padding: 26px 30px 28px; border-radius: 18px; overflow: hidden; background: linear-gradient(115deg, #0f3d47, color-mix(in oklab, var(--ink-a) 55%, #0d3640) 60%, color-mix(in oklab, var(--ink-b) 50%, #0d3640)); box-shadow: inset 0 0 0 1px rgba(233, 239, 233, .35), 0 24px 50px -30px rgba(0, 0, 0, .7); }
.short .note__ros { right: -12%; top: -55%; width: 48%; opacity: .35; }
.short::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--lamp) * .8); background: radial-gradient(240px circle at var(--mx) var(--my), rgba(255, 255, 255, .16), transparent 65%); transition: opacity 260ms ease; }
.short > p { position: relative; z-index: 3; }
.short__label { font-size: .66rem; font-weight: 700; font-stretch: 118%; letter-spacing: .24em; text-transform: uppercase; color: var(--amber); }
.short__text { margin-top: 10px; font-family: var(--f-text); font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.5; color: #f0f5f2; }
@media (hover: hover) and (pointer: fine) { .short.note:hover { --lamp: 1; } }

.ex-plate { max-width: 1120px; margin: 0 auto -1px; padding: 0 var(--gutter); position: relative; z-index: 2; }
.ex-plate img { width: 100%; border-radius: 16px 16px 0 0; box-shadow: 0 -1px 0 rgba(233, 239, 233, .3); aspect-ratio: 16 / 9; object-fit: cover; }
.ex-plate figcaption { background: var(--paper); color: var(--text-2); font-size: .8rem; padding: 10px 4px 0; }

.ex-body, .page__body {
	position: relative;
	background: var(--paper);
	color: var(--text);
	color-scheme: light;
	background-image: url(../img/uv-fibres.svg);
	background-size: 520px 520px;
	background-blend-mode: luminosity;
}
.ex-body::before, .page__body::before { content: ""; position: absolute; inset: 0; background: rgba(233, 239, 233, .93); pointer-events: none; }
.ex-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46rem) minmax(0, 1fr); padding: clamp(36px, 5vw, 64px) var(--gutter) clamp(56px, 7vw, 96px); column-gap: 48px; }
.ex-body > * { position: relative; }
.toc { grid-column: 1; justify-self: end; width: 100%; max-width: 15rem; align-self: start; position: sticky; top: 100px; }
.toc__title { font-size: .66rem; font-weight: 700; font-stretch: 118%; letter-spacing: .22em; text-transform: uppercase; color: var(--teal-text); margin-bottom: 12px; }
.toc ol { list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--paper-3); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; font-size: .86rem; line-height: 1.35; color: var(--text-2); transition: color 200ms ease, border-color 200ms ease; }
.toc a:hover { color: var(--text); }
.toc a.is-active { color: var(--text); border-left-color: var(--teal); font-weight: 600; }
.prose--explainer { grid-column: 2; }
.page__body { padding: clamp(36px, 5vw, 64px) var(--gutter) clamp(56px, 7vw, 96px); }
.page__body .prose { max-width: 46rem; margin: 0 auto; position: relative; }

/* ---------- prose ---------- */
.prose { font-family: var(--f-text); font-size: 1.125rem; line-height: 1.7; color: var(--text); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
	margin-top: 2.2em;
	padding-bottom: 14px;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: clamp(1.7rem, 2.6vw, 2.15rem);
	line-height: 1.12;
	letter-spacing: -.01em;
	background: linear-gradient(90deg, var(--ink-a), var(--violet) 60%, var(--ink-b)) 0 100% / 100% 12px no-repeat;
	-webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 12px) no-repeat, url(../img/guilloche-rule.svg) 0 100% / 96px 12px repeat-x;
	mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 12px) no-repeat, url(../img/guilloche-rule.svg) 0 100% / 96px 12px repeat-x;
}
.prose h3 { margin-top: 1.8em; font-family: var(--f-ui); font-weight: 700; font-stretch: 108%; font-size: 1.2rem; line-height: 1.3; }
.prose h2 + *, .prose h3 + * { margin-top: .7em; }
.prose a { color: var(--teal-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in oklab, var(--teal) 50%, transparent); transition: text-decoration-color 200ms ease, color 200ms ease; }
.prose a:hover { text-decoration-color: currentColor; color: var(--violet); }
.prose strong { font-weight: 650; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .45em; }
.prose ul li::marker { color: var(--teal); }
.prose ol li::marker { color: var(--teal-text); font-family: var(--f-ui); font-weight: 700; font-size: .9em; font-variant-numeric: tabular-nums; }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 26px; border-left: 1px solid var(--teal); font-style: italic; font-size: 1.2rem; color: var(--text-2); }
.prose figure { margin: 2em 0; }
.prose img { border-radius: 12px; box-shadow: 0 0 0 1px var(--paper-3); }
.prose figcaption { margin-top: 10px; font-family: var(--f-ui); font-size: .82rem; color: var(--text-2); }
.prose table { width: 100%; border-collapse: collapse; font-family: var(--f-ui); font-size: .92rem; font-variant-numeric: tabular-nums; display: block; overflow-x: auto; }
.prose th { text-align: left; font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-text); border-bottom: 2px solid var(--text); padding: 10px 14px 10px 0; }
.prose td { border-bottom: 1px solid var(--paper-3); padding: 10px 14px 10px 0; vertical-align: top; }
.prose hr { border: 0; height: 12px; background: linear-gradient(90deg, var(--teal), var(--violet)); -webkit-mask: url(../img/guilloche-rule.svg) 0 0 / 96px 12px repeat-x; mask: url(../img/guilloche-rule.svg) 0 0 / 96px 12px repeat-x; }
.prose ::selection { background: var(--uv); color: var(--ink-deep); }

.faq { margin-top: 3em; }
.faq__item { border-bottom: 1px solid var(--paper-3); }
.faq__item summary { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 600; font-size: 1.22rem; line-height: 1.3; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; width: 16px; height: 16px; align-self: center; background: linear-gradient(var(--teal), var(--teal)) center / 100% 1.6px no-repeat, linear-gradient(var(--teal), var(--teal)) center / 1.6px 100% no-repeat; transition: transform 300ms var(--ease-out); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__a { padding-bottom: 20px; color: var(--text-2); }
.faq__a p + p { margin-top: .8em; }

.sources { margin-top: 3em; }
.sources ol { list-style: none; counter-reset: src; display: grid; gap: 10px; padding: 0; font-family: var(--f-ui); font-size: .9rem; line-height: 1.45; }
.sources li { counter-increment: src; display: grid; grid-template-columns: 2.6rem 1fr; }
.sources li::before { content: counter(src, decimal-leading-zero); font-stretch: 62%; font-weight: 700; color: #82540c; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.sources a { overflow-wrap: anywhere; }

.byline-box { display: grid; grid-template-columns: 76px 1fr; gap: 20px; align-items: center; margin-top: 3em; padding: 22px; border-radius: 16px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--paper-3); font-family: var(--f-ui); font-size: .92rem; color: var(--text-2); }
.byline-box .rosette { width: 76px; }
.byline-box__name { font-family: var(--f-display); font-size: 1.2rem; color: var(--text); margin-bottom: 4px; }

.register--related { padding-bottom: clamp(48px, 6vw, 80px); }

/* ---------- 404 ---------- */
.void { padding-top: clamp(40px, 6vw, 80px); }
.void__note { position: relative; max-width: 54rem; margin: 0 auto; padding: clamp(28px, 5vw, 60px); border-radius: 22px; background: linear-gradient(115deg, #10414b, #3c477c 70%, #6b4b53); box-shadow: inset 0 0 0 1px rgba(233, 239, 233, .4); overflow: hidden; }
.void__note h1 { font-family: var(--f-display); font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.02; max-width: 14ch; }
.void__note p { margin-top: 16px; font-family: var(--f-text); font-size: 1.15rem; color: #d0e0db; max-width: 40rem; }
.void__stamp { position: absolute; right: 6%; top: 14%; padding: 6px 18px; border: 4px double var(--rose); border-radius: 8px; color: var(--rose); font-weight: 800; font-stretch: 125%; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: .2em; transform: rotate(-12deg); opacity: .85; mix-blend-mode: screen; }

.pager { margin-top: 30px; }
.pager .nav-links { display: flex; gap: 10px; flex-wrap: wrap; }
.pager .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ink-line); text-decoration: none; font-variant-numeric: tabular-nums; }
.pager .current { background: var(--on-ink); color: var(--ink-deep); }

/* ---------- colophon ---------- */
.colophon { position: relative; margin-top: clamp(40px, 6vw, 80px); background: var(--ink-deep); }
.page .colophon, .explainer + .colophon { margin-top: 0; }
.colophon__band { height: 28px; background: linear-gradient(90deg, var(--teal), var(--violet), var(--amber), var(--teal)); -webkit-mask: url(../img/guilloche-band.svg) 0 0 / 240px 28px repeat-x; mask: url(../img/guilloche-band.svg) 0 0 / 240px 28px repeat-x; }
.colophon__inner { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gutter) 30px; display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.wordmark--lg { font-size: clamp(2.6rem, 5vw, 4rem); }
.colophon__brand p { margin-top: 14px; font-family: var(--f-text); color: var(--on-ink-2); max-width: 30ch; font-size: 1.05rem; }
.colophon__col h2 { font-size: .68rem; font-weight: 700; font-stretch: 118%; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.colophon__col ul { list-style: none; display: grid; gap: 8px; }
.colophon__col a { text-decoration: none; color: var(--on-ink-2); font-size: .92rem; transition: color 200ms ease; }
.colophon__col a:hover { color: var(--on-ink); }
.colophon__legend { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 26px; display: flex; justify-content: space-between; gap: 20px; align-items: center; border-top: 1px solid var(--ink-line); padding-top: 18px; font-size: .78rem; color: var(--on-ink-2); }
.colophon__legend .microtext { padding: 0; flex: 1; min-width: 0; max-width: 100%; }

/* ---------- motion: scroll-driven press-in ---------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.uncut__sheet > .note, .lead-notes > .note, .ledger__row, .anatomy__note, .classroom__inner {
			animation: press-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
		@keyframes press-in {
			from { opacity: 0; transform: translateY(28px); clip-path: inset(0 0 22% 0 round 14px); }
			to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 14px); }
		}
	}
}

/* cross-document view transitions: a note's title travels into the explainer header */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease-out); }
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--ease-io); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
	.masthead__nav { display: none; }
	.uncut__sheet, .uncut__sheet--small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sheet__hubs { grid-template-columns: repeat(2, 1fr); }
	.ledger__link { grid-template-columns: 8rem minmax(0, 1fr) 9rem; grid-template-areas: "serial title date" ". hub hub" ". preview preview"; }
	.ledger__hub { margin-top: 6px; }
	.ex-body { grid-template-columns: minmax(0, 1fr); }
	.toc { position: relative; top: auto; grid-column: 1; justify-self: stretch; max-width: 46rem; margin: 0 auto 28px; padding: 18px 20px; border-radius: 14px; background: var(--paper-2); }
	.prose--explainer { grid-column: 1; max-width: 46rem; margin: 0 auto; width: 100%; }
	.lead-notes { grid-template-columns: 1fr 1fr; }
	.lead-notes .note--first { grid-column: 1 / -1; }
	.colophon__inner { grid-template-columns: 1fr 1fr; }
	.colophon__brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
	.hero__frame { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.hero__ros { position: absolute; right: 0; top: 0; width: 72%; aspect-ratio: 1; overflow: hidden; border-top-right-radius: 16px; opacity: .45; padding: 0; }
	.hero__ros .rosette--hero { transform: translate(28%, -8%); }
	.hero__copy { padding: 76px 22px 120px; }
	.hero__copy h1 { max-width: 12ch; }
	.hero__serial--a { right: 20px; top: 16px; font-size: 1.1rem; }
	.hero__legend { display: none; }
	.ex-head__answer { grid-template-columns: 1fr; }
	.seal { display: none; }
	.anatomy__note { grid-template-columns: 1fr; grid-template-areas: "stamp" "title" "short" "where" "critics" "sources" "serial"; padding-left: 52px; }
	.a-stamp { justify-self: start; width: 82px; height: 82px; }
	.hero__denom { right: 18px; font-size: 4.4rem; }
	.section-head { grid-template-columns: 1fr; }
	.anatomy__plate { grid-template-columns: 1fr; }
	.band__grid { grid-template-columns: 1fr; }
	.band__seal { width: 140px; }
	.classroom__inner { grid-template-columns: 1fr; }
	.classroom__inner .rosette { width: 120px; }
}
@media (max-width: 620px) {
	.masthead__bar { height: 64px; }
	.wordmark { font-size: 1.35rem; }
	.menu-btn__label { display: none; }
	.menu-btn { padding: 0 12px; }
	.langs a { min-width: 32px; padding: 0 6px; }
	.uncut__sheet, .uncut__sheet--small { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 22px 14px; }
	.note--hub, .uncut__sheet--small .note--hub { min-height: 168px; }
	.note--hub .note__face { padding: 14px 14px 12px; gap: 4px; }
	.note--hub .note__blurb { display: none; }
	.note--hub .note__title { font-size: 1.15rem; padding-right: 0; max-width: none; hyphens: auto; }
	.note__corner { display: none; }
	.classroom__serial { display: none; }
	.note--hub .note__emblem { width: 34px; height: 34px; }
	.note--hub .note__serial { font-size: .8rem; }
	.note__denom b { font-size: 1.9rem; }
	.note__denom small { font-size: .55rem; letter-spacing: .14em; }
	.note--hub::before { inset: -9px; }
	.ledger__link { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "title title" "hub hub" "serial date" "preview preview"; row-gap: 6px; column-gap: 14px; padding: 18px 6px; }
	.ledger__date { justify-self: start; }
	.lead-notes { grid-template-columns: 1fr; }
	.sheet__hubs { grid-template-columns: 1fr; }
	.ask__field { padding-left: 14px; }
	.ask .btn { padding: 0 16px; }
	.ask__icon { display: none; }
	.hero__copy { padding: 64px 18px 116px; }
	.ask__go { width: 48px; padding: 0; }
	.ask__go-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.ask__go-icon { display: block; }
	.hero__copy h1 { font-size: clamp(2.5rem, 12vw, 3.4rem); }
	.hero__note { padding: 4px 6px; border-radius: 18px; }
	.colophon__inner { grid-template-columns: 1fr; }
	.colophon__legend { flex-direction: column; align-items: stretch; }
	.prose { font-size: 1.0625rem; }
	.void__stamp { top: 6%; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .rosette .ros-l { animation: none; stroke-dashoffset: 0; }
	.hero__ros .rosette > g { animation: none !important; }
	.note__face, .note__ros, .note--hub .note__emblem, .wordmark__seal { transition-property: opacity, box-shadow, background-color; }
	.note:hover .note__face { transform: none; }
	.sheet, .sheet[hidden] { transition: none; }
	.sheet:not([hidden]) .sheet__hubs li { animation: none; }
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}