:root{
      --gold:#c9a96e;
      --gold-soft:#d9c194;
      --gold-dim:rgba(201,169,110,.38);
      --night:#06060a;
      --night-2:#0b0b14;
      --indigo:#232a4a;
      --indigo-soft:#3b4570;
      --paper:#faf7f1;
      --paper-2:#f3eee4;
      --stone:#8a8578;
      --stone-line:#ddd5c6;
      --ink:#1c1a16;
      --ink-soft:#4d4941;
      --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
      --sans:"DM Sans",system-ui,-apple-system,sans-serif;
      --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
      --measure:68ch;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{animation:none!important;transition:none!important}
    }
    body{
      font-family:var(--sans);
      font-size:1rem;
      line-height:1.65;
      color:var(--ink);
      background:var(--paper);
      -webkit-font-smoothing:antialiased;
    }
    :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
    a{color:inherit}
    .wrap{width:min(1120px,100% - 3rem);margin-inline:auto}

    /* ============ MASTHEAD — la testata di un vero quotidiano ============ */
    .site-header{
      background:var(--night);
      color:var(--paper);
      border-bottom:1px solid rgba(201,169,110,.22);
      position:relative;
      z-index:10;
    }
    .topline{
      width:min(1120px,100% - 3rem);
      margin-inline:auto;
      padding:1.6rem 0 1.15rem;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:1.05rem;
    }
    .wordmark{
      font-family:var(--serif);
      font-weight:500;
      font-size:clamp(2.1rem,5.2vw,3.4rem);
      letter-spacing:.34em;
      text-indent:.34em; /* compensa il tracking finale per centrare davvero */
      color:var(--gold-soft);
      text-decoration:none;
      line-height:1;
      text-transform:uppercase;
    }
    .wordmark::after{
      content:"";
      display:block;
      margin-top:.55rem;
      height:5px;
      border-top:1px solid var(--gold-dim);
      border-bottom:2px solid var(--gold);
    }
    .site-header nav{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      align-items:center;
      gap:.35rem 1.9rem;
    }
    .site-header nav a{
      font-family:var(--mono);
      font-size:.72rem;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:rgba(250,247,241,.78);
      text-decoration:none;
      padding:.45rem 0;
      border-bottom:1px solid transparent;
      transition:color .25s ease,border-color .25s ease;
    }
    .site-header nav a:hover{color:var(--gold-soft);border-bottom-color:var(--gold-dim)}
    .site-header nav .nav-cta{
      color:var(--night);
      background:var(--gold);
      padding:.55rem 1.1rem;
      border-radius:2px;
      border-bottom:none;
      font-weight:500;
      transition:background .25s ease;
    }
    .site-header nav .nav-cta:hover{background:var(--gold-soft);color:var(--night)}

    /* ============ HERO — la notte che diventa mattino ============ */
    .hero-band{
      position:relative;
      background:
        radial-gradient(1100px 520px at 50% 108%, rgba(201,169,110,.34), transparent 62%),
        radial-gradient(1400px 700px at 18% -10%, rgba(59,69,112,.5), transparent 58%),
        radial-gradient(900px 500px at 85% 6%, rgba(35,42,74,.42), transparent 55%),
        linear-gradient(180deg,var(--night) 0%,var(--night-2) 78%,#151019 100%);
      color:var(--paper);
      padding:clamp(4rem,9vh,7rem) 0 clamp(5.5rem,11vh,8.5rem);
      overflow:hidden;
    }
    /* il sole che sorge sotto la testata */
    .hero-band::before{
      content:"";
      position:absolute;
      left:50%;
      bottom:-190px;
      width:340px;
      height:340px;
      transform:translateX(-50%);
      border-radius:50%;
      background:radial-gradient(circle,rgba(217,193,148,.85) 0%,rgba(201,169,110,.34) 42%,transparent 70%);
      pointer-events:none;
    }
    /* la linea dell'orizzonte */
    .hero-band::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:0;
      height:2px;
      background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold-soft) 50%,var(--gold) 78%,transparent);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:clamp(2.5rem,6vw,5.5rem);
      align-items:start;
    }
    .eyebrow{
      font-family:var(--mono);
      font-size:.7rem;
      letter-spacing:.22em;
      text-transform:uppercase;
      color:var(--gold);
      margin-bottom:1.3rem;
    }
    .band .eyebrow{color:#8a6f3c}
    h1{
      font-family:var(--serif);
      font-weight:500;
      font-size:clamp(2.4rem,5.4vw,4.2rem);
      line-height:1.08;
      letter-spacing:.005em;
      color:var(--paper);
      max-width:15ch;
    }
    .hero-lead{
      margin-top:1.6rem;
      font-size:1.12rem;
      line-height:1.75;
      color:rgba(250,247,241,.82);
      max-width:52ch;
    }
    .promise-list{
      list-style:none;
      margin-top:2rem;
      display:flex;
      flex-direction:column;
      gap:.65rem;
    }
    .promise-list li{
      font-family:var(--mono);
      font-size:.8rem;
      letter-spacing:.06em;
      color:rgba(250,247,241,.72);
      padding-left:1.6rem;
      position:relative;
    }
    .promise-list li::before{
      content:"";
      position:absolute;
      left:0;top:.52em;
      width:.85rem;height:1px;
      background:var(--gold);
    }
    .hero-actions{
      margin-top:2.4rem;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:1.1rem 1.8rem;
    }
    .button{
      display:inline-block;
      font-family:var(--mono);
      font-size:.78rem;
      letter-spacing:.12em;
      text-transform:uppercase;
      text-decoration:none;
      background:var(--gold);
      color:var(--night);
      padding:.95rem 1.9rem;
      border-radius:2px;
      font-weight:500;
      transition:background .25s ease,transform .25s ease;
    }
    .button:hover{background:var(--gold-soft)}
    .band .button{background:var(--night);color:var(--gold-soft)}
    .band .button:hover{background:#14131c;color:var(--paper)}
    .text-link{
      font-size:.95rem;
      color:var(--gold-soft);
      text-decoration:none;
      border-bottom:1px solid var(--gold-dim);
      padding-bottom:2px;
      transition:border-color .25s ease,color .25s ease;
    }
    .text-link:hover{color:var(--paper);border-bottom-color:var(--gold-soft)}
    .band .text-link{color:#6d5426;border-bottom-color:rgba(138,111,60,.45)}
    .band .text-link:hover{color:var(--night);border-bottom-color:var(--night)}
    .hero-note{
      margin-top:1.8rem;
      font-family:var(--mono);
      font-size:.7rem;
      letter-spacing:.05em;
      color:rgba(250,247,241,.5);
      max-width:46ch;
    }

    /* ============ PROOF CARD — la prima pagina, nella notte ============ */
    .front-page-proof{
      background:rgba(250,247,241,.035);
      border:1px solid rgba(201,169,110,.3);
      border-radius:3px;
      padding:1.8rem 1.8rem 1.6rem;
      backdrop-filter:blur(2px);
    }
    .edition-bar{
      display:flex;
      justify-content:space-between;
      align-items:baseline;
      gap:1rem;
      font-family:var(--mono);
      font-size:.66rem;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:var(--gold-soft);
      padding-bottom:.9rem;
      margin-bottom:1.2rem;
      border-bottom:1px solid rgba(201,169,110,.28);
    }
    .edition-bar span:last-child{color:rgba(250,247,241,.6)}
    .story-rubric{
      display:inline-block;
      font-family:var(--mono);
      font-size:.64rem;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:var(--night);
      background:var(--gold);
      padding:.3rem .7rem;
      border-radius:2px;
      margin-bottom:1rem;
    }
    .front-page-proof h2{
      font-family:var(--serif);
      font-weight:500;
      font-size:clamp(1.45rem,2.4vw,1.85rem);
      line-height:1.22;
      color:var(--paper);
    }
    .brief-stack{margin-top:1.4rem;display:flex;flex-direction:column}
    .brief-row{
      padding:.95rem 0;
      border-top:1px solid rgba(250,247,241,.14);
    }
    .brief-label{
      font-family:var(--mono);
      font-size:.64rem;
      letter-spacing:.18em;
      text-transform:uppercase;
      margin-bottom:.35rem;
      color:var(--gold-soft);
    }
    .brief-row.why .brief-label{color:#9aa4cf}
    .brief-row.next .brief-label{color:rgba(250,247,241,.55)}
    .brief-row p{font-size:.92rem;line-height:1.6;color:rgba(250,247,241,.85)}
    .brief-row p strong{color:var(--gold-soft);font-weight:600}
    .proof-source{
      margin-top:1.1rem;
      padding-top:.9rem;
      border-top:1px solid rgba(250,247,241,.14);
      font-family:var(--mono);
      font-size:.66rem;
      letter-spacing:.04em;
      color:rgba(250,247,241,.5);
    }

    /* ============ CARTA CHIARA — oltre la linea dell'orizzonte ============ */
    .band{
      background:var(--paper);
      padding:clamp(4.5rem,10vh,7.5rem) 0;
    }
    .band.alt{background:var(--paper-2)}
    .section-intro{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:1.5rem 4rem;
      align-items:end;
      margin-bottom:clamp(2.8rem,6vh,4.5rem);
    }
    .section-head{
      font-family:var(--serif);
      font-weight:500;
      font-size:clamp(2rem,4.2vw,3.1rem);
      line-height:1.12;
      color:var(--ink);
      max-width:18ch;
    }
    .section-copy{
      font-size:1.02rem;
      line-height:1.75;
      color:var(--ink-soft);
      max-width:var(--measure);
    }
    .format-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:2.5rem;
    }
    .format-card{
      padding-top:1.6rem;
      border-top:2px solid var(--ink);
    }
    .format-card:nth-child(2){border-top-color:var(--gold)}
    .format-card:nth-child(3){border-top-color:var(--stone)}
    .format-number{
      font-family:var(--mono);
      font-size:.72rem;
      letter-spacing:.2em;
      color:#8a6f3c;
      margin-bottom:.9rem;
    }
    .format-card h3,.step-card h3,.lens-card h3{
      font-family:var(--serif);
      font-weight:600;
      font-size:1.42rem;
      line-height:1.2;
      color:var(--ink);
      margin-bottom:.55rem;
    }
    .format-card p:not(.format-number),.step-card p,.lens-card p:not(.source){
      font-size:.94rem;
      line-height:1.7;
      color:var(--ink-soft);
    }
    .steps-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:2.5rem;
      margin-bottom:2.8rem;
    }
    .step-card{
      padding:1.5rem 0 0;
      border-top:1px solid var(--stone-line);
    }
    .lens-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:2.5rem 3.5rem;
    }
    .lens-card{
      padding:1.6rem 0 0;
      border-top:1px solid var(--stone-line);
    }
    .lens-card .source{
      font-family:var(--mono);
      font-size:.66rem;
      letter-spacing:.2em;
      color:#8a6f3c;
      margin-bottom:.8rem;
    }

    /* ============ ASSURANCE — hairline, niente card ============ */
    .assurance{
      background:var(--paper);
      border-top:1px solid var(--stone-line);
      border-bottom:1px solid var(--stone-line);
      padding:2.6rem 0;
    }
    .assurance-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:2rem 3.5rem;
    }
    .assurance-item{
      font-size:.88rem;
      line-height:1.65;
      color:var(--ink-soft);
      padding-left:1.2rem;
      border-left:1px solid var(--gold);
    }
    .assurance-item strong{
      display:block;
      font-family:var(--mono);
      font-size:.68rem;
      font-weight:500;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:var(--ink);
      margin-bottom:.4rem;
    }

    /* ============ FINAL BAND — il cerchio si chiude nella notte ============ */
    .final-band{
      background:
        radial-gradient(900px 420px at 50% -20%, rgba(201,169,110,.22), transparent 60%),
        radial-gradient(1200px 600px at 80% 110%, rgba(59,69,112,.4), transparent 55%),
        var(--night);
      color:var(--paper);
      text-align:left;
      position:relative;
    }
    .final-band::before{
      content:"";
      position:absolute;
      top:0;left:0;right:0;
      height:2px;
      background:linear-gradient(90deg,transparent,var(--gold) 25%,var(--gold-soft) 50%,var(--gold) 75%,transparent);
    }
    .final-band .section-head{color:var(--paper)}
    .final-band .section-copy{color:rgba(250,247,241,.75);margin:1.6rem 0 2.4rem}
    .final-band .eyebrow{color:var(--gold)}

    /* ============ FOOTER ============ */
    .site-footer{
      background:var(--night);
      color:rgba(250,247,241,.6);
      border-top:1px solid rgba(201,169,110,.22);
      padding:2.4rem 1.5rem 2.8rem;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:1.3rem;
      font-size:.82rem;
      text-align:center;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:.4rem 1.6rem;
    }
    .site-footer a{
      color:rgba(250,247,241,.72);
      text-decoration:none;
      border-bottom:1px solid transparent;
      transition:color .25s ease,border-color .25s ease;
    }
    .site-footer a:hover{color:var(--gold-soft);border-bottom-color:var(--gold-dim)}
    .footer-links a{
      font-family:var(--mono);
      font-size:.68rem;
      letter-spacing:.14em;
      text-transform:uppercase;
    }

    /* ============ RESPONSIVE ============ */
    @media (max-width:920px){
      .hero-grid{grid-template-columns:1fr}
      .section-intro{grid-template-columns:1fr;align-items:start}
      .format-grid,.steps-grid{grid-template-columns:1fr;gap:1.8rem}
      .lens-grid{grid-template-columns:1fr;gap:1.8rem}
      .assurance-grid{grid-template-columns:1fr;gap:1.4rem}
      h1{max-width:20ch}
      .hero-band::before{width:260px;height:260px;bottom:-150px}
    }
    @media (max-width:520px){
      .site-header nav{gap:.3rem 1.1rem}
      .front-page-proof{padding:1.3rem 1.15rem 1.2rem}
      .hero-actions{flex-direction:column;align-items:flex-start}
    }