@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Jost:wght@300;400;500&display=swap');

/* ══════════════════════════════════════
   VARIABILI — palette crema/ocra
══════════════════════════════════════ */
:root {
  --gold:   #8b6914;   /* oro scuro elegante */
  --terra:  #8b3a14;   /* terracotta */
  --sea:    #2a5a6a;   /* blu petrolio */
  --bg:     #f8f4e8;   /* sfondo principale crema chiaro */
  --bg2:    #f0ead8;   /* card leggermente più scuro */
  --bg3:    #ede8d5;   /* sezioni alternate */
  --bord:   #2a2a2a;   /* bordi esterni nero quasi */
  --t1:     #1a1a1a;   /* testo principale scuro */
  --t2:     #333333;   /* testo secondario */
  --t3:     #666666;   /* testo muted */
  --serif:  "Cormorant Garamond", Georgia, serif;
  --sans:   "Jost", -apple-system, sans-serif;
}

/* ══════════════════════════════════════
   RESET
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { background: var(--bord); font-family: var(--sans); }
a { text-decoration: none; color: inherit; }
img { display: block; width: 100%; object-fit: cover; }

/* ══════════════════════════════════════
   WRAPPER — 1850px centrato con bordi
══════════════════════════════════════ */
.outer { background: var(--bord); padding: 0 60px; min-height: 100vh; }
.site  { background: var(--bg); width: 100%; max-width: 1850px; margin: 0 auto; color: var(--t1); overflow: hidden; }

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.nav {
  display: flex; align-items: center; justify-content: center;
  gap: 2.5rem; padding: 1.4rem 2.5rem;
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1850px; z-index: 100;
  background: linear-gradient(to bottom, rgba(10,5,2,.55), transparent);
}
.nav a { font-family: var(--sans); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.75); transition: color .2s; }
.nav a:hover { color: #fff; }
.nav-date { position: absolute; right: 2.5rem; font-size: 9px; letter-spacing: 1.5px; color: rgba(255,255,255,.4); text-transform: uppercase; }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero { position: relative; height: 95vh; min-height: 660px; max-height: 960px; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0;
  background: url("/assets/img/foto1.jpg") center 28% / cover no-repeat;
  transform: scale(1.04); transition: transform 9s ease-out;
  filter: brightness(0.55) saturate(0.7) hue-rotate(60deg);
}
.hero-bg.loaded { transform: scale(1); }
.hero-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(10,5,2,.35) 0%,
    rgba(10,5,2,.1) 20%,
    rgba(10,5,2,.1) 50%,
    rgba(248,244,232,.6) 80%,
    rgba(248,244,232,1) 100%
  );
}
.hero-cnt {
  position: relative; z-index: 10; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem 2rem 8rem;
}
.hero-ey {
  font-family: var(--sans); font-size: 9px; letter-spacing: 5px; text-transform: uppercase;
  color: rgba(255,255,255,.9); margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 14px;
  opacity: 0; animation: fu .8s .3s forwards;
}
.hero-ey::before, .hero-ey::after { content: ""; width: 40px; height: 1px; background: rgba(255,255,255,.5); }
.hero-t1 {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(5rem, 20vw, 10rem); color: #fff;
  line-height: .88; letter-spacing: -3px;
  text-shadow: 0 4px 80px rgba(0,0,0,.5);
  margin-bottom: .15rem; opacity: 0; animation: fu .9s .5s forwards;
}
.hero-t1 .g { color: #f0c000; font-style: normal; font-weight: 600; }
.hero-t2 {
  font-family: var(--sans); font-size: clamp(.9rem, 2vw, 1.2rem);
  letter-spacing: 9px; text-transform: uppercase; color: rgba(255,255,255,.85);
  margin-bottom: .6rem; opacity: 0; animation: fu .9s .7s forwards;
}
.hero-ed {
  font-family: var(--serif); font-style: italic; font-size: 1.1rem;
  color: rgba(255,220,50,.9); letter-spacing: 2px; margin-bottom: 2.8rem;
  opacity: 0; animation: fu .9s .9s forwards;
}
.hero-btns { display: flex; align-items: center; gap: 2rem; opacity: 0; animation: fu .9s 1.1s forwards; }
.btn-g {
  border: 1px solid rgba(255,255,255,.7); color: #fff;
  padding: 12px 34px; font-family: var(--sans); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  background: rgba(0,0,0,.2); backdrop-filter: blur(6px);
  cursor: pointer; transition: all .3s;
}
.btn-g:hover { background: #fff; color: var(--bord); }
.btn-gh {
  font-family: var(--sans); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,.6); cursor: pointer; transition: color .2s;
}
.btn-gh:hover { color: #fff; }
.scroll-hint {
  position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  z-index: 10; opacity: 0; animation: fi 1s 1.5s forwards;
}
.scroll-hint span { font-family: var(--sans); font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: rgba(30,20,10,.4); }
.scroll-line { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--gold), transparent); animation: sp 2s ease-in-out infinite; }

/* ══════════════════════════════════════
   CATEGORIE
══════════════════════════════════════ */
.cats {
  display: flex; overflow-x: auto; scrollbar-width: none;
  background: var(--bg3); border-bottom: 1px solid rgba(0,0,0,.08);
}
.cats::-webkit-scrollbar { display: none; }
.cats a {
  padding: 11px 20px; font-family: var(--sans); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--t3);
  white-space: nowrap; border-bottom: 2px solid transparent; transition: all .2s;
}
.cats a:hover, .cats a.on { color: var(--gold); border-bottom-color: var(--gold); }

/* ══════════════════════════════════════
   NOTIZIE 3 COLONNE
══════════════════════════════════════ */
.n3 { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid rgba(0,0,0,.07); }
.nc {
  padding: 2.25rem 2rem; cursor: pointer; transition: background .2s;
  border-right: 1px solid rgba(0,0,0,.07); background: var(--bg);
}
.nc:last-child { border-right: none; }
.nc:hover { background: var(--bg2); }
.ni { height: 155px; background: var(--bg2); margin-bottom: 1.25rem; overflow: hidden; position: relative; }
.ni::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; }
.n3 .nc:nth-child(1) .ni::after { background: var(--gold); }
.n3 .nc:nth-child(2) .ni::after { background: var(--terra); }
.n3 .nc:nth-child(3) .ni::after { background: var(--sea); }
.ni-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 8px; color: var(--t3); letter-spacing: 2px; }
.nc-cat { font-family: var(--sans); font-size: 8px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 8px; font-weight: 500; }
.n3 .nc:nth-child(1) .nc-cat { color: var(--gold); }
.n3 .nc:nth-child(2) .nc-cat { color: var(--terra); }
.n3 .nc:nth-child(3) .nc-cat { color: var(--sea); }
.nc-t { font-family: var(--serif); font-size: clamp(1.3rem, 2.5vw, 1.35rem); color: var(--t1); line-height: 1.28; margin-bottom: .6rem; transition: color .2s; }
.nc:hover .nc-t { color: #000; }
.nc-d { font-family: var(--sans); font-size: 13px; color: var(--t2); line-height: 1.8; margin-bottom: .75rem; }
.nc-m { font-family: var(--sans); font-size: 9px; color: var(--t3); letter-spacing: 1px; }

/* ══════════════════════════════════════
   FEATURED
══════════════════════════════════════ */
.feat { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(0,0,0,.07); min-height: 420px; }
.fi { position: relative; overflow: hidden; background: var(--bg2); display: flex; align-items: center; justify-content: center; }
.fi-ph { font-family: var(--sans); font-size: 9px; color: var(--t3); letter-spacing: 2px; z-index: 1; }
.film { position: absolute; left: 0; top: 0; bottom: 0; width: 22px; background: rgba(0,0,0,.15); display: flex; flex-direction: column; justify-content: space-around; padding: 8px 4px; z-index: 2; }
.fh { width: 14px; height: 9px; background: rgba(0,0,0,.1); border-radius: 2px; }
.ft2 { padding: 3rem 2.5rem; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(0,0,0,.07); background: var(--bg3); }
.fc { display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; }
.fc-l { width: 24px; height: 1px; background: var(--terra); }
.fc span { font-family: var(--sans); font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: var(--terra); }
.ft-t { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--t1); line-height: 1.2; margin-bottom: 1rem; }
.ft-t em { color: var(--gold); font-style: italic; }
.ft-d { font-family: var(--sans); font-size: 13px; color: var(--t2); line-height: 1.85; margin-bottom: 1.5rem; }
.ft-m { font-family: var(--sans); font-size: 9px; color: var(--t3); letter-spacing: 1px; margin-bottom: 1.25rem; }
.ft-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(139,105,20,.35); padding-bottom: 3px; width: fit-content; transition: gap .2s; cursor: pointer; }
.ft-cta:hover { gap: 16px; }

/* ══════════════════════════════════════
   NOTIZIE 2 COLONNE
══════════════════════════════════════ */
.n2 { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(0,0,0,.07); }
.n2 .nc { border-right: 1px solid rgba(0,0,0,.07); }
.n2 .nc:last-child { border-right: none; }
.n2 .ni { height: 170px; }
.n2 .nc:nth-child(1) .ni::after { background: var(--gold); }
.n2 .nc:nth-child(2) .ni::after { background: var(--sea); }
.n2 .nc:nth-child(1) .nc-cat { color: var(--gold); }
.n2 .nc:nth-child(2) .nc-cat { color: var(--sea); }

/* ══════════════════════════════════════
   PREMI
══════════════════════════════════════ */
.premi { padding: 4.5rem 2.5rem; border-bottom: 1px solid rgba(0,0,0,.07); background: var(--bg3); position: relative; overflow: hidden; }
.sh { text-align: center; margin-bottom: 3rem; }
.sh-ey { font-family: var(--sans); font-size: 9px; letter-spacing: 5px; text-transform: uppercase; margin-bottom: .6rem; }
.sh-t { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2rem, 5vw, 3.5rem); color: var(--t1); letter-spacing: -1px; }
.pg { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(0,0,0,.08); }
.pm { background: var(--bg); padding: 2.25rem 1.75rem; cursor: pointer; transition: all .3s; position: relative; overflow: hidden; }
.pm:hover { background: var(--bg2); transform: translateY(-2px); }
.pm-tb { position: absolute; top: 0; left: 0; right: 0; height: 2px; transform: scaleX(0); transition: transform .35s; transform-origin: left; }
.pm:nth-child(1) .pm-tb { background: var(--terra); }
.pm:nth-child(2) .pm-tb { background: var(--gold); }
.pm:nth-child(3) .pm-tb { background: var(--sea); }
.pm:nth-child(4) .pm-tb { background: linear-gradient(90deg, var(--terra), var(--gold)); }
.pm:hover .pm-tb { transform: scaleX(1); }
.pm-n { font-family: var(--sans); font-size: 8px; letter-spacing: 3px; color: var(--t3); margin-bottom: 1rem; }
.pm-i { font-size: 1.4rem; margin-bottom: .7rem; display: block; }
.pm h3 { font-family: var(--serif); font-size: 1.05rem; color: var(--t1); line-height: 1.3; margin-bottom: .5rem; }
.pm p { font-family: var(--sans); font-size: 12px; color: var(--t2); line-height: 1.7; }
.pm-y { font-family: var(--sans); font-size: 9px; color: var(--t3); margin-top: 1rem; letter-spacing: 1px; }

/* ══════════════════════════════════════
   STAMPA
══════════════════════════════════════ */
.stampa { padding: 4.5rem 2.5rem; background: var(--bg); position: relative; overflow: hidden; }
.sg { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(0,0,0,.08); }
.sc { background: var(--bg); padding: 1.75rem; cursor: pointer; transition: background .2s; position: relative; }
.sc:hover { background: var(--bg2); }
.sc::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--terra); transform: scaleX(0); transition: transform .3s; transform-origin: left; }
.sc:hover::before { transform: scaleX(1); }
.sc-s { font-family: var(--sans); font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: var(--terra); margin-bottom: .85rem; font-weight: 500; }
.sc h4 { font-family: var(--serif); font-size: .95rem; color: var(--t2); line-height: 1.6; margin-bottom: 1.2rem; }
.sc:hover h4 { color: var(--t1); }
.sc-f { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 9px; color: var(--t3); border-top: 1px solid rgba(0,0,0,.08); padding-top: .75rem; }
.sc-f a { color: var(--gold); }

/* ══════════════════════════════════════
   FOTO FINALE + FOOTER sovrapposto
══════════════════════════════════════ */
.foto-fin { position: relative; min-height: 480px; overflow: hidden; }
.foto-fin-bg {
  position: absolute; inset: 0;
  background: url("/assets/img/foto2.jpg") center 45% / cover no-repeat;
  filter: brightness(0.35);
}
.foto-fin-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(248,244,232,1) 0%, rgba(248,244,232,.05) 15%, rgba(0,0,0,.05) 80%, rgba(0,0,0,.4) 100%);
}
.footer {
  position: relative; z-index: 2;
  padding: 3.5rem 2.5rem 2rem;
}
.f-logo { text-align: center; margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.2); }
.f-logo-t { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.5rem; color: #fff; letter-spacing: 1px; }
.f-logo-t b { color: #f0c000; font-weight: 400; }
.f-g { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 2rem; }
.footer h4 { font-family: var(--sans); font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 1rem; }
.footer p, .footer a { font-family: var(--sans); font-size: 12px; color: rgba(255,255,255,.75); line-height: 2.3; display: block; }
.footer a:hover { color: #f0c000; }
.f-bot { border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.25rem; font-family: var(--sans); font-size: 9px; color: rgba(255,255,255,.4); display: flex; justify-content: space-between; }

/* ══════════════════════════════════════
   ANIMAZIONI
══════════════════════════════════════ */
@keyframes fu { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fi { from { opacity:0; } to { opacity:1; } }
@keyframes sp { 0%{transform:scaleY(0);transform-origin:top;opacity:.3} 50%{transform:scaleY(1);transform-origin:top;opacity:1} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom;opacity:.3} }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:1000px) { .outer { padding: 0 20px; } }
@media(max-width:900px) {
  .n3 { grid-template-columns: 1fr; }
  .feat { grid-template-columns: 1fr; }
  .fi { height: 260px; }
  .n2 { grid-template-columns: 1fr; }
  .pg { grid-template-columns: 1fr 1fr; }
  .sg { grid-template-columns: 1fr 1fr; }
  .f-g { grid-template-columns: 1fr 1fr; }
  .nav a:nth-child(n+5) { display: none; }
}
@media(max-width:600px) {
  .pg { grid-template-columns: 1fr; }
  .sg { grid-template-columns: 1fr; }
}
.n4{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(0,0,0,.07);}
.n4 .nc{border-right:1px solid rgba(0,0,0,.07);}
.n4 .nc:last-child{border-right:none;}
.n4 .ni{height:140px;}
.n4 .nc:nth-child(1) .ni::after{background:var(--gold);}
.n4 .nc:nth-child(2) .ni::after{background:var(--terra);}
.n4 .nc:nth-child(3) .ni::after{background:var(--sea);}
.n4 .nc:nth-child(4) .ni::after{background:var(--gold);}
.n4 .nc:nth-child(1) .nc-cat{color:var(--gold);}
.n4 .nc:nth-child(2) .nc-cat{color:var(--terra);}
.n4 .nc:nth-child(3) .nc-cat{color:var(--sea);}
.n4 .nc:nth-child(4) .nc-cat{color:var(--gold);}
@media(max-width:900px){.n4{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.n4{grid-template-columns:1fr;}}
@media(max-width:600px){
  .sc-s{font-size:14px;}
  .sc h4{font-size:1.2rem;}
  .sc-f{font-size:14px;}
}

.sc-f a{pointer-events:all;position:relative;z-index:10;}
.sc{cursor:default;}