:root{
  --ink:#14130f; --ink-2:#3f3d36; --soft:#6b6860; --line:#ded9cd;
  --bg:#faf7f1; --bg-2:#f2ede3; --dark:#14130f; --ivory:#f5f0e6; --brass:#9a7b3f;
  --w:38rem;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#efece4; --ink-2:#cfcbc1; --soft:#98948a; --line:#2f2d28;
        --bg:#121110; --bg-2:#1a1917; --dark:#0b0a09; --brass:#c9a45f;}
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);
  font:400 17px/1.68 "Iowan Old Style",Georgia,"Times New Roman",serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px}

.wrap{max-width:var(--w);margin:0 auto;padding:0 1.35rem}
.sec{padding:3.4rem 0}
.sec+.sec{border-top:1px solid var(--line)}

.kicker{font:500 11.5px/1.4 system-ui,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft);margin-bottom:1.1rem}
h1{font-size:clamp(1.72rem,7vw,2.4rem);line-height:1.16;font-weight:400;letter-spacing:-.01em}
h2{font-size:clamp(1.32rem,5vw,1.7rem);line-height:1.25;font-weight:400;margin-bottom:1rem}
p{margin-bottom:1.05rem}
p:last-child{margin-bottom:0}
strong{font-weight:600}

/* apertura */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;background:var(--dark);overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:62% 20%}
.hero-shade{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,9,8,.92) 0%,rgba(10,9,8,.62) 34%,rgba(10,9,8,.12) 68%,rgba(10,9,8,.3) 100%)}
.hero-in{position:relative;padding:0 1.35rem 2.6rem;max-width:var(--w);margin:0 auto;width:100%}
.hero .kicker{color:rgba(245,240,230,.72)}
.hero h1{color:var(--ivory)}
.hero h1 span{display:block}
.hero-sub{color:rgba(245,240,230,.86);margin:1rem 0 1.6rem;font-size:1.06rem}
.hero-note{font:400 13.5px/1.5 system-ui,sans-serif;color:rgba(245,240,230,.66);margin-top:.75rem}
.lang{position:absolute;top:0;right:0;padding:1rem 1.35rem;z-index:2}
.lang a{font:500 12px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(245,240,230,.82);text-decoration:none;display:inline-block;padding:16px 4px}

/* pulsante */
.cta{display:inline-block;background:var(--ivory);color:#14130f;
  font:500 16px/1 system-ui,sans-serif;text-decoration:none;
  padding:1.05rem 1.7rem;border-radius:2px}
.sec .cta{background:var(--ink);color:var(--bg)}
.cta-row{margin-top:1.8rem}

/* fascia scura */
.band{background:var(--dark);color:var(--ivory);padding:3.4rem 0}
.band .kicker{color:rgba(245,240,230,.6)}
.band a{color:var(--brass)}
.quote{font-size:clamp(1.3rem,5.4vw,1.66rem);line-height:1.3;margin-bottom:1rem}
.attrib{font:400 13.5px/1.55 system-ui,sans-serif;color:rgba(245,240,230,.68);margin-bottom:1.8rem}
.band p{color:rgba(245,240,230,.9)}
.rule-brass{width:44px;height:2px;background:var(--brass);border:0;margin:0 0 1.4rem}

/* immagini */
figure{margin:1.8rem 0}
figcaption{font:400 13px/1.5 system-ui,sans-serif;color:var(--soft);margin-top:.6rem}
.ph{background:var(--bg-2);border:1px dashed var(--line);border-radius:2px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1.6rem 1.2rem;min-height:0}
.ph span{font:400 12.5px/1.55 system-ui,sans-serif;color:var(--soft);max-width:24rem}
.ph.r45{aspect-ratio:3/2}
.ph.r11{aspect-ratio:1/1;width:70%}
.band .ph{background:rgba(245,240,230,.06);border-color:rgba(245,240,230,.22)}
.band .ph span{color:rgba(245,240,230,.6)}

/* elenchi e blocchi */
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:2.1rem;margin-bottom:1.1rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:.08em;
  font:500 13px/1 system-ui,sans-serif;color:var(--brass);
  border:1px solid var(--brass);border-radius:50%;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center}
.lbl{font:500 11.5px/1.4 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);margin-bottom:.35rem}
.blk{margin-bottom:1.5rem}
.pull{font-size:1.12rem;border-left:2px solid var(--brass);padding-left:1rem;margin:1.5rem 0}
.colophon{font:400 12.5px/1.6 system-ui,sans-serif;color:var(--soft);
  border-top:1px solid var(--line);padding-top:.9rem;margin-top:2rem}
.src{font-size:.95rem;color:var(--ink-2)}

footer{background:var(--bg-2);padding:2.4rem 0 3rem;
  font:400 12.5px/1.7 system-ui,sans-serif;color:var(--soft)}
footer p{margin-bottom:.5rem}

@media (min-width:46rem){
  body{font-size:18px}
  .sec{padding:4.4rem 0}
  .hero-img{left:auto;right:0;width:46%;object-position:62% 22%}
  .hero-shade{background:
    linear-gradient(to right, var(--dark) 54%, rgba(10,9,8,0) 78%),
    linear-gradient(to top, rgba(10,9,8,.5) 0%, rgba(10,9,8,0) 38%)}
  .hero-in{margin:0;max-width:none;width:56%;padding:0 2rem 4.6rem clamp(2rem,7vw,6.5rem)}
  .hero-in h1{max-width:30rem}
}