@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#F1EFE7;
  --paper-raised:#E8E5D9;
  --ink:#1B1D22;
  --ink-dim:#5B5E68;
  --rule:#D6D2C4;
  --accent:#1E4FD8;
  --accent-ink:#F1EFE7;

  --c-cronaca:#B23A48;
  --c-geopolitica:#1E4FD8;
  --c-economia-finanza:#B8862B;
  --c-tecnologia:#1B8A8A;
  --c-fisica:#6B4FBB;
  --c-matematica:#2F6F4E;
  --c-games:#A6467A;
  --c-curiosita:#C2662E;
}

/* Il tema scuro si attiva SOLO con data-theme="dark" esplicito, mai in automatico dal sistema */
:root[data-theme="dark"]{
  --paper:#15171C;
  --paper-raised:#1D2027;
  --ink:#EDEBE3;
  --ink-dim:#9A9DA8;
  --rule:#33363F;
  --accent:#5C86FF;
  --accent-ink:#0E1116;
}

*{box-sizing:border-box;}
html{background:var(--paper);}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Serif 4", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}

/* Masthead — identico su tutte le pagine */
.masthead{
  border-bottom:2px solid var(--ink);
  padding:1.6rem 1.5rem 0;
}
.masthead.masthead--home{ padding:2.2rem 1.5rem 1.4rem; }
.masthead-inner{
  max-width:1080px;
  margin:0 auto;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
}
.wordmark{
  font-family:"Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight:800;
  font-size:clamp(1.7rem, 3.4vw, 2.3rem);
  letter-spacing:.01em;
  line-height:.9;
  margin:0;
  text-transform:uppercase;
  text-decoration:none;
}
.wordmark--home{ font-size:clamp(2.6rem, 6vw, 4.2rem); }
.wordmark span{color:var(--accent);}
.masthead-meta{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.74rem;
  color:var(--ink-dim);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.masthead-meta--home{ font-size:.78rem; text-align:right; }
.masthead-tag{
  max-width:1080px;
  margin:.5rem auto 0;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.8rem;
  color:var(--ink-dim);
  letter-spacing:.03em;
  text-transform:uppercase;
}

nav.tabs{
  max-width:1080px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin-top:1.2rem;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}
nav.tabs a{
  padding:.65rem .9rem;
  text-decoration:none;
  color:var(--ink-dim);
  border-bottom:3px solid transparent;
  white-space:nowrap;
}
nav.tabs a:hover{ color:var(--ink); }
nav.tabs a.current{
  color:var(--ink);
  border-bottom-color:var(--cat-accent, var(--accent));
  font-weight:500;
}

footer{
  max-width:1080px;
  margin:0 auto;
  padding:1.4rem 1.5rem 2.6rem;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem;
  color:var(--ink-dim);
  text-transform:uppercase;
  letter-spacing:.05em;
  border-top:1px solid var(--rule);
}
footer.footer--narrow{ max-width:720px; }

/* Homepage */
main.home{max-width:1080px; margin:0 auto; padding:2.6rem 1.5rem 4rem;}
.section-label{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ink-dim);
  margin:0 0 1.1rem;
}
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
@media (max-width:820px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:540px){ .grid{grid-template-columns:1fr;} }
.tile{
  background:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:2.2rem;
  padding:1.6rem 1.5rem 1.4rem;
  text-decoration:none;
  color:var(--ink);
  position:relative;
  min-height:168px;
  transition:background .15s ease;
}
.tile:hover, .tile:focus-visible{ background:var(--paper-raised); outline:none; }
.tile:focus-visible{ box-shadow:inset 0 0 0 2px var(--tile-accent); }
.tile::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:var(--tile-accent);
}
.tile-num{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.75rem;
  color:var(--tile-accent);
  letter-spacing:.06em;
}
.tile-name{
  font-family:"Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight:700;
  font-size:1.7rem;
  text-transform:uppercase;
  line-height:1.02;
}
.tile-desc{
  font-family:"Source Serif 4", Georgia, serif;
  font-size:.92rem;
  color:var(--ink-dim);
  line-height:1.35;
}
.tile-foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--tile-accent);
}

/* Pagina categoria */
main.category{max-width:720px; margin:0 auto; padding:2.6rem 1.5rem 4rem;}

.rubric{
  display:flex;
  align-items:baseline;
  gap:.7rem;
  margin-bottom:.3rem;
}
.rubric-dot{
  width:.6rem; height:.6rem;
  display:inline-block;
}
.rubric h1{
  font-family:"Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight:800;
  text-transform:uppercase;
  font-size:2.4rem;
  margin:0;
  line-height:.95;
}
.rubric-desc{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.78rem;
  color:var(--ink-dim);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:.4rem 0 .3rem;
}
.rubric-updated{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem;
  color:var(--ink-dim);
  margin:0 0 1.6rem;
}

.geo-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin:0 0 2.4rem;
}
.geo-nav a{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink-dim);
  text-decoration:none;
  border:1px solid var(--rule);
  padding:.4rem .8rem;
}
.geo-nav a:hover{ color:var(--ink); border-color:var(--ink); }

.stories{ display:flex; flex-direction:column; }

.geo-section{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  border-top:2px solid var(--ink);
  padding-top:1.4rem;
  margin-top:2.6rem;
}
.geo-section:first-child{ border-top:none; padding-top:0; margin-top:0; }
.geo-section h2{
  font-family:"Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:1.15rem;
  margin:0;
}
.geo-section .geo-count{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-dim);
  white-space:nowrap;
}

.empty-state{
  padding:3rem 0;
  text-align:center;
  color:var(--ink-dim);
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.story{ padding:1.7rem 0; border-top:1px solid var(--rule); }
.story:last-child{ border-bottom:1px solid var(--rule); }
.story-kicker{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6em;
  margin-bottom:.65rem;
}
.story-kicker .src{ color:var(--cat-accent, var(--accent)); }
.story-kicker .sep{ color:var(--rule); }
.story-kicker .date{ color:var(--ink-dim); }
.story-kicker .area-tag{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-dim);
  border:1px solid var(--rule);
  padding:.15rem .5rem;
  line-height:1.4;
}
.story h2{
  font-family:"Source Serif 4", Georgia, serif;
  font-weight:700;
  font-size:1.32rem;
  line-height:1.28;
  margin:0 0 .55rem;
}
.story p{ margin:0 0 .9rem; font-size:1rem; line-height:1.55; color:var(--ink); }
.story-actions{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.story-link{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink-dim);
  text-decoration:none;
  border-bottom:1px dashed var(--ink-dim);
  padding-bottom:1px;
}
.story-link:hover{ color:var(--ink); border-color:var(--ink); }

.summary-toggle{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-weight:500;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--cat-accent, var(--accent));
  background:none;
  border:none;
  border-bottom:1px solid currentColor;
  padding:0 0 1px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4em;
  transition:opacity .15s ease;
}
.summary-toggle:hover{ opacity:.75; }
.summary-toggle .chev{ display:inline-block; transition:transform .15s ease; font-size:.68rem; }
.summary-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }

.summary-panel{
  margin-top:1.3rem;
  padding:1.2rem 1.3rem 1.3rem;
  background:var(--paper-raised);
  border-left:3px solid var(--cat-accent, var(--accent));
}
.summary-panel[hidden]{ display:none; }
.summary-caption{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-dim);
  margin:0 0 1.1rem;
}
.summary-level{ margin-bottom:1.1rem; }
.summary-level:last-child{ margin-bottom:0; }
.summary-level h3{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--cat-accent, var(--accent));
  margin:0 0 .55rem;
}
.summary-level ul{ margin:0; padding-left:1.1rem; }
.summary-level li{ font-size:.95rem; line-height:1.5; margin-bottom:.35rem; }
.summary-level li:last-child{ margin-bottom:0; }
.summary-block{ margin-bottom:.7rem; }
.summary-block:last-child{ margin-bottom:0; }
.summary-block .label{
  display:block;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-weight:500;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-dim);
  margin-bottom:.3rem;
}
.summary-block p{ font-size:.95rem; line-height:1.58; margin:0 0 .6rem; }
.summary-block p:last-child{ margin-bottom:0; }