@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;600&display=swap');
body.vexilla-home{--vx-gold:#dfb75e;--vx-paper:#f4ead4;--vx-brown:#21170f;--vx-muted:#c5b99e;color:var(--vx-paper);font-family:'DM Sans',sans-serif;width:100%;color-scheme:dark;--notte:#19130d;--pece:#21170f;--serif:'Cormorant Garamond',Georgia,serif}
body.vexilla-home *{box-sizing:border-box}
body.vexilla-home button,body.vexilla-home a{font-family:inherit;-webkit-tap-highlight-color:transparent}
body.vexilla-home :where(.vx-header,.vx-hero,.vx-march) a{text-decoration:none;color:inherit}





body.vexilla-home{background:#19130d}
body.vexilla-home .vx-header{position:sticky;top:0;z-index:50;min-height:76px;height:auto;padding-block:12px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid #c39a4933;background:#17110df5}
body.vexilla-home .vx-brand{display:flex;gap:12px;align-items:center;font:500 23px 'Cormorant Garamond',serif;letter-spacing:6px;color:var(--vx-gold)}
body.vexilla-home .vx-brand img{object-fit:contain}
body.vexilla-home .vx-header nav{display:flex;align-items:center;gap:28px;font-size:13px;color:#dacbb1}
body.vexilla-home .vx-header .vx-nav-play{border:1px solid #bd914a;padding:10px 24px;color:#ebcc8c;background:#c5953c14}
body.vexilla-home .vx-hero{position:relative;min-height:570px;overflow:hidden;isolation:isolate;background:#20170f}
body.vexilla-home .vx-city{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;transform:scale(1.06);animation:vx-pan 25s ease-in-out infinite alternate;z-index:-3}
body.vexilla-home .vx-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#1c140dfc 0%,#1c140de8 24%,#1c140d8a 47%,#1c140d05 75%),linear-gradient(0deg,#1c140df2 0%,transparent 24%)}
body.vexilla-home .vx-copy{position:relative;padding:96px 5% 115px;max-width:610px;z-index:3;pointer-events:none}
body.vexilla-home .vx-copy a{pointer-events:auto}
body.vexilla-home .vx-eyebrow{font-size:11px;font-weight:500;letter-spacing:3.1px;color:#ebc884;margin-bottom:24px}
body.vexilla-home .vx-hero h1{font:500 clamp(46px,6.8vw,72px)/.97 'Cormorant Garamond',Georgia,serif;letter-spacing:-1.5px;color:#fff1d6;margin:0 0 26px}
body.vexilla-home .vx-hero h1 em{font-style:normal;color:#ecc979}
body.vexilla-home .vx-copy p{font-size:15px;line-height:1.8;color:#e0d5bf;margin:0 0 29px;max-width:420px}
body.vexilla-home .vx-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
body.vexilla-home .vx-primary{display:inline-flex;align-items:center;gap:32px;color:#24170d;background:linear-gradient(110deg,#efce80,#c59645);padding:16px 23px;font-size:13px;font-weight:600;box-shadow:0 5px 22px #0003;border:1px solid #f0d38b}
body.vexilla-home .vx-secondary{font-size:12px;border-bottom:1px solid #b69d69;padding:9px 0;color:#ecdfc5;display:flex;gap:10px}
body.vexilla-home .vx-primary:hover{filter:brightness(1.09)}
body.vexilla-home .vx-browser{font-size:11px;margin-top:17px;color:#c7b697}
body.vexilla-home .vx-scene-caption{position:absolute;bottom:27px;right:5%;display:flex;gap:10px;align-items:center;font:italic 17px 'Cormorant Garamond',serif;color:#f1e2c1;z-index:4}
body.vexilla-home .vx-dot{height:5px;width:5px;background:#d3a954;border-radius:50%}
body.vexilla-home .vx-march{position:relative;background:radial-gradient(ellipse at 50% 65%,#53382155,transparent 70%),#21170f;overflow:hidden}
body.vexilla-home .vx-army{position:relative;width:100%;height:320px;display:block;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
body.vexilla-home .vx-motion{position:absolute;right:5%;top:8px;z-index:5;padding:9px 13px;border:1px solid #8b6c3b80;border-radius:2px;background:#21170f;color:#d5c2a0;font-size:12px;line-height:1.4;cursor:pointer;min-height:38px}
body.vexilla-home .vx-motion:hover{border-color:#d2ac65;color:#f3d79c}
@media(max-width:520px){body.vexilla-home .vx-army{height:270px}body.vexilla-home .vx-motion{font-size:11px;top:0;min-height:42px}}
body.vexilla-home .vx-army canvas{display:block;width:100%;height:100%}
body.vexilla-home .vx-loading{position:absolute;bottom:40px;left:0;right:0;text-align:center;color:#d7bd8e;font-size:12px}
body.vexilla-home .vx-pillars{position:relative;padding:30px 5%;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;background:#21170f;border-top:1px solid #d5b27633}
body.vexilla-home .vx-pillars>div{display:flex;gap:17px;align-items:flex-start}
body.vexilla-home .vx-number{font:400 35px 'Cormorant Garamond',serif;color:#bc9450}
body.vexilla-home .vx-pillars h2{font:500 19px/1.2 'Cormorant Garamond',serif;color:#ecd9af;margin:4px 0 7px}
body.vexilla-home .vx-pillars p{font-size:13px;line-height:1.7;color:#bcb098;margin:0;max-width:230px}
body.vexilla-home .vx-footer{text-align:center;font:italic 20px 'Cormorant Garamond',serif;color:#af9773;padding:25px 20px;background:#17110d}













body.vexilla-home[data-paused=true] .vx-city{animation-play-state:paused}
@keyframes vx-pan{from{transform:scale(1.06) translateX(-.7%)}to{transform:scale(1.1) translateX(.8%)}}
@media(max-width:760px){body.vexilla-home .vx-how{display:none}body.vexilla-home .vx-header{min-height:66px}body.vexilla-home .vx-header nav{gap:15px}body.vexilla-home .vx-brand{font-size:20px;letter-spacing:4px}body.vexilla-home .vx-hero{min-height:535px}body.vexilla-home .vx-copy{padding-top:70px}body.vexilla-home .vx-hero h1{font-size:60px}body.vexilla-home .vx-shade{background:linear-gradient(90deg,#1c140df5,#1c140dbe 42%,#1c140d20),linear-gradient(0deg,#1c140dfa,transparent 35%)}body.vexilla-home .vx-pillars{gap:18px;padding:25px 5%}body.vexilla-home .vx-pillars>div{gap:10px}body.vexilla-home .vx-pillars h2{font-size:17px}}
@media(max-width:520px){body.vexilla-home .vx-header nav>a:not(.vx-nav-play){display:none}body.vexilla-home .vx-brand{gap:8px;font-size:19px}body.vexilla-home .vx-brand img{width:30px;height:30px}body.vexilla-home .vx-header .vx-nav-play{padding:9px 16px}body.vexilla-home .vx-copy{padding:48px 7% 205px}body.vexilla-home .vx-eyebrow{letter-spacing:1.6px;font-size:11px;margin-bottom:20px}body.vexilla-home .vx-hero h1{font-size:clamp(39px,12vw,48px)}body.vexilla-home .vx-copy p{font-size:14px;line-height:1.7}body.vexilla-home .vx-wide{display:none}body.vexilla-home .vx-primary{padding:14px 17px;gap:17px}body.vexilla-home .vx-actions{gap:15px}body.vexilla-home .vx-browser{font-size:11px;line-height:1.6}body.vexilla-home .vx-city{object-position:63% bottom}body.vexilla-home .vx-shade{background:linear-gradient(180deg,#1c140dfa,#1c140ddf 41%,#1c140d36 75%,#1c140dc9)}body.vexilla-home .vx-scene-caption{font-size:16px;bottom:22px;right:7%}body.vexilla-home .vx-pillars{grid-template-columns:1fr;gap:22px;padding:27px 7%}body.vexilla-home .vx-pillars>div{gap:19px}body.vexilla-home .vx-number{width:27px;font-size:32px}body.vexilla-home .vx-pillars h2{font-size:21px}body.vexilla-home .vx-pillars p{font-size:12px;max-width:100%}body.vexilla-home .vx-footer{font-size:19px}}
@media(prefers-reduced-motion:reduce){body.vexilla-home .vx-city{animation:none}}

body.vexilla-home section[id]{scroll-margin-top:90px}
body.vexilla-home [hidden]{display:none!important}

/* Visual chapters below the approved opening. */
body.vexilla-home .vx-world-marches{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
body.vexilla-home .vx-world-motion{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border:1px solid #d4b47570;border-radius:50%;background:#201a11bc;color:#edd9ad;cursor:pointer}
body.vexilla-home .vx-world-motion:hover{background:#322618;color:#ffedc7}
body.vexilla-home .vx-world-motion svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
body.vexilla-home .vx-world-motion .vx-world-play{display:none}
body.vexilla-home .vx-world-motion[aria-pressed=true] .vx-world-pause{display:none}
body.vexilla-home .vx-world-motion[aria-pressed=true] .vx-world-play{display:block;fill:currentColor;stroke-width:1}
@media(max-width:600px){body.vexilla-home .vx-world-bottom:has(.vx-world-motion){flex-direction:row;align-items:center}}
body.vexilla-home .vx-stories{background:#17110d;overflow:hidden}
body.vexilla-home .vx-stories h2{font:500 clamp(44px,5.4vw,78px)/1.02 var(--serif);letter-spacing:-1.5px;color:#f5e9d0;margin:0}
body.vexilla-home .vx-stories h2 em{font-style:normal;color:#d9b36d}
body.vexilla-home .vx-kicker{font:500 12px/1.6 'DM Sans',sans-serif;letter-spacing:3px;color:#caa56a;margin:0 0 20px}
body.vexilla-home .vx-chapter{padding:90px 5% 92px;max-width:1720px;margin:auto}
body.vexilla-home .vx-chapter-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin:0 0 42px}
body.vexilla-home .vx-intro{font-size:16px;line-height:1.9;color:#c4b79f;margin:0 0 5px;max-width:390px}
body.vexilla-home .vx-daynight{margin:0;border:1px solid #b991483d;background:#211a12;box-shadow:0 28px 80px #0003}
body.vexilla-home .vx-city-frame{position:relative;aspect-ratio:11/7;overflow:hidden;background:#77915a}
body.vexilla-home .vx-city-frame>img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;display:block}
body.vexilla-home .vx-night-image{opacity:0;transition:opacity 1.2s ease}
body.vexilla-home [data-city-time=night] .vx-night-image{opacity:1}
body.vexilla-home .vx-image-label{position:absolute;top:24px;left:26px;font-size:12px;letter-spacing:2.3px;line-height:1.5;background:#17130de3;color:#f0dec0;border:1px solid #d7b97455;padding:9px 13px}
body.vexilla-home .vx-scene-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:86px;padding:18px 26px;background:#241a11;border-top:1px solid #c4a66b40}
body.vexilla-home .vx-scene-bar>span{font:italic 23px/1.3 var(--serif);color:#cdbd9e}
body.vexilla-home .vx-scene-controls{display:flex;gap:4px;padding:4px;background:#130f0bde;border:1px solid #ba985c50;flex-shrink:0}
body.vexilla-home .vx-scene-controls button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border:1px solid transparent;padding:9px 21px;background:transparent;color:#bcad91;font-size:14px;line-height:1.4;cursor:pointer}
body.vexilla-home .vx-scene-controls button[aria-pressed=true]{background:#dcb56e;color:#261a0d;border-color:#f0ce8d}
body.vexilla-home .vx-scene-controls button:hover{border-color:#e3c188}
body.vexilla-home .vx-scene-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4}
body.vexilla-home .vx-stories :is(a,button):focus-visible{outline:3px solid #f2d395;outline-offset:5px}
body.vexilla-home .vx-frontier{position:relative;isolation:isolate;min-height:820px;min-height:clamp(660px,62vw,1000px);background:#41523b;display:flex;flex-direction:column;justify-content:space-between;padding:70px 5% 36px;border-block:1px solid #a8894244}
body.vexilla-home .vx-world-scene,body.vexilla-home .vx-frontier-shade{position:absolute;inset:0;z-index:-2;overflow:hidden}
body.vexilla-home .vx-world-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 50%;display:block}
body.vexilla-home .vx-frontier-shade{z-index:-1;background:linear-gradient(90deg,#131710ef 0%,#131710a1 28%,transparent 66%),linear-gradient(0deg,#11150eda,transparent 23%)}
body.vexilla-home .vx-frontier-copy{max-width:640px}
body.vexilla-home .vx-frontier-copy p:not(.vx-kicker){font-size:16px;line-height:1.9;color:#e0d6bd;margin-top:26px}
body.vexilla-home .vx-world-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-top:150px}
body.vexilla-home .vx-world-caption{font:italic 28px/1.3 var(--serif);color:#f1dfbb;text-shadow:0 2px 12px #000}
body.vexilla-home .vx-begin{position:relative;text-align:center;padding:100px 5% 105px;background:radial-gradient(ellipse at 50% 25%,#53392236,transparent 64%),#1b130d}
body.vexilla-home .vx-begin>img{display:block;margin:0 auto 26px}
body.vexilla-home .vx-begin .vx-primary{margin-top:32px;text-decoration:none;color:#24170d;font-size:15px;padding:17px 29px}
body.vexilla-home .vx-begin-note{font-size:14px;color:#b6a486;margin:19px 0 0}
body.vexilla-home #notizie{background:#21180f;border-top:1px solid #b8955333;padding:60px 5%}
body.vexilla-home #notizie .testata{text-align:left;margin-bottom:30px}
body.vexilla-home #notizie h2{font-size:48px}
body.vexilla-home .piede{background:#130e0a;border-top:1px solid #b8955340}
@media(min-width:1800px){body.vexilla-home .vx-city-frame{aspect-ratio:1.85}}
@media(max-width:900px){body.vexilla-home .vx-chapter{padding-block:62px}body.vexilla-home .vx-chapter-heading{align-items:flex-start;flex-direction:column;gap:22px;margin-bottom:30px}body.vexilla-home .vx-intro{max-width:100%}body.vexilla-home .vx-frontier{min-height:730px;padding-top:48px}body.vexilla-home .vx-frontier-shade{background:linear-gradient(180deg,#14180fec,transparent 60%,#11150ebd),linear-gradient(90deg,#13171080,transparent 80%)}body.vexilla-home .vx-scene-bar>span{font-size:21px}}
@media(max-width:600px){body.vexilla-home .vx-chapter{padding:46px 5% 54px}body.vexilla-home .vx-stories h2{font-size:clamp(40px,11vw,59px);letter-spacing:-.8px}body.vexilla-home .vx-kicker{font-size:12px;letter-spacing:2px;margin-bottom:16px}body.vexilla-home .vx-intro{font-size:16px;line-height:1.75}body.vexilla-home .vx-intro br{display:none}body.vexilla-home .vx-city-frame{aspect-ratio:11/7}body.vexilla-home .vx-image-label{top:12px;left:12px;font-size:11px;padding:7px 10px;letter-spacing:1.3px}body.vexilla-home .vx-scene-bar{align-items:center;flex-direction:column;padding:18px 12px;gap:16px;text-align:center}body.vexilla-home .vx-scene-bar>span{font-size:20px}body.vexilla-home .vx-frontier{padding:44px 6% 28px;min-height:760px}body.vexilla-home .vx-world-scene img{object-position:52% 50%}body.vexilla-home .vx-frontier-copy p:not(.vx-kicker){font-size:16px}body.vexilla-home .vx-world-bottom{align-items:flex-start;flex-direction:column;gap:15px;margin-top:240px}body.vexilla-home .vx-world-caption{font-size:24px}body.vexilla-home .vx-scene-controls button{padding-inline:17px}body.vexilla-home .vx-begin{padding:65px 6% 70px}body.vexilla-home .vx-begin>img{width:64px;height:64px}body.vexilla-home .vx-begin .vx-kicker{letter-spacing:1.8px}body.vexilla-home .piede .dentro{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){body.vexilla-home .vx-night-image{transition:none}}

/* ═══ LA SEZIONE GIORNO/NOTTE SU DUE COLONNE ══════════════════════════════════════════
   Prima il testo stava sopra a tutta larghezza e l'immagine sotto, sempre a tutta
   larghezza: a schermo intero l'immagine da sola era alta piu' di mille pixel e la
   sezione richiedeva due schermate per essere letta. Affiancandoli la sezione entra in
   una schermata sola, e il testo si legge MENTRE si guarda la citta' invece che prima.

   SI CAMBIA SOLO IL CSS, non l'HTML: dentro quel blocco vivono i data-city-choice e il
   data-time-label su cui contano racconto.js e il traduttore. Spostare i tag per
   ottenere un effetto che la griglia sa gia' dare vorrebbe dire rimettere in gioco
   quegli agganci per niente.

   DA 901px IN SU soltanto. Sotto c'e' gia' una regola che impila tutto, ed e' quella
   giusta per il telefono: due colonne su uno schermo stretto sarebbero due colonne
   inservibili. */
@media(min-width:901px){
  body.vexilla-home .vx-life{
    display:grid;
    grid-template-columns:minmax(300px,.85fr) minmax(0,1.4fr);
    align-items:center;
    gap:clamp(38px,4.4vw,86px);
  }
  /* L'intestazione era una riga (titolo a sinistra, occhiello a destra). Nella colonna
     stretta torna una colonna, e il margine sotto sparisce: a separare ci pensa il gap
     della griglia. */
  body.vexilla-home .vx-life .vx-chapter-heading{
    display:flex;flex-direction:column;align-items:flex-start;
    justify-content:center;gap:0;margin:0;
  }
  /* Il titolo era tarato sulla larghezza intera della pagina: in mezza colonna 78px
     spezzerebbero «La tua città.» in un punto qualsiasi. */
  body.vexilla-home .vx-life h2{font-size:clamp(40px,3.7vw,64px);letter-spacing:-1px}
  body.vexilla-home .vx-life .vx-intro{max-width:none;margin:26px 0 0}
  body.vexilla-home .vx-life .vx-daynight{margin:0}
  /* Piu' quadrata: nella colonna stretta un 11/7 diventerebbe una fessura, e la citta'
     e' proprio la cosa che si vuole far guardare. */
  body.vexilla-home .vx-life .vx-city-frame{aspect-ratio:4/3}
  /* La barra sotto l'immagine ha meno larghezza da spartire: la frase in corsivo e i
     due bottoni ci stanno, ma senza queste due misure andavano a capo storti. */
  body.vexilla-home .vx-life .vx-scene-bar{min-height:0;padding:15px 20px;gap:14px}
  body.vexilla-home .vx-life .vx-scene-bar>span{font-size:19px}
  body.vexilla-home .vx-life .vx-scene-controls button{padding:8px 15px;min-height:40px;font-size:13px}
}
/* Fra i 901 e i 1200 la colonna del testo diventa troppo stretta per un titolo serif di
   quella misura: si stringe ancora un po' invece di lasciarlo spezzare. */
@media(min-width:901px) and (max-width:1200px){
  body.vexilla-home .vx-life h2{font-size:clamp(36px,3.9vw,48px)}
  body.vexilla-home .vx-life .vx-scene-bar>span{font-size:17px}
}