/* ============================================================
   TEMA "CPH OPEN" — override sperimentale (fedele al sito reale)
   Rilevato da cphopen.com/aboutcph:
     · sfondo BIANCO, sezioni alternate quasi-nere (#131516)
     · titoli display: Bebas Neue, nero, condensato
     · testo/corpo: serif (Adobe Garamond -> EB Garamond), grigio caldo
     · micro-label: condensata uppercase, spaziata
   Da caricare DOPO style.css. Rosso Dock mantenuto come accento.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
/* Titoli: font "Horizon" (non su Google Fonts) con fallback geometrico se non installato */

:root{
  --bg:#EBEBEB;        /* sfondo pagina: grigio chiaro */
  --surface:#131516;   /* sezioni alternate: quasi-nero */
  --white:#131516;     /* ruolo "testo primario" -> quasi nero */
  --red:#E20510;
  --gray:#6f6a63;      /* grigio caldo per label/didascalie */
  --border:#e4e1da;    /* linee sottili */

  --f-display:"Horizon", "Poppins", sans-serif;              /* titoli */
  --f-sub:"Poppins", sans-serif;                             /* micro-label / sottotitoli */
  --f-body:"Helvetica Neue", Helvetica, Arial, sans-serif;   /* corpo */
}

/* titoli: leggero stretch orizzontale (110%) */
.section-title,.cph-h1,.ed-h1,.pkg-subtitle,.pkg-name,.mcard h3,.day h3{
  display:inline-block;transform:scaleX(1.2);transform-origin:left;}

/* corpo serif editoriale */
body{background:var(--bg);color:#484747;font-size:18px;line-height:1.5;word-spacing:.16em;}

/* blocca ogni scorrimento/trascinamento orizzontale (mobile): la pagina
   non deve potersi spostare a sinistra/destra né fare overscroll laterale */
html,body{overflow-x:hidden;overflow-x:clip;max-width:100%;overscroll-behavior-x:none;}
::selection{background:var(--red);color:#fff;}
.prose{color:#484747;font-size:clamp(17px,1.7vw,19px);line-height:1.5;}

/* parole più staccate solo nei testi di lettura: titoli/nav/label restano normali */
.brandtext,.nav-links a,.nav-contact,.label,.ed-kicker,.credit,
.section-title,.cph-h1,.ed-h1,.pkg-subtitle,.pkg-name,.pkg-price,.mcard h3,.mcard .price,
.day h3,.arch-h2,.ed-head,.artist-row .name,.footer-logo,.arch-card .t,.cd-n,.stat-num,
figcaption,.footer-social a,.footer-copy{word-spacing:normal;}

/* didascalie foto: dimensione proporzionata alla foto (container query) */
.ed-fig,.cph-fig,.arch-photos figure,.figure{container-type:inline-size;}
.prose strong{color:var(--white);font-weight:500;}

/* titoli: Manrope ExtraBold, tracking negativo per look "wide grotesk" */
.section-title,.phero h1,.hero-title,.feat-body h3,.pkg-name,.pkg-price,.day h3,
.ed-head,.artist-row .name,.mcard h3,.mcard .price,.disc h3,.pquote cite,.footer-logo,
.cph-h1,.ed-h1,.arch-h2,.arch-card .t,.pkg-subtitle,.stat-num,.cd-n,.brandtext,
.citem a,.citem p,.contact-box h3{
  font-weight:800;letter-spacing:-2px;-webkit-text-stroke:1px currentColor;}
.section-title{line-height:.98;}

/* header + footer + pulsanti: font Barlow Semi Condensed — niente stroke/stretch */
.brand .brandtext,.footer-logo{font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;letter-spacing:1px;transform:none;-webkit-text-stroke:0;}
.nav-links a,.nav-contact{font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;letter-spacing:1px;-webkit-text-stroke:0;}
.footer-social a,.footer-copy{font-family:"Barlow Semi Condensed",sans-serif;}
/* pulsanti con font header (Barlow Semi Condensed) */
.btn{font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;letter-spacing:1px;word-spacing:normal;}

/* micro-label / kicker: Manrope bold, spaziata */
.label{font-family:var(--f-sub);font-weight:700;letter-spacing:2px;color:var(--gray);}
.label.red{color:var(--red);}

/* lead/sottotitolo: identico a "Il festival underground di Ferrara" su tutte le pagine */
.lead,.cph-lead,.ed-lead{font-family:var(--f-sub);font-weight:700;font-style:normal;text-transform:uppercase;
  font-size:clamp(14px,1.55vw,17px);line-height:1.25;letter-spacing:.2px;color:#393838;}

/* ---------- NAV (barra bianca) ---------- */
.nav{background:#fff;border-bottom:1px solid var(--border);
  backdrop-filter:none;-webkit-backdrop-filter:none;}
.nav.scrolled{background:#fff;box-shadow:0 4px 18px rgba(20,20,20,.07);}
.brand .brandtext{color:var(--white);}
/* logo immagine in header al posto del testo DOCKV */
.brand .brand-logo{display:block;height:56px;width:auto;}
@media(max-width:768px){.brand .brand-logo{height:40px;}}
.nav-links a{color:#7a756c;}
.nav-links a:hover,.nav-links a.active{color:var(--white);}
/* voci menu centrate nell'header (desktop): brand a sinistra, nav-links
   bilanciata al centro, Contattaci a destra. Il mobile (<=768px) resta invariato. */
@media(min-width:769px){.nav-links{margin-left:auto;margin-right:auto;}}
.nav-toggle span{background:var(--white);}
.nav-toggle span:nth-child(2){background:var(--red);}
@media(max-width:768px){
  .nav-links{background:rgba(255,255,255,.98);border-left:1px solid var(--border);
    box-shadow:-24px 0 60px rgba(20,20,20,.12);}
  .nav-links a{border-bottom:1px solid var(--border);}
}

/* heroes con testo sopra la foto: titolo/sottotitolo restano bianchi
   anche nel tema chiaro (altrimenti sarebbero illeggibili sulla foto) */
.phero h1,.phero .hero-title{color:#fff;}
.phero h1 .red,.phero .hero-title .red{color:var(--red);}

/* ---------- SEZIONI ALTERNATE NERE (come CPH) ---------- */
.section.alt{background:var(--surface);border-top:1px solid var(--surface);
  border-bottom:1px solid var(--surface);color:#eceae6;}
.section.alt .section-title{color:#fff;}
.section.alt .prose{color:#c7c4bd;}
.section.alt .prose strong{color:#fff;}
.section.alt .label{color:#ff5964;}

/* countdown: striscia nera su pagina bianca */
.countdown-strip{background:var(--surface);}
.countdown-strip .cd-t{color:#a8a29a;}

/* ---------- DIDASCALIE ---------- */
.credit{font-family:var(--f-body);font-style:italic;
  text-transform:none;letter-spacing:.2px;color:#6f6a63;font-size:15px;}
.figure figcaption{font-family:var(--f-sub);font-weight:700;font-style:normal;
  text-transform:uppercase;letter-spacing:.5px;color:#16130f;
  font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;margin-top:10px;}

/* mobile: didascalie complete (a capo) e molto più piccole, mai troncate */
@media(max-width:768px){
  .ed-fig figcaption,.ed-hero figcaption,.cph-fig figcaption,
  .arch-photos figcaption,.figure figcaption{
    white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
    font-size:9px!important;letter-spacing:.3px;line-height:1.3;margin-top:7px;}
}

/* ---------- BOTTONI ---------- */
/* btn-ow resta bianco: compare solo sopra le foto dell'hero */
.btn-red::before{background:#131516;}

/* ---------- CARD / VARIE ---------- */
.day{background:linear-gradient(180deg,#f7f5f0,#efece5);border:1px solid var(--border);}
.slot::before{background:#cdc7bb;box-shadow:0 0 0 3px #f7f5f0;}
.slot:hover::before{box-shadow:0 0 0 3px #f7f5f0,0 0 12px 3px rgba(226,5,16,.5);}
.slot .a{color:#2a261f;}
.slot:hover .a{color:var(--white);}
.ed-head{color:var(--white);}
.benefits li{color:#484747;}
.pkg,.mcard{background:#faf8f4;}
.disc:hover{background:#f4f1ea;}
.disc-img.disc-contain{background:#f4f1ea;}
.disc-img.disc-contain img{filter:none;}
.footer{background:#fff;border-top:1px solid var(--border);}
.footer-copy{color:#9a948a;}
/* link discreto al gioco nascosto */
.footer-egg{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:currentColor;
  opacity:.7;transition:opacity .2s,color .2s;}
.footer-egg:hover{opacity:1;color:var(--red);}

/* ---------- FORM CONTATTO (campi chiari) ---------- */
.contact-form input,.contact-form textarea,.contact-form select{
  font-family:var(--f-body);background:#faf8f4;color:var(--white);border:1px solid var(--border);}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#a49c8c;}
.contact-form select option{color:var(--white);background:#faf8f4;}

/* ---------- PRELOADER ---------- */
.preloader{background:var(--bg);}
.preloader .pre-bar{background:rgba(19,21,22,.12);}