/* Stili sezione News — agenzia.tuttoitalia.ch (brand Tuttoitalia, tema chiaro/scuro) */
:root{
  color-scheme: light dark;
  --bg:#F6F5F1; --surface:#FFFFFF; --surface-2:#F1EFE8;
  --ink:#17140F; --muted:#5C584F; --faint:#6E6960;
  --line:#E4E1D8; --line-strong:#D3CFC3;
  --accent:#0F6B4C; --accent-strong:#0B573E; --on-accent:#FFFFFF; --accent-tint:rgba(15,107,76,0.08);
  --spark:#CF3A2C;
  --font-head:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --font-body:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --font-serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --wrap:1160px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#121110; --surface:#1A1917; --surface-2:#201E1B;
  --ink:#F3F1EC; --muted:#ABA69B; --faint:#969084;
  --line:#2C2A25; --line-strong:#3A372F;
  --accent:#37B588; --accent-strong:#54C79C; --on-accent:#101413; --accent-tint:rgba(55,181,136,0.12);
  --spark:#F0675A;
}}
:root[data-theme="dark"]{
  --bg:#121110; --surface:#1A1917; --surface-2:#201E1B;
  --ink:#F3F1EC; --muted:#ABA69B; --faint:#969084;
  --line:#2C2A25; --line-strong:#3A372F;
  --accent:#37B588; --accent-strong:#54C79C; --on-accent:#101413; --accent-tint:rgba(55,181,136,0.12);
  --spark:#F0675A;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--font-head); font-weight:800; letter-spacing:-0.03em; line-height:1.05; text-wrap:balance}
p{margin:0}

/* header / footer */
header.site{border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 88%, transparent); position:sticky; top:0; z-index:10; backdrop-filter:blur(8px)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:20px; height:64px}
.brand{display:inline-flex; align-items:baseline; gap:2px; text-decoration:none; font-family:var(--font-head); font-weight:800; font-size:20px; letter-spacing:-0.04em; color:var(--ink)}
.brand .dot{width:7px; height:7px; border-radius:50%; background:var(--spark); display:inline-block; transform:translateY(-1px)}
.hnav{display:flex; align-items:center; gap:20px; font-weight:600; font-size:15px}
.hnav a{text-decoration:none; color:var(--muted)}
.hnav a:hover{color:var(--ink)}
.hnav a.ghost{border:1px solid var(--line-strong); border-radius:6px; padding:7px 12px; color:var(--ink)}
.langs{display:inline-flex; gap:2px; margin-left:4px}
.langs .lang{font-size:12.5px; font-weight:700; padding:5px 8px; border-radius:5px; text-decoration:none; color:var(--faint)}
.langs .lang.on{background:var(--accent-tint); color:var(--accent)}
.langs .lang:hover{color:var(--ink)}

footer.site{border-top:1px solid var(--line); margin-top:70px; background:var(--surface-2)}
.foot{padding:40px 28px; display:flex; flex-direction:column; gap:8px}
.foot p{color:var(--muted); font-size:14px}
.foot .small{color:var(--faint); font-size:13px}
.foot a{color:var(--accent); text-decoration:none}

/* indice */
.index{padding:56px 0 10px}
.idx-head{max-width:60ch; margin-bottom:40px}
.eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--accent); margin-bottom:14px}
.idx-head h1{font-size:clamp(2rem,5vw,3.2rem)}
.idx-head .lead{margin-top:16px; color:var(--muted); font-size:1.15rem}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px}
.card{display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:24px; transition:border-color .15s, transform .15s}
.card:hover{border-color:var(--accent); transform:translateY(-2px)}
.card h2{font-size:1.3rem; line-height:1.15}
.card p{color:var(--muted); font-size:15px; line-height:1.5}
.card .rd{color:var(--accent); font-weight:700; font-size:14px; margin-top:auto}

/* meta / tag */
.meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--faint)}
.meta time{font-weight:600}
.tag{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); background:var(--accent-tint); padding:3px 8px; border-radius:20px}

/* articolo */
.article{padding:40px 0 0; max-width:760px}
.crumb{font-size:13px; color:var(--faint); margin-bottom:22px}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--ink)}
article h1{font-size:clamp(1.9rem,4.6vw,2.9rem); margin:14px 0 0}
.article .meta{margin-bottom:0}
.body{margin-top:26px; font-size:1.09rem; line-height:1.72; color:var(--ink)}
.body p{margin:0 0 18px}
.body h2{font-size:1.4rem; margin:34px 0 12px; letter-spacing:-0.02em}
.body ul{margin:0 0 18px; padding-left:22px} .body li{margin-bottom:7px}
.body strong{font-weight:700}
.body a{color:var(--accent)}
.body .lead-p{font-family:var(--font-serif); font-style:italic; font-size:1.2rem; color:var(--muted)}

/* CTA */
.cta{margin-top:44px; background:var(--accent-tint); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:14px; padding:26px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.cta-t{font-family:var(--font-head); font-weight:800; font-size:1.25rem; letter-spacing:-0.02em}
.cta-s{color:var(--muted); font-size:15px; margin-top:6px; max-width:52ch}
.btn{display:inline-flex; align-items:center; background:var(--accent); color:var(--on-accent); text-decoration:none; font-weight:700; padding:12px 20px; border-radius:8px; white-space:nowrap}
.btn:hover{background:var(--accent-strong)}
.more{margin-top:30px}
.more.top{margin:0 0 22px}
.more a{color:var(--accent); text-decoration:none; font-weight:700}
/* navigazione articolo precedente/prossimo */
.art-nav{display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-top:44px; border-top:1px solid var(--line); padding-top:24px}
.art-nav a{display:flex; flex-direction:column; gap:5px; max-width:47%; text-decoration:none; color:var(--ink)}
.art-nav .an-next{text-align:right; align-items:flex-end; margin-left:auto}
.art-nav .an-dir{font-size:13px; font-weight:700; color:var(--accent)}
.art-nav .an-t{font-weight:700; font-size:15px; line-height:1.3}
.art-nav a:hover .an-t{color:var(--accent)}
.art-nav .an-empty{flex:0 0 auto}
@media(max-width:560px){ .art-nav{flex-direction:column; gap:22px} .art-nav a{max-width:100%} .art-nav .an-next{text-align:left; align-items:flex-start; margin-left:0} }

@media(max-width:640px){ .bar{height:56px} .hnav{gap:12px} .hnav a.ghost{display:none} .cta{flex-direction:column; align-items:flex-start} }