/* ── fonts ─────────────────────────────────────────────────────────── */
@font-face {
	font-family: "Kerrig Text";
	src: url("/photography-soft/body-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Kerrig Text";
	src: url("/photography-soft/body-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Kerrig Text";
	src: url("/photography-soft/body-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Kerrig Head";
	src: url("/photography-soft/display-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ── tokens ────────────────────────────────────────────────────────── */
:root {
	--main: #1f2123;
	--brand-hot: #f68a3b;
	--press: #f66b16;
	--bg: #121315;
	--card: #1b1d20;
	--glyph: #ffffff;
	--quiet: #bdbdbd;
	--hairline: rgba(255, 255, 255, 0.10);
	--border-strong: rgba(255, 255, 255, 0.24);
	--grad-1: #fcd1b6;
	--gradient-mid: #fa9f72;
	--age-band: #9e2a2b;

	--g-2xs: 2px;
	--g-xs: 6px;
	--g-sm: 10px;
	--g-md: 16px;
	--g-lg: 48px;
	--g-xl: 80px;
	--g-2xl: 128px;
	--g-3xl: 200px;

	--lozenge: 9999px;
	--circle: 50%;
	--r-2xs: 2px;
	--r-xs: 4px;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 20px;
	--r-xl: 28px;
	--r-2xl: 36px;
	--r-3xl: 48px;

	--banner: "Kerrig Head", Georgia, "Times New Roman", serif;
	--prose: "Kerrig Text", "Helvetica Neue", Arial, sans-serif;

	--xxl: 52px;
	--head: 32px;
	--h3: 24px;
	--sub-2: 19px;
	--minor: 16px;
	--micro-head: 14px;
	--reading: 17px;
	--sm: 14px;
	--legal: 12px;

	--snug: 1.15;
	--base: 1.55;
	--loose: 1.7;

	--plain: 400;
	--half: 500;
	--strong: 700;

	--narrow: 0;
	--e-base: 0;
	--airy: 0.02em;

	--d-2xs: 0 1px 1px rgba(0, 0, 0, 0.05);
	--d-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
	--d-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
	--d-md: 0 6px 18px rgba(0, 0, 0, 0.12);
	--d-lg: 0 12px 32px rgba(0, 0, 0, 0.16);
	--d-xl: 0 18px 48px rgba(0, 0, 0, 0.22);
	--d-2xl: 0 26px 64px rgba(0, 0, 0, 0.28);
	--d-3xl: 0 34px 88px rgba(0, 0, 0, 0.34);

	--short: 144ms;
	--t-base: 280ms;
	--long: 541ms;
	--land: cubic-bezier(0.2, 0.68, 0.3, 0.97);
	--launch: cubic-bezier(0.52, 0.03, 0.68, 0.4);
	--in-out: cubic-bezier(0.54, 0.01, 0.52, 0.93);
	--spring: cubic-bezier(0.27, 1.6, 0.64, 1.2);

	--outer: 1040px;
	--text: 490px;
	--inset-desktop: 56px;
	--inset-tablet: 24px;
	--inset-mobile: 16px;

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

	--h-lg: 92px;
	--height-mobile: 68px;
	--shell-h: 92px;
}

/* ── mobile scale ──────────────────────────────────────────────────── */
@media (max-width: 760px) {
	:root {
		--xxl: 30px;
		--head: 24px;
		--h3: 20px;
		--sub-2: 17px;
		--minor: 15px;
		--micro-head: 13px;
		--reading: 16px;
		--sm: 13px;
		--legal: 11px;
		--g-lg: 36px;
		--g-xl: 56px;
	}
}

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

html,
body {
	overflow-x: clip;
}

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--glyph);
	font-family: var(--prose);
	font-size: var(--reading);
	font-weight: var(--plain);
	line-height: var(--base);
}

img {
	max-width: 100%;
}

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

h1 {
	font-family: var(--banner);
	font-weight: var(--strong);
	font-size: var(--xxl);
	line-height: var(--snug);
}

h2 {
	font-family: var(--banner);
	font-weight: var(--strong);
	font-size: var(--head);
	line-height: var(--snug);
}

h3 {
	font-family: var(--prose);
	font-weight: var(--half);
	font-size: var(--h3);
	line-height: var(--snug);
}

p {
	margin: 0;
}

a {
	color: var(--brand-hot);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--short) var(--land), background-color var(--short) var(--land);
}

a:hover {
	color: var(--press);
	background-color: rgba(246, 138, 59, 0.12);
}

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

hr {
	border: 0;
}

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

/* ── skip link ─────────────────────────────────────────────────────── */
.skipJump {
	position: absolute;
	left: var(--g-md);
	z-index: 400;
	padding: var(--g-sm) var(--g-md);
	border-radius: var(--r-sm);
	background: var(--brand-hot);
	color: #121315;
	font-weight: var(--half);
	text-decoration: none;
}

.skipJump:not(:focus) {
	top: -200px;
}

.skipJump:focus {
	top: var(--g-md);
}

/* ── shared shell ──────────────────────────────────────────────────── */
.boxLaneHold,
.latchGridHold,
.nookSliderHold,
.crateFooterHold,
.stubSetHold,
.shellSliderHold,
.rayBodyHold,
.courtPanelHold,
.sectionSpanHold,
.labelHeaderHold,
.cabinGroupHold,
.spikeGroupHold,
.cellWrapperHold,
.boardBarHold {
	width: 100%;
	max-width: calc(var(--outer) + var(--inset-desktop) + var(--inset-tablet));
	margin-inline: auto;
	padding-inline: var(--inset-desktop) var(--inset-tablet);
}

.pageMain {
	display: block;
}

/* ── motion ────────────────────────────────────────────────────────── */
[data-reveal] {
	opacity: 0;
	transform: translateY(10px) scaleY(0.985);
	transform-origin: top center;
	transition: opacity var(--long) var(--land), transform var(--long) var(--land);
}

[data-reveal].shown {
	opacity: 1;
	transform: none;
}

/* ── header ────────────────────────────────────────────────────────── */
.boxLane {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--main);
	transition: background-color var(--t-base) var(--in-out);
}

.boxLaneHold {
	display: flex;
	align-items: center;
	gap: var(--g-md);
	max-width: 1320px;
	min-height: 92px;
	transition: min-height var(--t-base) var(--land);
}

.boxLane.is-shrunk .boxLaneHold {
	min-height: 68px;
}

.boxLaneKnob {
	order: 1;
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	flex-shrink: 0;
	width: 46px;
	height: 44px;
	padding: 0 11px;
	border: 0;
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, 0.08);
	cursor: pointer;
}

.boxLaneKnobRule {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: var(--r-2xs);
	background: var(--glyph);
}

.boxLaneBrand {
	order: 2;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 4px 16px;
	border-radius: var(--circle);
	background: rgba(255, 255, 255, 0.06);
	text-decoration: none;
}

.boxLaneBrand:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

.boxLaneImg {
	display: block;
	flex-shrink: 0;
	width: auto;
	height: 60px;
	transition: height var(--t-base) var(--land);
}

.boxLane.is-shrunk .boxLaneImg {
	height: 48px;
}

.boxLaneAge {
	order: 3;
	flex-shrink: 0;
	padding: 4px 9px;
	border-radius: var(--r-xs);
	background: var(--age-band);
	color: #ffffff;
	font-size: var(--legal);
	font-weight: var(--strong);
	letter-spacing: var(--airy);
}

.boxLaneBar {
	order: 4;
	min-width: 0;
	flex: 1 1 auto;
}

.boxLaneSeries {
	display: flex;
	align-items: center;
	gap: var(--g-md);
	list-style: none;
}

.boxLaneItem {
	flex-shrink: 0;
}

.boxLaneJump {
	display: inline-block;
	padding: 8px 10px;
	border-radius: var(--lozenge);
	color: var(--glyph);
	font-size: 16px;
	font-weight: 400;
	font-variant: small-caps;
	letter-spacing: var(--airy);
	text-decoration: none;
	white-space: nowrap;
}

.boxLaneJump:hover {
	background-color: #2a2118;
	color: var(--brand-hot);
}

.boxLaneJump[aria-current="page"] {
	background: #2a2118;
	color: var(--brand-hot);
}

.boxLaneRest {
	position: relative;
	flex-shrink: 0;
}

.boxLaneMore {
	padding: 8px 12px;
	border: var(--fine) solid var(--border-strong);
	border-radius: var(--lozenge);
	background: transparent;
	color: var(--glyph);
	font-family: var(--prose);
	font-size: 16px;
	font-weight: 400;
	font-variant: small-caps;
	cursor: pointer;
	white-space: nowrap;
}

.boxLaneMore:hover {
	background-color: #2a2118;
	color: var(--brand-hot);
}

.boxLanePane {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: calc(100% + 10px);
	z-index: 95;
	display: none;
	min-width: 230px;
	max-height: 60vh;
	overflow-y: auto;
	padding: var(--g-sm);
	border: var(--fine) solid var(--hairline);
	border-radius: var(--r-md);
	background: var(--card);
	box-shadow: var(--d-lg);
	list-style: none;
}

.boxLaneRest.is-open .boxLanePane {
	display: block;
}

.boxLanePane .boxLaneJump {
	display: block;
	white-space: normal;
}

.boxLaneActions {
	order: 5;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-inline-start: auto;
	gap: var(--g-sm);
}

.boxLaneButton {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	text-decoration: none;
}

.boxLanePanel {
	order: 6;
	display: none;
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: 92;
	max-height: 74vh;
	overflow-y: auto;
	padding: var(--g-md) var(--inset-mobile) var(--g-lg);
	border-block-start: var(--fine) solid var(--hairline);
	background: var(--main);
	box-shadow: var(--d-xl);
}

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

.boxLanePanelSeries {
	display: flex;
	flex-direction: column;
	list-style: none;
}

.boxLanePanelItem {
	border-block-end: var(--fine) solid var(--hairline);
}

.boxLanePanelJump {
	display: block;
	padding: var(--g-md) var(--g-sm);
	color: var(--glyph);
	font-size: var(--sub-2);
	font-variant: small-caps;
	text-decoration: none;
}

.boxLanePanelJump:hover {
	background-color: #2a2118;
	color: var(--brand-hot);
}

.boxLanePanelJump[aria-current="page"] {
	color: var(--brand-hot);
}

@media (max-width: 1099px) {
	.boxLaneKnob {
		display: flex;
	}

	.boxLaneBar {
		display: none;
	}

	.boxLaneHold {
		position: relative;
		min-height: 68px;
	}

	.boxLane.is-shrunk .boxLaneHold {
		min-height: 60px;
	}

	.boxLaneImg {
		height: 44px;
	}

	.boxLane.is-shrunk .boxLaneImg {
		height: 40px;
	}

	.boxLaneActions {
		margin-inline-start: auto;
	}
}

@media (max-width: 620px) {
	.boxLaneBrand {
		padding: 3px 10px;
	}

	.boxLaneImg {
		height: 36px;
	}

	.boxLane.is-shrunk .boxLaneImg {
		height: 32px;
	}

	.boxLaneAge {
		padding: 3px 6px;
	}

	.boxLaneHold {
		gap: var(--g-sm);
	}
}

/* ── hero ──────────────────────────────────────────────────────────── */
.nookSlider {
	position: relative;
	display: flex;
	align-items: center;
	min-height: calc(100vh - var(--shell-h));
	padding-block: var(--g-lg);
	background-color: var(--main);
	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4)), url("/photography-soft/visual.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}

.nookSliderHold {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--g-md);
}

.nookSliderBadge {
	color: var(--grad-1);
	font-size: var(--legal);
	font-weight: var(--half);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.nookSliderName {
	max-width: 900px;
	color: #ffffff;
}

.nookSliderSecond {
	max-width: var(--text);
	color: #e9e6e2;
	font-size: var(--minor);
	line-height: var(--base);
}

.nookSliderMeta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--g-sm) var(--g-md);
	color: #ded9d4;
	font-size: var(--sm);
}

.nookSliderMetaItem {
	position: relative;
	padding-inline-end: var(--g-md);
}

.nookSliderMetaItem:last-child {
	padding-inline-end: 0;
}

.nookSliderMetaItem:last-child::after {
	display: none;
}

.nookSliderMetaItem::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	inset-block: 4px;
	width: 1px;
	background: rgba(255, 255, 255, 0.35);
}

.nookSliderHint {
	position: absolute;
	inset-inline: 0;
	inset-block-end: var(--g-md);
	display: flex;
	justify-content: center;
}

.nookSliderHintRule {
	display: block;
	width: 2px;
	height: 34px;
	border-radius: var(--r-2xs);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), var(--grad-1));
}

/* ── page header ───────────────────────────────────────────────────── */
.crateFooter {
	padding-block: var(--g-lg);
	background: var(--main);
}

.crateFooterHold {
	display: flex;
	flex-direction: column;
	gap: var(--g-md);
}

.crateFooterTrail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--g-xs);
	color: var(--quiet);
	font-size: var(--legal);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.crateFooterJump {
	color: var(--quiet);
	text-decoration: none;
}

.crateFooterJump:hover {
	background-color: transparent;
	color: var(--brand-hot);
}

.crateFooterStep {
	color: var(--quiet);
}

.crateFooterName {
	color: var(--glyph);
}

.crateFooterProse {
	color: var(--quiet);
	line-height: var(--loose);
}

/* ── prose (centred) ───────────────────────────────────────────────── */
.stubSet {
	padding-block: var(--g-lg);
}

.stubSetHold {
	text-align: center;
}

.stubSetItem + .stubSetItem {
	margin-block-start: var(--g-lg);
}

.stubSetLabel {
	margin-block-end: var(--g-md);
	font-size: var(--head);
	font-weight: var(--strong);
	color: var(--glyph);
}

.stubSetProse {
	color: var(--quiet);
	line-height: var(--loose);
}

.stubSetProse + .stubSetProse {
	margin-block-start: var(--g-md);
}

.stubSetSeries {
	display: flex;
	flex-direction: column;
	gap: var(--g-sm);
	margin-block-start: var(--g-md);
	padding-inline-start: 0;
	list-style-position: inside;
	color: var(--quiet);
	line-height: var(--loose);
}

.stubSetItemRow {
	list-style-position: inside;
}

.stubSetFig {
	margin: var(--g-md) auto 0;
	max-width: 620px;
}

.stubSetFig.isTall {
	max-width: 400px;
}

.stubSetImg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-lg);
	border: var(--fine) solid var(--hairline);
}

/* ── offer strip ───────────────────────────────────────────────────── */
.stubSetCta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--g-sm);
	max-width: calc(var(--outer) + var(--inset-desktop) + var(--inset-tablet));
	margin-inline: auto;
	padding: var(--g-md) var(--inset-desktop) var(--g-md) var(--inset-desktop);
	text-align: center;
}

.stubSetCta.isLead {
	padding-block-start: var(--g-lg);
}

.stubSetButton {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.stubSetBadge {
	color: var(--quiet);
	font-size: var(--legal);
	letter-spacing: var(--airy);
}

/* ── items grid ────────────────────────────────────────────────────── */
.shellSlider {
	padding-block: var(--g-lg);
}

.shellSliderLabel {
	margin-block-end: var(--g-md);
	color: var(--glyph);
}

.shellSliderSeries {
	display: flex;
	flex-direction: column;
	gap: var(--g-lg);
	list-style: none;
}

.shellSliderItem {
	display: flex;
	flex-direction: column;
	gap: var(--g-sm);
}

.shellSliderName {
	font-family: var(--banner);
	font-weight: var(--strong);
	font-size: var(--h3);
	color: var(--glyph);
}

.shellSliderJump {
	color: var(--glyph);
	text-decoration: none;
}

.shellSliderJump:hover {
	background-color: transparent;
	color: var(--brand-hot);
}

.shellSliderRule {
	display: block;
	width: 60px;
	height: 2px;
	background: var(--brand-hot);
}

.shellSliderProse {
	color: var(--quiet);
	line-height: var(--loose);
}

/* ── data table ────────────────────────────────────────────────────── */
.rayBody {
	padding-block: var(--g-lg);
}

.rayBodyLabel {
	margin-block-end: var(--g-md);
	color: var(--glyph);
}

.rayBodyScroll {
	overflow-x: auto;
}

.rayBodyGrid {
	width: 100%;
	border-collapse: collapse;
	text-align: start;
}

.rayBodyGrid th {
	padding-block: var(--g-md);
	padding-inline: var(--g-sm);
	border-block-end: 2px solid var(--brand-hot);
	color: var(--glyph);
	font-family: var(--banner);
	font-size: var(--sm);
	font-weight: var(--strong);
	letter-spacing: var(--airy);
	text-align: start;
	text-transform: uppercase;
	white-space: nowrap;
}

.rayBodyGrid td {
	padding-block: var(--g-md);
	padding-inline: var(--g-sm);
	border-block-end: var(--fine) solid rgba(255, 255, 255, 0.08);
	color: var(--quiet);
	font-size: var(--sm);
	vertical-align: top;
}

.rayBodyGrid td:first-child {
	color: var(--glyph);
	font-weight: var(--half);
}

.rayBodyGrid tr:last-child td {
	border-block-end: 0;
}

@media (max-width: 700px) {
	.rayBodyGrid {
		min-width: 560px;
	}
}

/* ── reviews ───────────────────────────────────────────────────────── */
.courtPanel {
	padding-block: var(--g-lg);
}

.courtPanelLabel {
	margin-block-end: var(--g-md);
	color: var(--glyph);
	text-align: center;
}

.courtPanelSeries {
	list-style: none;
}

.courtPanelItem {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--g-md);
	padding-block: var(--g-lg);
	text-align: center;
}

.courtPanelSay {
	max-width: var(--text);
	margin: 0;
	color: var(--glyph);
	font-family: var(--banner);
	font-size: var(--h3);
	font-style: italic;
	line-height: var(--snug);
}

.courtPanelMeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--g-sm) var(--g-md);
}

.courtPanelWho {
	color: var(--quiet);
	font-size: var(--sm);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.courtPanelScore {
	color: var(--brand-hot);
	font-size: var(--sm);
	font-weight: var(--half);
}

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

/* ── faq ───────────────────────────────────────────────────────────── */
.sectionSpan {
	padding-block: var(--g-lg);
}

.sectionSpanLabel {
	margin-block-end: var(--g-md);
	color: var(--glyph);
}

.sectionSpanSeries {
	display: block;
}

.sectionSpanItem {
	border-block-end: var(--fine) solid var(--hairline);
}

.sectionSpanKey {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--g-md);
	padding-block: var(--g-md);
	cursor: pointer;
	list-style: none;
}

.sectionSpanKey::-webkit-details-marker {
	display: none;
}

.sectionSpanName {
	font-family: var(--prose);
	font-size: var(--minor);
	font-weight: var(--strong);
	color: var(--glyph);
}

.sectionSpanItem:hover .sectionSpanName {
	color: var(--brand-hot);
}

.sectionSpanMark {
	position: relative;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.sectionSpanMark::before,
.sectionSpanMark::after {
	content: "";
	position: absolute;
	inset-block-start: 11px;
	inset-inline-start: 3px;
	width: 18px;
	height: 2px;
	background: var(--brand-hot);
}

.sectionSpanMark::after {
	transform: rotate(90deg);
}

.sectionSpanItem[open] .sectionSpanMark::after {
	transform: rotate(0deg);
}

.sectionSpanMatter {
	padding-block: 0 var(--g-md);
	padding-inline-end: var(--g-lg);
	color: var(--quiet);
	line-height: var(--loose);
}

/* ── cta block ─────────────────────────────────────────────────────── */
.labelHeader {
	padding-block: var(--g-lg);
	border-block: var(--fine) solid var(--hairline);
	background: var(--main);
}

.labelHeaderHold {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--g-md);
	text-align: center;
}

.labelHeaderSay {
	position: relative;
	max-width: 900px;
	margin: 0;
	padding-block-start: var(--g-md);
	color: var(--glyph);
	font-family: var(--banner);
	font-size: var(--head);
	font-style: italic;
	line-height: var(--snug);
}

.labelHeaderSay::before {
	content: "\201C";
	position: absolute;
	inset-block-start: -18px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	color: var(--brand-hot);
	font-family: var(--banner);
	font-size: 52px;
	line-height: 1;
}

.labelHeaderSub {
	max-width: var(--text);
	color: var(--quiet);
	line-height: var(--loose);
}

.labelHeaderActions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--g-sm);
}

.labelHeaderButton {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.labelHeaderBadge {
	color: var(--quiet);
	font-size: var(--legal);
	letter-spacing: var(--airy);
}

/* ── author byline ─────────────────────────────────────────────────── */
.streamContainer {
	max-width: calc(var(--outer) + var(--inset-desktop) + var(--inset-tablet));
	margin-inline: auto;
	padding: var(--g-lg) var(--inset-desktop) var(--g-lg) var(--inset-desktop);
}

.streamContainerBox {
	display: flex;
	align-items: flex-start;
	gap: var(--g-md);
	max-width: var(--text);
	margin-inline: auto;
	padding: var(--g-md);
	border: var(--fine) solid var(--hairline);
	border-radius: var(--r-md);
	background: var(--card);
}

.streamContainerPhoto {
	flex-shrink: 0;
	display: block;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: var(--circle);
}

.streamContainerPhoto:hover {
	background-color: transparent;
}

.streamContainerImg {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	object-position: center top;
}

.streamContainerMatter {
	display: flex;
	flex-direction: column;
	gap: var(--g-xs);
}

.streamContainerBadge {
	color: var(--quiet);
	font-size: var(--legal);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.streamContainerWho {
	font-family: var(--banner);
	font-size: var(--sub-2);
	font-weight: var(--strong);
	color: var(--glyph);
}

.streamContainerJump {
	color: var(--glyph);
	text-decoration: none;
}

.streamContainerJump:hover {
	background-color: transparent;
	color: var(--brand-hot);
}

.streamContainerHat {
	color: var(--quiet);
	font-size: var(--sm);
}

.streamContainerProse {
	color: var(--quiet);
	font-size: var(--sm);
	line-height: var(--base);
}

/* ── author card ───────────────────────────────────────────────────── */
.cabinGroup {
	padding-block: var(--g-lg);
}

.cabinGroupBox {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: var(--g-md) var(--g-lg);
	padding: var(--g-lg) var(--g-md);
	border-radius: var(--r-lg);
	background: var(--card);
	box-shadow: var(--d-sm);
}

.cabinGroupPhoto {
	width: 160px;
	height: 160px;
	overflow: hidden;
	border-radius: var(--circle);
}

.cabinGroupImg {
	display: block;
	width: 160px;
	height: 160px;
	object-fit: cover;
	object-position: center top;
}

.cabinGroupMatter {
	display: flex;
	flex-direction: column;
	gap: var(--g-md);
}

.cabinGroupHat {
	color: var(--brand-hot);
	font-size: var(--sm);
	font-weight: var(--half);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.cabinGroupWho {
	font-family: var(--banner);
	font-size: var(--head);
	font-weight: var(--strong);
	line-height: var(--snug);
	color: var(--glyph);
}

.cabinGroupProse {
	color: var(--quiet);
	line-height: var(--loose);
}

.cabinGroupSeries {
	display: flex;
	flex-wrap: wrap;
	gap: var(--g-xs);
	list-style: none;
}

.cabinGroupItem {
	padding: var(--g-2xs) var(--g-sm);
	border-radius: var(--lozenge);
	background: var(--main);
	color: var(--glyph);
	font-size: var(--legal);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

@media (max-width: 760px) {
	.cabinGroupBox {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.cabinGroupPhoto,
	.cabinGroupImg {
		width: 120px;
		height: 120px;
	}

	.cabinGroupSeries {
		justify-content: center;
	}
}

/* ── contact form ──────────────────────────────────────────────────── */
.spikeGroup {
	padding-block: var(--g-lg);
}

.spikeGroupBox {
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--card);
}

.spikeGroupStrip {
	height: 8px;
	background: var(--brand-hot);
}

.spikeGroupMatter {
	display: flex;
	flex-direction: column;
	gap: var(--g-md);
	padding: var(--g-lg) var(--g-md);
}

.spikeGroupIntro {
	color: var(--quiet);
	line-height: var(--loose);
}

.spikeGroupForm {
	display: flex;
	flex-direction: column;
	gap: var(--g-sm);
}

.spikeGroupBadge {
	color: var(--glyph);
	font-size: var(--sm);
	font-weight: var(--half);
}

.spikeGroupControl {
	padding: var(--g-sm) var(--g-md);
	border: var(--fine) solid var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--glyph);
	font-family: var(--prose);
	font-size: var(--reading);
	min-height: 46px;
}

.spikeGroupControl:focus {
	outline: 2px solid var(--brand-hot);
	outline-offset: 1px;
}

.spikeGroupArea {
	min-height: 130px;
	resize: vertical;
}

.spikeGroupButton {
	align-self: center;
	min-height: 46px;
	margin-block-start: var(--g-sm);
	padding: var(--g-sm) var(--g-lg);
	border: 0;
	border-radius: var(--r-md);
	background: var(--brand-hot);
	color: #121315;
	font-family: var(--prose);
	font-size: var(--reading);
	font-weight: var(--half);
	cursor: pointer;
	transition: transform var(--short) var(--land), background-color var(--short) var(--land);
}

.spikeGroupButton:hover {
	background-color: var(--press);
	color: #121315;
	transform: translateY(1px);
}

.spikeGroupSay {
	padding: var(--g-md);
	border-radius: var(--r-sm);
	background: var(--main);
	color: var(--glyph);
}

/* ── legal ─────────────────────────────────────────────────────────── */
.cellWrapper {
	padding-block: var(--g-lg);
}

.cellWrapperHold {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--g-lg);
}

.cellWrapperBand {
	align-self: start;
	position: sticky;
	inset-block-start: calc(var(--shell-h) + var(--g-md));
	padding: var(--g-md);
	border-radius: var(--r-md);
	background: var(--card);
}

.cellWrapperLabelTop {
	margin-block-end: var(--g-sm);
	color: var(--glyph);
	font-family: var(--banner);
	font-size: var(--sub-2);
	font-weight: var(--strong);
}

.cellWrapperSeries {
	display: flex;
	flex-direction: column;
	gap: var(--g-xs);
	padding-inline-start: var(--g-md);
	color: var(--quiet);
	font-size: var(--sm);
}

.cellWrapperItem {
	line-height: var(--base);
}

.cellWrapperJump {
	color: var(--quiet);
	text-decoration: none;
}

.cellWrapperJump:hover {
	background-color: transparent;
	color: var(--brand-hot);
}

.cellWrapperMatter {
	display: flex;
	flex-direction: column;
	gap: var(--g-md);
	min-width: 0;
}

.cellWrapperLead {
	color: var(--glyph);
	font-size: var(--sub-2);
	line-height: var(--loose);
}

.cellWrapperLabel {
	margin-block-start: var(--g-md);
	color: var(--glyph);
	font-size: var(--h3);
	scroll-margin-block-start: calc(var(--shell-h) + var(--g-md));
}

.cellWrapperProse {
	color: var(--quiet);
	line-height: var(--loose);
}

.cellWrapperFine {
	color: var(--quiet);
	font-size: var(--sm);
	line-height: var(--base);
}

@media (max-width: 900px) {
	.cellWrapperHold {
		grid-template-columns: 1fr;
	}

	.cellWrapperBand {
		position: static;
	}
}

/* ── error block ───────────────────────────────────────────────────── */
.boardBar {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - var(--shell-h));
	padding-block: var(--g-lg);
	background-color: var(--main);
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.85)), url("/photography-soft/visual.webp");
	background-position: center;
	background-size: cover;
	text-align: center;
}

.boardBarHold {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--g-md);
}

.boardBarName {
	color: #ffffff;
}

.boardBarSub {
	max-width: var(--text);
	color: #e9e6e2;
	line-height: var(--loose);
}

.boardBarButton {
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	padding: var(--g-sm) var(--g-lg);
	border-radius: var(--r-md);
	background: var(--brand-hot);
	color: #121315;
	font-weight: var(--half);
	text-decoration: none;
}

.boardBarButton:hover {
	background-color: var(--press);
	color: #121315;
}

/* ── footer ────────────────────────────────────────────────────────── */
.latchGrid {
	padding-block: var(--g-lg);
	border-block-start: var(--fine) solid var(--hairline);
	background: var(--bg);
}

.latchGridRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--g-md) var(--g-lg);
}

.latchGridRowFoot {
	margin-block-start: var(--g-md);
	padding-block-start: var(--g-md);
	border-block-start: var(--fine) solid rgba(255, 255, 255, 0.08);
}

.latchGridBrand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.latchGridBrand:hover {
	background-color: transparent;
}

.latchGridImg {
	display: block;
	width: auto;
	height: 56px;
}

.latchGridButton {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.latchGridBar {
	flex: 1 1 340px;
}

.latchGridLabel {
	margin-block-end: var(--g-sm);
	color: var(--glyph);
	font-size: var(--micro-head);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.latchGridSeries {
	display: flex;
	flex-wrap: wrap;
	gap: var(--g-xs) var(--g-md);
	list-style: none;
}

.latchGridSeriesFine {
	gap: var(--g-xs) var(--g-sm);
	font-size: var(--legal);
}

.latchGridItem {
	line-height: var(--base);
}

.latchGridJump {
	color: var(--quiet);
	font-size: var(--sm);
	text-decoration: none;
}

.latchGridJump:hover {
	background-color: transparent;
	color: var(--glyph);
}

.latchGridSeriesFine .latchGridJump {
	font-size: var(--legal);
}

.latchGridAge {
	display: block;
	margin-block-start: var(--g-md);
	padding-block-start: var(--g-md);
	border-block-start: var(--fine) solid rgba(255, 255, 255, 0.08);
	color: var(--quiet);
	font-size: var(--sm);
	line-height: var(--base);
}

.latchGridBadge {
	display: inline-block;
	margin-inline-end: var(--g-sm);
	padding: 3px 8px;
	border-radius: var(--r-xs);
	background: var(--age-band);
	color: #ffffff;
	font-size: var(--legal);
	font-weight: var(--strong);
}

.latchGridMeta {
	color: var(--quiet);
	font-size: var(--legal);
}

.latchGridLegal {
	flex: 0 1 auto;
}

@media (max-width: 760px) {
	.latchGridRow {
		flex-direction: column;
		align-items: flex-start;
	}

	.latchGridImg {
		height: 56px;
	}
}

/* ── cookie banner ─────────────────────────────────────────────────── */
.ticketBlock {
	position: fixed;
	inset-inline-end: 0;
	inset-block-end: 0;
	z-index: 200;
	width: min(360px, 100vw);
	opacity: 1;
	visibility: visible;
}

.ticketBlock.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.ticketBlockMatter {
	display: flex;
	flex-direction: column;
	gap: var(--g-md);
	padding: var(--g-md);
	border-block-start: var(--fine) solid rgba(255, 255, 255, 0.12);
	border-inline-start: var(--fine) solid rgba(255, 255, 255, 0.12);
	background: var(--card);
	box-shadow: var(--d-2xl);
}

.ticketBlockSay {
	color: var(--quiet);
	font-size: var(--sm);
	line-height: var(--base);
}

.ticketBlockActions {
	display: flex;
	flex-direction: column;
	gap: var(--g-sm);
}

.ticketBlockGrant {
	min-height: 44px;
	border: 0;
	border-radius: var(--r-sm);
	background: var(--brand-hot);
	color: #121315;
	font-family: var(--prose);
	font-size: var(--sm);
	font-weight: var(--half);
	cursor: pointer;
}

.ticketBlockGrant:hover {
	background-color: var(--press);
	color: #121315;
}

.ticketBlockRefuse {
	min-height: 44px;
	border: var(--fine) solid var(--border-strong);
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--glyph);
	font-family: var(--prose);
	font-size: var(--sm);
	cursor: pointer;
}

.ticketBlockRefuse:hover {
	background-color: var(--glyph);
	color: #121315;
}

@media (max-width: 720px) {
	.ticketBlock {
		width: 100vw;
	}

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

	.ticketBlockSay {
		font-size: 13px;
		line-height: 1.35;
	}

	.ticketBlockActions {
		flex-direction: row;
	}

	.ticketBlockGrant,
	.ticketBlockRefuse {
		flex: 1 1 0;
		min-height: 36px;
		padding: 8px 14px;
		font-size: 12px;
	}
}

/* ── responsive shell ──────────────────────────────────────────────── */
.boxLanePanelBar {
	display: block;
}

.latchGridRowTop {
	align-items: center;
}

@media (max-width: 1023px) {
	.boxLaneHold,
	.latchGridHold,
	.nookSliderHold,
	.crateFooterHold,
	.stubSetHold,
	.shellSliderHold,
	.rayBodyHold,
	.courtPanelHold,
	.sectionSpanHold,
	.labelHeaderHold,
	.cabinGroupHold,
	.spikeGroupHold,
	.cellWrapperHold,
	.boardBarHold,
	.stubSetCta,
	.streamContainer {
		padding-inline: var(--inset-tablet);
	}
}

@media (max-width: 760px) {
	.boxLaneHold,
	.latchGridHold,
	.nookSliderHold,
	.crateFooterHold,
	.stubSetHold,
	.shellSliderHold,
	.rayBodyHold,
	.courtPanelHold,
	.sectionSpanHold,
	.labelHeaderHold,
	.cabinGroupHold,
	.spikeGroupHold,
	.cellWrapperHold,
	.boardBarHold,
	.stubSetCta,
	.streamContainer {
		padding-inline: var(--inset-mobile);
	}
}

@media (max-width: 430px) {
	.boxLaneHold {
		flex-wrap: wrap;
		gap: 8px;
		padding-block-end: 8px;
	}

	.boxLaneKnob {
		width: 42px;
		height: 40px;
		padding: 0 9px;
	}

	.boxLaneBrand {
		padding: 3px 10px;
	}

	.boxLaneImg {
		height: 32px;
	}

	.boxLane.is-shrunk .boxLaneImg {
		height: 30px;
	}

	.boxLaneAge {
		padding: 2px 6px;
		font-size: 10px;
	}

	.boxLaneActions {
		flex: 1 0 100%;
		margin-inline-start: 0;
	}

	.boxLaneButton {
		width: 100%;
	}
}

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

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

/* ── offer buttons ─────────────────────────────────────────────────── */
.tosako-hit{display:inline-flex;align-items:center;justify-content:center;padding:var(--g-sm) var(--g-lg);min-height:46px;border-radius:var(--r-md);font-weight:var(--half)}
.tosako-hit{position:relative;
  background:#0284C7;color:#121315;text-decoration:none;
  transition:background 0.16s linear;}
.tosako-hit.tosako-hit{color:#121315;text-decoration:none;}
.tosako-hit:hover{background:#0369A1;color:#FFFFFF;animation:none}
.tosako-hit.tosako-hit:hover{color:#FFFFFF;text-decoration:none}
.tosako-hit:hover::after{animation:none}
.tosako-hit:active{background:#075985;color:#FFFFFF}
.tosako-hit:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
@keyframes tosako-ripple{0%,100%{transform:scaleX(0)}40%,60%{transform:scaleX(1)}}
.tosako-hit::after{content:"";position:absolute;left:12%;right:12%;bottom:6px;height:2px;background:currentColor;opacity:.5;transform-origin:left;animation:tosako-ripple 2s cubic-bezier(.45,.20,.65,1) infinite}
@media (prefers-reduced-motion:reduce){.tosako-hit,.tosako-hit::after{animation:none!important;transition:none!important}}

@media (max-width: 1119px) {
  .boxLaneBar,
  .boxLaneSeries,
  .boxLaneJump { display: none !important; }
  .boxLaneKnob { display: flex !important; }
}