/* MiraBloom – stile collage: carta, nastri, scarabocchi, blocchi di colore */
:root {
  color-scheme: light;
  --paper: #f4eee0;
  --paper2: #fffdf6;
  --ink: #161616;
  --muted: #5a5348;
  --pink: #f6a9cf;
  --magenta: #c9288f;
  --sky: #a9d5f2;
  --blue: #0b8fe0;
  --lime: #d6ee72;
  --yellow: #f2c500;
  --tape: rgba(232, 240, 100, .88);
  --head: "Anton", "Impact", "Arial Narrow", sans-serif;
  --hand: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* bordo strappato in basso e in alto */
  --strappo-b: polygon(0 0,100% 0,100% calc(100% - 9px),96% calc(100% - 3px),92% calc(100% - 10px),88% calc(100% - 4px),84% calc(100% - 9px),80% calc(100% - 2px),76% calc(100% - 8px),72% calc(100% - 4px),68% calc(100% - 10px),64% calc(100% - 3px),60% calc(100% - 8px),56% calc(100% - 5px),52% calc(100% - 10px),48% calc(100% - 3px),44% calc(100% - 9px),40% calc(100% - 4px),36% calc(100% - 10px),32% calc(100% - 2px),28% calc(100% - 8px),24% calc(100% - 4px),20% calc(100% - 9px),16% calc(100% - 3px),12% calc(100% - 10px),8% calc(100% - 4px),4% calc(100% - 8px),0 calc(100% - 3px));
  --strappo-t: polygon(0 3px,4% 9px,8% 2px,12% 8px,16% 3px,20% 10px,24% 4px,28% 9px,32% 2px,36% 8px,40% 3px,44% 10px,48% 4px,52% 9px,56% 2px,60% 7px,64% 3px,68% 10px,72% 4px,76% 8px,80% 2px,84% 9px,88% 3px,92% 10px,96% 4px,100% 8px,100% 100%,0 100%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--ink); overflow-x: clip;
  background: var(--grana), var(--paper);
  font: 1.0625rem/1.65 var(--body);
}
img { max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 680px; margin-left: auto; margin-right: auto; }
h1, h2, h3 { font-family: var(--head); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: .98; margin: 0 0 14px; }
h1 { font-size: clamp(2.8rem, 12vw, 5.6rem); }
h2 { font-size: clamp(2.3rem, 9vw, 4rem); }
h3 { font-size: 1.7rem; line-height: 1.05; }
p { margin: 0 0 14px; }
.nota { font: 700 1.45rem/1.1 var(--hand); }
.nastro { display: inline-block; background: var(--tape); padding: 2px 12px; transform: rotate(-2deg); font: 700 1.35rem/1.2 var(--hand); }
.hl { background: linear-gradient(transparent 52%, var(--tape) 52% 94%, transparent 94%); padding: 0 .08em; }
.doodle { position: absolute; pointer-events: none; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Barra in alto ---- */
.top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 24px; padding-block: 14px; }
.brand { font: 400 1.5rem var(--head); text-transform: uppercase; text-decoration: none; letter-spacing: .02em; }
.brand i { font-style: normal; color: var(--magenta); }
.top ul { display: flex; flex-wrap: wrap; gap: 2px 20px; list-style: none; margin: 0; padding: 0; }
.top li a { text-decoration: none; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 8px 0; display: inline-block; border-bottom: 3px solid transparent; }
.top li a:hover { border-bottom-color: var(--ink); }
.top li a[aria-current="page"] { border-bottom-color: var(--magenta); }

/* ---- Pulsanti ---- */
.btn { display: inline-block; background: var(--pink); color: var(--ink); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font: 700 .8rem/1 var(--body); padding: 14px 18px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.btn::after { content: "  →"; }
.btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.alt { background: var(--paper2); }
.btn.nero { background: var(--ink); color: var(--paper2); box-shadow: 3px 3px 0 var(--magenta); }
.actions { display: flex; flex-wrap: wrap; gap: 12px 14px; }

/* ---- Blocchi di colore ---- */
.blocco { position: relative; padding-block: 44px 52px; clip-path: var(--strappo-b); background-image: var(--grana); }
.blocco.sky { background-color: var(--sky); }
.blocco.pink { background-color: var(--pink); }
.blocco.lime { background-color: var(--lime); }
.blocco.giallo { background-color: #f7e27a; }

/* ---- Apertura ---- */
.hero { padding-top: 24px; }
.hero-in { position: relative; text-align: center; }
.foglio { position: relative; background: var(--paper2); width: min(760px, 100%); margin: 14px auto 0; padding: 22px 18px 16px; transform: rotate(-1.2deg); box-shadow: 0 2px 0 rgba(0,0,0,.1), 0 14px 28px rgba(0,0,0,.18); }
.foglio::before, .carta::before, .luogo::before, .tappa::before { content: ""; position: absolute; top: -13px; left: 50%; width: 110px; height: 28px; margin-left: -55px; background: var(--tape); transform: rotate(-3deg); }
.logo { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.logo-testo { font: 400 clamp(3rem, 14vw, 6rem) var(--head); text-transform: uppercase; margin: 0; }
.nota-riga { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin: 4px 4px 0; }
.nota-riga svg { width: 54px; height: 40px; position: static; transform: scaleX(-1) rotate(-20deg); }
.hero h1 { margin: 34px 0 20px; }
.cerchiato { position: relative; display: inline-block; padding: 0 .1em; }
.cerchiato svg { position: absolute; inset: -14% -8%; width: 116%; height: 128%; overflow: visible; stroke: #e0ec3c; stroke-width: 6; }
.carta { position: relative; background: var(--paper2); text-align: left; padding: 30px 24px 14px; margin-top: 34px; box-shadow: 0 2px 0 rgba(0,0,0,.1), 0 10px 22px rgba(0,0,0,.14); transform: rotate(.5deg); }
.carta p:first-child { font-size: 1.15rem; font-weight: 500; }
.hero .d1 { width: 78px; top: -2px; right: 4px; transform: rotate(14deg); }
.hero .d2 { width: 48px; top: 250px; left: 0; }

.museo .wrap { max-width: 760px; }
.museo h2 { margin-bottom: 18px; }
.museo p { font-size: 1.1rem; }
.museo .actions { margin-top: 22px; }

/* ---- Tappe ---- */
.sezione-testa { position: relative; margin-bottom: 8px; }
.sezione-testa .nota { display: flex; align-items: center; gap: 6px; }
.sezione-testa .nota svg { position: static; width: 60px; height: 36px; }
#mappa-box { height: 340px; border: 2px solid var(--ink); margin: 22px 0 8px; z-index: 0; box-shadow: 4px 4px 0 var(--ink); }
.pin { width: 30px; height: 30px; border-radius: 50%; font: 400 15px/26px var(--head); text-align: center; border: 2px solid var(--ink); }
.griglia { display: grid; gap: 38px 28px; grid-template-columns: 1fr; margin: 30px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .griglia { grid-template-columns: 1fr 1fr; } }
.tappa { position: relative; background: var(--paper2); padding: 12px 12px 20px; box-shadow: 0 2px 0 rgba(0,0,0,.1), 0 12px 24px rgba(0,0,0,.16); }
.griglia li:nth-child(odd) { transform: rotate(-1deg); }
.griglia li:nth-child(even) { transform: rotate(1.1deg); }
.foto-box { position: relative; }
.foto, .foto-ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--paper); }
.foto-ph { display: grid; place-items: center; text-align: center; font: 700 1.5rem var(--hand); background: var(--c, var(--pink)); }
.badge { position: absolute; left: -22px; top: -22px; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--ink); background: var(--b); color: var(--t); font: 400 1.6rem/46px var(--head); text-align: center; transform: rotate(-8deg); z-index: 2; box-shadow: 2px 2px 0 var(--ink); }
.tappa h3 { margin: 16px 4px 14px; font-size: 1.9rem; }
.tappa .actions { padding: 0 4px; }

.tappa.bonus::before { background: var(--pink); }
.bonus-nota { color: var(--magenta); margin: -6px 4px 14px; }
.testata .bonus-nota { margin: 0 0 8px; color: var(--ink); }

/* ---- Esplora ---- */
.esplora { padding-block: 64px 8px; }
.tiles { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 24px; }
@media (min-width: 700px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile { position: relative; display: block; text-decoration: none; padding: 34px 24px 26px; background: var(--c); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); min-height: 190px; transition: transform .12s, box-shadow .12s; }
.tile:nth-child(1) { transform: rotate(-1deg); }
.tile:nth-child(2) { transform: rotate(1deg); }
.tile:hover { box-shadow: 2px 2px 0 var(--ink); }
.tile h3 { font-size: clamp(2.2rem, 8vw, 3rem); margin-bottom: 4px; }
.tile .nota { display: block; margin-bottom: 18px; }
.tile span.vai { font: 700 .8rem var(--body); text-transform: uppercase; letter-spacing: .1em; border-bottom: 3px solid var(--ink); padding-bottom: 2px; }
.tile span.vai::after { content: "  →"; }

/* ---- Pagine interne ---- */
.testata { padding-block: 22px 56px; }
.indietro { display: inline-block; margin-bottom: 18px; font: 700 .78rem var(--body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 3px solid var(--ink); }
.testata .nota { margin-bottom: 8px; }
.testata h1 { margin-bottom: 14px; }
.testata p.intro { font-size: 1.12rem; max-width: 56ch; margin: 0; }
.dettaglio { position: relative; margin-top: -28px; }
.dettaglio .tappa { transform: rotate(-.6deg); padding: 12px 12px 12px; }
.credito { color: var(--muted); font-size: .85rem; margin: 10px 4px 0; }
.dettaglio .actions { margin: 28px 0 8px; }
.testo-tappa { position: relative; background: var(--paper2); padding: 30px 24px 14px; margin-top: 26px; box-shadow: 0 2px 0 rgba(0,0,0,.1), 0 10px 22px rgba(0,0,0,.12); }
.testo-tappa p { max-width: 62ch; font-size: 1.08rem; }
.dintorni { margin-top: 56px; }
.dintorni h2 { font-size: clamp(2rem, 7vw, 3rem); }
.vicina { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; }
.vicina a { font: 700 .8rem var(--body); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; border-bottom: 3px solid var(--magenta); }

/* ---- Altre foto della tappa ---- */
.galleria { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; list-style: none; margin: 48px 0 0; padding: 0; }
.dettaglio .galleria .tappa { padding: 8px; }
.dettaglio .galleria li:nth-child(odd) { transform: rotate(-1.4deg); }
.dettaglio .galleria li:nth-child(even) { transform: rotate(1.2deg); }
.galleria .tappa::before { width: 70px; height: 20px; margin-left: -35px; top: -10px; }
.galleria .credito { font-size: .78rem; margin: 6px 2px 0; }

/* ---- Luoghi ---- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; }
.chip { font: 700 .78rem var(--body); text-transform: uppercase; letter-spacing: .08em; padding: 10px 14px; border: 2px solid var(--ink); background: var(--paper2); color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper2); }
.luoghi { display: grid; gap: 34px 24px; grid-template-columns: 1fr; margin: 30px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .luoghi { grid-template-columns: 1fr 1fr; } }
.luogo { position: relative; background: var(--paper2); padding: 30px 22px 22px; display: flex; flex-direction: column; box-shadow: 0 2px 0 rgba(0,0,0,.1), 0 10px 22px rgba(0,0,0,.12); }
.luoghi li:nth-child(odd) { transform: rotate(-.8deg); }
.luoghi li:nth-child(even) { transform: rotate(.8deg); }
.luogo .tipo { font: 700 1.3rem/1.1 var(--hand); color: var(--magenta); margin: 0 0 2px; }
.luogo h3 { font-size: 1.7rem; margin-bottom: 6px; }
.luogo .ind { color: var(--muted); font-size: .95rem; margin-bottom: 10px; }
.luogo .actions { margin-top: auto; padding-top: 12px; }
.luogo .btn { padding: 11px 14px; font-size: .72rem; }
.vuoto { font: 700 1.4rem var(--hand); }

/* ---- Fondo pagina ---- */
footer { position: relative; margin-top: 80px; padding: 54px 0 46px; background-color: var(--sky); background-image: var(--grana); clip-path: var(--strappo-t); text-align: center; }
footer .grande { font: 400 clamp(2.6rem, 11vw, 4.4rem)/1 var(--head); text-transform: uppercase; margin: 0 0 4px; }
footer .nota { margin: 0 0 22px; }
.social { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0 0 20px; padding: 0; }
.social a { display: grid; place-items: center; width: 50px; height: 50px; border: 2px solid var(--ink); background: var(--paper2); box-shadow: 3px 3px 0 var(--ink); }
.social a:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.social svg { position: static; width: 23px; height: 23px; fill: var(--ink); stroke: none; }
.social svg.line { fill: none; stroke: var(--ink); stroke-width: 1.8; }
footer .mail { font-weight: 600; margin-bottom: 8px; }
footer .sub { font-size: .9rem; color: #2a2f33; margin: 0; }