/* =========================================================
   Prezzemolina — Porto Azzurro, Isola d'Elba
   Palette: calce dei vicoli, verde prezzemolo, persiane blu,
   amarena (vino), limone (kids club)
   Type: Newsreader (display) + Karla (testo e utility)
   ========================================================= */

/* ---------- 1. Token ---------- */
:root{
  --calce:#EAE9E1;
  --calce-hi:#F4F3EE;
  --calce-lo:#DEDDD3;
  --ink:#161D19;
  --ink-soft:rgba(22,29,25,.70);
  --ink-faint:rgba(22,29,25,.48);
  --rule:rgba(22,29,25,.16);

  /* colori presi dal logo: blu, sabbia, verde acqua, corallo */
  --verde:#2C7365;
  --persiana:#1F5B7A;
  --amarena:#9A3A2C;
  --limone:#9C7418;

  --accent:var(--verde);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1180px;
  --gutter:clamp(20px,5vw,56px);
  --sect:clamp(64px,9vw,120px);
}
body.accent-persiana{--accent:var(--persiana)}
body.accent-amarena{--accent:var(--amarena)}
body.accent-limone{--accent:var(--limone)}

/* ---------- 2. Reset e base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--calce);
  color:var(--ink);
  font:400 1.0625rem/1.75 var(--sans);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:300;line-height:1.06;letter-spacing:-.012em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0}
em{font-style:italic}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--calce);padding:12px 18px;z-index:200}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sect)}
.rule-top{border-top:1px solid var(--rule)}
.center{text-align:center}

/* ---------- 3. Tipografia ---------- */
.eyebrow{
  font:700 .70rem/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--accent);
  margin:0 0 1.1em;
}
.eyebrow--muted{color:var(--ink-faint)}
h1,.h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2,.h2{font-size:clamp(1.95rem,3.6vw,2.9rem)}
h3,.h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.lead{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.55;color:var(--ink-soft)}
.prose p{max-width:64ch}
.small{font-size:.9rem;color:var(--ink-soft)}
.italic{font-style:italic}

/* ---------- 4. Header ---------- */
.site-head{
  position:sticky;top:0;z-index:90;
  background:var(--calce);
  background:color-mix(in srgb,var(--calce) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.head-inner{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{text-decoration:none;display:block;line-height:0}
.brand img{width:auto;height:clamp(42px,5vw,58px)}
.brand-name{display:block;font-family:var(--serif);font-size:1.6rem;letter-spacing:-.01em}
.brand-sub{display:block;margin-top:5px;font:500 .6rem/1 var(--sans);text-transform:uppercase;letter-spacing:.22em;color:var(--ink-faint)}
.foot-logo{width:260px;max-width:70%;height:auto;margin-bottom:18px}
.nav{display:flex;align-items:center;gap:28px}
.nav ul{display:flex;gap:24px;list-style:none}
.nav a{
  font:500 .74rem/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;
  text-decoration:none;padding-block:6px;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);
  transition:right .3s ease;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav-toggle{display:none}

/* ---------- 5. Bottoni ---------- */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font:700 .74rem/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;
  padding:16px 28px;border:1px solid var(--ink);border-radius:2px;
  background:var(--ink);color:var(--calce);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--calce)}
.btn-small{padding:12px 20px;font-size:.68rem}
.link-more{
  display:inline-flex;align-items:center;gap:.6em;text-decoration:none;
  font:700 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:.16em;color:var(--accent);
}
.link-more::after{content:"";width:26px;height:1px;background:currentColor;transition:width .3s ease}
.link-more:hover::after{width:44px}

/* ---------- 6. Immagini e segnaposto ---------- */
.ph{position:relative;margin:0;overflow:hidden;background:var(--calce-lo);border-radius:2px}
.ph img{width:100%;height:100%;object-fit:cover}
.r-21x9{aspect-ratio:21/9}
.r-16x9{aspect-ratio:16/9}
.r-4x3{aspect-ratio:4/3}
.r-1x1{aspect-ratio:1/1}
.r-3x4{aspect-ratio:3/4}
.ph-empty{
  position:absolute;inset:10px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--ink-faint);border-radius:2px;
  background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(22,29,25,.035) 12px 24px);
}
.ph-name{font:500 .7rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);text-align:center;padding:0 12px}
.figcap{margin-top:10px;font:400 .82rem/1.5 var(--sans);color:var(--ink-faint)}

/* ---------- 7. Hero ---------- */
.hero{position:relative;padding-top:clamp(24px,4vw,48px)}
.hero-media{position:relative}
.hero-media .ph{aspect-ratio:3/4}
.hero-card{
  position:relative;margin-top:-72px;padding:clamp(26px,5vw,44px);
  background:var(--calce);border:1px solid var(--rule);border-radius:2px;
}
.hero h1{margin-bottom:.35em}
.hero h1 em{color:var(--accent)}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;padding-top:22px;border-top:1px solid var(--rule);
  font:500 .7rem/1 var(--sans);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-faint);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* ---------- 8. Pagina interna: intestazione ---------- */
.page-head{padding-block:clamp(40px,6vw,72px) clamp(28px,4vw,48px)}
.page-head h1{margin-bottom:.3em;max-width:16ch}
.breadcrumb{margin-bottom:clamp(24px,4vw,40px)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;font:500 .68rem/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint)}
.breadcrumb li+li::before{content:"→";margin-right:8px}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}

/* ---------- 9. Griglie ---------- */
.split{display:grid;gap:clamp(28px,5vw,64px)}
.split--wide{gap:clamp(28px,5vw,80px)}
.cols-2{display:grid;gap:clamp(24px,4vw,48px)}
.cols-3{display:grid;gap:clamp(24px,4vw,40px)}

/* ---------- 10. Le tre anime (righe, non schede) ---------- */
.anima{display:grid;gap:clamp(22px,4vw,56px);padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--rule)}
.anima--persiana{--accent:var(--persiana)}
.anima--amarena{--accent:var(--amarena)}
.anima--limone{--accent:var(--limone)}
.anima-year{
  font:500 .7rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:14px;margin-bottom:18px;
}
.anima-year::after{content:"";flex:1;height:1px;background:var(--rule)}
.anima h3{margin-bottom:.5em}
.anima-txt p{max-width:52ch}
.anima-info{margin:20px 0 26px;font:500 .72rem/1.6 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint)}
.anima .ph{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.anima:hover .ph{transform:scale(1.012)}

/* ---------- 11. Il vicolo (elemento firma) ---------- */
.vicolo{margin-top:clamp(28px,5vw,48px)}
.vicolo-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.vicolo-svg{width:100%;min-width:620px;height:auto;font-family:var(--sans)}
.v-piazza{fill:rgba(22,29,25,.05);stroke:var(--rule);stroke-width:1.5;stroke-dasharray:5 5}
.v-path{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.v-wall{stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.v-tick{stroke:var(--rule);stroke-width:1.5}
.v-dot{stroke:var(--calce);stroke-width:4}
.v-stop--1 .v-dot{fill:var(--persiana)}
.v-stop--2 .v-dot{fill:var(--amarena)}
.v-stop--3 .v-dot{fill:var(--limone)}
.v-lab{font-family:var(--serif);font-size:22px;fill:var(--ink-soft)}
.v-name{font-family:var(--serif);font-size:23px;fill:var(--ink)}
.v-year{font-size:11.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;fill:var(--ink-faint)}
.v-sub{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;fill:var(--ink-faint)}
.v-measure line{stroke:var(--ink-faint);stroke-width:1}
.vicolo-legend{
  display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:18px;
  font:500 .68rem/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint);
}
/* disegno animato del percorso */
.v-path{stroke-dasharray:640;stroke-dashoffset:640;transition:stroke-dashoffset 1.6s ease .2s}
.in .v-path,.vicolo.in .v-path{stroke-dashoffset:0}
.v-stop{opacity:0;transition:opacity .5s ease}
.in .v-stop{opacity:1}
.in .v-stop--1{transition-delay:.7s}
.in .v-stop--2{transition-delay:1.1s}
.in .v-stop--3{transition-delay:1.4s}

/* ---------- 12. Citazione / filosofia ---------- */
.quote{padding-block:clamp(56px,8vw,104px);text-align:center}
.quote blockquote{margin:0 auto;max-width:22ch}
.quote p{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.18;letter-spacing:-.015em;
}
.quote cite{
  display:block;margin-top:30px;font:500 .7rem/1 var(--sans);font-style:normal;
  text-transform:uppercase;letter-spacing:.2em;color:var(--ink-faint);
}

/* ---------- 13. Elenchi informativi ---------- */
.spec{border-top:1px solid var(--rule)}
.spec-row{display:grid;gap:4px 32px;padding-block:18px;border-bottom:1px solid var(--rule)}
.spec-k{font:700 .68rem/1.6 var(--sans);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-faint)}
.spec-v{margin:0}
.ticks{list-style:none;display:grid;gap:14px}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--accent);
}
.note{
  padding:clamp(22px,3vw,32px);background:var(--calce-hi);border:1px solid var(--rule);border-radius:2px;
}
.note h3{font-size:1.35rem;margin-bottom:.5em}

/* ---------- 14. Galleria ---------- */
.gallery{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.gallery .ph{aspect-ratio:1/1}
.gallery .ph:first-child{grid-column:span 2;aspect-ratio:16/9}

/* ---------- 15. Fascia contatti ---------- */
.band{background:var(--ink);color:var(--calce)}
.band-inner{padding-block:clamp(48px,7vw,88px);display:grid;gap:32px;align-items:end}
.band .eyebrow{color:#cfd6cf;color:color-mix(in srgb,var(--accent) 65%,#fff)}
.band-title{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.band-title em{color:#d8ded6;color:color-mix(in srgb,var(--accent) 55%,#fff)}
.band-note{margin-top:18px;color:rgba(234,233,225,.72);max-width:44ch}
.band-actions{display:flex;flex-wrap:wrap;gap:14px}
.band .btn{background:var(--calce);border-color:var(--calce);color:var(--ink)}
.band .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.band .btn-ghost{background:transparent;border-color:rgba(234,233,225,.45);color:var(--calce)}
.band .btn-ghost:hover{background:var(--calce);border-color:var(--calce);color:var(--ink)}

/* ---------- 16. Footer ---------- */
.site-foot{background:var(--calce-hi);border-top:1px solid var(--rule);padding-top:clamp(48px,6vw,80px)}
.foot-grid{display:grid;gap:36px}
.foot-col h2{font:700 .68rem/1 var(--sans);text-transform:uppercase;letter-spacing:.18em;color:var(--ink-faint);margin-bottom:16px}
.foot-col p,.foot-col a{font-size:.95rem}
.foot-payoff{color:var(--ink-soft)}
.foot-list{list-style:none;display:grid;gap:8px}
.foot-list a,.foot-col a{text-decoration:none}
.foot-list a:hover,.foot-col a:hover{color:var(--accent);text-decoration:underline}
.foot-bottom{
  margin-top:clamp(36px,5vw,56px);padding-block:22px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-size:.82rem;color:var(--ink-faint);
}
.foot-bottom p{margin:0}

/* ---------- 17. Barra azioni mobile ---------- */
.mobile-bar{display:none}

/* ---------- 18. Form ---------- */
.form{display:grid;gap:20px;max-width:640px}
.field{display:grid;gap:8px}
.field label{font:700 .68rem/1 var(--sans);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-faint)}
.field input,.field textarea,.field select{
  font:400 1rem/1.5 var(--sans);color:var(--ink);
  padding:14px 16px;background:var(--calce-hi);
  border:1px solid var(--rule);border-radius:2px;width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);outline:none}
.field textarea{min-height:150px;resize:vertical}
.field-check{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:var(--ink-soft)}
.field-check input{width:auto;margin-top:4px}
.hp{position:absolute;left:-9999px}
.msg{padding:16px 20px;border-radius:2px;border:1px solid var(--rule);background:var(--calce-hi)}
.msg--ok{border-color:var(--verde);color:var(--verde)}
.msg--ko{border-color:var(--amarena);color:var(--amarena)}

/* ---------- 18b. Mappa a caricamento su richiesta ---------- */
.map-embed{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:280px;padding:32px;text-align:center;
  background:var(--calce-hi);border:1px solid var(--rule);border-radius:2px;
}
.map-embed:has(iframe){padding:0;min-height:0;border:0;background:none}

/* ---------- 19. Animazioni ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- 20. Responsive ---------- */
@media (max-width:899px){
  .nav-toggle{
    display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:8px 0;cursor:pointer;
    font:700 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:.16em;color:var(--ink);
  }
  .nav-toggle-bars{position:relative;width:22px;height:9px;display:block}
  .nav-toggle-bars::before,.nav-toggle-bars::after{
    content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--ink);transition:transform .3s ease,top .3s ease
  }
  .nav-toggle-bars::before{top:0}
  .nav-toggle-bars::after{top:8px}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{top:4px;transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{top:4px;transform:rotate(-45deg)}

  .nav{
    position:fixed;left:0;right:0;top:0;padding:96px var(--gutter) 40px;
    flex-direction:column;align-items:flex-start;gap:22px;
    background:var(--calce);border-bottom:1px solid var(--rule);
    transform:translateY(-100%);transition:transform .38s cubic-bezier(.3,.8,.3,1);
    z-index:85;max-height:100dvh;overflow-y:auto;
  }
  .nav.is-open{transform:translateY(0)}
  .nav ul{flex-direction:column;gap:14px;width:100%}
  .nav a{font-family:var(--serif);font-size:1.9rem;font-weight:300;text-transform:none;letter-spacing:-.01em}
  .nav a::after{display:none}
  .nav a[aria-current="page"]{color:var(--accent)}
  .mobile-bar{
    display:grid;grid-template-columns:repeat(3,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--ink);border-top:1px solid rgba(234,233,225,.2);
  }
  .mobile-bar a{
    padding:15px 8px;text-align:center;text-decoration:none;color:var(--calce);
    font:700 .68rem/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;
  }
  .mobile-bar a+a{border-left:1px solid rgba(234,233,225,.2)}
  body{padding-bottom:52px}
}

@media (min-width:600px){
  .cols-2{grid-template-columns:1fr 1fr}
  .spec-row{grid-template-columns:200px 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .gallery .ph:first-child{grid-column:span 3;aspect-ratio:21/9}
}

@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr;align-items:center}
  .split--60{grid-template-columns:1.15fr .85fr}
  .split--40{grid-template-columns:.85fr 1.15fr}
  .split--rev>*:first-child{order:2}
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .anima{grid-template-columns:1fr 1fr;align-items:center}
  .anima:nth-child(even) .anima-media{order:-1}
  .band-inner{grid-template-columns:1.2fr .8fr;justify-items:start}
  .band-actions{justify-self:end}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr .8fr}
  .hero{padding-top:clamp(32px,4vw,56px)}
  .hero-media .ph{aspect-ratio:21/9}
  .hero-card{margin-top:-150px;width:min(640px,60%)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .v-path{stroke-dashoffset:0}
  .v-stop{opacity:1}
}