/* Kumi — home del sito (14 ott 2026). La pagina è un invito: un biglietto
   di carta sopra il lungomare, poi gli altri pezzi della stessa cancelleria
   (la cartolina della città, lo scontrino della settimana, la lettera, il
   menu). Colori pieni del marchio, niente sfumature né ombre a riposo.
   Le pagine legali e di servizio aggiungono doc.css. */
:root {
  --bordeaux: #a21d33;
  --bordeaux-dark: #7d1527;
  --ink: #1a1a1a;
  --night: #1a1a1a;
  --cream: #f1f0cc;
  --paper: #f7f4dc;
  --gold: #d8c07e;
  --gold-pale: #e3d4a0;
  --gold-accent: #c9a24b;
  --soft: #4a4636;              /* testo secondario su carta: 8:1 sul crema */

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* cinque grandezze, non di più */
  --t-display: clamp(2.6rem, 5.6vw, 5.4rem);
  --t-heading: clamp(2rem, 3.6vw, 3.25rem);
  --t-lead: clamp(1.2rem, 1.5vw, 1.45rem);
  --t-body: 1.0625rem;
  --t-small: .875rem;

  --margin: clamp(16px, 3vw, 32px);
  --section: clamp(96px, 12vw, 180px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.55;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
::selection { background: var(--bordeaux); color: var(--paper); }
:focus-visible { outline: 3px solid var(--gold-accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Bottoni: pieni, un colore, tondi. Uno solo per schermata. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: .8em 1.6em; border: 0; border-radius: 999px;
  background: var(--bordeaux); color: var(--paper);
  font: 700 var(--t-body)/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease-out), background-color .18s ease;
}
.btn:hover { background: var(--bordeaux-dark); }
.btn:active { transform: scale(.97); }
.btn.alt { background: var(--gold-pale); color: var(--ink); }
.btn.alt:hover { background: var(--gold); }
.link { font-weight: 700; color: var(--bordeaux); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link:hover { color: var(--bordeaux-dark); }

/* ——— Barra in alto: sopra la foto, niente vetro ——— */
.bar {
  position: absolute; inset: 0 0 auto; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 18px var(--margin); color: var(--paper);
}
.bar .brand { display: flex; align-items: center; gap: .55rem; font: italic 700 1.7rem/1 var(--serif); text-decoration: none; }
.bar .brand img { width: 36px; height: 36px; border-radius: 9px; }
.bar nav { display: flex; align-items: center; gap: 1.6rem; font-weight: 700; font-size: var(--t-small); }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bar .lang {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper); color: var(--bordeaux);
}
.bar .lang:hover { text-decoration: none; background: var(--gold-pale); }
@media (max-width: 760px) { .bar nav a:not(.lang) { display: none; } }

/* ——— 1. Apertura: il biglietto sopra il lungomare ———
   La sezione è più alta dello schermo: mentre si scorre, il palco resta
   fermo e il biglietto si rimpicciolisce un poco (site.js). */
.hero { position: relative; height: 150svh; background: var(--night); }
.hero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; padding: 84px var(--margin) 40px; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; filter: brightness(.62); }

.ticket {
  --stub: 270px; --notch: 16px;
  position: relative; z-index: 1;
  width: min(1000px, 100%);
  display: grid; grid-template-columns: 1fr var(--stub);
  color: var(--ink);
}
.ticket-hold { position: relative; z-index: 1; width: min(1000px, 100%); transform-origin: 50% 40%; }
.ticket-hold .ticket { width: 100%; }
.ticket__main {
  padding: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 28px);
  background: var(--paper);
  /* mezze tacche sul bordo destro, dove si strappa */
  -webkit-mask:
    radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, /* taste-skill-ignore: forma ritagliata */
    radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; /* taste-skill-ignore: forma ritagliata */
          mask:
    radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, /* taste-skill-ignore: forma ritagliata */
    radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; /* taste-skill-ignore: forma ritagliata */
  transition: transform .7s var(--ease-out);
}
.ticket h1 { font-size: var(--t-display); color: var(--bordeaux); max-width: 9.5em; }
.ticket__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px clamp(20px, 3vw, 40px); margin: 0; }
.ticket__facts div { min-width: 0; }
.ticket__facts dt { font-size: var(--t-small); color: var(--soft); }
.ticket__facts dd { margin: 0; font-weight: 700; }
.ticket__lead { font-size: var(--t-lead); line-height: 1.4; max-width: 34ch; margin: 0; }
.ticket__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; font-size: var(--t-small); color: var(--soft); }
.ticket__foot a.credit { color: var(--soft); }

.ticket__stub {
  border-left: 4px dotted var(--gold-accent);
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  background: var(--gold-pale);
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, /* taste-skill-ignore: forma ritagliata */
    radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; /* taste-skill-ignore: forma ritagliata */
          mask:
    radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, /* taste-skill-ignore: forma ritagliata */
    radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; /* taste-skill-ignore: forma ritagliata */
}
.ticket__seats { font: 700 var(--t-display)/1 var(--serif); color: var(--bordeaux); letter-spacing: -.03em; }
.ticket__seats small { display: block; margin-top: .4em; font: 700 var(--t-body)/1.3 var(--sans); color: var(--ink); letter-spacing: 0; }
.ticket__stub p { margin: 0; font-size: var(--t-small); color: var(--soft); }
.ticket__stub .btn { width: 100%; white-space: nowrap; padding-inline: 1em; }
.ticket__seats { font-size: var(--t-heading); }
/* «Entra in lista»: il tagliando si stacca e cade, il biglietto si rimette al centro */
.ticket__stub.torn { transform-origin: 0 0; animation: tear 1.15s both; pointer-events: none; }
@keyframes tear {
  0%   { transform: none; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  22%  { transform: translate(5px, 1px) rotate(4deg); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  100% { transform: translate(90px, 115vh) rotate(32deg); }
}
.ticket.strappato .ticket__main { transform: translateX(calc(var(--stub) / 2)); }


@media (max-width: 760px) {
  .hero { height: 125svh; }
  .hero__stage { padding: 76px 16px 24px; align-items: center; }
  .ticket { --stub: 0px; --cut: 124px; grid-template-columns: 1fr; }
  .ticket__main {
    -webkit-mask:
      radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, /* taste-skill-ignore: forma ritagliata */
      radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore: forma ritagliata */
            mask:
      radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, /* taste-skill-ignore: forma ritagliata */
      radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore: forma ritagliata */
  }
  .ticket__main { padding: 22px 20px 20px; gap: 16px; }
  .ticket h1 { font-size: 2.6rem; }
  .ticket__facts { grid-template-columns: 1fr 1fr; }
  .ticket__facts div:last-child { grid-column: 1 / -1; }
  .ticket__lead { font-size: 1.0625rem; }
  .ticket__stub {
    height: var(--cut); border-left: 0; border-top: 4px dotted var(--gold-accent);
    -webkit-mask:
      radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, /* taste-skill-ignore: forma ritagliata */
      radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore: forma ritagliata */
            mask:
      radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, /* taste-skill-ignore: forma ritagliata */
      radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore: forma ritagliata */
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 18px; padding: 18px 20px;
  }
  .ticket__seats { font-size: 2rem; }
  .ticket__seats small { display: none; }
  .ticket__stub p { display: none; }
}

/* ——— 2. Prova l'affinità: gli interessi e la scheda che si aggiorna ——— */
.match { padding: var(--section) var(--margin); }
.match__wrap { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.match h2 { font-size: var(--t-heading); color: var(--bordeaux); }
.match__pick > p { margin-top: 20px; max-width: 38ch; font-size: var(--t-lead); line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.chips button {
  font: 700 var(--t-body)/1 var(--sans); min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--gold-pale); color: var(--ink); cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s var(--ease-out);
}
.chips button:hover { background: var(--gold); }
.chips button:active { transform: scale(.95); }
.chips button[aria-pressed="true"] { background: var(--bordeaux); color: var(--paper); }
/* la scheda è un pezzo dell'app, come nel telefono */
.match__card { display: grid; gap: 14px; }
.pcard { background: var(--paper); border-radius: 22px; padding: 22px; }
.pcard__top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.pcard__face {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--bordeaux); font: italic 700 1.6rem/1 var(--serif);
}
.pcard__top strong { display: block; font-size: var(--t-lead); line-height: 1.2; }
.pcard__top div span { color: var(--soft); font-size: var(--t-small); }
.pcard__pct { font: 700 var(--t-heading)/1 var(--serif); color: var(--bordeaux); font-variant-numeric: tabular-nums; }
.pcard__bar { height: 10px; border-radius: 99px; background: var(--gold-pale); margin: 18px 0 14px; overflow: hidden; }
.pcard__bar i { display: block; height: 100%; width: 100%; background: var(--bordeaux); transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s var(--ease-out); }
.pcard__common { margin: 0; }
.pcard__common b { color: var(--bordeaux); }
.bubbles { display: grid; gap: 8px; }
.bub { margin: 0; max-width: 82%; padding: 12px 16px; border-radius: 20px; font-size: var(--t-body); line-height: 1.4; }
.bub.me { justify-self: end; background: var(--bordeaux); color: var(--paper); border-bottom-right-radius: 6px; }
.bub.her { justify-self: start; background: var(--paper); color: var(--ink); border-bottom-left-radius: 6px; }
.bubbles .bub { transition: opacity .3s ease; }
.bubbles.off .bub { opacity: 0; }  /* niente bordeaux trasparente: diventerebbe rosa */
.bubbles.pop .bub { animation: bub .5s var(--ease-out) both; }
.bubbles.pop .bub.her { animation-delay: .45s; }
@keyframes bub { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@media (max-width: 860px) {
  /* da telefono la scheda sta subito sopra gli interessi, così si vede cambiare */
  .match__wrap { grid-template-columns: 1fr; gap: 0; }
  .match__pick, .match__card { display: contents; }
  .match h2 { order: 1; }
  .match__pick > p { order: 2; }
  .pcard { order: 3; margin-top: 24px; }
  .chips { order: 4; margin-top: 18px; gap: 8px; }
  .bubbles { order: 5; margin-top: 18px; }
  .chips button { min-height: 44px; padding: 0 15px; }
}

/* ——— 3. La tua città: la cartolina quadrata ——— */
.city { background: var(--gold-pale); }
.city__wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; }
.city__plate { padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.city__plate figure { margin: 0; }
.city__plate .frame {
  aspect-ratio: 1; background: var(--gold); overflow: hidden;
  /* tacche a metà dei lati: un tagliando strappato dal biglietto */
  -webkit-mask: radial-gradient(circle 14px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore: forma ritagliata */
          mask: radial-gradient(circle 14px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore: forma ritagliata */
}
.city__plate img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease, transform .6s var(--ease-out); }
.city__plate img.swap { opacity: 0; transform: scale(1.04); }
.city__plate figcaption { font-size: var(--t-small); color: var(--soft); }
.city__plate figcaption a { color: var(--soft); }

.city__text { padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tabs button, .tabs select {
  font: 700 var(--t-body)/1 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-radius: 999px; padding: .6em .9em; cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease;
}
/* al passaggio cambia SOLO il colore: «background» intero cancellava la
   posizione della freccetta della tendina, che si ripeteva grande */
.tabs button:hover, .tabs select:hover { background-color: var(--gold); }
.tabs button[aria-pressed="true"]:hover, .tabs select.on:hover { background-color: #3a3832; }
/* al passaggio, un anello bordeaux intorno (scelto da Noemi il 14 ott) */
.tabs button:hover, .tabs select:hover { box-shadow: 0 0 0 3px var(--bordeaux); } /* taste-skill-ignore: anello di selezione, non un'ombra */
.tabs button[aria-pressed="true"] { background-color: var(--ink); color: var(--paper); }
.tabs select { background-color: var(--paper); padding-right: 2.2em; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7em center; background-size: 16px; }
.tabs select.on { background-color: var(--ink); color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f4dc' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.city h2 { font-size: var(--t-heading); color: var(--bordeaux); max-width: 14em; }
.city h2.spin { color: var(--ink); }
#city-next[disabled] { opacity: .6; cursor: progress; }
.city__body p { max-width: 38ch; margin-top: 24px; font-size: var(--t-lead); line-height: 1.45; }
.city__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 860px) {
  .city__wrap { grid-template-columns: 1fr; min-height: 0; }
  .city__plate { padding: 56px 16px 0; }
  .city__text { padding: 24px 16px 72px; gap: 28px; }
  .city__actions .btn { flex: 1 1 100%; }
}

/* ——— 4. Come funziona: lo scontrino, col titolo che resta fermo ——— */
.week { background: var(--bordeaux); color: var(--paper); padding: var(--section) var(--margin); }
.week__wrap { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.week__title { position: sticky; top: 14vh; }
.week h2 { font-size: var(--t-heading); }
.week__title p { margin-top: 24px; max-width: 32ch; font-size: var(--t-lead); line-height: 1.45; }
.slip {
  justify-self: end; width: min(480px, 100%);
  background: var(--paper); color: var(--ink);
  padding: 36px 32px 56px;
  font-variant-numeric: tabular-nums;
  /* bordo in basso a zig-zag, come uno scontrino strappato */
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; /* taste-skill-ignore: forma ritagliata */
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; /* taste-skill-ignore: forma ritagliata */
}
.slip h3 { font: 700 var(--t-body)/1.3 var(--sans); margin: 28px 0 10px; }
.slip h3:first-child { margin-top: 0; }
.slip ol { list-style: none; margin: 0; padding: 0; }
.slip li { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 6px 0 6px 30px; }
/* la spunta: un tondo vuoto che si riempie di bordeaux col segno quando ci arrivi */
.slip li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--gold-accent); box-sizing: border-box;
  transition: background-color .25s ease, border-color .25s ease;
}
.slip li::after {
  content: ""; position: absolute; left: 6px; top: calc(.5em + 3px); width: 5px; height: 9px;
  border: solid var(--paper); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(.5); opacity: 0; transform-origin: 50% 60%;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1) .08s, opacity .15s ease .08s;
}
.slip li.fatto::before { background: var(--bordeaux); border-color: var(--bordeaux); }
.slip li.fatto::after { transform: rotate(45deg) scale(1); opacity: 1; }
.slip li span:first-child { flex: 0 1 auto; }
.slip li i { flex: 1 1 24px; min-width: 24px; border-bottom: 4px dotted var(--gold-accent); transform: translateY(-4px); }
.slip li b { flex: 0 0 auto; color: var(--bordeaux); }
.slip .end {
  margin: 28px -32px 0; padding: 0 32px; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink); color: var(--paper); font-weight: 700;
}
@media (max-width: 860px) {
  .week__wrap { grid-template-columns: 1fr; }
  .week__title { position: static; }
  .slip { justify-self: stretch; padding: 28px 20px 52px; }
  .slip .end { margin: 24px -20px 0; padding: 0 20px; }
}

/* ——— 5. Dentro l'app: la fila delle schermate ——— */
.app { padding: var(--section) 0; }
.app__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 0 var(--margin); max-width: 1244px; margin: 0 auto 40px; }
.app h2 { font-size: var(--t-heading); color: var(--bordeaux); }
.app__head p { margin: 16px 0 0; max-width: 40ch; font-size: var(--t-lead); line-height: 1.45; }
.shots-nav { display: flex; gap: 10px; flex-shrink: 0; }
.shots-nav button {
  width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; cursor: pointer; transition: transform .18s var(--ease-out), opacity .2s;
}
.shots-nav button:active { transform: scale(.94); }
.shots-nav button:disabled { opacity: .25; cursor: default; }
.shots-nav svg { width: 22px; height: 22px; }
.screens {
  display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 0 var(--margin); scroll-padding-inline: var(--margin);
  max-width: 1244px; margin: 0 auto;
}
.screens::-webkit-scrollbar { display: none; }
.screen { flex: 0 0 auto; width: clamp(220px, 22vw, 270px); margin: 0; scroll-snap-align: start; }
.screen img { width: 100%; }
.screen figcaption { margin-top: 14px; font-size: var(--t-body); line-height: 1.45; }
.screen figcaption strong { display: block; font-family: var(--serif); font-size: var(--t-lead); color: var(--bordeaux); }
@media (max-width: 760px) { .shots-nav { display: none; } .screen { width: 66vw; } }

/* ——— 6. La lettera ——— */
.letter { background: var(--gold); padding: var(--section) var(--margin); }
.sheet {
  width: min(640px, 100%); margin: 0 auto; background: var(--paper);
  padding: clamp(28px, 6vw, 60px) clamp(24px, 6vw, 60px) clamp(48px, 7vw, 72px);
  -webkit-mask: radial-gradient(circle 9px at 50% 100%, #0000 98%, #000) 0 100% / 22px 100% repeat-x; /* taste-skill-ignore: forma ritagliata */
          mask: radial-gradient(circle 9px at 50% 100%, #0000 98%, #000) 0 100% / 22px 100% repeat-x; /* taste-skill-ignore: forma ritagliata */
}
.sheet .who { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.sheet .who img { width: 76px; height: 76px; border-radius: 50%; flex: 0 0 auto; }
.sheet h2 { font-size: var(--t-heading); color: var(--bordeaux); }
.sheet p { font-size: var(--t-body); line-height: 1.6; }
.sheet mark { background: var(--gold-pale); color: inherit; padding: 0 .15em; }
.sheet .sign { margin: 32px 0 0; font: italic 700 var(--t-lead)/1.2 var(--serif); color: var(--bordeaux); }
.sheet .sign small { display: block; margin-top: 6px; font: var(--t-small)/1.4 var(--sans); color: var(--soft); }
/* ——— 7. Sicurezza: il foglio sul fondo nero ——— */
.menu { background: var(--night); padding: var(--section) var(--margin); }
.menu__sheet {
  width: min(600px, 100%); margin: 0 auto; background: var(--paper);
  padding: clamp(48px, 6vw, 72px) clamp(20px, 5vw, 52px);
  -webkit-mask:
    radial-gradient(circle 9px at 50% 0, #0000 98%, #000) 0 0 / 22px 51% repeat-x, /* taste-skill-ignore: forma ritagliata */
    radial-gradient(circle 9px at 50% 100%, #0000 98%, #000) 0 100% / 22px 51% repeat-x; /* taste-skill-ignore: forma ritagliata */
          mask:
    radial-gradient(circle 9px at 50% 0, #0000 98%, #000) 0 0 / 22px 51% repeat-x, /* taste-skill-ignore: forma ritagliata */
    radial-gradient(circle 9px at 50% 100%, #0000 98%, #000) 0 100% / 22px 51% repeat-x; /* taste-skill-ignore: forma ritagliata */
}
.menu h2 { font-size: var(--t-heading); color: var(--bordeaux); text-align: center; margin-bottom: 40px; }
.menu dl { margin: 0; }
.menu .row { padding: 9px 0; }
.menu dt { display: flex; align-items: baseline; gap: 10px; font-weight: 700; }
.menu dt i { flex: 1 1 24px; min-width: 24px; border-bottom: 4px dotted var(--gold-accent); transform: translateY(-4px); }
.menu dt b { color: var(--bordeaux); font-size: var(--t-body); }
.menu dd { margin: 2px 0 0; max-width: 40ch; color: var(--soft); font-size: var(--t-body); }

/* ——— 8. Premium: la tessera nera e oro ——— */
.premium { background: var(--gold-pale); padding: var(--section) var(--margin); }
.premium__wrap { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.premium h2 { font-size: var(--t-heading); color: var(--bordeaux); }
.premium__free > p { margin-top: 20px; max-width: 34ch; font-size: var(--t-lead); line-height: 1.45; }
.premium h3 { font: 700 var(--t-body)/1.3 var(--sans); margin: 36px 0 12px; }
.free-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.free-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.free-list li::before {
  content: ""; width: 12px; height: 12px; margin-top: .45em; border-radius: 50%; background: var(--bordeaux);
}
/* la tessera è una carta vera: angoli tondi come una tessera del museo */
.card { background: var(--night); color: var(--paper); border-radius: 22px; padding: clamp(24px, 3.4vw, 40px); }
.card__name { margin: 0 0 24px; font: italic 700 var(--t-heading)/1 var(--serif); color: var(--gold); }
.card__name span { font-style: normal; color: var(--paper); }
.card__perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.card__perks strong { display: block; color: var(--gold); }
.card__perks li { font-size: var(--t-small); line-height: 1.45; color: #e9e4c8; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 32px; }
.plans button {
  min-height: 48px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 var(--t-body)/1 var(--sans); background: #2c2b27; color: var(--paper);
  transition: background-color .18s ease, color .18s ease, transform .18s var(--ease-out);
}
.plans button:hover { background: #3a3832; }
.plans button:active { transform: scale(.96); }
.plans button[aria-checked="true"] { background: var(--gold); color: var(--night); }
.card__price { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.card__price b { font: 700 var(--t-heading)/1 var(--serif); color: var(--paper); font-variant-numeric: tabular-nums; }
.card__price span { color: #e9e4c8; }
.card__fine { margin: 14px 4px 0; font-size: var(--t-small); color: var(--soft); }
@media (max-width: 860px) {
  .premium__wrap { grid-template-columns: 1fr; }
  .card__perks { grid-template-columns: 1fr; }
}

/* ——— 8. Lista d'attesa: un tagliando da compilare ——— */
.wait { padding: var(--section) var(--margin); }
.wait__wrap { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 5fr 5fr auto; gap: clamp(28px, 5vw, 72px); align-items: center; }
.wait h2 { font-size: var(--t-heading); color: var(--bordeaux); }
.wait__text p { margin-top: 20px; max-width: 34ch; font-size: var(--t-lead); line-height: 1.45; }
.pass {
  position: relative; background: var(--gold-pale);
  -webkit-mask: radial-gradient(circle 14px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore: forma ritagliata */
          mask: radial-gradient(circle 14px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore: forma ritagliata */
}
.pass__body { padding: clamp(24px, 3vw, 36px); display: grid; gap: 8px; }
.pass label { font-weight: 700; margin-top: 8px; }
.pass label span { font-weight: 400; color: var(--soft); }
.pass input, .pass select {
  font: inherit; font-size: 1.0625rem; height: 52px; padding: 0 16px; border: 0; border-radius: 12px;
  background: var(--paper); color: var(--ink);
}
.pass input::placeholder { color: #77715a; }
.pass input[aria-invalid="true"], .pass select[aria-invalid="true"] { outline: 3px solid var(--bordeaux); outline-offset: 0; }
.pass select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a21d33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px;
}
.pass__solo { margin: 0 0 4px; font-weight: 700; }
.pass .btn { margin-top: 16px; width: 100%; }
.pass .btn[disabled] { opacity: .6; cursor: progress; }
.pass__msg { margin: 4px 0 0; font-weight: 700; color: var(--bordeaux); min-height: 1.5em; }
.pass__fine { margin: 0; font-size: var(--t-small); color: var(--soft); }
.pass__fine a { color: var(--soft); }
/* il timbro «In lista», che arriva quando l'iscrizione è andata */
.pass__stamp {
  position: absolute; right: 18px; top: 18px; pointer-events: none;
  padding: 10px 16px; border: 4px solid var(--bordeaux); border-radius: 10px;
  font: italic 700 var(--t-lead)/1 var(--serif); color: var(--bordeaux);
  transform: rotate(-12deg) scale(1.6); opacity: 0;
}
.pass:not(.done) > .pass__stamp { opacity: 0 !important; }
.pass.done .pass__stamp { opacity: 1; transform: rotate(-12deg) scale(1); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .15s ease; }
.wait .cat-stage { width: clamp(140px, 13vw, 190px); }
@media (max-width: 960px) {
  .wait__wrap { grid-template-columns: 1fr; }
  .wait .cat-stage { width: 140px; justify-self: center; grid-row: 1; }
}

/* ——— Piede: le tessere ——— */
.tiles { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; padding: 10px; }
.tile { padding: 24px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; text-decoration: none; }
.t-say { grid-column: span 4; background: var(--gold-pale); }
.t-say p { font: 700 var(--t-lead)/1.25 var(--serif); color: var(--bordeaux); margin: 0; max-width: 18ch; }
.t-say small { font-size: var(--t-small); color: var(--soft); }
.t-nav { grid-column: span 3; background: var(--paper); }
.t-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.t-nav a { font-weight: 700; text-decoration: none; }
.t-nav a:hover { color: var(--bordeaux); text-decoration: underline; text-underline-offset: 4px; }
.t-city { grid-column: span 2; background: var(--gold); }
.t-city p { margin: 0; font-weight: 700; }
.t-mail { grid-column: span 3; background: var(--paper); justify-content: flex-end; }
.t-mail a { font: 700 var(--t-lead)/1.2 var(--sans); color: var(--bordeaux); }  /* va a capo dopo la @ (<wbr>), non a metà parola */
.t-mail { gap: 10px; }
.t-mail .t-ig { margin-bottom: 0; font: 700 var(--t-body)/1.3 var(--sans); color: var(--ink); text-decoration: none; }
.t-mail .t-ig span { display: block; color: var(--bordeaux); font-size: var(--t-lead); }
.t-mail .t-ig:hover span { text-decoration: underline; text-underline-offset: 4px; }
.t-mail .t-ig + a:not(.t-ig) { margin-top: auto; padding-top: 14px; }  /* l'email resta in fondo */
.t-word { grid-column: span 8; min-height: 320px; background: var(--night); color: var(--paper); display: grid; place-items: center; }
.t-word span { font: italic 700 clamp(5rem, 14vw, 12rem)/1 var(--serif); letter-spacing: -.03em; }
.t-go { grid-column: span 4; min-height: 320px; background: var(--bordeaux); color: var(--paper); transition: background-color .2s ease; }
.t-go:hover { background: var(--bordeaux-dark); }
.t-go strong { font: 700 var(--t-heading)/1.05 var(--serif); max-width: 10ch; }
.t-go svg { align-self: flex-end; width: 56px; height: 56px; transition: transform .3s var(--ease-out); }
.t-go:hover svg { transform: translate(4px, -4px); }
@media (max-width: 860px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
  .tile { padding: 20px; min-height: 150px; }
  .t-word, .t-go { grid-column: 1 / -1; min-height: 160px; }
  .t-word { order: -2; } .t-go { order: -1; }
  .t-nav, .t-mail { grid-column: span 1; }
  .t-city, .t-say { grid-column: span 1; }
  .t-word span { font-size: 6rem; }
}

/* ——— La gattina animata (cat.js) ——— */
.cat-stage { position: relative; aspect-ratio: 539 / 964; }
.cat-stage .kc-layer, .cat-stage .kc-head-wrap, .cat-stage .kc-arm {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; user-select: none; -webkit-user-drag: none; will-change: transform;
}
.cat-stage .kc-lid { position: absolute; border-radius: 50%; transform: scaleY(0); transform-origin: 50% 0; box-shadow: inset 0 -2px 0 rgba(120, 70, 30, .35); } /* taste-skill-ignore: palpebra della gattina */
.cat-stage .kc-tongue { position: absolute; border-radius: 40% 40% 50% 50%; background: #E88C93; opacity: 0; transform-origin: 50% 0; }
.cat-stage .cat { width: 100%; height: 100%; }

/* ——— Movimento: entrate a scaglioni e la foto che respira ———
   Senza script, o con «riduci movimento», tutto è già al suo posto. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-in] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-in].in > * { opacity: 1; transform: none; }
  .hero__photo { animation: drift 26s ease-in-out infinite alternate; }
  @keyframes drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
  .ticket { animation: arrive .9s var(--ease-out) backwards .15s; }
  .js .slip { clip-path: inset(0 0 100% 0); transition: clip-path 2.2s cubic-bezier(.45, .05, .35, 1); }
  .js .slip.in { clip-path: inset(0 0 -20px 0); }
  .js .slip li, .js .slip h3, .js .slip .end { opacity: 0; transition: opacity .4s ease; transition-delay: calc(var(--r, 0) * 110ms + 150ms); }
  .js .slip.in li, .js .slip.in h3, .js .slip.in .end { opacity: 1; }
  @keyframes arrive { from { opacity: 0; transform: translateY(28px) rotate(-1.2deg); } }
}

/* ——— Un po' più di vita (14 ott) ———
   Tutto con transform e opacity; con «riduci movimento» non si muove niente. */

/* il biglietto e la tessera si inclinano appena verso il mouse, come in mano */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ticket, .card { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease-out); }
  .ticket.tilting, .card.tilting { transition: transform .12s linear; }
}

/* «C'è affinità!»: il timbro sulla scheda quando avete almeno due cose in comune */
.pcard { position: relative; }
.pcard__stamp {
  position: absolute; right: 18px; bottom: 14px; pointer-events: none;
  padding: 6px 12px; border: 3px solid var(--bordeaux); border-radius: 8px;
  font: italic 700 1.0625rem/1 var(--serif); color: var(--bordeaux); background: var(--paper);
  opacity: 0; transform: rotate(-10deg) scale(1.5);
}
.pcard__stamp.on { opacity: 1; transform: rotate(-10deg) scale(1); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .12s ease; }
.pcard__face { transition: transform .45s var(--ease-out); }

/* i piani di Premium: la pillola oro scivola sotto il piano scelto */
.plans { position: relative; isolation: isolate; }
.plans.has-pill { background: #2c2b27; border-radius: 999px; padding: 4px; gap: 0; }
.plans.has-pill button { background: transparent; }
.plans.has-pill button:hover:not([aria-checked="true"]) { background: #3a3832; }
.plans__pill { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); border-radius: 999px; background: var(--gold); z-index: -1; transition: transform .4s var(--ease-out), width .4s var(--ease-out); }
.plans.has-pill button[aria-checked="true"] { background: transparent; color: var(--night); }
.plans.has-pill button { transition: color .25s ease, background-color .18s ease, transform .18s var(--ease-out); }

/* le schermate si trascinano anche col mouse */
@media (hover: hover) and (pointer: fine) {
  .screens { cursor: grab; }
  .screens.drag { cursor: grabbing; scroll-snap-type: none; }
  .screens.drag img { pointer-events: none; }
}