/* ── perusarvot ─────────────────────────────────────────────────────── */
:root {
	--shade-anchor: #ffd65d;
	--shade-action: #7905ff;
	--shade-spot-deep: #7001dd;
	--shade-bg: #10061a;
	--shade-above: #1a0e2b;
	--shade-front: #FFFFFF;
	--shade-soft-text: #bfbfbf;
	--shade-edge: rgba(255, 255, 255, 0.12);
	--shade-border-strong: rgba(255, 255, 255, 0.26);
	--shade-gradient-light: #bc7aff;
	--shade-fade-bottom: #933aff;
	--shade-warn-band: #c1272d;
	--shade-warn-text: #ff8a8f;
	--shade-glass: rgba(255, 255, 255, 0.06);

	--step-hair: 4px;
	--step-tiny: 7px;
	--step-snug: 11px;
	--step-base: 17px;
	--step-wide: 26px;
	--step-roomy: 40px;
	--step-vast: 60px;
	--step-huge: 90px;

	--round-hair: 2px;
	--round-tiny: 2px;
	--round-snug: 8px;
	--round-base: 14px;
	--round-wide: 22px;
	--round-roomy: 28px;
	--round-vast: 34px;
	--round-huge: 40px;
	--round-lozenge: 9999px;
	--round-circle: 50%;

	--typeface-title: 'Tomorrow', 'Trebuchet MS', 'Segoe UI', sans-serif;
	--typeface-prose: Arial, 'Helvetica Neue', Helvetica, sans-serif;

	--scale-display-1: 44px;
	--scale-display-2: 34px;
	--scale-sub: 26px;
	--scale-display-4: 20px;
	--scale-minor: 16px;
	--scale-h6: 14px;
	--scale-reading: 16px;
	--scale-caption: 14px;
	--scale-mini: 12px;

	--line-compact: 1.2;
	--line-normal: 1.55;
	--line-open: 1.7;

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

	--ls-snug: -0.01em;
	--ls-default: 0;
	--ls-wide: 0.02em;

	--cast-hair: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
	--cast-tiny: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
	--cast-snug: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
	--cast-base: 0 8px 24px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
	--cast-wide: 0 16px 48px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	--cast-roomy: 0 20px 56px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	--cast-vast: 0 26px 70px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	--cast-huge: 0 32px 88px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;

	--rule-fine: 1px;
	--rule-medium: 2px;
	--rule-thick: 3px;

	--dur-fast: 152ms;
	--dur-base: 300ms;
	--dur-long: 522ms;
	--curve-settle: cubic-bezier(0.27, 0.78, 0.36, 0.98);
	--curve-enter: cubic-bezier(0.4, 0.07, 0.33, 0.9);
	--curve-both: cubic-bezier(0.4, 0.07, 0.33, 0.9);
	--curve-overshoot: cubic-bezier(0.38, 1.35, 0.67, 1.15);

	--canvas-max: 1100px;
	--canvas-inner: 1100px;
	--canvas-tight: 490px;
	--canvas-edge-wide: 32px;
	--canvas-inset-tablet: 20px;
	--canvas-inset-mobile: 12px;

	--masthead-h-lg: 76px;
	--masthead-short: 64px;
}

/* ── kirjasimet ─────────────────────────────────────────────────────── */
@font-face {
	font-display: swap;
	font-family: 'Tomorrow';
	font-style: normal;
	font-weight: 400;
	src: url('/type/tomorrow-400.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Tomorrow';
	font-style: normal;
	font-weight: 600;
	src: url('/type/tomorrow-600.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Tomorrow';
	font-style: normal;
	font-weight: 700;
	src: url('/type/tomorrow-700.woff2') format('woff2');
}

/* ── kapea näyttö: mitat ────────────────────────────────────────────── */
@media (max-width: 832px) {
	:root {
		--scale-display-1: 30px;
		--scale-display-2: 24px;
		--scale-sub: 20px;
		--scale-display-4: 18px;
		--scale-minor: 15px;
		--scale-h6: 13px;
		--scale-reading: 15px;
		--scale-caption: 13px;
		--scale-mini: 11px;
	}
}

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

html,
body {
	overflow-x: clip;
}

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

body {
	background: var(--shade-bg);
	color: var(--shade-front);
	font-family: var(--typeface-prose);
	font-size: var(--scale-reading);
	line-height: var(--line-normal);
	margin: 0;
	min-height: 100vh;
}

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

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

h1 {
	font-family: var(--typeface-title);
	font-size: var(--scale-display-1);
	font-weight: var(--fw-heavy);
	letter-spacing: var(--ls-snug);
	line-height: var(--line-compact);
}

h2 {
	font-family: var(--typeface-title);
	font-size: var(--scale-display-2);
	font-weight: var(--fw-heavy);
	letter-spacing: var(--ls-snug);
	line-height: var(--line-compact);
}

h3 {
	font-family: var(--typeface-prose);
	font-size: var(--scale-sub);
	font-weight: var(--fw-heavy);
	letter-spacing: var(--ls-default);
	line-height: var(--line-compact);
}

h4 {
	font-family: var(--typeface-prose);
	font-size: var(--scale-display-4);
	font-weight: var(--fw-medium);
	line-height: var(--line-compact);
}

p {
	margin: 0;
}

a {
	color: var(--shade-anchor);
	text-decoration-thickness: var(--rule-fine);
	text-underline-offset: 3px;
	transition: color var(--dur-fast) var(--curve-settle);
}

a:hover {
	color: var(--shade-gradient-light);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: var(--rule-medium) solid var(--shade-anchor);
	outline-offset: 3px;
}

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

ul,
ol {
	margin: 0;
}

main {
	display: block;
}

/* ── jaettu leveys ──────────────────────────────────────────────────── */
.hallway-inner,
.plinth-inner,
.pavilion-inner,
.finial-inner,
.veranda-inner,
.gangway-inner,
.arch-inner,
.spread-inner,
.vault-inner,
.brazier-inner,
.frame-inner,
.mantle-inner,
.alcove-inner {
	margin-inline: auto;
	max-width: calc(var(--canvas-max) + 2 * var(--canvas-edge-wide));
	padding-inline: var(--canvas-edge-wide);
	width: 100%;
}

@media (max-width: 1136px) {
	.hallway-inner,
	.plinth-inner,
	.pavilion-inner,
	.finial-inner,
	.veranda-inner,
	.gangway-inner,
	.arch-inner,
	.spread-inner,
	.vault-inner,
	.brazier-inner,
	.frame-inner,
	.mantle-inner,
	.alcove-inner {
		padding-inline: var(--canvas-inset-tablet);
	}
}

@media (max-width: 488px) {
	.hallway-inner,
	.plinth-inner,
	.pavilion-inner,
	.finial-inner,
	.veranda-inner,
	.gangway-inner,
	.arch-inner,
	.spread-inner,
	.vault-inner,
	.brazier-inner,
	.frame-inner,
	.mantle-inner,
	.alcove-inner {
		padding-inline: var(--canvas-inset-mobile);
	}
}

/* ── saavutettavuus ─────────────────────────────────────────────────── */
.skip-jump {
	background: var(--shade-anchor);
	border-radius: var(--round-snug);
	color: var(--shade-bg);
	font-weight: var(--fw-heavy);
	left: var(--step-base);
	padding: var(--step-snug) var(--step-base);
	position: absolute;
	top: var(--step-base);
	z-index: 200;
}

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

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

/* ── ilmestyminen ───────────────────────────────────────────────────── */
[data-onview] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity var(--dur-long) var(--curve-settle), transform var(--dur-long) var(--curve-settle);
}

[data-onview].is-shown {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		scroll-behavior: auto !important;
		transition: none !important;
	}

	[data-onview] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ── loft: saarekepalkki ────────────────────────────────────────────── */
.loft {
	padding-block: var(--step-snug);
	position: relative;
	z-index: 40;
}

.loft-hold {
	margin-inline: auto;
	max-width: 1320px;
	padding-inline: var(--canvas-edge-wide);
	width: 100%;
}

.loft-bar {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	background: var(--shade-above);
	border: var(--rule-fine) solid var(--shade-edge);
	border-radius: var(--round-wide);
	box-shadow: var(--cast-snug);
	display: flex;
	align-items: center;
	gap: var(--step-wide);
	height: 76px;
	padding: 0 var(--step-wide);
}

.loft-brand {
	align-items: center;
	background: var(--shade-glass);
	border-radius: var(--round-circle);
	display: inline-flex;
	flex-shrink: 0;
	padding: var(--step-hair) var(--step-snug);
}

.loft-art {
	flex-shrink: 0;
	height: 50px;
	width: auto;
}

.loft-menu-opener {
	align-items: center;
	background: var(--shade-glass);
	border: var(--rule-fine) solid var(--shade-edge);
	border-radius: var(--round-snug);
	color: var(--shade-front);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--typeface-title);
	font-size: 13px;
	font-variant-caps: small-caps;
	font-weight: 600;
	letter-spacing: var(--ls-wide);
	margin-left: auto;
	min-height: 44px;
	order: 3;
	padding: 0 var(--step-base);
	transition: background var(--dur-fast) var(--curve-settle);
}

.loft-menu-opener:hover {
	background: rgba(255, 255, 255, 0.14);
	color: var(--shade-front);
}

.loft-guide {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	order: 2;
}

.loft-roll {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--step-wide);
	list-style: none;
	margin: 0;
	padding: 0;
}

.loft-slot {
	flex: 0 0 auto;
	position: relative;
}

.loft-slot + .loft-slot::before {
	background: var(--shade-border-strong);
	content: '';
	height: 14px;
	left: calc(var(--step-wide) / -2);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--rule-fine);
}

.loft-step {
	color: var(--shade-front);
	display: inline-block;
	font-family: var(--typeface-title);
	font-size: 13px;
	font-variant-caps: small-caps;
	font-weight: 600;
	letter-spacing: var(--ls-wide);
	padding-block: var(--step-snug);
	text-decoration: none;
	white-space: nowrap;
}

.loft-step:hover {
	color: var(--shade-anchor);
}

body[data-current] .loft-step[aria-current='page'] {
	color: var(--shade-anchor);
	font-weight: 700;
}

.loft-more {
	flex: 0 0 auto;
	position: relative;
}

.loft-more-knob {
	background: none;
	border: 0;
	color: var(--shade-soft-text);
	cursor: pointer;
	font-family: var(--typeface-title);
	font-size: 13px;
	font-variant-caps: small-caps;
	font-weight: 600;
	letter-spacing: var(--ls-wide);
	min-height: 44px;
	padding: 0;
	white-space: nowrap;
}

.loft-more-knob:hover {
	color: var(--shade-anchor);
}

.loft-more-sheet {
	background: var(--shade-above);
	border: var(--rule-fine) solid var(--shade-edge);
	border-radius: var(--round-base);
	box-shadow: var(--cast-base);
	display: none;
	list-style: none;
	margin: 0;
	min-width: 240px;
	padding: var(--step-snug);
	position: absolute;
	right: 0;
	top: calc(100% + var(--step-tiny));
	z-index: 60;
}

.loft-more.is-open .loft-more-sheet {
	display: block;
}

.loft-more-sheet .loft-slot::before {
	content: none;
}

.loft-more-sheet .loft-step {
	display: block;
	padding: var(--step-tiny) var(--step-snug);
}

.loft-actions {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: var(--step-snug);
	margin-left: auto;
	order: 4;
}

.loft-tap {
	align-items: center;
	flex-shrink: 0;
	border-radius: var(--round-base);
	display: inline-flex;
	font-family: var(--typeface-title);
	font-size: 14px;
	font-weight: 600;
	justify-content: center;
	letter-spacing: var(--ls-wide);
	min-height: 44px;
	padding: 0 var(--step-base);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.loft-hush {
	background: transparent;
	border: var(--rule-fine) solid var(--shade-border-strong);
	color: var(--shade-front);
	transition: background var(--dur-fast) var(--curve-settle), color var(--dur-fast) var(--curve-settle);
}

.loft-hush:hover {
	background: var(--shade-front);
	color: var(--shade-bg);
}

.loft-panel {
	background: var(--shade-above);
	border: var(--rule-fine) solid var(--shade-edge);
	border-radius: var(--round-wide);
	display: none;
	margin-block-start: var(--step-snug);
	max-height: 70vh;
	overflow-y: auto;
	padding: var(--step-base);
}

.loft-panel.is-open {
	display: block;
}

.loft-pane-roll {
	display: flex;
	flex-direction: column;
	gap: var(--step-hair);
	list-style: none;
	margin: 0;
	padding: 0;
}

.loft-pane-step {
	color: var(--shade-front);
	display: block;
	font-family: var(--typeface-title);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: var(--ls-wide);
	min-height: 44px;
	line-height: 44px;
	padding-inline: var(--step-snug);
	text-decoration: none;
}

.loft-pane-step:hover,
.loft-pane-step[aria-current='page'] {
	color: var(--shade-anchor);
}

@media (min-width: 1025px) {
	.loft-menu-opener {
		display: none;
	}

	.loft-panel {
		display: none !important;
	}
}

@media (max-width: 1024px) {
	.loft-guide {
		display: none;
	}

	.loft-hush {
		display: none;
	}

	.loft-actions {
		margin-left: 0;
	}

	.loft-bar {
		gap: var(--step-snug);
	}

	.loft-actions {
		order: 4;
	}

	.loft-menu-opener {
		order: 2;
	}
}

@media (max-width: 832px) {
	.loft-bar {
		height: 64px;
		padding: 0 var(--step-snug);
	}

	.loft-art {
		height: 38px;
	}
}

@media (max-width: 488px) {
	.loft-bar {
		gap: var(--step-tiny);
		padding: 0 var(--step-tiny);
	}

	.loft-art {
		height: 30px;
	}

	.loft-brand {
		padding: 2px var(--step-tiny);
	}

	.loft-menu-opener {
		font-size: 11px;
		padding: 0 var(--step-tiny);
	}

	.loft-tap {
		font-size: 11px;
		padding: 0 var(--step-tiny);
	}
}

/* ── hallway: avaus ─────────────────────────────────────────────────── */
.hallway {
	padding-block: var(--step-roomy) var(--step-roomy);
}

.hallway-main {
	margin-inline: auto;
	max-width: 760px;
	text-align: center;
}

.hallway-deck {
	color: var(--shade-anchor);
	display: block;
	font-family: var(--typeface-prose);
	font-size: var(--scale-caption);
	font-style: italic;
	letter-spacing: var(--ls-wide);
	margin-block-end: var(--step-snug);
}

.hallway-main h1 {
	margin-block-end: var(--step-base);
}

.hallway-words {
	color: var(--shade-soft-text);
	font-size: var(--scale-minor);
	font-style: italic;
	line-height: var(--line-open);
	margin-inline: auto;
	max-width: 600px;
}

.hallway-sub {
	color: var(--shade-soft-text);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--scale-mini);
	gap: var(--step-tiny);
	justify-content: center;
	letter-spacing: var(--ls-wide);
	margin-block-start: var(--step-base);
}

.hallway-sub span + span::before,
.hallway-sub time + span::before,
.hallway-sub span + time::before {
	color: var(--shade-border-strong);
	content: '·';
	margin-inline-end: var(--step-tiny);
}

.hallway-figure {
	margin: var(--step-roomy) 0 0;
}

.hallway-art {
	aspect-ratio: 21 / 9;
	border-radius: var(--round-wide);
	height: auto;
	object-fit: cover;
	width: 100%;
}

.hallway-note {
	color: var(--shade-soft-text);
	font-size: var(--scale-mini);
	font-style: italic;
	padding-block-start: var(--step-tiny);
	text-align: center;
}

/* ── plinth: sivun otsikko ──────────────────────────────────────────── */
.plinth {
	padding-block: var(--step-roomy);
}

.plinth-banner {
	margin-block-end: var(--step-base);
}

.plinth-words {
	color: var(--shade-soft-text);
	font-family: var(--typeface-prose);
	font-size: var(--scale-minor);
	font-style: italic;
	max-width: 640px;
	position: relative;
	padding-block-start: var(--step-base);
}

.plinth-words::before {
	background: rgba(255, 255, 255, 0.2);
	content: '';
	height: 1px;
	left: 0;
	position: absolute;
	top: 0;
	width: 40px;
}

/* ── pavilion: leipäteksti ──────────────────────────────────────────── */
.pavilion {
	padding-block: var(--step-roomy);
}

.pavilion-main {
	margin-inline: auto;
	max-width: var(--canvas-inner);
}

.pavilion-banner {
	margin-block-end: var(--step-base);
}

.pavilion-words {
	border-left: var(--rule-medium) dashed var(--shade-action);
	color: var(--shade-front);
	line-height: var(--line-open);
	margin-block-end: var(--step-snug);
	padding-left: var(--step-base);
}

.pavilion.is-even .pavilion-words {
	border-left-color: var(--shade-anchor);
}

.pavilion-roll {
	border-left: var(--rule-medium) dashed var(--shade-action);
	color: var(--shade-front);
	line-height: var(--line-open);
	list-style-position: outside;
	margin-block-end: var(--step-snug);
	padding-left: calc(var(--step-base) + var(--step-wide));
}

.pavilion.is-even .pavilion-roll {
	border-left-color: var(--shade-anchor);
}

.pavilion-roll li {
	margin-block-end: var(--step-tiny);
}

.pavilion-words strong,
.pavilion-roll strong {
	color: var(--shade-anchor);
}

.pavilion-figure {
	margin: var(--step-wide) auto;
	max-width: 760px;
}

.pavilion-figure.is-tall {
	max-width: 340px;
}

.pavilion-figure.is-square {
	max-width: 460px;
}

.pavilion-art {
	border-radius: var(--round-base);
	height: auto;
	width: 100%;
}

.pavilion-note {
	color: var(--shade-soft-text);
	font-size: var(--scale-mini);
	font-style: italic;
	padding-block-start: var(--step-tiny);
	text-align: center;
}

/* ── finial: kohokohdat ─────────────────────────────────────────────── */
.finial {
	padding-block: var(--step-roomy);
}

.finial-banner {
	margin-block-end: var(--step-wide);
}

.finial-lead {
	background: var(--shade-anchor);
	border-radius: var(--round-wide);
	color: var(--shade-bg);
	margin-block-end: var(--step-roomy);
	padding: var(--step-roomy) var(--step-wide);
}

.finial-lead-banner {
	color: var(--shade-bg);
	font-family: var(--typeface-title);
	font-size: var(--scale-display-2);
	font-weight: var(--fw-heavy);
	line-height: var(--line-compact);
	margin-block-end: var(--step-snug);
}

.finial-lead-words {
	color: var(--shade-bg);
	font-size: var(--scale-minor);
	line-height: var(--line-normal);
	max-width: var(--canvas-tight);
}

.finial-roll {
	display: grid;
	gap: var(--step-wide);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.finial-tile {
	border-top: var(--rule-medium) solid var(--shade-action);
	padding: var(--step-base) 0 0;
}

.finial-mark {
	align-items: center;
	color: var(--shade-anchor);
	display: inline-flex;
	height: 22px;
	margin-block-end: var(--step-tiny);
	width: 22px;
}

.finial-mark svg {
	fill: currentColor;
	height: 100%;
	width: 100%;
}

.finial-tile-banner {
	font-family: var(--typeface-prose);
	font-size: var(--scale-reading);
	font-weight: var(--fw-heavy);
	margin-block-end: var(--step-tiny);
}

.finial-tile-words {
	color: var(--shade-soft-text);
	font-size: var(--scale-caption);
	line-height: var(--line-normal);
}

.finial-cell {
	background: var(--shade-above);
	border: var(--rule-fine) solid var(--shade-edge);
	border-radius: var(--round-base);
	border-top: var(--rule-medium) solid var(--shade-anchor);
	padding: var(--step-base);
	text-align: center;
}

@media (max-width: 832px) {
	.finial-roll {
		grid-template-columns: minmax(0, 1fr);
	}

	.finial-lead {
		padding: var(--step-wide) var(--step-base);
	}
}

/* ── veranda: taulukko ──────────────────────────────────────────────── */
.veranda {
	padding-block: var(--step-roomy);
}

.veranda-note {
	color: var(--shade-soft-text);
	font-family: var(--typeface-title);
	font-size: var(--scale-display-4);
	font-style: italic;
	margin-inline: auto;
	padding-block-end: var(--step-base);
	position: relative;
	text-align: center;
	width: fit-content;
}

.veranda-note::before {
	background: var(--shade-action);
	content: '';
	height: 2px;
	left: 50%;
	position: absolute;
	top: calc(var(--step-snug) * -1);
	transform: translateX(-50%);
	width: 40px;
}

.veranda-scroll {
	overflow-x: auto;
}

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

.veranda-grid th,
.veranda-grid td {
	border-bottom: var(--rule-fine) solid var(--shade-edge);
	hyphens: none;
	overflow-wrap: break-word;
	padding: var(--step-snug) var(--step-base);
	text-align: left;
	word-break: normal;
}

.veranda-grid thead th {
	color: var(--shade-anchor);
	font-family: var(--typeface-title);
	font-size: var(--scale-caption);
	font-weight: var(--fw-heavy);
	letter-spacing: var(--ls-wide);
}

.veranda-grid tbody td {
	color: var(--shade-soft-text);
	font-size: var(--scale-caption);
}

.veranda-grid tbody td:first-child {
	color: var(--shade-front);
}

/* ── gangway: pelaajien äänet ───────────────────────────────────────── */
.gangway {
	padding-block: var(--step-roomy);
}

.gangway-banner {
	margin-block-end: var(--step-wide);
	text-align: center;
}

.gangway-roll {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gangway-slot {
	padding-block: var(--step-roomy);
	text-align: center;
}

.gangway-quote {
	margin: 0;
}

.gangway-words {
	color: var(--shade-front);
	font-family: var(--typeface-title);
	font-size: var(--scale-sub);
	font-style: italic;
	line-height: var(--line-compact);
	margin-inline: auto;
	max-width: var(--canvas-tight);
}

.gangway-sub {
	align-items: center;
	color: var(--shade-soft-text);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--scale-caption);
	gap: var(--step-tiny);
	justify-content: center;
	letter-spacing: var(--ls-wide);
	margin-block-start: var(--step-base);
	text-transform: uppercase;
}

.gangway-author {
	color: var(--shade-front);
}

.gangway-score {
	color: var(--shade-anchor);
	white-space: nowrap;
}

.gangway-rule {
	background: var(--shade-border-strong);
	border: 0;
	height: 1px;
	margin-inline: auto;
	width: 80px;
}

/* ── arch: kysymykset ───────────────────────────────────────────────── */
.arch {
	padding-block: var(--step-roomy);
}

.arch-grid {
	display: grid;
	gap: var(--step-roomy);
	grid-template-columns: 40% minmax(0, 1fr);
}

.arch-strip {
	align-self: start;
	background: var(--shade-above);
	border: var(--rule-fine) solid var(--shade-edge);
	border-radius: var(--round-base);
	padding: var(--step-wide);
	position: sticky;
	top: var(--step-roomy);
}

.arch-strip .arch-banner {
	margin-block-end: var(--step-snug);
}

.arch-words {
	color: var(--shade-soft-text);
	font-size: var(--scale-caption);
	line-height: var(--line-normal);
}

.arch-roll {
	display: flex;
	flex-direction: column;
	gap: var(--step-roomy);
	list-style: none;
	margin: 0;
	padding: 0;
}

.arch-slot {
	border-bottom: var(--rule-fine) solid var(--shade-edge);
	padding-block-end: var(--step-base);
}

.arch-head {
	cursor: pointer;
	list-style: none;
}

.arch-head::-webkit-details-marker {
	display: none;
}

.arch-slot .arch-banner {
	align-items: baseline;
	display: grid;
	font-family: var(--typeface-prose);
	font-size: var(--scale-display-4);
	font-weight: var(--fw-heavy);
	gap: var(--step-snug);
	grid-template-columns: minmax(0, 1fr) auto;
	margin-block-end: var(--step-snug);
}

.arch-sign {
	display: inline-block;
	font-size: 0;
	height: 18px;
	position: relative;
	top: 4px;
	width: 18px;
}

.arch-sign::before,
.arch-sign::after {
	background: var(--shade-anchor);
	content: '';
	position: absolute;
	transition: opacity var(--dur-base) var(--curve-settle), transform var(--dur-base) var(--curve-settle);
}

.arch-sign::before {
	height: 2px;
	left: 0;
	right: 0;
	top: 8px;
}

.arch-sign::after {
	bottom: 0;
	left: 8px;
	top: 0;
	width: 2px;
}

.arch-slot[open] .arch-sign::after {
	opacity: 0;
	transform: rotate(90deg);
}

.arch-main {
	color: var(--shade-soft-text);
	line-height: var(--line-open);
}

@media (max-width: 1136px) {
	.arch-grid {
		gap: var(--step-wide);
		grid-template-columns: minmax(0, 1fr);
	}

	.arch-strip {
		position: static;
	}
}

/* ── spread: kehotus ────────────────────────────────────────────────── */
.spread {
	padding-block: var(--step-roomy);
}

.spread-grid {
	border: var(--rule-fine) solid var(--shade-edge);
	border-radius: var(--round-wide);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	overflow: hidden;
}

.spread-main {
	background: var(--shade-bg);
	padding: var(--step-roomy) var(--step-wide);
}

.spread-banner {
	margin-block-end: var(--step-base);
}

.spread-words {
	color: var(--shade-soft-text);
	line-height: var(--line-open);
	margin-block-end: var(--step-wide);
	max-width: var(--canvas-tight);
}

.spread-facet {
	background-color: var(--shade-anchor);
	background-image: radial-gradient(circle at 30% 30%, rgba(121, 5, 255, 0.55) 0 12%, transparent 12.5%), radial-gradient(circle at 70% 65%, rgba(16, 6, 26, 0.45) 0 18%, transparent 18.5%), repeating-linear-gradient(135deg, rgba(16, 6, 26, 0.16) 0 12px, transparent 12px 26px);
	min-height: 400px;
}

@media (max-width: 832px) {
	.spread-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.spread-facet {
		min-height: 200px;
	}

	.spread-main {
		padding: var(--step-wide) var(--step-base);
	}
}

/* ── deck: väliin sijoitettu kehotus ────────────────────────────────── */
.deck {
	display: block;
	margin-block: var(--step-wide);
}

.deck-tile {
	background: var(--shade-above);
	border: var(--rule-fine) solid rgba(255, 255, 255, 0.1);
	border-radius: var(--round-base);
	margin-inline: auto;
	max-width: 600px;
	padding: var(--step-wide);
	text-align: center;
}

.deck-banner {
	font-family: var(--typeface-title);
	font-size: var(--scale-display-4);
	font-weight: var(--fw-heavy);
	margin-block-end: var(--step-tiny);
}

.deck-words {
	color: var(--shade-soft-text);
	font-size: var(--scale-reading);
	margin-block-end: var(--step-base);
}

/* ── vault: juridiset osiot ─────────────────────────────────────────── */
.vault {
	padding-block: var(--step-roomy);
}

.vault-words {
	color: var(--shade-soft-text);
	line-height: var(--line-open);
	margin-block-end: var(--step-wide);
	max-width: var(--canvas-inner);
}

.vault-sub {
	color: var(--shade-soft-text);
	font-size: var(--scale-caption);
	letter-spacing: var(--ls-wide);
	margin-block-end: var(--step-base);
}

.vault-roll {
	margin: 0;
	max-width: var(--canvas-inner);
}

.vault-term {
	color: var(--shade-front);
	font-family: var(--typeface-title);
	font-size: var(--scale-display-4);
	font-weight: var(--fw-heavy);
	margin-block: var(--step-wide) var(--step-tiny);
	padding-block-start: var(--step-snug);
	position: relative;
}

.vault-term::before {
	background: var(--shade-action);
	content: '';
	height: 2px;
	left: 0;
	position: absolute;
	top: 0;
	width: 30px;
}

.vault-main {
	color: var(--shade-soft-text);
	line-height: var(--line-open);
	margin-block-end: var(--step-base);
	margin-inline-start: 0;
}

.vault-main p {
	margin-block-end: var(--step-snug);
}

.vault-note {
	border-top: var(--rule-fine) solid var(--shade-edge);
	color: var(--shade-soft-text);
	font-size: var(--scale-caption);
	margin-block-start: var(--step-wide);
	padding-block-start: var(--step-base);
}

/* ── brazier: yhteydenotto ──────────────────────────────────────────── */
.brazier {
	padding-block: var(--step-roomy);
}

.brazier-banner {
	margin-block-end: var(--step-base);
}

.brazier-words {
	color: var(--shade-soft-text);
	line-height: var(--line-open);
	margin-block-end: var(--step-wide);
	max-width: var(--canvas-inner);
}

.brazier-form {
	display: flex;
	flex-direction: column;
	gap: var(--step-base);
	max-width: 620px;
}

.brazier-field {
	position: relative;
}

.brazier-input,
.brazier-area {
	background: var(--shade-above);
	border: var(--rule-fine) solid var(--shade-edge);
	border-radius: var(--round-snug);
	color: var(--shade-front);
	font-family: var(--typeface-prose);
	font-size: var(--scale-reading);
	padding: var(--step-wide) var(--step-base) var(--step-snug);
	width: 100%;
}

.brazier-area {
	min-height: 140px;
	resize: vertical;
}

.brazier-note {
	color: var(--shade-soft-text);
	font-size: var(--scale-caption);
	left: var(--step-base);
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: top var(--dur-fast) var(--curve-settle), font-size var(--dur-fast) var(--curve-settle);
}

.brazier-area + .brazier-note {
	top: var(--step-wide);
}

.brazier-input:focus + .brazier-note,
.brazier-input:not(:placeholder-shown) + .brazier-note,
.brazier-area:focus + .brazier-note,
.brazier-area:not(:placeholder-shown) + .brazier-note {
	color: var(--shade-anchor);
	font-size: var(--scale-mini);
	top: var(--step-tiny);
	transform: translateY(0);
}

.brazier-tap {
	align-self: flex-start;
	background: var(--shade-action);
	border: 0;
	border-radius: var(--round-base);
	color: var(--shade-front);
	cursor: pointer;
	font-family: var(--typeface-title);
	font-size: var(--scale-minor);
	font-weight: var(--fw-heavy);
	letter-spacing: var(--ls-wide);
	min-height: 48px;
	padding: 0 var(--step-wide);
	transition: background var(--dur-fast) var(--curve-settle);
}

.brazier-tap:hover {
	background: var(--shade-spot-deep);
	color: var(--shade-front);
}

.brazier-blurb {
	background: var(--shade-above);
	border: var(--rule-fine) solid var(--shade-anchor);
	border-radius: var(--round-base);
	color: var(--shade-front);
	display: none;
	margin-block-start: var(--step-base);
	padding: var(--step-base);
}

.brazier-blurb.is-shown {
	display: block;
	opacity: 1;
	transform: none;
}

/* ── frame: kirjoittajan kortti ─────────────────────────────────────── */
.frame {
	padding-block: var(--step-roomy);
}

.frame-tile {
	margin-inline: auto;
	max-width: 600px;
	text-align: center;
}

.frame-pic {
	border-radius: var(--round-circle);
	height: 140px;
	margin: 0 auto var(--step-wide);
	object-fit: cover;
	width: 140px;
}

.frame-hat {
	color: var(--shade-anchor);
	font-size: var(--scale-caption);
	letter-spacing: var(--ls-wide);
	margin-block-end: var(--step-snug);
	text-transform: uppercase;
}

.frame-words {
	color: var(--shade-soft-text);
	line-height: var(--line-open);
	margin-block-end: var(--step-base);
}

.frame-roll {
	display: flex;
	flex-wrap: wrap;
	gap: var(--step-tiny);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.frame-slot {
	background: var(--shade-above);
	border: var(--rule-fine) solid var(--shade-edge);
	border-radius: var(--round-lozenge);
	color: var(--shade-front);
	font-size: var(--scale-mini);
	padding: var(--step-tiny) var(--step-snug);
}

.frame-banner {
	font-family: var(--typeface-title);
	font-size: var(--scale-display-4);
	margin-block: var(--step-wide) var(--step-snug);
}

.frame-file {
	color: var(--shade-soft-text);
	font-size: var(--scale-caption);
	list-style: none;
	margin: 0;
	padding: 0;
}

.frame-file li {
	border-top: var(--rule-fine) solid var(--shade-edge);
	padding-block: var(--step-tiny);
}

/* ── arabesque: kirjoittajan allekirjoitus ──────────────────────────── */
.arabesque {
	display: block;
	margin-inline: auto;
	max-width: 600px;
	padding-block: var(--step-roomy);
}

.arabesque-main {
	border: 0;
	margin: 0;
	position: relative;
	text-align: center;
}

.arabesque-main::before {
	color: var(--shade-anchor);
	content: '\201C';
	display: block;
	font-family: var(--typeface-title);
	font-size: var(--scale-display-1);
	line-height: 1;
}

.arabesque-words {
	color: var(--shade-front);
	font-family: var(--typeface-title);
	font-size: var(--scale-display-4);
	font-style: italic;
	line-height: var(--line-normal);
}

.arabesque-sub {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--step-tiny);
	justify-content: center;
	margin-block-start: var(--step-base);
}

.arabesque-pic {
	border-radius: var(--round-circle);
	height: 32px;
	object-fit: cover;
	width: 32px;
}

.arabesque-author {
	font-style: normal;
	font-weight: var(--fw-heavy);
}

.arabesque-author a {
	color: var(--shade-anchor);
}

.arabesque-hat {
	color: var(--shade-soft-text);
	font-size: var(--scale-caption);
	font-style: italic;
}

.arabesque-date {
	color: var(--shade-soft-text);
	font-size: var(--scale-mini);
	letter-spacing: var(--ls-wide);
	display: block;
	margin-block-start: var(--step-tiny);
	text-align: center;
	width: 100%;
}

/* ── mantle: virhesivu ──────────────────────────────────────────────── */
.mantle {
	padding-block: var(--step-huge);
	text-align: center;
}

.mantle-box {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--step-wide);
}

.mantle-numeral {
	color: var(--shade-action);
	font-family: var(--typeface-title);
	font-size: clamp(80px, 18vw, 200px);
	font-weight: var(--fw-heavy);
	line-height: var(--line-compact);
}

.mantle-banner {
	max-width: var(--canvas-tight);
}

.mantle-words {
	color: var(--shade-soft-text);
	font-size: var(--scale-minor);
	line-height: var(--line-normal);
	max-width: 600px;
}

.mantle-tap {
	align-items: center;
	background: var(--shade-action);
	border-radius: var(--round-base);
	color: var(--shade-front);
	display: inline-flex;
	font-family: var(--typeface-title);
	font-weight: var(--fw-heavy);
	letter-spacing: var(--ls-wide);
	min-height: 52px;
	padding: 0 var(--step-roomy);
	text-decoration: none;
	transition: background var(--dur-fast) var(--curve-settle);
}

.mantle-tap:hover {
	background: var(--shade-spot-deep);
	color: var(--shade-front);
}

/* ── slab: evästeet ─────────────────────────────────────────────────── */
.slab {
	bottom: var(--step-base);
	display: none;
	max-width: 360px;
	opacity: 0;
	position: fixed;
	right: var(--step-base);
	visibility: hidden;
	width: 360px;
	z-index: 90;
}

.slab.is-open {
	display: block;
	opacity: 1;
	visibility: visible;
}

.slab.is-open .slab-main {
	animation: slab-wipe var(--dur-long) var(--curve-settle) both;
}

@keyframes slab-wipe {
	from {
		clip-path: inset(0 0 0 100%);
		opacity: 0;
	}

	to {
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}
}

.slab-main {
	background: var(--shade-above);
	border: var(--rule-fine) solid rgba(255, 255, 255, 0.1);
	border-radius: var(--round-wide);
	box-shadow: var(--cast-wide);
	display: flex;
	flex-direction: column;
	gap: var(--step-base);
	padding: var(--step-wide);
}

.slab-banner {
	color: var(--shade-anchor);
	font-family: var(--typeface-title);
	font-size: var(--scale-minor);
	font-weight: var(--fw-heavy);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.slab-blurb {
	color: var(--shade-soft-text);
	font-size: var(--scale-caption);
	line-height: var(--line-normal);
}

.slab-actions {
	display: flex;
	gap: var(--step-snug);
}

.slab-agree,
.slab-later {
	border-radius: var(--round-snug);
	cursor: pointer;
	flex: 1 1 50%;
	font-family: var(--typeface-title);
	font-size: var(--scale-caption);
	font-weight: var(--fw-heavy);
	min-height: 44px;
	padding: 0 var(--step-snug);
	transition: background var(--dur-fast) var(--curve-settle), color var(--dur-fast) var(--curve-settle);
}

.slab-agree {
	background: var(--shade-anchor);
	border: 0;
	color: var(--shade-bg);
}

.slab-agree:hover {
	background: var(--shade-front);
	color: var(--shade-bg);
}

.slab-later {
	background: transparent;
	border: var(--rule-fine) solid var(--shade-border-strong);
	color: var(--shade-front);
}

.slab-later:hover {
	background: var(--shade-front);
	color: var(--shade-bg);
}

@media (max-width: 720px) {
	.slab {
		left: var(--step-base);
		right: var(--step-base);
		width: auto;
		max-width: none;
	}

	.slab-main {
		font-size: 13px;
		gap: 8px;
		line-height: 1.35;
		padding: 12px 14px;
	}

	.slab-banner {
		display: none;
	}

	.slab-agree,
	.slab-later {
		font-size: 12px;
		min-height: 36px;
		padding: 8px 14px;
	}
}

/* ── alcove: alatunniste ────────────────────────────────────────────── */
.alcove {
	background: var(--shade-bg);
	border-top: var(--rule-fine) solid var(--shade-edge);
	padding-block: var(--step-vast);
}

.alcove-inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--step-wide);
	text-align: center;
}

.alcove-warn {
	align-items: center;
	border-bottom: var(--rule-fine) solid var(--shade-edge);
	color: var(--shade-warn-text);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--scale-caption);
	gap: var(--step-tiny);
	justify-content: center;
	letter-spacing: var(--ls-wide);
	padding-block-end: var(--step-base);
	width: 100%;
}

.alcove-mark {
	background: var(--shade-warn-band);
	border-radius: var(--round-snug);
	color: var(--shade-front);
	font-family: var(--typeface-title);
	font-weight: var(--fw-heavy);
	padding: 2px var(--step-tiny);
}

.alcove-warn a {
	color: var(--shade-warn-text);
}

.alcove-warn a:hover {
	color: var(--shade-front);
}

.alcove-brand {
	display: inline-flex;
}

.alcove-art {
	height: 68px;
	width: auto;
}

.alcove-guide {
	width: 100%;
}

.alcove-roll {
	display: flex;
	flex-wrap: wrap;
	gap: var(--step-wide);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.alcove-step {
	color: var(--shade-front);
	font-family: var(--typeface-title);
	font-size: var(--scale-reading);
	font-weight: var(--fw-medium);
	text-decoration: none;
}

.alcove-step:hover {
	color: var(--shade-anchor);
}

.alcove-words {
	color: var(--shade-soft-text);
	font-size: var(--scale-caption);
	line-height: var(--line-open);
	max-width: 480px;
}

.alcove-file {
	display: flex;
	flex-wrap: wrap;
	gap: var(--step-snug);
	justify-content: center;
}

.alcove-file a {
	color: var(--shade-soft-text);
	font-size: var(--scale-mini);
	letter-spacing: var(--ls-wide);
	text-decoration: none;
	text-transform: uppercase;
}

.alcove-file a:hover {
	color: var(--shade-anchor);
}

.alcove-file a + a::before {
	color: var(--shade-border-strong);
	content: '·';
	margin-inline-end: var(--step-snug);
}

.alcove-sub {
	color: var(--shade-soft-text);
	font-size: var(--scale-mini);
}

@media (max-width: 832px) {
	.alcove {
		padding-block: var(--step-roomy);
	}

	.alcove-art {
		height: 52px;
	}
}
.joist-act{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--step-roomy);min-height:52px;border-radius:var(--round-base);font-weight:var(--fw-heavy);letter-spacing:var(--ls-wide)}
.joist-act{position:relative;
  background:#16A34A;color:#10061A;text-decoration:none;
  transition:background 0.1s linear,transform 0.1s linear;}
.joist-act.joist-act{color:#10061A;text-decoration:none;}
.joist-act:hover{background:#15803D;color:#FFFFFF;animation:none}
.joist-act.joist-act:hover{color:#FFFFFF;text-decoration:none}
.joist-act:hover::after{animation:none}
.joist-act:active{background:#166534;color:#FFFFFF}
.joist-act:focus-visible{outline:3px solid #10061A;outline-offset:3px}
.joist-act{overflow:hidden}
.joist-act::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%);background-repeat:no-repeat;background-size:45% 100%;background-position:-60% 0;animation:joist-drift 2.15s ease-in-out infinite}
@keyframes joist-drift{0%{background-position:-60% 0}39.535%,100%{background-position:160% 0}}
@media (prefers-reduced-motion:reduce){.joist-act,.joist-act::after{animation:none!important;transition:none!important}}

/* ── tarjouspainikkeen mitat omassa ympäristössä ────────────────────── */
.loft-actions .joist-act {
	font-size: 14px;
	min-height: 46px;
	padding: 0 var(--step-base);
}

.deck-fine {
	color: var(--shade-soft-text);
	font-size: var(--scale-mini);
	letter-spacing: var(--ls-wide);
	margin-block-start: var(--step-snug);
}

.spread-main .deck-fine {
	text-align: left;
}

@media (max-width: 488px) {
	.loft-actions .joist-act {
		font-size: 11px;
		padding: 0 var(--step-snug);
	}
}


/* ── puuttuvat pikkuosat ────────────────────────────────────────────── */
.loft-pane-slot {
	display: block;
}

.alcove-slot {
	display: inline-flex;
}

.deck-tap {
	max-width: 100%;
	text-decoration: none;
}

.veranda-file {
	vertical-align: top;
}

.veranda-strip {
	vertical-align: top;
}

.gangway-date {
	color: var(--shade-soft-text);
}

@media (max-width: 488px) {
	.loft-bar {
		flex-wrap: wrap;
		height: auto;
		padding-block: var(--step-tiny);
	}

	.loft-actions {
		flex-basis: 100%;
		margin-left: 0;
	}

	.loft-actions .joist-act {
		width: 100%;
	}

	.joist-act {
		font-size: 13px;
		padding-inline: var(--step-base);
	}

	.deck-tap {
		width: 100%;
	}
}

/* ── tarjouspainike: kiilto ei saa venyttää vieritysaluetta ─────────── */
.joist-act {
	overflow: clip;
}

@media (max-width: 1024px) {
	.loft-hold {
		padding-inline: var(--canvas-inset-tablet);
	}
}

@media (max-width: 488px) {
	.loft-hold {
		padding-inline: var(--canvas-inset-mobile);
	}
}

.gangway-slot .deck {
	margin-block: 0;
}

@media (max-width: 1041px) {
  .loft-guide,
  .loft-roll,
  .loft-step { display: none !important; }
  .loft-menu-opener { display: flex !important; }
}