/* ============================================================
   federicoenicole.it
   Un mondo visivo chiuso: colori espliciti, nessuno swap di tema.
   Stessa tipografia della partecipazione cartacea.
   ============================================================ */
:root{
  --paper:#F7F4F1;
  --card:#FDFCFB;
  --ink:#2B2724;
  --ink-2:#6B645E;
  --ink-3:#9A928B;
  --rule:#E5DED7;
  --rule-2:#DCD3CB;
  --rose:#A98486;
  --rose-soft:#F0E7E5;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  background:var(--paper);
  color:var(--ink);
  font-family:"Cormorant",Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;
}

.layout{
  display:grid;
  grid-template-columns:38% 1fr;
  min-height:100svh;
  max-width:1180px;
  margin:0 auto;
  background:var(--paper);
}

/* ------------------------------------------------------------
   Colonna fissa: la partecipazione, identica su ogni pagina
   ------------------------------------------------------------ */
.side{
  background:var(--card);
  border-right:1px solid var(--rule);
  padding:52px 36px 36px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:40px;
}
@media (min-width:821px){
  .side{position:sticky;top:0;height:100svh}
}

.invite{margin:0}
.invite a{text-decoration:none;color:inherit;display:block}
.over{
  margin:0 0 28px;
  font-size:9.5px;font-weight:500;
  letter-spacing:.34em;text-indent:.34em;
  text-transform:uppercase;color:var(--ink-3);
}
.names{margin:0}
.name{
  display:block;font-weight:300;
  font-size:clamp(28px,3.4vw,38px);line-height:1.06;
  letter-spacing:.13em;margin-right:-.13em;
  text-transform:uppercase;color:var(--ink);
}
.amp{
  display:block;font-family:"Italianno",cursive;
  font-size:clamp(44px,5.2vw,58px);line-height:.72;
  color:var(--rose);margin:8px 0 10px;
}
.courtesy{
  margin:24px 0 0;font-style:italic;font-size:15px;
  letter-spacing:.05em;line-height:1.5;color:var(--ink-2);
}
.date{display:flex;align-items:center;justify-content:center;margin:22px 0 0}
.date .dow,.date .mon{
  padding:0 12px;font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
}
.date .mon{margin-right:-.2em}
.date .num{
  padding:0 12px;font-weight:300;font-size:38px;line-height:1;color:var(--ink);
  border-left:1px solid var(--rule-2);border-right:1px solid var(--rule-2);
}
.year{
  margin:9px 0 0;font-size:12.5px;letter-spacing:.24em;
  text-indent:.24em;color:var(--ink-2);
}
.where{margin:22px 0 0;font-style:italic;font-size:15.5px;line-height:1.45}
.where small{
  display:block;font-style:normal;font-size:9px;
  letter-spacing:.22em;text-indent:.22em;
  text-transform:uppercase;color:var(--ink-3);margin-top:8px;
}

.nav{list-style:none;margin:0;padding:0;text-align:left}
.nav li{border-top:1px solid var(--rule)}
.nav li:last-child{border-bottom:1px solid var(--rule)}
.nav a{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:12px 2px;text-decoration:none;color:var(--ink);
  font-size:10.5px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
}
.nav a span{font-size:9px;letter-spacing:.1em;color:#B5ADA6}
.nav a[aria-current]{color:var(--rose)}
.nav a[aria-current] span{color:var(--rose)}
.nav a:hover{color:var(--rose)}

/* ------------------------------------------------------------
   Colonna contenuto: una pagina sola che scorre
   ------------------------------------------------------------ */
.main{padding:52px 44px 64px;max-width:700px}

/* le sezioni sono impilate e sempre visibili: la navigazione a lato
   e' una scorciatoia, non un interruttore che nasconde */
.sec{
  margin-top:52px;
  padding-top:52px;
  border-top:1px solid var(--rule);
  scroll-margin-top:24px;
}

/* lo scorrimento morbido quando si clicca una voce del menu */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* ------------------------------------------------------------
   L'apertura delle sezioni mentre si scende.
   Due regole non negoziabili:
   1. parte da uno stato GIA' LEGGIBILE, non da opacity 0
   2. se il browser non supporta le animazioni da scroll, o se
      l'utente ha chiesto meno movimento, si vede tutto comunque
   Nessun JavaScript: e' l'animazione a seguire lo scroll, non un
   observer che potrebbe non scattare.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .reveal{
      animation:apri linear both;
      animation-timeline:view();
      animation-range:entry 8% entry 58%;
    }
    @keyframes apri{
      from{opacity:.5;transform:translateY(22px) scale(.985)}
      to  {opacity:1;transform:none}
    }
    /* i blocchi annidati muovono soltanto: due opacita' sovrapposte
       si moltiplicherebbero e il testo verrebbe troppo pallido */
    .reveal .reveal{animation-name:apri-interno;animation-range:entry 12% entry 62%}
    @keyframes apri-interno{
      from{transform:translateY(14px) scale(.992)}
      to  {transform:none}
    }
  }
}

.closing{
  margin:64px 0 0;
  text-align:center;
  font-family:"Italianno",cursive;
  font-size:46px;
  line-height:1;
  color:var(--rose);
}
.kicker{
  margin:0 0 20px;font-size:9.5px;font-weight:500;
  letter-spacing:.28em;text-indent:.28em;
  text-transform:uppercase;color:var(--rose);
}
h1.title,h2.title{
  font-weight:300;font-size:clamp(26px,3.4vw,32px);line-height:1.22;
  letter-spacing:-.005em;margin:0 0 18px;max-width:26ch;
  text-wrap:balance;
}
.lede{font-size:16.5px;line-height:1.72;color:var(--ink-2);margin:0 0 30px;max-width:48ch}
.note{font-size:15px;line-height:1.68;color:var(--ink-2);margin:22px 0 0;max-width:48ch}
.note em{color:var(--ink)}

/* elenco orari e luoghi */
.detail{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 22px}
.detail dt{
  font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);padding:14px 0;border-top:1px solid var(--rule);white-space:nowrap;
}
.detail dd{
  margin:0;padding:14px 0;border-top:1px solid var(--rule);
  color:var(--ink);font-size:15.5px;line-height:1.5;
}
.detail dd b{font-weight:400;font-size:19px;letter-spacing:.01em}
.detail dd small{display:block;font-style:italic;color:var(--ink-2);font-size:14px;margin-top:3px}
.detail dd:last-of-type,.detail dt:last-of-type{border-bottom:1px solid var(--rule)}

/* pulsanti */
.btn{
  display:inline-block;text-decoration:none;
  font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--rule-2);padding:13px 26px;background:transparent;
}
.btn:hover{border-color:var(--rose);color:var(--rose)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}

/* blocco informativo secondario */
.block{
  margin:34px 0 0;padding:24px 26px;
  background:var(--card);border:1px solid var(--rule);
}
.block h3{
  margin:0 0 12px;font-size:10px;font-weight:500;
  letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;color:var(--ink-3);
}
.block p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.block p + p{margin-top:10px}
.block .small{font-size:14px;font-style:italic;color:var(--ink-2)}
.block .mono{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:14.5px;letter-spacing:.02em;color:var(--ink);
}
.block .todo{color:var(--rose);font-style:italic}

/* foto */
.photo{
  position:relative;overflow:hidden;margin:0;
  background:
    radial-gradient(58% 54% at 32% 26%, #EFE4DE 0%, rgba(239,228,222,0) 62%),
    radial-gradient(58% 58% at 74% 76%, #C6ACA6 0%, rgba(198,172,166,0) 60%),
    linear-gradient(166deg,#EDE2DB 0%,#B69C97 100%);
}
.photo::after{
  content:attr(data-ph);position:absolute;left:12px;bottom:10px;
  font-family:ui-monospace,Menlo,monospace;font-size:8.5px;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.photo-wide{aspect-ratio:16/10;margin-bottom:32px}
.photo-tall{aspect-ratio:4/5;max-width:190px}

.cols{display:grid;grid-template-columns:1fr 170px;gap:32px;align-items:start}

/* ------------------------------------------------------------
   La mappa illustrata
   ------------------------------------------------------------ */

/* la serpentina e' verticale: si adatta in larghezza e non scorre mai
   di lato, nemmeno su telefono */
.trip{
  margin:32px 0 0;
  padding:0;
  border:1px solid var(--rule);
  background:#C3D8D8; /* l'oceano: evita lampi di carta ai bordi */
}
.trip svg{display:block;width:100%;height:auto}


/* ------------------------------------------------------------
   Accessibilità e mobile
   ------------------------------------------------------------ */
a:focus-visible,.btn:focus-visible{
  outline:2px solid var(--rose);outline-offset:3px;
}

@media (max-width:820px){
  .layout{grid-template-columns:1fr;min-height:0}
  .side{
    border-right:0;border-bottom:1px solid var(--rule);
    padding:44px 26px 30px;
  }
  .main{padding:38px 26px 44px;max-width:none}
  .cols{grid-template-columns:1fr}
  .photo-tall{max-width:200px}
}
@media (max-width:420px){
  .side{padding:36px 22px 26px}
  .main{padding:32px 22px 40px}
  .date .dow,.date .mon{padding:0 9px}
  .date .num{padding:0 9px;font-size:34px}
  .block{padding:20px 20px}
}