:root{--fondo:#faf7f2;--carta:#fff;--testo:#1f2933;--tenue:#5b6673;--blu:#1d4e89;--accento:#c8553d;--linea:#e6e0d6}
@media (prefers-color-scheme:dark){:root{--fondo:#14181d;--carta:#1c2128;--testo:#e8e6e3;--tenue:#a3abb5;--blu:#8fb8ea;--accento:#e98a6f;--linea:#2c333c}}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--testo);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--blu)}
.cont{max-width:760px;margin:0 auto;padding:0 16px}
header{border-bottom:1px solid var(--linea);background:var(--carta)}
header .cont{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.marchio{font-weight:700;font-size:20px;text-decoration:none;color:var(--testo);letter-spacing:.2px}
.marchio span{color:var(--accento)}
nav a{margin-left:14px;text-decoration:none;color:var(--tenue);font-size:15px}
nav a:hover{color:var(--blu)}
.lingue{font-size:14px;color:var(--tenue)}
.lingue a,.lingue strong{margin:0 4px}
main{padding:32px 0 48px}
h1{font-size:28px;line-height:1.25;margin:0 0 12px}
h2{font-size:20px;margin:28px 0 8px}
.motto{font-size:20px;color:var(--tenue);margin:0 0 32px}
.libro{display:flex;gap:24px;background:var(--carta);border:1px solid var(--linea);border-radius:14px;padding:20px}
.libro img{width:150px;height:auto;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.18);flex:none}
.libro h3{margin:0 0 6px;font-size:21px}
.libro p{margin:0 0 12px}
.etichetta{display:inline-block;background:var(--fondo);border:1px solid var(--linea);border-radius:99px;padding:3px 12px;font-size:14px;color:var(--tenue)}
.bottone{display:inline-block;background:var(--blu);color:#fff;text-decoration:none;border-radius:10px;padding:10px 16px;font-weight:600;margin-top:6px}
@media (prefers-color-scheme:dark){.bottone{color:#14181d}}
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:20px}
.griglia a{display:block;background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:16px;text-align:center;text-decoration:none;color:var(--testo);font-weight:600}
.griglia a small{display:block;color:var(--tenue);font-weight:400}
.traccia{background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:16px 18px;margin:14px 0}
.traccia h2{margin:0 0 2px;font-size:19px}
.traccia p{margin:0 0 10px;color:var(--tenue);font-size:15px}
.traccia audio{width:100%}
.altre{color:var(--tenue);font-size:14px;font-weight:400}
.arrivo{color:var(--accento);font-weight:600}
.piccolo{font-size:14px;color:var(--tenue)}
footer{border-top:1px solid var(--linea);padding:20px 0 32px;font-size:14px;color:var(--tenue)}
footer a{color:var(--tenue);margin-right:14px}
@media (max-width:560px){.libro{flex-direction:column}.libro img{width:130px}nav a{margin-left:0;margin-right:14px}}