/* ============================================================
   viaggioseychelles.it — "Un'estate alle Seychelles, 1966"
   LA PROIEZIONE — the page composed like an Italian film screening.
   Centered, symmetric, title-card architecture. Bodoni + grotesque + mono.
   Written for this node only. No shared chrome with any other site.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --pellicola:#F9F4E7;   /* the print fresh from the lab — bright ivory */
  --sabbia:#EDE2CA;      /* sunlit sand / paper                         */
  --cielo:#2FA8A5;       /* lagoon turquoise, glassy and vivid          */
  --terracotta:#C05A38;  /* the red layer, warm and confident           */
  --marina:#0F3E58;      /* deep ocean blue — the ink, never black      */
  --ottone:#C2924E;      /* brass, sparing                              */

  --ink-70:rgba(15,62,88,.72);
  --ink-45:rgba(15,62,88,.45);
  --ink-16:rgba(15,62,88,.16);
  --ink-08:rgba(15,62,88,.08);
  --ivory-80:rgba(242,235,221,.80);
  --ivory-60:rgba(242,235,221,.60);
  --ivory-22:rgba(242,235,221,.22);

  --display:"Bodoni Moda",'Didot','Bodoni MT',Georgia,serif;
  --body:"Archivo",'Helvetica Neue',Helvetica,Arial,sans-serif;
  --sheet:"Courier Prime",'Courier New',monospace;

  --beat:.5s;
  --ease:cubic-bezier(.32,.06,.24,1);
  --wrap:1160px;
  --gutter:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;background:var(--pellicola);color:var(--marina);
  font-family:var(--body);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(220,205,180,.5),transparent 60%),
    radial-gradient(100% 70% at 50% 100%,rgba(47,168,165,.12),transparent 65%);
}

/* 35mm grain — the human trace over everything */
.grain{
  position:fixed;inset:-120px;z-index:9;pointer-events:none;opacity:.20;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.5'/></svg>");
  animation:weave 1.1s steps(4) infinite;mix-blend-mode:multiply;
}
@keyframes weave{
  0%{transform:translate(0,0)}25%{transform:translate(-6px,3px)}
  50%{transform:translate(4px,-5px)}75%{transform:translate(-3px,-2px)}100%{transform:translate(0,0)}
}

/* ---------- 2. Type ---------- */
h1,h2,h3{
  font-family:var(--display);font-weight:500;font-optical-sizing:auto;
  letter-spacing:-.015em;line-height:1.04;margin:0;text-wrap:balance;
}
h1{font-size:clamp(2.9rem,7.6vw,6.2rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.7rem)}
h3{font-size:clamp(1.28rem,2.1vw,1.66rem);line-height:1.16;letter-spacing:-.008em}
p{margin:0 0 1.15em}
a{color:inherit;text-decoration:none}

.sheet{
  font-family:var(--sheet);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-70);display:inline-block;
}
.sheet--acc{color:var(--terracotta)}

.lead{
  font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.64;color:var(--ink-70);
  max-width:64ch;margin-inline:auto;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);position:relative;z-index:1}
.section{padding:clamp(80px,12vh,150px) 0;position:relative;z-index:1}

/* ---------- 3. The title card — every section opens with one. Centered, symmetric ---------- */
.tcard{text-align:center;max-width:74ch;margin:0 auto clamp(44px,6.5vh,80px)}
.tcard__num{
  display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:22px;
  font-family:var(--sheet);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--terracotta);
}
.tcard__num::before,.tcard__num::after{
  content:"";width:64px;height:1px;background:currentColor;opacity:.55;
}
.tcard h2 em{font-style:italic;color:var(--terracotta)}
.tcard .lead{margin-top:22px}
.tcard--dark .tcard__num{color:var(--cielo)}
.tcard--dark h2{color:var(--pellicola)}
.tcard--dark h2 em{color:var(--cielo)}
.tcard--dark .lead{color:var(--ivory-80)}

/* ---------- 4. Il contapiedi — the countdown-leader dial, this site's ornament ---------- */
.leader{display:flex;justify-content:center;margin:0 auto}
.leader svg{display:block}
.leader circle,.leader line{stroke:currentColor}
.leader--rule{color:var(--ink-45);padding:clamp(40px,7vh,72px) 0}
.leader--rule svg{width:44px;height:44px}

/* fixed corner dial: scroll progress as a film leader */
.dial{
  position:fixed;left:26px;bottom:26px;z-index:38;width:52px;height:52px;color:var(--marina);
  opacity:.85;pointer-events:none;
}
.dial svg{width:100%;height:100%}
.dial [data-prog]{transition:stroke-dashoffset .2s linear}
.dial__n{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--sheet);font-size:.66rem;letter-spacing:.06em;
}

/* ---------- 5. Film grading ---------- */
.film{position:relative;overflow:hidden;background:var(--marina)}
.film img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.14) contrast(1.06) sepia(.05) brightness(1.05);
}
.film::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--pellicola);opacity:.04;mix-blend-mode:lighten}
.film::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(200deg,rgba(47,168,165,.16),transparent 46%,rgba(192,90,56,.12));
  mix-blend-mode:soft-light}

/* the cold-beer glint — a specular sweep across the poster on hover */
.glint{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.38) 50%,transparent 60%);
  transform:translateX(-130%);transition:transform .9s var(--ease)}
.isola:hover .glint{transform:translateX(130%)}

/* ---------- 6. Titoli di testa — the hero as an opening title, centered ---------- */
.titles{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  overflow:hidden;background:var(--marina);color:var(--pellicola);
  padding:clamp(90px,14vh,150px) var(--gutter);
}
.titles__pic{position:absolute;inset:0;z-index:0}
.titles__pic img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.12) contrast(1.03) sepia(.06) brightness(1.0);
  animation:breathe 12s var(--ease) infinite}
@keyframes breathe{0%,100%{transform:scale(1.04)}50%{transform:scale(1.06)}}
.titles__pic::before{content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(85% 85% at 50% 42%,rgba(15,62,88,.24) 0%,rgba(15,62,88,.58) 100%)}
.titles__pic::after{content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(200deg,rgba(47,168,165,.18),transparent 50%,rgba(192,90,56,.14));
  mix-blend-mode:soft-light}

/* symmetric letterbox, top and bottom */
.bar{position:absolute;left:0;right:0;height:clamp(24px,4.2vh,48px);background:var(--marina);z-index:5}
.bar--t{top:0}.bar--b{bottom:0}

.titles__in{position:relative;z-index:6;max-width:900px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center}
.titles__pres{
  font-family:var(--sheet);font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ivory-60);margin-bottom:30px;
}
.titles__leader{color:var(--ivory-60);margin-bottom:30px}
.titles__leader svg{width:64px;height:64px}
.titles h1{color:var(--pellicola)}
.titles h1 em{font-style:italic;color:var(--cielo)}
.titles__rule{
  display:flex;align-items:center;gap:16px;margin:34px 0 26px;color:var(--ivory-60);
  font-family:var(--sheet);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
}
.titles__rule::before,.titles__rule::after{content:"";width:84px;height:1px;background:currentColor;opacity:.5}
.titles__lead{max-width:58ch;color:var(--ivory-80);
  font-size:clamp(1.04rem,1.6vw,1.22rem);line-height:1.66;margin:0 auto}
.titles__ctas{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* ---------- 7. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--sheet);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  padding:15px 30px;border:1px solid currentColor;background:transparent;color:inherit;
  cursor:pointer;transition:background var(--beat) var(--ease),color var(--beat) var(--ease),
    border-color var(--beat) var(--ease);
}
.btn:hover{background:var(--terracotta);border-color:var(--terracotta);color:var(--pellicola)}
.btn--solid{background:var(--terracotta);border-color:var(--terracotta);color:var(--pellicola)}
.btn--solid:hover{background:transparent;color:var(--pellicola);border-color:var(--pellicola)}

/* ---------- 8. The top bar: brand centered, symmetric wings ---------- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:14px var(--gutter);
  transition:background var(--beat) var(--ease),border-color var(--beat) var(--ease);
  border-bottom:1px solid transparent;color:var(--pellicola);
}
.top.on{background:rgba(242,235,221,.95);backdrop-filter:blur(10px);
  border-bottom-color:var(--ink-16);color:var(--marina)}
.top__b{grid-column:2;font-family:var(--display);font-size:1.2rem;letter-spacing:.01em;white-space:nowrap}
.top__b i{font-style:italic;color:var(--cielo)}
.top.on .top__b i{color:var(--terracotta)}
.top__wing{font-family:var(--sheet);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.top__wing--l{grid-column:1;justify-self:start}
.top__wing--r{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px;
  background:none;border:1px solid currentColor;color:inherit;padding:10px 18px;cursor:pointer;
  font-family:var(--sheet);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  transition:background var(--beat) var(--ease),color var(--beat) var(--ease)}
.top__wing--r:hover{background:var(--terracotta);border-color:var(--terracotta);color:var(--pellicola)}

/* ---------- 9. L'INDICE — the menu as an opening-credits sequence ---------- */
.indice{
  position:fixed;inset:0;z-index:60;background:var(--marina);color:var(--pellicola);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s;
  overflow-y:auto;padding:80px var(--gutter);
}
.indice.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.indice::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(80% 70% at 50% 30%,rgba(47,168,165,.22),transparent 70%)}
.indice__k{font-family:var(--sheet);font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ivory-60);margin-bottom:34px}
.indice__list{display:flex;flex-direction:column;gap:6px;position:relative;z-index:1}
.indice__list a{
  font-family:var(--display);font-size:clamp(1.7rem,4.2vw,2.9rem);line-height:1.35;
  color:var(--pellicola);transition:color var(--beat) var(--ease);
  display:flex;align-items:baseline;justify-content:center;gap:20px;
}
.indice__list a small{
  font-family:var(--sheet);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ivory-60);min-width:44px;text-align:right;
}
.indice__list a:hover{color:var(--cielo)}
.indice__close{
  position:absolute;top:22px;right:var(--gutter);z-index:2;
  background:none;border:1px solid var(--ivory-22);color:var(--ivory-80);
  font-family:var(--sheet);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  padding:10px 18px;cursor:pointer;
}
.indice__close:hover{border-color:var(--terracotta);color:var(--terracotta)}
.indice__foot{margin-top:44px;font-family:var(--sheet);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ivory-60)}
body.locked{overflow:hidden}

/* ---------- 10. IL PIANO DI LAVORAZIONE — signature device, symmetric ---------- */
.piano{background:var(--marina);color:var(--pellicola);position:relative;overflow:hidden}
.piano::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 0%,rgba(47,168,165,.22),transparent 62%)}

.strip{
  display:grid;grid-template-columns:repeat(12,1fr);gap:5px;
  max-width:920px;margin:0 auto 8px;
  border-top:1px solid var(--ivory-22);border-bottom:1px solid var(--ivory-22);
  padding:12px 0;position:relative;z-index:1;
}
.frame{
  appearance:none;border:1px solid var(--ivory-22);background:transparent;
  color:var(--ivory-60);cursor:pointer;
  padding:15px 4px 12px;font-family:var(--sheet);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;line-height:1.3;position:relative;
  transition:all var(--beat) var(--ease);
}
.frame b{display:block;font-size:1.02rem;letter-spacing:.02em;margin-bottom:3px;
  color:var(--ivory-80);font-weight:700}
.frame:hover{border-color:rgba(242,235,221,.55);color:var(--pellicola)}
.frame[aria-selected="true"]{background:var(--pellicola);border-color:var(--pellicola);color:var(--marina)}
.frame[aria-selected="true"] b{color:var(--marina)}
.frame::after{content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45}
.frame[data-v="ok"]::after{background:var(--cielo);opacity:1}
.frame[data-v="no"]::after{background:var(--terracotta);opacity:1}

.strip__legend{
  display:flex;justify-content:center;gap:28px;margin:0 auto 46px;max-width:920px;
  font-family:var(--sheet);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ivory-60);position:relative;z-index:1;
}
.strip__legend span{display:inline-flex;align-items:center;gap:8px}
.strip__legend i{width:6px;height:6px;border-radius:50%;display:inline-block}
.strip__legend .ok i{background:var(--cielo)}
.strip__legend .mid i{background:var(--ottone)}
.strip__legend .no i{background:var(--terracotta)}

/* the call sheet — a centered, symmetric card */
.callsheet{
  max-width:920px;margin:0 auto;position:relative;z-index:1;
  border:1px solid var(--ivory-22);background:rgba(15,62,88,.55);
  text-align:center;
}
.callsheet[data-swap]{animation:dissolve var(--beat) var(--ease)}
@keyframes dissolve{from{opacity:0}to{opacity:1}}
.callsheet__head{padding:clamp(30px,4vw,44px) clamp(22px,4vw,52px) 0}
.callsheet__mese{font-family:var(--display);font-size:clamp(2.4rem,4.6vw,3.5rem);
  line-height:1;letter-spacing:-.02em;color:var(--pellicola)}
.callsheet__verdict{font-family:var(--sheet);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;display:block;margin:14px 0 0}
.callsheet__verdict[data-v="ok"]{color:var(--cielo)}
.callsheet__verdict[data-v="no"]{color:var(--terracotta)}
.callsheet__verdict[data-v="mid"]{color:var(--ottone)}
.callsheet__note{
  max-width:62ch;margin:22px auto 0;padding:0 clamp(22px,4vw,52px);
  font-size:1.06rem;line-height:1.66;color:var(--ivory-80);
}
.callsheet__note strong{color:var(--pellicola);font-weight:500}
.callsheet__met{
  font-family:var(--sheet);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivory-60);margin:20px 0 30px;display:block;
}
.coste{
  display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ivory-22);
}
.costa{padding:26px clamp(20px,3vw,40px) 30px}
.costa+.costa{border-left:1px solid var(--ivory-22)}
.costa__k{font-family:var(--sheet);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  display:block;margin-bottom:10px}
.costa--si .costa__k{color:var(--cielo)}
.costa--no .costa__k{color:var(--terracotta)}
.costa p{margin:0;font-size:.98rem;line-height:1.6;color:var(--ivory-80)}

/* ---------- 11. Le tre isole — three symmetric posters ---------- */
.isole{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px)}
.isola{display:block;text-align:center}
.isola__pic{aspect-ratio:3/4;margin-bottom:24px}
.isola__pic img{transition:transform 1.2s var(--ease)}
.isola:hover .isola__pic img{transform:scale(1.05)}
.isola__n{
  display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px;
  font-family:var(--sheet);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--terracotta);
}
.isola__n::before,.isola__n::after{content:"";width:30px;height:1px;background:currentColor;opacity:.5}
.isola h3{margin-bottom:12px}
.isola p{font-size:.98rem;line-height:1.62;color:var(--ink-70);margin:0 auto;max-width:38ch}
.isola__go{
  font-family:var(--sheet);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  margin-top:18px;display:inline-block;border-bottom:1px solid var(--ink-16);padding-bottom:3px;
  transition:color var(--beat) var(--ease),border-color var(--beat) var(--ease);
}
.isola:hover .isola__go{border-color:var(--terracotta);color:var(--terracotta)}

/* ---------- 12. Fuori campo — the honesty block, symmetric two columns ---------- */
.vero{background:var(--sabbia)}
.veri{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink-16);
  border:1px solid var(--ink-16);max-width:1000px;margin:0 auto;
}
.vero__i{background:var(--sabbia);padding:clamp(26px,3.4vw,44px);text-align:center}
.vero__i .sheet{color:var(--terracotta);margin-bottom:14px}
.vero__i h3{font-size:1.26rem;margin-bottom:12px}
.vero__i p{font-size:.98rem;line-height:1.64;color:var(--ink-70);margin:0 auto;max-width:52ch}

/* ---------- 13. Il conto ---------- */
.conto__wrap{max-width:820px;margin:0 auto}
.conto{width:100%;border-collapse:collapse;font-size:1rem}
.conto caption{
  font-family:var(--sheet);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-70);padding-bottom:18px;text-align:center;
}
.conto th,.conto td{padding:15px 12px;border-bottom:1px solid var(--ink-16)}
.conto th{font-family:var(--sheet);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:400;color:var(--ink-70);text-align:left}
.conto td{text-align:left}
.conto th:last-child,.conto td:last-child{text-align:right;font-family:var(--sheet);white-space:nowrap}
.conto__sum{
  max-width:60ch;margin:36px auto 0;text-align:center;
  font-family:var(--sheet);font-size:.86rem;line-height:1.7;color:var(--terracotta);
}

/* ---------- 14. Si parte — symmetric four doors ---------- */
.spina{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-16);
  border:1px solid var(--ink-16);
}
.spina a{
  background:var(--pellicola);padding:clamp(26px,3vw,40px) clamp(18px,2.2vw,28px);
  display:flex;flex-direction:column;align-items:center;text-align:center;min-height:230px;
  transition:background var(--beat) var(--ease);
}
.spina a:hover{background:var(--sabbia)}
.spina__n{
  font-family:var(--sheet);font-size:.66rem;letter-spacing:.26em;color:var(--terracotta);
  margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.spina__n::before,.spina__n::after{content:"";width:22px;height:1px;background:currentColor;opacity:.5}
.spina h3{font-size:1.28rem;margin-bottom:10px}
.spina p{font-size:.93rem;line-height:1.58;color:var(--ink-70);margin:0}

/* ---------- 15. Titoli di coda — the footer as end credits ---------- */
.coda{
  background:var(--marina);color:var(--ivory-80);text-align:center;
  padding:clamp(70px,10vh,120px) var(--gutter) 40px;position:relative;overflow:hidden;
}
.coda::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 50% at 50% 100%,rgba(47,168,165,.16),transparent 65%)}
.coda__in{position:relative;z-index:1;max-width:760px;margin:0 auto}
.coda__b{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.3rem);color:var(--pellicola)}
.coda__b i{font-style:italic;color:var(--cielo)}
.coda__blurb{max-width:52ch;margin:18px auto 0;font-size:.98rem;line-height:1.66;color:var(--ivory-80)}
.coda__leader{color:var(--ivory-60);margin:40px auto}
.coda__leader svg{width:44px;height:44px}
.coda__cast{
  display:grid;grid-template-columns:1fr 1fr;gap:8px 60px;max-width:640px;margin:0 auto;
  text-align:center;
}
.coda__row{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:baseline}
.coda__row dt{
  font-family:var(--sheet);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ivory-60);text-align:right;
}
.coda__row dd{margin:0;text-align:left}
.coda__row dd a{font-size:.97rem;color:var(--ivory-80);border-bottom:1px solid transparent}
.coda__row dd a:hover{color:var(--terracotta)}
.coda__end{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--ivory-22);
  font-family:var(--sheet);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ivory-60);display:flex;flex-direction:column;gap:10px;align-items:center;
}
.coda__end a:hover{color:var(--terracotta)}

/* ---------- 16. Reveal — a cross-dissolve, never a slide ---------- */
[data-r]{opacity:0;transform:scale(.994);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-r].in{opacity:1;transform:none}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--marina);color:var(--pellicola);padding:12px 18px}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}

/* ---------- 17. Responsive ---------- */
@media (max-width:1000px){
  .isole{grid-template-columns:1fr;gap:52px}
  .isola__pic{aspect-ratio:16/10;max-width:640px;margin-inline:auto}
  .spina{grid-template-columns:1fr 1fr}
  .top__wing--l{display:none}
}
@media (max-width:760px){
  body{font-size:16px}
  .strip{grid-template-columns:repeat(6,1fr);gap:4px}
  .veri{grid-template-columns:1fr}
  .spina{grid-template-columns:1fr}
  .coste{grid-template-columns:1fr}
  .costa+.costa{border-left:0;border-top:1px solid var(--ivory-22)}
  .coda__row{grid-template-columns:1fr;gap:2px}
  .coda__row dt,.coda__row dd{text-align:center}
  .coda__cast{grid-template-columns:1fr;gap:18px}
  .conto th:nth-child(3),.conto td:nth-child(3){display:none}
  .dial{display:none}
}

/* ============================================================
   INNER PAGES — components for the full node (v4)
   ============================================================ */

/* page hero: shorter than the home titles */
.titles--page{min-height:72svh;padding:clamp(110px,16vh,170px) var(--gutter) clamp(70px,10vh,110px)}
.titles--page h1{font-size:clamp(2.5rem,6vw,4.8rem)}

/* prose column */
.prose{max-width:760px;margin:0 auto;font-size:1.06rem;line-height:1.75}
.prose h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:2.2em 0 .6em;text-align:center}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.8em 0 .5em}
.prose p{margin:0 0 1.2em;color:var(--ink-70)}
.prose strong{color:var(--marina);font-weight:500}
.prose ul{margin:0 0 1.2em;padding-left:1.2em;color:var(--ink-70)}
.prose li{margin-bottom:.5em}
.prose .sheet{display:block;text-align:center;margin:2em 0 1em}

/* figure */
.fig{margin:2.2em 0}
.fig .film{aspect-ratio:16/9}
.fig figcaption{font-family:var(--sheet);font-size:.78rem;letter-spacing:.08em;
  color:var(--ink-70);padding-top:12px;text-align:center}

/* FAQ */
.faqs{background:var(--sabbia)}
.faq{max-width:820px;margin:0 auto;display:grid;gap:1px;background:var(--ink-16);
  border:1px solid var(--ink-16)}
.faq__i{background:var(--sabbia);padding:clamp(22px,3vw,34px);text-align:center}
.faq__i h3{font-size:1.18rem;margin-bottom:10px}
.faq__i p{font-size:.98rem;line-height:1.64;color:var(--ink-70);margin:0 auto;max-width:60ch}

/* booking form */
.bookform{max-width:820px;margin:0 auto;border:1px solid var(--ink-16);background:#fff;
  padding:clamp(26px,3.4vw,44px);position:relative}
.bookform--dark{background:rgba(255,255,255,.97)}
.bf__t{font-family:var(--display);font-size:1.6rem;text-align:center;margin-bottom:8px}
.bf__s{text-align:center;color:var(--ink-70);font-size:.96rem;margin-bottom:22px}
.bf__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bf__f{display:flex;flex-direction:column;gap:6px}
.bf__f--full{grid-column:1/-1}
.bf__f span{font-family:var(--sheet);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-70)}
.bf__f input,.bf__f select,.bf__f textarea{
  font-family:var(--body);font-size:1rem;color:var(--marina);
  border:1px solid var(--ink-16);background:var(--pellicola);padding:12px 14px;
  border-radius:0;width:100%}
.bf__f input:focus,.bf__f select:focus,.bf__f textarea:focus{
  outline:2px solid var(--cielo);outline-offset:0;border-color:var(--cielo)}
.bf__err{animation:bferr .3s 2}
@keyframes bferr{50%{transform:translateX(4px)}}
.bf__err input,.bf__err select{border-color:var(--terracotta)!important}
.bf__btns{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap;justify-content:center}
.bf__note{font-family:var(--sheet);font-size:.72rem;letter-spacing:.1em;text-align:center;
  color:var(--ink-70);margin:16px 0 0}

/* car booking widget */
.carbook{max-width:820px;margin:0 auto;border:1px solid var(--ink-16);background:#fff;
  padding:clamp(26px,3.4vw,44px)}
.carbook__head{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:10px;margin-bottom:22px;border-bottom:1px solid var(--ink-16);
  padding-bottom:18px}
.carbook__flag{font-family:var(--sheet);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cielo)}
.carbook__price{font-family:var(--display);font-size:2rem}
.carbook__price small{font-size:.9rem;font-family:var(--sheet);letter-spacing:.08em}
.carbook__sum{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--ink-16)}
.carbook__tot{font-family:var(--display);font-size:2.2rem}
.carbook__scr{font-family:var(--sheet);font-size:.72rem;letter-spacing:.1em;
  color:var(--ink-70);margin-top:4px;text-align:right}

/* fleet cards */
.flotta{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.auto{border:1px solid var(--ink-16);background:#fff;display:flex;flex-direction:column;
  transition:transform var(--beat) var(--ease),box-shadow var(--beat) var(--ease)}
.auto:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,62,88,.14)}
.auto__pic{aspect-ratio:16/10;background:var(--pellicola);display:flex;align-items:center;
  justify-content:center;padding:14px}
.auto__pic img{max-width:100%;max-height:100%;object-fit:contain}
.auto__body{padding:20px 22px 24px;text-align:center;display:flex;flex-direction:column;flex:1}
.auto__k{font-family:var(--sheet);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--terracotta);margin-bottom:6px}
.auto h3{font-size:1.3rem;margin-bottom:6px}
.auto__spec{font-family:var(--sheet);font-size:.68rem;letter-spacing:.1em;
  color:var(--ink-70);margin-bottom:12px}
.auto p{font-size:.92rem;line-height:1.55;color:var(--ink-70);margin:0 0 16px;flex:1}
.auto__price{font-family:var(--display);font-size:1.7rem;margin-bottom:14px}
.auto__price small{font-size:.85rem;font-family:var(--sheet)}

/* tour cards */
.tours{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.tour{border:1px solid var(--ink-16);background:#fff;display:flex;flex-direction:column;
  transition:transform var(--beat) var(--ease),box-shadow var(--beat) var(--ease)}
.tour:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,62,88,.14)}
.tour__pic{aspect-ratio:3/2}
.tour__body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1;text-align:center}
.tour h3{font-size:1.08rem;line-height:1.3;margin-bottom:8px;font-family:var(--body);font-weight:500}
.tour__meta{font-family:var(--sheet);font-size:.66rem;letter-spacing:.12em;
  color:var(--ink-70);margin-bottom:12px}
.tour__meta b{color:var(--ottone)}
.tour__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline}
.tour__price{font-family:var(--display);font-size:1.3rem}
.tour__go{font-family:var(--sheet);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terracotta)}

/* timetable */
.orari{width:100%;border-collapse:collapse;font-size:.98rem;background:#fff;
  border:1px solid var(--ink-16)}
.orari caption{font-family:var(--sheet);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-70);padding:14px;text-align:center;
  border:1px solid var(--ink-16);border-bottom:0;background:#fff}
.orari th,.orari td{padding:12px 16px;border-bottom:1px solid var(--ink-16);text-align:left}
.orari th{font-family:var(--sheet);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:400;color:var(--ink-70)}
.orari td:last-child{font-family:var(--sheet);font-size:.9rem}
.orari__wrap{max-width:820px;margin:0 auto 2em}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-16);
  border:1px solid var(--ink-16);max-width:1000px;margin:0 auto}
.stat{background:var(--pellicola);padding:26px 18px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:2rem;font-weight:500;margin-bottom:6px}
.stat span{font-family:var(--sheet);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-70)}

.tpframe{max-width:820px;margin:0 auto;display:block}

/* wedding films */
.filmgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);
  max-width:1000px;margin:0 auto}
.filmtile{margin:0}
.filmtile__fr{position:relative;aspect-ratio:16/9;background:var(--marina)}
.filmtile__fr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.filmtile figcaption{font-family:var(--sheet);font-size:.72rem;letter-spacing:.12em;
  color:var(--ivory-80);padding-top:10px;text-align:center}

@media (max-width:1000px){
  .flotta,.tours{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .flotta,.tours,.filmgrid{grid-template-columns:1fr}
  .bf__grid{grid-template-columns:1fr}
  .titles--page{min-height:64svh}
}