/* rockyspincasino-it-1 — foglio di stile principale.
   Scala tipografica TYPO-09, spaziatura SPACE-05, contenitore CONT-06,
   geometria GEO-02, punti di rottura BP-03. I nomi delle variabili sono
   propri di questa build: nessun nome canonico viene usato. */

:root {
	--accent-pressed: #1c9a4b;
	--base-plane: #0c0814;
	--beacon: #23bf5c;
	--black: 700;
	--both: cubic-bezier(0.39, 0.07, 0.28, 0.94);
	--calm: 629ms;
	--close: 0;
	--copy: 17px;
	--d-base: 0 6px 18px rgba(0, 0, 0, 0.34);
	--d-hair: 0 1px 1px rgba(0, 0, 0, 0.2);
	--d-huge: 0 40px 90px rgba(0, 0, 0, 0.52);
	--d-roomy: 0 20px 46px rgba(0, 0, 0, 0.44);
	--d-snug: 0 2px 6px rgba(0, 0, 0, 0.26);
	--d-tiny: 0 1px 2px rgba(0, 0, 0, 0.22);
	--d-vast: 0 28px 64px rgba(0, 0, 0, 0.48);
	--d-wide: 0 12px 32px rgba(0, 0, 0, 0.4);
	--default: 1.55;
	--display: "Montserrat", "Segoe UI", Tahoma, sans-serif;
	--display-1: 52px;
	--e-normal: 0;
	--edge-hard: rgba(255, 255, 255, 0.26);
	--edge-narrow: 12px;
	--exit: cubic-bezier(0.19, 0.63, 0.34, 1);
	--fine: 14px;
	--grad-1: #fbce12;
	--h-lg: 76px;
	--h6: 14px;
	--hair: 1px;
	--head: 32px;
	--inset-tablet: 20px;
	--line: rgba(255, 255, 255, 0.13);
	--loose: 0.02em;
	--medium: 2px;
	--micro: 12px;
	--mid: 300ms;
	--narrow: 590px;
	--normal: 400;
	--notice: #9e2a2b;
	--pad-lg: 32px;
	--pill: 9999px;
	--prime: #191324;
	--quick: 148ms;
	--quiet: #bfbdbd;
	--r-base: 12px;
	--r-hair: 2px;
	--r-huge: 40px;
	--r-roomy: 26px;
	--r-snug: 8px;
	--r-tiny: 4px;
	--r-vast: 32px;
	--r-wide: 20px;
	--ramp-end: #7d34ee;
	--readable: 760px;
	--reading: "Montserrat", "Segoe UI", Tahoma, sans-serif;
	--relaxed: 1.7;
	--round-full: 50%;
	--s-base: 28px;
	--s-hair: 3px;
	--s-huge: 128px;
	--s-roomy: 60px;
	--s-snug: 18px;
	--s-tiny: 10px;
	--s-vast: 88px;
	--s-wide: 44px;
	--script: #ffffff;
	--semi: 500;
	--short: 60px;
	--site: 1120px;
	--sm-2: 16px;
	--spring: cubic-bezier(0.22, 1.5, 0.67, 1.35);
	--sub: 24px;
	--sub-2: 19px;
	--surface-2: #171029;
	--take-off: cubic-bezier(0.39, 0.07, 0.28, 0.94);
	--tight: 1.15;
	--wide: 3px;
}

/* Scala mobile della tipografia: la stessa gerarchia, corpi più contenuti. */
@media (max-width: 600px) {
	:root {
		--copy: 16px;
		--display-1: 30px;
		--fine: 13px;
		--h-lg: 62px;
		--h6: 13px;
		--head: 24px;
		--micro: 11px;
		--sm-2: 15px;
		--sub: 20px;
		--sub-2: 17px;
	}
}

/* ── Reset e base ───────────────────────────────────────────── */

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

html,
body {
	overflow-x: clip;
}

body {
	background: var(--base-plane);
	color: var(--script);
	font-family: var(--reading);
	font-size: var(--copy);
	font-weight: var(--normal);
	line-height: var(--default);
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
}

a {
	color: var(--beacon);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

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

h1 {
	font-family: var(--display);
	font-size: var(--display-1);
	font-weight: var(--black);
	letter-spacing: var(--close);
	line-height: var(--tight);
}

h2 {
	font-family: var(--display);
	font-size: var(--head);
	font-weight: var(--black);
	line-height: var(--tight);
}

h3 {
	font-family: var(--reading);
	font-size: var(--sub);
	font-style: italic;
	font-weight: var(--semi);
	line-height: var(--tight);
}

h4,
h5,
h6 {
	font-family: var(--reading);
	font-weight: var(--semi);
}

p {
	overflow-wrap: anywhere;
}

table {
	border-collapse: collapse;
}

button {
	font: inherit;
}

/* ── Accessibilità e movimento ──────────────────────────────── */

.skip-anchor {
	background: var(--beacon);
	color: var(--base-plane);
	font-weight: var(--black);
	left: var(--s-tiny);
	padding: var(--s-tiny) var(--s-snug);
	position: fixed;
	top: var(--s-tiny);
	z-index: 200;
}

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

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

[data-step] {
	filter: blur(9px);
	opacity: 0;
	transform: translateY(26px);
	transition: filter var(--calm) var(--exit), opacity var(--calm) var(--exit), transform var(--calm) var(--exit);
}

[data-step].is-visible {
	filter: blur(0);
	opacity: 1;
	transform: none;
}

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

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

/* ── Contenitori di sezione: una sola larghezza su tutto il sito ─── */

.c90-core,
.e81-core,
.e83-core,
.e85-core,
.j44-core,
.j48-core,
.k60-core,
.o72-core,
.p08-core,
.r73-core,
.u02-core,
.w22-core,
.x28-core,
.x34-core {
	margin-inline: auto;
	max-width: calc(var(--site) + 2 * var(--pad-lg));
	padding-inline: var(--pad-lg);
	width: 100%;
}

@media (max-width: 900px) {
	.c90-core,
	.e81-core,
	.e83-core,
	.e85-core,
	.j44-core,
	.j48-core,
	.k60-core,
	.o72-core,
	.p08-core,
	.r73-core,
	.u02-core,
	.w22-core,
	.x28-core,
	.x34-core {
		padding-inline: var(--inset-tablet);
	}
}

@media (max-width: 600px) {
	.c90-core,
	.e81-core,
	.e83-core,
	.e85-core,
	.j44-core,
	.j48-core,
	.k60-core,
	.o72-core,
	.p08-core,
	.r73-core,
	.u02-core,
	.w22-core,
	.x28-core,
	.x34-core {
		padding-inline: var(--edge-narrow);
	}
}

/* ── Intestazione HEAD-SUBNAV: riga principale + fascia sezioni ── */

.z39 {
	background: var(--prime);
	border-bottom: var(--hair) solid var(--line);
	color: var(--script);
	position: sticky;
	top: 0;
	transition: box-shadow var(--mid) var(--exit);
	z-index: 100;
}

.z39.is-stuck {
	box-shadow: var(--d-wide);
}

.z39-main {
	align-items: center;
	display: flex;
	height: var(--h-lg);
	transition: height var(--mid) var(--exit);
}

.z39.is-shrunk .z39-main {
	height: var(--short);
}

.z39-core {
	align-items: center;
	display: flex;
	gap: var(--s-snug);
	justify-content: space-between;
	margin-inline: auto;
	max-width: calc(var(--site) + 2 * var(--pad-lg));
	padding-inline: var(--s-base);
	width: 100%;
}

@media (max-width: 600px) {
	.z39-core {
		padding-inline: var(--edge-narrow);
	}
}

.z39-crest {
	align-items: center;
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
}

.z39-crest-image {
	display: block;
	flex-shrink: 0;
	height: 60px;
	transition: height var(--mid) var(--exit);
	width: auto;
}

.z39.is-shrunk .z39-crest-image {
	height: 44px;
}

@media (max-width: 600px) {
	.z39-crest-image {
		height: 44px;
	}
}

.z39-strap {
	border-top: var(--hair) solid var(--line);
	height: 58px;
}

.z39-map {
	display: block;
	width: 100%;
}

.z39-series {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--s-tiny);
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.z39-unit:not(:last-child)::after {
	color: var(--edge-hard);
	content: "/";
	font-size: var(--micro);
}

.z39-anchor {
	color: var(--quiet);
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	line-height: 58px;
	padding-inline: var(--s-hair);
	position: relative;
	text-decoration: none;
	text-transform: none;
	transition: color var(--quick) var(--exit), transform var(--quick) var(--exit);
	white-space: nowrap;
}

.z39-anchor:hover {
	color: var(--script);
	transform: translateY(-2px);
}

.z39-anchor[aria-current="page"] {
	color: var(--script);
}

.z39-anchor[aria-current="page"]::before {
	background: var(--beacon);
	border-radius: var(--round-full);
	bottom: 12px;
	content: "";
	height: 5px;
	left: calc(50% - 2.5px);
	position: absolute;
	width: 5px;
}

.z39-knob {
	background: none;
	border: 0;
	cursor: pointer;
	display: none;
	gap: 3px;
	grid-template-columns: repeat(2, 9px);
	min-height: 44px;
	min-width: 44px;
	padding: var(--s-tiny);
	place-content: center;
}

.z39-knob-cell {
	background: var(--script);
	border-radius: var(--r-hair);
	height: 9px;
	width: 9px;
}

.z39-slide {
	background: var(--prime);
	border-top: var(--hair) solid var(--line);
	display: none;
	left: 0;
	max-height: 70vh;
	overflow-y: auto;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 99;
}

.z39-slide.is-open {
	display: block;
}

.z39-slide-map {
	padding: var(--s-snug) var(--inset-tablet);
}

.z39-slide-series {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.z39-slide-anchor {
	border-bottom: var(--hair) solid var(--line);
	color: var(--script);
	display: block;
	font-size: var(--sm-2);
	padding: var(--s-snug) 0;
	text-decoration: none;
}

.z39-slide-anchor:hover {
	color: var(--beacon);
}

@media (max-width: 900px) {
	.z39-knob {
		display: grid;
		margin-left: auto;
	}

	.z39-map {
		display: none;
	}

	.z39-strap {
		display: none;
	}
}

/* ── Fascia 18+ (RG-02, sotto l'intestazione) ───────────────── */

.notice-bar {
	background: var(--notice);
	color: #ffffff;
	font-size: var(--micro);
	line-height: var(--default);
	padding: var(--s-tiny) var(--inset-tablet);
	text-align: center;
}

.notice-bar-anchor {
	color: #ffffff;
	text-underline-offset: 2px;
}

/* ── HERO-08 «copertina da rivista» ─────────────────────────── */

.x28 {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: min(100vh, 820px);
	overflow: hidden;
	padding-block: var(--s-roomy);
	position: relative;
}

.x28-image {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.x28-veil {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4));
	inset: 0;
	position: absolute;
}

.x28-core {
	position: relative;
	text-align: center;
	z-index: 2;
}

.x28-tag {
	color: rgba(255, 255, 255, 0.72);
	display: block;
	font-size: var(--micro);
	letter-spacing: var(--loose);
	margin-bottom: var(--s-snug);
	text-transform: uppercase;
}

.x28-core h1 {
	color: #ffffff;
	margin-inline: auto;
	text-wrap: balance;
}

.x28-deck {
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--sm-2);
	line-height: var(--default);
	margin-block: var(--s-snug) var(--s-base);
	margin-inline: auto;
	max-width: var(--narrow);
}

.x28-extra {
	align-items: center;
	color: rgba(255, 255, 255, 0.72);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--fine);
	gap: var(--s-snug);
	justify-content: center;
}

.x28-extra span + span::before {
	color: rgba(255, 255, 255, 0.35);
	content: "|";
	margin-right: var(--s-snug);
}

.x28-hint {
	bottom: var(--s-base);
	color: rgba(255, 255, 255, 0.6);
	left: calc(50% - 12px);
	position: absolute;
	z-index: 2;
}

.x28-hint svg {
	fill: none;
	height: 24px;
	stroke: currentColor;
	stroke-width: 2;
	width: 24px;
}

/* ── PHEAD-02 intestazione di pagina, compatta e centrata ───── */

.o72 {
	background: var(--base-plane);
	padding-block: var(--s-wide);
}

.o72-core {
	text-align: center;
}

.o72-rule {
	background: var(--beacon);
	display: block;
	height: var(--medium);
	margin: var(--s-snug) auto;
	width: 60px;
}

.o72-deck {
	color: var(--quiet);
	margin: 0 auto;
	max-width: var(--narrow);
}

.o72-extra {
	color: var(--quiet);
	display: block;
	font-size: var(--fine);
	margin-top: var(--s-tiny);
}

/* ── PROSE-26 «linea lungo tutta la sezione» ────────────────── */

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

.u02-meat {
	border-left: var(--medium) dashed var(--line);
	padding-inline-start: var(--s-wide);
}

.u02-meat h2 {
	margin-block: 0 var(--s-snug);
}

.u02-meat p {
	color: var(--quiet);
	font-size: var(--copy);
	line-height: var(--relaxed);
	margin-block: 0 var(--s-snug);
}

.u02-meat p:last-child {
	margin-bottom: 0;
}

.u02-meat strong {
	color: var(--script);
	font-weight: var(--black);
}

.u02-series {
	color: var(--quiet);
	line-height: var(--relaxed);
	margin-block: 0 var(--s-snug);
	padding-inline-start: var(--s-snug);
}

.u02-series li {
	margin-bottom: var(--s-tiny);
}

.u02-meat a {
	color: var(--beacon);
	text-decoration: underline;
}

.u02-meat a:hover {
	text-decoration-thickness: 2px;
	transition: text-decoration-thickness var(--quick) var(--exit);
}

.u02-pitch {
	margin-block: var(--s-base) 0;
	padding-inline-start: var(--s-wide);
}

@media (max-width: 600px) {
	.u02-meat {
		padding-inline-start: var(--s-snug);
	}

	.u02-pitch {
		padding-inline-start: var(--s-snug);
	}
}

/* ── GRID-07 elenco «voci d'articolo» ───────────────────────── */

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

.e81 h2 {
	margin-bottom: var(--s-base);
}

.e81-series {
	display: flex;
	flex-direction: column;
	gap: var(--s-wide);
}

.e81-unit {
	display: block;
}

.e81-mark {
	color: var(--beacon);
	display: block;
	margin-bottom: var(--s-tiny);
}

.e81-mark svg {
	fill: currentColor;
	height: 28px;
	width: 28px;
}

.e81-title {
	font-family: var(--display);
	font-size: var(--sub);
	font-style: normal;
	font-weight: var(--black);
}

.e81-rule {
	background: var(--beacon);
	display: block;
	height: var(--medium);
	margin-block: var(--s-tiny);
	width: 60px;
}

.e81-body {
	color: var(--quiet);
	line-height: var(--relaxed);
	margin: 0;
}

/* ── TABLE-06 tabella editoriale con didascalia ─────────────── */

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

.k60-figure {
	margin: 0;
}

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

.j48-pitch {
	margin: var(--s-base) 0 0;
}

.k60-grid {
	min-width: 560px;
	width: 100%;
}

.k60-caption {
	color: var(--quiet);
	font-family: var(--display);
	font-size: var(--sub-2);
	font-style: italic;
	padding-bottom: var(--s-base);
	text-align: center;
}

.k60-caption::before {
	background: var(--beacon);
	content: "";
	display: block;
	height: var(--medium);
	margin: 0 auto var(--s-tiny);
	width: 40px;
}

.k60-grid th {
	border-bottom: var(--medium) solid var(--edge-hard);
	color: var(--script);
	font-family: var(--display);
	font-size: var(--fine);
	font-weight: var(--black);
	letter-spacing: var(--loose);
	padding: var(--s-snug) var(--s-tiny);
	text-align: left;
	text-transform: uppercase;
}

.k60-grid td {
	border-bottom: var(--hair) solid var(--line);
	color: var(--quiet);
	font-size: var(--fine);
	padding: var(--s-snug) var(--s-tiny);
	vertical-align: top;
}

.k60-grid tbody tr td:first-child {
	color: var(--script);
	font-weight: var(--semi);
}

/* ── REV-10 opinioni, minimali e sottolineate ───────────────── */

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

.j48 h2 {
	margin-bottom: var(--s-base);
}

.j48-series {
	display: flex;
	flex-direction: column;
}

.j48-unit {
	border-bottom: var(--hair) dotted var(--edge-hard);
	padding-block: var(--s-base);
}

.j48-rank {
	margin: 0 0 var(--s-tiny);
}

.j48-who {
	color: var(--script);
	font-weight: var(--semi);
}

.j48-score {
	color: var(--quiet);
}

.j48-when {
	color: var(--quiet);
}

.j48-body {
	border: 0;
	color: var(--quiet);
	line-height: var(--relaxed);
	margin: 0;
	padding: 0;
}

.j48-body p {
	margin: 0;
}

/* ── FAQ-04 fisarmonica con numero laterale ─────────────────── */

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

.e85 h2 {
	margin-bottom: var(--s-base);
}

.e85-series {
	margin: 0;
}

.e85-unit {
	border-bottom: var(--hair) solid var(--line);
}

.e85-fold {
	display: block;
}

.e85-ask {
	align-items: start;
	cursor: pointer;
	display: grid;
	gap: var(--s-tiny);
	grid-template-columns: 60px 1fr auto;
	list-style: none;
	min-height: 44px;
	padding-block: var(--s-snug);
}

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

.e85-num {
	color: var(--beacon);
	font-family: var(--display);
	font-size: var(--sub);
	font-weight: var(--black);
	line-height: var(--tight);
}

.e85-title {
	font-family: var(--reading);
	font-size: var(--sub-2);
	font-style: normal;
	font-weight: var(--semi);
	line-height: var(--default);
}

.e85-arrow {
	color: var(--quiet);
	transition: transform var(--mid) var(--exit);
}

.e85-arrow svg {
	fill: none;
	height: 20px;
	stroke: currentColor;
	stroke-width: 2;
	width: 20px;
}

.e85-fold[open] .e85-arrow {
	transform: rotate(180deg);
}

.e85-answer {
	animation: e85-unfold var(--mid) var(--exit);
	color: var(--quiet);
	line-height: var(--relaxed);
	padding: 0 0 var(--s-snug) 60px;
}

.e85-answer p {
	margin: 0;
}

@keyframes e85-unfold {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 600px) {
	.e85-ask {
		grid-template-columns: 34px 1fr auto;
	}

	.e85-answer {
		padding-left: 34px;
	}
}

/* ── CTA-05 doppia azione ───────────────────────────────────── */

.x34 {
	background: var(--prime);
	padding-block: var(--s-wide);
}

.x34 h2 {
	margin-bottom: var(--s-snug);
}

.x34-body {
	color: var(--quiet);
	line-height: var(--relaxed);
	margin: 0 0 var(--s-base);
}

.x34-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-base);
}

.x34-fine {
	color: var(--quiet);
	font-size: var(--micro);
	margin: var(--s-snug) 0 0;
}

.x34-tap--quiet {
	align-items: center;
	background: transparent;
	border: var(--hair) solid var(--quiet);
	border-radius: var(--r-base);
	color: var(--script);
	display: inline-flex;
	font-family: var(--reading);
	font-size: var(--sm-2);
	font-weight: var(--semi);
	justify-content: center;
	min-height: 48px;
	padding-inline: var(--s-base);
	text-decoration: none;
	transition: background var(--quick) var(--exit), border-color var(--quick) var(--exit);
}

.x34-tap--quiet:hover {
	background: var(--surface-2);
	border-color: var(--script);
	color: var(--script);
}

/* Pulsante offerta — colore, forma e animazione da scripts/cta-style.mjs
   (fuori dalla palette del sito: deve staccarsi dal contesto). */

.x34-tap {
	align-items: center;
	animation: stamp-timc 2.38s var(--both) infinite;
	background: #0284c7;
	border: 1px solid #0c0814;
	border-radius: var(--r-hair);
	box-shadow: 4px 4px 0 #0c0814;
	color: #0c0814;
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	isolation: isolate;
	justify-content: center;
	letter-spacing: 1.4px;
	min-height: 54px;
	padding: 0 26px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	transition: background var(--quick) var(--exit), box-shadow var(--quick) var(--exit), color var(--quick) var(--exit), transform var(--quick) var(--exit);
}

.x34-tap:hover {
	animation: none;
	background: #0369a1;
	box-shadow: 2px 2px 0 #0c0814;
	color: #ffffff;
}

.x34-tap:active {
	background: #075985;
	color: #ffffff;
}

.x34-tap:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

@keyframes stamp-timc {
	0% {
		transform: translate(0, 0);
	}

	13.445% {
		transform: translate(3px, 3px);
	}

	36.975%,
	100% {
		transform: translate(0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.x34-tap {
		animation: none !important;
	}
}

/* ── INLINE-CTA-05 citazione evidenziata ────────────────────── */

.c90 {
	background: var(--surface-2);
	padding-block: var(--s-wide);
}

.c90-core {
	max-width: var(--narrow);
	text-align: center;
}

.c90-quote {
	color: var(--script);
	font-family: var(--display);
	font-size: var(--sub);
	font-style: italic;
	line-height: var(--tight);
	margin: 0 0 var(--s-base);
}

/* ── BYLINE-05 fascia autore a tutta larghezza ──────────────── */

.r73 {
	background: var(--prime);
	padding-block: var(--s-base);
}

.r73-core {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-snug);
	justify-content: space-between;
}

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

.r73-face {
	border-radius: var(--round-full);
	height: 56px;
	object-fit: cover;
	width: 56px;
}

.r73-body {
	display: block;
}

.r73-who {
	color: var(--script);
	display: block;
	font-weight: var(--semi);
	margin: 0;
}

.r73-who a {
	color: var(--script);
	text-decoration: none;
}

.r73-who a:hover {
	color: var(--beacon);
}

.r73-post {
	color: var(--quiet);
	display: block;
	font-size: var(--fine);
	margin: 0;
}

.r73-when {
	color: var(--quiet);
	display: block;
	font-size: var(--micro);
	margin-top: var(--s-hair);
}

.r73-pitch {
	background: var(--prime);
	border: var(--hair) solid var(--beacon);
	border-radius: var(--r-base);
	color: var(--beacon);
	display: inline-flex;
	font-size: var(--fine);
	min-height: 44px;
	align-items: center;
	padding: var(--s-tiny) var(--s-base);
	text-decoration: none;
	transition: background var(--quick) var(--exit), color var(--quick) var(--exit);
}

.r73-pitch:hover {
	background: var(--beacon);
	color: var(--base-plane);
}

@media (max-width: 600px) {
	.r73-core {
		align-items: flex-start;
		flex-direction: column;
	}

	.r73-pitch {
		justify-content: center;
		width: 100%;
	}
}

/* ── AUTH-06 scheda autore a tutta pagina ───────────────────── */

.p08 {
	background: linear-gradient(135deg, var(--prime), var(--base-plane));
	padding-block: var(--s-roomy);
}

.p08-core {
	display: grid;
	gap: var(--s-wide);
	grid-template-columns: 280px 1fr;
}

.p08-face {
	aspect-ratio: 4 / 5;
	border-radius: var(--r-wide);
	box-shadow: var(--d-wide);
	object-fit: cover;
	width: 100%;
}

.p08-meat {
	display: block;
}

.p08-tag {
	color: var(--beacon);
	display: block;
	font-size: var(--fine);
	letter-spacing: var(--loose);
	margin-bottom: var(--s-tiny);
	text-transform: uppercase;
}

.p08-body {
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--sm-2);
	line-height: var(--default);
	margin-block: var(--s-snug);
	max-width: 540px;
}

.p08-series {
	color: var(--quiet);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-tiny);
	list-style: none;
	margin: 0;
	padding: 0;
}

.p08-series li {
	border: var(--hair) solid var(--line);
	border-radius: var(--pill);
	font-size: var(--micro);
	padding: var(--s-hair) var(--s-snug);
}

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

	.p08-face {
		max-width: 260px;
	}
}

/* ── LEGAL-02 sezioni numerate ──────────────────────────────── */

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

.j44-meat {
	counter-reset: legal-part;
}

.j44-lead {
	color: var(--quiet);
	line-height: var(--relaxed);
	margin-block: 0 var(--s-base);
}

.j44-part {
	counter-increment: legal-part;
	margin-bottom: var(--s-base);
}

.j44-part h3 {
	font-family: var(--display);
	font-size: var(--sub-2);
	font-style: normal;
	font-weight: var(--black);
	margin-bottom: var(--s-tiny);
}

.j44-part h3::before {
	color: var(--beacon);
	content: counter(legal-part) ". ";
	font-family: var(--display);
	font-weight: var(--black);
	margin-right: var(--s-tiny);
}

.j44-part p {
	color: var(--quiet);
	line-height: var(--relaxed);
	margin-block: 0 var(--s-snug);
	padding-left: var(--s-base);
}

.j44-series {
	color: var(--quiet);
	line-height: var(--relaxed);
	padding-inline-start: var(--s-wide);
}

.j44-fine {
	border-top: var(--hair) solid var(--line);
	color: var(--quiet);
	font-size: var(--fine);
	margin-top: var(--s-base);
	padding-top: var(--s-snug);
}

@media (max-width: 600px) {
	.j44-part p {
		padding-left: 0;
	}
}

/* ── FORM-05 modulo editoriale in cornice ───────────────────── */

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

.e83-shell {
	border: var(--medium) solid var(--beacon);
	border-radius: var(--r-base);
	padding: var(--s-base);
}

.e83-form {
	display: block;
}

.e83-lead {
	color: var(--quiet);
	line-height: var(--relaxed);
	margin-block: 0 var(--s-base);
}

.e83-slot {
	display: block;
	margin-bottom: var(--s-base);
}

.e83-tag {
	color: var(--quiet);
	display: block;
	font-size: var(--micro);
	letter-spacing: var(--loose);
	margin-bottom: var(--s-hair);
	text-transform: uppercase;
}

.e83-entry {
	background: transparent;
	border: 0;
	border-bottom: var(--hair) solid var(--edge-hard);
	color: var(--script);
	font-family: var(--reading);
	font-size: var(--sm-2);
	padding: var(--s-tiny) 0;
	width: 100%;
}

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

.e83-send {
	background: var(--beacon);
	border: 0;
	border-radius: var(--r-base);
	color: var(--base-plane);
	cursor: pointer;
	font-family: var(--reading);
	font-size: var(--sm-2);
	font-weight: var(--black);
	min-height: 48px;
	padding-inline: var(--s-base);
	transition: background var(--quick) var(--exit);
}

.e83-send:hover {
	background: var(--accent-pressed);
	color: var(--base-plane);
}

.e83-done {
	border: var(--hair) solid var(--beacon);
	border-radius: var(--r-snug);
	color: var(--beacon);
	display: none;
	margin-top: var(--s-snug);
	padding: var(--s-snug);
}

.e83-done.is-open {
	display: block;
}

/* ── ERR-01 blocco errore centrato ──────────────────────────── */

.w22 {
	padding-block: var(--s-huge);
	text-align: center;
}

.w22-core {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--s-base);
}

.w22-num {
	color: var(--beacon);
	font-family: var(--display);
	font-size: clamp(80px, 18vw, 200px);
	font-weight: var(--black);
	line-height: var(--tight);
}

.w22-core h1 {
	max-width: var(--narrow);
}

.w22-body {
	color: var(--quiet);
	font-size: var(--sm-2);
	line-height: var(--default);
	margin: 0;
	max-width: var(--narrow);
}

.w22-tap {
	align-items: center;
	background: var(--beacon);
	border-radius: var(--r-base);
	color: var(--base-plane);
	display: inline-flex;
	font-family: var(--display);
	font-weight: var(--black);
	letter-spacing: var(--loose);
	min-height: 52px;
	padding-inline: var(--s-roomy);
	text-decoration: none;
	transition: background var(--quick) var(--exit);
}

.w22-tap:hover {
	background: var(--accent-pressed);
	color: var(--base-plane);
}

/* ── FOOT-10 piè di pagina a fasce ──────────────────────────── */

.d87 {
	background: var(--prime);
	color: var(--quiet);
	padding-block: var(--s-roomy);
}

.d87-core {
	margin-inline: auto;
	max-width: calc(var(--site) + 2 * var(--pad-lg));
	padding-inline: var(--pad-lg);
	width: 100%;
}

@media (max-width: 600px) {
	.d87-core {
		padding-inline: var(--edge-narrow);
	}
}

.d87-strap {
	align-items: center;
	border-bottom: var(--hair) solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-base);
	justify-content: space-between;
	padding-block: var(--s-wide);
}

.d87-crest {
	display: inline-flex;
	line-height: 0;
}

.d87-crest-image {
	display: block;
	height: 44px;
	width: auto;
}

.d87-words {
	color: var(--quiet);
	font-size: var(--fine);
	margin: 0;
	max-width: 540px;
}

.d87-grid {
	border-bottom: var(--hair) solid rgba(255, 255, 255, 0.08);
	display: grid;
	gap: var(--s-base);
	grid-template-columns: repeat(3, 1fr);
	padding-block: var(--s-roomy);
}

.d87-strip {
	display: block;
}

.d87-head {
	color: var(--script);
	font-family: var(--display);
	font-size: var(--h6);
	font-weight: var(--black);
	letter-spacing: var(--loose);
	margin: 0 0 var(--s-snug);
	text-transform: uppercase;
}

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

.d87-anchor {
	color: var(--quiet);
	font-size: var(--fine);
	text-decoration: none;
}

.d87-fine a {
	font-size: inherit;
}

.d87-anchor:hover {
	color: var(--beacon);
}

.d87-fine {
	border-bottom: var(--hair) solid rgba(255, 255, 255, 0.08);
	color: var(--quiet);
	font-size: var(--micro);
	line-height: var(--default);
	margin: 0;
	padding-block: var(--s-base);
}

.d87-rank {
	align-items: center;
	color: var(--quiet);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--micro);
	gap: var(--s-snug);
	justify-content: space-between;
	padding-block: var(--s-base);
}

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

@media (max-width: 900px) {
	.d87-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

/* ── COOK-02 fascia cookie a tutta larghezza in basso ───────── */

.f11 {
	background: var(--prime);
	border-top: var(--hair) solid rgba(255, 255, 255, 0.08);
	bottom: 0;
	display: none;
	left: 0;
	padding: var(--s-base) var(--pad-lg);
	position: fixed;
	right: 0;
	top: auto;
	transform: translateY(100%);
	transition: transform var(--calm) var(--exit);
	z-index: 90;
}

.f11.is-open {
	display: block;
	transform: translateY(0);
}

.f11-core {
	align-items: center;
	display: flex;
	gap: var(--s-base);
	justify-content: space-between;
	margin-inline: auto;
	max-width: calc(var(--site) + 2 * var(--pad-lg));
	width: 100%;
}

.f11-words {
	color: var(--quiet);
	flex: 1;
	font-size: var(--fine);
	margin: 0;
}

.f11-buttons {
	display: flex;
	flex-shrink: 0;
	gap: var(--s-snug);
}

.f11-approve {
	background: var(--beacon);
	border: 0;
	border-radius: var(--r-base);
	color: var(--base-plane);
	cursor: pointer;
	font-size: var(--fine);
	font-weight: var(--black);
	min-height: 44px;
	padding-inline: var(--s-snug);
	transition: background var(--quick) var(--exit);
}

.f11-approve:hover {
	background: var(--accent-pressed);
	color: var(--base-plane);
}

.f11-decline {
	background: transparent;
	border: var(--hair) solid var(--edge-hard);
	border-radius: var(--r-base);
	color: var(--quiet);
	cursor: pointer;
	font-size: var(--fine);
	min-height: 44px;
	padding-inline: var(--s-snug);
	transition: border-color var(--quick) var(--exit), color var(--quick) var(--exit);
}

.f11-decline:hover {
	border-color: var(--script);
	color: var(--script);
}

@media (max-width: 720px) {
	.f11 {
		padding: 12px 14px !important;
	}

	.f11-core {
		align-items: stretch;
		flex-direction: column;
		gap: 8px !important;
	}

	.f11-words {
		font-size: 13px !important;
		line-height: 1.35 !important;
	}

	.f11-approve,
	.f11-decline {
		font-size: 12px !important;
		min-height: 36px !important;
		padding: 8px 14px !important;
	}
}

@media (max-width: 934px) {
  .z39-strap,
  .z39-map,
  .z39-series,
  .z39-anchor { display: none !important; }
  .z39-knob { display: flex !important; }
}

/* Из правила выше убран .z39-core — это обёртка шапки, внутри
   которой лежит и кнопка меню: с display:none она получала размер 0×0,
   и мобильное меню было недоступно. */

/* ---- картинки внутри страниц ----
   Кадры бывают квадратные и вертикальные, поэтому ограничиваем и по ширине,
   и по высоте, но не режем — картинка вписывается целиком. */
.u02-page-figure {
	margin: var(--s-wide) auto;
	max-width: 560px;
	border-radius: var(--r-roomy);
	overflow: hidden;
	border: var(--hair) solid var(--line);
}
.u02-page-figure img {
	display: block;
	max-width: 100%;
	max-height: 56vh;
	width: auto;
	height: auto;
	margin-inline: auto;
}