/* =========================================================
   Marina e Sandro, 26.09.2026
   Palette e impostazioni di base
   ========================================================= */

:root{
  --notte:#241C4E;
  --notte-2:#332757;
  --ottanio:#008C95;        /* Pantone 321 C */
  --ottanio-scuro:#00676E;  /* fondi con testo bianco */
  --ottanio-chiaro:#4FC7CC; /* accenti su fondo notte */
  --corallo:#FF5A4E;
  --carta:#FFFBF2;
  --inchiostro:#1A1636;

  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --testo:"Atkinson Hyperlegible","Verdana",sans-serif;

  --wrap:min(100% - 2.5rem, 68rem);
  --topbar-h:4.25rem;
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--topbar-h) + 0.5rem);
}

body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:1.125rem;      /* 18px, alzato su schermi grandi */
  line-height:1.65;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;}

a{color:inherit;}

::selection{background:var(--ottanio-chiaro);color:var(--inchiostro);}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--corallo);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ottanio-chiaro);color:var(--inchiostro);
  padding:.75rem 1rem;z-index:99;font-weight:700;
}
.skip:focus{left:0;}

.wrap{width:var(--wrap);margin-inline:auto;}
.center{text-align:center;}

/* =========================================================
   Barra di navigazione
   ========================================================= */

.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:.75rem;
  min-height:var(--topbar-h);
  padding:.5rem clamp(.75rem,4vw,2rem);
  background:var(--notte);
  color:var(--carta);
  border-bottom:3px solid var(--ottanio);
}

.brand{
  font-family:var(--display);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-.02em;
  text-decoration:none;
  flex:0 0 auto;
  line-height:1;
}
.brand-amp{color:var(--ottanio-chiaro);}

.nav{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
.nav::-webkit-scrollbar{display:none;}
.nav{scrollbar-width:none;}

.nav ul{
  display:flex;gap:.4rem;
  list-style:none;margin:0;padding:.25rem 0;
}

.nav a{
  display:block;
  padding:.45rem .8rem;
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  border:2px solid rgba(255,251,242,.35);
  border-radius:999px;
  color:var(--carta);
}
.nav a:hover{border-color:var(--ottanio-chiaro);}
.nav a[aria-current="true"]{
  background:var(--ottanio-chiaro);
  border-color:var(--ottanio-chiaro);
  color:var(--inchiostro);
}

/* =========================================================
   Sezioni e titoli
   ========================================================= */

.sec{padding:clamp(3rem,10vw,6rem) 0;}

.sec h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.4rem,11vw,4.5rem);
  line-height:.95;
  letter-spacing:-.035em;
  margin:0 0 1.5rem;
}

.sec h3.sub{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.5rem,6vw,2.25rem);
  line-height:1.1;
  margin:3rem 0 1.25rem;
}

.big{
  font-size:clamp(1.35rem,5.5vw,2rem);
  font-weight:700;
  line-height:1.35;
  margin:0 0 1.75rem;
  max-width:24ch;
}

.note{font-size:1rem;opacity:.8;margin:1rem 0 0;}
.note-light{opacity:.85;}

/* --------- HOME --------- */

.sec-home{
  background:var(--notte);
  color:var(--carta);
  padding-top:clamp(2.5rem,8vw,5rem);
}

.home-grid{display:grid;gap:2.5rem;}

.kicker{
  font-size:1rem;
  font-weight:700;
  color:var(--ottanio-chiaro);
  margin:0 0 1rem;
  border-left:4px solid var(--ottanio-chiaro);
  padding-left:.7rem;
}

.sec-home h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.9rem,13vw,6rem);
  line-height:.92;
  letter-spacing:-.04em;
  margin:0 0 1.25rem;
}
.sec-home h1 .e{color:var(--ottanio-chiaro);}
.sec-home h1 .verb{
  display:inline-block;
  color:var(--inchiostro);
  background:var(--ottanio-chiaro);
  padding:.05em .3em .12em;
  transform:rotate(-1.5deg);
  margin-top:.15em;
}

.home-text .btn{margin-top:1rem;}

/* --------- PERCHE --------- */

.sec-perche{background:var(--ottanio-scuro);color:var(--carta);}

.litania{list-style:none;margin:0;padding:0;max-width:34ch;}

.litania li{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.3rem,5.5vw,2rem);
  line-height:1.25;
  padding:.7rem 0 .7rem 1.6rem;
  border-bottom:2px solid rgba(255,251,242,.28);
  position:relative;
}
.litania li::before{
  content:"";
  position:absolute;left:0;top:1.35em;
  width:.7rem;height:.7rem;
  background:var(--corallo);
  border-radius:50%;
}
.litania li:nth-child(even)::before{background:var(--ottanio-chiaro);}
.litania li.last{
  border-bottom:0;
  background:var(--notte);
  color:var(--carta);
  padding:.9rem 1rem .9rem 2.4rem;
  margin-top:1rem;
  transform:rotate(-1deg);
}
.litania li.last::before{background:var(--ottanio-chiaro);top:1.55em;left:1rem;}

.n33{
  font-weight:800;
  color:var(--ottanio-chiaro);
  font-size:1.35em;
  line-height:1;
}

/* --------- QUANDO --------- */

.sec-quando{background:var(--carta);}
.sec-quando h2{color:var(--ottanio);}

/* --------- DOVE --------- */

.sec-dove{
  background:var(--carta);
  border-top:3px dashed rgba(26,22,54,.25);
}
.sec-dove h2{color:var(--ottanio);}

/* --------- COME --------- */

.sec-come{background:var(--notte);color:var(--carta);}
.sec-come h2{color:var(--ottanio-chiaro);}

.faq{max-width:44rem;}

.faq details{
  border-top:2px solid rgba(255,251,242,.3);
  padding:.35rem 0;
}
.faq details:last-of-type{border-bottom:2px solid rgba(255,251,242,.3);}

.faq summary{
  cursor:pointer;
  list-style:none;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.15rem,4.6vw,1.5rem);
  line-height:1.3;
  padding:1rem 2.5rem 1rem 0;
  position:relative;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";
  position:absolute;right:0;top:50%;
  transform:translateY(-50%);
  font-size:1.8rem;
  line-height:1;
  color:var(--ottanio-chiaro);
}
.faq details[open] summary::after{content:"–";}
.faq summary:hover{color:var(--ottanio-chiaro);}

.faq .answer{padding:0 0 1.25rem;max-width:60ch;}
.faq .answer p{margin:0;}
.faq .answer a{color:var(--ottanio-chiaro);text-underline-offset:3px;}

/* --------- Chiusura della sezione Come --------- */

.chiamateci{
  max-width:44rem;
  margin:2.5rem 0 0;
  padding:1.4rem 1.5rem;
  background:var(--ottanio-scuro);
  font-size:clamp(1.1rem,4.4vw,1.4rem);
  line-height:1.4;
  transform:rotate(-.8deg);
}
.chiamateci strong{color:var(--ottanio-chiaro);white-space:nowrap;}

/* --------- GALLERY --------- */

.sec-gallery{background:var(--notte);color:var(--carta);padding-bottom:clamp(2rem,6vw,4rem);}
.sec-gallery h2{color:var(--ottanio-chiaro);max-width:14ch;}

.carousel{margin-top:2rem;}

.track{
  display:flex;
  gap:1rem;
  list-style:none;
  margin:0;
  padding:0 max(1.25rem, calc((100vw - 68rem) / 2));
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.track::-webkit-scrollbar{display:none;}

.track li{
  flex:0 0 min(82vw,30rem);
  scroll-snap-align:center;
  background:var(--carta);
  padding:.6rem .6rem 1.6rem;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.track li:nth-child(3n){transform:rotate(-1.2deg);}
.track li:nth-child(3n+2){transform:rotate(1.1deg);}

.track img{
  width:100%;
  height:min(58vh,26rem);
  object-fit:contain;
  background:#efe9dd;
}

.carousel-ctrl{
  display:flex;align-items:center;justify-content:center;gap:1.25rem;
  margin-top:1.75rem;
}

.arrow{
  font-family:var(--testo);
  font-size:1.5rem;
  line-height:1;
  width:3rem;height:3rem;
  border-radius:50%;
  border:2px solid var(--ottanio-chiaro);
  background:transparent;
  color:var(--ottanio-chiaro);
  cursor:pointer;
}
.arrow:hover{background:var(--ottanio-chiaro);color:var(--inchiostro);}

.counter{
  font-weight:700;
  font-size:1.05rem;
  margin:0;
  min-width:5.5rem;
  text-align:center;
}

/* =========================================================
   Bottoni
   ========================================================= */

.btn{
  display:inline-block;
  font-family:var(--display);
  font-weight:800;
  font-size:1.1rem;
  line-height:1;
  padding:.95rem 1.4rem;
  border:0;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
}
.btn-chiaro{background:var(--ottanio-chiaro);color:var(--inchiostro);}
.btn-notte{background:var(--notte);color:var(--carta);}
.btn-ottanio{background:var(--ottanio-scuro);color:#fff;}
.btn:hover{filter:brightness(1.08);}

/* Menu calendario */

.cal{position:relative;display:inline-block;}

.cal-menu{
  list-style:none;
  margin:.6rem 0 0;
  padding:.4rem;
  background:var(--carta);
  border:3px solid var(--notte);
  border-radius:1rem;
  min-width:16rem;
  box-shadow:0 14px 30px rgba(36,28,78,.2);
}
.cal-menu li + li{border-top:1px solid rgba(26,22,54,.15);}
.cal-menu a{
  display:block;
  padding:.8rem .9rem;
  font-weight:700;
  text-decoration:none;
  border-radius:.6rem;
}
.cal-menu a:hover{background:var(--ottanio-chiaro);}

/* =========================================================
   Foto
   ========================================================= */

.photo{margin:0;}

.photo img{
  width:100%;
  background:#e6e0d4;
}

.photo figcaption{
  font-size:.95rem;
  padding:.7rem .2rem 0;
  opacity:.85;
}

.photo-hero img{
  border:.6rem solid var(--carta);
  box-shadow:0 16px 34px rgba(0,0,0,.4);
}
.photo-hero{transform:rotate(-1.5deg);}
.photo-hero figcaption{color:var(--carta);}

.photo-wide{
  margin-top:2rem;
  background:var(--carta);
  padding:.6rem;
  border:2px solid rgba(26,22,54,.15);
  box-shadow:0 10px 24px rgba(36,28,78,.14);
}

/* =========================================================
   Footer
   ========================================================= */

.footer{
  background:var(--inchiostro);
  color:var(--carta);
  text-align:center;
  padding:2rem 1rem;
}
.footer p{
  margin:0;
  font-size:.8rem;
  letter-spacing:.08em;
  opacity:.85;
}

/* =========================================================
   Schermi più grandi
   ========================================================= */

@media (min-width:48rem){
  body{font-size:1.2rem;}
  .home-grid{
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:3.5rem;
  }
  .home-text{order:1;}
  .photo-hero{order:2;max-width:30rem;justify-self:end;}
  .litania{max-width:46ch;}
  .sec-dove .photo-wide{max-width:46rem;}
}

@media (min-width:64rem){
  .topbar{gap:2rem;}
  .nav ul{gap:.5rem;}
}

/* =========================================================
   Preferenze di movimento ridotto
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .track{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}