/* ABAB · Cosa arriva */
.abab-rm {
	--rm-ink: #1D1B16;
	--rm-paper: #FFFBEA;
	--rm-yellow: #FBDA5A;
	--rm-muted: #3A372E;
	--rm-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--rm-body: 'Barlow', system-ui, sans-serif;
	max-width: 720px;
	margin: 0 auto;
	padding: 36px 16px 64px;
	color: var(--rm-ink);
	font: 400 17px/1.5 var(--rm-body);
}
.abab-rm *, .abab-rm *::before, .abab-rm *::after { box-sizing: border-box; }
.abab-rm h1, .abab-rm h2, .abab-rm p, .abab-rm ul, .abab-rm ol { margin: 0; }
.abab-rm .abab-ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.abab-rm .abab-ic .abab-f { fill: currentColor; stroke: none; }

.abab-rm-hero { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.abab-rm-kicker { display: flex; align-items: center; gap: 8px; font: 700 15px/1 var(--rm-cond); letter-spacing: .06em; text-transform: uppercase; }
.abab-rm .abab-beta-tag { background: var(--rm-ink); color: var(--rm-yellow); font: 800 12px/1 var(--rm-cond); letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; border-radius: 3px; transform: rotate(-4deg); display: inline-block; }
.abab-rm-hero h1 { font: 800 clamp(40px, 9vw, 64px)/.92 var(--rm-cond); text-transform: uppercase; letter-spacing: -.005em; }
.abab-rm-lead { font-size: 19px; line-height: 1.45; max-width: 34em; }

/* La strada */
.abab-rm-road { position: relative; padding: 28px 0 48px; margin-top: 8px; }
.abab-rm-path { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.abab-rm-path path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.abab-rm-path .is-asfalto { stroke: var(--rm-ink); stroke-width: 26; }
.abab-rm-path .is-mezzeria { stroke: var(--rm-paper); stroke-width: 2.5; stroke-dasharray: 10 10; opacity: .8; }
.abab-rm-path .is-fatta { stroke: var(--rm-yellow); stroke-width: 5; stroke-dasharray: 0 99999; }

.abab-rm-tappe { list-style: none; padding: 0; position: relative; display: flex; flex-direction: column; gap: 52px; }
.abab-rm-tappa { position: relative; padding-left: 80px; }
.abab-rm-pin { position: absolute; left: 12px; top: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--rm-yellow); border: 3px solid var(--rm-ink); font: 800 19px/1 var(--rm-cond); color: var(--rm-ink); transition: transform .45s cubic-bezier(.3, 1.8, .5, 1), box-shadow .3s; }
.abab-rm-tappa:nth-child(even) .abab-rm-pin { left: 28px; }
.abab-rm-tappa.is-fatto .abab-rm-pin { background: var(--rm-ink); color: var(--rm-yellow); border-color: var(--rm-yellow); }
.abab-rm-tappa.is-idea .abab-rm-pin { background: var(--rm-paper); border-style: dashed; }
.abab-rm-tappa.is-fine .abab-rm-pin { background: var(--rm-yellow); border-width: 4px; }
.abab-rm-tappa.is-raggiunta .abab-rm-pin { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(29, 27, 22, .16); }

.abab-rm-cartello { background: var(--rm-paper); border: 2.5px solid var(--rm-ink); border-radius: 6px; box-shadow: 5px 5px 0 var(--rm-ink); padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 9px; transition: opacity .35s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.abab-rm-road.is-viva .abab-rm-tappa:not(.is-raggiunta) .abab-rm-cartello { opacity: .62; }
.abab-rm-road.is-viva .abab-rm-tappa.is-raggiunta .abab-rm-cartello { transform: translateY(-2px); }
.abab-rm-tappa.is-idea .abab-rm-cartello { border-style: dashed; box-shadow: none; }
.abab-rm-tappa.is-fine .abab-rm-cartello { background: var(--rm-ink); color: var(--rm-paper); box-shadow: 5px 5px 0 rgba(29, 27, 22, .35); }
.abab-rm-bollo { align-self: flex-start; transform: rotate(-2deg); font: 800 13px/1 var(--rm-cond); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px 4px; border: 2px solid var(--rm-ink); border-radius: 3px; background: var(--rm-paper); }
.abab-rm-tappa.is-fatto .abab-rm-bollo { background: var(--rm-ink); color: var(--rm-yellow); }
.abab-rm-tappa.is-corso .abab-rm-bollo { background: var(--rm-yellow); }
.abab-rm-tappa.is-idea .abab-rm-bollo { border-style: dashed; }
.abab-rm-tappa.is-fine .abab-rm-bollo { background: var(--rm-yellow); color: var(--rm-ink); border-color: var(--rm-yellow); }
.abab-rm-cartello h2 { font: 800 28px/1 var(--rm-cond); text-transform: uppercase; }
.abab-rm-tappa.is-fine h2 { font-size: clamp(44px, 10vw, 64px); line-height: .9; color: var(--rm-yellow); }
.abab-rm-testo { color: var(--rm-muted); font-size: 16px; line-height: 1.45; }
.abab-rm-tappa.is-fine .abab-rm-testo { color: var(--rm-paper); font-size: 18px; }
.abab-rm-voci { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.abab-rm-voci li { display: inline-flex; align-items: center; gap: 5px; font: 600 15px/1.2 var(--rm-body); background: var(--rm-yellow); border-radius: 99px; padding: 5px 10px 5px 7px; }
.abab-rm-meter { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.abab-rm-meter p { font-size: 15px; color: var(--rm-muted); }
.abab-rm-meter strong { font: 800 26px/1 var(--rm-cond); color: var(--rm-ink); margin-right: 2px; }
.abab-rm-bar { display: block; height: 16px; border: 2.5px solid var(--rm-ink); border-radius: 99px; background: var(--rm-paper); overflow: hidden; }
.abab-rm-bar span { display: block; height: 100%; min-width: 8px; background: var(--rm-ink); border-radius: 99px; }
.abab-rm-way.is-small { align-self: flex-start; min-height: 42px; font-size: 15px; margin-top: 2px; }

/* Il maialino */
.abab-rm-pig { position: absolute; left: 0; top: 0; z-index: 3; width: 46px; height: 73px; perspective: 420px; transform-origin: 50% 100%; will-change: transform; pointer-events: none; }
.abab-rm-pig-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.3, 1.7, .45, 1); }
.abab-rm-pig.is-girato .abab-rm-pig-card { transform: rotateY(180deg) scale(1.3); }
.abab-rm-pig-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.abab-rm-pig-face.is-front { transform: rotateY(180deg); }
.abab-rm-pig-face img, .abab-rm-pig-face svg { display: block; width: 100%; height: 100%; }
.abab-rm-road:not(.is-viva) .abab-rm-pig { display: none; }

/* Il contatore delle tappe */
.abab-rm-hud { position: fixed; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 800; background: var(--rm-ink); color: var(--rm-yellow); font: 800 15px/1 var(--rm-cond); letter-spacing: .06em; text-transform: uppercase; padding: 9px 13px; border-radius: 99px; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events: none; }
.abab-rm-hud.is-on { opacity: 1; transform: none; }

@media (min-width: 768px) {
	.abab-rm { max-width: 980px; }
	.abab-rm-hero, .abab-rm-mai, .abab-rm-cta { max-width: 720px; margin-left: auto; margin-right: auto; }
	.abab-rm-mai { margin-top: 44px; }
	.abab-rm-tappe { gap: 0; }
	.abab-rm-tappa { width: 50%; padding: 0 92px 0 0; }
	.abab-rm-tappa + .abab-rm-tappa { margin-top: -36px; }
	.abab-rm-tappa:nth-child(even) { margin-left: 50%; padding: 0 0 0 92px; }
	.abab-rm-tappa .abab-rm-pin, .abab-rm-tappa:nth-child(even) .abab-rm-pin { top: 22px; }
	.abab-rm-tappa:nth-child(odd) .abab-rm-pin { left: auto; right: -64px; }
	.abab-rm-tappa:nth-child(even) .abab-rm-pin { left: -64px; }
	.abab-rm-tappa.is-fine { width: 100%; margin: 40px 0 0; padding: 92px 0 0; }
	.abab-rm-tappa.is-fine .abab-rm-pin { left: 50%; right: auto; top: 0; margin-left: -20px; }
	.abab-rm-tappa.is-fine .abab-rm-cartello { max-width: 560px; margin: 0 auto; text-align: center; align-items: center; }
	.abab-rm-tappa.is-fine .abab-rm-bollo { align-self: center; }
	.abab-rm-pig { width: 62px; height: 98px; }
	.abab-rm-path .is-asfalto { stroke-width: 34; }
	.abab-rm-hud { bottom: 24px; }
}

/* Mai */
.abab-rm-mai { margin-top: 44px; background: var(--rm-ink); color: var(--rm-paper); border-radius: 6px; padding: 26px 22px 24px; transform: rotate(-.6deg); }
.abab-rm-mai h2 { font: 800 clamp(34px, 7vw, 48px)/.95 var(--rm-cond); text-transform: uppercase; color: var(--rm-yellow); margin-bottom: 14px; }
.abab-rm-mai ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.abab-rm-mai li { position: relative; padding-left: 30px; font-size: 18px; line-height: 1.4; }
.abab-rm-mai li::before { content: '\00D7'; position: absolute; left: 0; top: -3px; font: 800 26px/1 var(--rm-cond); color: var(--rm-yellow); }

/* Invito */
.abab-rm-cta { margin-top: 44px; display: flex; flex-direction: column; gap: 14px; }
.abab-rm-cta h2 { font: 800 30px/1 var(--rm-cond); text-transform: uppercase; }
.abab-rm-ways { display: flex; flex-wrap: wrap; gap: 10px; }
.abab-rm-way { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 2.5px solid var(--rm-ink); border-radius: 4px; background: var(--rm-paper); color: var(--rm-ink) !important; text-decoration: none !important; font: 800 17px/1 var(--rm-cond); text-transform: uppercase; letter-spacing: .03em; }
.abab-rm-way.is-main { background: var(--rm-ink); color: var(--rm-yellow) !important; }
.abab-rm-way:hover { box-shadow: 3px 3px 0 var(--rm-ink); }
.abab-rm-idea { font-size: 16px; }
.abab-rm-idea a { color: var(--rm-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.abab-rm a:focus-visible { outline: 3px solid var(--rm-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.abab-rm-mai, .abab-rm-bollo { transform: none; }
	.abab-rm-pin, .abab-rm-cartello, .abab-rm-pig-card, .abab-rm-hud { transition: none; }
}