/* ===========================================================================
   THWACKERY — site.css

   The art direction, in one sentence: a trade body's printed handbook laid
   over a sunlit road. The paper is dry, ruled and numbered; the world
   underneath it is warm and moving. The joke is the contrast, so the design
   plays the paperwork completely straight.

   No webfonts, no CDN, no external requests. Paper grain is an inline SVG
   filter; every rule, seal and mark is drawn in CSS or SVG.
   =========================================================================== */

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

:root {
	--paper:      #f2e9d5;
	--paper-deep: #e9ddc2;
	--paper-edge: #dccdac;
	--paper-warm: #f7f0df;

	--ink:        #241a10;
	--ink-2:      #5b4b38;
	--ink-3:      #8b7a60;
	--rule:       #c9b694;
	--rule-soft:  #ddceb0;

	--wax:        #8c2f20;
	--wax-deep:   #6b2216;
	--brass:      #9c7423;
	--moss:       #4a6b2f;

	--night:      #14120e;
	--night-2:    #1e1a14;
	--night-3:    #2b2519;
	--night-ink:  #cdc3ae;
	--night-rule: #3d3527;

	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
	         Georgia, "Times New Roman", serif;
	--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
	        "Liberation Mono", monospace;

	--measure: 34rem;
	--gutter: clamp(1.25rem, 4vw, 4rem);
	--page: 78rem;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------- reset ----------------------------------- */

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

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

body {
	margin: 0;
	background: var(--night);
	color: var(--ink);
	font-family: var(--serif);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	line-height: 1.62;
	/* The page must never scroll sideways, at any width. `clip` rather than
	   `hidden`: `hidden` turns the body into a scroll container, which
	   silently kills `position: sticky` everywhere below it. `hidden` is
	   kept first as the fallback for anything without `clip`. */
	overflow-x: hidden;
	overflow-x: clip;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }

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

/* Offset vertically, never horizontally: a link parked at left:-9999px is a
   classic cause of phantom horizontal scroll. */
.skip {
	position: fixed;
	left: 1rem;
	top: 0;
	z-index: 100;
	background: var(--paper);
	color: var(--ink);
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--ink);
	transform: translateY(-200%);
}
.skip:focus { transform: translateY(1rem); }

/* Product identifiers and URLs must break rather than push the page wide. */
code {
	font-family: var(--mono);
	font-size: 0.9em;
	overflow-wrap: anywhere;
	word-break: break-word;
}

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

/* ---------------------------- paper surface ------------------------------- */
/* feTurbulence as a data URI: real grain, zero requests.                     */

.grain::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.22'/></svg>");
	background-size: 180px 180px;
}

/* ------------------------------ typography -------------------------------- */

.kicker {
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-3);
	font-weight: 500;
}

.display {
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 0.92;
	text-transform: uppercase;
	font-variant-ligatures: none;
}

.lede {
	font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
	line-height: 1.5;
	color: var(--ink-2);
	max-width: var(--measure);
}

.small { font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); }
.figure-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ------------------------------ the world --------------------------------- */

#world {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background: #bcd8e6;
	touch-action: pan-y;
}

#world.is-aiming { cursor: crosshair; }

/* A gentle warm vignette over the 3D, so type always has something to sit on. */
.world-veil {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* A scrim the type can live on. The world is bright green in daylight and
	   cream text needs somewhere to sit, so the bottom third is weighted. */
	background:
		radial-gradient(130% 95% at 50% 34%, rgba(255, 246, 225, 0) 38%, rgba(52, 34, 14, 0.34) 100%),
		linear-gradient(to top,
			rgba(26, 16, 5, 0.84) 0%,
			rgba(26, 16, 5, 0.62) 20%,
			rgba(26, 16, 5, 0.22) 40%,
			rgba(26, 16, 5, 0) 58%);
}

.noscript-note, .nogl {
	position: relative;
	z-index: 3;
	background: var(--night-2);
	color: var(--night-ink);
	padding: 1rem var(--gutter);
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	border-bottom: 1px solid var(--night-rule);
}

/* --------------------------------- nav ------------------------------------ */

.nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.85rem var(--gutter);
	color: var(--paper-warm);
	transition: background 0.4s var(--ease), color 0.4s var(--ease),
	            border-color 0.4s var(--ease);
	border-bottom: 1px solid rgba(255, 244, 220, 0.16);
	background: linear-gradient(to bottom, rgba(26, 18, 8, 0.5), rgba(26, 18, 8, 0));
}

.nav.on-paper {
	background: var(--paper);
	color: var(--ink);
	border-bottom-color: var(--rule);
}

.nav-mark {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	text-decoration: none;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.nav-mark b {
	font-family: var(--serif);
	font-size: 1rem;
	letter-spacing: 0.12em;
	font-weight: 700;
}
.nav-mark span { opacity: 0.62; }

.nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem clamp(0.7rem, 2vw, 1.75rem);
	list-style: none;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.nav-links a { text-decoration: none; opacity: 0.78; transition: opacity 0.2s; }
.nav-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

.sound-toggle {
	font: inherit;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
	border-radius: 0;
	padding: 0.3rem 0.6rem;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s, background 0.2s;
}
.sound-toggle:hover { opacity: 1; }
.sound-toggle[aria-pressed="true"] { opacity: 1; background: rgba(140, 47, 32, 0.9); border-color: transparent; color: #fff; }

@media (max-width: 46rem) {
	.nav-links .opt { display: none; }
}
/* Keep the bar on one line on a phone. */
@media (max-width: 30rem) {
	.nav-mark span { display: none; }
}

/* --------------------------------- acts ----------------------------------- */
/* The first three sections are transparent: the world shows through them.    */

.act {
	position: relative;
	z-index: 2;
	min-height: 100svh;
	display: flex;
	padding: 0 var(--gutter);
	pointer-events: none;
}
/* min-width:0 lets these shrink below their min-content width instead of
   forcing the document wider than the viewport. */
.act > * { pointer-events: auto; min-width: 0; }
.hero, .hero > * { min-width: 0; }

.act-hero { align-items: flex-end; padding-bottom: clamp(2rem, 6vh, 4.5rem); }

/* ------------------------------- the hero ---------------------------------- */

.hero {
	width: 100%;
	max-width: var(--page);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 2rem;
	color: var(--paper-warm);
}

.hero-def {
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	color: rgba(247, 240, 223, 0.82);
	margin-bottom: 0.9rem;
	text-shadow: 0 1px 12px rgba(26, 14, 3, 0.9), 0 0 3px rgba(26, 14, 3, 0.7);
}
.hero-def i { font-style: italic; letter-spacing: 0.06em; }

h1.hero-title {
	font-family: var(--serif);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 0.86;
	letter-spacing: -0.02em;
	/* THWACKERY is one unbreakable word, so its width sets the page's
	   min-content width. The ceiling has to stay inside the gutters at the
	   narrowest supported screen or the whole document scrolls sideways. */
	font-size: clamp(2.25rem, 12.5vw, 11rem);
	margin: 0 0 0.35rem;
	color: #fdf6e4;
	text-shadow: 0 2px 0 rgba(58, 34, 12, 0.35), 0 18px 60px rgba(30, 16, 4, 0.55);
}

.hero-rule {
	height: 2px;
	background: linear-gradient(to right, rgba(253, 246, 228, 0.9), rgba(253, 246, 228, 0));
	margin: 0.9rem 0 1.1rem;
	max-width: 40rem;
}

.hero-line {
	font-size: clamp(1.0625rem, 0.98rem + 0.5vw, 1.375rem);
	line-height: 1.45;
	max-width: 33rem;
	color: rgba(252, 246, 232, 0.92);
	text-shadow: 0 1px 14px rgba(30, 16, 4, 0.6);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-top: 1.5rem;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.8rem 1.4rem;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background 0.25s var(--ease), color 0.25s var(--ease),
	            transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn-solid {
	background: var(--wax);
	border-color: var(--wax);
	color: #fdf6e4;
}
.btn-solid:hover { background: var(--wax-deep); border-color: var(--wax-deep); }
.btn-ghost:hover { background: rgba(253, 246, 228, 0.14); }

/* The board readout: the game's own HUD language, kept dry. */
.readout {
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(247, 240, 223, 0.8);
	text-align: right;
	display: grid;
	gap: 0.35rem;
	white-space: nowrap;
}
.readout div { display: flex; justify-content: space-between; gap: 1.5rem; }
.readout b { font-weight: 500; color: #fdf6e4; font-variant-numeric: tabular-nums; }

.hint {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--mono);
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(247, 240, 223, 0.62);
	margin-top: 1.4rem;
}
.hint::before {
	content: "";
	width: 14px; height: 14px;
	border: 1px solid currentColor;
	border-radius: 50%;
	animation: ping 2.6s var(--ease) infinite;
}
@keyframes ping {
	0%, 100% { transform: scale(0.7); opacity: 0.45; }
	50% { transform: scale(1.15); opacity: 1; }
}

@media (max-width: 60rem) {
	.hero { grid-template-columns: 1fr; }
	.readout { text-align: left; justify-items: start; }
	.readout div { justify-content: flex-start; gap: 0.75rem; }
}

/* ---------------------- acts 2 and 3: over the world ----------------------- */

.act-panel {
	align-items: center;
}

.panel {
	max-width: 33rem;
	margin-left: auto;
	margin-right: 0;
	background: rgba(244, 236, 218, 0.94);
	backdrop-filter: blur(3px) saturate(1.05);
	-webkit-backdrop-filter: blur(3px) saturate(1.05);
	border: 1px solid rgba(120, 96, 60, 0.35);
	box-shadow: 0 30px 70px -30px rgba(24, 14, 4, 0.7);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	position: relative;
}
.panel.left { margin-left: 0; margin-right: auto; }

/* The definition, set as a dictionary entry, because it is one. */
.entry-word {
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.05;
}
.entry-word i { font-weight: 400; font-style: italic; color: var(--ink-3); font-size: 0.5em; letter-spacing: 0.02em; }
.entry-pron {
	font-family: var(--mono);
	font-size: 0.8125rem;
	color: var(--ink-3);
	letter-spacing: 0.04em;
	margin-top: 0.35rem;
}
.entry-sense {
	margin-top: 1.1rem;
	padding-left: 1.5rem;
	position: relative;
}
.entry-sense::before {
	content: attr(data-n);
	position: absolute;
	left: 0;
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--wax);
	top: 0.35em;
}
.entry-sense + .entry-sense { margin-top: 0.8rem; }
.entry-note {
	margin-top: 1.35rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rule);
	font-size: 0.9375rem;
	color: var(--ink-2);
}

/* ------------------------------- the sheet --------------------------------- */
/* From here down the paperwork covers the road.                              */

.sheet {
	position: relative;
	z-index: 3;
	background: var(--paper);
	color: var(--ink);
	box-shadow: 0 -40px 80px -20px rgba(20, 12, 2, 0.65);
}

.sheet-top {
	height: clamp(2rem, 5vw, 3.5rem);
	background:
		repeating-linear-gradient(90deg, var(--paper) 0 6px, var(--paper-deep) 6px 12px);
	border-bottom: 1px solid var(--rule);
	opacity: 0.9;
}

.section {
	position: relative;
	max-width: var(--page);
	margin: 0 auto;
	padding: clamp(3.5rem, 9vh, 7rem) var(--gutter);
}
.section + .section { border-top: 1px solid var(--rule); }

/* The asymmetric spread: a numbered margin column and a wide text column. */
.spread {
	display: grid;
	grid-template-columns: 12rem minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}
.spread-wide { grid-template-columns: 12rem minmax(0, 1fr); }

.margin-col {
	position: sticky;
	top: 5.5rem;
	display: grid;
	gap: 0.6rem;
	align-content: start;
}
.margin-num {
	font-family: var(--serif);
	font-size: 2.25rem;
	line-height: 1;
	font-weight: 700;
	color: var(--wax);
	letter-spacing: -0.02em;
}
.margin-label {
	font-family: var(--mono);
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-3);
	border-top: 1px solid var(--rule);
	padding-top: 0.6rem;
}
.margin-note {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ink-3);
	font-style: italic;
	border-left: 2px solid var(--rule-soft);
	padding-left: 0.75rem;
}

h2.section-title {
	font-family: var(--serif);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 0.98;
	font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.4rem);
	margin-bottom: 1.1rem;
}
h3.sub-title {
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-3);
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.prose p + p { margin-top: 1rem; }
.prose { max-width: var(--measure); }

@media (max-width: 56rem) {
	.spread, .spread-wide { grid-template-columns: 1fr; gap: 1.5rem; }
	.margin-col {
		position: static;
		grid-auto-flow: column;
		justify-content: start;
		align-items: baseline;
		gap: 1rem;
	}
	.margin-label { border-top: 0; padding-top: 0; }
	.margin-note { display: none; }
}

/* ------------------------------- the purse --------------------------------- */

.ledger {
	border: 1px solid var(--rule);
	background: var(--paper-warm);
}
.ledger-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var(--rule);
	background: var(--paper-deep);
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.purse-left { font-variant-numeric: tabular-nums; color: var(--ink); }
.purse-left.spent { color: var(--wax); }

.ledger-rows { list-style: none; }
.ledger-rows li + li { border-top: 1px solid var(--rule-soft); }

.slot-btn {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	text-align: left;
	font: inherit;
	background: transparent;
	border: 0;
	padding: 0.7rem 1.1rem;
	cursor: pointer;
	color: var(--ink);
	transition: background 0.18s var(--ease);
}
.slot-btn:hover { background: rgba(140, 47, 32, 0.06); }
.slot-btn:disabled { cursor: not-allowed; color: var(--ink-3); }
.slot-btn[aria-pressed="true"] { background: rgba(74, 107, 47, 0.10); }

.slot-tick {
	width: 1.15rem; height: 1.15rem;
	border: 1px solid var(--ink-2);
	display: grid;
	place-items: center;
	font-family: var(--mono);
	font-size: 0.75rem;
	line-height: 1;
	color: transparent;
}
.slot-btn[aria-pressed="true"] .slot-tick {
	background: var(--moss);
	border-color: var(--moss);
	color: var(--paper-warm);
}
.slot-name { font-weight: 600; }
.slot-where { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); letter-spacing: 0.08em; }
.slot-cost { font-family: var(--mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }

.ledger-foot {
	border-top: 1px solid var(--rule);
	padding: 1.1rem;
	background: var(--paper-deep);
}

.cover-bar {
	height: 1.4rem;
	border: 1px solid var(--ink-2);
	background:
		repeating-linear-gradient(45deg, var(--paper-edge) 0 5px, var(--paper-deep) 5px 10px);
	position: relative;
	overflow: hidden;
}
.cover-fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--moss);
	width: 0%;
	transition: width 0.45s var(--ease);
}
.cover-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-top: 0.6rem;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.cover-legend b { font-variant-numeric: tabular-nums; }
.cover-you { color: var(--wax); }

.verdict {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
	font-size: 1rem;
	min-height: 3.2em;
}
.verdict strong { font-weight: 700; }

/* ----------------------------- equipment ----------------------------------- */

.kit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
}
.kit-stage {
	position: relative;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--rule);
	background:
		radial-gradient(80% 70% at 50% 30%, var(--paper-warm), var(--paper-deep) 70%, var(--paper-edge));
	cursor: grab;
	touch-action: pan-y;
	overflow: hidden;
}
.kit-stage:active { cursor: grabbing; }
.kit-stage canvas { width: 100%; height: 100%; }
.kit-stage .stage-note {
	position: absolute;
	left: 0.75rem; bottom: 0.6rem;
	font-family: var(--mono);
	font-size: 0.5625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-3);
	pointer-events: none;
}

.kit-tabs { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.kit-tabs li { border-bottom: 1px solid var(--rule); }
.kit-tab {
	width: 100%;
	text-align: left;
	font: inherit;
	background: transparent;
	border: 0;
	padding: 0.85rem 0.5rem;
	cursor: pointer;
	color: var(--ink-2);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.75rem;
	transition: color 0.2s, padding-left 0.25s var(--ease), background 0.2s;
}
.kit-tab:hover { color: var(--ink); padding-left: 0.9rem; background: rgba(140, 47, 32, 0.04); }
.kit-tab[aria-selected="true"] {
	color: var(--ink);
	padding-left: 0.9rem;
	box-shadow: inset 3px 0 0 var(--wax);
}
.kit-tab b { font-weight: 700; font-size: 1.0625rem; }
.kit-tab span { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

.kit-detail { margin-top: 1.25rem; min-height: 7.5rem; }
.kit-detail p { max-width: 30rem; }
.kit-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	margin-top: 0.9rem;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.kit-stats b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500; }

@media (max-width: 56rem) {
	.kit { grid-template-columns: 1fr; }
}

/* ------------------------------- the drove ---------------------------------- */

.map-wrap {
	position: relative;
	border: 1px solid var(--rule);
	background: var(--paper-warm);
	aspect-ratio: 16 / 7;
	min-height: 15rem;
}
.map-wrap canvas { width: 100%; height: 100%; }

.pin {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 2.9rem; height: 2.9rem;
	border-radius: 50%;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
}
.pin::after {
	content: "";
	position: absolute;
	inset: 0.55rem;
	border-radius: 50%;
	transition: box-shadow 0.25s var(--ease);
}
.pin:hover::after, .pin[aria-pressed="true"]::after {
	box-shadow: 0 0 0 6px rgba(140, 47, 32, 0.16);
}

.brief {
	margin-top: 1.5rem;
	display: grid;
	grid-template-columns: 14rem minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2.5rem);
	border: 1px solid var(--rule);
	background: var(--paper-warm);
	padding: clamp(1.1rem, 2.5vw, 1.75rem);
}
.brief-meta { border-right: 1px solid var(--rule); padding-right: 1.25rem; }
.brief-name {
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	line-height: 1.05;
}
.brief-q {
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wax);
	margin-top: 0.5rem;
}
.brief-body { font-size: 1rem; }
.brief-body p + p { margin-top: 0.85rem; }
.brief-sign {
	margin-top: 1.1rem;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
}

@media (max-width: 56rem) {
	.brief { grid-template-columns: 1fr; }
	.brief-meta { border-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; padding-bottom: 1rem; }
	.map-wrap { aspect-ratio: 4 / 5; }
}

/* -------------------------------- the moot ----------------------------------- */

.roster {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0;
	border: 1px solid var(--rule);
}
.roster li {
	padding: 1.1rem;
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	background: var(--paper-warm);
}
.roster b { display: block; font-size: 1.0625rem; }
.roster .role {
	font-family: var(--mono);
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0.2rem 0 0.55rem;
}
.roster p { font-size: 0.875rem; color: var(--ink-2); line-height: 1.5; }

/* -------------------------------- the fort ------------------------------------ */

.fort {
	position: relative;
	z-index: 3;
	background: var(--night);
	color: var(--night-ink);
	/* No `overflow: hidden` here — it would make this an ancestor scroll
	   container and stop .fort-sticky from sticking at all. */
}
.fort-sticky {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
}
.fort-sticky canvas { width: 100%; height: 100%; }
.fort-scroll { height: 260svh; position: relative; }

.fort-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(90% 70% at 50% 45%, rgba(10, 9, 8, 0) 30%, rgba(8, 7, 6, 0.85) 100%);
}

.fort-copy {
	position: absolute;
	left: var(--gutter);
	right: var(--gutter);
	bottom: clamp(2rem, 8vh, 5rem);
	max-width: var(--page);
	margin: 0 auto;
	z-index: 2;
}
.fort-copy .kicker { color: rgba(205, 195, 174, 0.6); }
.fort-copy h2 {
	font-family: var(--serif);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(2rem, 1.2rem + 4vw, 4.5rem);
	line-height: 0.92;
	letter-spacing: -0.02em;
	color: #efe6d2;
	margin: 0.5rem 0 1rem;
}
.fort-copy p { max-width: 32rem; color: rgba(214, 205, 186, 0.9); }
.fort-copy p + p { margin-top: 0.8rem; }

.no-way-back {
	font-family: var(--mono);
	font-size: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: #c8462f;
	margin-top: 1.5rem;
	display: inline-block;
	border: 1px solid rgba(200, 70, 47, 0.45);
	padding: 0.6rem 1.1rem 0.6rem 1.5rem;
}

/* -------------------------------- early access ---------------------------------- */

.terms-box {
	border: 1px solid var(--rule);
	background: var(--paper-warm);
	padding: clamp(1.1rem, 2.5vw, 1.75rem);
	max-width: 40rem;
}
.price {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-family: var(--serif);
}
.price b { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 700; letter-spacing: -0.02em; }
.price span { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }

.disclosure {
	list-style: none;
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rule);
	display: grid;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--ink-2);
}
.disclosure li { padding-left: 1.1rem; position: relative; }
.disclosure li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--ink-3);
}

.feature-list { list-style: none; display: grid; gap: 0.9rem; margin-top: 1.25rem; }
.feature-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: baseline; }
.tag {
	font-family: var(--mono);
	font-size: 0.5625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border: 1px solid currentColor;
	padding: 0.2rem 0.45rem;
	white-space: nowrap;
}
.tag.live { color: var(--moss); }
.tag.soon { color: var(--ink-3); }

/* ---------------------------------- footer -------------------------------------- */

.foot {
	position: relative;
	z-index: 3;
	background: var(--night-2);
	color: var(--night-ink);
	border-top: 1px solid var(--night-rule);
}
.foot-inner {
	max-width: var(--page);
	margin: 0 auto;
	padding: clamp(2.5rem, 6vh, 4.5rem) var(--gutter);
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
.foot h4 {
	font-family: var(--mono);
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(205, 195, 174, 0.55);
	border-bottom: 1px solid var(--night-rule);
	padding-bottom: 0.6rem;
	margin-bottom: 0.85rem;
	font-weight: 500;
}
.foot ul { list-style: none; display: grid; gap: 0.55rem; }
.foot a { text-decoration: none; opacity: 0.85; }
.foot a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.foot .wordmark {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #efe6d2;
}
.foot .fine {
	font-size: 0.8125rem;
	color: rgba(205, 195, 174, 0.6);
	max-width: 26rem;
	margin-top: 0.75rem;
	line-height: 1.55;
}
.foot-bar {
	border-top: 1px solid var(--night-rule);
	padding: 1rem var(--gutter);
	font-family: var(--mono);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(205, 195, 174, 0.5);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	max-width: var(--page);
	margin: 0 auto;
}

@media (max-width: 56rem) {
	.foot-inner { grid-template-columns: 1fr; }
}

/* =============================== legal pages ===================================== */

.doc-body { background: var(--paper); color: var(--ink); }

.doc-head {
	border-bottom: 1px solid var(--rule);
	background: var(--paper-deep);
}
.doc-head-inner {
	max-width: 52rem;
	margin: 0 auto;
	padding: clamp(4.5rem, 10vh, 7rem) var(--gutter) clamp(2rem, 5vh, 3rem);
}
.doc-head h1 {
	font-family: var(--serif);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
	line-height: 0.98;
	letter-spacing: -0.015em;
	margin: 0.6rem 0 0.75rem;
}
.doc-meta {
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
}

.doc {
	max-width: 52rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 6vh, 4rem) var(--gutter) clamp(4rem, 10vh, 6rem);
}
.doc h2 {
	font-family: var(--serif);
	font-size: 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 2.75rem 0 0.85rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--rule);
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: 0.5rem;
	align-items: baseline;
}
.doc h2 > span { font-family: var(--mono); font-size: 0.75rem; color: var(--wax); letter-spacing: 0.1em; }
.doc h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 1.6rem 0 0.5rem;
}
.doc p + p, .doc ul + p, .doc p + ul { margin-top: 0.9rem; }
.doc ul { list-style: none; display: grid; gap: 0.5rem; margin-left: 0.15rem; }
.doc ul li { padding-left: 1.35rem; position: relative; }
.doc ul li::before {
	content: "";
	position: absolute;
	left: 0.1rem; top: 0.72em;
	width: 0.5rem; height: 1px;
	background: var(--ink-3);
}
.doc a { color: var(--wax); text-underline-offset: 3px; overflow-wrap: anywhere; }

.callout {
	border: 1px solid var(--ink-2);
	background: var(--paper-warm);
	padding: 1.1rem 1.25rem;
	margin: 1.4rem 0;
}
.callout .kicker { color: var(--wax); margin-bottom: 0.4rem; display: block; }

.placeholder {
	background: rgba(140, 47, 32, 0.10);
	border: 1px dashed var(--wax);
	padding: 0.15rem 0.45rem;
	font-family: var(--mono);
	font-size: 0.8125rem;
	color: var(--wax-deep);
}

.doc-toc {
	border: 1px solid var(--rule);
	background: var(--paper-warm);
	padding: 1.1rem 1.25rem;
	margin-bottom: 2rem;
}
.doc-toc ol { list-style: none; counter-reset: toc; display: grid; gap: 0.4rem; }
.doc-toc li { counter-increment: toc; font-size: 0.9375rem; }
.doc-toc li::before {
	content: counter(toc) ". ";
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--ink-3);
}
.doc-toc a { color: var(--ink); text-decoration: none; }
.doc-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }

.doc-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2rem 0;
	font-size: 0.9375rem;
}
.doc-table th, .doc-table td {
	text-align: left;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--rule);
	vertical-align: top;
}
.doc-table th {
	font-family: var(--mono);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var(--paper-deep);
	font-weight: 500;
	color: var(--ink-2);
}
.table-scroll { overflow-x: auto; }

/* ------------------------------ reduced motion ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.hint::before { animation: none; }
	.fort-sticky { position: relative; height: 70svh; }
	.fort-scroll { height: auto; }
}

/* ------------------------------- print ---------------------------------------------- */

@media print {
	#world, .world-veil, .nav, .fort, .foot { display: none !important; }
	body { background: #fff; color: #000; }
	.doc { max-width: none; }
}