/* ============ typefaces ============ */
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/panel/outfit-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/panel/outfit-latin-700-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/panel/oswald-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/panel/oswald-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/panel/oswald-latin-700-normal.woff2') format('woff2');
}

/* ============ tokens ============ */
:root {
	--base: #ff7806;
	--flare: #fdf152;
	--spot-deep: #fde629;
	--surface: #181829;
	--bg-elevated: #21213a;
	--copy: #ffffff;
	--text-muted: #c0c0c0;
	--line: #33334d;
	--border-strong: #4a4a68;
	--gradient-light: #fef8c7;
	--grad-2: #ffec79;
	--age-band: #d00000;
	--ink: #12121f;
	--star-off: #8a8aa8;

	--s-hair: 8px;
	--s-tiny: 12px;
	--s-snug: 16px;
	--s-base: 24px;
	--s-wide: 32px;
	--s-roomy: 48px;
	--s-vast: 72px;
	--s-huge: 112px;

	--r-tiny: 0;
	--r-snug: 4px;
	--r-base: 6px;
	--r-wide: 10px;
	--pill: 9999px;
	--dot: 50%;

	--display: 'Outfit', 'Trebuchet MS', sans-serif;
	--f-base: 'Oswald', 'Arial Narrow', Arial, sans-serif;

	--xxl: 30px;
	--xl-2: 24px;
	--lg-2: 20px;
	--display-4: 18px;
	--sm-2: 15px;
	--micro-head: 13px;
	--body: 15px;
	--small: 13px;
	--tiny: 11px;

	--compact: 1.2;
	--even: 1.55;
	--loose: 1.7;

	--normal: 400;
	--demi: 500;
	--bold: 700;

	--close: -0.01em;
	--e-normal: 0;
	--wide: 0.02em;

	--d-snug: none;
	--d-base: 0 0 0 1px rgba(0, 0, 0, 0.06);
	--d-wide: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.1);

	--swift: 124ms;
	--mid: 210ms;
	--calm: 428ms;

	--land: cubic-bezier(0.22, 0.74, 0.42, 0.99);
	--enter: cubic-bezier(0.38, 0.1, 0.45, 0.99);
	--both: cubic-bezier(0.38, 0.1, 0.45, 0.99);
	--elastic: cubic-bezier(0.45, 1.1, 0.52, 1);

	--max: 1220px;
	--inner: 1220px;
	--short: 500px;
	--edge-wide: 64px;
	--padding-tablet: 32px;
	--edge-narrow: 20px;

	--slim: 1px;
	--medium: 4px;
	--b-bold: 6px;

	--size-desktop: 72px;
	--size-mobile: 64px;
	--head-h: var(--size-mobile);
	--sec-y: 34px;
	--rg-h: 34px;
}

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

html,
body {
	overflow-x: clip;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--head-h) + var(--s-snug));
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--surface);
	color: var(--copy);
	font-family: var(--f-base);
	font-size: var(--body);
	font-weight: var(--normal);
	line-height: var(--even);
	letter-spacing: var(--e-normal);
}

.mainframe {
	display: block;
	min-height: 40vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
	margin: 0;
	color: var(--copy);
}

h1 {
	font-family: var(--display);
	font-size: var(--xxl);
	font-weight: var(--bold);
	letter-spacing: var(--close);
	line-height: var(--compact);
}

h2 {
	font-family: var(--display);
	font-size: var(--xl-2);
	font-weight: var(--bold);
	letter-spacing: var(--close);
	line-height: var(--compact);
}

h3 {
	font-family: var(--f-base);
	font-size: var(--lg-2);
	font-weight: var(--bold);
	letter-spacing: var(--e-normal);
	line-height: var(--compact);
}

h4 {
	font-family: var(--f-base);
	font-size: var(--display-4);
	font-weight: var(--demi);
	line-height: var(--compact);
}

p {
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
}

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

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

table {
	border-collapse: collapse;
}

button {
	font-family: inherit;
	font-size: inherit;
}

/* ============ a11y ============ */
.skip-hop {
	position: absolute;
	left: var(--s-snug);
	top: -200px;
	z-index: 200;
	background-color: var(--flare);
	color: var(--ink);
	padding: var(--s-tiny) var(--s-snug);
	border-radius: var(--r-snug);
	font-weight: var(--bold);
}

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

.skip-hop:focus {
	top: var(--s-snug);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============ shared shell ============ */
.gangway-bar,
.spire-wrap,
.canopy-wrap,
.quayside-wrap,
.mullion-wrap,
.catwalk-wrap,
.gable-wrap,
.cornice-wrap,
.barrow-wrap,
.arch-wrap,
.dormer-wrap,
.finial-wrap,
.hallway-wrap,
.harbor-wrap,
.grotto-wrap,
.deck-bar,
.shelf-wrap {
	width: 100%;
	max-width: calc(var(--max) + 2 * var(--edge-narrow));
	margin-inline: auto;
	padding-inline: var(--edge-narrow);
}

section {
	padding-block: var(--sec-y);
}

/* ============ header ============ */
.gangway {
	position: sticky;
	top: 0;
	z-index: 100;
	margin-block-end: calc(var(--head-h) * -1);
	background-color: rgba(24, 24, 41, 0);
	transition: background-color var(--mid) var(--both);
}

.gangway.is-stuck {
	background-color: var(--surface);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

body[data-kind='inner'] .gangway {
	background-color: var(--surface);
}

.gangway-bar {
	height: 64px;
	display: flex;
	align-items: center;
	gap: var(--s-snug);
}

.gangway-mark {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-inline-end: auto;
}

.gangway-mark img {
	display: block;
	height: 40px;
	width: auto;
	flex-shrink: 0;
}

.gangway-menu-tap {
	display: inline-flex;
	align-items: center;
	gap: var(--s-hair);
	min-height: 44px;
	padding: var(--s-hair) var(--s-tiny);
	background-color: transparent;
	color: var(--copy);
	border: var(--slim) solid var(--border-strong);
	border-radius: var(--pill);
	font-size: var(--small);
	letter-spacing: var(--wide);
	cursor: pointer;
	margin-left: auto;
}

.gangway-lines {
	display: inline-block;
	width: 18px;
	height: 2px;
	background-color: var(--flare);
	position: relative;
}

.gangway-lines::before,
.gangway-lines::after {
	content: '';
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background-color: var(--flare);
}

.gangway-lines::before {
	top: -6px;
}

.gangway-lines::after {
	top: 6px;
}

.gangway-nav {
	display: none;
}

.gangway-chain {
	display: flex;
	align-items: center;
	gap: var(--s-tiny);
	list-style: none;
}

.gangway-entry {
	position: relative;
	display: flex;
	align-items: center;
}

.gangway-entry + .gangway-entry::before {
	content: '\00b7';
	color: var(--border-strong);
	margin-inline-end: var(--s-tiny);
}

.gangway-route {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--s-hair);
	color: var(--copy);
	font-size: 16px;
	font-weight: 400;
	font-variant: small-caps;
	letter-spacing: var(--wide);
	white-space: nowrap;
	transition: color var(--swift) var(--land);
}

.gangway-route::after {
	content: '';
	position: absolute;
	left: var(--s-hair);
	right: var(--s-hair);
	bottom: 12px;
	height: 2px;
	background-color: var(--flare);
	transform: scaleX(0);
	transition: transform var(--swift) var(--land);
}

.gangway-route:hover::after,
.gangway-route:focus-visible::after {
	transform: scaleX(1);
}

.gangway-route[aria-current='page'] {
	color: var(--flare);
	padding-inline-start: var(--s-tiny);
}

.gangway-route[aria-current='page']::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 18px;
	background-color: var(--base);
}

.gangway-more {
	position: relative;
}

.gangway-more-tap {
	display: inline-flex;
	align-items: center;
	gap: var(--s-hair);
	min-height: 44px;
	padding-inline: var(--s-hair);
	background-color: transparent;
	color: var(--copy);
	border: 0;
	font-size: 16px;
	font-variant: small-caps;
	letter-spacing: var(--wide);
	cursor: pointer;
}

.gangway-more-tap::after {
	content: '\25be';
	color: var(--flare);
}

.gangway-more-pane {
	display: none;
	position: absolute;
	top: calc(100% - 8px);
	right: 0;
	z-index: 30;
	min-width: 220px;
	max-height: 70vh;
	overflow-y: auto;
	list-style: none;
	background-color: var(--bg-elevated);
	border: var(--slim) solid var(--border-strong);
	border-radius: var(--r-base);
	padding: var(--s-hair);
}

.gangway-more-pane.is-open {
	display: block;
}

.gangway-more-pane .gangway-entry {
	display: block;
}

.gangway-more-pane .gangway-entry::before {
	content: none;
}

.gangway-more-pane .gangway-route {
	display: flex;
	padding: var(--s-hair) var(--s-tiny);
}

.gangway-dock {
	display: none;
	background-color: var(--surface);
	border-top: var(--slim) solid var(--line);
	padding: var(--s-tiny) 0 var(--s-base);
	max-height: 74vh;
	overflow-y: auto;
}

.gangway-dock.is-open {
	display: block;
}

.gangway-dock .gangway-chain {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	max-width: calc(var(--max) + 2 * var(--edge-narrow));
	margin-inline: auto;
	padding-inline: var(--edge-narrow);
}

.gangway-dock .gangway-entry::before {
	content: none;
}

.gangway-dock .gangway-route {
	display: flex;
	width: 100%;
	min-height: 48px;
	border-bottom: var(--slim) solid var(--line);
}

.gangway-dock .gangway-route::after {
	content: none;
}

/* ============ hero ============ */
.spire {
	position: relative;
	overflow: hidden;
	padding-block: 0;
	background-color: var(--surface);
	background-image: radial-gradient(120% 90% at 82% 18%, rgba(255, 120, 6, 0.22), rgba(24, 24, 41, 0) 62%);
}

.spire-wrap {
	position: relative;
	padding-block-start: var(--head-h);
}

.spire-inside {
	position: relative;
	z-index: 2;
	padding-block: var(--s-wide) var(--s-roomy);
	display: flex;
	flex-direction: column;
	gap: var(--s-snug);
	align-items: flex-start;
}

.spire-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s-hair);
	background-color: var(--bg-elevated);
	color: var(--flare);
	border: var(--slim) solid var(--border-strong);
	border-radius: var(--pill);
	padding: 6px var(--s-tiny);
	font-size: var(--tiny);
	letter-spacing: var(--wide);
	text-transform: uppercase;
}

.spire-title {
	max-width: 14ch;
	font-size: clamp(28px, 7vw, 54px);
}

.spire-subtitle {
	color: var(--text-muted);
	font-size: var(--sm-2);
	line-height: var(--even);
}

.spire-keys {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-tiny);
	align-items: center;
	margin-block-start: var(--s-hair);
}

.spire-note {
	color: var(--text-muted);
	font-size: var(--tiny);
}

.spire-figure {
	position: relative;
	margin: 0;
	z-index: 1;
}

.spire-figure img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	border: var(--slim) solid var(--border-strong);
	border-radius: var(--r-base);
}

/* ============ page header ============ */
.canopy {
	background-color: var(--base);
	color: var(--ink);
	padding-block: var(--sec-y);
}

.canopy-wrap {
	padding-block-start: var(--head-h);
}

.canopy-title {
	color: var(--ink);
	font-size: clamp(26px, 5.4vw, 48px);
	max-width: 20ch;
}

.canopy-subtitle {
	margin-block-start: var(--s-tiny);
	color: var(--ink);
	font-size: var(--sm-2);
	opacity: 0.78;
}

/* ============ prose ============ */
.quayside {
	background-color: var(--surface);
}

.quayside-inside > h2 {
	margin-block: var(--s-wide) var(--s-snug);
	font-size: var(--lg-2);
	font-weight: var(--bold);
}

.quayside-inside > h2:first-child {
	margin-block-start: 0;
}

.quayside-inside > h3 {
	margin-block: var(--s-base) var(--s-tiny);
	font-size: var(--display-4);
}

.quayside-inside > p {
	margin-block-end: var(--s-snug);
	color: var(--text-muted);
	font-size: var(--body);
	line-height: var(--loose);
}

.quayside-inside > p strong,
.quayside-inside > li strong {
	color: var(--copy);
	font-weight: var(--bold);
}

.quayside-inside > p a,
.quayside-inside > li a {
	color: var(--flare);
	border-bottom: var(--slim) solid rgba(253, 241, 82, 0.4);
}

.quayside-inside > p a:hover,
.quayside-inside > li a:hover {
	color: var(--spot-deep);
	border-bottom-color: var(--spot-deep);
}

.quayside-chain {
	margin-block-end: var(--s-snug);
	padding-inline-start: var(--s-base);
	color: var(--text-muted);
	font-size: var(--body);
	line-height: var(--loose);
}

.quayside-chain li {
	margin-block-end: var(--s-hair);
}

.quayside-chain li::marker {
	color: var(--base);
}

.quayside-figure {
	display: block;
	margin: var(--s-base) auto;
	max-width: 760px;
}

.quayside-figure img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--slim) solid var(--border-strong);
	border-radius: var(--r-base);
}

.quayside-figure.is-square {
	max-width: 520px;
}

.quayside-figure.is-tall {
	max-width: 420px;
}

.quayside-figure.is-tall img {
	height: 470px;
	max-height: 56vh;
	object-fit: cover;
}

.quayside-cap {
	margin-block-start: var(--s-hair);
	color: var(--text-muted);
	font-size: var(--tiny);
	text-align: center;
}

/* ============ items grid ============ */
.mullion {
	background-color: var(--surface);
}

.mullion-head {
	margin-block-end: var(--s-base);
	font-size: var(--xl-2);
}

.mullion-chain {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-snug);
	list-style: none;
}

.mullion-brick {
	display: flex;
	flex-direction: column;
	gap: var(--s-hair);
	min-height: 180px;
	padding: var(--s-base);
	background-color: var(--bg-elevated);
	border: var(--slim) solid var(--line);
	border-radius: var(--r-snug);
	transition: box-shadow var(--mid) var(--land), border-color var(--mid) var(--land);
}

.mullion-brick:hover {
	box-shadow: var(--d-wide);
	border-color: var(--base);
}

.mullion-image {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	fill: none;
	stroke: var(--flare);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mullion-title {
	font-size: var(--sm-2);
	font-weight: var(--bold);
}

.mullion-body {
	color: var(--text-muted);
	font-size: var(--small);
	line-height: var(--even);
}

.mullion-plug {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--s-tiny);
	min-height: 180px;
	padding: var(--s-base);
	background-color: var(--bg-elevated);
	border: var(--medium) double var(--base);
	border-radius: var(--r-snug);
}

.mullion-plug-head {
	color: var(--copy);
	font-size: var(--sm-2);
	font-weight: var(--bold);
}

.mullion-plug-body {
	color: var(--text-muted);
	font-size: var(--small);
}

/* ============ reviews ============ */
.catwalk {
	background-color: var(--surface);
}

.catwalk-head {
	margin-block-end: var(--s-base);
	font-size: var(--xl-2);
}

.catwalk-chain {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-snug);
	list-style: none;
}

.catwalk-brick {
	display: flex;
	flex-direction: column;
	gap: var(--s-tiny);
	padding: var(--s-base);
	background-color: var(--bg-elevated);
	border: var(--slim) solid var(--line);
	border-radius: var(--r-base);
}

.catwalk-person {
	color: var(--copy);
	font-size: var(--body);
	font-weight: var(--bold);
}

.catwalk-score {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	position: relative;
	font-size: var(--small);
	line-height: 1;
	color: var(--star-off);
	letter-spacing: 2px;
}

.catwalk-score-on {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--flare);
	letter-spacing: 2px;
}

.catwalk-body {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--body);
	line-height: var(--loose);
}

/* ============ faq ============ */
.gable {
	background-color: var(--surface);
}

.gable-head {
	margin-block-end: var(--s-snug);
	font-size: var(--xl-2);
}

.gable-chain {
	display: flex;
	flex-direction: column;
	gap: var(--s-hair);
	list-style: none;
}

.gable-entry {
	border-bottom: var(--slim) solid var(--line);
}

.gable-unit {
	padding-block: var(--s-hair);
}

.gable-unit summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-tiny);
	padding-block: var(--s-hair);
	cursor: pointer;
	list-style: none;
}

.gable-unit summary::-webkit-details-marker {
	display: none;
}

.gable-unit summary::after {
	content: '+';
	flex-shrink: 0;
	color: var(--flare);
	font-size: var(--display-4);
	line-height: 1;
}

.gable-unit[open] summary::after {
	content: '\2212';
}

.gable-title {
	font-family: var(--f-base);
	font-size: var(--small);
	font-weight: var(--demi);
	line-height: var(--even);
}

.gable-body {
	overflow: hidden;
	padding-block: var(--s-hair) var(--s-tiny);
	color: var(--text-muted);
	font-size: var(--small);
	line-height: var(--even);
}

.gable-unit[open] .gable-body {
	animation: gable-drop var(--mid) var(--land) both;
}

@keyframes gable-drop {
	from {
		max-height: 0;
		opacity: 0;
	}
	to {
		max-height: 460px;
		opacity: 1;
	}
}

/* ============ data table ============ */
.cornice {
	background-color: var(--surface);
}

.cornice-cap {
	margin-block-end: var(--s-snug);
	color: var(--text-muted);
	font-family: var(--display);
	font-size: var(--display-4);
	font-style: italic;
	text-align: center;
}

.cornice-cap::before {
	content: '';
	display: block;
	width: 40px;
	height: 2px;
	margin: 0 auto var(--s-hair);
	background-color: var(--base);
}

.cornice-frame {
	overflow-x: auto;
}

.cornice-grid {
	width: 100%;
	table-layout: fixed;
	font-size: var(--small);
}

.cornice-grid th,
.cornice-grid td {
	padding: var(--s-tiny) var(--s-hair);
	text-align: start;
	border-bottom: var(--slim) solid var(--line);
	hyphens: auto;
	overflow-wrap: break-word;
	vertical-align: top;
}

.cornice-grid th {
	color: var(--flare);
	font-family: var(--f-base);
	font-size: var(--tiny);
	font-weight: var(--bold);
	letter-spacing: var(--wide);
	text-transform: uppercase;
	border-bottom: var(--medium) double var(--base);
}

.cornice-grid td {
	color: var(--text-muted);
}

.cornice-grid col:first-child {
	width: 30%;
}

/* ============ cta block ============ */
.barrow {
	background-color: var(--base);
	color: var(--ink);
	padding-block: var(--s-roomy);
}

.barrow-inside {
	display: flex;
	flex-direction: column;
	gap: var(--s-snug);
	align-items: center;
	text-align: center;
}

.barrow-title {
	color: var(--ink);
	font-size: clamp(24px, 5vw, 40px);
	letter-spacing: var(--close);
	text-transform: uppercase;
}

.barrow-body {
	max-width: 62ch;
	color: var(--ink);
	font-size: var(--sm-2);
	line-height: var(--even);
}

.barrow-note {
	color: var(--ink);
	font-size: var(--tiny);
}

/* ============ inline cta ============ */
.arch {
	display: block;
	background-color: var(--bg-elevated);
	border-block: var(--medium) double var(--base);
}

.arch-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--s-tiny);
	align-items: flex-start;
	padding-block: var(--s-wide);
}

.arch-inside {
	flex: 1;
}

.arch-head {
	font-family: var(--display);
	font-size: var(--display-4);
	color: var(--copy);
}

.arch-subtext {
	margin-block-start: 6px;
	color: var(--text-muted);
	font-size: var(--body);
}

.arch-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-height: 44px;
	padding: var(--s-tiny) var(--s-wide);
	background-color: var(--flare);
	color: var(--ink);
	border-radius: var(--r-base);
	font-weight: var(--bold);
	letter-spacing: var(--wide);
	text-transform: uppercase;
}

.arch-btn:hover,
.arch-btn:focus-visible {
	background-color: var(--spot-deep);
	color: var(--ink);
}

/* ============ author byline ============ */
.dormer {
	display: block;
	background-color: var(--bg-elevated);
	color: var(--copy);
	border-block: var(--slim) solid var(--line);
}

.dormer-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--s-tiny);
	align-items: flex-start;
	padding-block: var(--s-wide);
}

.dormer-who {
	display: flex;
	align-items: center;
	gap: var(--s-tiny);
}

.dormer-face {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: var(--dot);
	object-fit: cover;
	border: var(--slim) solid var(--border-strong);
}

.dormer-person {
	color: var(--copy);
	font-size: var(--body);
	font-weight: var(--bold);
}

.dormer-person a {
	color: var(--copy);
}

.dormer-role {
	color: var(--text-muted);
	font-size: var(--small);
}

.dormer-goto {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: var(--s-hair) var(--s-snug);
	background-color: var(--bg-elevated);
	color: var(--flare);
	border: var(--slim) solid var(--flare);
	border-radius: var(--r-base);
	font-size: var(--small);
	letter-spacing: var(--wide);
}

.dormer-goto:hover,
.dormer-goto:focus-visible {
	background-color: var(--flare);
	color: var(--ink);
}

/* ============ author card ============ */
.finial {
	background-color: var(--surface);
}

.finial-who {
	display: inline-flex;
	align-items: center;
	gap: var(--s-snug);
	padding: var(--s-snug);
	background-color: var(--bg-elevated);
	border: var(--slim) solid var(--line);
	border-radius: var(--r-base);
}

.finial-face {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	border-radius: var(--dot);
	object-fit: cover;
}

.finial-person {
	color: var(--copy);
	font-size: var(--display-4);
	font-weight: var(--bold);
}

.finial-role {
	color: var(--text-muted);
	font-size: var(--tiny);
}

.finial-skills {
	margin-block-start: var(--s-base);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-hair);
	list-style: none;
}

.finial-badge {
	display: inline-flex;
	padding: 6px var(--s-tiny);
	background-color: var(--bg-elevated);
	color: var(--text-muted);
	border: var(--slim) solid var(--line);
	border-radius: var(--pill);
	font-size: var(--tiny);
}

.finial-articles {
	margin-block-start: var(--s-wide);
}

.finial-articles-head {
	margin-block-end: var(--s-tiny);
	font-size: var(--lg-2);
}

.finial-articles-chain {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-hair);
	list-style: none;
}

.finial-articles-entry a {
	display: block;
	padding: var(--s-hair) var(--s-tiny);
	background-color: var(--bg-elevated);
	color: var(--flare);
	border-left: 3px solid var(--base);
	border-radius: var(--r-snug);
	font-size: var(--small);
}

.finial-articles-entry a:hover {
	background-color: var(--line);
	color: var(--spot-deep);
}

/* ============ legal ============ */
.hallway {
	background-color: var(--surface);
	counter-reset: clause;
}

.hallway-lede {
	margin-block-end: var(--s-base);
	color: var(--text-muted);
	font-size: var(--body);
	line-height: var(--loose);
}

.hallway-unit {
	padding-block: var(--s-tiny);
}

.hallway-title {
	margin-block-end: var(--s-hair);
	font-size: var(--display-4);
	font-weight: var(--bold);
}

.hallway-title::before {
	counter-increment: clause;
	content: '\00a7 ' counter(clause) '. ';
	color: var(--base);
}

.hallway-body {
	margin-block-end: var(--s-tiny);
	color: var(--text-muted);
	font-size: var(--small);
	line-height: var(--loose);
}

.hallway-chain {
	margin-block-end: var(--s-tiny);
	padding-inline-start: var(--s-base);
	color: var(--text-muted);
	font-size: var(--small);
	line-height: var(--loose);
}

.hallway-guard {
	margin-block-start: var(--s-base);
	padding: var(--s-snug);
	background-color: var(--bg-elevated);
	border-left: var(--medium) solid var(--age-band);
	border-radius: var(--r-snug);
	color: var(--text-muted);
	font-size: var(--small);
}

/* ============ contact form ============ */
.harbor {
	background-color: var(--surface);
}

.harbor-shell {
	overflow: hidden;
	border-radius: var(--r-wide);
	border: var(--slim) solid var(--line);
}

.harbor-crest {
	height: 8px;
	background-color: var(--flare);
}

.harbor-inside {
	padding: var(--s-base);
	background-color: var(--bg-elevated);
}

.harbor-lede {
	margin-block-end: var(--s-snug);
	color: var(--text-muted);
	font-size: var(--body);
	line-height: var(--even);
}

.harbor-field {
	display: block;
	margin-block-end: var(--s-tiny);
}

.harbor-badge {
	display: block;
	margin-block-end: 6px;
	color: var(--copy);
	font-size: var(--small);
	letter-spacing: var(--wide);
}

.harbor-field input,
.harbor-field textarea {
	width: 100%;
	padding: var(--s-tiny);
	background-color: var(--surface);
	color: var(--copy);
	border: var(--slim) solid var(--border-strong);
	border-radius: var(--r-snug);
	font-family: var(--f-base);
	font-size: var(--body);
}

.harbor-field textarea {
	min-height: 140px;
	resize: vertical;
}

.harbor-send {
	display: flex;
	width: fit-content;
	margin-inline: auto;
	margin-block-start: var(--s-snug);
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-inline: var(--s-wide);
	background-color: var(--base);
	color: var(--ink);
	border: 0;
	border-radius: var(--r-base);
	font-weight: var(--bold);
	letter-spacing: var(--wide);
	cursor: pointer;
}

.harbor-send:hover,
.harbor-send:focus-visible {
	background-color: var(--flare);
	color: var(--ink);
}

.harbor-say {
	display: none;
	margin-block-start: var(--s-snug);
	padding: var(--s-tiny);
	background-color: var(--surface);
	color: var(--flare);
	border: var(--slim) solid var(--base);
	border-radius: var(--r-snug);
	font-size: var(--small);
}

.harbor-say.is-open {
	display: block;
}

.harbor-ways {
	margin-block-start: var(--s-base);
	color: var(--text-muted);
	font-size: var(--small);
}

.harbor-ways a {
	color: var(--flare);
}

/* ============ error ============ */
.grotto {
	background-color: var(--surface);
	min-height: 62vh;
}

.grotto-wrap {
	padding-block-start: var(--head-h);
}

.grotto-inside {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-snug);
	text-align: center;
	padding-block: var(--s-roomy);
}

.grotto-num {
	font-family: var(--display);
	font-size: clamp(80px, 18vw, 200px);
	font-weight: var(--bold);
	line-height: var(--compact);
	color: var(--base);
}

.grotto-title {
	max-width: var(--short);
}

.grotto-body {
	max-width: var(--short);
	color: var(--text-muted);
	font-size: var(--sm-2);
	line-height: var(--even);
}

.grotto-goto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding-inline: var(--s-roomy);
	background-color: var(--flare);
	color: var(--ink);
	border-radius: var(--r-base);
	font-family: var(--display);
	font-weight: var(--bold);
	letter-spacing: var(--wide);
	text-transform: uppercase;
}

.grotto-goto:hover,
.grotto-goto:focus-visible {
	background-color: var(--spot-deep);
	color: var(--ink);
}

/* ============ footer ============ */
.deck {
	background-color: var(--base);
	color: var(--ink);
	padding-block: var(--s-base);
	padding-block-end: calc(var(--rg-h) + var(--s-wide));
}

.deck-bar {
	display: flex;
	flex-direction: column;
	gap: var(--s-snug);
	align-items: flex-start;
}

.deck-mark img {
	display: block;
	height: 36px;
	width: auto;
}

.deck-head {
	margin-block-end: var(--s-hair);
	color: var(--ink);
	font-family: var(--f-base);
	font-size: var(--tiny);
	font-weight: var(--bold);
	letter-spacing: var(--wide);
	text-transform: uppercase;
}

.deck-chain {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-tiny);
	list-style: none;
}

.deck-route {
	color: var(--ink);
	font-size: var(--small);
	letter-spacing: var(--wide);
}

.deck-route:hover,
.deck-route:focus-visible {
	color: var(--ink);
	text-decoration: underline;
}

.deck-legal .deck-route {
	font-size: var(--tiny);
}

.deck-legal .deck-chain {
	gap: var(--s-hair) var(--s-tiny);
}

.deck-small {
	color: var(--ink);
	font-size: var(--tiny);
}

/* ============ cookie banner ============ */
.shelf {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--rg-h);
	z-index: 96;
	background-color: var(--bg-elevated);
	border-top: var(--slim) solid var(--border-strong);
}

.shelf.is-open {
	display: block;
	animation: shelf-rise var(--calm) var(--land) both;
}

@keyframes shelf-rise {
	from {
		clip-path: inset(100% 0 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

.shelf-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--s-hair);
	align-items: stretch;
	padding-block: var(--s-tiny);
}

.shelf-say {
	color: var(--text-muted);
	font-size: var(--small);
	line-height: var(--even);
}

.shelf-keys {
	display: flex;
	flex-shrink: 0;
	gap: var(--s-hair);
}

.shelf-ok,
.shelf-refuse {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding-inline: var(--s-snug);
	border-radius: var(--r-base);
	font-family: var(--f-base);
	font-size: var(--small);
	letter-spacing: var(--wide);
	cursor: pointer;
}

.shelf-ok {
	background-color: var(--flare);
	color: var(--ink);
	border: var(--slim) solid var(--flare);
	font-weight: var(--bold);
}

.shelf-ok:hover {
	background-color: var(--spot-deep);
	color: var(--ink);
}

.shelf-refuse {
	background-color: var(--surface);
	color: var(--copy);
	border: var(--slim) solid var(--border-strong);
}

.shelf-refuse:hover {
	background-color: var(--line);
	color: var(--copy);
}

/* ============ rg banner ============ */
.rg-band {
	display: block;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	margin: 0;
	padding: 4px var(--edge-narrow);
	background-color: var(--age-band);
	color: #ffffff;
	font-size: var(--tiny);
	line-height: 1.25;
	text-align: center;
}

.rg-band a {
	color: #ffffff;
	text-decoration: underline;
}

.rg-sign {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	margin-inline-end: 6px;
	padding: 1px 6px;
	background-color: #ffffff;
	color: var(--age-band);
	border-radius: var(--r-snug);
	font-weight: var(--bold);
}

/* ============ motion ============ */
[data-seen] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--calm) var(--land), transform var(--calm) var(--land);
}

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

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

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

/* ============ tablet and up ============ */
@media (min-width: 720px) {
	:root {
		--xxl: 44px;
		--xl-2: 34px;
		--lg-2: 26px;
		--display-4: 20px;
		--sm-2: 16px;
		--micro-head: 14px;
		--body: 16px;
		--small: 14px;
		--tiny: 12px;
		--sec-y: 44px;
		--edge-narrow: var(--padding-tablet);
	}

	.mullion-chain {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.catwalk-chain {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.finial-articles-chain {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.shelf-wrap {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-snug);
	}

	.arch-wrap {
		flex-direction: row;
		align-items: center;
		gap: var(--s-roomy);
	}

	.dormer-wrap {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-base);
	}

	.deck-bar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-base);
	}

	.spire-figure img {
		height: 300px;
	}

	.quayside-figure {
		margin-block: var(--s-wide);
	}
}

/* ============ desktop ============ */
@media (min-width: 900px) {
	:root {
		--head-h: var(--size-desktop);
		--edge-narrow: var(--edge-wide);
	}

	.gangway-bar {
		height: 72px;
		gap: var(--s-base);
	}

	.gangway-mark img {
		height: 48px;
	}

	.gangway-menu-tap {
		display: none;
	}

	.gangway-nav {
		display: block;
		min-width: 0;
	}

	.gangway-dock,
	.gangway-dock.is-open {
		display: none;
	}

	.spire-wrap {
		padding-block-end: var(--s-vast);
	}

	.spire-inside {
		width: 46%;
		padding-block: var(--s-roomy) var(--s-vast);
		gap: var(--s-base);
	}

	.spire-figure {
		position: absolute;
		right: 0;
		top: -40px;
		width: 52%;
		height: calc(100% + 80px);
		transform: rotate(2deg);
		transition: transform var(--calm) var(--land);
	}

	.spire-figure:hover {
		transform: rotate(0deg) scale(1.02);
	}

	.spire-figure img {
		height: 100%;
		box-shadow: var(--d-wide);
	}

	.mullion-chain {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.catwalk-chain {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mullion-plug {
		grid-column: span 2;
	}

	.catwalk-plug {
		grid-column: span 3;
	}
}

@media (min-width: 900px) and (max-width: 1100px) {
	.mullion-chain {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ============ offer plugs ============ */
.gangway-chain {
	flex-wrap: nowrap;
}

.gangway-entry {
	flex: 0 0 auto;
}

.spire-offer,
.barrow-offer,
.quayside-offer,
.mullion-offer,
.catwalk-offer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	text-align: center;
}

.quayside-plug {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-tiny);
	margin-block: var(--s-base);
	padding: var(--s-snug);
	background-color: var(--bg-elevated);
	border: var(--medium) double var(--base);
	border-radius: var(--r-snug);
}

.quayside-plug-body {
	color: var(--copy);
	font-size: var(--body);
	font-weight: var(--demi);
}

.quayside-plug-note {
	color: var(--text-muted);
	font-size: var(--tiny);
}

.catwalk-plug {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--s-tiny);
	padding: var(--s-base);
	background-color: var(--bg-elevated);
	border: var(--medium) double var(--base);
	border-radius: var(--r-base);
}

.catwalk-plug-body {
	color: var(--copy);
	font-size: var(--body);
	font-weight: var(--demi);
}

.dormer-inside {
	display: block;
}

.finial-inside {
	display: block;
}

.harbor-form {
	display: block;
}

.deck-nav {
	display: block;
}

.deck-entry {
	display: inline-flex;
}

/* ============ offer button ============ */
.atrium-dive{display:inline-flex;align-items:center;justify-content:center;padding:var(--s-hair) var(--s-snug);min-height:44px;border-radius:var(--r-base);border:var(--slim) solid var(--ink);font-size:var(--small);font-weight:600;letter-spacing:var(--wide)}
.atrium-dive{
  background:#0D9488;color:#12121F;text-decoration:none;
  transition:background var(--swift) var(--land),box-shadow var(--swift) var(--land);}
.atrium-dive.atrium-dive{color:#12121F;text-decoration:none;}
.atrium-dive:hover{background:#0F766E;color:#FFFFFF;animation:none}
.atrium-dive.atrium-dive:hover{color:#FFFFFF;text-decoration:none}
.atrium-dive:hover::after{animation:none}
.atrium-dive:active{background:#115E59;color:#FFFFFF}
.atrium-dive:focus-visible{outline:3px solid #12121F;outline-offset:3px}
.atrium-dive{animation:atrium-glow 1.65s ease-in-out infinite}
@keyframes atrium-glow{0%{transform:translate(0,0)}15.758%{transform:translate(4px,4px)}30.303%,100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.atrium-dive,.atrium-dive::after{animation:none!important;transition:none!important}}
.spire .atrium-dive,
.barrow .atrium-dive,
.quayside-plug .atrium-dive,
.mullion-plug .atrium-dive,
.catwalk-plug .atrium-dive {
	min-height: 52px;
	padding: var(--s-tiny) var(--s-base);
	font-size: var(--body);
}

.mullion-plug .atrium-dive {
	width: 100%;
	max-width: 320px;
}

.gable-plug {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-tiny);
	margin-block: var(--s-tiny);
	padding: var(--s-snug);
	background-color: var(--bg-elevated);
	border: var(--medium) double var(--base);
	border-radius: var(--r-snug);
}

.gable-plug-body {
	color: var(--copy);
	font-size: var(--body);
	font-weight: var(--demi);
}

.gable-offer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
}

@media (max-width: 935px) {
  .gangway-nav { display: none !important; }
  .gangway-menu-tap { display: flex !important; }
}

/* nojs guard 28.09.2026: без JS контент виден */
html.no-js [data-seen]{opacity:1!important;transform:none!important;visibility:visible!important;clip-path:none!important}