:root{
  --carta:#f4efe4; --carta2:#ebe4d4; --noce:#3b2a1e; --noce2:#6b5747; --verde:#1f4d3a; --verde2:#2d6b51;
  --ottone:#b8955a; --ottone2:#8f7140; --riga:#d9cfbb; --ombra:rgba(59,42,30,.14);
}
@media (prefers-color-scheme:dark){
  :root{ --carta:#1d1915; --carta2:#272119; --noce:#efe6d6; --noce2:#c2b4a0; --verde:#8fc9ad; --verde2:#a9dcc3;
         --ottone:#cfae72; --ottone2:#e2c78f; --riga:#3d342b; --ombra:rgba(0,0,0,.45); }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--carta); color:var(--noce); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem; line-height:1.65; font-feature-settings:"kern","liga"}
a{color:var(--verde); text-decoration-thickness:1px; text-underline-offset:.15em}
a:hover{color:var(--verde2)}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,.serif{font-family:Fraunces,Georgia,"Times New Roman",serif; font-weight:500; line-height:1.15; letter-spacing:-.01em; margin:0 0 .5em}
h1{font-size:clamp(2rem,4.5vw,3.1rem); font-variation-settings:"opsz" 144,"SOFT" 40}
h2{font-size:clamp(1.5rem,3vw,2.05rem); margin-top:2.2em}
h3{font-size:1.3rem; margin-top:1.6em}
p{margin:0 0 1.1em}
.wrap{width:min(100% - 2rem, 74rem); margin-inline:auto}
.col{width:min(100% - 2rem, 44rem); margin-inline:auto}

/* testata */
.top{border-bottom:1px solid var(--riga); background:var(--carta); position:sticky; top:0; z-index:5}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.25rem}
.marchio{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--noce)}
.marchio img{width:40px; height:40px}
.marchio b{font-family:Fraunces,Georgia,serif; font-weight:500; font-size:1.25rem; letter-spacing:.01em}
nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1.35rem; flex-wrap:wrap}
nav a{text-decoration:none; font-size:.92rem; letter-spacing:.03em; color:var(--noce2); padding:.35rem 0; border-bottom:2px solid transparent}
nav a:hover{color:var(--verde)}
nav a[aria-current]{color:var(--verde); border-bottom-color:var(--ottone)}
.menu-btn{display:none}
@media (max-width:760px){
  .menu-btn{display:inline-flex; align-items:center; gap:.5rem; background:none; border:1px solid var(--riga); border-radius:4px; color:var(--noce); font:inherit; font-size:.9rem; padding:.4rem .7rem}
  nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--carta); border-bottom:1px solid var(--riga); box-shadow:0 12px 24px var(--ombra)}
  nav.aperto{display:block}
  nav ul{flex-direction:column; gap:0; padding:.5rem 1rem 1rem}
  nav a{display:block; padding:.7rem 0; border-bottom:1px solid var(--riga); font-size:1rem}
  nav a[aria-current]{border-bottom-color:var(--ottone)}
}

/* filetto in ottone */
.filetto{height:3px; background:linear-gradient(90deg,var(--ottone),var(--ottone2) 60%,transparent)}
.occhiello{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ottone2); margin:0 0 .8em}

/* home */
.hero{padding:3.5rem 0 2.5rem}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:3rem; align-items:center}
.cornice{position:relative; padding:10px; background:var(--carta2); border:1px solid var(--riga); box-shadow:0 20px 40px -20px var(--ombra)}
.cornice::after{content:""; position:absolute; inset:4px; border:1px solid var(--ottone); pointer-events:none; opacity:.7}
.cornice img{width:100%; filter:sepia(.18) contrast(1.02)}
.hero h1{margin-bottom:.25em}
.motto{font-family:Fraunces,Georgia,serif; font-style:italic; font-size:1.25rem; color:var(--verde); margin:0 0 .4em}
.ruoli{font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; color:var(--noce2); margin:0 0 1.6em}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr; gap:2rem} .hero{padding-top:2rem} }

.porte{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap:1rem; margin:2.5rem 0 3.5rem}
.porta{display:block; text-decoration:none; color:var(--noce); background:var(--carta2); border:1px solid var(--riga); border-top:3px solid var(--ottone); padding:1.25rem 1.3rem 1.4rem; transition:transform .15s ease, box-shadow .15s ease}
.porta:hover{transform:translateY(-2px); box-shadow:0 16px 30px -18px var(--ombra)}
.porta b{display:block; font-family:Fraunces,Georgia,serif; font-weight:500; font-size:1.35rem; margin-bottom:.3em}
.porta span{color:var(--noce2); font-size:.95rem}
.porta small{display:block; margin-top:.9em; color:var(--verde); font-size:.85rem; letter-spacing:.04em}

/* pagine di testo */
.pagina{padding:3rem 0 4rem}
.pagina header{margin-bottom:2rem}
.pagina header p.sotto{color:var(--noce2); font-size:1.1rem; max-width:40rem}
.testo p, .testo li{max-width:70ch}
.testo figure{margin:1.5rem 0}
.testo figure.side{float:right; width:min(42%,300px); margin:.3rem 0 1rem 1.5rem}
.testo figcaption{font-size:.82rem; color:var(--noce2); margin-top:.4rem; font-style:italic}
.testo img{border:1px solid var(--riga); background:#fff}
.testo h3{color:var(--verde)}
.testo blockquote{margin:1.5rem 0; padding:.2rem 0 .2rem 1.2rem; border-left:3px solid var(--ottone); font-family:Fraunces,Georgia,serif; font-size:1.15rem}
@media (max-width:560px){ .testo figure.side{float:none; width:100%; margin:1rem 0} }
.video{position:relative; aspect-ratio:16/9; margin:1.5rem 0; background:#000; max-width:70ch}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* capitoli della bio */
.capitolo{display:grid; grid-template-columns:7rem minmax(0,1fr); gap:1.5rem; margin-top:2.2rem}
.capitolo .anno{font-family:Fraunces,Georgia,serif; color:var(--ottone2); font-size:1.15rem; padding-top:.2rem; border-top:1px solid var(--riga)}
@media (max-width:560px){ .capitolo{grid-template-columns:1fr; gap:.4rem} .capitolo .anno{border-top:0; border-bottom:1px solid var(--riga); padding-bottom:.3rem} }

/* libri */
.libro{display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:2rem; padding:2.2rem 0; border-top:1px solid var(--riga)}
.libro:first-of-type{border-top:0}
.libro img{box-shadow:0 18px 30px -16px var(--ombra); border:1px solid var(--riga)}
.libro h2{margin-top:0; font-size:1.7rem}
.libro .tipo{color:var(--ottone2); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.6em}
.bottoni{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
.btn{display:inline-block; text-decoration:none; font-size:.9rem; letter-spacing:.03em; padding:.55rem 1rem; border:1px solid var(--verde); color:var(--verde); border-radius:3px}
.btn.pieno{background:var(--verde); color:var(--carta)}
.btn:hover{background:var(--verde2); color:var(--carta); border-color:var(--verde2)}
@media (max-width:620px){ .libro{grid-template-columns:1fr} .libro img{max-width:200px} }
.nota{font-size:.85rem; color:var(--noce2); border-top:1px solid var(--riga); padding-top:1.2rem; margin-top:2.5rem; max-width:70ch}

/* elenchi di articoli e blog */
.elenco{list-style:none; margin:0; padding:0}
.elenco li{padding:1.1rem 0; border-bottom:1px solid var(--riga); display:grid; grid-template-columns:9.5rem minmax(0,1fr); gap:1rem; align-items:baseline}
.elenco time, .elenco .fonte{color:var(--noce2); font-size:.85rem; font-variant-numeric:tabular-nums}
.elenco a{font-family:Fraunces,Georgia,serif; font-size:1.2rem; text-decoration:none}
.elenco a:hover{text-decoration:underline}
.elenco p{margin:.25em 0 0; color:var(--noce2); font-size:.95rem; max-width:60ch}
.elenco .tag{font-size:.8rem; color:var(--ottone2); margin-left:.5em}
@media (max-width:560px){ .elenco li{grid-template-columns:1fr; gap:.2rem} }
.anno-blocco h2{font-size:1.2rem; color:var(--ottone2); letter-spacing:.1em; margin:2.5rem 0 .3rem; border-bottom:2px solid var(--ottone); display:inline-block; padding-bottom:.2rem}

/* singolo post */
.post header time{color:var(--noce2); font-size:.9rem; letter-spacing:.04em}
.post header h1{font-size:clamp(1.7rem,3.5vw,2.5rem)}
.post .testo img{max-width:min(100%,640px)}
.prossimi{display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--riga); font-size:.95rem}
.prossimi a{text-decoration:none; max-width:48%}
.prossimi small{display:block; color:var(--noce2); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase}
.prossimi .dx{text-align:right; margin-left:auto}

/* podcast e contatti */
.player{border:1px solid var(--riga); background:var(--carta2); padding:8px; margin:1.5rem 0; max-width:70ch}
.player iframe{width:100%; border:0; display:block}
.contatti{list-style:none; padding:0; margin:1.5rem 0; max-width:40rem}
.contatti li{display:grid; grid-template-columns:9rem minmax(0,1fr); gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--riga)}
.contatti li span{color:var(--noce2); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; padding-top:.2rem}
@media (max-width:480px){ .contatti li{grid-template-columns:1fr; gap:.2rem} }

/* piè di pagina */
footer{border-top:1px solid var(--riga); margin-top:2rem; padding:2.2rem 0 2.6rem; color:var(--noce2); font-size:.88rem}
footer .wrap{display:flex; flex-wrap:wrap; gap:1rem 2.5rem; align-items:center; justify-content:space-between}
footer a{color:var(--noce2)}
footer .monog{display:flex; align-items:center; gap:.6rem}
footer .monog img{width:28px; height:28px; opacity:.8}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }