/* ============================================================
   canvas — Wild Tokyo (it)
   ============================================================ */

/* --- typefaces ------------------------------------------- */
@font-face {
	font-family: "Poppins";
	src: url("/glyphs-neon/poppins-latin-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("/glyphs-neon/poppins-latin-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("/glyphs-neon/poppins-latin-900.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* --- design tokens --------------------------------------- */
:root {
	--prime: #e00642;
	--pop: #07d2ff;
	--accent-strong: #01b4d8;
	--base-plane: #121212;
	--raised: #1c1c21;
	--fg: #ffffff;
	--muted: #bdbdbd;
	--line: #2c2c33;
	--edge-hard: #4a4a55;
	--gradient-light: #7be9ff;
	--ramp-end: #2ce6ff;
	--advisory: #8b1e3f;

	--s-hair: 3px;
	--s-tiny: 8px;
	--s-snug: 13px;
	--s-base: 21px;
	--s-wide: 34px;
	--s-roomy: 55px;
	--s-vast: 89px;
	--s-huge: 144px;

	--r-hair: 0;
	--r-tiny: 0;
	--r-snug: 4px;
	--r-base: 12px;
	--r-wide: 24px;
	--r-roomy: 32px;
	--pill: 9999px;
	--dot: 50%;

	--d-hair: 0 1px 0 rgba(0, 0, 0, 0.35);
	--d-tiny: 0 1px 0 rgba(0, 0, 0, 0.4);
	--d-snug: 0 2px 8px rgba(0, 0, 0, 0.45);
	--d-base: 0 6px 16px rgba(0, 0, 0, 0.5);
	--d-wide: 0 12px 32px rgba(0, 0, 0, 0.55);

	--light: 1px;
	--b-regular: 2px;
	--thick: 4px;

	--banner: "Poppins", "Trebuchet MS", Arial, sans-serif;
	--copy: "Poppins", "Segoe UI", Arial, sans-serif;

	--title: clamp(30px, 5.6vw, 64px);
	--display-2: 30px;
	--lg-2: 23px;
	--display-4: 18px;
	--sm-2: 14px;
	--xs-2: 12px;
	--reading: 15px;
	--petite: 12px;
	--tiny: 10px;

	--dense: 1.04;
	--normal: 1.45;
	--open: 1.65;

	--base: 400;
	--mid: 700;
	--black: 900;

	--snug: -0.04em;
	--regular: 0;
	--airy: 0.08em;

	--quick: 156ms;
	--t-mid: 270ms;
	--easy: 407ms;
	--land: cubic-bezier(0.32, 0.9, 0.32, 0.98);
	--enter: cubic-bezier(0.67, 0.07, 0.51, 0.97);
	--swing: cubic-bezier(0.67, 0.07, 0.51, 0.97);
	--overshoot: cubic-bezier(0.37, 1.45, 0.72, 1.35);

	--page: 1140px;
	--column: 1140px;
	--slim: 610px;
	--inset-desktop: 32px;
	--padding-tablet: 20px;
	--edge-narrow: 12px;

	--h-lg: 58px;
	--height-mobile: 58px;
	--shell-h: 60px;
	--sec-y: 40px;
	--flat-pad: var(--edge-narrow);
}

@media (min-width: 820px) {
	:root {
		--display-2: 44px;
		--lg-2: 28px;
		--display-4: 21px;
		--sm-2: 16px;
		--xs-2: 13px;
		--reading: 16px;
		--petite: 13px;
		--tiny: 11px;
		--sec-y: 46px;
		--flat-pad: var(--padding-tablet);
	}
}

@media (min-width: 1180px) {
	:root {
		--flat-pad: var(--inset-desktop);
	}
}

/* --- 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;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--base-plane);
	color: var(--fg);
	font-family: var(--copy);
	font-size: var(--reading);
	font-weight: var(--base);
	line-height: var(--normal);
}

img,
svg {
	max-width: 100%;
}

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

h1 {
	margin: 0 0 var(--s-base);
	font-family: var(--banner);
	font-size: var(--title);
	font-weight: var(--black);
	line-height: var(--dense);
	letter-spacing: var(--snug);
	text-transform: uppercase;
}

h2 {
	margin: 0 0 var(--s-snug);
	font-family: var(--banner);
	font-size: var(--display-2);
	font-weight: var(--mid);
	line-height: 1.12;
	letter-spacing: var(--snug);
	text-transform: uppercase;
}

h3 {
	margin: 0 0 var(--s-tiny);
	font-family: var(--banner);
	font-size: var(--lg-2);
	font-weight: var(--mid);
	line-height: 1.22;
	letter-spacing: var(--regular);
}

p {
	margin: 0 0 var(--s-snug);
}

main {
	flex: 1 0 auto;
	margin-block-start: var(--shell-h);
}

.page-flow {
	display: block;
	inline-size: 100%;
}

/* --- a11y ------------------------------------------------ */
.skip-step {
	position: absolute;
	top: -200px;
	left: var(--s-snug);
	z-index: 400;
	background: var(--pop);
	color: #05242c;
	padding: var(--s-tiny) var(--s-snug);
	border-radius: var(--r-snug);
	font-weight: var(--mid);
	text-decoration: none;
}

.skip-step:focus {
	top: var(--s-tiny);
}

.sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:focus-visible {
	outline: var(--b-regular) solid var(--pop);
	outline-offset: 2px;
}

/* --- shared section shell -------------------------------- */
.o30-guts,
.b90-guts,
.w47-guts,
.q73-guts,
.d52-guts,
.s03-guts,
.b14-guts,
.j17-guts,
.n50-guts,
.s51-guts,
.m22-guts,
.r22-guts,
.u33-guts {
	inline-size: 100%;
	max-width: calc(var(--page) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--flat-pad);
}

.b90,
.q73,
.d52,
.s03,
.b14,
.j17,
.n50,
.s51,
.m22,
.u33 {
	padding-block: var(--sec-y);
}

.w47 {
	padding-block: var(--s-wide);
}

/* --- header (HEAD-RIGHT) --------------------------------- */
.y27 {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 120;
	background: #17171b;
	color: var(--fg);
	border-bottom: var(--light) solid var(--line);
	transition: transform var(--t-mid) var(--land);
}

.y27.is-parked {
	transform: translateY(-105%);
}

.y27.is-lifted {
	background: #121216;
	backdrop-filter: blur(9px);
}

.y27-band {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--s-tiny);
	min-height: 58px;
	max-width: 1320px;
	padding-block: 4px;
	margin-inline: auto;
	padding-inline: var(--s-snug);
}

.y27-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	background: #ffffff;
	color: #101014;
	border-radius: var(--r-snug);
	overflow: hidden;
	text-decoration: none;
}

.y27-logo img {
	display: block;
	height: 56px;
	width: auto;
	max-width: 210px;
}

@media (max-width: 899px) {
	.y27-logo img {
		height: 38px;
	}
}

@media (max-width: 619px) {
	.y27-logo img {
		height: 30px;
	}
}

.y27-mark {
	object-fit: contain;
}

.y27-guide {
	display: none;
	align-items: center;
	flex: 1 1 auto;
	justify-content: flex-end;
	min-width: 0;
	gap: var(--s-tiny);
}

.y27-stack {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	gap: var(--s-snug);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

.y27-cell {
	position: relative;
	display: flex;
	align-items: center;
}

.y27-cell + .y27-cell::before {
	content: "";
	inline-size: 1px;
	block-size: 14px;
	margin-inline-end: var(--s-tiny);
	background: var(--edge-hard);
}

.y27-step {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--fg);
	background: transparent;
	font-family: var(--copy);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: var(--regular);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--quick) var(--land);
}

.y27-step:hover {
	color: var(--pop);
}

.y27-step[aria-current="page"] {
	color: var(--pop);
}

.y27-step[aria-current="page"]::after {
	content: "";
	position: absolute;
	inset-block-end: 7px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: 5px;
	block-size: 5px;
	border-radius: var(--dot);
	background: var(--pop);
}

.y27-extra {
	position: relative;
	flex-shrink: 0;
}

.y27-extra[hidden] {
	display: none;
}

.y27-more-opener {
	display: inline-flex;
	align-items: center;
	gap: var(--s-hair);
	min-height: 44px;
	padding-inline: var(--s-tiny);
	border: 0;
	background: transparent;
	color: var(--muted);
	font-family: var(--copy);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.y27-more-opener:hover {
	color: var(--pop);
}

.y27-more-menu {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline-end: 0;
	display: none;
	min-inline-size: 210px;
	margin: 0;
	padding: var(--s-tiny);
	list-style: none;
	background: var(--raised);
	color: var(--fg);
	border: var(--light) solid var(--line);
	border-radius: var(--r-base);
	box-shadow: var(--d-wide);
	z-index: 12;
}

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

.y27-more-menu .y27-cell {
	display: block;
}

.y27-more-menu .y27-cell + .y27-cell::before {
	display: none;
}

.y27-more-menu .y27-step {
	display: block;
	padding: var(--s-tiny) var(--s-snug);
	border-radius: var(--r-snug);
	white-space: normal;
}

.y27-keys {
	display: none;
	align-items: center;
	gap: var(--s-tiny);
	flex-shrink: 0;
}

.y27-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding-inline: var(--s-base);
	border-radius: var(--r-base);
	background: var(--pop);
	color: #05242c;
	font-family: var(--banner);
	font-size: 13px;
	font-weight: var(--black);
	letter-spacing: var(--airy);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.y27-opener {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	order: 9;
	margin-left: auto;
	flex-shrink: 0;
	min-height: 44px;
	padding-inline: var(--s-snug);
	border: 0;
	border-radius: var(--r-base);
	background: var(--raised);
	color: var(--fg);
	font-family: var(--copy);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.y27-opener:hover {
	background: #26262d;
	color: var(--pop);
}

.y27-pane {
	display: none;
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	max-height: 74vh;
	overflow-y: auto;
	padding: var(--s-snug) var(--s-snug) var(--s-base);
	background: #17171b;
	color: var(--fg);
	border-bottom: var(--light) solid var(--line);
	box-shadow: var(--d-wide);
	z-index: 10;
}

.y27-pane.is-open {
	display: block;
}

.y27-pane-act {
	display: block;
	margin-block-end: var(--s-snug);
	padding: var(--s-snug);
	border-radius: var(--r-base);
	background: var(--pop);
	color: #05242c;
	font-family: var(--banner);
	font-size: 14px;
	font-weight: var(--black);
	letter-spacing: var(--airy);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.y27-pane-guide {
	display: block;
}

.y27-pane-stack {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.y27-pane-cell {
	display: block;
}

.y27-pane-step {
	display: block;
	padding-block: var(--s-snug);
	border-bottom: var(--light) solid var(--line);
	color: var(--fg);
	background: transparent;
	font-size: var(--sm-2);
	font-weight: 600;
	text-decoration: none;
}

.y27-pane-cell:last-child .y27-pane-step {
	border-bottom: 0;
}

.y27-pane-step[aria-current="page"] {
	color: var(--pop);
}

@media (min-width: 620px) {
	.y27-keys {
		display: flex;
		margin-left: auto;
	}

	.y27-pane-act {
		display: none;
	}
}

@media (min-width: 900px) {
	.y27-band {
		gap: var(--s-snug);
		padding-inline: var(--s-base);
	}

	.y27-guide {
		display: flex;
	}

	.y27-keys {
		margin-left: 0;
	}

	.y27-opener {
		display: none;
	}

	.y27-pane {
		display: none;
	}

	.y27-button {
		font-size: 14px;
	}
}

/* --- responsible gaming band (RG-03) --------------------- */
.rg-band {
	inline-size: 100%;
	max-width: calc(var(--page) + 2 * var(--inset-desktop));
	margin-inline: auto;
	margin-block: var(--s-snug) 0;
	padding-inline: var(--flat-pad);
}

.rg-line {
	margin: 0;
	padding: var(--s-snug) var(--s-base);
	border-radius: var(--r-base);
	background: var(--advisory);
	color: #ffffff;
	font-size: var(--petite);
	line-height: var(--normal);
	text-align: center;
}

.rg-step {
	color: #ffe1ea;
	background: var(--advisory);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rg-step:hover {
	color: #ffffff;
	background: var(--advisory);
}

/* --- hero (HERO-08 magazine cover) ----------------------- */
.o30 {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(460px, calc(100vh - var(--shell-h) - 56px), 700px);
	background-color: #0a0a0c;
	background-image: url("/artwork-cool/banner.webp");
	background-size: cover;
	background-position: center;
	color: #ffffff;
	overflow: hidden;
}

.o30--quiet {
	min-height: clamp(280px, 44vh, 400px);
	background-color: #0d0d10;
	background-image: radial-gradient(circle at 86% 16%, rgba(224, 6, 66, 0.45) 0%, rgba(224, 6, 66, 0) 48%), linear-gradient(160deg, #1a0b12 0%, #111114 58%, #0b171c 100%);
}

.o30-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(8, 8, 10, 0.95) 6%, rgba(8, 8, 10, 0.72) 42%, rgba(8, 8, 10, 0.3) 100%);
}

.o30--quiet .o30-veil {
	background: linear-gradient(0deg, rgba(8, 8, 10, 0.82) 0%, rgba(8, 8, 10, 0.22) 100%);
}

.o30-guts {
	position: relative;
	padding-block: var(--s-roomy) var(--s-wide);
	color: #ffffff;
}

.o30-badge {
	display: inline-block;
	margin-block-end: var(--s-snug);
	padding: var(--s-hair) var(--s-snug);
	border-radius: var(--pill);
	background: var(--prime);
	color: #ffffff;
	font-size: var(--tiny);
	font-weight: var(--mid);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.o30 h1 {
	max-width: 15ch;
	color: #ffffff;
}

.o30--quiet h1 {
	max-width: 22ch;
}

.o30-tagline {
	max-width: var(--slim);
	margin: 0 0 var(--s-base);
	color: #e6e6e6;
	font-size: var(--display-4);
	line-height: var(--normal);
}

.o30-aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-snug);
}

.o30-credit {
	position: relative;
	color: #d5d5d5;
	background: transparent;
	font-size: var(--petite);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.o30-credit + .o30-credit::before {
	content: "";
	position: absolute;
	inset-block-start: 2px;
	inset-inline-start: calc(var(--s-tiny) * -1);
	inline-size: 1px;
	block-size: 11px;
	background: #7a7a7a;
}

/* --- page header (PHEAD-08 tag cluster) ------------------ */
.b90 {
	background: #171719;
	color: var(--fg);
	border-bottom: var(--light) solid var(--line);
}

.b90-stack {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-tiny);
	margin: 0 0 var(--s-snug);
	padding: 0;
	list-style: none;
}

.b90-badge {
	padding: var(--s-hair) var(--s-snug);
	border-radius: var(--pill);
	background: var(--prime);
	color: #ffffff;
	font-size: var(--tiny);
	font-weight: var(--mid);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.b90-tagline {
	max-width: var(--slim);
	margin: 0 0 var(--s-snug);
	color: var(--muted);
	font-size: var(--display-4);
	line-height: var(--normal);
}

.b90-aside {
	margin: 0;
	color: var(--muted);
	font-size: var(--petite);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

/* --- prose (PROSE-06 centred, roomy, large bold heads) --- */
.w47-guts {
	text-align: center;
}

.w47 h2 {
	margin-block: 0 var(--s-base);
	font-size: calc(var(--display-2) * 1.1);
	font-weight: var(--black);
	color: var(--fg);
}

.w47-text {
	margin: 0 auto var(--s-wide);
	color: var(--muted);
	font-size: var(--reading);
	line-height: var(--open);
	overflow-wrap: anywhere;
}

.w47-text:last-child {
	margin-block-end: 0;
}

.w47-stack {
	margin: 0 0 var(--s-wide);
	padding: 0;
	list-style: none;
	counter-reset: w47num;
}

.w47-cell {
	margin-block-end: var(--s-snug);
	color: var(--muted);
	font-size: var(--reading);
	line-height: var(--open);
}

ul.w47-stack .w47-cell::before {
	content: "◆";
	margin-inline-end: var(--s-tiny);
	color: var(--pop);
	font-size: 0.75em;
}

ol.w47-stack .w47-cell {
	counter-increment: w47num;
}

ol.w47-stack .w47-cell::before {
	content: counter(w47num) ".";
	margin-inline-end: var(--s-tiny);
	color: var(--pop);
	font-weight: var(--black);
}

.w47-step {
	color: var(--pop);
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: text-decoration-thickness var(--quick) var(--land);
}

.w47-step:hover {
	color: var(--accent-strong);
	background: transparent;
	text-decoration-thickness: 2px;
}

.w47-frame {
	margin: 0 0 var(--s-wide);
}

.w47-shot {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 400px;
	border-radius: var(--r-base);
	object-fit: cover;
}

.w47-shot--tall {
	max-inline-size: 440px;
	max-block-size: 52vh;
	margin-inline: auto;
}

.w47-dock {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-tiny);
	margin-block: var(--s-base) 0;
}

.w47-fine {
	margin: 0;
	color: var(--muted);
	font-size: var(--petite);
}

.w47-pitch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-inline: var(--s-wide);
	border-radius: var(--r-base);
	background: var(--pop);
	color: #05242c;
	font-family: var(--banner);
	font-size: var(--sm-2);
	font-weight: var(--black);
	letter-spacing: var(--airy);
	text-transform: uppercase;
	text-decoration: none;
}

/* --- items grid (GRID-09 horizontal rail) ---------------- */
.q73-rail {
	display: flex;
	gap: var(--s-base);
	margin: var(--s-base) 0 0;
	padding: 0 0 var(--s-snug);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-color: var(--edge-hard) transparent;
}

.q73-card {
	position: relative;
	display: flex;
	flex: 0 0 min(320px, 80vw);
	inline-size: min(320px, 80vw);
	flex-direction: column;
	gap: var(--s-tiny);
	min-block-size: 200px;
	padding: var(--s-base);
	border: var(--light) solid var(--line);
	border-radius: var(--r-wide);
	background: var(--raised);
	color: var(--fg);
	scroll-snap-align: start;
	overflow: hidden;
}

.q73-card::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: 5px;
	background: var(--pop);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--t-mid) var(--land);
}

.q73-card:hover::after {
	transform: scaleX(1);
}

.q73-sign {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 46px;
	block-size: 46px;
	border-radius: var(--r-base);
	background: #26262e;
	color: var(--pop);
}

.q73-sign svg {
	inline-size: 26px;
	block-size: 26px;
	fill: var(--pop);
}

.q73-card h3 {
	color: var(--fg);
	font-size: var(--display-4);
}

.q73-text {
	margin: 0;
	color: var(--muted);
	font-size: var(--petite);
	line-height: var(--normal);
}

.q73-card--pitch {
	align-items: flex-start;
	justify-content: center;
	background: var(--prime);
	color: #ffffff;
	border-color: var(--prime);
}

.q73-top {
	margin: 0;
	color: #ffffff;
	font-family: var(--banner);
	font-size: var(--display-4);
	font-weight: var(--black);
	line-height: 1.2;
}

.q73-pitch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding-inline: var(--s-base);
	border-radius: var(--r-base);
	background: #ffffff;
	color: #7a0223;
	font-family: var(--banner);
	font-size: var(--sm-2);
	font-weight: var(--black);
	letter-spacing: var(--airy);
	text-transform: uppercase;
	text-decoration: none;
}

.q73-fine {
	color: #ffe1ea;
	background: var(--prime);
	font-size: var(--tiny);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.q73-guts {
	position: relative;
}

.q73-guts::after {
	content: "";
	position: absolute;
	inset-block: auto 0;
	inset-inline-end: 0;
	inline-size: 56px;
	block-size: 220px;
	background: linear-gradient(90deg, rgba(18, 18, 18, 0) 0%, #121212 82%);
	pointer-events: none;
}

@media (min-width: 1180px) {
	.q73-guts::after {
		inline-size: 40px;
	}
}

/* --- reviews (REV-02 quote editorial) -------------------- */
.s03-stack {
	display: block;
	margin-block-start: var(--s-base);
}

.s03-cell {
	padding-block: var(--s-base);
	border-bottom: var(--light) solid var(--line);
}

.s03-cell:last-child {
	border-bottom: 0;
}

.s03-quote {
	position: relative;
	margin: 0 0 var(--s-snug);
	padding-inline-start: var(--s-roomy);
}

.s03-quote::before {
	content: "\201C";
	position: absolute;
	inset-block-start: -18px;
	inset-inline-start: 0;
	color: var(--pop);
	font-family: var(--banner);
	font-size: 58px;
	font-weight: var(--black);
	line-height: 1;
}

.s03-text {
	margin: 0;
	color: var(--fg);
	font-family: var(--banner);
	font-size: var(--display-4);
	font-style: italic;
	font-weight: var(--base);
	line-height: 1.4;
}

.s03-aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-snug);
	padding-inline-start: var(--s-roomy);
}

.s03-handle {
	color: var(--fg);
	background: transparent;
	font-size: var(--petite);
	font-style: normal;
	font-weight: var(--mid);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.s03-score {
	padding: 1px var(--s-tiny);
	border-radius: var(--pill);
	background: var(--pop);
	color: #05242c;
	font-size: var(--tiny);
	font-weight: var(--black);
}

.s03-on {
	color: var(--muted);
	background: transparent;
	font-size: var(--tiny);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

/* --- faq (FAQ-09 magazine Q&A) --------------------------- */
.d52-stack {
	display: block;
	margin-block-start: var(--s-base);
}

.d52-cell {
	border-bottom: var(--light) solid var(--line);
}

.d52-cell:last-child {
	border-bottom: 0;
}

.d52-ask {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--s-snug);
	align-items: baseline;
	padding-block: var(--s-base);
	list-style: none;
	cursor: pointer;
}

.d52-ask::after {
	content: "+";
	justify-self: end;
	color: var(--pop);
	background: transparent;
	font-family: var(--banner);
	font-size: var(--lg-2);
	font-weight: var(--black);
	line-height: 1;
	transform: rotate(0deg);
	transition: transform var(--quick) var(--land);
}

.d52-cell[open] .d52-ask::after {
	transform: rotate(45deg);
}

.d52-ask::-webkit-details-marker {
	display: none;
}

.d52-mark {
	color: var(--pop);
	background: transparent;
	font-family: var(--banner);
	font-size: var(--lg-2);
	font-weight: var(--black);
	line-height: 1;
}

.d52-top {
	margin: 0;
	color: var(--fg);
	font-family: var(--banner);
	font-size: var(--display-4);
	font-style: italic;
	font-weight: var(--mid);
	line-height: 1.34;
	text-transform: none;
}

.d52-part {
	overflow: hidden;
	padding-block: 0 var(--s-base);
	padding-inline-start: 0;
}

.d52-cell[open] .d52-part {
	animation: d52-open var(--easy) var(--land);
}

@keyframes d52-open {
	from {
		max-height: 0;
		opacity: 0;
	}

	to {
		max-height: 720px;
		opacity: 1;
	}
}

.d52-part .d52-mark {
	margin-inline-end: var(--s-tiny);
	font-size: var(--display-4);
}

.d52-text {
	margin: 0;
	color: var(--muted);
	font-size: var(--reading);
	line-height: var(--open);
}

/* --- data table (TABLE-01 striped) ----------------------- */
.j17-note {
	margin: 0 0 var(--s-snug);
	color: var(--muted);
	font-size: var(--petite);
}

.j17-frame {
	overflow-x: auto;
	border-radius: var(--r-base);
	border: var(--light) solid var(--line);
}

.j17-grid {
	inline-size: 100%;
	min-inline-size: 520px;
	border-collapse: collapse;
	background: var(--raised);
	color: var(--fg);
}

.j17-grid th {
	padding: var(--s-snug) var(--s-base);
	background: var(--prime);
	color: #ffffff;
	font-family: var(--copy);
	font-size: var(--xs-2);
	font-weight: var(--mid);
	letter-spacing: var(--airy);
	text-align: left;
	text-transform: uppercase;
}

.j17-box {
	padding: var(--s-snug) var(--s-base);
	background: var(--raised);
	color: var(--muted);
	font-size: var(--petite);
	text-align: left;
}

.j17-strip:nth-child(even) .j17-box {
	background: #232329;
}

.j17-strip:hover .j17-box {
	background: #2b2b33;
}

.j17-box:first-child {
	color: var(--fg);
	font-weight: var(--mid);
}

/* --- cta block (CTA-06 banner) --------------------------- */
.b14 {
	background: var(--pop);
	color: #05242c;
}

.b14-guts {
	display: flex;
	flex-direction: column;
	gap: var(--s-base);
	align-items: flex-start;
}

.b14-part {
	display: block;
}

.b14-top {
	margin: 0 0 var(--s-tiny);
	color: #05242c;
	font-size: var(--lg-2);
	font-weight: var(--black);
	letter-spacing: var(--snug);
}

.b14-text {
	margin: 0;
	color: #06333d;
	font-size: var(--petite);
	line-height: var(--normal);
}

.b14-keys {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-tiny);
	flex-shrink: 0;
}

.b14-pitch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-inline: var(--s-wide);
	border-radius: var(--r-base);
	background: #0a1418;
	color: #ffffff;
	font-family: var(--banner);
	font-size: var(--sm-2);
	font-weight: var(--black);
	letter-spacing: var(--airy);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.b14-fine {
	color: #06333d;
	background: var(--pop);
	font-size: var(--tiny);
	font-weight: var(--mid);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

@media (min-width: 820px) {
	.b14-guts {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.b14-keys {
		align-items: flex-end;
	}
}

/* --- legal (LEGAL-05 definition list) -------------------- */
.n50-stack {
	margin: 0;
}

.n50-term {
	position: relative;
	margin-block: var(--s-wide) var(--s-tiny);
	padding-block-start: var(--s-snug);
	color: var(--fg);
	font-family: var(--banner);
	font-size: var(--display-4);
	font-weight: var(--black);
}

.n50-term::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 30px;
	block-size: 2px;
	background: var(--pop);
}

.n50-part {
	margin-inline-start: 0;
	margin-block-end: var(--s-base);
}

.n50-text {
	margin: 0 0 var(--s-snug);
	color: var(--muted);
	font-size: var(--reading);
	line-height: var(--open);
}

.n50-help {
	margin-block-start: var(--s-wide);
	padding: var(--s-base);
	border: var(--light) solid var(--line);
	border-radius: var(--r-base);
	background: var(--raised);
	color: var(--fg);
}

.n50-top {
	margin: 0 0 var(--s-snug);
	color: var(--fg);
	font-family: var(--banner);
	font-size: var(--display-4);
	font-weight: var(--black);
	text-transform: uppercase;
}

.n50-fine {
	margin: 0;
	padding: 0;
	list-style: none;
}

.n50-cell {
	margin-block-end: var(--s-tiny);
	padding-inline-start: var(--s-base);
	position: relative;
	color: var(--muted);
	font-size: var(--petite);
	line-height: var(--normal);
}

.n50-cell::before {
	content: "▸";
	position: absolute;
	inset-inline-start: 0;
	color: var(--pop);
}

.n50-note {
	margin-block-start: var(--s-base);
	color: var(--muted);
	font-size: var(--petite);
	line-height: var(--normal);
}

/* --- contact form (FORM-05 bordered editorial) ----------- */
.s51-top {
	margin: 0 0 var(--s-snug);
	font-size: var(--display-2);
}

.s51-text {
	margin: 0 0 var(--s-base);
	color: var(--muted);
	font-size: var(--reading);
	line-height: var(--open);
}

.s51-frame {
	padding: var(--s-base);
	border: var(--b-regular) solid var(--pop);
	border-radius: var(--r-base);
	background: transparent;
}

.s51-box {
	display: block;
	margin: 0 0 var(--s-base);
}

.s51-badge {
	display: block;
	margin-block-end: var(--s-hair);
	color: var(--muted);
	font-size: var(--tiny);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.s51-entry {
	inline-size: 100%;
	padding: var(--s-tiny) 0;
	border: 0;
	border-bottom: var(--light) solid var(--edge-hard);
	border-radius: var(--r-tiny);
	background: transparent;
	color: var(--fg);
	font-family: var(--copy);
	font-size: var(--display-4);
}

.s51-entry--long {
	resize: vertical;
}

.s51-entry:focus {
	border-bottom-color: var(--pop);
	outline: none;
}

.s51-send {
	min-height: 48px;
	padding-inline: var(--s-wide);
	border: 0;
	border-radius: var(--r-base);
	background: var(--pop);
	color: #05242c;
	font-family: var(--banner);
	font-size: var(--sm-2);
	font-weight: var(--black);
	letter-spacing: var(--airy);
	text-transform: uppercase;
	cursor: pointer;
}

.s51-done {
	margin-block-start: var(--s-base);
	padding: var(--s-snug);
	border-radius: var(--r-base);
	background: #10331b;
	color: #b6f2c9;
	font-size: var(--petite);
}

.s51-note {
	margin-block-start: var(--s-base);
	color: var(--muted);
	font-size: var(--petite);
}

.s51-step {
	color: var(--pop);
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- author byline (BYLINE-05 full-width bar) ------------ */
.r22 {
	display: block;
	padding-block: var(--s-base);
	background: var(--prime);
	color: #ffffff;
}

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

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

.r22-avatar {
	display: inline-flex;
	flex-shrink: 0;
	inline-size: 60px;
	block-size: 60px;
	border-radius: var(--dot);
	overflow: hidden;
	background: var(--prime);
	border: 3px solid var(--prime);
	box-sizing: content-box;
}

.r22-shot {
	inline-size: 60px;
	block-size: 60px;
	border-radius: var(--dot);
	object-fit: cover;
	object-position: center 14%;
}

.r22-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.r22-handle {
	color: #ffffff;
	background: var(--prime);
	font-family: var(--banner);
	font-size: var(--display-4);
	font-weight: var(--black);
}

.r22-step {
	color: #ffffff;
	background: var(--prime);
	text-decoration: none;
}

.r22-step:hover {
	color: #ffe1ea;
	background: var(--prime);
	text-decoration: underline;
}

.r22-credit {
	color: #ffe1ea;
	background: var(--prime);
	font-size: var(--petite);
}

.r22-on {
	color: #ffd7e1;
	background: var(--prime);
	font-size: var(--tiny);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.r22-pitch {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--s-base);
	border: var(--light) solid #ffffff;
	border-radius: var(--r-base);
	background: #9c0430;
	color: #ffffff;
	font-size: var(--petite);
	font-weight: var(--mid);
	letter-spacing: var(--airy);
	text-decoration: none;
	text-transform: uppercase;
}

.r22-pitch:hover {
	background: #ffffff;
	color: #7a0223;
}

@media (min-width: 820px) {
	.r22-guts {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* --- author card (AUTH-05 compact inline) ---------------- */
.m22-card {
	display: flex;
	gap: var(--s-snug);
	max-width: 620px;
	padding: var(--s-base);
	border: var(--light) solid var(--line);
	border-radius: var(--r-base);
	background: var(--raised);
	color: var(--fg);
}

.m22-avatar {
	display: inline-flex;
	flex-shrink: 0;
	inline-size: 96px;
	block-size: 96px;
	border-radius: var(--dot);
	overflow: hidden;
	background: var(--raised);
	border: 3px solid var(--raised);
	box-sizing: content-box;
}

.m22-shot {
	inline-size: 96px;
	block-size: 96px;
	border-radius: var(--dot);
	object-fit: cover;
	object-position: center 14%;
}

.m22-part {
	display: flex;
	flex-direction: column;
	gap: var(--s-hair);
}

.m22-credit {
	margin: 0;
	color: var(--pop);
	background: var(--raised);
	font-size: var(--tiny);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.m22-handle {
	margin: 0;
	color: var(--fg);
	background: var(--raised);
	font-family: var(--banner);
	font-size: var(--lg-2);
	font-weight: var(--black);
}

.m22-text {
	margin: 0;
	color: var(--muted);
	background: var(--raised);
	font-size: var(--petite);
	line-height: var(--normal);
}

.m22-stack {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-tiny);
	margin: var(--s-tiny) 0 0;
	padding: 0;
	list-style: none;
}

.m22-badge {
	padding: 2px var(--s-tiny);
	border-radius: var(--pill);
	background: #26262e;
	color: var(--muted);
	font-size: var(--tiny);
}

.m22-articles {
	display: block;
	padding-block: var(--s-base) 0;
}

.m22-articles-top {
	margin: 0 0 var(--s-snug);
	font-family: var(--banner);
	font-size: var(--display-4);
	font-weight: var(--black);
	text-transform: uppercase;
}

.m22-articles-stack {
	display: flex;
	flex-direction: column;
	gap: var(--s-tiny);
	margin: 0;
	padding: 0;
	list-style: none;
}

.m22-articles-cell {
	color: var(--muted);
	font-size: var(--petite);
	line-height: var(--normal);
}

.m22-step {
	color: var(--pop);
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.m22-step:hover {
	color: var(--accent-strong);
	background: transparent;
}

.m22-on {
	color: var(--muted);
	background: transparent;
	font-size: var(--tiny);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

/* --- error block (ERR-02 split editorial) ---------------- */
.u33 {
	padding-block: var(--s-roomy);
}

.u33-guts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-base);
	align-items: center;
}

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

.u33-text {
	margin: 0;
	max-width: var(--slim);
	color: var(--muted);
	font-size: var(--reading);
	line-height: var(--open);
}

.u33-home {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding-inline: var(--s-wide);
	border-radius: var(--r-base);
	background: var(--pop);
	color: #05242c;
	font-family: var(--banner);
	font-size: var(--sm-2);
	font-weight: var(--black);
	letter-spacing: var(--airy);
	text-transform: uppercase;
	text-decoration: none;
}

.u33-glyph {
	margin: 0;
	background: transparent;
	color: var(--prime);
	font-family: var(--banner);
	font-size: clamp(110px, 22vw, 240px);
	font-weight: var(--black);
	line-height: var(--dense);
	letter-spacing: var(--snug);
}

@media (min-width: 820px) {
	.u33-guts {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.u33-glyph {
		justify-self: end;
	}
}

/* --- footer (FOOT-02 two rows) --------------------------- */
.d03 {
	margin-block-start: var(--s-base);
	padding-block: var(--s-wide);
	background: var(--base-plane);
	color: var(--fg);
	border-top: var(--light) solid var(--line);
}

.d03-band {
	inline-size: 100%;
	max-width: calc(var(--page) + 2 * var(--inset-desktop));
	margin-inline: auto;
	padding-inline: var(--flat-pad);
}

.d03-strip {
	display: flex;
	flex-direction: column;
	gap: var(--s-base);
	align-items: center;
	text-align: center;
}

.d03-strip--lead {
	align-items: center;
}

.d03-strip--base {
	margin-block-start: var(--s-base);
	padding-block-start: var(--s-snug);
	border-top: var(--light) solid var(--line);
}

.d03-logo {
	display: inline-flex;
	flex-shrink: 0;
	background: #ffffff;
	color: #101014;
	border-radius: var(--r-snug);
	overflow: hidden;
	text-decoration: none;
}

.d03-logo img {
	display: block;
	height: 52px;
	width: auto;
}

.d03-mark {
	object-fit: contain;
}

.d03-guide {
	display: block;
}

.d03-top {
	margin: 0 0 var(--s-tiny);
	color: var(--muted);
	font-size: var(--tiny);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.d03-stack {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-snug);
	margin: 0;
	padding: 0;
	list-style: none;
}

.d03-cell {
	display: inline-flex;
}

.d03-step {
	color: var(--muted);
	background: transparent;
	font-size: var(--petite);
	text-decoration: none;
	transition: color var(--quick) var(--land);
}

.d03-step:hover {
	color: var(--fg);
	background: transparent;
	text-decoration: underline;
}

.d03-note {
	color: var(--muted);
	background: transparent;
	font-size: var(--petite);
}

.d03-rules {
	display: block;
}

.d03-fine {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-snug);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 820px) {
	.d03-strip {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}

	.d03-stack,
	.d03-fine {
		justify-content: flex-end;
	}
}

/* --- cookie banner (COOK-03 corner card) ----------------- */
.b36 {
	display: none;
	position: fixed;
	inset-block-end: var(--s-snug);
	inset-inline-end: var(--s-snug);
	inset-inline-start: var(--s-snug);
	z-index: 90;
	max-inline-size: 360px;
	margin-inline-start: auto;
}

.b36.is-shown {
	display: block;
}

.b36.is-gone {
	display: block;
	transform: translateX(calc(100% + 40px));
	transition: transform var(--t-mid) var(--land);
}

.b36-slab {
	display: flex;
	flex-direction: column;
	gap: var(--s-snug);
	padding: var(--s-base);
	border: var(--light) solid var(--line);
	border-radius: var(--r-wide);
	background: var(--raised);
	color: var(--fg);
	box-shadow: var(--d-wide);
}

.b36-top {
	margin: 0;
	color: var(--pop);
	background: var(--raised);
	font-family: var(--banner);
	font-size: var(--display-4);
	font-weight: var(--black);
	letter-spacing: var(--airy);
	text-transform: uppercase;
}

.b36-line {
	margin: 0;
	color: var(--muted);
	background: var(--raised);
	font-size: var(--petite);
	line-height: var(--normal);
}

.b36-keys {
	display: flex;
	gap: var(--s-tiny);
}

.b36-allow,
.b36-reject {
	flex: 1 1 50%;
	min-height: 42px;
	border: 0;
	border-radius: var(--r-base);
	font-family: var(--copy);
	font-size: var(--petite);
	font-weight: var(--mid);
	cursor: pointer;
}

.b36-allow {
	background: var(--pop);
	color: #05242c;
}

.b36-reject {
	background: #2e2e37;
	color: var(--fg);
}

.b36-reject:hover {
	background: #3a3a45;
	color: var(--fg);
}

@media (max-width: 720px) {
	.b36-slab {
		padding: 12px 14px;
		gap: var(--s-tiny);
	}

	.b36-top {
		display: none;
	}

	.b36-line {
		font-size: 12px;
		line-height: 1.35;
	}

	.b36-allow,
	.b36-reject {
		min-height: 38px;
		font-size: 12px;
	}
}

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

/* --- offer button (cta-style, domain-seeded) ------------- */
.tozu-go{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--s-wide);min-height:48px;border-radius:var(--r-base);font-size:var(--sm-2);font-weight:var(--black);letter-spacing:var(--airy)}
.tozu-go{position:relative;
  background:#4F46E5;color:#FFFFFF;text-decoration:none;text-transform:uppercase;
  transition:background var(--t-mid) var(--land),color var(--t-mid) var(--land);}
.tozu-go.tozu-go{color:#FFFFFF;text-decoration:none;}
.tozu-go:hover{background:#4338CA;color:#FFFFFF;animation:none}
.tozu-go.tozu-go:hover{color:#FFFFFF;text-decoration:none}
.tozu-go:hover::after{animation:none}
.tozu-go:active{background:#3730A3;color:#FFFFFF}
.tozu-go:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
@keyframes tozu-beat{0%,100%{transform:scaleX(0)}40%,60%{transform:scaleX(1)}}
.tozu-go::after{content:"";position:absolute;left:12%;right:12%;bottom:6px;height:4px;background:currentColor;opacity:.5;transform-origin:left;animation:tozu-beat 1.2s cubic-bezier(.30,.15,.85,1) infinite}
@media (prefers-reduced-motion:reduce){.tozu-go,.tozu-go::after{animation:none!important;transition:none!important}}

/* --- offer button in site context ------------------------ */
.tozu-go {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16), 0 10px 26px rgba(79, 70, 229, 0.42);
}

.y27-keys .y27-button.tozu-go {
	min-height: 40px;
	padding: 0 var(--s-base);
	font-size: 13px;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.y27-pane .y27-pane-act.tozu-go {
	display: flex;
	inline-size: 100%;
	min-height: 46px;
}

.b14-keys .b14-pitch.tozu-go {
	box-shadow: 0 6px 18px rgba(5, 20, 24, 0.35);
}

.q73-card .q73-pitch.tozu-go {
	min-height: 46px;
	padding: 0 var(--s-base);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28);
}

@media (min-width: 900px) {
	.y27-keys .y27-button.tozu-go {
		font-size: 14px;
		padding: 0 var(--s-wide);
	}
}

/* --- narrow desktop: give the row back to the menu ------- */
@media (min-width: 900px) and (max-width: 1179px) {
	.y27-logo img {
		height: 46px;
	}

	.y27-keys .y27-button.tozu-go {
		padding: 0 var(--s-snug);
		font-size: 12px;
		letter-spacing: var(--regular);
	}

	.y27-more-opener {
		font-size: 13px;
	}
}

@media (max-width: 929px) {
  .y27-guide,
  .y27-stack,
  .y27-step,
  .y27-keys,
  .y27-button { display: none !important; }
  .y27-opener { display: flex !important; }
}