/* ── typefaces ─────────────────────────────────────────────────────── */
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/letterset/fs-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/letterset/fs-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/letterset/fs-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/letterset/fs-700.woff2') format('woff2');
}

/* ── design tokens ─────────────────────────────────────────────────── */
:root {
	--ink-primary: #131620;
	--ink-key: #01c9fc;
	--ink-key-active: #00acdc;
	--ink-canvas: #141823;
	--ink-layer: #1c2130;
	--ink-front: #ffffff;
	--ink-dim: #c1c1c1;
	--ink-edge: #2b3245;
	--ink-stroke-heavy: #444d66;
	--ink-blend-a: #ffcc05;
	--ink-fade-bottom: #202334;
	--ink-advisory: #a4161a;

	--sp-1: 4px;
	--sp-2: 7px;
	--sp-3: 11px;
	--sp-4: 17px;
	--sp-5: 26px;
	--sp-6: 40px;
	--sp-7: 60px;
	--sp-8: 90px;

	--rad-1: 1px;
	--rad-2: 2px;
	--rad-3: 8px;
	--rad-4: 14px;
	--rad-5: 22px;
	--rad-6: 28px;
	--rad-7: 34px;
	--rad-8: 42px;
	--rad-capsule: 9999px;
	--rad-round-full: 50%;

	--elev-1: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
	--elev-2: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
	--elev-3: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
	--elev-4: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
	--elev-5: 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	--elev-6: 0 22px 60px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	--elev-7: 0 28px 74px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.13) inset;
	--elev-8: 0 34px 90px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;

	--fnt-heading: 'Fira Sans', system-ui, sans-serif;
	--fnt-text: 'Fira Sans', system-ui, sans-serif;

	--sz-xxl: 44px;
	--sz-h2: 34px;
	--sz-lg-2: 26px;
	--sz-sub-2: 20px;
	--sz-sm-2: 16px;
	--sz-h6: 14px;
	--sz-body: 16px;
	--sz-small: 14px;
	--sz-micro: 12px;

	--lh-snug: 1.2;
	--lh-regular: 1.55;
	--lh-roomy: 1.7;

	--wg-regular: 400;
	--wg-medium: 500;
	--wg-heavy: 700;

	--trk-narrow: -0.01em;
	--trk-even: 0;
	--trk-spread: 0.02em;

	--spd-quick: 109ms;
	--spd-normal: 190ms;
	--spd-gentle: 351ms;

	--crv-land: cubic-bezier(0.34, 0.95, 0.31, 0.97);
	--crv-even: cubic-bezier(0.61, 0.09, 0.35, 0.96);
	--crv-elastic: cubic-bezier(0.21, 1.75, 0.59, 1.35);

	--wrp-outer: 1200px;
	--wrp-inner: 1200px;
	--wrp-padding-desktop: 48px;
	--wrp-padding-tablet: 32px;
	--wrp-edge-narrow: 16px;

	--bd-hair: 1px;
	--bd-mid: 2px;
	--bd-heavy: 3px;

	--hd-height-desktop: 40px;
	--hd-size-mobile: 40px;

	--sec-y: 42px;
	--edge: 570px;
	--rg-height: 34px;
}

/* ── reset / base ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	overflow-x: clip;
}

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

body {
	background: var(--ink-canvas);
	color: var(--ink-front);
	display: flex;
	flex-direction: column;
	font-family: var(--fnt-text);
	font-size: var(--sz-body);
	font-weight: var(--wg-regular);
	line-height: var(--lh-regular);
	margin: 0;
	min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
	margin: 0;
}

h1 {
	color: var(--ink-front);
	font-family: var(--fnt-heading);
	font-size: var(--sz-xxl);
	font-weight: var(--wg-heavy);
	letter-spacing: var(--trk-narrow);
	line-height: var(--lh-snug);
}

h2 {
	color: var(--ink-front);
	font-family: var(--fnt-heading);
	font-size: var(--sz-h2);
	font-weight: var(--wg-heavy);
	letter-spacing: var(--trk-narrow);
	line-height: var(--lh-snug);
}

h3 {
	color: var(--ink-front);
	font-family: var(--fnt-text);
	font-size: var(--sz-lg-2);
	font-weight: var(--wg-heavy);
	letter-spacing: var(--trk-even);
	line-height: var(--lh-snug);
}

h4 {
	color: var(--ink-front);
	font-family: var(--fnt-text);
	font-size: var(--sz-sub-2);
	font-weight: var(--wg-medium);
	line-height: var(--lh-snug);
}

p {
	margin: 0 0 var(--sp-4);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--ink-key);
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
}

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

ul,
ol {
	margin: 0;
	padding: 0;
}

button {
	font: inherit;
}

.main {
	display: block;
	flex: 1 0 auto;
}

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

.skiphop {
	background: var(--ink-key);
	border-radius: 0 0 var(--rad-3) 0;
	color: var(--ink-primary);
	font-weight: var(--wg-medium);
	left: 0;
	padding: var(--sp-3) var(--sp-4);
	position: fixed;
	top: 0;
	z-index: 200;
}

.skiphop:not(:focus) {
	top: -200px !important;
}

/* ── responsible-gaming ribbon (RG-03) ─────────────────────────────── */
.advisory {
	background: var(--ink-advisory);
	border-radius: 0 0 var(--rad-3) var(--rad-3);
	color: var(--ink-front);
	display: block;
	font-size: var(--sz-micro);
	letter-spacing: var(--trk-spread);
	margin: 0 auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	min-height: var(--rg-height);
	padding: var(--sp-2) var(--sp-4);
	text-align: center;
	width: 100%;
}

.advisory a {
	color: var(--ink-front);
	text-decoration: underline;
}

.advisory a:hover {
	color: var(--ink-blend-a);
}

.advisory-mark {
	background: var(--ink-front);
	border-radius: var(--rad-2);
	color: var(--ink-advisory);
	display: inline-flex;
	font-weight: var(--wg-heavy);
	margin-inline-end: var(--sp-2);
	padding: 0 var(--sp-1);
}

/* ── motion / reveal ───────────────────────────────────────────────── */
[data-show] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--spd-gentle) var(--crv-land), transform var(--spd-gentle) var(--crv-land);
}

[data-show].has-entered {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}

	[data-show] {
		opacity: 1;
		transform: none;
	}
}

/* ── armoire · footer (FOOT-07 Side-Anchored Asymmetric) ───────────── */
.armoire {
	background: var(--ink-primary);
	color: var(--ink-front);
	margin-top: var(--sp-6);
	position: relative;
}

.armoire-shell {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding: var(--sp-7) var(--wrp-padding-desktop);
}

.armoire-part {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.armoire-sign {
	align-self: flex-start;
	display: block;
}

.armoire-shot {
	height: 64px;
	width: auto;
}

.armoire-map,
.armoire-legal {
	display: block;
}

.armoire-top {
	color: var(--ink-key);
	font-size: var(--sz-micro);
	font-weight: var(--wg-heavy);
	letter-spacing: var(--trk-spread);
	margin-bottom: var(--sp-3);
	text-transform: uppercase;
}

.armoire-set {
	column-gap: var(--sp-5);
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	row-gap: var(--sp-2);
}

.armoire-set li {
	display: block;
}

.armoire-path {
	color: var(--ink-dim);
	display: inline-block;
	font-size: var(--sz-small);
	padding-block: var(--sp-1);
	transition: color var(--spd-quick) var(--crv-land);
}

.armoire-path:hover {
	color: var(--ink-front);
}

.armoire-fineprint {
	color: var(--ink-dim);
	display: block;
	font-size: var(--sz-micro);
	line-height: var(--lh-regular);
}

.armoire-accent {
	align-items: center;
	background: var(--ink-key);
	border-radius: var(--rad-4);
	color: var(--ink-primary);
	display: flex;
	justify-content: center;
	padding: var(--sp-6) var(--sp-4);
}

.armoire-mark {
	background: var(--ink-key);
	color: var(--ink-primary);
	font-family: var(--fnt-heading);
	font-size: var(--sz-h2);
	font-weight: var(--wg-heavy);
	letter-spacing: var(--trk-narrow);
	line-height: var(--lh-snug);
	text-align: center;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

/* ── atrium · faq (FAQ-10 Sidebar-Style Two-Column) ────────────────── */
.atrium {
	padding-block: var(--sec-y);
}

.atrium-wrap {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
}

.atrium-aside {
	align-self: start;
	background: var(--ink-layer);
	border-radius: var(--rad-4);
	color: var(--ink-front);
	padding: var(--sp-5);
	position: sticky;
	top: var(--sp-5);
}

.atrium-words {
	color: var(--ink-dim);
	margin-top: var(--sp-3);
}

.atrium-set {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.atrium-item {
	border-bottom: var(--bd-hair) solid var(--ink-edge);
	padding-bottom: var(--sp-4);
}

.atrium-top {
	cursor: pointer;
	display: flex;
	gap: var(--sp-3);
	list-style: none;
}

.atrium-top::-webkit-details-marker {
	display: none;
}

.atrium-top h3 {
	font-size: var(--sz-sub-2);
	font-weight: var(--wg-heavy);
}

.atrium-sigil {
	color: var(--ink-key);
	flex-shrink: 0;
	font-size: var(--sz-sub-2);
	font-weight: var(--wg-heavy);
	line-height: var(--lh-snug);
}

.atrium-answer {
	color: var(--ink-dim);
	padding-top: var(--sp-3);
}

/* ── barrow · cta strip (CTA-01 Full-Width Strip on Accent) ────────── */
.barrow {
	background: var(--ink-key);
	color: var(--ink-primary);
	padding-block: var(--sec-y);
}

.barrow-wrap {
	align-items: center;
	display: flex;
	gap: var(--sp-6);
	justify-content: space-between;
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
}

.barrow-words {
	flex: 1 1 auto;
}

.barrow-caption {
	color: var(--ink-primary);
	font-size: var(--sz-h2);
	letter-spacing: var(--trk-narrow);
	max-width: var(--edge);
	text-transform: uppercase;
}

.barrow-blurb {
	color: var(--ink-primary);
	margin-top: var(--sp-3);
	max-width: var(--edge);
}

.barrow-fineprint {
	color: var(--ink-primary);
	display: block;
	font-size: var(--sz-micro);
	margin-top: var(--sp-3);
	max-width: var(--edge);
	opacity: 0.85;
}

.barrow-deck {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: var(--sp-3);
}

/* ── beacon · contact form (FORM-02 Two-Column Side-by-Side) ───────── */
.beacon {
	padding-block: var(--sec-y);
}

.beacon-wrap {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
}

.beacon-aside {
	background: var(--ink-layer);
	border-radius: var(--rad-4);
	color: var(--ink-front);
	height: fit-content;
	padding: var(--sp-5);
}

.beacon-aside h3 {
	margin-bottom: var(--sp-3);
}

.beacon-words {
	color: var(--ink-dim);
}

.beacon-set {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	list-style: none;
	margin-top: var(--sp-4);
}

.beacon-set li {
	color: var(--ink-dim);
	font-size: var(--sz-small);
}

.beacon-set a {
	color: var(--ink-key);
}

.beacon-form {
	background: var(--ink-layer);
	border-radius: var(--rad-4);
	color: var(--ink-front);
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: var(--sp-5);
}

.beacon-box {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.beacon-tag {
	color: var(--ink-front);
	font-size: var(--sz-small);
	font-weight: var(--wg-medium);
}

.beacon-box input,
.beacon-box textarea {
	background: var(--ink-canvas);
	border: var(--bd-hair) solid var(--ink-stroke-heavy);
	border-radius: var(--rad-3);
	color: var(--ink-front);
	font-family: var(--fnt-text);
	font-size: var(--sz-body);
	padding: var(--sp-3);
	width: 100%;
}

.beacon-box textarea {
	min-height: 140px;
	resize: vertical;
}

.beacon-box input:focus-visible,
.beacon-box textarea:focus-visible {
	outline: var(--bd-mid) solid var(--ink-key);
	outline-offset: 1px;
}

.beacon-go {
	align-self: flex-start;
	background: var(--ink-key);
	border: 0;
	border-radius: var(--rad-4);
	color: var(--ink-primary);
	cursor: pointer;
	font-size: var(--sz-body);
	font-weight: var(--wg-heavy);
	letter-spacing: var(--trk-spread);
	min-height: 48px;
	padding: var(--sp-3) var(--sp-6);
	transition: background var(--spd-quick) var(--crv-land);
}

.beacon-go:hover {
	background: var(--ink-key-active);
	color: var(--ink-primary);
}

.beacon-done {
	background: var(--ink-canvas);
	border-left: var(--bd-heavy) solid var(--ink-key);
	border-radius: var(--rad-3);
	color: var(--ink-front);
	padding: var(--sp-4);
}

.beacon-done[hidden] {
	display: none;
}

/* ── brazier · error block (ERR-01 Centered Hero-Style) ────────────── */
.brazier {
	align-items: center;
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--sec-y);
	text-align: center;
}

.brazier-wrap {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
}

.brazier-digits {
	color: var(--ink-key);
	font-family: var(--fnt-heading);
	font-size: clamp(80px, 16vw, 190px);
	font-weight: var(--wg-heavy);
	line-height: var(--lh-snug);
}

.brazier-caption {
	max-width: var(--edge);
}

.brazier-words {
	color: var(--ink-dim);
	font-size: var(--sz-sm-2);
	max-width: var(--edge);
}

.brazier-go {
	background: var(--ink-key);
	border-radius: var(--rad-4);
	color: var(--ink-primary);
	display: inline-flex;
	align-items: center;
	font-weight: var(--wg-heavy);
	letter-spacing: var(--trk-spread);
	min-height: 52px;
	padding-inline: var(--sp-6);
	transition: background var(--spd-quick) var(--crv-land);
}

.brazier-go:hover {
	background: var(--ink-key-active);
	color: var(--ink-primary);
}

/* ── catwalk · data table (TABLE-05 Compact Dense) ─────────────────── */
.catwalk {
	padding-block: var(--sec-y);
}

.catwalk-wrap {
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
}

.catwalk-scroll {
	border: var(--bd-hair) solid var(--ink-edge);
	border-radius: var(--rad-4);
	margin-top: var(--sp-5);
	overflow-x: auto;
	padding: var(--sp-4);
}

.catwalk-grid {
	min-width: 520px;
}

.catwalk-grid th {
	background: var(--ink-layer);
	color: var(--ink-front);
	font-size: var(--sz-micro);
	font-weight: var(--wg-heavy);
	letter-spacing: var(--trk-spread);
	padding: var(--sp-3);
	text-align: left;
	text-transform: uppercase;
}

.catwalk-grid td {
	background: var(--ink-canvas);
	border-bottom: var(--bd-hair) solid var(--ink-edge);
	color: var(--ink-dim);
	font-size: var(--sz-small);
	padding: var(--sp-2) var(--sp-3);
}

.catwalk-grid tr td:first-child {
	color: var(--ink-front);
	font-weight: var(--wg-medium);
}

/* ── crest · author card (AUTH-05 Compact Inline) ──────────────────── */
.crest {
	display: block;
	padding-block: var(--sec-y);
}

.crest-wrap {
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
}

.crest-plate {
	background: var(--ink-layer);
	border-radius: var(--rad-4);
	color: var(--ink-front);
	display: flex;
	gap: var(--sp-3);
	max-width: 480px;
	padding: var(--sp-4);
}

.crest-photo {
	align-self: flex-start;
	border-radius: var(--rad-round-full);
	flex-shrink: 0;
	height: 56px;
	object-fit: cover;
	object-position: center top;
	width: 56px;
}

.crest-body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.crest-job {
	color: var(--ink-key);
	font-size: var(--sz-micro);
	letter-spacing: var(--trk-spread);
	text-transform: uppercase;
}

.crest-byname {
	color: var(--ink-front);
	font-size: var(--sz-body);
	font-weight: var(--wg-heavy);
}

.crest-bio {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--ink-dim);
	display: -webkit-box;
	font-size: var(--sz-small);
	overflow: hidden;
}

.crest-articles {
	margin-top: var(--sp-5);
}

.crest-top {
	color: var(--ink-front);
	font-size: var(--sz-sub-2);
	font-weight: var(--wg-heavy);
	margin-bottom: var(--sp-3);
}

.crest-set {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	list-style: none;
}

.crest-path {
	color: var(--ink-key);
	display: inline-block;
	padding-block: var(--sp-1);
}

.crest-path:hover {
	color: var(--ink-blend-a);
}

/* ── glyph · cookie banner (COOK-14 Two-Row Bar with Preferences) ──── */
.glyph {
	background: var(--ink-layer);
	border-top: var(--bd-mid) solid var(--ink-key);
	bottom: 0;
	color: var(--ink-front);
	display: none;
	inset-inline: 0;
	position: fixed;
	z-index: 90;
}

.glyph.is-open {
	display: block;
}

.glyph-shell {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding: var(--sp-4) var(--wrp-padding-desktop);
}

.glyph-say {
	color: var(--ink-dim);
	font-size: var(--sz-small);
	margin: 0;
}

.glyph-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.glyph-grant,
.glyph-dismiss {
	border: 0;
	border-radius: var(--rad-4);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--sz-small);
	font-weight: var(--wg-heavy);
	min-height: 40px;
	padding-inline: var(--sp-5);
	white-space: nowrap;
}

.glyph-grant {
	background: var(--ink-key);
	color: var(--ink-primary);
}

.glyph-grant:hover {
	background: var(--ink-key-active);
	color: var(--ink-primary);
}

.glyph-dismiss {
	background: var(--ink-canvas);
	border: var(--bd-hair) solid var(--ink-stroke-heavy);
	color: var(--ink-front);
}

.glyph-dismiss:hover {
	background: var(--ink-primary);
	color: var(--ink-front);
}

.glyph-prefs {
	align-items: center;
	background: var(--ink-layer);
	color: var(--ink-key);
	display: inline-flex;
	font-size: var(--sz-small);
	min-height: 40px;
	padding-inline: var(--sp-3);
	text-decoration: underline;
}

.glyph-prefs:hover {
	background: var(--ink-layer);
	color: var(--ink-blend-a);
}

/* ── keystone · header (HEAD-BANNER, static, 40px lower row) ───────── */
.keystone {
	background: var(--ink-primary);
	border-bottom: 0;
	color: var(--ink-front);
	position: relative;
	z-index: 40;
}

.keystone-shell {
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
}

.keystone-banner {
	align-items: center;
	display: flex;
	gap: var(--sp-4);
	justify-content: center;
	padding-block: var(--sp-4);
	position: relative;
}

.keystone-sign {
	display: block;
}

.keystone-plate {
	align-items: center;
	background: var(--ink-canvas);
	border: var(--bd-hair) solid var(--ink-edge);
	border-radius: var(--rad-4);
	color: var(--ink-front);
	display: inline-flex;
	padding: var(--sp-3) var(--sp-5);
}

.keystone-shot {
	height: 88px;
	width: auto;
}

.keystone-menu-opener {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--rad-3);
	color: var(--ink-front);
	cursor: pointer;
	display: none;
	height: 44px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
}

.keystone-lines {
	background: var(--ink-front);
	display: block;
	height: 2px;
	position: relative;
	width: 24px;
}

.keystone-lines::after {
	background: var(--ink-front);
	content: '';
	height: 2px;
	left: 0;
	position: absolute;
	top: 8px;
	width: 24px;
}

.keystone-bar {
	align-items: center;
	display: flex;
	gap: var(--sp-4);
	height: 40px;
	justify-content: center;
	position: relative;
}

.keystone-map {
	display: flex;
	flex: 0 0 auto;
	max-width: 100%;
}

.keystone-set {
	align-items: center;
	display: flex;
	gap: var(--sp-6);
	list-style: none;
}

.keystone-node {
	display: flex;
	flex: 0 0 auto;
	position: relative;
}

.keystone-node[hidden] {
	display: none;
}

.keystone-node + .keystone-node::before {
	color: var(--ink-stroke-heavy);
	content: '/';
	left: calc(-1 * var(--sp-5) / 2 - 3px);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.keystone-path {
	color: var(--ink-dim);
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--trk-spread);
	min-height: 32px;
	position: relative;
	text-transform: uppercase;
	transition: color var(--spd-quick) var(--crv-land);
	white-space: nowrap;
}

.keystone-path:hover {
	color: var(--ink-key);
}

.keystone-path[aria-current='page'] {
	color: var(--ink-front);
}

.keystone-path[aria-current='page']::before {
	background: var(--ink-key);
	content: '';
	height: 2px;
	inset-inline: 0;
	position: absolute;
	top: 0;
}

.keystone-nodeMore {
	display: flex;
	flex: 0 0 auto;
	position: relative;
}

.keystone-nodeMore[hidden] {
	display: none;
}

.keystone-more-opener {
	background: transparent;
	border: 0;
	color: var(--ink-dim);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--trk-spread);
	min-height: 32px;
	padding: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.keystone-more-opener:hover {
	color: var(--ink-key);
}

.keystone-more-menu {
	background: var(--ink-layer);
	border: var(--bd-hair) solid var(--ink-edge);
	border-radius: var(--rad-4);
	color: var(--ink-front);
	display: none;
	list-style: none;
	min-width: 200px;
	padding: var(--sp-3);
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 60;
}

.keystone-more-menu.is-open {
	display: block;
}

.keystone-more-menu .keystone-node {
	display: block;
}

.keystone-more-menu .keystone-node[hidden] {
	display: none;
}

.keystone-more-menu .keystone-node + .keystone-node::before {
	content: none;
}

.keystone-more-menu .keystone-path {
	display: flex;
	padding-block: var(--sp-2);
	white-space: normal;
}

.keystone-geo {
	background: var(--ink-canvas);
	border-radius: var(--rad-2);
	color: var(--ink-dim);
	font-size: var(--sz-micro);
	font-weight: var(--wg-heavy);
	letter-spacing: var(--trk-spread);
	padding: 2px var(--sp-2);
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.keystone-tray {
	background: var(--ink-primary);
	border-top: var(--bd-hair) solid var(--ink-edge);
	color: var(--ink-front);
	display: none;
	left: 0;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 70;
}

.keystone-tray.is-open {
	display: block;
}

.keystone-tray-map {
	display: block;
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding: var(--sp-3) var(--wrp-edge-narrow) var(--sp-5);
}

.keystone-tray-set {
	display: flex;
	flex-direction: column;
	list-style: none;
}

.keystone-tray-path {
	border-bottom: var(--bd-hair) solid var(--ink-edge);
	color: var(--ink-front);
	display: block;
	font-size: var(--sz-sm-2);
	font-weight: var(--wg-medium);
	letter-spacing: var(--trk-spread);
	padding-block: var(--sp-3);
	text-transform: uppercase;
}

.keystone-tray-path:hover {
	color: var(--ink-key);
}

/* ── landing · reviews (REV-07 Grid with Color-Coded Ratings) ──────── */
.landing {
	padding-block: var(--sec-y);
}

.landing-wrap {
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
}

.landing-set {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: var(--sp-5);
}

.landing-plate {
	background: var(--ink-layer);
	border-radius: var(--rad-4);
	color: var(--ink-front);
	padding: var(--sp-5);
}

.landing-plateHigh {
	background: #10303c;
	color: var(--ink-front);
}

.landing-plateMid {
	background: var(--ink-layer);
	color: var(--ink-front);
}

.landing-plateLow {
	background: var(--ink-primary);
	color: var(--ink-front);
}

.landing-gauge {
	align-items: baseline;
	display: flex;
	gap: var(--sp-3);
}

.landing-score {
	color: var(--ink-key);
	font-family: var(--fnt-heading);
	font-size: var(--sz-h2);
	font-weight: var(--wg-heavy);
	line-height: var(--lh-snug);
}

.landing-dots {
	color: var(--ink-key);
	font-size: var(--sz-small);
	letter-spacing: 2px;
}

.landing-say {
	border: 0;
	color: var(--ink-front);
	margin: var(--sp-3) 0 0;
}

.landing-say p {
	margin: 0;
}

.landing-info {
	color: var(--ink-dim);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--sz-small);
	gap: var(--sp-3);
	margin-top: var(--sp-4);
}

.landing-byname {
	color: var(--ink-front);
	font-weight: var(--wg-medium);
}

.landing-time {
	color: var(--ink-dim);
}

/* ── lobby · items grid (GRID-12 Side-by-Side Initial-Block) ───────── */
.lobby {
	padding-block: var(--sec-y);
}

.lobby-wrap {
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
}

.lobby-set {
	display: block;
	margin-top: var(--sp-5);
}

.lobby-item {
	border-bottom: var(--bd-hair) solid var(--ink-edge);
	display: flex;
	gap: var(--sp-5);
	padding: var(--sp-5) 0;
}

.lobby-initial {
	align-items: center;
	align-self: flex-start;
	aspect-ratio: 1 / 1;
	background: var(--ink-key);
	border-radius: var(--rad-4);
	color: var(--ink-primary);
	display: flex;
	flex-shrink: 0;
	font-family: var(--fnt-heading);
	font-size: var(--sz-xxl);
	font-weight: var(--wg-heavy);
	justify-content: center;
	line-height: var(--lh-snug);
	width: 120px;
}

.lobby-body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	min-width: 0;
}

.lobby-body h3 {
	font-size: var(--sz-sub-2);
	font-weight: var(--wg-heavy);
}

.lobby-words {
	color: var(--ink-dim);
	line-height: var(--lh-regular);
}

/* ── mosaic · legal section (LEGAL-05 Definition List Style) ───────── */
.mosaic {
	padding-block: var(--sec-y);
}

.mosaic-wrap {
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
}

.mosaic-intro {
	color: var(--ink-front);
	font-size: var(--sz-sm-2);
	line-height: var(--lh-roomy);
}

.mosaic-set {
	margin-top: var(--sp-5);
}

.mosaic-term {
	color: var(--ink-front);
	font-family: var(--fnt-heading);
	font-size: var(--sz-sub-2);
	font-weight: var(--wg-heavy);
	margin-block-end: var(--sp-2);
	margin-block-start: var(--sp-5);
	position: relative;
}

.mosaic-term::before {
	background: var(--ink-key);
	content: '';
	display: block;
	height: 2px;
	margin-bottom: var(--sp-2);
	width: 30px;
}

.mosaic-def {
	color: var(--ink-dim);
	font-size: var(--sz-body);
	line-height: var(--lh-roomy);
	margin-block-end: var(--sp-4);
	margin-inline-start: 0;
}

.mosaic-def p {
	margin-bottom: var(--sp-3);
}

.mosaic-support {
	background: var(--ink-layer);
	border-radius: var(--rad-4);
	color: var(--ink-front);
	margin-top: var(--sp-5);
	padding: var(--sp-5);
}

.mosaic-top {
	color: var(--ink-front);
	font-size: var(--sz-sub-2);
	font-weight: var(--wg-heavy);
	margin-bottom: var(--sp-3);
}

.mosaic-lines {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	list-style: none;
}

.mosaic-lines li {
	color: var(--ink-dim);
	font-size: var(--sz-small);
}

.mosaic-note {
	color: var(--ink-dim);
	font-size: var(--sz-small);
	margin-top: var(--sp-5);
}

/* ── pillar · author byline (BYLINE-07 Expertise Tags Block) ───────── */
.pillar {
	display: block;
	padding-block: var(--sec-y);
}

.pillar-wrap {
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
}

.pillar-plate {
	background: var(--ink-layer);
	border-radius: var(--rad-4);
	box-shadow: var(--elev-3);
	color: var(--ink-front);
	padding: var(--sp-5);
}

.pillar-top {
	display: flex;
	gap: var(--sp-3);
}

.pillar-photo {
	align-self: flex-start;
	border-radius: var(--rad-round-full);
	flex-shrink: 0;
	height: 72px;
	object-fit: cover;
	object-position: center top;
	width: 72px;
}

.pillar-ident {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	min-width: 0;
}

.pillar-byname {
	color: var(--ink-front);
	font-size: var(--sz-sub-2);
	font-family: var(--fnt-heading);
	font-weight: var(--wg-heavy);
}

.pillar-path {
	color: var(--ink-front);
}

.pillar-path:hover {
	color: var(--ink-key);
}

.pillar-job {
	color: var(--ink-dim);
	font-size: var(--sz-small);
	margin: 0;
}

.pillar-info {
	color: var(--ink-dim);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--sz-micro);
	gap: var(--sp-3);
}

.pillar-bio {
	color: var(--ink-dim);
	line-height: var(--lh-roomy);
	margin-top: var(--sp-4);
}

.pillar-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}

.pillar-chip {
	background: var(--ink-primary);
	border-radius: var(--rad-capsule);
	color: var(--ink-front);
	font-size: var(--sz-micro);
	letter-spacing: var(--trk-spread);
	padding: var(--sp-1) var(--sp-3);
	text-transform: uppercase;
}

.pillar-more {
	color: var(--ink-key);
	display: inline-block;
	margin-top: var(--sp-4);
	text-decoration: underline;
}

.pillar-more:hover {
	color: var(--ink-blend-a);
}

/* ── sconce · page header (PHEAD-07 Number + Title) ────────────────── */
.sconce {
	padding-block: var(--sec-y);
}

.sconce-wrap {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 120px minmax(0, 1fr);
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
}

.sconce-index {
	align-self: start;
	color: var(--ink-key);
	font-family: var(--fnt-heading);
	font-size: calc(var(--sz-xxl) * 1.4);
	font-weight: var(--wg-heavy);
	line-height: var(--lh-snug);
}

.sconce-part {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	min-width: 0;
}

.sconce-info {
	color: var(--ink-dim);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--sz-micro);
	gap: var(--sp-3);
}

/* ── trefoil · prose (PROSE-08 wide heading, indented text) ────────── */
.trefoil {
	padding-block: var(--sec-y);
}

.trefoil-wrap {
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	padding-inline: var(--wrp-padding-desktop);
}

.trefoil-wrap h2 {
	font-weight: 600;
	margin-block-end: var(--sp-4);
	margin-block-start: 0;
}

.trefoil-words {
	color: var(--ink-dim);
	line-height: var(--lh-regular);
	padding-inline-start: var(--sp-5);
}

.trefoil-words strong {
	color: var(--ink-front);
	font-weight: var(--wg-heavy);
}

.trefoil-words a {
	color: var(--ink-key);
	text-decoration: underline;
}

.trefoil-words a:hover {
	color: var(--ink-blend-a);
}

.trefoil-set {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
	padding-inline-start: var(--sp-5);
}

.trefoil-set li {
	color: var(--ink-dim);
}

.trefoil-deck {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
	padding-inline-start: var(--sp-5);
}

.trefoil-fineprint {
	color: var(--ink-dim);
	display: block;
	font-size: var(--sz-micro);
}

/* ── truss · hero (HERO-02 Split Photo Right) ──────────────────────── */
.truss {
	background: var(--ink-canvas);
	color: var(--ink-front);
	overflow: hidden;
}

.truss-wrap {
	align-items: center;
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	margin-inline: auto;
	max-width: calc(var(--wrp-outer) + 2 * var(--wrp-padding-desktop));
	min-height: 460px;
	padding-block: var(--sec-y);
	padding-inline: var(--wrp-padding-desktop);
}

.truss-words {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.truss-eyebrow {
	color: var(--ink-key);
	font-family: var(--fnt-text);
	font-size: var(--sz-small);
	font-weight: var(--wg-medium);
	letter-spacing: var(--trk-spread);
	margin-bottom: var(--sp-3);
	text-transform: uppercase;
}

.truss-tagline {
	color: var(--ink-dim);
	font-size: var(--sz-sm-2);
	line-height: var(--lh-regular);
	margin-top: var(--sp-4);
	max-width: var(--edge);
}

.truss-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin-top: var(--sp-5);
}

.truss-quiet {
	align-items: center;
	background: var(--ink-layer);
	border: var(--bd-hair) solid var(--ink-stroke-heavy);
	border-radius: var(--rad-4);
	color: var(--ink-front);
	display: inline-flex;
	font-weight: var(--wg-medium);
	letter-spacing: var(--trk-spread);
	min-height: 52px;
	padding-inline: var(--sp-5);
	transition: background var(--spd-quick) var(--crv-land), border-color var(--spd-quick) var(--crv-land);
}

.truss-quiet:hover {
	background: var(--ink-primary);
	border-color: var(--ink-front);
	color: var(--ink-front);
}

.truss-fineprint {
	color: var(--ink-dim);
	display: block;
	font-size: var(--sz-micro);
	margin-top: var(--sp-4);
	max-width: var(--edge);
}

.truss-figure {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--rad-5);
	box-shadow: var(--elev-5);
}

.truss-shot {
	aspect-ratio: 4 / 5;
	height: auto;
	max-height: clamp(360px, 46vh, 470px);
	object-fit: cover;
	transition: transform var(--spd-gentle) var(--crv-land);
	width: 100%;
}

.truss-figure:hover .truss-shot {
	transform: scale(1.045);
}

/* ── viewport steps (desktop-first, BP-01) ─────────────────────────── */
@media (max-width: 1200px) {
	.keystone-set {
		gap: var(--sp-5);
	}
}

@media (max-width: 1080px) {
	.advisory,
	.armoire-shell,
	.atrium-wrap,
	.barrow-wrap,
	.beacon-wrap,
	.brazier-wrap,
	.catwalk-wrap,
	.crest-wrap,
	.glyph-shell,
	.keystone-shell,
	.landing-wrap,
	.lobby-wrap,
	.mosaic-wrap,
	.pillar-wrap,
	.sconce-wrap,
	.trefoil-wrap,
	.truss-wrap {
		padding-inline: var(--wrp-padding-tablet);
	}

	.trefoil-words,
	.trefoil-deck {
		padding-inline-start: var(--sp-4);
	}

	.keystone-shot {
		height: 72px;
	}
}

@media (max-width: 899px) {
	.keystone-banner {
		justify-content: flex-start;
		padding-block: var(--sp-3);
	}

	.keystone-bar {
		display: none;
	}

	.keystone-menu-opener {
		display: flex;
	}

	.keystone-shot {
		height: 60px;
	}

	.atrium-wrap,
	.beacon-wrap,
	.sconce-wrap,
	.truss-wrap {
		grid-template-columns: minmax(0, 1fr);
	}

	.atrium-aside {
		position: static;
	}

	.armoire-shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.armoire-accent {
		padding: var(--sp-5);
	}

	.armoire-mark {
		transform: none;
		writing-mode: horizontal-tb;
	}

	.barrow-wrap {
		align-items: stretch;
		flex-direction: column;
	}

	.barrow-deck {
		width: 100%;
	}

	.landing-set {
		grid-template-columns: minmax(0, 1fr);
	}

	.sconce-index {
		font-size: var(--sz-h2);
	}

	.truss-wrap {
		min-height: 0;
	}

	.truss-figure {
		order: 2;
	}

	.truss-shot {
		aspect-ratio: 16 / 9;
		max-height: 300px;
	}
}

@media (max-width: 760px) {
	:root {
		--sz-xxl: 30px;
		--sz-h2: 24px;
		--sz-lg-2: 20px;
		--sz-sub-2: 18px;
		--sz-sm-2: 15px;
		--sz-h6: 13px;
		--sz-body: 15px;
		--sz-small: 13px;
		--sz-micro: 11px;
		--sec-y: 34px;
	}

	.advisory,
	.armoire-shell,
	.atrium-wrap,
	.barrow-wrap,
	.beacon-wrap,
	.brazier-wrap,
	.catwalk-wrap,
	.crest-wrap,
	.glyph-shell,
	.keystone-shell,
	.landing-wrap,
	.lobby-wrap,
	.mosaic-wrap,
	.pillar-wrap,
	.sconce-wrap,
	.trefoil-wrap,
	.truss-wrap {
		padding-inline: var(--wrp-edge-narrow);
	}

	.trefoil-words,
	.trefoil-deck {
		padding-inline-start: 0;
	}

	.lobby-item {
		flex-direction: column;
		gap: var(--sp-3);
	}

	.lobby-initial {
		font-size: var(--sz-h2);
		width: 80px;
	}

	.pillar-top {
		flex-direction: column;
	}

	.crest-plate {
		flex-direction: column;
	}

	.beacon-go {
		align-self: stretch;
	}
}

@media (max-width: 700px) {
	.glyph-shell {
		align-items: stretch;
		flex-direction: column;
		gap: var(--sp-2);
		height: auto;
		padding: 12px 14px;
	}

	.glyph-say {
		font-size: 13px;
		line-height: 1.35;
		overflow: visible;
		white-space: normal;
	}

	.glyph-actions {
		flex-direction: column;
		width: 100%;
	}

	.glyph-grant,
	.glyph-dismiss,
	.glyph-prefs {
		flex: 1 1 auto;
		font-size: 12px;
		justify-content: center;
		min-height: 38px;
		padding-inline: 14px;
		width: 100%;
	}

	.glyph-prefs {
		white-space: normal;
	}
}

@media (max-width: 430px) {
	.truss-actions {
		flex-direction: column;
	}

	.truss-quiet {
		justify-content: center;
	}

	.truss-cta {
		align-self: stretch;
	}

	.catwalk-grid {
		min-width: 420px;
	}
}

/* ── offer cta (scripts/cta-style.mjs, shine reworked to stay inside the box) ── */
.truss-cta,
.trefoil-cta,
.barrow-cta {
	align-self: flex-start;
	max-width: 100%;
}

@property --shine-bamw {
	syntax: '<percentage>';
	inherits: false;
	initial-value: -40%;
}

.bamw-act {
	align-items: center;
	background: #059669;
	border: 1px solid #131620;
	border-radius: 2px;
	box-shadow: 4px 4px 0 #131620;
	color: #131620;
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	isolation: isolate;
	justify-content: center;
	letter-spacing: 2.4px;
	min-height: 54px;
	overflow: hidden;
	padding: 0 30px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	transition: background .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease;
}

.bamw-act::after {
	animation: shine_bamw 2.7s ease-in-out infinite;
	background: linear-gradient(100deg, transparent calc(var(--shine-bamw) - 16%), rgba(255, 255, 255, .42) var(--shine-bamw), transparent calc(var(--shine-bamw) + 16%));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	transform: none;
	width: 100%;
}

.bamw-act:hover {
	background: #047857;
	box-shadow: 2px 2px 0 #131620;
	color: #FFFFFF;
	animation: none;
}

.bamw-act:hover::after {
	animation: none;
}

.bamw-act:active {
	background: #065F46;
	color: #FFFFFF;
}

.bamw-act:focus-visible {
	outline: 3px solid #131620;
	outline-offset: 3px;
}

@keyframes shine_bamw {
	0% {
		--shine-bamw: -40%;
	}

	55.556%,
	100% {
		--shine-bamw: 140%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bamw-act,
	.bamw-act::after {
		animation: none !important;
		transition: none !important;
	}
}

@media (max-width: 515px) {
  
  .keystone-map,
  .keystone-set,
  .keystone-path { display: none !important; }
  .keystone-more-opener { display: flex !important; }
}

.trefoil-page-figure {
	margin-block: var(--sp-3);
}

.trefoil-page-figure img {
	display: block;
	max-width: 100%;
	max-height: 56vh;
	width: auto;
	height: auto;
	margin-inline: auto;
}

.landing-page-figure {
	margin-block: var(--sp-3);
}

.landing-page-figure img {
	display: block;
	max-width: 100%;
	max-height: 56vh;
	width: auto;
	height: auto;
	margin-inline: auto;
}