/* ===================== MOTOTOUR v2: si parte dalla carta (vista da navigatore), poi il diario di bordo ===================== */
.giro-palco canvas.carta{inset:auto;width:auto;height:auto;will-change:transform}
.giro-cielo{position:absolute;inset:0;background:linear-gradient(180deg,#c9d3d6 0%,#e4e2d8 22%,var(--bg-2) 45%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .giro-cielo{background:linear-gradient(180deg,#04060a 0%,#0e141a 25%,#15181B 50%)}}
:root[data-theme="dark"] .giro-cielo{background:linear-gradient(180deg,#04060a 0%,#0e141a 25%,#15181B 50%)}
.giro-palco::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 16%)}
/* il titolo galleggia sulla carta finche' la moto non parte */
.giro-titolo{position:absolute;z-index:4;left:12px;right:12px;top:12px;background:var(--velo);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);border:1px solid var(--linea);border-radius:16px;padding:1rem 1.1rem 1.1rem;box-shadow:var(--ombra);display:grid;gap:.7rem;transition:opacity .2s}
.giro-titolo h1{font-size:clamp(2rem,8.4vw,4.4rem);line-height:.88;text-transform:uppercase}
.giro-titolo .attacco{font:400 clamp(.98rem,2.4vw,1.12rem)/1.5 var(--f-read);max-width:40rem}
.giro-titolo .attacco p+p{margin-top:.5em}
.giro-titolo .chip{background:var(--asfalto);border-color:var(--asfalto);color:#EEE8DA;backdrop-filter:none}
.giro-scorri{font:700 .8rem/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--rocca)}
@media (max-width:899px){
  .giro-titolo .attacco p+p{display:none}
  .giro-titolo .dati-strip .chip:nth-child(n+3){display:none}
}
@media (min-width:900px){
  .giro-titolo{left:var(--gutter);right:auto;top:auto;bottom:6rem;max-width:33rem}
}
/* ---------------- il diario di bordo ---------------- */
.diario-bordo .racconto{gap:clamp(2.5rem,6vw,4rem)}
.diario-testa{display:grid;gap:1rem}
.diario-testa img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:18px;box-shadow:var(--ombra)}
@media (max-width:700px){.diario-testa img{aspect-ratio:4/3}}
.capitoli{display:grid;gap:clamp(1.6rem,4vw,2.6rem)}
.titolo-capitoli{font-size:clamp(2rem,6vw,3.4rem);text-transform:uppercase;line-height:.92}
.capitolo{display:grid;gap:1.1rem;align-items:start;background:var(--asfalto);color:var(--su-asfalto);border-radius:18px;overflow:hidden}
.capitolo img{width:100%;aspect-ratio:16/10;object-fit:cover}
.capitolo>div{padding:0 1.2rem 1.4rem;display:grid;gap:.6rem}
.capitolo h3{font-size:clamp(1.5rem,4vw,2.2rem);color:var(--mezzeria);text-transform:uppercase;line-height:.95}
.capitolo .leggi{color:var(--su-asfalto);font-size:1.04rem}
.capitolo .occhiello{color:var(--su-asfalto-2)}
.capitolo .btn{justify-self:start}
@media (min-width:900px){
  .capitolo{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch}
  .capitolo img{height:100%;aspect-ratio:auto;min-height:22rem}
  .capitolo>div{padding:1.6rem 1.8rem 1.8rem 0;align-content:center}
  .capitolo:nth-child(odd of .capitolo){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .capitolo:nth-child(odd of .capitolo) img{order:2}
  .capitolo:nth-child(odd of .capitolo)>div{padding:1.6rem 0 1.8rem 1.8rem}
}
/* prima della partenza: un tratto di carta intera con il titolo, poi la moto si avvicina ad Alviano */
.giro .tappa:first-child{min-height:215svh}
@media (min-width:900px){.giro .tappa:first-child{align-items:flex-end}}
.breve-mini{border-top:1px solid var(--linea);padding-top:.4rem}
.breve-mini summary{cursor:pointer;list-style:none}
.breve-mini summary::-webkit-details-marker{display:none}
.breve-mini summary .ia::after{content:" +";color:var(--rocca)}
.breve-mini[open] summary .ia::after{content:" –"}
.breve-mini p{font:400 .98rem/1.5 var(--f-read);margin-top:.4rem}
.breve-mini .nota{font:500 .75rem/1.3 var(--f-ui);color:var(--fg-2)}
.giro-azioni{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem}
.giro-azioni .btn{font-size:.82rem;padding:.55rem .8rem}