/* ═══════════════════════════════════════════════════════════
   L'INCANTO DI IONA — 14-20 maggio 2027 — design system

   Direzione visiva: «Sabbia e Basalto» (vedi FILOSOFIA.md).
   Struttura e componenti vengono dalla landing Lake District;
   i colori NO — sono campionati dalle pagine del PDF del
   programma e dalla foto di copertina.

   PER RI-TAVOLOZZARE: cambia solo i valori qui sotto. Ogni colore
   ha anche i canali RGB (--*-rgb) perché tutte le trasparenze della
   pagina sono scritte come rgba(var(--x-rgb),alpha).

     --deep-*        basalto: fasce fotografiche e footer
     --umber-*       torba: secondo scuro caldo, badge delle giornate
     --natural*      verde-salvia dell'acqua di Iona
     --accent        verde-acqua profondo — occhielli, filetti, bullet
     --highlight     sabbia di conchiglia — CTA e tutto ciò che brilla sullo scuro
     --light/-2      carta di conchiglia e sabbia asciutta
     --ink*          testo su chiaro · --on-dark* testo su scuro

   Contrasti misurati con scripts/contrast.py:
     accent #2F6F68 su light #F7F2EA .......... 5,20:1  AA
     highlight #DDB98E su deep-900 #1B2731 .... 8,26:1  AAA
     on-dark #EDE7DC su deep-900 .............. 12,4:1  AAA
   ═══════════════════════════════════════════════════════════ */

:root{
  /* --- palette: campionata dal PDF (badge #39485A) e dalla copertina --- */
  --deep-900:#1B2731;   --deep-rgb:27,39,49;
  --deep-800:#26333F;
  --deep-700:#39485A;
  --deep-600:#4A5A6C;

  --umber-800:#463A30;  --umber-rgb:70,58,48;
  --umber-700:#584A3D;
  --umber-600:#6E5C4B;

  --natural:#4C6B63;    --natural-rgb:76,107,99;
  --natural-soft:#93B0A7;

  --accent:#2F6F68;     --accent-rgb:47,111,104;
  --accent-deep:#1F5751; --accent-deep-rgb:31,87,81;
  --accent-warm:#7FB0A6;

  --highlight:#DDB98E;  --highlight-rgb:221,185,142;
  --highlight-soft:#EFD6B6;

  --muted:#5F6E77;          /* 5,02:1 su --paper, 4,73:1 su --light */
  --muted-2:#9BA7AE;
  --light-2:#EDE5D8;
  --light:#F7F2EA;      --light-rgb:247,242,234;
  --paper:#FCF9F3;      --paper-rgb:252,249,243;

  --ink:#22303B;        --ink-rgb:34,48,59;
  --ink-soft:#4A5A66;
  --on-dark:#EDE7DC;    --on-dark-rgb:237,231,220;
  --on-dark-soft:#B3BDBF;

  /* --- tipografia: letta da `pdffonts` del programma, non scelta a gusto ---
     Libre Baskerville è nel PDF (titolo di copertina). Il sans del PDF è
     Garet, non distribuito da Google Fonts: Jost è l'eco libera della stessa
     classe (geometrico derivato dal Futura). Vedi FILOSOFIA.md. --- */
  --font-display:'Libre Baskerville',Georgia,'Times New Roman',serif;
  --font-sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --maxw:1200px;
  --pad:clamp(20px,5vw,48px);
  /* raggi diversi per piani diversi: card, campo, badge */
  --r-lg:22px;
  --r-md:14px;
  --r-sm:9px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-1:0 2px 10px rgba(var(--deep-rgb),.06),0 12px 34px rgba(var(--deep-rgb),.07);
  --shadow-2:0 8px 24px rgba(var(--deep-rgb),.10),0 28px 70px rgba(var(--deep-rgb),.14);
}

/* ─── Reset ─── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:78px}
/* WCAG 2.2 AA "Focus Not Obscured": sotto i 720px la sticky CTA occupa il
   fondo dello schermo, quindi lo scroll deve fermarsi prima. */
@media(max-width:719px){html{scroll-padding-bottom:92px}}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:clamp(16px,.4vw + 14.9px,17px);
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;line-height:1.08;letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
::selection{background:var(--highlight);color:var(--deep-900)}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ─── Salta al contenuto ─── */
.skip{
  position:absolute;left:var(--pad);top:-100px;z-index:200;
  padding:.8em 1.4em;border-radius:0 0 var(--r-sm) var(--r-sm);
  background:var(--highlight);color:var(--deep-900);
  font-weight:600;font-size:.9rem;
  transition:top .25s var(--ease-out);
}
.skip:focus{top:0}

/* ─── Reveal on scroll ─── */
.reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease-out) var(--d,0s),transform .85s var(--ease-out) var(--d,0s);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}

/* ─── Scroll progress ─── */
.scroll-progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:120;pointer-events:none}
.scroll-progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),var(--highlight));
}

/* ═══════════ BUTTONS ═══════════ */
.btn{
  --btn-bg:var(--highlight);
  --btn-fg:var(--deep-900);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.92em 1.7em;
  border:0;border-radius:999px;
  font-family:var(--font-sans);
  font-size:.9rem;font-weight:600;letter-spacing:.02em;
  color:var(--btn-fg);background:var(--btn-bg);
  cursor:pointer;overflow:hidden;isolation:isolate;
  /* 48px pieni anche quando il testo è corto, e niente attesa di 300ms sul tap */
  min-height:48px;touch-action:manipulation;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),background-color .35s var(--ease);
  box-shadow:0 6px 18px rgba(var(--deep-rgb),.20);
}
.btn span{position:relative;z-index:2}
.btn__ico{position:relative;z-index:2;width:1.05em;height:1.05em;flex:none}
.btn:hover .btn__ico{animation:nudge .55s var(--ease-out)}
@keyframes nudge{0%,100%{transform:translateY(0)}45%{transform:translateY(3px)}}
.btn::after{ /* shimmer */
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .75s var(--ease-out);
}
.btn::before{ /* arrow gutter */
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 160% at 0% 50%,rgba(255,255,255,.35),transparent 60%);
  opacity:0;transition:opacity .45s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(var(--deep-rgb),.30)}
.btn:hover::after{transform:translateX(120%)}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn:focus-visible{outline:2.5px solid var(--highlight);outline-offset:3px}

.btn--highlight{--btn-bg:var(--highlight);--btn-fg:#2B2416}
.btn--dark{--btn-bg:var(--deep-800);--btn-fg:var(--light);box-shadow:0 6px 18px rgba(var(--deep-rgb),.2)}
.btn--dark:hover{box-shadow:0 14px 34px rgba(var(--deep-rgb),.3)}
.btn--ghost{
  --btn-fg:var(--light);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(var(--on-dark-rgb),.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:none;
}
.btn--ghost:hover{background:rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.22)}
.btn--lg{padding:1.05em 2.05em;font-size:.96rem}
.btn--sm{padding:.68em 1.25em;font-size:.82rem}
.btn--block{width:100%}

/* ═══════════ SHARED HEADINGS ═══════════ */
.eyebrow{
  font-size:.735rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:'';width:26px;height:1px;background:currentColor;opacity:.6;flex:none}
.eyebrow--light{color:var(--highlight)}

.sec-head{max-width:62ch;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.sec-head--tight{margin-bottom:2rem}
.sec-title{font-size:clamp(1.72rem,3.3vw,2.55rem);font-weight:400;letter-spacing:-.018em;color:var(--deep-700)}
.sec-head--light .sec-title{color:var(--light)}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transform:translateY(-102%);
  transition:transform .55s var(--ease-out),background-color .4s var(--ease);
  background:rgba(var(--deep-rgb),.86);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(var(--on-dark-rgb),.10);
}
.nav.is-visible{transform:none}
.nav__inner{
  max-width:var(--maxw);margin-inline:auto;padding:.7rem var(--pad);
  display:flex;align-items:center;gap:1.5rem;
}
.nav__brand img{width:auto;height:42px;filter:brightness(0) invert(1);opacity:.94}
.nav__links{display:none;margin-left:auto;gap:1.6rem}
.nav__links a{
  position:relative;font-size:.855rem;font-weight:500;color:var(--on-dark-soft);
  transition:color .3s var(--ease);
  /* un link di testo alto 20px non arriva ai 24px richiesti dal bersaglio
     puntatore (WCAG 2.2): il padding allarga l'area senza spostare la riga */
  padding:.42rem .1rem;touch-action:manipulation;
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:-5px;width:100%;height:1.5px;
  background:var(--highlight);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav__links a:hover{color:var(--light)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1);transform-origin:left}
.nav__links a.is-active{color:var(--highlight)}
.nav__cta{margin-left:auto;white-space:nowrap;display:none}
@media(min-width:720px){.nav__cta{display:inline-flex}}
@media(min-width:1140px){
  .nav__links{display:flex}
  .nav__cta{margin-left:0}
}

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:clamp(5.5rem,13vh,8rem) clamp(1.8rem,4.5vh,2.8rem);
  overflow:hidden;
  background:var(--deep-900);
  isolation:isolate;
}
.hero__media{position:absolute;inset:-12% 0 -12% 0;z-index:-3}
.hero__media picture{display:block;width:100%;height:100%}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
/* --- hero immersiva: il video sta SOPRA il poster, stesso ritaglio ---
   Il poster è la foto vera del luogo (e resta l'unica cosa che si vede
   su mobile, con reduced-motion e finché il video non è pronto).
   main.js aggiunge .is-playing solo quando il video sta davvero girando:
   così non c'è mai un buco nero al posto della hero. --- */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 55%;
  opacity:0;transition:opacity 1.2s var(--ease-out);
  pointer-events:none;
}
.hero__media.is-playing .hero__video{opacity:1}
@media(max-width:719px){.hero__video{display:none}}
@media(prefers-reduced-motion:reduce){.hero__video{display:none}}

.hero__veil{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(var(--deep-rgb),.72) 0%,rgba(var(--deep-rgb),.24) 26%,rgba(var(--deep-rgb),.55) 62%,rgba(var(--deep-rgb),.93) 100%),
    radial-gradient(120% 85% at 18% 82%,rgba(var(--umber-rgb),.55),transparent 62%);
}
.hero__grain{
  position:absolute;inset:0;z-index:-1;opacity:.16;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* --- MOTIVO IN FILIGRANA (opzionale) ---
   Un elemento naturale del luogo, in PNG trasparente, che galleggia
   piano sull'hero e ritorna sbiadito nel footer: è il dettaglio che fa
   sembrare la pagina disegnata per QUESTO viaggio. Una foglia per un
   autunno inglese, un cardo per la Scozia, un'onda per un'isola.
   Se non hai un motivo credibile, togli .leaf e .footer__leaf: meglio
   niente che un'icona a caso. --- */
.leaf{position:absolute;z-index:-1;pointer-events:none;opacity:.85;filter:drop-shadow(0 12px 22px rgba(0,0,0,.35))}
.leaf--1{width:clamp(58px,7vw,104px);top:14%;right:6%;animation:drift 17s var(--ease) infinite}
.leaf--2{width:clamp(34px,4vw,58px);bottom:9%;left:2.5%;opacity:.55;animation:drift 23s var(--ease) infinite reverse}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) rotate(-8deg)}
  50%{transform:translate3d(-14px,26px,0) rotate(11deg)}
}

/* --- pausa del fondale animato ---
   Il video è decorativo ma va in loop: senza un modo per fermarlo, chi è
   sensibile al movimento non ha scampo se non disattivando le animazioni di
   sistema. Il pulsante lo crea main.js solo quando il video sta girando
   davvero, così sulle landing senza video non resta un comando orfano. --- */
.hero__pause{
  position:absolute;z-index:4;
  right:var(--pad);bottom:clamp(1.1rem,3vh,1.8rem);
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(var(--on-dark-rgb),.28);
  background:rgba(var(--deep-rgb),.45);color:var(--on-dark);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  cursor:pointer;touch-action:manipulation;opacity:.7;
  transition:opacity .35s var(--ease),background-color .35s var(--ease),transform .35s var(--ease-out);
}
.hero__pause:hover,.hero__pause:focus-visible{opacity:1;background:rgba(var(--deep-rgb),.7);transform:scale(1.06)}
.hero__pause:focus-visible{outline:2.5px solid var(--highlight);outline-offset:3px}
.hero__pause svg{width:16px;height:16px}

.hero__content{position:relative;z-index:2}
.hero__eyebrow{
  font-size:clamp(.72rem,1.5vw,.8rem);font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--highlight-soft);margin-bottom:clamp(1rem,3vw,1.5rem);
  text-shadow:0 1px 12px rgba(var(--deep-rgb),.8);
}
.hero__eyebrow strong{font-weight:700;color:#fff}

.hero__title{
  font-size:clamp(2.25rem,6.2vw,4.5rem);
  font-weight:700;line-height:1.04;letter-spacing:-.028em;
  color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.35);
  }
.hero__title span{display:block}
.hero__title-2{
  font-style:italic;font-weight:400;font-size:.92em;
  color:var(--highlight-soft);
  padding-left:.09em;
}
.hero__payoff{
  margin-top:clamp(1rem,3vw,1.4rem);
  font-family:var(--font-display);
  font-size:clamp(1.02rem,1.9vw,1.32rem);
  font-weight:400;font-style:italic;
  color:var(--on-dark);
  max-width:34ch;
  text-shadow:0 1px 16px rgba(var(--deep-rgb),.6);
}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-top:clamp(1.2rem,2.8vh,1.8rem);
}
.hero__meta li{
  padding:.44em 1.02em;border-radius:999px;
  font-size:.795rem;font-weight:500;letter-spacing:.01em;
  color:var(--light);
  background:rgba(255,255,255,.09);
  border:1px solid rgba(var(--on-dark-rgb),.24);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.4rem,3.2vh,2rem)}

.hero__price{
  display:inline-flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  margin-top:clamp(1.2rem,2.8vh,1.7rem);
  padding:.7rem 1.3rem;border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(var(--light-rgb),.13),rgba(var(--light-rgb),.05));
  border:1px solid rgba(var(--highlight-rgb),.42);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.hero__price-label{font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--highlight-soft)}
.hero__price-value{font-family:var(--font-display);font-size:clamp(1.42rem,3.3vw,1.9rem);font-weight:700;color:#fff}

.hero__partners{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:clamp(1.5rem,3.6vh,2.3rem) auto 0;
  padding-inline:var(--pad);
}
.hero__partners .brandbar{display:inline-flex}

.hero__scroll{
  position:absolute;bottom:1.4rem;right:var(--pad);z-index:3;
  width:26px;height:52px;display:none;
}
.hero__scroll-line{
  position:absolute;left:50%;top:0;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,rgba(var(--on-dark-rgb),.6));
  overflow:hidden;
}
.hero__scroll-line::after{
  content:'';position:absolute;left:0;width:1px;height:40%;
  background:var(--highlight);animation:scrollcue 2.4s var(--ease) infinite;
}
@keyframes scrollcue{0%{top:-40%}100%{top:100%}}
@media(min-width:900px){.hero__scroll{display:block}}

/* ═══════════ MANIFESTO ═══════════ */
.manifesto{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(5.5rem,15vw,10rem);
  background:var(--deep-900);
}
.manifesto__bg{position:absolute;inset:-14% 0;z-index:-2}
.manifesto__bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.manifesto__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(var(--deep-rgb),.90) 0%,rgba(var(--deep-rgb),.68) 46%,rgba(var(--deep-rgb),.22) 100%),
    linear-gradient(180deg,rgba(var(--deep-rgb),.62),transparent 34%,rgba(var(--deep-rgb),.72));
}
.manifesto__inner{max-width:760px}
.manifesto__title{
  font-size:clamp(1.7rem,3.9vw,2.95rem);font-weight:400;line-height:1.14;color:#fff;
  }
.manifesto__title em{font-style:italic;color:var(--highlight-soft);font-weight:400}
.manifesto__lead{
  margin-top:1.4rem;max-width:58ch;
  font-size:clamp(1rem,1.7vw,1.13rem);color:var(--on-dark-soft);
}
.manifesto .btn{margin-top:2rem}

/* ═══════════ FACTS ═══════════ */
.facts{
  position:relative;z-index:3;
  margin-top:clamp(-4rem,-6vw,-3rem);
  padding-bottom:clamp(3.5rem,8vw,5.5rem);
}
.facts__grid{
  display:grid;gap:.85rem;
  grid-template-columns:1fr;
}
@media(min-width:620px){.facts__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.facts__grid{grid-template-columns:repeat(4,1fr)}}
.fact{
  padding:1.5rem 1.4rem;border-radius:var(--r-md);
  background:var(--paper);
  border:1px solid rgba(var(--ink-rgb),.09);
  box-shadow:var(--shadow-1);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.fact:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.fact__k{
  display:block;font-size:.685rem;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;
}
.fact__v{
  display:block;font-family:var(--font-display);
  font-size:clamp(1.02rem,1.9vw,1.24rem);font-weight:700;line-height:1.22;color:var(--deep-700);
}
.fact--accent{
  background:linear-gradient(150deg,var(--umber-700),var(--umber-800));
  border-color:transparent;
}
.fact--accent .fact__k{color:var(--highlight)}
.fact--accent .fact__v{color:#fff;font-size:clamp(1.5rem,3vw,1.9rem)}

/* ═══════════ LA QUOTA INCLUDE ═══════════ */
.include{
  position:relative;
  padding-block:clamp(4.5rem,11vw,7.5rem);
  /* Fondo chiaro. La sezione deve pesare per gerarchia — l'occhiello, il
     titolo grande, le card sollevate — non perché è nera: una pagina di
     viaggio tutta scura legge come modalità notte, non come eleganza. */
  background:linear-gradient(170deg,var(--light-2),var(--light));
  color:var(--ink);
  overflow:hidden;
}
.include::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:radial-gradient(circle at 1px 1px,var(--accent) 1px,transparent 0);
  background-size:26px 26px;
}
.include__grid{
  position:relative;
  display:grid;gap:.7rem;
  grid-template-columns:1fr;
}
@media(min-width:660px){.include__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:660px) and (max-width:1039px){.include__grid .inc:last-child{grid-column:span 2}}
@media(min-width:1040px){.include__grid{grid-template-columns:repeat(3,1fr)}}
.inc{
  display:flex;flex-direction:column;gap:.95rem;
  padding:1.5rem 1.35rem 1.6rem;
  border-radius:var(--r-md);
  background:var(--paper);
  border:1px solid rgba(var(--ink-rgb),.09);
  box-shadow:var(--shadow-1);
  transition:transform .5s var(--ease-out),background-color .45s var(--ease),border-color .45s var(--ease);
}
.inc:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-2);
  border-color:rgba(var(--accent-rgb),.35);
}
.inc__icon{
  width:42px;height:42px;flex:none;
  display:grid;place-items:center;border-radius:12px;
  color:var(--accent);
  background:rgba(var(--accent-rgb),.08);
  border:1px solid rgba(var(--accent-rgb),.18);
  transition:background-color .45s var(--ease),transform .5s var(--ease-out);
}
.inc:hover .inc__icon{background:rgba(var(--accent-rgb),.15);transform:scale(1.06) rotate(-3deg)}
.inc__icon svg{width:21px;height:21px}
.inc p{font-size:.94rem;line-height:1.5;color:var(--ink-soft)}
@media(max-width:659px){
  .inc{flex-direction:row;align-items:center;gap:1rem;padding:1.15rem 1.2rem}
  .inc__icon{width:38px;height:38px;border-radius:10px}
  .inc__icon svg{width:19px;height:19px}
  .inc p{font-size:.92rem}
}
.include__cta{margin-top:clamp(2.2rem,5vw,3.2rem);text-align:center}

/* ═══════════ VOLI ═══════════ */
.flights{
  padding-block:clamp(4.5rem,11vw,7.5rem);
  background:linear-gradient(180deg,var(--light),var(--paper));
}
.flights__carrier{width:auto;height:clamp(20px,3vw,26px);margin-top:1.6rem;opacity:.9}
.flights__grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:820px){.flights__grid{grid-template-columns:repeat(2,1fr)}}

.fcard{
  position:relative;overflow:hidden;
  padding:1.5rem clamp(1.2rem,3vw,2rem) 1.7rem;
  border-radius:var(--r-md);
  background:var(--paper);
  border:1px solid rgba(var(--ink-rgb),.10);
  box-shadow:var(--shadow-1);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.fcard::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--accent),var(--highlight));
}
.fcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.fcard__top{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-bottom:1.15rem;margin-bottom:1.2rem;
  border-bottom:1px dashed rgba(var(--ink-rgb),.18);
}
.fcard__date{font-size:.755rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.fcard__code{
  font-family:var(--font-sans);font-size:.85rem;font-weight:700;letter-spacing:.1em;
  color:var(--deep-800);padding:.28em .8em;border-radius:999px;background:rgba(var(--ink-rgb),.06);
}
.fcard__route{display:flex;align-items:center;gap:.9rem}
.fcard__end{min-width:0}
.fcard__end--r{text-align:right;margin-left:auto}
.fcard__end strong{
  display:block;font-family:var(--font-display);
  font-size:clamp(1.35rem,3.4vw,1.8rem);font-weight:700;line-height:1;color:var(--deep-700);
}
.fcard__end span{
  display:block;margin-top:.32rem;
  font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.fcard__line{
  flex:1;position:relative;height:20px;display:grid;place-items:center;min-width:60px;
  color:var(--natural-soft);
}
.fcard__line::before{
  content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:repeating-linear-gradient(90deg,rgba(var(--ink-rgb),.3) 0 5px,transparent 5px 10px);
}
.fcard__line svg{
  position:relative;width:19px;height:19px;
  background:var(--paper);padding:0 3px;
  transform:rotate(90deg);
  transition:transform .6s var(--ease-out);
}
.fcard__line--back svg{transform:rotate(-90deg)}
.fcard:hover .fcard__line svg{transform:rotate(90deg) translateY(-4px)}
.fcard:hover .fcard__line--back svg{transform:rotate(-90deg) translateY(-4px)}

/* Bagagli */
.bags{margin-top:clamp(3.2rem,8vw,5rem)}
.bags__title{font-size:clamp(1.4rem,2.8vw,1.95rem);font-weight:700;color:var(--deep-700)}
.bags__sub{margin-top:.4rem;color:var(--muted);font-size:.95rem}
.bags__grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:820px){.bags__grid{grid-template-columns:repeat(2,1fr)}}
.bag{
  padding:1.7rem clamp(1.2rem,3vw,1.8rem);
  border-radius:var(--r-md);
  background:var(--paper);
  border:1px solid rgba(var(--ink-rgb),.10);
  box-shadow:var(--shadow-1);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s var(--ease);
}
.bag:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:rgba(var(--accent-rgb),.3)}
.bag__icon{
  display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  color:var(--accent);background:rgba(var(--accent-rgb),.09);border:1px solid rgba(var(--accent-rgb),.18);
}
.bag__icon svg{width:23px;height:23px}
.bag h4{margin:1.05rem 0 1rem;font-size:1.12rem;font-weight:700;color:var(--deep-700)}
.bag ul{display:flex;flex-direction:column;gap:.62rem}
.bag li{
  position:relative;padding-left:1.35rem;
  font-size:.92rem;line-height:1.5;color:var(--ink-soft);
}
.bag li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--accent-warm);
}

/* ═══════════ ITINERARIO ═══════════ */
.itin{
  padding-block:clamp(4.5rem,11vw,7.5rem) 0;
  /* Anche il programma su fondo chiaro: è la sezione più lunga della pagina,
     e tenerla scura faceva sembrare tutto il sito in modalità notte. Il ritmo
     lo danno le foto e la banda a metà, non il nero. */
  background:linear-gradient(180deg,var(--paper),var(--light) 40%,var(--paper));
  color:var(--ink);
  overflow:hidden;
}
.day{padding-block:clamp(2.2rem,4.6vw,3.2rem)}
.day__inner{display:grid;gap:clamp(1.8rem,4vw,3rem);grid-template-columns:1fr}
@media(min-width:960px){
  .day__inner{grid-template-columns:1.05fr .95fr;align-items:center}
  .day--alt .day__side{order:2}
  .day--alt .day__timeline{order:1}
}

.day__badge{
  display:inline-flex;align-items:baseline;gap:.5rem;
  padding:.45rem 1.05rem;border-radius:999px;
  background:linear-gradient(140deg,var(--deep-700),var(--deep-800));
  border:1px solid rgba(var(--deep-rgb),.2);
}
.day__badge span{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--highlight)}
.day__badge strong{font-family:var(--font-display);font-size:1.15rem;color:#fff}
.day__date{
  margin-top:.85rem;
  font-size:clamp(1.28rem,2.5vw,1.85rem);font-weight:400;font-style:italic;line-height:1.22;
  color:var(--accent);
}

.day__gallery{
  display:grid;gap:.6rem;margin-top:clamp(1.4rem,3vw,2rem);
  grid-template-columns:repeat(2,1fr);
}
.day__gallery--three{grid-template-columns:repeat(2,1fr)}
/* una foto sola per giornata: occupa tutta la colonna, formato più largo */
.day__gallery--one{grid-template-columns:1fr}
.day__gallery--one .day__fig{aspect-ratio:16/9}
.day__fig{
  position:relative;margin:0;overflow:hidden;border-radius:var(--r-md);
  background:var(--light-2);
  aspect-ratio:4/3;
}
.day__gallery--three .day__fig--a{grid-column:span 2;aspect-ratio:16/9}
.day__fig img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
  transition:transform 1.1s var(--ease-out),filter .8s var(--ease);
  filter:saturate(.94);
}
.day__fig::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(var(--deep-rgb),.4));
  opacity:.85;transition:opacity .6s var(--ease);
}
.day__fig:hover img{transform:scale(1.13);filter:saturate(1.06)}
.day__fig:hover::after{opacity:.45}

.day__timeline{position:relative;padding-left:1.9rem}
.day__timeline::before{
  content:'';position:absolute;left:5px;top:.7rem;bottom:.7rem;width:1px;
  background:linear-gradient(180deg,var(--accent),rgba(var(--accent-rgb),.18));
}
.tl{position:relative;padding-bottom:2.1rem}
.tl:last-child{padding-bottom:0}
.tl::before{
  content:'';position:absolute;left:-1.9rem;top:.55rem;
  width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:2px solid var(--accent);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.10);
  transition:box-shadow .5s var(--ease),background-color .4s var(--ease);
}
.tl:hover::before{background:var(--accent);box-shadow:0 0 0 7px rgba(var(--accent-rgb),.16)}
.tl__when{
  display:inline-block;margin-bottom:.55rem;
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--natural);
}
.tl__body p{font-size:clamp(1rem,1.6vw,1.09rem);line-height:1.62;color:var(--ink-soft)}
.tl__body p + p{margin-top:.35rem}
/* i luoghi sono le uniche parole in grassetto: sul chiaro vanno in ink pieno */
.tl__body b{color:var(--ink);font-weight:600}
.tl--night .tl__when{color:var(--muted)}
.tl--night .tl__body p{color:var(--muted)}
.tl__hotel{
  display:inline-block;margin-top:.5rem !important;
  padding:.3em .85em;border-radius:999px;
  font-size:.83rem !important;font-weight:600;
  color:var(--accent-deep) !important;
  background:rgba(var(--accent-rgb),.09);border:1px solid rgba(var(--accent-rgb),.26);
}

/* Break band */
.itin__break{
  position:relative;overflow:hidden;isolation:isolate;
  margin-block:clamp(2rem,5vw,3.5rem);
  padding-block:clamp(4rem,10vw,6.5rem);
  text-align:center;
}
.itin__break-media{position:absolute;inset:-16% 0;z-index:-2}
.itin__break-media img{width:100%;height:100%;object-fit:cover}
.itin__break::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(var(--deep-rgb),.9),rgba(var(--umber-rgb),.78),rgba(var(--deep-rgb),.92));
}
.itin__break-quote{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,3.4vw,2.25rem);
  font-weight:400;font-style:italic;line-height:1.32;
  color:#fff;max-width:22ch;margin-inline:auto;
}
.itin__break .btn{margin-top:1.9rem}

/* ═══════════ MAPPA ═══════════ */
.map{
  /* Niente fascia scura in cima: qui sopra c'è l'itinerario, che è chiaro,
     e sotto il corpo della mappa, anch'esso chiaro. Era una striscia scura
     fra due sezioni chiare — non separava niente e, crescendo con l'altezza
     della sezione, su mobile finiva sotto l'occhiello rendendolo illeggibile
     (verde scuro su ardesia). Tolta la fascia, il guasto non è più possibile. */
  padding-block:clamp(3.4rem,9vw,6rem) clamp(4.5rem,11vw,7.5rem);
  background:var(--light);
}
.map__inner{display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:1fr;align-items:center}
@media(min-width:940px){.map__inner{grid-template-columns:1fr .85fr}}
.map__chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.8rem}
.map__chips li{
  padding:.44em 1em;border-radius:999px;
  font-size:.845rem;font-weight:500;color:var(--deep-700);
  background:var(--paper);border:1px solid rgba(var(--ink-rgb),.12);
  transition:transform .35s var(--ease-out),background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
/* Le chip sono etichette, non comandi: un hover che le solleva e le
   inverte come un pulsante promette un'azione che non c'è. Resta un
   cambio di tinta appena percettibile, che dice "elenco" e non "bottone". */
.map__chips li:hover{
  background:var(--light-2);border-color:rgba(var(--accent-rgb),.3);
}
.map .btn{margin-top:2rem}
.map__fig{margin:0;overflow:hidden;border-radius:var(--r-lg)}
.map__fig img{width:100%;mix-blend-mode:multiply}

/* ═══════════ NOTA ═══════════ */
.note{padding-block:clamp(2rem,5vw,3rem);background:var(--light)}
.note__inner{
  display:flex;align-items:center;gap:1.1rem;
  padding:1.25rem clamp(1.2rem,3vw,1.8rem);
  border-radius:var(--r-md);
  background:linear-gradient(120deg,rgba(var(--accent-rgb),.09),rgba(var(--highlight-rgb),.12));
  border:1px solid rgba(var(--accent-rgb),.22);
}
.note__icon{
  flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;
  color:var(--accent-deep);background:rgba(var(--accent-rgb),.12);
}
.note__icon svg{width:22px;height:22px}
.note p{
  font-size:clamp(.95rem,1.7vw,1.06rem);font-weight:500;color:var(--umber-700);
  text-transform:uppercase;letter-spacing:.04em;
}
.note p b{color:var(--accent-deep);font-weight:700}

/* ═══════════ CTA FINALE ═══════════ */
.cta{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(4.5rem,11vw,8rem);
  background:var(--deep-900);
}
.cta__bg{position:absolute;inset:-14% 0;z-index:-2}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(105deg,rgba(var(--deep-rgb),.95) 0%,rgba(var(--deep-rgb),.84) 46%,rgba(var(--umber-rgb),.66) 100%),
    linear-gradient(180deg,rgba(var(--deep-rgb),.85),transparent 35%,rgba(var(--deep-rgb),.9));
}
.cta__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.cta .eyebrow{justify-content:center}
.cta__title{
  font-size:clamp(1.65rem,3.5vw,2.65rem);font-weight:400;line-height:1.14;color:#fff;max-width:18ch;
  }
.cta__lead{margin-top:1.2rem;margin-bottom:2.2rem;max-width:46ch;color:var(--on-dark-soft);font-size:clamp(1rem,1.7vw,1.09rem)}
.cta__file{margin-top:1rem;font-size:.8rem;letter-spacing:.06em;color:var(--muted-2)}
.cta__lead b{color:var(--highlight-soft);font-weight:600}
.cta__partners{margin-top:clamp(2.2rem,5vw,3rem)}

/* ═══════════ BRAND LOCKUP ═══════════ */
.brandbar{
  display:inline-flex;align-items:center;gap:clamp(.9rem,2.4vw,1.5rem);
  padding:.62rem clamp(.9rem,2.4vw,1.25rem);
  border-radius:var(--r-md);
  background:rgba(var(--paper-rgb),.94);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.brandbar:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.28)}
/* i loghi non hanno lo stesso peso ottico: ognuno vuole la sua altezza,
   altrimenti uno schiaccia gli altri. Misurala guardando, non calcolandola. */
.brandbar img{width:auto;height:clamp(42px,4.8vw,54px)}
.brandbar__b2{height:clamp(38px,4.4vw,49px) !important}
.brandbar__b3{height:clamp(11px,1.5vw,14px) !important}
.brandbar__sep{width:1px;height:38px;background:rgba(var(--ink-rgb),.16);flex:none}

/* ═══════════ FOOTER ═══════════ */
.footer{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(3.2rem,8vw,4.8rem);
  background:linear-gradient(180deg,var(--deep-900) 0%,var(--umber-800) 100%);
  color:var(--on-dark-soft);
  text-align:center;
}
/* lo stesso motivo dell'hero, in filigrana */
.footer__leaf{
  position:absolute;z-index:-1;pointer-events:none;
  width:clamp(200px,32vw,340px);
  right:-6%;bottom:-28%;
  opacity:.06;transform:rotate(-14deg);
}
.footer__inner{display:flex;flex-direction:column;align-items:center}

.footer .brandbar{margin-bottom:clamp(1.7rem,4vw,2.4rem)}

.footer__rule{
  display:block;width:min(300px,58%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--highlight-rgb),.5),transparent);
  margin-bottom:clamp(1.5rem,3.5vw,2.1rem);
}

.footer__title{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.8vw,1.85rem);
  font-weight:700;line-height:1.2;color:var(--light);
}
.footer__dates{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.2rem .6rem;margin-top:.6rem;
  font-size:.775rem;font-weight:500;letter-spacing:.185em;text-transform:uppercase;
  color:var(--on-dark-soft);
}
.footer__sep{color:var(--highlight);opacity:.65}
@media(max-width:560px){
  .footer__dates{flex-direction:column;gap:.3rem;letter-spacing:.14em}
  .footer__sep{display:none}
  .footer .brandbar{gap:.7rem;padding-inline:.8rem}
}

.footer__site{
  position:relative;
  margin-top:clamp(1.6rem,3.5vw,2.2rem);
  font-size:.83rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--highlight);
  transition:color .35s var(--ease);
}
.footer__site span{position:relative;display:inline-block;padding-bottom:5px}
.footer__site span::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.45;
  transform:scaleX(.55);transform-origin:center;
  transition:transform .5s var(--ease-out),opacity .35s var(--ease);
}
.footer__site:hover{color:var(--highlight-soft)}
.footer__site:hover span::after{transform:scaleX(1);opacity:1}
.footer__site:focus-visible{outline:2.5px solid var(--highlight);outline-offset:5px;border-radius:4px}

/* ═══════════ STICKY CTA (mobile) ═══════════ */
.sticky-cta{
  position:fixed;left:.7rem;right:.7rem;bottom:.7rem;z-index:95;
  transform:translateY(160%);
  transition:transform .55s var(--ease-out);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.sticky-cta.is-visible{transform:none}
.sticky-cta .btn{box-shadow:0 12px 34px rgba(0,0,0,.4)}
@media(min-width:1140px){.sticky-cta{display:none}}

/* ═══════════ REDUCED MOTION ═══════════ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
  .day__fig img{transform:none}
}

/* --- dicitura legale: piccola ma leggibile, è ciò che rende verificabile
   l'offerta. Copiata integrale dal PDF, non riassunta. --- */
.footer__legal{
  margin-top:clamp(1.8rem,4vw,2.6rem);max-width:64ch;
  font-size:.775rem;line-height:1.65;color:var(--on-dark-soft);
}
.footer__credits{margin-top:.9rem;font-size:.75rem;color:var(--on-dark-soft);opacity:.62}

/* ═══════════════════════════════════════════════════════════
   AGGIUNTE DI QUESTO PROGETTO — L'Incanto di Iona
   Tutto ciò che il template non aveva: elenco "non incluso",
   modalità di pagamento, tabella dei voli a dieci città,
   mappa Leaflet. I token restano quelli in testa al file.
   ═══════════════════════════════════════════════════════════ */

/* --- il motivo: esagono di basalto di Staffa --- */
.leaf{filter:drop-shadow(0 10px 26px rgba(0,0,0,.28))}
.leaf--1{opacity:.5}
.leaf--2{opacity:.3}

/* ─── NON INCLUDE ───
   Stessa griglia della quota ma sobria: bullet, non icone.
   Va detto, non nascosto: è la sezione che evita il reclamo. */
.excl{
  margin-top:clamp(3rem,7vw,4.6rem);
  padding:clamp(1.6rem,4vw,2.6rem) clamp(1.4rem,4vw,2.6rem);
  border-radius:var(--r-lg);
  background:var(--paper);
  border:1px solid rgba(var(--ink-rgb),.09);
  box-shadow:var(--shadow-1);
}
.excl__title{
  font-family:var(--font-display);font-size:clamp(1.15rem,2.2vw,1.45rem);
  font-weight:700;color:var(--deep-700);
}
.excl__list{margin-top:1.3rem;display:grid;gap:.75rem;grid-template-columns:1fr}
@media(min-width:760px){.excl__list{grid-template-columns:repeat(2,1fr);column-gap:2.4rem}}
.excl__list li{
  position:relative;padding-left:1.5rem;
  font-size:.92rem;line-height:1.55;color:var(--ink-soft);
}
.excl__list li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:2px;
  background:var(--accent);opacity:.55;transform:rotate(45deg);
}

/* ─── MODALITÀ DI PAGAMENTO ───
   Etichette in evidenza come testo scuro con un filetto nell'accento
   sotto, non come blocchi colorati: qui un blocco pieno urla. */
.pay{margin-top:clamp(2rem,4vw,2.8rem);display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:700px){.pay{grid-template-columns:repeat(2,1fr)}}
.pay__item{
  padding:1.15rem 1.35rem;border-radius:var(--r-md);
  background:var(--light);border:1px solid rgba(var(--ink-rgb),.08);
  border-left:3px solid var(--accent);
}
.pay__k{
  display:block;font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-deep);
}
.pay__v{display:block;margin-top:.35rem;font-size:1rem;color:var(--ink)}

/* ─── VOLI: dieci città, quindi tabella scrollabile oltre alle carte ─── */
.flights__note{
  margin-top:1.1rem;font-size:.9rem;color:var(--muted);
}
.ftable__wrap{
  margin-top:clamp(2.4rem,5vw,3.4rem);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--r-md);border:1px solid rgba(var(--ink-rgb),.1);
  background:var(--paper);
}
.ftable__hint{
  display:block;margin-bottom:.6rem;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
@media(min-width:860px){.ftable__hint{display:none}}
.ftable{width:100%;border-collapse:collapse;min-width:620px;font-size:.9rem}
.ftable caption{
  padding:1rem 1.1rem .2rem;text-align:left;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.ftable th,.ftable td{padding:.72rem 1.1rem;text-align:left;border-bottom:1px solid rgba(var(--ink-rgb),.07)}
.ftable thead th{
  font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-deep);background:rgba(var(--accent-rgb),.05);
  border-bottom:1px solid rgba(var(--accent-rgb),.18);
}
.ftable tbody tr:last-child th,.ftable tbody tr:last-child td{border-bottom:0}
.ftable tbody tr:hover{background:rgba(var(--highlight-rgb),.09)}
.ftable td b{font-family:var(--font-display);font-weight:700;color:var(--deep-700)}
.ftable__city{white-space:nowrap;color:var(--deep-700);font-weight:600}
.ftable__city span{display:block;font-size:.74rem;font-weight:400;letter-spacing:.06em;color:var(--muted)}
.ftable__stop{
  display:inline-block;padding:.16em .7em;border-radius:999px;font-size:.72rem;
  letter-spacing:.06em;background:rgba(var(--natural-rgb),.12);color:var(--accent-deep);
  white-space:nowrap;
}
.ftable__stop--x{background:rgba(var(--umber-rgb),.1);color:var(--umber-700)}

/* ─── MAPPA LEAFLET ───
   17 tappe sparse su tutta la Scozia occidentale: le chip da sole non
   dicono le distanze. Le chip restano, la mappa aggiunge la geografia. */
.map__shell{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(var(--ink-rgb),.12);box-shadow:var(--shadow-2);
  background:var(--deep-900);
}
.map__canvas{height:clamp(340px,58vw,560px);width:100%}
.leaflet-container{background:var(--deep-900);font-family:var(--font-sans)}
/* le tile OSM portate sulla palette: basalto e acqua salvia */
.leaflet-tile-pane{
  filter:grayscale(1) invert(1) brightness(1.06) contrast(.9)
         sepia(.7) hue-rotate(150deg) saturate(1.7);
}
.pin{
  display:grid;place-items:center;border-radius:50%;
  font-family:var(--font-sans);font-size:.78rem;font-weight:600;
  box-shadow:0 3px 10px rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,.5);
  transition:transform .5s var(--ease-out),opacity .6s var(--ease);
}
.leaflet-marker-icon:hover .pin{transform:scale(1.14)}
.leaflet-popup-content-wrapper{
  background:var(--paper);color:var(--ink);border-radius:var(--r-sm);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.leaflet-popup-content{margin:.7rem .9rem;line-height:1.35}
.leaflet-popup-tip{background:var(--paper)}
.pop__name{display:block;font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--deep-700)}
.pop__day{display:block;margin-top:.15rem;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.leaflet-control-attribution{
  background:rgba(var(--deep-rgb),.72)!important;color:var(--on-dark-soft)!important;
  font-size:10px!important;
}
.leaflet-control-attribution a{color:var(--natural-soft)!important}
.leaflet-bar a{background:var(--paper);color:var(--deep-700);border-bottom-color:rgba(var(--ink-rgb),.15)}
.leaflet-bar a:hover{background:var(--light-2)}
.map__toggle{
  position:absolute;z-index:500;right:12px;bottom:12px;
  padding:.55em 1.05em;border-radius:999px;border:1px solid rgba(var(--on-dark-rgb),.3);
  background:rgba(var(--deep-rgb),.82);color:var(--on-dark);
  font-family:var(--font-sans);font-size:.78rem;font-weight:500;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  cursor:pointer;min-height:40px;
}
.map__toggle:focus-visible{outline:2.5px solid var(--highlight);outline-offset:3px}
@media(min-width:861px){.map__toggle{display:none}}
.map__legend{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.1rem}
.map__legend li{display:inline-flex;align-items:center;gap:.42rem;font-size:.78rem;color:var(--ink-soft)}
.map__legend i{width:11px;height:11px;border-radius:50%;flex:none;border:1px solid rgba(var(--ink-rgb),.2)}
.map__caveat{margin-top:.9rem;font-size:.79rem;color:var(--muted);line-height:1.5}
.map__inner{align-items:start}
@media(min-width:940px){.map__inner{grid-template-columns:.82fr 1.18fr}}

/* ─── crediti immagini nel footer (licenze CC) ─── */
.footer__credits{
  margin-top:1.4rem;max-width:78ch;
  font-size:.72rem;line-height:1.7;color:var(--on-dark-soft);
}
.footer__credits a{color:var(--on-dark);text-decoration:underline;text-underline-offset:2px}
.footer__credits a:hover{color:var(--highlight-soft)}

/* --- carta d'imbarco con due tratte: l'etichetta dice quale --- */
.fcard__legk{
  display:block;margin:.2rem 0 .45rem;
  font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.fcard__route--back{
  margin-top:.2rem;padding-top:0;
}
.fcard__legk + .fcard__route--back{border-top:0}
.fcard__route + .fcard__legk{
  margin-top:1.15rem;padding-top:1.05rem;
  border-top:1px dashed rgba(var(--ink-rgb),.16);
}