/* =========================================================================
   Newscreen paper — edizione tipografica
   Nameplate: Bodoni Moda · Titoli: Libre Baskerville · Testo: Spectral
   Etichette e dati: Barlow Condensed · Tabelle: JetBrains Mono
   Regola generale: niente ombre, niente angoli arrotondati. Il ritmo della
   pagina lo danno i filetti, come su un giornale stampato.
   ========================================================================= */

:root {
  --paper:       #F4F2EB;
  --paper-2:     #EAE7DD;
  --surface:     #FBFAF5;
  --surface-hover:#F0EDE4;
  --ink:         #16130F;
  --ink-soft:    #3A352D;
  --muted:       #6E6759;
  --faint:       #918A7B;
  --rule:        #CBC5B6;
  --rule-strong: #16130F;
  --accent:      #A8271C;
  --on-accent:   #F4F2EB;

  /* inchiostri di sezione: toni da stampa, non colori da schermo */
  --cat-cinema:    #8C2F12;
  --cat-ai:        #3A3A78;
  --cat-genmedia:  #1D5F63;
  --cat-tutorials: #2E5C39;
  --cat-tech:      #8A2036;
  --cat-creators:  #7A4B12;
  --cat-models:    #46443E;
  --cat-craft:     #6B5420;

  --radius-sm: 0; --radius: 0; --radius-lg: 0;
  --shadow-sm: none; --shadow: none; --shadow-lg: none;

  --font-masthead: 'Bodoni Moda', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-head:     'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-body:     'Spectral', Georgia, 'Times New Roman', serif;
  --font-label:    'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:       var(--font-label);
  --font-display:  var(--font-head);
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --nav-h: 44px;
  --maxw: 1240px;
  --gap: 26px;
}

:root[data-theme="dark"] {
  --paper:       #121110;
  --paper-2:     #1A1917;
  --surface:     #171614;
  --surface-hover:#201E1B;
  --ink:         #EDE9E0;
  --ink-soft:    #C8C2B6;
  --muted:       #8D8879;
  --faint:       #6B665C;
  --rule:        #34312B;
  --rule-strong: #EDE9E0;
  --accent:      #E2685C;
  --on-accent:   #121110;

  --cat-cinema:    #E08B5F;
  --cat-ai:        #9A98E8;
  --cat-genmedia:  #62BFC2;
  --cat-tutorials: #76BC85;
  --cat-tech:      #E0798E;
  --cat-creators:  #D6A75A;
  --cat-models:    #A5A096;
  --cat-craft:     #C9AC63;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
}
.skip-link:focus { left: 0; }

.mono { font-family: var(--font-mono); font-size: .8em; letter-spacing: -.02em; }

[data-tr] { opacity: .97; }
.is-translated { animation: tr-in .22s ease; }
@keyframes tr-in { from { opacity: .35 } to { opacity: 1 } }

/* etichetta tipografica riusata ovunque */
.label-type,
.card-kicker, .kicker-cat, .kicker-type, .card-foot, .card-source,
.section-title, .page-eyebrow, .filter-label, .chip, .nav-link,
.column-kicker, .badge, .type-pill, .coverage-pill, .stat-label,
.aside-title, .sr-group-title, .btn, .lang-opt, .section-link {
  font-family: var(--font-label);
  letter-spacing: .06em;
}

/* ------------------------------------------------------------- testata */

.site-header {
  background: var(--paper);
  border-bottom: 3px double var(--rule-strong);
}

.masthead {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px 22px 10px;
  text-align: center;
  position: relative;
}

.masthead-rule {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  height: 4px; margin: 0 0 20px;
}

.brand {
  display: inline-flex; align-items: baseline; gap: .3em;
  justify-content: center;
}
.brand-mark { display: none; }
.brand-name {
  font-family: var(--font-masthead);
  font-weight: 800;
  font-size: clamp(32px, 7.6vw, 68px);
  line-height: .95;
  letter-spacing: -.015em;
  font-feature-settings: "onum" 0;
}
.brand-light { font-weight: 400; font-style: italic; }

.dateline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px; padding: 5px 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-label);
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.dateline-mid { color: var(--muted); font-style: normal; }
/* Edizione vecchia: deve saltare all'occhio, non nascondersi. */
.is-stale { color: var(--accent); font-weight: 600; }
.dateline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* strumenti (cerca / tema / lingua / menu) ancorati a destra della testata */
.header-actions {
  position: absolute; right: 18px; top: 14px;
  display: flex; align-items: center; gap: 4px;
}
.icon-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--ink-soft); border: 1px solid transparent;
}
.icon-btn:hover { background: var(--paper-2); border-color: var(--rule); }
.icon-btn svg { width: 17px; height: 17px; }
.ico-moon { display: none; }
:root[data-theme="dark"] .ico-sun { display: none; }
:root[data-theme="dark"] .ico-moon { display: block; }

.lang-switch {
  display: flex; align-items: center; gap: 3px;
  border: 1px solid var(--rule); padding: 2px 7px; margin-left: 4px;
}
.lang-opt {
  font-size: 12.5px; letter-spacing: .1em; color: var(--faint); padding: 1px 2px;
}
.lang-opt.is-active { color: var(--ink); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; }
.lang-sep { color: var(--rule); }
.menu-btn { display: none; }

/* --------------------------------------------------------- nav sezioni */

.nav-strip {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-strong);
  border-top: 1px solid var(--rule);
}
.main-nav {
  max-width: var(--maxw); margin: 0 auto;
  height: var(--nav-h);
  padding: 0 22px;
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.nav-link {
  flex: 0 0 auto;
  padding: 0 15px; height: 100%;
  display: inline-flex; align-items: center;
  font-size: 14.5px; font-weight: 500; text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.nav-link + .nav-link { border-left: 1px solid var(--rule); }
.nav-link:hover { color: var(--ink); background: var(--paper-2); }
.nav-link.is-active {
  color: var(--ink); font-weight: 600;
  border-bottom-color: var(--nav-accent, var(--ink));
}

/* sottosezioni */
.subnav { border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.subnav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 8px 22px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.chip {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 10px; border: 1px solid var(--rule);
  background: var(--surface); color: var(--ink-soft);
}
.chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip-n { font-family: var(--font-mono); font-size: 10px; opacity: .65; margin-left: 3px; }

/* ------------------------------------------------------------ impianto */

.site-main {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 22px 64px;
  outline: none;
}

.section { padding: 26px 0 0; }
.section + .section { border-top: 1px solid var(--rule); margin-top: 26px; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
  border-bottom: 2px solid var(--rule-strong); padding-bottom: 6px;
}
.section-head > div { min-width: 0; flex: 1 1 auto; }
.section-head > .section-link { flex: 0 0 auto; }
.section-title {
  margin: 0; font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.section-title .dot {
  width: 9px; height: 9px; background: var(--sec-accent, var(--ink));
  display: inline-block;
}
.section-sub {
  margin: 4px 0 0; font-family: var(--font-body); font-style: italic;
  font-size: 14px; color: var(--muted); letter-spacing: 0; text-transform: none;
}
.section-link {
  font-size: 13px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}
.section-link:hover { color: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------- schede */

.card {
  display: block; position: relative; min-width: 0;
  background: transparent;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--rule);
}
.card:hover .card-title { text-decoration: underline; text-underline-offset: 3px; }

.card-media {
  margin-bottom: 10px; position: relative;
  background: var(--paper-2);
  aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--rule);
}
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.4) contrast(1.04);
  transition: filter .25s ease;
}
.card:hover .card-media img { filter: grayscale(0) contrast(1); }
.card-media.is-empty { display: none; }

.play-badge {
  position: absolute; left: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-label); font-size: 11px;
  letter-spacing: .14em; padding: 3px 8px;
}
.play-badge svg { width: 8px; height: 8px; }

.card-body { display: block; }

.card-kicker {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  margin-bottom: 6px;
}
.kicker-cat { color: var(--cat-color, var(--accent)); font-weight: 600; }
.kicker-sep { color: var(--rule); }
.kicker-type { color: var(--muted); }
.row-index {
  font-family: var(--font-mono); font-size: 11px; color: var(--faint);
  border: 1px solid var(--rule); padding: 0 4px; margin-right: 2px;
}

.card-title {
  margin: 0; font-family: var(--font-head); font-weight: 700;
  font-size: 19px; line-height: 1.26; letter-spacing: -.005em;
  text-wrap: balance;
}
.card-summary {
  margin: 7px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-foot {
  margin-top: 9px; padding-top: 7px; border-top: 1px dotted var(--rule);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.card-source { color: var(--ink-soft); font-weight: 600; }
a.card-source:hover { color: var(--accent); }

/* apertura */
.top-stories {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0;
}
.top-side {
  border-left: 1px solid var(--rule); padding-left: var(--gap); margin-left: var(--gap);
}
.lead-card { padding-bottom: 22px; border-bottom: 0; }
.lead-card .card-title {
  font-size: clamp(28px, 4.2vw, 44px); line-height: 1.1; letter-spacing: -.018em;
}
.lead-card .card-summary {
  font-size: 17px; line-height: 1.6; -webkit-line-clamp: 5;
  color: var(--ink-soft); margin-top: 12px;
}
.lead-card .card-summary::first-letter {
  float: left; font-family: var(--font-head); font-weight: 700;
  font-size: 3.1em; line-height: .82; padding: .06em .09em 0 0; color: var(--ink);
}
.lead-card .card-media { aspect-ratio: 3 / 2; }
.lead-card.is-textonly .card-title { font-size: clamp(30px, 4.6vw, 50px); }

/* righe di elenco */
.row-item {
  display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 14px; align-items: start;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.row-item:hover .row-title { text-decoration: underline; text-underline-offset: 3px; }
.row-title {
  margin: 0; font-family: var(--font-head); font-weight: 700;
  font-size: 16px; line-height: 1.3;
}
.row-thumb {
  width: 92px; height: 62px; object-fit: cover; border: 1px solid var(--rule);
  filter: grayscale(.45) contrast(1.04);
}
.row-item:hover .row-thumb { filter: grayscale(0); }

/* i tre blocchi macro della home, incolonnati come su carta */
.macro-blocks {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
}
.macro-block { padding: 0 var(--gap); min-width: 0; }
.macro-block:first-child { padding-left: 0; }
.macro-block:last-child { padding-right: 0; }
.macro-block + .macro-block { border-left: 1px solid var(--rule); }
.macro-block .section-head { margin-bottom: 12px; }
.macro-block .card-title { font-size: 21px; }

/* griglie */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------------------- rubriche */

.columns-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.column-card {
  min-width: 0; padding: 0 var(--gap) 4px;
  border-left: 1px solid var(--rule);
}
.columns-grid > .column-card:first-child { border-left: 0; padding-left: 0; }
.columns-grid > .column-card:last-child { padding-right: 0; }
.column-kicker {
  font-size: 12px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--col-accent, var(--accent)); font-weight: 600; margin-bottom: 5px;
}
.column-title {
  margin: 0 0 7px; font-family: var(--font-head); font-weight: 700;
  font-size: 18px; line-height: 1.28;
}
.column-body { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink-soft); }
.column-body::first-letter {
  float: left; font-family: var(--font-head); font-weight: 700;
  font-size: 2.6em; line-height: .84; padding: .05em .08em 0 0; color: var(--ink);
}
.column-tags { margin-top: 9px; display: flex; gap: 5px; flex-wrap: wrap; }
.tag-mini {
  font-family: var(--font-label); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); border: 1px solid var(--rule);
  padding: 1px 6px;
}

/* --------------------------------------------------------- intestazioni */

.page-head {
  padding: 26px 0 14px; border-bottom: 3px double var(--rule-strong);
}
.page-eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: .2em;
  color: var(--pg-accent, var(--accent)); font-weight: 600;
}
.page-title {
  margin: 6px 0 0; font-family: var(--font-masthead); font-weight: 700;
  font-size: clamp(30px, 5vw, 48px); line-height: 1.05; letter-spacing: -.02em;
}
.page-desc {
  margin: 8px 0 0; font-style: italic; color: var(--muted); font-size: 16px;
  max-width: 62ch;
}

/* ----------------------------------------------------------- filtri */

.filter-bar {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.filter-group { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; }
.filter-label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--faint);
}
.select {
  font-family: var(--font-label); font-size: 15px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); padding: 5px 26px 5px 9px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6759' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 10px;
  /* un <select> prende la larghezza dell'opzione piu' lunga: senza questo
     limite i nomi delle fonti allargano tutta la pagina sul telefono. */
  max-width: 100%; width: 220px; text-overflow: ellipsis;
}
.result-count {
  margin-left: auto; font-family: var(--font-label); font-size: 13px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}

/* ------------------------------------------------------------ articolo */

.article-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0;
  padding-top: 26px;
}
.article-main { max-width: 72ch; padding-right: var(--gap); }
.article-meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-label); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
.article-title {
  margin: 10px 0 14px; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(28px, 4.4vw, 44px); line-height: 1.12; letter-spacing: -.015em;
  text-wrap: balance;
}
.article-hero {
  width: 100%; margin: 0 0 18px; border: 1px solid var(--rule);
  filter: grayscale(.2);
}
.article-summary {
  font-size: 18.5px; line-height: 1.68; color: var(--ink-soft);
  margin: 0 0 20px;
}
.article-summary::first-letter {
  float: left; font-family: var(--font-head); font-weight: 700;
  font-size: 3.2em; line-height: .82; padding: .06em .1em 0 0; color: var(--ink);
}
/* il riquadro e' in corsivo, il bottone dentro no */
.original-notice {
  border-left: 3px solid var(--rule-strong);
  background: var(--paper-2);
  padding: 11px 14px; margin: 0 0 18px;
  font-size: 14.5px; font-style: italic; color: var(--muted);
}
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-style: normal; white-space: nowrap;
  background: var(--ink); color: var(--paper);
  font-size: 15px; text-transform: uppercase; letter-spacing: .12em; font-weight: 500;
  padding: 11px 20px; border: 1px solid var(--ink);
  min-height: 44px;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.article-url {
  margin: 10px 0 0; font-family: var(--font-mono); font-size: 12px;
  color: var(--faint); word-break: break-all; user-select: all;
}

.aside-block {
  padding-left: var(--gap); border-left: 1px solid var(--rule);
}
.aside-block + .aside-block { margin-top: 22px; }
.aside-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .18em;
  color: var(--ink); font-weight: 600;
  border-bottom: 2px solid var(--rule-strong); padding-bottom: 5px; margin-bottom: 10px;
}
.aside-list { display: flex; flex-direction: column; }
.aside-item {
  display: block; padding: 9px 0; border-bottom: 1px dotted var(--rule);
  font-family: var(--font-head); font-size: 14.5px; line-height: 1.34;
}
.aside-item:hover { color: var(--accent); }
.aside-meta {
  display: block; font-family: var(--font-label); font-size: 12px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: 3px;
}

/* --------------------------------------------------------- distintivi */

.badge, .type-pill, .coverage-pill, .badge-lang, .badge-primary, .badge-score {
  font-family: var(--font-label); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .12em;
  border: 1px solid var(--rule); padding: 0 5px; color: var(--muted);
  display: inline-block; line-height: 1.55;
}
.badge-primary { border-color: var(--accent); color: var(--accent); }
.coverage-pill { border-color: var(--ink-soft); color: var(--ink-soft); }
.badge-score { font-family: var(--font-mono); letter-spacing: -.02em; }
.type-pill { border-style: dashed; }

/* ------------------------------------------------------------- profili */

.profile-head {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 26px 0 16px; border-bottom: 3px double var(--rule-strong);
}
.profile-avatar {
  width: 62px; height: 62px; flex: 0 0 62px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-masthead); font-size: 26px; font-weight: 700;
}
.profile-info { min-width: 0; }
.profile-name {
  margin: 0; font-family: var(--font-masthead); font-weight: 700;
  font-size: clamp(26px, 4vw, 40px); line-height: 1.06; letter-spacing: -.02em;
}
.profile-desc { margin: 7px 0 0; color: var(--ink-soft); max-width: 68ch; }
.profile-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.profile-link {
  font-family: var(--font-label); font-size: 13px; text-transform: uppercase;
  letter-spacing: .1em; border: 1px solid var(--rule); padding: 4px 10px;
  min-height: 32px; display: inline-flex; align-items: center;
}
.profile-link:hover { border-color: var(--ink); background: var(--paper-2); }

.stat-strip {
  display: flex; gap: 0; flex-wrap: wrap;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin: 16px 0 0;
}
.stat { padding: 10px 20px 10px 0; }
.stat + .stat { border-left: 1px solid var(--rule); padding-left: 20px; }
.stat-label {
  display: block; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--faint);
}
.stat-value { font-family: var(--font-mono); font-size: 17px; font-weight: 500; }

.score-grid { display: grid; gap: 9px; }
.meter { height: 5px; background: var(--paper-2); border: 1px solid var(--rule); }
.meter > i { display: block; height: 100%; background: var(--ink); }

/* -------------------------------------------------------------- tabelle */

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 640px; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--rule); }
th {
  font-family: var(--font-label); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
  border-bottom: 2px solid var(--rule-strong); background: var(--paper-2);
  position: sticky; top: 0;
}
tbody tr:hover { background: var(--surface-hover); }
.model-name { font-family: var(--font-head); font-weight: 700; }
.model-provider { font-family: var(--font-label); font-size: 13px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; }
.cell-mono { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.cell-na { color: var(--faint); }

/* -------------------------------------------------------------- ricerca */

.search-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  padding: 8vh 18px 18px; display: flex; justify-content: center;
}
.search-panel {
  width: 100%; max-width: 660px; height: fit-content; max-height: 80vh;
  background: var(--paper); border: 1px solid var(--rule-strong);
  display: flex; flex-direction: column; overflow: hidden;
}
.search-field {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 2px solid var(--rule-strong);
}
.search-ico { width: 18px; height: 18px; color: var(--muted); flex: 0 0 18px; }
.search-field input {
  flex: 1; border: 0; background: none; color: var(--ink);
  font-family: var(--font-body); font-size: 17px; outline: none; min-width: 0;
}
.esc-hint {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--faint);
  border: 1px solid var(--rule); padding: 1px 5px;
}
.search-results { overflow-y: auto; padding: 6px 0 10px; }
.sr-group-title {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .18em;
  color: var(--faint); padding: 10px 14px 4px;
}
.sr-item { display: block; padding: 9px 14px; border-bottom: 1px dotted var(--rule); }
.sr-item:hover { background: var(--paper-2); }
.sr-title { font-family: var(--font-head); font-size: 15px; line-height: 1.32; }
.sr-meta {
  font-family: var(--font-label); font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-top: 2px;
}
.sr-empty { padding: 26px 14px; text-align: center; color: var(--muted); font-style: italic; }

/* ----------------------------------------------------------- vuoto/caricamento */

.empty-state {
  padding: 60px 20px; text-align: center; color: var(--muted);
  border: 1px solid var(--rule); margin-top: 26px; background: var(--surface);
}
.empty-state h3 {
  margin: 0 0 8px; font-family: var(--font-head); font-size: 20px; color: var(--ink);
}
.empty-state code {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--paper-2); padding: 2px 6px; border: 1px solid var(--rule);
}
.loading {
  padding: 90px 0; text-align: center; color: var(--faint);
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: .2em;
}
.skeleton { background: var(--paper-2); }

/* --------------------------------------------------------------- piede */

.site-footer {
  border-top: 3px double var(--rule-strong);
  background: var(--paper);
  margin-top: 40px;
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 26px 22px 40px;
  text-align: center;
}
.footer-brand { display: flex; justify-content: center; margin-bottom: 8px; }
.footer-brand .brand-mark { display: none; }
.footer-brand .brand-name { font-size: 26px; }
.footer-note { margin: 0 0 8px; font-style: italic; color: var(--muted); max-width: 64ch;
  margin-left: auto; margin-right: auto; }
.footer-meta, .footer-legal {
  margin: 5px 0 0; font-family: var(--font-label); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--faint);
}
.footer-legal { text-transform: none; letter-spacing: 0; font-family: var(--font-body);
  font-style: italic; max-width: 68ch; margin: 12px auto 0; }


/* ------------------------------------------------- barra torna indietro */

.backbar {
  position: sticky; top: var(--nav-h); z-index: 99;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.backbar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px;
}
.back-btn, .back-home {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-label); font-size: 14px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink);
  padding: 8px 2px; min-height: 40px;
}
.back-btn svg { width: 14px; height: 14px; }
.back-btn:hover, .back-home:hover { color: var(--accent); }
.back-home { color: var(--muted); }

/* ------------------------------------------------------- mostra altri */

.load-more-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 0 6px; margin-top: 20px;
  border-top: 1px solid var(--rule);
}
.load-more {
  font-family: var(--font-label); font-size: 15px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  border: 1px solid var(--ink); background: var(--paper);
  color: var(--ink); padding: 12px 28px; min-height: 46px;
}
.load-more:hover { background: var(--ink); color: var(--paper); }
.load-more-n { font-family: var(--font-mono); font-size: 11px; opacity: .6; }
.load-more-meta {
  margin: 0; font-family: var(--font-label); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--faint);
  text-align: center; padding-top: 14px;
}


/* -------------------------------------------------- aggiorna le notizie */

.refresh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-label); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-strong);
  padding: 5px 11px; min-height: 34px; margin-right: 4px;
}
.refresh-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.refresh-btn:disabled { opacity: .72; cursor: default; }
.refresh-ico { width: 15px; height: 15px; flex: 0 0 15px; }
.refresh-btn.is-running .refresh-ico { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .refresh-btn.is-running .refresh-ico { animation: none; opacity: .5; }
}

/* trascina per aggiornare */
.pull-indicator {
  position: fixed; top: 0; left: 0; right: 0; z-index: 98;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; margin-top: -52px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-label); font-size: 13px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease;
}
.pull-indicator.is-visible { opacity: 1; }
.pull-arrow {
  width: 16px; height: 16px;
  transition: transform .18s ease;
}
.pull-indicator.is-ready .pull-arrow { transform: rotate(180deg); }
.pull-indicator.is-running .pull-arrow { animation: spin 1.1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .pull-indicator.is-running .pull-arrow { animation: none; }
}

/* avviso a comparsa */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 310;
  max-width: calc(100vw - 32px);
  background: var(--ink); color: var(--paper);
  font-family: var(--font-label); font-size: 14px;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 12px 20px; border: 1px solid var(--ink);
  animation: toast-in .2s ease;
}
.toast.is-ok { border-color: var(--ink); }
.toast.is-bad { background: var(--accent); border-color: var(--accent); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); }
                      to   { opacity: 1; transform: translate(-50%, 0); } }

.footer-live {
  margin: 14px auto 0; max-width: 62ch;
  font-family: var(--font-label); font-size: 13px;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule); padding-top: 12px;
}
.footer-live a {
  color: var(--accent); text-transform: none; letter-spacing: 0;
  font-family: var(--font-mono); font-size: 12.5px;
  border-bottom: 1px solid var(--accent); word-break: break-all;
}

/* ====================================================== adattamenti */

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-main { padding-right: 0; max-width: none; }
  .aside-block { border-left: 0; padding-left: 0; margin-top: 26px;
    border-top: 3px double var(--rule-strong); padding-top: 16px; }
}

@media (max-width: 900px) {
  .macro-blocks { grid-template-columns: minmax(0, 1fr); }
  .macro-block { padding: 0; }
  .macro-block + .macro-block {
    border-left: 0; border-top: 1px solid var(--rule); margin-top: 22px; padding-top: 22px;
  }
  .columns-grid { grid-template-columns: minmax(0, 1fr); }
  .column-card { border-left: 0; padding: 0; }
  .columns-grid > .column-card + .column-card {
    border-top: 1px dotted var(--rule); margin-top: 18px; padding-top: 18px;
  }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-stories { grid-template-columns: minmax(0, 1fr); }
  .top-side {
    border-left: 0; padding-left: 0; margin-left: 0;
    border-top: 1px solid var(--rule-strong); margin-top: 8px; padding-top: 8px;
  }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  :root { --gap: 18px; }
  .site-main { padding: 0 16px 56px; }
  /* Sul telefono la testata diventa una riga sola: il nome a sinistra,
     gli strumenti a destra. Cosi' le notizie partono subito. */
  .masthead {
    padding: 8px 16px 0; text-align: left;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: 10px;
  }
  .masthead-rule { grid-column: 1 / -1; margin-bottom: 8px; }
  .brand { min-width: 0; overflow: hidden; }
  .brand-name { font-size: 23px; white-space: nowrap; }
  .brand-light { font-size: .82em; }
  .header-actions { position: static; gap: 0; }
  /* Con il tasto aggiorna in più, la fila a destra deve stringersi o
     mangia lo spazio della testata. L'altezza del bersaglio resta comoda. */
  .refresh-label { display: none; }
  .refresh-btn { padding: 5px 8px; margin-right: 2px; }
  .brand-name { font-size: 21px; }
  .lang-switch { padding: 2px 5px; margin-left: 2px; }
  .lang-sep { display: none; }
  .dateline { grid-column: 1 / -1; margin-top: 8px; }
  .dateline { font-size: 11px; letter-spacing: .1em; }
  .dateline-mid { display: none; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid { gap: 20px; }
  .card { padding-bottom: 16px; }
  .card-title { font-size: 20px; }
  .lead-card .card-title { font-size: 30px; }
  .row-item { grid-template-columns: minmax(0, 1fr) 78px; }
  .row-thumb { width: 78px; height: 54px; }
  .filter-bar { gap: 10px 14px; }
  .filter-group { flex: 1 1 calc(50% - 7px); }
  .select { width: 100%; }
  .result-count { flex: 1 1 100%; margin-left: 0; text-align: right; }
  .subnav-inner { padding: 8px 16px; flex-wrap: nowrap; overflow-x: auto; }
  .subnav-inner::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
  .main-nav { justify-content: flex-start; padding: 0 16px; }
  .backbar-inner { padding: 0 16px; }
  .footer-inner { padding: 22px 16px 36px; }
  .search-overlay { padding: env(safe-area-inset-top) 0 0; }
  .search-panel { max-width: none; max-height: 100%; height: 100%; border: 0; }
  .search-field input { font-size: 16px; }  /* evita lo zoom automatico di iOS */
}

@media (pointer: coarse) {
  .icon-btn { width: 34px; }
  .nav-link { padding: 0 14px; }
  .chip { padding: 7px 12px; }
  .icon-btn { width: 40px; height: 40px; }
  .lang-opt { padding: 8px 4px; }
  .aside-item, .sr-item { padding-top: 12px; padding-bottom: 12px; }
  .card-media img, .row-thumb, .article-hero { filter: none; }
  .section-link { padding: 10px 0 10px 12px; }
  .card-source, .profile-link { padding-top: 4px; padding-bottom: 4px; }
}

/* ---------------------------------------------- iPhone: zone proibite

   Aggiunta a Home, l'app occupa tutto lo schermo e finisce SOTTO la barra di
   stato e la Dynamic Island. Qui le si restituisce lo spazio che le spetta:
   la testata si abbassa, e la sua carta riempie anche la fascia in alto, così
   l'orologio non galleggia sul nulla. Le barre appiccicose scendono della
   stessa quantità, altrimenti si incastrerebbero sotto l'isola. */
@supports (padding: env(safe-area-inset-top)) {
  /* Fascia piena dietro l'orologio e l'isola: senza, scorrendo il testo degli
     articoli passa sotto e si legge a metà. Sta sopra la pagina ma sotto la
     ricerca a tutto schermo. */
  body::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top);
    background: var(--paper);
    z-index: 250; pointer-events: none;
  }
  .site-header { padding-top: env(safe-area-inset-top); }
  .nav-strip   { top: env(safe-area-inset-top); }
  .backbar     { top: calc(var(--nav-h) + env(safe-area-inset-top)); }
  .search-overlay { padding-top: calc(8vh + env(safe-area-inset-top)); }
  .pull-indicator { padding-top: env(safe-area-inset-top);
                    height: calc(52px + env(safe-area-inset-top));
                    margin-top: calc(-52px - env(safe-area-inset-top)); }
}

@supports (padding: env(safe-area-inset-left)) {
  .site-main { padding-left: max(16px, env(safe-area-inset-left));
               padding-right: max(16px, env(safe-area-inset-right)); }
  .site-footer { padding-bottom: env(safe-area-inset-bottom); }
}

@media print {
  .nav-strip, .subnav, .header-actions, .search-overlay, .section-link { display: none; }
  body { background: #fff; color: #000; }
}