/* Layout: rivista editoriale dentro il sito Lario Water Taxi. Colonna di lettura 680px, foto che sfondano a 1100px e a tutta pagina.
   Tema unico chiaro, scelto: e' la carta del magazine e il sito vero e' chiaro.
   Testata, bottoni, selettore lingua e footer riprendono il sito principale (index_app.php): stessi colori, pillole, wordmark. */
:root{
  --navy:#0B1623; --navy-2:#13233a; --gold:#D4AF37; --gold-l:#E8D06C; --gold-d:#8a6d1a; --paper:#faf9f6; --paper-2:#f1eee6;
  --ink:#24262b; --muted:#5f636b; --line:#e2ddd0; --lake:#3d6e8a; --white:#ffffff;
  --display:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:"Raleway", "Segoe UI", system-ui, sans-serif;
  --read:680px; --wide:1100px;
  --ease:all .4s cubic-bezier(.25,.46,.45,.94);
  color-scheme: light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper-2);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;margin:0;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* il contenitore delle query è un div e non il body: dentro un contenitore i position:fixed (WhatsApp, chat) non starebbero fermi */
body.mag{background:var(--paper)}
.mag-site{container-type:inline-size;container-name:site;overflow:clip;background:var(--paper)}

/* ── Testata del sito (come la barra del sito principale quando scorre) ── */
.sh{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;background:var(--navy);color:var(--white)}
.sh .brand{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:.03em;white-space:nowrap;text-decoration:none;color:var(--white);flex:none}
.sh .brand span{color:var(--gold);font-weight:600}
.sh nav{display:flex;align-items:center;gap:30px}
.sh nav > a{font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.8);position:relative;padding:4px 0;transition:color .3s}
.sh nav > a::after{content:"";position:absolute;bottom:0;left:50%;width:0;height:1px;background:var(--gold);transition:var(--ease);transform:translateX(-50%)}
.sh nav > a:hover{color:var(--white)}
.sh nav > a:hover::after,.sh nav > a.on::after{width:100%}
.sh nav > a.on{color:var(--gold)}
.sh .nav-more{display:none}
.sh .act{display:flex;align-items:center;gap:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--gold);color:var(--navy);border:0;border-radius:50px;
  padding:12px 28px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:var(--ease)}
.btn:hover{background:var(--gold-l);transform:translateY(-2px);box-shadow:0 4px 25px rgba(212,175,55,.2)}
.btn.ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.btn.ghost:hover{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:transparent}
.btn.dark{background:var(--navy);color:var(--white)}
.btn.dark:hover{background:#162333;box-shadow:0 10px 30px rgba(11,22,35,.18)}
.btn.ghost-dark{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost-dark:hover{box-shadow:inset 0 0 0 1px var(--gold);background:transparent}
.btn.block{display:flex;width:100%;margin-top:16px}
/* selettore lingua: identico al sito */
.lang-switcher{display:flex;gap:5px;align-items:center}
.lang-btn{font-size:10.5px;font-weight:600;letter-spacing:.05em;color:rgba(255,255,255,.62);padding:5px 9px;border-radius:4px;text-transform:uppercase;border:1px solid transparent;text-decoration:none;transition:var(--ease)}
.lang-btn:hover{color:var(--white)}
.lang-btn.active{color:var(--gold);border-color:rgba(212,175,55,.35)}
/* hamburger: tre linee che diventano una X */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin:-8px -8px -8px 0;padding:0 8px;background:none;border:0}
.burger span{display:block;width:28px;height:1.5px;background:var(--white);border-radius:2px;transition:var(--ease)}
.sh.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.sh.open .burger span:nth-child(2){opacity:0}
.sh.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@container site (max-width:900px){
  .sh{padding:12px 20px}
  .sh nav,.sh .act .lang-switcher{display:none}
  .burger{display:flex}
  .sh .act .btn{padding:10px 18px;font-size:11px}
  .sh .brand{font-size:20px}
  /* menu aperto: pannello navy a tutta altezza sotto la testata, voci grandi in Cormorant come il menu del sito */
  .sh.open nav{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;position:absolute;z-index:40;top:100%;left:0;right:0;
    height:calc(100vh - 100%);height:calc(100dvh - 100%);background:var(--navy);border-top:1px solid rgba(255,255,255,.08);padding:24px 20px 48px;overflow-y:auto}
  .sh.open nav > a{font-family:var(--display);font-size:32px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--white);opacity:.85}
  .sh.open nav > a.on{color:var(--gold);opacity:1}
  .sh.open nav > a::after{display:none}
  .sh.open .nav-more{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:10px}
  .sh.open .nav-more .lang-btn{font-size:13px;padding:8px 13px}
}
@container site (max-width:380px){.sh .brand{font-size:18px}.sh .act{gap:10px}.sh .act .btn{padding:9px 14px}}

/* ── Elementi comuni ── */
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d)}
.kicker.light{color:var(--gold)}
.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:24px}
.read{max-width:var(--read);margin-inline:auto;padding-inline:24px}
h1,h2,h3{font-family:var(--display);font-weight:500;text-wrap:balance;margin:0;color:var(--navy)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:28px}
.sec-h h2{font-size:clamp(28px,4.2cqi,40px)}
.sec-h a,.sec-h .kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-d);text-decoration:none;white-space:nowrap;flex:none}
figure{margin:0}
figcaption{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.45}
figcaption b{font-weight:600;color:var(--ink)}
.tabnum{font-variant-numeric:tabular-nums}
.fade{animation:fade .7s ease both}
@keyframes fade{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none}.btn,.btn:hover{transition:none;transform:none}}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* lago a linea (SVG inline): stessi punti della mappa; colori per contesto */
.lake{display:block}
.lake .ln{fill:none;stroke:#9cc0d3;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.lake .dt{fill:var(--navy)}
.lake .dm{fill:var(--gold);stroke:var(--navy);stroke-width:2}
.lake text{font-family:var(--sans);paint-order:stroke;stroke:var(--white);stroke-width:4px;stroke-linejoin:round}
.lake .tt{font-size:12px;font-weight:500;fill:var(--muted)}
.lake .tm{font-size:14px;font-weight:700;fill:var(--navy)}
/* segnaposto delle card senza foto: il lago in piccolo con il punto del luogo, mai il titolo ripetuto */
.ph{display:grid;place-items:center;background:var(--paper-2);aspect-ratio:4/3;width:100%;overflow:hidden}
.ph .lake{width:62%;height:auto;max-height:86%}
.ph .lake .ln{stroke:#c8bfa8;stroke-width:7}
.ph .lake .dm{fill:var(--gold);stroke:var(--navy);stroke-width:5}

/* ════════ COPERTINA (hub) ════════ */
.cover{position:relative;color:var(--white);min-height:560px;display:flex;align-items:flex-end;background:var(--navy)}
.cover img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,22,35,.55) 0%,rgba(11,22,35,0) 30%,rgba(11,22,35,.15) 55%,rgba(11,22,35,.88) 100%)}
.cover .logo{display:block;width:min(560px,100%);height:auto;margin:0 auto 26px}
.cover .in{position:relative;z-index:2;padding:64px 24px 44px;max-width:var(--wide);margin-inline:auto;width:100%}
.cover h1{color:var(--white);font-size:clamp(34px,7cqi,76px);font-weight:500;line-height:1.04;font-style:italic;margin:10px 0 12px}
.cover h1 a{text-decoration:none}
.cover p{max-width:520px;font-size:17px;opacity:.92;margin:0 0 22px}
.cover .ctas{display:flex;gap:12px;flex-wrap:wrap}
.cover .credit{position:absolute;z-index:2;right:16px;bottom:12px;font-size:10.5px;opacity:.7;letter-spacing:.04em}
@container site (max-width:760px){
  .cover{min-height:0}
  .cover .in{padding:44px 20px 36px}
  .cover .logo{width:100%;margin-bottom:20px}
  .cover .credit{display:none}
}

/* striscia rubriche: sfuma a destra, così si capisce che scorre */
.rubrics-wrap{position:relative;border-bottom:1px solid var(--line);background:var(--paper)}
.rubrics{display:flex;gap:8px;overflow-x:auto;padding:18px 64px 18px 24px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent)}
.rubrics::-webkit-scrollbar{display:none}
.rubrics a{flex:none;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;text-decoration:none;
  padding:8px 15px;border:1px solid var(--line);border-radius:999px;color:var(--navy);white-space:nowrap;transition:border-color .3s}
.rubrics a:hover{border-color:var(--gold)}
.rubrics a.on{background:var(--navy);color:var(--white);border-color:var(--navy)}

.byline{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.byline .av{width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;
  font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.04em;flex:none}
.byline img.av{object-fit:cover;padding:0}
.byline b{color:var(--ink);font-weight:600}
.byline .by{text-align:left}

/* fascia luoghi dell'hub: i quattro rami, ognuno col suo pezzo di lago e i nomi dei luoghi */
.places-band{background:var(--navy);color:var(--white);padding-block:56px}
.places-band .sec-h{border-color:rgba(255,255,255,.15)}
.places-band h2{color:var(--white)}
.places-band .sec-h a{color:var(--gold)}
.pb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.br{border-top:1px solid rgba(255,255,255,.14);padding-top:18px}
.br-h{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--white)}
.br-h .lake{width:64px;height:64px;flex:none}
.br-h .lake .ln{stroke:rgba(212,175,55,.45);stroke-width:12}
.br-h .lake .dt{fill:var(--gold)}
.br-h > span{display:flex;flex-direction:column;gap:2px}
.br-h .b{font-family:var(--display);font-size:25px;line-height:1.1}
.br-h .c{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.br-l{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:14px;line-height:1.5}
.br-l li:not(:last-child)::after{content:"·";margin:0 7px;color:rgba(255,255,255,.35)}
.br-l a{color:rgba(255,255,255,.82);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.br-l a:hover{color:var(--white);border-color:var(--gold)}
@container site (max-width:960px){.pb{grid-template-columns:1fr 1fr;gap:28px 32px}}
@container site (max-width:560px){.pb{grid-template-columns:1fr;gap:22px}}

.diary{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;padding-block:64px}
.diary.noimg{grid-template-columns:1fr;max-width:var(--read)}
.diary img{aspect-ratio:3/4;object-fit:cover;width:100%}
.diary blockquote{font-family:var(--display);font-style:italic;font-size:clamp(26px,3.6cqi,36px);line-height:1.2;color:var(--navy);margin:14px 0 18px}
.diary p{color:var(--muted);margin:0 0 20px;max-width:520px}
@container site (max-width:760px){.diary{grid-template-columns:1fr;gap:24px;padding-block:44px}.diary img{aspect-ratio:4/3}}

.closer{background:var(--paper-2);text-align:center;padding:60px 24px}
.mag-places .closer{margin-top:56px}
.closer h2{font-size:clamp(28px,4.4cqi,42px);font-style:italic;margin:10px auto 22px;max-width:760px}

/* ultimi articoli */
.latest{padding-block:52px 20px}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}
.post{text-decoration:none;display:flex;flex-direction:column;gap:8px}
.post .tx{display:flex;flex-direction:column;gap:8px}
.post img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:6px}
.post h3{font-size:24px;line-height:1.15;transition:color .3s}
.post:hover h3{color:var(--gold-d)}
.post .when{font-size:12.5px;color:var(--muted)}
.post .dek{font-size:15.5px;color:var(--muted);line-height:1.55}
.post.noimg{border-top:2px solid var(--gold);padding-top:16px}
.post.big{grid-column:span 2;grid-row:span 2}
.post.big img{aspect-ratio:16/11}
.post.big h3{font-size:clamp(28px,3.6cqi,38px)}
/* un solo articolo: una riga intera (foto | testo), non un terzo di griglia con due buchi accanto */
.posts.solo{grid-template-columns:1fr}
.posts.solo .post{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center}
.posts.solo .post.noimg{grid-template-columns:1fr;max-width:760px;border-top:0;padding-top:0;border-left:2px solid var(--gold);padding-left:24px}
.posts.solo .post img{margin:0}
.posts.solo h3{font-size:clamp(28px,3.8cqi,40px)}
.every{font-family:var(--display);font-style:italic;font-size:19px;color:var(--muted);text-align:center;margin:36px 0 0}
@container site (max-width:900px){.posts{grid-template-columns:1fr 1fr}.post.big{grid-column:1/-1;grid-row:auto}}
@container site (max-width:560px){.posts{grid-template-columns:1fr}.posts.solo .post{grid-template-columns:1fr;gap:14px}}
.pager{display:flex;justify-content:center;gap:12px;padding:24px 0 56px}

/* ════════ ARTICOLO ════════ */
.prog{position:sticky;top:0;z-index:5;height:3px;background:transparent}
.prog i{display:block;height:100%;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
.a-head{padding-block:52px 28px;text-align:center}
.a-head .kicker{display:inline-block;margin-bottom:16px}
.a-head h1{font-size:clamp(32px,6.4cqi,68px);line-height:1.06;margin-bottom:18px}
.a-head .dek{font-family:var(--display);font-size:clamp(20px,2.6cqi,24px);font-style:italic;color:var(--muted);line-height:1.35;margin:0 auto 24px;max-width:600px}
.a-head .byline{justify-content:center}
.hero-full{width:100%}
.hero-full img{width:100%;max-height:640px;object-fit:cover}
.hero-full figcaption{max-width:var(--wide);margin:8px auto 0;padding-inline:24px}
.body{padding-block:40px 20px}
.body p{font-size:18.5px;line-height:1.75;margin:0 0 22px;font-family:var(--display);color:#2a2c31}
.body p.lead{font-size:23px;line-height:1.5;color:var(--navy)}
.body p.drop::first-letter{float:left;font-size:84px;line-height:.82;padding:6px 10px 0 0;color:var(--gold-d);font-weight:600}
.body h2{font-size:clamp(28px,4cqi,36px);margin:44px 0 16px}
/* numeri in evidenza: 2, 3 o 4 voci, righe di separazione disegnate da ogni cella (nessun buco con 4 voci su 3 colonne) */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border-block:1px solid var(--line);margin:34px 0;overflow:hidden}
.facts div{padding:20px 12px;text-align:center;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
.facts b{display:block;font-family:var(--display);font-size:clamp(24px,3.4cqi,32px);font-weight:600;color:var(--navy);line-height:1.1;font-variant-numeric:lining-nums}
.facts span{display:block;margin-top:6px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.45}
.wide{max-width:var(--wide);margin:40px auto;padding-inline:24px}
.times{list-style:none;padding:0;margin:8px 0 28px;display:grid;gap:12px}
.times li{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:18px 20px;background:var(--white);border:1px solid var(--line)}
.times .h{font-family:var(--display);font-size:26px;color:var(--navy);font-weight:600;line-height:1;font-variant-numeric:lining-nums}
.times .h small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);font-weight:700;margin-top:6px}
.times p{font-family:var(--sans);font-size:15.5px;line-height:1.6;margin:0;color:var(--ink)}
@container site (max-width:420px){.times li{grid-template-columns:1fr;gap:8px}}
.insider{background:var(--navy);color:var(--white);padding:30px 30px 26px;margin:36px 0}
.insider .kicker{color:var(--gold)}
.insider p{font-family:var(--display);font-size:21px;line-height:1.5;color:var(--white);margin:12px 0 14px}
.insider .sig{font-size:13px;opacity:.75}
.p-main .insider p,.body .insider p{color:var(--white)}
.insider a,.insider strong,.insider em{color:inherit}
.insider a{text-decoration:underline;text-decoration-color:var(--gold)}
.pull{border:0;margin:44px 0;padding:0;text-align:center}
.pull p{font-family:var(--display)!important;font-style:italic;font-size:clamp(28px,4.2cqi,38px)!important;line-height:1.2!important;color:var(--navy)!important}
.pull p::before{content:"";display:block;width:48px;height:1px;background:var(--gold);margin:0 auto 22px}
.pull cite{font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* tour consigliato: etichetta breve, nome, durata, la frase del capitano in corsivo, prezzo e pillola */
.tourcta{display:grid;grid-template-columns:170px 1fr;gap:0;background:var(--white);border:1px solid var(--line);margin:32px 0;text-decoration:none;transition:border-color .3s,box-shadow .3s}
.tourcta:hover{border-color:var(--gold);box-shadow:0 10px 30px rgba(11,22,35,.08)}
.tourcta img{width:100%;height:100%;object-fit:cover;min-height:170px}
.tourcta .in{padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.tourcta > .in:first-child{grid-column:1/-1}
.tourcta h3{font-size:27px;line-height:1.1}
.tourcta .meta{font-size:13px;color:var(--muted)}
.body .tourcta p.say,.p-main .tourcta p.say,.tourcta p.say{font-family:var(--display);font-style:italic;font-size:18px;line-height:1.5;color:var(--ink);margin:6px 0 10px}
.tourcta .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;flex-wrap:wrap}
.tourcta .btn{padding:10px 22px}
.price{font-family:var(--display);font-size:24px;color:var(--navy);font-weight:600}
@container site (max-width:560px){.tourcta{grid-template-columns:1fr}.tourcta img{aspect-ratio:16/9;min-height:0}}
.cited-h{font-size:26px!important;margin:40px 0 0}
.cited{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:14px 0 8px}
.cited a{text-decoration:none;display:block}
.cited img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--paper-2)}
.cited b{display:block;font-family:var(--display);font-size:21px;color:var(--navy);font-weight:600;margin-top:10px;line-height:1.15;transition:color .3s}
.cited a:hover b{color:var(--gold-d)}
.cited span:not(.ph){display:block;margin-top:3px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@container site (max-width:560px){.cited{grid-template-columns:1fr 1fr;gap:14px}}
.next{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--navy);color:var(--white);text-decoration:none;margin-top:40px}
.next.noimg{grid-template-columns:1fr}
.next img{width:100%;height:100%;object-fit:cover;min-height:220px}
.next .in{padding:28px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.next h3{color:var(--white);font-size:32px;font-style:italic}
.next .dk{opacity:.75;font-size:14px}
@container site (max-width:560px){.next{grid-template-columns:1fr}}
.pill{position:sticky;bottom:14px;z-index:6;display:none;margin:0 14px;justify-content:space-between;align-items:center;gap:10px;
  background:var(--navy);color:var(--white);padding:10px 10px 10px 18px;border-radius:999px;box-shadow:0 10px 30px rgba(11,22,35,.35);font-size:13.5px}
.pill b{color:var(--gold);font-weight:600}
.pill > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill .btn{flex:none}
.pill .btn{padding:9px 16px}
@container site (max-width:760px){.pill{display:flex}}
.end-gap{height:28px}

/* ════════ LUOGO ════════ */
.crumbs{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;font-size:12px;letter-spacing:.06em;color:var(--muted);padding:16px 24px;max-width:var(--wide);margin-inline:auto}
.crumbs a{text-decoration:none;color:var(--gold-d)}
.crumbs a:hover{text-decoration:underline}
.crumbs .c-here{color:var(--ink)}
@container site (max-width:560px){
  /* su telefono una riga sola: via "Magazine", il nome del luogo si accorcia coi puntini */
  .crumbs{flex-wrap:nowrap;white-space:nowrap;padding:12px 20px}
  .crumbs .c-hub{display:none}
  .crumbs .c-here{overflow:hidden;text-overflow:ellipsis;min-width:0}
}
.p-hero{position:relative;color:var(--white);background:var(--navy)}
.p-hero img{width:100%;height:clamp(340px,52cqi,560px);object-fit:cover}
.p-hero:not(.noimg)::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,22,35,.85) 0%,rgba(11,22,35,0) 55%)}
.p-hero .in{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 24px 30px;max-width:var(--wide);margin-inline:auto}
.p-hero h1{color:var(--white);font-size:clamp(32px,5.6cqi,64px);line-height:1.05}
.p-hero .where{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:12px}
.p-hero .meta{margin:16px 0 0;font-size:14px;letter-spacing:.02em;color:rgba(255,255,255,.82)}
.p-hero .meta span{color:var(--gold)}
.p-hero .credit{position:absolute;z-index:2;right:14px;top:12px;font-size:10.5px;opacity:.75}
/* senza foto: testata compatta, niente velo scuro, il lago disegnato in oro con il punto del luogo */
.p-hero.noimg{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;max-width:none;padding:52px max(24px,calc((100% - var(--wide)) / 2 + 24px)) 48px}
.p-hero.noimg .in{position:static;padding:0;max-width:760px;margin:0}
.p-hero.noimg .hero-lake{width:min(240px,26cqi);height:auto;flex:none}
.hero-lake .ln{stroke:rgba(212,175,55,.5);stroke-width:5}
.hero-lake .dm{fill:var(--gold);stroke:var(--navy);stroke-width:3}
.hero-lake circle.dm{filter:drop-shadow(0 0 10px rgba(212,175,55,.7))}
@container site (max-width:700px){
  .p-hero.noimg{grid-template-columns:1fr;padding:34px 20px 30px;position:relative;overflow:hidden}
  .p-hero.noimg .hero-lake{position:absolute;right:-36px;top:-6px;width:160px;opacity:.38}
  .hero-lake circle.dm{filter:none}
  .p-hero.noimg .in{position:relative;z-index:1}
}
.p-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;padding-block:44px}
@container site (max-width:900px){.p-grid{grid-template-columns:1fr;gap:28px}}
.brief{font-family:var(--display);font-size:23px;line-height:1.45;color:var(--navy);margin:0 0 26px;padding-left:18px;border-left:2px solid var(--gold)}
.p-main h2{font-size:30px;margin:34px 0 12px}
.p-main p{font-family:var(--display);font-size:18.5px;line-height:1.7;margin:0 0 16px;color:#2a2c31}
.citing{display:grid;gap:14px;margin-top:6px}
.cite{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line)}
.cite.noimg{grid-template-columns:1fr;border-left:2px solid var(--gold);border-bottom:0;padding:4px 0 4px 18px}
.cite .th img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cite .tx{display:flex;flex-direction:column;gap:6px}
.cite b{font-family:var(--display);font-size:24px;font-weight:500;color:var(--navy);line-height:1.15;transition:color .3s}
.cite:hover b{color:var(--gold-d)}
.cite .dk{font-size:14.5px;color:var(--muted);line-height:1.5}
@container site (max-width:560px){.cite{grid-template-columns:110px 1fr;gap:14px}.cite b{font-size:20px}}
.aside{display:flex;flex-direction:column;gap:22px}
.box{background:var(--white);border:1px solid var(--line);padding:20px}
.box h3{font-size:22px;margin-bottom:12px}
/* mesi: abbreviati e su due righe (gen feb mar...), l'iniziale da sola era ambigua; nome intero nel title e per i lettori di schermo */
.months{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.months span{font-size:12px;text-align:center;padding:8px 0;background:var(--paper-2);color:var(--muted);font-weight:600;text-transform:lowercase}
.months span b{font-weight:inherit}
.months span.on{background:var(--navy);color:var(--white)}
.months span.best{background:var(--gold);color:var(--navy)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.legend .lg-best{background:var(--gold)}
.legend .lg-on{background:var(--navy)}
.legend .lg-off{background:var(--paper-2);border:1px solid var(--line)}
.map .lake{width:100%;height:auto;overflow:visible}
.tours{display:grid;gap:12px}
.tour{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;text-decoration:none}
.tour img,.tour .ph{width:84px;height:84px;object-fit:cover;aspect-ratio:1}
.tour b{display:block;font-family:var(--display);font-size:20px;color:var(--navy);font-weight:600;line-height:1.1;transition:color .3s}
.tour:hover b{color:var(--gold-d)}
.tour span{font-size:13px;color:var(--muted)}
.tour .price{font-size:19px}
.near-sec{padding-bottom:56px}
.near-sec .sec-h h2{font-size:30px}
.near{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@container site (max-width:560px){.near{grid-template-columns:1fr 1fr}.near a:nth-child(3){display:none}}

/* ════════ Indice luoghi ════════ */
.branch-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 24px 8px}
.branch-nav a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;text-decoration:none;padding:8px 15px;border:1px solid var(--line);border-radius:999px;color:var(--navy);transition:border-color .3s}
.branch-nav a:hover{border-color:var(--gold)}
.branch-nav span{color:var(--gold-d);margin-left:4px}
.branch{padding-block:40px 8px;scroll-margin-top:12px}
.plist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 28px}
.pl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start;text-decoration:none}
.pl img,.pl .ph{width:96px;height:96px;aspect-ratio:1;object-fit:cover}
.pl .ph .lake{width:78%}
.pl .tx{display:flex;flex-direction:column;gap:4px;padding-top:2px}
.pl b{font-family:var(--display);font-size:23px;font-weight:500;color:var(--navy);line-height:1.15;transition:color .3s}
.pl:hover b{color:var(--gold-d)}
.pl .dek{font-size:14px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@container site (max-width:900px){.plist{grid-template-columns:1fr 1fr}}
@container site (max-width:600px){.plist{grid-template-columns:1fr;gap:18px}.pl{grid-template-columns:76px minmax(0,1fr)}.pl img,.pl .ph{width:76px;height:76px}}

/* ════════ Blocchi del corpo (stessi token del mockup) ════════ */
.place-card{display:grid;grid-template-columns:120px 1fr;gap:4px 16px;align-items:center;text-decoration:none;border:1px solid var(--line);background:var(--white);margin:28px 0}
.place-card picture,.place-card img{grid-row:span 2;width:120px;height:90px;object-fit:cover}
.place-card b{font-family:var(--display);font-size:22px;color:var(--navy)}
.place-card > .kicker:first-child,.place-card > .kicker:first-child + b{grid-column:1/-1;padding-inline:20px}
.place-card > .kicker:first-child{padding-top:16px}
.place-card > .kicker:first-child + b{padding-bottom:16px}
.mag-fig picture img,.mag-gal picture img{width:100%;height:auto}
.mag-fig.inline{margin:30px 0}
.mag-fig.full{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.mag-fig.wide{width:min(1100px,100vw - 32px);margin-left:50%;transform:translateX(-50%)}
.mag-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:28px 0}
.numbered{list-style:none;padding:0;margin:24px 0;display:grid;gap:18px}
.numbered li{display:grid;grid-template-columns:48px 1fr;gap:14px}
.numbered .n{font-family:var(--display);font-size:30px;color:var(--gold-d)}
.numbered p{font-family:var(--sans);font-size:15.5px;margin:4px 0 0}
hr.fregio{border:0;height:1px;width:64px;background:var(--gold);margin:40px auto}
.mag-map-list{columns:2;padding-left:18px}

/* ════════ 404 ════════ */
.nf{padding-block:80px;text-align:center}
.nf h1{font-size:clamp(34px,5cqi,52px)}
.nf-dek{font-family:var(--display);font-style:italic;font-size:21px;color:var(--muted);margin:14px 0 28px}
.nf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0}

/* ════════ Footer (come il sito principale) ════════ */
.footer{background:var(--navy);color:rgba(255,255,255,.7);padding:72px 0 0;font-size:14px}
.footer .container{max-width:1200px;margin-inline:auto;padding-inline:24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand{font-family:var(--display);font-size:26px;font-weight:500;color:var(--white);margin-bottom:16px}
.footer-brand span{color:var(--gold)}
.footer-desc{font-size:14px;line-height:1.8;margin:0 0 24px;max-width:300px}
.footer-pet{font-size:13px;margin:0 0 16px;color:rgba(255,255,255,.6)}
.footer-social{display:flex;gap:12px}
.footer-social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;transition:var(--ease)}
.footer-social a:hover{border-color:var(--gold);color:var(--gold);background:rgba(212,175,55,.08)}
.footer-h{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 24px}
.footer-links a{display:block;font-size:14px;padding:6px 0;text-decoration:none;color:rgba(255,255,255,.7);transition:var(--ease)}
.footer-links a:hover{color:var(--gold);padding-left:8px}
.footer-contact-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;font-size:14px}
.footer-contact-item svg{width:18px;height:18px;color:var(--gold);flex-shrink:0;margin-top:2px}
.footer-contact-item a{color:rgba(255,255,255,.7);text-decoration:none}
.footer-contact-item a:hover{color:var(--gold)}
.footer-newsletter{margin-top:16px}
.newsletter-form{display:flex;gap:8px}
.newsletter-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.newsletter-input{flex:1;min-width:0;padding:12px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:var(--white);font:inherit;font-size:13.5px}
.newsletter-input::placeholder{color:rgba(255,255,255,.4)}
.newsletter-input:focus{border-color:var(--gold);outline:none}
.newsletter-btn{background:var(--gold);color:var(--navy);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:12px 19px;border:0;border-radius:6px;transition:var(--ease);white-space:nowrap}
.newsletter-btn:hover{background:var(--gold-l)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:24px 0;font-size:12.5px;color:rgba(255,255,255,.45);flex-wrap:wrap;gap:8px}
@container site (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px}}
@container site (max-width:480px){.footer-grid{grid-template-columns:1fr}.footer{padding-top:56px}}
@container site (max-width:760px){.footer-bottom{padding-bottom:96px}}

/* ════════ Bottoni fissi del sito: WhatsApp e torna su (la chat porta il suo stile) ════════ */
.back-to-top{position:fixed;bottom:32px;right:32px;width:48px;height:48px;border-radius:50%;background:var(--navy);border:1px solid rgba(212,175,55,.3);color:var(--gold);
  display:flex;align-items:center;justify-content:center;z-index:900;opacity:0;visibility:hidden;transform:translateY(20px);transition:var(--ease);box-shadow:0 4px 20px rgba(0,0,0,.2)}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--gold);color:var(--navy);transform:translateY(-3px)}
.wa-float{position:fixed;bottom:32px;left:32px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;
  z-index:900;text-decoration:none;box-shadow:0 4px 20px rgba(37,211,102,.4);transition:transform .3s,box-shadow .3s}
.wa-float:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.5)}
@media (max-width:760px){
  .wa-float{bottom:20px;left:16px;width:52px;height:52px}
  .back-to-top{bottom:20px;right:16px}
  /* nell'articolo la pillola "Prenota" occupa il fondo dello schermo: i bottoni fissi salgono sopra */
  .mag-article .wa-float{bottom:84px}
  .mag-article .back-to-top{display:none}
}

/* ════════ Cinese: niente corsivo sintetico, spaziature latine ridotte, font CJK di sistema (nessun file in più) ════════ */
:lang(zh){--display:"Cormorant Garamond","Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;--sans:"Raleway","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(zh) blockquote,:lang(zh) .every,:lang(zh) .dek,:lang(zh) .nf-dek,:lang(zh) .next h3,:lang(zh) .pull p,:lang(zh) .tourcta p.say{font-style:normal!important}
:lang(zh) h1{font-weight:600;letter-spacing:.02em;line-height:1.3}
:lang(zh) h2,:lang(zh) h3{font-weight:600;line-height:1.35}
:lang(zh) .cover h1,:lang(zh) .a-head h1,:lang(zh) .p-hero h1{line-height:1.3}
:lang(zh) .kicker,:lang(zh) .sec-h a,:lang(zh) .sec-h .kicker,:lang(zh) .rubrics a,:lang(zh) .branch-nav a,:lang(zh) .p-hero .where,:lang(zh) .footer-h,:lang(zh) .cited span,:lang(zh) .facts span,:lang(zh) .br-h .c{letter-spacing:.06em}
:lang(zh) .body p,:lang(zh) .p-main p,:lang(zh) .brief,:lang(zh) .insider p{font-size:17px;line-height:1.85;font-family:var(--sans)}
:lang(zh) .body p.lead{font-size:20px}
:lang(zh) .body p.drop::first-letter{float:none;font-size:inherit;padding:0;color:inherit;font-weight:inherit}
:lang(zh) .sh.open nav > a{font-family:var(--sans);font-size:24px}