/*
Theme Name: NG2
Theme URI: https://notiziegeopolitiche.net
Author: Notizie Geopolitiche
Description: Tema della testata Notizie Geopolitiche — rivista di analisi geopolitica. Ottanio, Source Serif 4, gerarchia da magazine.
Version: 1.2.154
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: ng2
*/

:root {
  /* Il tema è disegnato solo chiaro: senza questa dichiarazione la dark mode
     forzata dei browser mobili inverte i fondi e i neri pieni spariscono. */
  color-scheme: only light;
  --ink: #16181A;
  --body: #232426;
  --gray: #4A4741;
  --meta: #6E6A63;
  --faint: #8A857B;
  --faint2: #A8A399;
  --pale: #C0BBB1;
  --dot-sep: #C9C4B9;
  --hair: #E3DFD7;
  --hair2: #DFDBD2;
  --hair3: #E5E2DA;
  --chip: #DAD6CD;
  --paper: #F7F6F3;
  --accent: #0F6E56;
  --accent-dark: #0A4E3D;
  --red: #B3222D;
  --gold: #F2C230; /* 09/09: il punto del logotipo, uguale ovunque (segnalazione lettori: in alto oro, nelle rubriche rosso) */
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, 'Inter', sans-serif;
  --mono: 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
/* Hover solo dove c'è un mouse vero: sui telefoni il tocco lascia lo stato
   :hover «appiccicoso» e i bottoni scuri restavano col testo verde scuro
   invisibile sul nero (Sergio, 24/08, «Gioca (archivio)» in archivio). */
@media (hover: hover) { a:hover { color: var(--accent-dark); } }
/* I bottoni-link a fondo scuro non cambiano MAI colore del testo. */
.gg-carta-gioca:hover, .g-esito .g-gioca-ancora:hover { color: #fff; }
::selection { background: var(--accent); color: #fff; }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* ---------- Testata ---------- */
.site-header { border-bottom: 1px solid var(--ink); }
.masthead { display: flex; align-items: center; gap: 28px; padding-top: 20px; padding-bottom: 18px; }
.brand { flex: 1; min-width: 0; text-align: center; }
.brand a {
  display: block; color: var(--ink);
  font-size: clamp(48px, 7.2vw, 88px); font-weight: 600;
  letter-spacing: -0.04em; line-height: 1.05; white-space: nowrap;
}
.brand .dot {
  color: var(--gold); /* 29/08: punto in oro (era var(--red)) — scelto da Sergio sul mobile, esteso al desktop */ font-size: 1.9em; line-height: 0.5; display: inline-block;
  vertical-align: baseline; height: 0.5em; overflow: visible; pointer-events: none;
}
.topbar { border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 24px; }
.topbar .today { flex: 1; font-family: var(--sans); font-size: 12px; color: var(--faint); white-space: nowrap; }
.site-nav { display: flex; justify-content: center; gap: 30px; padding: 12px 0; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.01em; white-space: nowrap; }
.site-nav ul { display: contents; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--ink); }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav a.is-active { border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.topbar .search-zone { flex: 1; display: flex; justify-content: flex-end; position: relative; z-index: 2; }
.search-form { display: flex; gap: 0; }
.search-form input[type="search"] {
  font-family: var(--sans); font-size: 12.5px; color: var(--ink);
  border: 1px solid var(--chip); border-right: none; background: #fff;
  padding: 6px 10px; width: 130px; outline: none;
}
.search-form button {
  background: none; border: 1px solid var(--chip); padding: 6px 12px; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; color: var(--meta);
}

/* ads placeholder */
.ad-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.ad-slot .ad-label { font-family: var(--sans); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pale); }
.ad-box {
  border: 1px solid var(--hair);
  background: repeating-linear-gradient(45deg, var(--paper) 0, var(--paper) 10px, #fff 10px, #fff 20px);
  display: flex; align-items: center; justify-content: center;
}
.ad-box span { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.ad-manchette .ad-box { width: 160px; height: 90px; }
.ad-rectangle .ad-box { width: 300px; height: 250px; }
.ad-billboard { padding: 8px 0 34px; }
.ad-billboard .ad-box { width: 970px; max-width: 100%; height: 250px; }
.ad-leaderboard { padding: 26px 0; border-top: 1px solid var(--hair); }
.ad-leaderboard .ad-box { width: 728px; max-width: 100%; height: 90px; }

/* ---------- Blocchi comuni ---------- */
.kicker-row { display: flex; gap: 12px; align-items: center; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.kicker-row .sep { color: var(--dot-sep); }
.kicker-row .kicker { color: var(--accent); font-weight: 700; }
.kicker-row .geo { color: var(--meta); }

.block-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.block-title {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); font-weight: 600; border-top: 2px solid var(--accent); padding-top: 9px; margin: 0;
}
.block-sub { font-family: var(--sans); font-size: 12.5px; color: var(--meta); }
.block-more { margin-left: auto; font-family: var(--sans); font-size: 12.5px; }

.byline { font-family: var(--sans); font-size: 12.5px; color: var(--meta); }
.byline strong, .byline b { color: var(--ink); font-weight: 600; }

.placeholder-media {
  width: 100%; height: 100%; min-height: 110px;
  background: var(--paper); border: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: center; padding: 10px;
}
.media-frame { overflow: hidden; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.media-circle { border-radius: 50%; overflow: hidden; }
.media-circle img { width: 100%; height: 100%; object-fit: cover; }

.geo-chip {
  font-family: var(--sans); font-size: 12px; border: 1px solid var(--chip);
  padding: 5px 11px; color: var(--ink); display: inline-block;
}
.geo-chip.is-active, .geo-chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Homepage ---------- */
.home-open { display: grid; grid-template-columns: 1fr 320px; gap: 44px; padding: 34px 0 36px; border-bottom: 1px solid var(--hair); }
.home-open .lead { min-width: 0; display: flex; flex-direction: column; }
.home-open .lead .media-frame { flex: none; height: 400px; margin-bottom: 20px; }
.home-open .lead .kicker-row { margin-bottom: 12px; }
.home-open .lead h1 { font-size: 38px; line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px; }
.home-open .lead h1 a { color: var(--ink); }
.home-open .lead .standfirst {
  font-family: var(--sans); font-size: 15.5px; line-height: 1.5; color: var(--gray); margin: 0 0 14px;
}
.side-head {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: 4px;
}
.side-item { padding: 18px 0; border-bottom: 1px solid var(--hair); }
.side-item:last-of-type { border-bottom: none; }
.side-item .geo { font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); }
.side-item h2 { font-size: 28px; letter-spacing: -0.02em; line-height: 1.28; font-weight: 600; margin: 8px 0 0; }
.side-item h2 a { color: var(--ink); }

.mondo-oggi { margin-top: 26px; background: var(--paper); border-top: 2px solid var(--accent); padding: 16px 20px 18px; }
.mondo-oggi .mo-head {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); font-weight: 600; display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
}
.mondo-oggi .mo-head small { letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--faint); font-size: 11px; }
.mondo-oggi ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mondo-oggi li { padding: 11px 0; border-bottom: 1px solid var(--hair3); }
.mondo-oggi li:last-child { border-bottom: none; padding-bottom: 2px; }
.mondo-oggi li a { font-size: 15.5px; line-height: 1.45; color: var(--ink); }

.home-firme {
	/* banda grigia filigranata a tutta larghezza (tratteggio sottile in trasparenza) */
	background-color: #E8E6E0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M-3 17 17 -3M-7 7 7 -7M3 21 21 3' stroke='%23CDC9C0' stroke-width='1' opacity='0.8'/%3E%3C/svg%3E");
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 30px calc(50vw - 50%) 34px;
	border-top: 2px solid var(--ink);
	border-bottom: 1px solid var(--hair);
}
.firme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.firma { padding: 0 26px; border-right: 1px solid var(--hair); display: flex; flex-direction: column; gap: 12px; }
.firma:first-child { padding-left: 0; }
.firma:last-child { padding-right: 0; border-right: none; }
.firma .media-circle { width: 88px; height: 88px; }
.firma .firma-nome { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.firma .firma-nome a { color: var(--ink); }
.firma h3 { font-size: 28px; letter-spacing: -0.02em; line-height: 1.26; font-weight: 400; font-style: italic; margin: -6px 0 0; }
.firma h3 a { color: var(--ink); }

.home-dossier { padding: 30px 0 34px; }
/* la riga di stacco prima dell'Analisi la porta la banda stessa, a tutta larghezza */
.dossier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dossier-card { display: flex; flex-direction: column; color: var(--ink); border-top: 3px solid var(--accent); background: var(--paper); }
.dossier-card .media-frame { height: 150px; }
.dossier-card .dc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.dossier-card .dc-label { font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.dossier-card h3 { font-size: 28px; letter-spacing: -0.02em; line-height: 1.21; font-weight: 600; margin: 0; }
.dossier-card p { font-size: 14.5px; line-height: 1.5; color: var(--gray); margin: 0; }
.dossier-card .dc-foot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hair2);
  display: flex; align-items: baseline; gap: 8px; font-family: var(--sans); font-size: 12px; color: var(--meta);
}
.dossier-card .dc-foot strong { font-size: 15px; color: var(--ink); }
.dossier-card .dc-foot .dc-date { margin-left: auto; }

.home-analisi {
	/* banda verde acqua a tutta larghezza: sfonda il contenitore centrato
	   (su mobile diventa grigia filigranata: blocco in coda al file) */
	background: #E9F3F0;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 34px calc(50vw - 50%) 38px;
	border-top: 2px solid var(--ink);
	border-bottom: 1px solid var(--hair);
}
.analisi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.analisi-grid article { display: flex; flex-direction: column; gap: 12px; }
.analisi-grid .media-frame { height: 190px; }
.analisi-grid .geo { font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); }
.analisi-grid h3 { font-size: 29px; letter-spacing: -0.01em; line-height: 1.14; font-weight: 700; margin: 0; }
.analisi-grid h3 a { color: var(--ink); }
.analisi-grid p { font-size: 16px; line-height: 1.6; color: var(--gray); margin: 0; }

.home-mappa { margin: 34px 0; background: var(--paper); padding: 34px 36px; display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: center; }
.home-mappa .media-frame { min-width: 0; max-width: 100%; height: auto; }
.home-mappa .media-frame img { height: auto; object-fit: contain; }
.home-mappa .block-title { display: inline-block; margin-bottom: 12px; }
.home-mappa h2 { font-size: 31px; letter-spacing: -0.01em; line-height: 1.14; font-weight: 700; margin: 0 0 14px; }
.home-mappa h2 a { color: var(--ink); }
.home-mappa p { font-size: 16px; line-height: 1.6; color: var(--gray); margin: 0 0 16px; }
.home-mappa .more { font-family: var(--sans); font-size: 13px; font-weight: 600; }

.home-tre { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: 10px 0 40px; }
.home-tre > div { padding: 0 30px; border-right: 1px solid var(--hair); }
.home-tre > div:first-child { padding-left: 0; }
.home-tre > div:last-child { padding-right: 0; border-right: none; }
.home-tre .block-title { margin-bottom: 18px; }
.letture-item { padding-bottom: 16px; border-bottom: 1px solid var(--hair); margin-bottom: 16px; }
.letture-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.letture-item h3 { font-size: 28px; letter-spacing: 0.005em; line-height: 1.17; font-weight: 700; margin: 0 0 8px; }
.letture-item h3 a { color: var(--ink); }
.letture-item .meta { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--meta); margin: 0; }
.intervista-block .media-frame { height: 150px; margin-bottom: 14px; }
.intervista-block h3 { font-size: 28px; letter-spacing: 0.005em; line-height: 1.17; font-weight: 700; margin: 0 0 10px; }
.intervista-block h3 a { color: var(--ink); }
.intervista-block .meta { font-family: var(--sans); font-size: 12.5px; color: var(--meta); margin: 0; }
.punto-block article { border-left: 2px solid var(--accent); padding-left: 18px; }
.punto-block h3 { font-size: 28px; letter-spacing: -0.02em; line-height: 1.24; font-weight: 400; font-style: italic; margin: 0 0 12px; }
.punto-block h3 a { color: var(--ink); }
.punto-block p { font-size: 15.5px; line-height: 1.6; color: var(--gray); margin: 0 0 12px; }

.newsletter-band { border-top: 1px solid var(--ink); background: var(--paper); }
.newsletter-band .inner { display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center; padding-top: 36px; padding-bottom: 36px; }
.newsletter-band .block-title { display: inline-block; margin-bottom: 12px; }
.newsletter-band h2 { font-size: 30px; letter-spacing: -0.02em; line-height: 1.15; font-weight: 600; margin: 0 0 10px; }
.newsletter-band p { font-size: 16px; line-height: 1.55; color: var(--gray); margin: 0; }
.newsletter-band form { display: flex; gap: 10px; align-items: center; }
.newsletter-band input[type="email"] {
  font-family: var(--sans); font-size: 14px; padding: 13px 16px; border: 1px solid var(--ink);
  background: #fff; color: var(--ink); width: 280px; outline: none;
}
.newsletter-band button {
  font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 13px 26px;
  background: var(--accent); color: #fff; border: none; cursor: pointer; letter-spacing: 0.02em;
}

/* ---------- Articolo ---------- */
.article-layout { display: grid; grid-template-columns: minmax(0, 700px) 300px; gap: 64px; justify-content: center; padding-top: 40px; padding-bottom: 60px; }
.article-main .kicker-row { margin-bottom: 14px; }
.article-main h1 { font-size: 40px; line-height: 1.16; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 16px; }
.article-main .standfirst {
  font-family: var(--sans); font-size: 16.5px; line-height: 1.6; color: var(--gray);
  margin: 0 0 22px;
}
.article-main .byline { font-size: 13px; padding-bottom: 22px; border-bottom: 1px solid var(--hair); margin-bottom: 26px; }
.article-hero { margin-bottom: 10px; height: 400px; overflow: hidden; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-hero.carta { height: auto; }
.article-hero.carta img { height: auto; object-fit: contain; }
.article-caption { font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--faint); margin-bottom: 32px; }
.article-caption .credit { color: var(--faint2); }

.article-body { font-size: 19px; line-height: 1.75; color: var(--body); max-width: 66ch; }
.article-body p { margin: 0 0 26px; }
.article-body h2, .article-body h3 { letter-spacing: -0.02em; line-height: 1.25; margin: 36px 0 16px; }
.article-body blockquote {
  margin: 40px 0; padding: 26px 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  text-align: center; font-size: 25px; line-height: 1.4; font-style: italic; font-weight: 400; color: var(--ink);
}
.article-body blockquote p { margin: 0; }
.article-body img { margin: 8px 0; }
.article-body figcaption { font-family: var(--sans); font-size: 12px; color: var(--faint); }

.dossier-box { margin-top: 44px; background: var(--paper); padding: 26px 28px; }
.dossier-box .db-label { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.dossier-box h2 { font-size: 24px; font-weight: 600; margin: 0 0 6px; }
.dossier-box h2 a { color: var(--ink); }
.dossier-box .db-meta { font-family: var(--sans); font-size: 12.5px; color: var(--meta); margin: 0 0 18px; }
.dossier-box .db-list { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.dossier-box .db-list a { padding: 12px 0; border-bottom: 1px solid var(--hair); display: flex; gap: 16px; align-items: baseline; color: var(--ink); }
.dossier-box .db-list a:last-child { border-bottom: none; }
.dossier-box .db-list .db-date { font-family: var(--sans); font-size: 11.5px; color: var(--faint); width: 78px; flex: none; }
.dossier-box .db-list .db-title { font-size: 16.5px; line-height: 1.4; }
.dossier-box .db-more { display: inline-block; margin-top: 16px; font-family: var(--sans); font-size: 13px; font-weight: 600; }

.related { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--ink); }
.related h2 { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 20px; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px; }
.related-grid .media-frame { height: 110px; margin-bottom: 10px; }
.related-grid h3 { font-size: 17px; line-height: 1.32; font-weight: 600; margin: 0; }
.related-grid h3 a { color: var(--ink); }

.article-aside .sticky { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 28px; }
.aside-box-title { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.aside-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.aside-newsletter { background: var(--paper); padding: 20px 22px; }
.aside-newsletter .nl-label { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.aside-newsletter .nl-title { font-size: 19px; letter-spacing: -0.01em; font-weight: 600; margin-bottom: 6px; }
.aside-newsletter p { font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: var(--gray); margin: 0 0 14px; }
.aside-newsletter form { display: flex; flex-direction: column; gap: 8px; }
.aside-newsletter input[type="email"] { font-family: var(--sans); font-size: 13px; padding: 10px 12px; border: 1px solid var(--ink); background: #fff; color: var(--ink); outline: none; }
.aside-newsletter button { font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 10px; background: var(--accent); color: #fff; border: none; cursor: pointer; }
.aside-list article { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.aside-list article:last-child { border-bottom: none; }
.aside-list h3 { font-size: 17px; line-height: 1.32; font-weight: 600; margin: 0; }
.aside-list h3 a { color: var(--ink); }

/* ---------- Liste / archivi (righe) ---------- */
.archive-head { padding: 40px 0 26px; border-bottom: 1px solid var(--hair); }
.archive-head .kicker { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 14px; }
.archive-head h1 { font-size: 44px; line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; }
.archive-head .desc { font-size: 18px; line-height: 1.55; color: var(--gray); margin: 0; max-width: 64ch; }
.archive-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.archive-filters .lab { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-right: 6px; }

.row-article { display: grid; grid-template-columns: 120px 1fr 150px; gap: 28px; padding: 22px 0; border-top: 1px solid var(--hair); align-items: baseline; color: var(--ink); }
.row-article:first-of-type { border-top: none; }
.row-article .r-date { font-family: var(--sans); font-size: 12.5px; color: var(--faint); }
.row-article .r-kicker { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.row-article h3 { font-size: 28px; line-height: 1.28; font-weight: 600; margin: 8px 0; }
.row-article h3.is-opinion { font-weight: 400; font-style: italic; }
.row-article p { font-size: 15.5px; line-height: 1.6; color: var(--gray); margin: 0; max-width: 62ch; }
.row-article .r-author { font-family: var(--sans); font-size: 12.5px; color: var(--meta); text-align: right; }

.pagination { padding: 26px 0; font-family: var(--sans); font-size: 13px; display: flex; gap: 16px; }

/* ---------- Dossier (taxonomy) ---------- */
.dossier-hero { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: center; padding: 44px 0 40px; border-bottom: 1px solid var(--ink); }
.dossier-hero .dh-label { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 14px; }
.dossier-hero h1 { font-size: 46px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 18px; }
.dossier-hero .dh-intro { font-size: 19px; line-height: 1.6; color: var(--gray); margin: 0 0 20px; max-width: 60ch; }
.dossier-hero .dh-meta { font-family: var(--sans); font-size: 12.5px; color: var(--meta); display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.dossier-hero .dh-meta strong { color: var(--ink); }
.dossier-hero .dh-meta .sep { color: var(--dot-sep); }
.dossier-hero .media-frame { height: 280px; }

.dossier-list-head { display: flex; align-items: baseline; gap: 14px; padding: 22px 0 8px; }
.dossier-altri { padding: 36px 0 0; }
.dossier-altri h2 { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 20px; }
.dossier-altri-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.dossier-altri-grid a { padding: 0 28px; border-right: 1px solid var(--hair); color: var(--ink); }
.dossier-altri-grid a:first-child { padding-left: 0; }
.dossier-altri-grid a:last-child { padding-right: 0; border-right: none; }
.dossier-altri-grid h3 { font-size: 21px; line-height: 1.25; font-weight: 600; margin: 0 0 8px; }
.dossier-altri-grid p { font-family: var(--sans); font-size: 12.5px; color: var(--meta); margin: 0; }

/* ---------- Mappe ---------- */
.mappa-head { padding: 40px 0 26px; text-align: center; border-bottom: 1px solid var(--hair); }
.mappa-head .kicker { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 14px; }
.mappa-head h1 { font-size: 44px; line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; margin: 0 auto 14px; max-width: 20ch; }
.mappa-head p { font-size: 18px; line-height: 1.55; color: var(--gray); margin: 0 auto; max-width: 64ch; }
.mappa-figure { margin: 0; padding-top: 30px; }
.mappa-figure .media-frame { border: 1px solid var(--hair); }
.mappa-figure .media-frame img { width: 100%; height: auto; object-fit: contain; }
.mappa-figure figcaption {
  display: flex; gap: 18px; align-items: baseline; padding: 12px 0 20px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--faint); border-bottom: 1px solid var(--hair);
}
.mappa-figure figcaption .n { color: var(--ink); }
.mappa-figure figcaption a { margin-left: auto; white-space: nowrap; }
.mappa-commento { display: grid; grid-template-columns: minmax(0, 700px) 300px; gap: 64px; justify-content: center; padding-top: 34px; }
.mappa-commento .byline { padding-bottom: 20px; border-bottom: 1px solid var(--hair); margin-bottom: 24px; }
.mappa-commento .article-body { font-size: 18.5px; }
.mappa-archivio { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--ink); }
.mappa-archivio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.mappa-archivio-grid .media-frame { height: 130px; border: 1px solid var(--hair); margin-bottom: 10px; }
.mappa-archivio-grid .m-date { font-family: var(--sans); font-size: 11.5px; color: var(--faint); margin-bottom: 5px; }
.mappa-archivio-grid h3 { font-size: 16px; line-height: 1.32; font-weight: 600; margin: 0; }
.mappa-archivio-grid a { color: var(--ink); }

/* ---------- Autore ---------- */
.author-hero { display: grid; grid-template-columns: 180px minmax(0, 1fr) 300px; gap: 44px; padding: 44px 0 36px; border-bottom: 1px solid var(--ink); align-items: start; }
.author-hero .media-circle { width: 180px; height: 180px; }
.author-hero .a-label { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 12px; }
.author-hero h1 { font-size: 46px; letter-spacing: -0.03em; line-height: 1.08; font-weight: 700; margin: 0 0 16px; }
.author-hero .a-bio { font-size: 19px; line-height: 1.6; color: var(--gray); margin: 0 0 18px; max-width: 58ch; }
.author-hero .a-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.author-hero .a-chips .lab { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-right: 6px; }
.author-cifre { background: var(--paper); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.author-cifre .block-title { border-top-width: 2px; }
.author-cifre .cifre { display: flex; flex-direction: column; gap: 10px; font-family: var(--sans); font-size: 12.5px; color: var(--meta); }
.author-cifre .cifre > div { display: flex; align-items: baseline; gap: 8px; }
.author-cifre .cifre strong { font-family: var(--serif); font-size: 22px; color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--ink); background: #fff; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; padding-top: 32px; padding-bottom: 32px; }
.footer-cols .f-brand { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 12px; }
.footer-cols .f-colophon { font-family: var(--sans); font-size: 12px; line-height: 1.8; color: var(--meta); margin: 0; }
.footer-col { font-family: var(--sans); font-size: 13px; display: flex; flex-direction: column; gap: 10px; }
.footer-col .f-head { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint2); }
.footer-col a { color: var(--ink); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Pagine semplici ---------- */
.page-plain { max-width: 700px; margin: 0 auto; padding: 40px 32px 60px; }
.page-plain h1 { font-size: 40px; line-height: 1.16; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .masthead .ad-manchette { display: none; }
  .topbar { flex-wrap: wrap; }
  .topbar .today { display: none; }
  .site-nav { flex-wrap: wrap; gap: 16px 22px; width: 100%; justify-content: flex-start; }
  .topbar .search-zone { display: none; }
  .home-open, .analisi-grid, .home-mappa, .article-layout, .mappa-commento,
  .dossier-hero, .author-hero { grid-template-columns: 1fr; }
  .home-open .lead .media-frame { height: 240px; }
  .home-open .lead h1 { font-size: 29px; }
  .firme-grid { grid-template-columns: 1fr 1fr; }
  .firma { padding: 0 0 22px !important; border-right: none !important; }
  .dossier-grid { display: flex; overflow-x: auto; gap: 16px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .dossier-card { flex: 0 0 78%; scroll-snap-align: start; }
  .home-tre { grid-template-columns: 1fr; }
  .home-tre > div { padding: 0 0 28px !important; border-right: none !important; }
  .newsletter-band .inner { grid-template-columns: 1fr; }
  .newsletter-band input[type="email"] { width: 100%; }
  .newsletter-band form { flex-direction: column; align-items: stretch; }
  .article-aside .ad-rectangle { display: none; }
  .article-aside .sticky { position: static; }
  .related-grid { grid-template-columns: 1fr; }
  .row-article { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .row-article .r-author { text-align: left; }
  .mappa-archivio-grid { grid-template-columns: 1fr 1fr; }
  .dossier-altri-grid { grid-template-columns: 1fr; }
  .dossier-altri-grid a { padding: 0 0 20px !important; border-right: none !important; }
  .footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .author-hero .media-circle { width: 120px; height: 120px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .article-main h1 { font-size: 30px; }
  .article-hero { height: 220px; }
  .archive-head h1, .dossier-hero h1, .mappa-head h1, .author-hero h1 { font-size: 32px; }
}


/* Sottotitoli stile quotidiano: max 2 righe, sans, niente puntini */
.preview {
  font-family: var(--sans) !important; font-size: 14.5px !important; line-height: 1.5 !important;
  color: var(--gray);
}

.row-article p {
  font-family: var(--sans); font-size: 13.5px;
}

/* Miniature nella colonna laterale */
.side-item { display: flex; gap: 14px; align-items: flex-start; }
.side-item .si-text { flex: 1; min-width: 0; }
.side-item .si-thumb { width: 92px; height: 66px; flex: none; }


/* ---------- Pagina redazione ---------- */
.redazione-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 28px; padding-bottom: 10px; }
.redattore { display: flex; flex-direction: column; gap: 10px; }
.redattore .media-circle { width: 120px; height: 120px; display: block; }
.redattore .media-circle img { width: 100%; height: 100%; }
.redattore h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; font-weight: 600; margin: 0; }
.redattore h3 a { color: var(--ink); }
.redattore p { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--meta); margin: 0; }
.redattore .r-count { font-family: var(--sans); font-size: 11.5px; color: var(--faint); }
@media (max-width: 980px) { .redazione-grid { grid-template-columns: 1fr 1fr; } }


/* ---------- Bande basse: Atlante + Leggeri ---------- */
.band { border-top: 1px solid var(--ink); }
.band .wrap { padding-top: 30px; padding-bottom: 36px; }
.band-leggeri { background: var(--paper); }
.atlante-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.atlante-grid a { padding: 0 24px; border-right: 1px solid var(--hair); color: var(--ink); }
.atlante-grid a:first-child { padding-left: 0; }
.atlante-grid a:last-child { padding-right: 0; border-right: none; }
.atlante-grid h3 { font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; font-weight: 600; margin: 0 0 7px; }
.atlante-grid p { font-size: 14.5px; line-height: 1.5; color: var(--gray); margin: 0; }
.leggeri-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.leggeri-col { padding: 0 30px; border-right: 1px solid var(--hair2); display: flex; flex-direction: column; gap: 12px; }
.leggeri-col:first-child { padding-left: 0; }
.leggeri-col:last-child { padding-right: 0; border-right: none; }
.leggeri-col .l-brand { font-size: 24px; letter-spacing: -0.01em; font-weight: 600; margin: 0; }
.leggeri-col .l-brand .dot { color: var(--gold); font-size: 1.9em; line-height: 0.5; display: inline-block; vertical-align: baseline; height: 0.5em; overflow: visible; }
.leggeri-col .l-foto { height: 150px; }
.leggeri-col h4 { font-size: 19px; letter-spacing: -0.02em; line-height: 1.31; font-weight: 600; margin: 2px 0 0; }
.leggeri-col h4 a { color: var(--ink); }
.leggeri-col p { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--gray); margin: 0; }
.leggeri-col .l-more { font-family: var(--sans); font-size: 12.5px; font-weight: 600; margin-top: auto; }
/* Box Geogiochi in home: le tessere dei giochi al posto del finto cruciverba */
.l-giochi {
  height: 150px; display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--hair);
}
.l-giochi .gg-tiles { display: flex; gap: 12px; }
.l-giochi .g-tile { width: 44px; height: 44px; border-radius: 9px; font-size: 22px; box-shadow: 3px 3px 0 var(--ink); }
.l-giochi .g-tile:nth-child(1) { transform: rotate(-5deg); }
.l-giochi .g-tile:nth-child(2) { transform: rotate(3deg); }
.l-giochi .g-tile:nth-child(3) { transform: rotate(-2deg); }
.l-giochi .g-tile:nth-child(4) { transform: rotate(4deg); }
.l-giochi .g-tile:nth-child(5) { transform: rotate(-3deg); }
.l-giochi:hover .g-tile { transform: none; transition: transform 0.15s; }
.l-gioco-oggi {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--meta);
}
.l-gioco-oggi .g-tile { width: 20px; height: 20px; border-radius: 4px; font-size: 12px; }
.site-nav .voce-leggeri > a { color: var(--meta); }
@media (max-width: 980px) {
  .atlante-grid { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .atlante-grid a { padding: 0 16px !important; border-right: none; }
  .leggeri-grid { grid-template-columns: 1fr; }
  .leggeri-col { padding: 0 0 26px !important; border-right: none !important; }
}

/* Geogiochi — cruciverba interattivo (assets/gioco-cruciverba.js) */
.ng-gioco .caselle input {
  width: 30px; height: 30px; box-sizing: border-box; padding: 0; border-radius: 0;
  border: 1px solid var(--ink); background: #fff; color: var(--ink);
  font: 700 15px/1 var(--sans); text-align: center; text-transform: uppercase;
  caret-color: var(--accent); appearance: none;
}
.ng-gioco .caselle input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ng-gioco .caselle.giusto input { background: var(--accent); border-color: var(--accent); color: #fff; }
.ng-gioco .caselle.svelato input { background: #F7F6F3; border-color: var(--pale); color: var(--meta); }
.ng-gioco .caselle.sbagliato input { border-color: var(--red); color: var(--red); }
.ng-gioco .quesito.risolto .definizione::after { content: ' ✓'; color: var(--accent); font-weight: 700; }
/* Ogni quesito è un blocchetto: senza questo raggruppamento i 26px sotto la
   definizione (margine standard di .article-body p) incollavano le caselle
   alla domanda SUCCESSIVA — su mobile non si capiva di chi fossero (24/08). */
.ng-gioco .quesito { margin: 0 0 16px; padding: 14px 16px 12px; background: var(--paper); border-left: 3px solid var(--ink); }
.ng-gioco .quesito .definizione { margin: 0 0 12px; }
.ng-gioco .caselle { margin: 0 0 4px; }
/* Bersaglio di tocco largo: qui un tocco sbagliato costa un aiuto. */
.ng-gioco .quesito details summary { font: 600 13px/1.2 var(--sans); color: var(--meta); padding: 10px 0 6px; cursor: pointer; }
.ng-gioco .quesito details p { margin: 8px 0 0; }
.ng-gioco .schema-fatto { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--accent); padding-top: 18px; margin: 0; }


/* ---------- Newsletter: form reale + richiamo fine articolo ---------- */
.nl-form .nl-riga { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nl-form input[type="email"] {
  font-family: var(--sans); font-size: 14px; padding: 13px 16px; border: 1px solid var(--ink);
  background: #fff; color: var(--ink); width: 280px; max-width: 100%; outline: none;
}
.nl-form button {
  font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 13px 26px;
  background: var(--accent); color: #fff; border: none; cursor: pointer; letter-spacing: 0.02em;
}
.nl-form .nl-msg { font-family: var(--sans); font-size: 13px; font-weight: 600; margin: 10px 0 0; }
.nl-form .nl-msg.is-ok { color: var(--accent); }
.nl-form .nl-msg.is-err { color: var(--red); }
.nl-form .nl-privacy { font-family: var(--sans); font-size: 11.5px; color: var(--faint); margin: 8px 0 0; }
.aside-newsletter .nl-form .nl-riga { flex-direction: column; align-items: stretch; }
.aside-newsletter .nl-form input[type="email"] { width: auto; font-size: 13px; padding: 10px 12px; }
.aside-newsletter .nl-form button { font-size: 13px; padding: 10px; }
.article-nl { margin-top: 44px; background: var(--paper); border-top: 2px solid var(--accent); padding: 26px 28px; }
.article-nl .nl-label { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.article-nl h2 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; font-weight: 600; margin: 0 0 8px; }
.article-nl p { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--gray); margin: 0 0 16px; }

/* Geogiochi — tabellone serie/punti e quesito del giorno */
.gioco-score { display: flex; align-items: center; gap: 14px; margin: 26px 0 4px; }
.gioco-score .gs-box { text-align: center; background: var(--paper); border-top: 3px solid var(--accent); padding: 12px 22px; }
.gioco-score .gs-num { font-size: 30px; font-weight: 700; line-height: 1; color: var(--accent); }
.gioco-score .gs-label { font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); margin-top: 5px; }
.gioco-score .gs-msg { flex: 1; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--gray); margin: 0; }
.ng-gioco .quesito.bloccato .definizione { color: var(--faint); font-style: italic; }
.ng-gioco .quesito.bloccato .caselle i { background: var(--paper); border-color: var(--hair); }
@media (max-width: 560px) { .gioco-score { flex-wrap: wrap; } .gioco-score .gs-msg { flex-basis: 100%; } }

/* ---------- Carta consultabile (zoom) ---------- */
.mappa-figure .media-frame img { cursor: zoom-in; }
.carta-lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(14, 16, 17, 0.93);
  display: flex; align-items: center; justify-content: center; touch-action: none;
}
.carta-lightbox img {
  max-width: none; max-height: none; width: auto; height: auto;
  transform-origin: center center; will-change: transform; cursor: zoom-in;
}
.carta-lightbox .cl-close {
  position: absolute; top: 14px; right: 18px; z-index: 2;
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.carta-lightbox .cl-close:hover { background: rgba(255, 255, 255, 0.24); }
.carta-lightbox .cl-hint {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  font-family: var(--sans); font-size: 12px; color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

/* Geogiochi — motori di gioco (assets/giochi.js) */
.g-passo { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 14px; }
.g-indizio { display: flex; gap: 14px; align-items: baseline; margin-bottom: 14px; }
.g-indizio-n { font-family: var(--mono); font-size: 12px; color: var(--accent); flex: none; }
.g-indizio p { font-size: 19px; line-height: 1.55; margin: 0; }
.g-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.g-opzione { font-family: var(--sans); font-size: 15px; padding: 13px; background: #fff; border: 1px solid var(--chip); color: var(--ink); cursor: pointer; text-align: left; }
.g-opzione:hover:not(:disabled):not(.giusta):not(.sbagliata) { border-color: var(--accent); background: #F2F7F5; }
.g-opzione.giusta { background: var(--accent); border-color: var(--accent); color: #fff; }
.g-opzione.sbagliata { border-color: var(--red); color: var(--red); background: #fff; }
.g-opzione:disabled { cursor: default; opacity: 0.75; }
.g-avviso { font-family: var(--sans); font-size: 13.5px; color: var(--red); margin: 14px 0 0; min-height: 1em; }
.g-avanti { display: block; margin-top: 18px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; padding: 11px 22px; background: var(--accent); color: #fff; border: none; cursor: pointer; }
.g-avanti:hover { background: var(--accent-dark); }
.g-esito { border: 1px solid var(--ink); padding: 26px 28px; text-align: center; margin-top: 24px; }
.g-esito.vinto { border-top: 4px solid var(--accent); }
.g-esito.perso { border-top: 4px solid var(--red); }
.g-esito-titolo { font-size: 26px; letter-spacing: -0.02em; font-weight: 700; }
.g-esito-dett { font-family: var(--sans); font-size: 13.5px; color: var(--gray); margin: 8px 0 0; }
.g-share { margin-top: 16px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; padding: 11px 22px; background: var(--accent); color: #fff; border: none; cursor: pointer; }
.g-approfondisci { margin-top: 22px; background: var(--paper); padding: 18px 22px; font-size: 15.5px; line-height: 1.55; text-align: left; }
.ng-quiz .domanda .testo, .ng-intruso .consegna { font-family: var(--serif); font-size: 19px; line-height: 1.5; margin: 0; }
.ng-quiz .perche, .ng-intruso .perche, .ng-cronologia .perche { font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: var(--gray); background: var(--paper); padding: 12px 16px; margin: 16px 0 0; }
.ng-intruso { padding: 20px 0; border-bottom: 1px solid var(--hair); }
.ng-intruso:last-of-type { border-bottom: none; }
.g-cron { margin-top: 16px; }
.g-cron-riga { display: flex; align-items: center; gap: 12px; border: 1px solid var(--chip); background: #fff; padding: 10px 14px; margin-bottom: 8px; }
.g-cron-riga.giusta { border-color: var(--accent); background: #F2F7F5; }
.g-cron-riga.sbagliata { border-color: var(--red); }
.g-cron-pos { font-family: var(--mono); font-size: 12px; color: var(--faint); flex: none; width: 16px; }
.g-cron-testo { font-size: 16.5px; line-height: 1.4; flex: 1; }
.g-cron-btn { font-family: var(--sans); font-size: 15px; width: 34px; height: 34px; background: #fff; border: 1px solid var(--chip); cursor: pointer; color: var(--ink); flex: none; }
.g-cron-btn:hover:not(:disabled) { border-color: var(--accent); }
.g-cron-btn:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 560px) { .g-griglia { grid-template-columns: 1fr; } }

/* ---------- Home: box sotto la notizia principale ---------- */
.home-open .col-lead { min-width: 0; display: flex; flex-direction: column; }
.lead-sotto {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair);
}
.ls-box { background: var(--paper); border-top: 2px solid var(--accent); padding: 0 0 16px; min-width: 0; }
.ls-box .media-frame { height: 128px; display: block; margin-bottom: 12px; }
.ls-box .geo {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--meta); margin: 0 14px;
}
.ls-box h2 { font-size: 28px; letter-spacing: 0.005em; line-height: 1.17; font-weight: 700; margin: 8px 14px 0; }
.ls-box h2 a { color: var(--ink); }

/* ---------- Home: Il mondo oggi in vista nella colonna ---------- */
.mo-vista { margin-top: 0; border-top: 3px solid var(--accent); padding: 18px 20px 20px; }
.mo-vista .mo-head { font-size: 12.5px; margin-bottom: 8px; }
.mo-vista li a { font-size: 16px; }
.mo-tutto {
  display: inline-block; margin-top: 14px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
}

@media (max-width: 900px) {
  .lead-sotto { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .lead-sotto { grid-template-columns: 1fr; }
}

/* ---------- Home: Ultime dalla redazione (colonna dx) ---------- */
.ultime { margin-top: 28px; }
.ultime-side-item { padding: 15px 0; border-bottom: 1px solid var(--hair); }
.ultime-side-item:last-child { border-bottom: none; }
.ultime-side-item .kicker {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.ultime-side-item h2 { font-size: 28px; letter-spacing: -0.01em; line-height: 1.14; font-weight: 700; margin: 6px 0 0; }
.ultime-side-item h2 a { color: var(--ink); }

/* Geogiochi — Filotto, regole e settimana */
.gioco-score .gs-label { color: var(--accent); font-weight: 700; }
.gioco-score .gs-sub { font-family: var(--sans); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.gs-regole { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--meta); background: var(--paper); border-left: 3px solid var(--accent); padding: 12px 16px; margin: 0 0 26px; }
.gs-regole strong { color: var(--ink); }
.gioco-sett { margin-top: 36px; border-top: 2px solid var(--ink); padding-top: 14px; }
.gioco-sett-titolo { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.gs-riga { padding: 13px 0; border-bottom: 1px solid var(--hair); }
.gs-riga:last-child { border-bottom: none; }
.gs-riga-testo { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.gs-riga-tit { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
a.gs-riga-tit:hover { color: var(--accent); }
.gs-riga-quando { font-family: var(--sans); font-size: 12px; color: var(--meta); }
.gs-riga.futuro .gs-riga-tit { color: var(--faint); }
.gs-riga.futuro .gs-riga-quando { color: var(--accent); font-weight: 600; }
.gs-riga.attuale .gs-riga-quando { color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; }

/* Geogiochi — pagina dedicata (header-geogiochi + single-geogioco, dal mockup) */
.gg-masthead { text-align: center; padding: 20px 32px 14px; }
.gg-brand { display: inline-block; color: var(--ink); font-size: clamp(34px, 4.5vw, 52px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; white-space: nowrap; }
.gg-brand .dot { color: var(--gold); font-size: 1.9em; line-height: 0.5; display: inline-block; vertical-align: baseline; height: 0.5em; overflow: visible; pointer-events: none; }
.gg-rubrica { font-family: var(--sans); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.gg-topbar { border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 24px; }
.gg-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 26px; padding: 12px 0; font-family: var(--sans); font-size: 13.5px; white-space: nowrap; }
.gg-tab { color: var(--ink); }
.gg-tab.attiva { border-bottom: 2px solid var(--accent); padding-bottom: 3px; font-weight: 600; }
.gg-tab.futura { color: var(--pale); cursor: help; }
.gg-back { flex: 1; display: flex; justify-content: flex-end; }
.gg-back a { font-family: var(--sans); font-size: 12.5px; color: var(--meta); }
.gg-main { max-width: 744px; margin: 0 auto; padding: 36px 32px 64px; }
.gg-testa { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.gg-titolo { flex: 1; min-width: 0; }
.gg-testa h1 { font-size: 34px; letter-spacing: -0.02em; line-height: 1.1; font-weight: 700; margin: 0 0 8px; }
.gg-payoff { font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--meta); margin: 0; }
#ng-filotto { flex: none; }
.gioco-score.in-testa { display: block; margin: 0; text-align: center; }
.gioco-score.in-testa .gs-box { padding: 12px 26px; }
.gioco-score.in-testa .gs-msg { font-size: 11.5px; line-height: 1.45; color: var(--meta); margin: 8px 0 0; max-width: 190px; }
.gg-scheda .ng-gioco, .gg-scheda .ng-dove, .gg-scheda .ng-quiz, .gg-scheda .ng-cronologia { border: 1px solid var(--ink); padding: 26px 28px; }
.gg-scheda .ng-intruso { border: 1px solid var(--ink); padding: 20px 28px; margin-bottom: 14px; }
.gg-scheda > p { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--gray); }
.gg-nl { margin-top: 40px; }
@media (max-width: 760px) {
  .gg-topbar { flex-wrap: wrap; padding-bottom: 8px; }
  .gg-topbar .today { display: none; }
  .gg-back { display: none; }
  .gg-nav { width: 100%; }
  /* Sfumatura sul bordo destro: la fila delle pillole continua, e si veda. */
  .gg-topbar .gg-nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
  }
  /* Prima il titolo, poi il Filotto: col cartellino sopra il gioco iniziava
     sotto la piega (rapporto design 24/08). */
  .gg-testa { flex-direction: column; }
}

/* Geogiochi — identità colore dei giochi (tessere stile NYT Games) */
:root {
  --gc-cruciverba: #0F6E56;
  --gc-dove: #2456A4;
  --gc-quiz: #E3B505;
  --gc-intruso: #7A4B9E;
  --gc-cronologia: #C25A1F;
}
.g-tile { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; font: 700 14px/1 var(--mono); color: #fff; border-radius: 5px; flex: none; }
.g-tile--cruciverba { background: var(--gc-cruciverba); }
.g-tile--dove { background: var(--gc-dove); }
.g-tile--quiz { background: var(--gc-quiz); color: #16181A; }
.g-tile--intruso { background: var(--gc-intruso); }
.g-tile--cronologia { background: var(--gc-cronologia); }
.g-tile.spenta { background: var(--pale); color: #fff; }
.gg-nav { gap: 8px 10px; }
.gg-tab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 1px solid var(--chip); border-radius: 999px; color: var(--ink); font-weight: 600; font-size: 13px; }
.gg-tab .g-tile { width: 20px; height: 20px; font-size: 12px; border-radius: 4px; }
a.gg-tab:hover { border-color: var(--faint); }
.gg-tab.attiva { color: #fff; border-color: transparent; }
.gg-tab--cruciverba.attiva { background: var(--gc-cruciverba); }
.gg-tab--dove.attiva { background: var(--gc-dove); }
.gg-tab--quiz.attiva { background: var(--gc-quiz); color: #16181A; }
.gg-tab--intruso.attiva { background: var(--gc-intruso); }
.gg-tab--cronologia.attiva { background: var(--gc-cronologia); }
.gg-tab.attiva .g-tile { background: rgba(255,255,255,0.22); color: #fff; }
.gg-tab--quiz.attiva .g-tile { background: rgba(0,0,0,0.14); color: #16181A; }
.gg-tab.futura { color: var(--faint); border-style: dashed; cursor: help; font-weight: 400; }
.gg-tab.futura .g-tile { background: var(--pale); }
.g-banda { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 20px; background: var(--paper); border-left: 4px solid var(--ink); }
.g-banda--cruciverba { border-left-color: var(--gc-cruciverba); background: #eef5f2; }
.g-banda--dove { border-left-color: var(--gc-dove); background: #eef2f9; }
.g-banda--quiz { border-left-color: var(--gc-quiz); background: #faf5e2; }
.g-banda--intruso { border-left-color: var(--gc-intruso); background: #f4eff8; }
.g-banda--cronologia { border-left-color: var(--gc-cronologia); background: #f9f0ea; }
.gg-scheda .g-banda { margin: -26px -28px 22px; padding: 14px 28px; border-bottom: 1px solid var(--hair); }
.gg-scheda .ng-intruso .g-banda { margin: -20px -28px 18px; }
.g-banda-testo strong { font-family: var(--sans); font-size: 13.5px; }
.g-banda .g-vinci { font-family: var(--sans); font-size: 12.5px; color: var(--gray); margin-top: 2px; }
.gs-riga { display: flex; align-items: center; gap: 12px; }

/* ---------- Footer: riga legale ---------- */
.f-legal {
  margin: 14px 0 0; font-family: var(--sans); font-size: 10.5px; line-height: 1.6;
  color: var(--faint2); max-width: 46ch;
}

/* ---------- Apertura: collage foto "a puzzle" (alla Corriere) ---------- */
.foto-puzzle { position: relative; display: block; background: #fff; }
.foto-puzzle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-puzzle .fp-main, .foto-puzzle .fp-a, .foto-puzzle .fp-b { position: absolute; overflow: hidden; }
/* una secondaria: principale piena + tessera in basso a destra, sormontata */
.fp-n1 .fp-main { inset: 0; }
.fp-n1 .fp-a {
  right: 0; bottom: 7%; width: 34%; height: 48%;
  border: 4px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
/* due secondarie: principale a sinistra, tessera in alto a destra,
   seconda tessera piu grande che si sovrappone alla principale */
.fp-n2 .fp-main { top: 0; left: 0; bottom: 0; width: 71%; }
.fp-n2 .fp-a {
  top: 0; right: 0; width: 28%; height: 42%;
  border-left: 4px solid #fff; border-bottom: 4px solid #fff;
}
.fp-n2 .fp-b {
  right: 0; bottom: 4%; width: 35%; height: 50%;
  border: 4px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

/* =====================================================================
   Geogiochi v2 — redesign "hub di giochi"
   Da ACCODARE in fondo a style.css del tema NG2 (deve venire dopo le
   sezioni "Geogiochi — pagina dedicata" e "identità colore": molte
   regole sovrascrivono a parità di specificità).
   Richiede i piccoli ritocchi di markup descritti in README-tema.md
   (masthead con tessere + wordmark; classe gg-hero--{chiave} sul
   blocco .gg-testa; kicker del giorno). Il motore assets/giochi.js
   resta invariato.
   ===================================================================== */

/* ---------- Testata: kicker, tessere, wordmark ---------- */
.gg-masthead { text-align: center; padding: 26px 20px 0; }
.gg-kicker { font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--meta); }
.gg-kicker .dot { color: var(--gold); } /* 29/08: come il punto del logotipo */
.gg-tiles { display: flex; justify-content: center; gap: 7px; margin: 18px 0 10px; }
.gg-tiles .g-tile { width: 34px; height: 34px; border-radius: 7px; font-size: 18px; box-shadow: 2px 2px 0 var(--ink); }
.gg-tiles .g-tile:nth-child(1) { transform: rotate(-4deg); }
.gg-tiles .g-tile:nth-child(2) { transform: rotate(3deg); }
.gg-tiles .g-tile:nth-child(3) { transform: rotate(-2deg); }
.gg-tiles .g-tile:nth-child(4) { transform: rotate(4deg); }
.gg-tiles .g-tile:nth-child(5) { transform: rotate(-3deg); }
.gg-wordmark { font-size: clamp(44px, 7vw, 64px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.gg-wordmark .gg-dot { color: var(--gold); }
.gg-payoff-top { font-family: var(--sans); font-size: 13.5px; color: var(--meta); line-height: 1.55; max-width: 54ch; margin: 12px auto 0; }
.gg-rubrica { display: none; }

/* ---------- Nav: pillole con ombra sul gioco attivo ---------- */
.gg-topbar { border-top: none; }
.gg-nav { padding: 22px 0 26px; }
.gg-tab { border-width: 1.5px; transition: transform 0.08s; }
a.gg-tab:hover { border-color: var(--ink); transform: translate(-1px, -1px); }
.gg-tab.attiva { border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* ---------- Colonna centrale ---------- */
.gg-main { max-width: 844px; padding-top: 34px; }

/* ---------- Hero nel colore del gioco ---------- */
.gg-testa { margin-bottom: 0; }
.gg-hero {
  position: relative; overflow: hidden; border: 1.5px solid var(--ink);
  padding: 28px 30px; gap: 26px; flex-wrap: wrap; color: #fff;
}
.gg-hero--cruciverba { background: var(--gc-cruciverba); }
.gg-hero--dove { background: var(--gc-dove); }
.gg-hero--quiz { background: var(--gc-quiz); color: var(--ink); }
.gg-hero--intruso { background: var(--gc-intruso); }
.gg-hero--cronologia { background: var(--gc-cronologia); }
.gg-hero::after {
  position: absolute; right: -14px; bottom: -60px;
  font: 700 230px/1 var(--mono); opacity: 0.14;
  pointer-events: none; user-select: none;
}
.gg-hero--cruciverba::after { content: '#'; }
.gg-hero--dove::after { content: '?'; }
.gg-hero--quiz::after { content: '\2713'; }
.gg-hero--intruso::after { content: '\2260'; }
.gg-hero--cronologia::after { content: '\21C5'; }
.gg-hero .gg-titolo { position: relative; }
.gg-hero-kicker { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; opacity: 0.85; }
.gg-hero h1 { font-size: clamp(26px, 4.4vw, 36px); line-height: 1.12; margin: 10px 0; }
.gg-hero .gg-payoff { color: inherit; opacity: 0.92; font-size: 13.5px; max-width: 46ch; }

/* Filotto: cartellino bianco sull'hero */
.gg-hero #ng-filotto { position: relative; align-self: center; }
.gg-hero .gioco-score.in-testa .gs-box {
  background: #fff; border: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(22, 24, 26, 0.55); padding: 14px 24px 12px;
}
.gg-hero .gs-num { font-size: 40px; color: var(--ink); }
.gg-hero .gioco-score.in-testa .gs-msg { color: inherit; opacity: 0.85; }

/* ---------- Scheda di gioco: bordo pieno + ombra dura ---------- */
.gg-scheda .ng-gioco, .gg-scheda .ng-dove, .gg-scheda .ng-quiz,
.gg-scheda .ng-cronologia, .gg-scheda .ng-intruso {
  border: 1.5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); background: #fff;
}

/* Banda "Come si vince": riga neutra sotto il bordo alto */
.g-banda, .g-banda--cruciverba, .g-banda--dove, .g-banda--quiz,
.g-banda--intruso, .g-banda--cronologia {
  background: #fff; border-left: none; border-bottom: 1px solid var(--hair);
}
.gg-scheda .g-banda { margin: -26px -28px 18px; padding: 14px 28px; }
.gg-scheda .ng-intruso .g-banda { margin: -20px -28px 18px; }

/* ---------- Opzioni: bottoni tattili ---------- */
.g-opzione {
  font-weight: 600; font-size: 14.5px; padding: 13px 16px;
  border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.08s;
}
.g-opzione:hover:not(:disabled):not(.giusta):not(.sbagliata) { border-color: var(--ink); background: #fff; transform: translate(-1px, -1px); }
.g-opzione.giusta { background: var(--accent); border-color: var(--accent); box-shadow: 3px 3px 0 var(--ink); }
.g-opzione.sbagliata { border-color: var(--red); box-shadow: none; }
.g-opzione:disabled { cursor: default; opacity: 1; }
.g-opzione:disabled:not(.giusta):not(.sbagliata) { opacity: 0.55; box-shadow: none; }

/* ---------- Cruciverba: caselle più grandi ---------- */
.ng-gioco .caselle input { width: 40px; height: 44px; border-width: 1.5px; font-size: 19px; }

/* ---------- Bottoni d'azione ---------- */
.g-avanti, .g-share {
  background: var(--ink); font-weight: 700; padding: 12px 26px;
  box-shadow: 3px 3px 0 var(--accent); transition: transform 0.08s;
}
.g-avanti:hover, .g-share:hover { background: var(--ink); transform: translate(-1px, -1px); }

/* ---------- Cronologia: righe con ombra ---------- */
.g-cron-riga { border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--hair); }
.g-cron-riga.giusta { border-color: var(--accent); box-shadow: none; }
.g-cron-riga.sbagliata { border-color: var(--red); box-shadow: none; }
.g-cron-btn { border: 1.5px solid var(--ink); width: 36px; height: 36px; }

/* ---------- Esito ---------- */
.g-esito { border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); animation: ggpop 0.3s ease-out; }
.g-esito.vinto { border-top: 5px solid var(--accent); }
.g-esito.perso { border-top: 5px solid var(--red); }
@keyframes ggpop { from { transform: scale(0.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- La settimana: da righe a cartoline ---------- */
.gioco-sett {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px; border-top: 2px solid var(--ink); padding-top: 12px; margin-top: 44px;
}
.gioco-sett-titolo { grid-column: 1 / -1; margin-bottom: 4px; }
.gs-riga, .gs-riga:last-child {
  flex-direction: column; align-items: flex-start; gap: 7px;
  border: 1.5px solid var(--chip); padding: 14px 14px 12px; background: #fff;
}
.gs-riga.attuale, .gs-riga.attuale:last-child {
  border-color: var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink);
}
.gs-riga .g-tile { width: 26px; height: 26px; border-radius: 6px; font-size: 14px; }
.gs-riga-testo { flex-direction: column; align-items: flex-start; gap: 6px; }
.gs-riga-tit { font-size: 15.5px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.gs-riga-quando { font-size: 11px; font-weight: 700; }

/* ---------- Newsletter ---------- */
.article-nl.gg-nl { border: 1.5px solid var(--ink); border-top-width: 1.5px; border-top-color: var(--ink); }
.gg-nl .nl-form input[type="email"] { border-width: 1.5px; }
.gg-nl .nl-form button { border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 700; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .gg-hero { padding: 22px 20px; }
  .gg-hero::after { font-size: 160px; bottom: -40px; }
  /* Filotto compatto in RIGA sotto il titolo: il cartellone verticale
     spingeva il gioco sotto la piega (rapporto design 24/08). */
  .gg-hero #ng-filotto { align-self: stretch; }
  .gg-hero .gioco-score.in-testa { display: flex; align-items: center; gap: 14px; text-align: left; }
  .gg-hero .gioco-score.in-testa .gs-box { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; flex: none; }
  .gg-hero .gs-num { font-size: 24px; }
  .gg-hero .gioco-score.in-testa .gs-label { margin: 0; }
  .gg-hero .gioco-score.in-testa .gs-msg { margin: 0; max-width: none; flex: 1; }
  .gioco-sett { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .gioco-sett { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Integrazione v2: il payoff dell'hero mostra già l'attacco del post, quindi
   il paragrafo introduttivo dentro la scheda si nasconde (era ridondante). */
.gg-scheda > p:first-child { display: none; }

/* Correzioni allineamento v2: la scheda eredita il max-width della colonna
   articolo (633px) ma qui la colonna è quella dell'hero; e nella topbar dei
   giochi la data deve bilanciare il flex del link di ritorno, sennò le
   pillole slittano a sinistra. */
.gg-main .gg-scheda { max-width: none; }
.gg-topbar .today { flex: 1; white-space: nowrap; }

/* ---------- Rubriche magazine: GeoCucina / GeoIdee ---------- */
.magazine { --mg: #C25A1F; --mg-scuro: #9A4617; }
.magazine.mg-idee { --mg: #2456A4; --mg-scuro: #1A3F7A; }
.magazine a { color: var(--mg); }
.magazine a:hover { color: var(--mg-scuro); }
.mg-hero { height: 66vh; min-height: 380px; overflow: hidden; }
.mg-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-testata { text-align: center; padding: 44px 24px 36px; border-bottom: 1px solid var(--hair); }
.mg-rubrica { font-family: var(--sans); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mg); font-weight: 700; }
.mg-testata h1 { font-size: clamp(38px, 6.5vw, 68px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; margin: 18px auto 0; max-width: 18ch; }
.mg-standfirst { font-size: clamp(18px, 2.4vw, 22px); font-style: italic; line-height: 1.5; color: var(--gray); margin: 22px auto 0; max-width: 50ch; }
.mg-meta { font-family: var(--sans); font-size: 12.5px; color: var(--meta); margin-top: 26px; }
.mg-body { max-width: 680px; margin: 0 auto; padding: 44px 24px 60px; font-size: 19.5px; line-height: 1.75; color: var(--body); }
.mg-body > p:first-of-type::first-letter { float: left; font-size: 76px; line-height: 0.82; font-weight: 700; color: var(--mg); padding: 6px 12px 0 0; }
.mg-body p { margin: 0 0 28px; }
.mg-body h2 { font-size: 30px; letter-spacing: -0.02em; line-height: 1.2; margin: 46px 0 18px; }
.mg-body blockquote { margin: 42px 0; padding: 28px 10px; border-top: 1px solid var(--mg); border-bottom: 1px solid var(--mg); text-align: center; font-size: 26px; line-height: 1.4; font-style: italic; color: var(--ink); }
.mg-body blockquote p { margin: 0; }
.mg-body p.mg-kicker { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--mg); border-top: 2px solid var(--ink); padding-top: 14px; margin: 46px 0 14px; }
.mg-body p.mg-kicker + h2 { margin-top: 0; }
.mg-passo { display: flex; gap: 20px; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--hair); }
.mg-passo .n { flex: none; font-family: var(--sans); font-size: 30px; font-weight: 700; color: var(--mg); line-height: 1; width: 52px; }
.mg-passo p { margin: 0; }
.mg-box { background: var(--paper); border-top: 3px solid var(--mg); padding: 26px 30px 28px; margin: 14px 0 40px; }
.mg-box h3, .mg-riquadro h3 { font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; margin: 0 0 14px; color: var(--ink); }
.mg-box h3 { color: var(--mg); margin-bottom: 4px; }
.mg-box .mg-sub { font-family: var(--sans); font-size: 12px; color: var(--faint); margin-bottom: 16px; }
.mg-box ul { list-style: none; margin: 0; padding: 0; font-size: 16px; line-height: 1.55; display: flex; flex-direction: column; gap: 11px; }
.mg-box ul li { border-bottom: 1px solid var(--hair); padding-bottom: 11px; }
.mg-box ul li:last-child { border-bottom: none; padding-bottom: 0; }
.mg-box p, .mg-riquadro p { font-size: 17px; line-height: 1.7; margin: 0; }
.mg-riquadro { border: 1.5px solid var(--ink); padding: 24px 28px 26px; margin: 44px 0 0; }
.mg-riquadro p.mg-pratica { font-family: var(--sans); font-size: 14.5px; color: var(--gray); }
.mg-riquadro + .mg-riquadro { margin-top: 24px; }
.mg-due { width: min(940px, calc(100vw - 48px)); margin: 30px 0 30px 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.mg-due figure { margin: 0; }
.mg-due img, .mg-due .placeholder-media { width: 100%; height: 330px; object-fit: cover; display: block; }
.mg-body figure.mg-larga { margin: 44px -24px 36px; }
.mg-body figure.mg-larga img, .mg-body figure.mg-larga .placeholder-media { width: 100%; height: 380px; object-fit: cover; display: block; }
.mg-body figcaption { font-family: var(--sans); font-size: 12px; color: var(--faint); padding-top: 8px; }
.mg-rivista { border-top: 1px solid var(--ink); background: var(--paper); }
.mg-rivista-inner { max-width: 980px; margin: 0 auto; padding: 30px 24px 38px; }
.mg-rivista-label { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--meta); font-weight: 700; margin-bottom: 16px; }
.mg-rivista-card { display: flex; gap: 22px; align-items: center; background: #fff; border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 20px 24px; color: var(--ink) !important; }
.mg-rc-testo { min-width: 0; flex: 1; }
.mg-rc-rubrica { font-family: var(--sans); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; }
.mg-cucina .mg-rc-rubrica, .mg-cucina .mg-rc-freccia { color: #2456A4; }
.mg-idee .mg-rc-rubrica, .mg-idee .mg-rc-freccia { color: #C25A1F; }
.mg-rc-titolo { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-top: 6px; }
.mg-rc-freccia { font-family: var(--sans); font-size: 22px; flex: none; }
.mg-nl { max-width: 680px; margin: 0 auto; padding: 10px 24px 30px; }
.mg-azioni { display: flex; gap: 10px; margin-top: 20px; }
.mg-btn {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 9px 16px;
  background: #fff; border: 1px solid var(--mg); color: var(--mg); cursor: pointer;
}
.mg-btn:hover { background: var(--mg); color: #fff; }

/* Due box sotto il lead invece di tre: più aria, foto più grandi */
.lead-sotto { grid-template-columns: 1fr 1fr; }
.ls-box .media-frame { height: 156px; }

/* Mondo oggi in home: box bianco, integrato con le liste di notizie */
.mo-vista { margin-top: 0; background: #fff; border-top: none; padding: 0 0 6px; }
.mo-vista .mo-head { font-family: var(--sans); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); font-weight: 600; padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: 2px; display: flex; justify-content: space-between; align-items: baseline; }
.mo-vista .mo-head small { letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--faint); font-size: 11px; }
.mo-vista li { padding: 13px 0; border-bottom: 1px solid var(--hair); }
.mo-vista li a { font-family: var(--serif); font-size: 28px; letter-spacing: -0.01em; line-height: 1.22; font-weight: 700; color: var(--ink); }
.mo-vista li a:hover { color: var(--accent-dark); }
.mo-vista .mo-tutto { display: inline-block; margin-top: 12px; }

/* Arrivo dalle ancore del box mondo-oggi: un filo d'aria sopra il titolo */
.article-body h2[id], .article-body h3[id] { scroll-margin-top: 22px; }

/* Ultime dalla redazione: miniatura a sinistra, colonna più leggera */
.ultime-side-item.con-foto { display: block; }
.ultime-side-item .u-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 9px; }
.ultime-side-item .u-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ultime-side-item .u-testo { display: block; }
.ultime-side-item.con-foto h2 { font-size: 28px; line-height: 1.14; }

/* ---------- Home, blocco Letture: un solo libro con copertina ---------- */
.libro-uno { display: flex; gap: 18px; align-items: flex-start; }
.libro-uno .l-cop { flex: none; width: 118px; display: block; }
.libro-uno .l-cop img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--hair); box-shadow: 4px 5px 14px rgba(0, 0, 0, 0.16);
}
.libro-uno .l-testo { min-width: 0; }
.libro-uno h3 { font-size: 21px; letter-spacing: -0.01em; line-height: 1.24; font-weight: 700; margin: 0 0 8px; }
.libro-uno h3 a { color: var(--ink); }
.libro-uno .meta { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--gray); margin: 0 0 10px; }
.libro-uno .l-more { font-family: var(--sans); font-size: 12.5px; font-weight: 600; }


/* ============ Mobile — testata hamburger e anti-sbordamento (verifica 08/08) ============ */
/* NB per la sessione parallela: blocco da PRESERVARE nei redeploy — scaricare style.css dal server prima di modificarlo. */
html, body { max-width: 100%; overflow-x: clip; }
.mobilebar, .nav-toggle, .search-toggle { display: none; }
@media (max-width: 620px) {
  /* Fluido, non fisso: a 36px fissi la scritta (21 glifi in nowrap) è larga
     ~330px e sugli schermi da 360 CSS px (Galaxy S24) usciva tagliata a
     destra — visto sul telefono di Sergio il 15/08. 9.2vw: 33px a 360,
     36px da 391 in su. */
  /* 8.4vw e non 9.2: il punto rosso (1.9em, fuori misura per disegno) va
     contato nell'ingombro — a 9.2vw toccava il bordo destro (15/08 sera). */
  /* 29/08: «la testata si può ingrandire» — 10.2vw: 36.7px a 360, 39.8px a 390, tetto 42. */
  .brand a { font-size: clamp(22px, 10.2vw, 42px); letter-spacing: -0.03em; }
  .masthead { padding-top: 14px; padding-bottom: 8px; gap: 0; }
  .mobilebar { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; }
  .nav-toggle { display: flex; flex-direction: column; gap: 4px; background: none; border: 0; padding: 8px 2px; cursor: pointer; }
  .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
  .menu-aperto .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-aperto .nav-toggle span:nth-child(2) { opacity: 0; }
  .menu-aperto .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .mobilebar .mb-today { flex: 1; text-align: center; font-family: var(--sans); font-size: 11px; color: var(--faint); }
  .search-toggle { display: block; background: none; border: 1px solid var(--chip); padding: 6px 12px; font-family: var(--sans); font-size: 12.5px; color: var(--meta); cursor: pointer; }
  .topbar { display: none; }
  .menu-aperto .topbar, .cerca-aperta .topbar { display: block; padding-bottom: 6px; }
  .topbar .today { display: none; }
  .site-nav { display: none; }
  .menu-aperto .site-nav { display: block; padding: 4px 0 10px; white-space: normal; }
  .site-nav ul { display: block; }
  .site-nav li { display: block; border-bottom: 1px solid var(--hair3); }
  .site-nav li:last-child { border-bottom: none; }
  .site-nav a { display: block; padding: 12px 2px; font-size: 15px; }
  .site-nav .current-menu-item > a, .site-nav a.is-active { border-bottom: none; color: var(--accent); }
  .topbar .search-zone { display: none; }
  .cerca-aperta .search-zone { display: flex; width: 100%; padding: 12px 0; }
  .cerca-aperta .search-form { display: flex; width: 100%; }
  .cerca-aperta .search-form input[type="search"] { flex: 1; width: auto; font-size: 16px; }
  .mg-hero { max-height: 46vh; overflow: hidden; }
  .mg-hero img { width: 100%; max-height: 46vh; object-fit: cover; }
  .gg-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
  .redazione-grid { gap: 26px 16px; }
  .redattore .media-circle { width: 96px; height: 96px; }
}

/* I Temi: economia, tecnologia, energia, difesa — un pezzo per ambito */
.home-temi { padding: 30px 0 6px; border-top: 1px solid var(--hair); }
.temi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.tema-box .media-frame { height: 175px; display: block; margin-bottom: 10px; }
.tema-box .kicker { font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.tema-box h3 { font-size: 28px; line-height: 1.25; letter-spacing: -0.01em; margin: 6px 0; }
.tema-box h3 a { color: var(--ink); }
.tema-box p { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--gray); margin: 0; }
@media (max-width: 980px) { .temi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .temi-grid { grid-template-columns: 1fr; } }


/* ============ Mobile — notizie in lista + celle gioco (08/08, da PRESERVARE) ============ */
@media (max-width: 620px) {
  /* stile quotidiano: le notizie secondarie sono righe di lista, non card */
  .lead-sotto { display: block; border-top: 1px solid var(--ink); margin-top: 10px; }
  .ls-box { background: none; border-top: none; padding: 13px 0; border-bottom: 1px solid var(--hair); overflow: hidden; }
  .ls-box:last-child { border-bottom: none; }
  .ls-box .media-frame { float: none; width: 100%; height: 200px; margin: 0 0 8px; }
  .ls-box .geo { margin: 0; }
  .ls-box h2 { font-size: 28px; line-height: 1.18; margin: 5px 0 0; }
  /* In lista i 14px laterali della card desktop restavano su kicker e orario
     (il titolo era già a 0): righe della stessa lista con rientri diversi
     sembravano impaginate male (review UI 24/08). */
  /* .lead-sotto davanti: le regole storiche dei 14px (righe 1639/1647/1355)
     vengono DOPO nel file e a pari specificità vincerebbero loro. */
  .lead-sotto .ls-box > .kicker, .lead-sotto .ls-box .ora-fresca,
  .lead-sotto .ls-box .firma-lista { margin-left: 0; margin-right: 0; }
  /* Sotto il lead sono TUTTI «Primo piano»: il kicker ripetuto 5 volte è
     rumore — la sezione la dice già l'apertura. */
  .lead-sotto .ls-box > .kicker { display: none; }
  /* Niente scatoloni pubblicitari a formato desktop sui telefoni: gli slot
     tornano quando ci saranno formati mobile veri. */
  main.wrap > .ad-slot { display: none; }
  main.wrap > .ad-slot.ad-mobile { display: flex; } /* 29/08: la strip mobile è un formato mobile vero */
  /* Le strip Opinioni si fanno discrete: stessa identità, metà altezza. */
  .op-kicker { font-size: 20px; }
  .op-kicker::after { width: 64px; margin: 6px auto 0; }
  .op-titolo { font-size: 20px; margin-top: 8px; }
  .op-strip .op-autore { margin-top: 5px; font-size: 13.5px; }
  .analisi-grid { gap: 0; }
  .analisi-grid article { display: block; overflow: hidden; padding: 13px 0; border-bottom: 1px solid var(--hair); }
  .analisi-grid article:last-child { border-bottom: none; }
  .analisi-grid .media-frame { float: none; width: 100%; height: 200px; margin: 0 0 8px; }
  .analisi-grid h3 { font-size: 28px; line-height: 1.18; margin: 4px 0 6px; }
  .analisi-grid .preview { display: none; }
  /* cruciverba: caselle più alte da toccare, che si comprimono da sole
     sulle parole lunghe — così stanno SEMPRE nello schermo */
  .ng-gioco .caselle { display: flex; }
  .ng-gioco .caselle input { flex: 0 1 38px; width: 38px; height: 44px; min-width: 0; font-size: 18px; }
  .gg-nav { padding-right: 28px; }
}

/* Rassegna mondo oggi: la foto di ogni notizia (segnaposto finché non c'è Getty) */
.single .mo-foto { margin: 10px 0 16px; height: 210px; }
.mo-foto img, .mo-foto .placeholder-media { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Atlante dei concetti: glossario A–Z (da PRESERVARE) ---- */
.atl-lettera { font-family: 'Source Serif 4', Georgia, serif; font-size: 30px; font-weight: 700; line-height: 1; margin: 36px 0 0; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.archive-filters + .atl-lettera { margin-top: 16px; }

/* Box mondo oggi in home: foto a tutta larghezza sopra il titolo, alla Corriere */
.mo-vista li.con-foto { display: block; }
.mo-vista .mo-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 9px; }
.mo-vista .mo-thumb img, .mo-vista .mo-thumb .placeholder-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-vista .mo-testo { display: block; }

/* La prima pagina continua sotto il primo piano: righe alla Corriere,
   testo a sinistra e foto a destra, niente data */
.home-seguito { margin-top: 26px; }
.sg-item { display: flex; gap: 22px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--hair); }
.sg-testo { flex: 1; min-width: 0; }
.sg-item h3 { font-size: 28px; line-height: 1.18; letter-spacing: -0.015em; font-weight: 700; margin: 6px 0 10px; }
.sg-item h3 a { color: var(--ink); }
.sg-item h3 a:hover { color: var(--accent-dark); }
.sg-item p { font-size: 15px; line-height: 1.55; color: var(--gray); margin: 0; max-width: 60ch; }
.sg-foto { flex: none; width: 320px; height: 190px; overflow: hidden; display: block; }
.sg-foto img, .sg-foto .placeholder-media { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) {
  .sg-item { flex-direction: column; }
  .sg-foto { width: 100%; height: 180px; order: -1; }
}

/* Ritagli: privilegia la parte alta (visi e soggetti) finché l'AI non
   indica il punto focale della singola immagine (meta ng2_focus, inline) */
.media-frame img, .sg-foto img, .u-thumb img, .mo-thumb img, .mo-foto img, .r-thumb img, .tema-box img { object-position: center 30%; }

/* MOBILE alla Corriere: nelle liste solo i titoli (via le righe di
   introduzione) e la foto mai accanto al testo — sempre sopra, piena larghezza */
@media (max-width: 700px) {
  .lead .standfirst,
  .sg-testo p,
  .row-article p,
  .home-temi .tema-box p,
  .home-dossier .dossier-card p,
  .home-firme article p,
  .home-analisi article p, .home-analisi .preview,
  .home-mappa .preview,
  .home-tre article p,
  .ultime-side-item p,
  .archive .row-article p { display: none; }

  .sg-item { flex-direction: column; gap: 8px; }
  .sg-foto { width: 100%; height: 200px; order: -1; }
  .ls-box { display: block; }
  .ls-box .media-frame { width: 100%; height: 200px; margin-bottom: 8px; }
  .row-article.con-foto { grid-template-columns: 1fr; }
  .row-article .r-thumb { order: -1; height: 180px; margin-bottom: 6px; }

  /* RITMO ALTERNATO: foto grande solo in testa a ogni blocco, poi titoli
     compatti col filetto — nel flusso centrale una foto ogni tre notizie */
  .lead-sotto .ls-box:nth-child(n+3) .media-frame { display: none; }
  .lead-sotto .ls-box:nth-child(n+3) { padding: 13px 0 0; }
  .home-seguito .sg-item:not(:nth-child(2n+1)) .sg-foto { display: none; }
  .home-seguito .sg-item { padding: 15px 0; }
  .mo-vista li.con-foto:nth-child(2n) .mo-thumb { display: none; }
  .ultime-side-item.con-foto:nth-child(2n) .u-thumb { display: none; }
  .home-temi .tema-box:nth-child(2n) .media-frame { display: none; }
  .home-temi .tema-box:nth-child(2n) { padding: 12px 0 0; border-top: 1px solid var(--hair); }

  /* Firme e Dossier: via i rimandi e i sottotitoli, restano i titoli di sezione */
  .home-firme .block-more, .home-dossier .block-more, .home-dossier .block-sub { display: none; }

  /* Le Firme: una dietro l'altra; ritratto e nome sulla stessa riga */
  .firme-grid { grid-template-columns: 1fr; }
  .firma { display: block; padding: 0 0 20px !important; margin-bottom: 20px; border-bottom: 1px solid var(--hair); }
  .firma:last-child { margin-bottom: 0; border-bottom: none; }
  .firma .media-circle { display: inline-block; vertical-align: middle; width: 46px; height: 46px; margin-right: 11px; }
  .firma .firma-nome { display: inline-block; vertical-align: middle; }
  .firma h3 { margin: 10px 0 0; }

  /* Aria: più respiro fra foto e blocchi */
  .sg-item { padding: 22px 0 !important; }
  .sg-foto { margin-bottom: 6px; }
  .mo-vista li { padding: 16px 0; }
  .mo-vista .mo-thumb { margin-bottom: 11px; }
  .ultime-side-item { padding: 18px 0; }
  .ultime-side-item .u-thumb { margin-bottom: 11px; }
  .home-temi .tema-box .media-frame { margin-bottom: 11px; }
  .ls-box { margin-bottom: 10px; }

  /* Atlante dei concetti: voci in colonna, mai affiancate */
  .atlante-grid { grid-template-columns: 1fr !important; gap: 18px 0; }
  .atlante-grid a { padding: 0 !important; border-right: none; }
}

/* Due divisioni alla Corriere: filetto leggero fra gli articoli, linea
   spessa fra le sezioni — e le linee di sezione corrono SEMPRE a tutta
   larghezza dello schermo, come le bande colorate */
.home-temi, .home-dossier, .home-tre, .home-mappa {
	border-top: 2px solid var(--ink);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}
.home-temi, .home-dossier, .home-tre { padding-top: 26px; }
.home-mappa { border-bottom: 2px solid var(--ink); }
.home-temi, .home-dossier { padding-bottom: 28px; }

/* Primo piano mobile: righe col passo uguale — filetto sopra ogni voce
   (tranne la prima), stesso respiro sopra e sotto, niente margini sparsi */
@media (max-width: 700px) {
  .lead-sotto { display: block; }
  .lead-sotto .ls-box, .lead-sotto .ls-box:nth-child(n+3) { margin: 0; padding: 17px 0; border-top: 1px solid var(--hair); }
  .lead-sotto .ls-box:first-child { border-top: none; padding-top: 2px; }
  .lead-sotto .ls-box .media-frame { margin-bottom: 10px; }
  .home-seguito { margin-top: 4px; }
}

/* Firma sotto i titoli nelle liste di home */
.firma-lista { font-family: var(--sans); font-size: 12.5px; color: var(--meta); margin-top: 6px; }

/* Il personaggio del giorno: la foto è lo sfondo intero del box,
   il testo si legge sopra una velatura scura dal basso */
.personaggio-box { display: block; position: relative; margin: 30px 0 34px; min-height: 380px; background-color: var(--ink); background-size: cover; overflow: hidden; border-radius: 18px; }
.personaggio-box::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,12,0.88) 0%, rgba(10,12,12,0.45) 45%, rgba(10,12,12,0.05) 75%); }
.personaggio-box .pg-testo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px 20px 20px; }
.personaggio-box .pg-label { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #E8C877; font-weight: 700; margin-bottom: 8px; }
.personaggio-box h3 { font-size: 30px; line-height: 1.1; letter-spacing: -0.01em; font-weight: 700; margin: 0 0 4px; color: #fff; }
.personaggio-box .pg-ruolo { font-family: var(--sans); font-size: 12px; letter-spacing: 0.02em; color: rgba(255,255,255,0.75); margin-bottom: 9px; }
.personaggio-box:not(.con-sfondo) .pg-ruolo { color: var(--meta); }
.personaggio-box p { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.92); margin: 0; }
.personaggio-box:not(.con-sfondo) { min-height: 0; background: #fff; border: 2px solid var(--accent); }
.personaggio-box:not(.con-sfondo)::after { display: none; }
.personaggio-box:not(.con-sfondo) .pg-testo { position: static; }
.personaggio-box:not(.con-sfondo) .pg-label { color: var(--accent); }
.personaggio-box:not(.con-sfondo) h3 { color: var(--ink); }
.personaggio-box:not(.con-sfondo) p { color: var(--gray); }




/* ---- Opinioni e Commenti alla Corriere (da PRESERVARE):
   strip a campione nel feed (kicker centrato, foto autore al bordo destro)
   + pannello firme in fondo (griglia 2 colonne su fascia grigia rigata). ---- */
.op-strip { margin: 30px 0; }
.op-strip--band { margin: 30px 0; }
.op-in {
  position: relative; text-align: center; padding: 24px 28px 26px;
  background-color: #E8E6E0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M-3 17 17 -3M-7 7 7 -7M3 21 21 3' stroke='%23CDC9C0' stroke-width='1' opacity='0.8'/%3E%3C/svg%3E");
  overflow: hidden;
}
.op-kicker { display: block; font-family: 'Tangerine', cursive; font-size: 26px; font-weight: 700; letter-spacing: 0.01em; color: var(--gray); line-height: 1; }
.op-kicker em { font-style: normal; }
.op-kicker .op-amp { font-size: 1.45em; line-height: 0; vertical-align: -0.08em; }
.op-kicker::after { content: ""; display: block; width: 96px; height: 2px; background: #A9A49B; margin: 9px auto 0; }
.home-opinioni .op-kicker { font-size: 32px; }
.op-titolo { font-size: 31px; font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; margin: 12px 0 0; }
.op-titolo a { color: var(--ink); }
.op-strip .op-autore { display: block; margin-top: 8px; font-size: 15px; }
.op-strip .op-autore a { color: var(--accent); }
.op-in.con-foto { padding-right: 190px; }
.op-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 170px; overflow: hidden; }
.op-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(1); display: block; }
.home-opinioni { padding: 10px 0 40px; }
.home-opinioni .wrap {
  background-color: #E8E6E0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M-3 17 17 -3M-7 7 7 -7M3 21 21 3' stroke='%23CDC9C0' stroke-width='1' opacity='0.8'/%3E%3C/svg%3E");
  padding: 30px 30px 34px;
}
.home-opinioni .op-head { text-align: center; }
.opinioni-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.op-cella { display: flex; gap: 18px; align-items: flex-start; padding: 22px 26px; border-top: 1px solid var(--hair); }
.opinioni-grid .op-cella:nth-child(-n+2) { border-top: none; }
.opinioni-grid .op-cella:nth-child(2n) { border-left: 1px solid var(--hair); }
.op-cella .op-tondo img { width: 84px; height: 84px; border-radius: 50%; filter: grayscale(1); display: block; object-fit: cover; }
.op-iniziali { width: 84px; height: 84px; border-radius: 50%; background: var(--ink); color: #F7F6F3; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 30px; font-style: italic; }
.op-cella h3 { font-size: 24px; line-height: 1.22; font-weight: 700; margin: 0 0 8px; }
.op-cella h3 a { color: var(--ink); }
.op-cella .op-autore { display: block; font-size: 14.5px; }
.op-cella .op-autore a { color: var(--accent); }
/* GeoReportage (da PRESERVARE): player con proporzioni VERE — vince sul width:100%
   di .mg-body img che schiacciava le foto contro il tetto di altezza — più barra
   autoplay e pausa; copertina in home con scrim deciso per il testo. */
.mg-dossier .mg-body .gdp-quadro img { width: auto; height: auto; max-width: 100%; max-height: 78vh; transition: opacity 0.25s ease; }
.gdp-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.18); z-index: 2; }
.gdp-barra i { display: block; height: 100%; width: 0; background: rgba(255,255,255,0.85); }
.gdp-play { position: absolute; left: 16px; bottom: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,0.14); color: #fff; font-size: 12px; cursor: pointer; }
.gdp-play:hover { background: rgba(255,255,255,0.3); }
@media (max-width: 700px) {
  .mg-dossier .mg-body .gdp-quadro img { max-height: 62vh; }
  .gdp-play { width: 30px; height: 30px; bottom: 10px; left: 12px; }
}

/* Firma nei box sotto il lead: allineata al titolo sopra (14px come l'h2; a filo sotto i 620 dove anche il titolo è a filo) (da PRESERVARE) */
.ls-box .firma-lista { margin-left: 14px; margin-right: 14px; }
@media (max-width: 620px) {
  .ls-box .firma-lista { margin-left: 0; margin-right: 0; }
}

/* Redazione e firme: schede centrate (richiesta Sergio, da PRESERVARE) */
.redattore { align-items: center; text-align: center; }
.redattore .media-circle { margin: 0 auto; }

/* Personaggio del giorno: etichetta in alto a sinistra, il viso resta libero (da PRESERVARE) */
.personaggio-box.con-sfondo .pg-label { position: absolute; top: 14px; left: 18px; z-index: 1; margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.personaggio-box:not(.con-sfondo) .pg-label { padding: 16px 20px 0; margin-bottom: 0; }

/* il trio senza il Punto: due colonne SOLO desktop (sotto i 980 vale l'1-colonna del blocco mobile) */
@media (min-width: 981px) { .home-tre { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .op-in { padding: 18px 16px 20px; }
  .op-in.con-foto { padding-right: 112px; }
  .op-iniziali { width: 64px; height: 64px; font-size: 24px; }
  .op-strip, .op-strip--band { margin: 24px 0; }
  .op-titolo { font-size: 23px; }
  .op-foto { width: 104px; }
  .opinioni-grid { grid-template-columns: 1fr; }
  .opinioni-grid .op-cella { border-left: none; padding: 16px 0; }
  .opinioni-grid .op-cella:nth-child(2) { border-top: 1px solid var(--hair); }
  .op-cella .op-tondo img { width: 64px; height: 64px; }
  .op-cella h3 { font-size: 19px; }
}

/* GeoDossier in home: la foto di copertina riempie l'intero box */
.home-geodossier { border-top: 2px solid var(--ink); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 14px max(14px, calc(50vw - 50% - 570px)) 18px; }
.gd-card { display: block; position: relative; min-height: 520px; background-color: var(--ink); background-size: cover; overflow: hidden; border-radius: 18px; }
.gd-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,12,0.86) 0%, rgba(10,12,12,0.35) 45%, rgba(10,12,12,0.02) 75%); }
.gd-card .gd-testo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 30px max(28px, calc((100% - 1180px) / 2 + 32px)) 34px; }
.gd-card .gd-testo > * { max-width: 760px; }
.gd-card .gd-label { font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em; color: #fff; font-weight: 700; margin-bottom: 12px; }
.gd-card .gd-label .dot { color: var(--gold); font-size: 1.4em; line-height: 0; vertical-align: baseline; }
.gd-card h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.015em; font-weight: 700; color: #fff; margin: 0 0 10px; }
.gd-card p { font-family: var(--sans); font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,0.92); margin: 0 0 10px; }
.gd-card .gd-firma { font-family: var(--sans); font-size: 12.5px; color: rgba(255,255,255,0.75); }
@media (max-width: 700px) { .gd-card { min-height: 340px; } .gd-card .gd-testo { padding: 18px 20px 20px; } }

/* Reportage GeoDossier: le foto del corpo escono dalla colonna del testo
   e corrono a tutta larghezza (con un tetto sui monitor molto grandi) */
.mg-dossier .mg-rubrica { color: var(--red, #B3222D); }
.mg-dossier .mg-body img { width: 100%; height: auto; display: block; }
.mg-dossier .mg-body figure { margin: 46px calc(50% - 50vw) 40px; }
.mg-dossier .mg-body figcaption { padding: 0 max(18px, calc(50vw - 590px)); }
.mg-dossier .mg-body figure img { width: 100%; height: auto; }
.mg-dossier .mg-body figcaption { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--meta); margin-top: 10px; }

/* Galleria del reportage GeoDossier: griglia a tutta larghezza in coda al pezzo */
.mg-dossier .gd-galleria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 46px calc(50% - 50vw) 40px; }
.mg-dossier .gd-galleria a { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.mg-dossier .gd-galleria img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .mg-dossier .gd-galleria { grid-template-columns: repeat(2, 1fr); } }

/* Player della galleria GeoDossier: una foto alla volta su fondo scuro */
.mg-dossier .gd-player { margin: 46px calc(50% - 50vw) 40px; background: #101212; }
.gdp-quadro { position: relative; margin: 0; display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.gdp-quadro img { max-width: 100%; max-height: 82vh; width: auto; height: auto; display: block; }
.gdp-freccia { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255,255,255,0.14); color: #fff; font-size: 22px; cursor: pointer; z-index: 2; }
.gdp-freccia:hover { background: rgba(255,255,255,0.3); }
.gdp-prev { left: 16px; }
.gdp-next { right: 16px; }
.gdp-quadro img { transition: opacity 0.18s ease; }
.gdp-play { position: absolute; left: 16px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,0.14); color: #fff; font-size: 14px; cursor: pointer; z-index: 2; }
.gdp-play:hover { background: rgba(255,255,255,0.3); }
.gdp-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.15); }
.gdp-barra i { display: block; height: 100%; width: 0; background: var(--red, #B3222D); }
.gdp-conta { position: absolute; right: 18px; bottom: 12px; font-family: var(--sans); font-size: 12.5px; color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.45); padding: 3px 10px; border-radius: 12px; }
.gd-player .gdp-did { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.9); padding: 12px max(18px, calc(50vw - 590px)) 16px; min-height: 3.2em; }
@media (max-width: 700px) { .gdp-quadro { min-height: 44vh; } .gdp-freccia { width: 38px; height: 38px; } }

/* Filetto verticale tra la parte principale e la colonna laterale:
   confine silenzioso alla Corriere (sparisce quando le colonne si impilano) */
.home-open > aside { border-left: 1px solid var(--hair); padding-left: 26px; }
@media (max-width: 980px) { .home-open > aside { border-left: none; padding-left: 0; } }

/* Copertina GeoReportage: scrim deciso — DEVE stare dopo il blocco gd-card originale (da PRESERVARE in coda) */
.gd-card::after { background: linear-gradient(to top, rgba(10,12,12,0.94) 0%, rgba(10,12,12,0.62) 38%, rgba(10,12,12,0.22) 66%, rgba(10,12,12,0.05) 85%); }

/* Testatine di rubrica più presenti (Il mondo oggi, Ultime, Personaggio) */
.side-head { font-size: 15px !important; }
.personaggio-box .pg-label { font-size: 13px; }

/* GeoReportage: apertura scenica — la foto d'ingresso prende quasi tutto lo schermo (da PRESERVARE in coda) */
.mg-dossier .mg-hero { height: 88vh; min-height: 480px; }
@media (max-width: 700px) {
  .mg-dossier .mg-hero { height: 72vh; max-height: 72vh; min-height: 0; }
  .mg-dossier .mg-hero img { max-height: 72vh; }
}

/* GeoReportage: nota editoriale d'apertura — tonda (mai corsiva) e con aria prima del racconto vero (da PRESERVARE in coda) */
.mg-dossier .mg-body p.mg-kicker, .mg-dossier .mg-body p.mg-kicker em { font-style: normal; }
.mg-dossier .mg-body p.mg-kicker { margin-bottom: 46px; }

/* Feed centrale: RITMO ALTERNATO su desktop — un pezzo con foto grande sopra,
   il successivo con la foto a destra (richiesta Sergio, da PRESERVARE in coda).
   Sotto i 700px comanda il ritmo mobile già esistente. */
@media (min-width: 701px) {
  .home-seguito .sg-item:nth-child(2n+1) { flex-direction: column; gap: 12px; }
  .home-seguito .sg-item:nth-child(2n+1) .sg-foto { order: -1; width: 100%; height: 280px; }
  .home-seguito .sg-item:nth-child(2n+1) .sg-testo p { max-width: none; }
  /* titoli del feed centrale più grandi (richiesta Sergio) */
  .home-seguito .sg-item h3 { font-size: 33px; line-height: 1.14; }
}

/* Card dei Temi: foto con gli angoli smussati come il personaggio */
.tema-box .media-frame { border-radius: 14px; overflow: hidden; }

/* Mobile: foto più alte in tutte le liste (richiesta 9/8 sera) */
@media (max-width: 700px) {
  .sg-foto { height: 265px; }
  .ls-box .media-frame { height: 265px; }
  .row-article .r-thumb { height: 235px; }
  .mo-vista .mo-thumb, .ultime-side-item .u-thumb { aspect-ratio: 4 / 3; }
  .home-temi .tema-box .media-frame { height: 235px; }
  .gd-card { min-height: 420px; }
}

/* Il puntino rosso di GeoDossier pulsa piano, come una spia di registrazione */
@keyframes gd-battito {
  0% { opacity: 1; }
  49% { opacity: 1; }
  50% { opacity: 0; }
  99% { opacity: 0; }
  100% { opacity: 1; }
}
.gd-card .gd-label .dot { display: inline-block; animation: gd-battito 1.3s linear infinite; }
@media (prefers-reduced-motion: reduce) { .gd-card .gd-label .dot { animation: none; } }

/* L'Intervista in home: ritratto ACCANTO al testo, non sopra (richiesta Sergio, da PRESERVARE in coda) */
.home-tre .intervista-block { display: grid; grid-template-columns: 150px 1fr; gap: 0 16px; align-content: start; }
.home-tre .intervista-block .block-title { grid-column: 1 / -1; }
.home-tre .intervista-block .media-frame { grid-column: 1; grid-row: 2 / 4; height: 150px; margin-bottom: 0; }
.home-tre .intervista-block h3 { grid-column: 2; margin: 0 0 8px; font-size: 24px; }
.home-tre .intervista-block .meta { grid-column: 2; align-self: start; }
@media (max-width: 700px) {
  .home-tre .intervista-block { grid-template-columns: 120px 1fr; }
  .home-tre .intervista-block .media-frame { height: 120px; }
  .home-tre .intervista-block h3 { font-size: 20px; }
}

/* Player GeoReportage a schermo intero: bottone parlante + overlay per iPhone (da PRESERVARE in coda) */
.gdp-full-btn { position: absolute; top: 12px; right: 14px; z-index: 2; border: none; border-radius: 16px; padding: 7px 14px; font-family: var(--sans); font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,0.16); color: #fff; cursor: pointer; }
.gdp-full-btn:hover { background: rgba(255,255,255,0.32); }
.gd-player.gdp-pieno { position: fixed; inset: 0; z-index: 9999; margin: 0; background: #101212; display: flex; flex-direction: column; justify-content: center; }
.gd-player.gdp-pieno .gdp-quadro { flex: 1; min-height: 0; }
.gd-player.gdp-pieno .gdp-quadro img { max-height: none; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.gd-player:fullscreen .gdp-quadro img, .gd-player.gdp-pieno .gdp-quadro img { max-height: calc(100vh - 90px); }
@media (max-width: 700px) { .gdp-full-btn { top: 10px; right: 10px; padding: 6px 11px; font-size: 11.5px; } }


/* Vetrine di rubrica alla Corriere in fondo alla home (da PRESERVARE in coda):
   desktop card con foto sopra; su mobile righe con foto a destra (stile 1.2.3) */
.home-rubrica { border-top: 2px solid var(--ink); margin: 8px calc(50% - 50vw) 0; padding: 24px calc(50vw - 50%) 34px; }
.rubrica-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.rubrica-card .media-frame { height: 150px; display: block; margin-bottom: 10px; }
.rubrica-card h3 { font-size: 20px; line-height: 1.22; letter-spacing: -0.01em; font-weight: 700; margin: 0; }
.rubrica-card h3 a { color: var(--ink); }
.rubrica-card .firma-lista { margin-top: 6px; }
@media (max-width: 980px) { .rubrica-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .rubrica-grid { grid-template-columns: 1fr; gap: 0; }
  .rubrica-card { overflow: hidden; padding: 13px 0; border-bottom: 1px solid var(--hair); }
  .rubrica-card:last-child { border-bottom: none; }
  .rubrica-card .media-frame { float: right; width: 110px; height: 78px; margin: 0 0 6px 12px; }
  .rubrica-card h3 { font-size: 17.5px; }
}

/* Ricerca nell'Atlante delle parole */
.atl-cerca { margin: 6px 0 18px; position: relative; max-width: 520px; }
.atl-cerca input { width: 100%; font-family: var(--sans); font-size: 16px; padding: 13px 16px; border: 1.5px solid var(--ink); border-radius: 0; background: #fff; }
.atl-cerca input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
#atl-risultati { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid var(--hair); border-top: none; box-shadow: 0 10px 24px rgba(22,24,26,0.08); }
#atl-risultati a { display: block; padding: 11px 16px; border-bottom: 1px solid var(--hair); color: var(--ink); }
#atl-risultati a:last-child { border-bottom: none; }
#atl-risultati a:hover { background: var(--paper); }
#atl-risultati a strong { display: block; font-size: 16px; }
#atl-risultati a span { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--meta); margin-top: 2px; }
#atl-risultati .atl-vuoto { padding: 12px 16px; font-family: var(--sans); font-size: 13.5px; color: var(--meta); }

/* Firma discreta in home: le card non firmano (la firma vive nell'articolo);
   resta solo sull'apertura (consiglio n.5, da PRESERVARE in coda) */
.home main .firma-lista { display: none; }
.home .lead .firma-lista { display: block; }

/* Nota «Aggiornato alle HH:MM» sugli articoli aggiornati dalle uscite (da PRESERVARE in coda) */
.article-body .agg-nota, .mg-body .agg-nota { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }


/* MOBILE: prima tutto il fresco, poi i blocchi da rivista (richiesta Sergio
   12/8: «tutti gli articoli recenti prima e quelli vecchi dopo» — sul
   telefono le sezioni si impilavano nell'ordine del desktop e Dossier/Mappa
   spezzavano il fiume delle notizie). Solo ordine visivo, il DOM non cambia. */
@media (max-width: 700px) {
  /* dentro l'apertura: le «Ultime» (i pezzi più freschi dopo la vetrina)
     salgono tra la vetrina e il fiume; il personaggio chiude il blocco */
  .home-open { display: flex; flex-direction: column; }
  .home-open .col-lead, .home-open > aside { display: contents; }
  .home-open .lead { order: 1; }
  .home-open .col-lead .op-strip.op-posto-lead { order: 2; }   /* 29/08: la prima opinione sotto l'apertura */
  .home-open .col-lead .ad-mobile.ad-posto-lead { order: 3; }   /* 29/08: pubblicità mobile dopo la prima opinione */
  .home-open .lead-sotto { order: 4; }
  .home-open .ultime { order: 5; }
  .home-open .col-lead .op-strip.op-posto-ultime { order: 6; }
  .home-open .col-lead .ad-mobile.ad-posto-ultime { order: 7; } /* 29/08: pubblicità ripetuta dopo la seconda opinione */
  .home-open .home-seguito { order: 8; }
  .home-open .personaggio-box { order: 9; }

  /* tra i blocchi della home: notizie fresche in testa, l'evergreen in coda */
  main.wrap { display: flex; flex-direction: column; }
  main.wrap > * { order: 50; }
  main.wrap > .home-open { order: 1; }
  main.wrap > .home-geodossier { order: 9; }
  main.wrap > .home-rubrica { order: 10; }
  main.wrap > .home-dossier { order: 30; }
  main.wrap > .home-mappa { order: 31; }
  main.wrap > .home-tre { order: 32; }
  main.wrap > .op-strip { order: 35; }
  main.wrap > .ad-slot { order: 40; }
}


/* ============ MOBILE stile Corriere (12/8) ============
   Tre difetti misurati sul nostro mobile: 1) tutti i titoli a 28px, cioè
   l'apertura NON si distingue dalle liste e in uno schermo entrano due
   notizie; 2) foto di altezze diverse (180/200/265px) che fanno saltare la
   pagina; 3) troppa testata prima della prima notizia. Qui si mette la
   gerarchia: apertura grande, liste compatte, foto in rapporto fisso. */
@media (max-width: 700px) {
  /* gerarchia dei titoli: una sola apertura grande, il resto da elenco */
  .home-open .lead h1 { font-size: 31px; line-height: 1.14; }
  .lead .standfirst { display: block; font-size: 15.5px; line-height: 1.45; color: var(--meta); margin: 0 0 10px; }
  .ls-box h2, .ultime-side-item h2, .home-seguito .sg-item h3,
  .rubrica-card h3, .home-temi .tema-box h3 { font-size: 21px; line-height: 1.22; }
  .lead-sotto .ls-box:first-child h2 { font-size: 24px; }

  /* foto in rapporto fisso: la pagina scorre senza sobbalzi */
  .lead .media-frame { height: auto !important; aspect-ratio: 3 / 2; }
  .ls-box .media-frame, .sg-foto, .rubrica-card .media-frame,
  .home-temi .tema-box .media-frame { height: auto !important; aspect-ratio: 3 / 2; }
  .ultime-side-item .u-thumb { aspect-ratio: 3 / 2; }
  .lead .media-frame img, .ls-box .media-frame img, .sg-foto img,
  .rubrica-card .media-frame img { width: 100%; height: 100%; object-fit: cover; }

  /* meno testata, più notizie: il logo non si mangia lo schermo */
  .masthead { padding-top: 10px; padding-bottom: 8px; }
  .masthead .logo, .site-title { font-size: clamp(30px, 10.2vw, 42px) !important; }
  .site-nav { padding: 8px 0; gap: 12px 18px; font-size: 12.5px; overflow-x: auto; flex-wrap: nowrap; }

  /* separatori sottili come in edicola, e blocchi che respirano */
  .home-seguito .sg-item { padding: 16px 0 !important; border-top: 1px solid var(--hair); }
  .home-seguito .sg-item:first-child { border-top: none; }
  .home-rubrica, .home-geodossier, .home-dossier, .home-mappa, .home-tre { margin-top: 26px; }
  .block-head { margin-bottom: 10px; }
  .block-title { font-size: 19px; }

  /* Opinioni & Commenti: il blocco alto è la firma della testata */
  .home-opinioni--alto { margin: 26px calc(50% - 50vw) 6px; padding: 20px calc(50vw - 50%) 22px; }
  .home-opinioni--alto .op-cella { padding: 14px 0; }
  .home-opinioni--alto .op-cella h3 { font-size: 21px; }
}

/* Opinioni & Commenti in alto anche su desktop: era in fondo, e il valore
   della testata non può stare sotto la pubblicità (richiesta Sergio 12/8).
   Lo sfondo grigio filigranato stava sul .wrap interno, che qui non c'è:
   va sul blocco stesso, a tutta larghezza come la banda delle firme. */
.home-opinioni--alto {
  background-color: #E8E6E0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M-3 17 17 -3M-7 7 7 -7M3 21 21 3' stroke='%23CDC9C0' stroke-width='1' opacity='0.8'/%3E%3C/svg%3E");
  margin: 34px calc(50% - 50vw) 12px;
  padding: 28px calc(50vw - 50%) 32px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--hair);
}
.home-opinioni--alto .op-head { margin-bottom: 6px; text-align: center; }


/* Occhiello di sezione sulle card: si capisce al volo di cosa parla il titolo
   (era solo nel fiume centrale). Rosso piccolo, come in edicola. */
.ls-box > .kicker, .rubrica-card > .kicker {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  margin: 10px 0 2px;
}
.ls-box > .kicker { margin-left: 14px; margin-right: 14px; }
.ls-box > .geo { margin-top: 2px; }

/* L'ora dei pezzi freschi: il segno che il giornale è vivo */
.ora-fresca { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--meta); margin: 4px 0 0; }
/* Due soli trattamenti dell'orario: ROSSO per il fresco (scotta col pallino,
   aggiornato senza) e grigio per il resto — tre stili in una lista si
   leggevano come disordine (review UI 24/08; era ottanio bold). */
.ora-fresca.aggiornato { color: var(--red); font-weight: 600; }
.lead .ora-fresca { margin-bottom: 6px; }
.ls-box .ora-fresca { margin-left: 14px; margin-right: 14px; }

/* Il gioco del giorno, in alto: una tessera e un invito, niente di più */
.home-gioco { margin: 30px 0 6px; }
.gioco-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  border: 2px solid var(--ink); border-radius: 14px; background: var(--paper);
  color: var(--ink); text-decoration: none; }
.gioco-card:hover { background: #fff; }
.gioco-card .g-tile { flex: 0 0 auto; width: 46px; height: 46px; display: flex;
  align-items: center; justify-content: center; font-size: 22px; font-weight: 700;
  border-radius: 10px; }
.gioco-testo { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.gioco-label { font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.gioco-titolo { font-size: 20px; font-weight: 700; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gioco-vai { font-family: var(--sans); font-size: 13.5px; font-weight: 700;
  color: var(--accent); white-space: nowrap; }
@media (max-width: 700px) {
  .home-gioco { margin: 22px 0 4px; }
  .gioco-card { padding: 13px 15px; gap: 13px; }
  .gioco-card .g-tile { width: 40px; height: 40px; font-size: 19px; }
  .gioco-titolo { font-size: 17px; }
  .gioco-vai { font-size: 12.5px; }
  main.wrap > .home-gioco { order: 8; }
}


/* La cella di chiusura delle opinioni: riempie il posto spaiato invece di
   lasciare il buco bianco nella griglia a due colonne (12/8) */
.op-cella--tutte { align-items: center; justify-content: center; }
.op-cella--tutte a { font-family: var(--sans); font-size: 15px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--accent); text-transform: uppercase; }
.op-cella--tutte a span { font-size: 18px; }
@media (max-width: 700px) { .op-cella--tutte { padding: 18px 0 6px; } }


/* La riserva della barra laterale nasce nascosta: il bilanciatore riapre solo
   le voci che servono a pareggiare le colonne (niente salto al caricamento) */
.ultime .ultime-side-item:nth-child(n+8) { display: none; }
@media (max-width: 700px) { .ultime .ultime-side-item:nth-child(n+8) { display: block; } }


/* Il fiume centrale si ferma a 12 pezzi: il resto sta dietro «Altre notizie»
   (a 48 ore la home stampava 23 articoli e sul telefono era uno scroll
   infinito di roba di ieri — 12/8) */
.home-seguito .sg-item:nth-child(n+23) { display: none; }
.altre-notizie { display: block; text-align: center; margin: 6px 0 8px; padding: 15px 0;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--hair);
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); }
.altre-notizie:hover { background: var(--paper); }
.altre-notizie span { font-size: 17px; }
@media (max-width: 700px) { .altre-notizie { margin: 4px 0 10px; padding: 14px 0; font-size: 13px; } }

/* ---------------------------------------------------------------- carosello
   Un titolo, una fila di schede che scorre. Due vestiti sullo stesso
   scheletro: «schede» (Inside, tre per volta) e «ampio» (GeoReportage, una
   per schermo con la foto piena). 14/08/2026. */
.ng2-carosello { border-top: 2px solid var(--ink); padding-top: 12px; margin: 34px 0 30px; }
.car-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.car-titolo { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.car-titolo .dot { color: var(--gold); font-size: 1.3em; line-height: 0; }
.car-frecce { display: flex; gap: 8px; flex: none; }
.car-freccia { width: 34px; height: 34px; border: 1px solid var(--hair); background: transparent; border-radius: 50%; font-size: 19px; line-height: 1; color: var(--ink); cursor: pointer; transition: background .15s, opacity .15s; }
.car-freccia:hover:not(:disabled) { background: var(--hair3); }
.car-freccia:disabled { opacity: .28; cursor: default; }

.car-pista { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.car-pista::-webkit-scrollbar { display: none; }
.car-scheda { scroll-snap-align: start; flex: none; text-decoration: none; color: inherit; display: block; }
.car-foto { display: block; background-image: var(--sfondo); background-size: cover; background-position: var(--pos, 50% 40%); background-color: var(--chip); border-radius: 12px; }
.car-foto[data-vuota] { background: repeating-linear-gradient(45deg, var(--hair3) 0 8px, var(--hair2) 8px 16px); }
.car-testo { display: block; }
.car-kicker { display: block; font-family: var(--sans); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin: 10px 0 5px; }
.car-h { display: block; font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; line-height: 1.18; color: var(--ink); }
.car-somm { display: block; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--gray); margin-top: 6px; }
.car-firma { display: block; font-family: var(--sans); font-size: 12px; color: var(--meta); margin-top: 6px; }
.car-scheda:hover .car-h { text-decoration: underline; text-underline-offset: 3px; }

/* Inside: tre schede per volta, foto orizzontale in alto. */
.car-schede .car-scheda { width: calc((100% - 40px) / 3); }
.car-schede .car-foto { aspect-ratio: 3 / 2; }
.car-schede .car-h { font-size: 19px; }

/* GeoReportage: una scheda per schermo, testo dentro la foto. */
.car-ampio { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 12px max(14px, calc(50vw - 50% - 570px)) 18px; }
.car-ampio .car-scheda { width: 100%; position: relative; border-radius: 18px; overflow: hidden; background: var(--ink); }
.car-ampio .car-foto { aspect-ratio: 21 / 9; min-height: 400px; border-radius: 0; }
.car-ampio .car-scheda::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,12,.88) 0%, rgba(10,12,12,.35) 45%, rgba(10,12,12,.02) 75%); }
.car-ampio .car-testo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px max(26px, 6%) 30px; }
.car-ampio .car-testo > * { max-width: 760px; }
.car-ampio .car-h { font-size: clamp(24px, 3.2vw, 38px); color: #fff; }
.car-ampio .car-somm { font-size: 15.5px; color: rgba(255,255,255,.92); }
.car-ampio .car-firma { color: rgba(255,255,255,.75); }
.car-ampio .car-scheda:hover .car-h { text-decoration: none; }

@media (max-width: 980px) { .car-schede .car-scheda { width: calc((100% - 20px) / 2); } }
@media (max-width: 640px) {
  .car-schede .car-scheda { width: 78%; }
  .car-schede .car-h { font-size: 17px; }
  .car-ampio .car-foto { min-height: 300px; aspect-ratio: 4 / 3; }
  .car-frecce { display: none; }
}

/* ------------------------------------------------------------- mobile 14/08
   Il giro di confronto col Corriere (14/08/2026): testata fissa, fiume a
   miniature, via i segnaposto a tutta altezza, bollino rosso di freschezza,
   rubriche nel menu, Torna su. Le colonne laterali (ultime, mo-vista) NON si
   toccano: lì le foto restano a tutta larghezza per scelta del direttore. */

/* Il bollino di freschezza vale ovunque, anche sul desktop. */
.ora-fresca.scotta { color: var(--red); font-weight: 600; }
.ora-fresca.scotta .pallino { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 5px; vertical-align: 1px; animation: ng2-batte 2s ease-in-out infinite; }
@keyframes ng2-batte { 50% { opacity: .35; } }

/* Le rubriche vivono SOLO nel menu aperto del telefono. Serve la specificità
   piena: il tema stila «.site-nav ul» con display:flex, che vinceva sul
   semplice «.nav-rubriche» e sparava le voci nella barra del desktop
   spingendo fuori il Cerca (visto da Sergio il 15/08). */
.site-nav ul.nav-rubriche, .nav-rubriche { display: none; }

@media (max-width: 980px) {
  /* Niente allargamenti a destra, qualunque sia il colpevole: sul telefono
     la barra admin di WordPress (visibile a chi è collegato) sfora di ~90px
     e trascina la testata con sé (segnalato da Sergio il 15/08). `clip` e
     non `hidden`: hidden creerebbe un contesto di scorrimento e romperebbe
     gli elementi fissi. */
  html, body { overflow-x: clip; }

  /* La testata compatta si aggancia in alto quando il logo esce dallo
     schermo (classe barra-fissa da mobile.js): senza, il lettore perdeva
     logo e menu per quattordicimila pixel di pagina. */
  .barra-fissa .mobilebar { position: fixed; top: 0; left: 0; right: 0; z-index: 300; background: var(--paper); border-bottom: 1px solid var(--hair); box-shadow: 0 1px 6px rgba(22,24,26,.12); animation: ng2-scende .18s ease-out; }
  .barra-fissa .site-header { padding-bottom: 44px; } /* compensa la barra uscita dal flusso */
  /* 29/08: la barra fissa era alta ~34px e la tendina del menu parte a 44px → 10px di pagina
     sbucavano sotto la barra («una riga che fa vedere il testo sotto», Sergio). Stessa altezza, fine. */
  .barra-fissa .mobilebar { height: 44px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
  @keyframes ng2-scende { from { transform: translateY(-100%); } }
  /* col menu aperto dalla barra fissa, la tendina segue la barra */
  .barra-fissa.menu-aperto .topbar, .barra-fissa .site-header.menu-aperto .topbar { position: fixed; top: 44px; left: 0; right: 0; z-index: 299; background: var(--paper); max-height: calc(100vh - 44px); overflow: auto; }

  /* Le rubriche in fondo al menu aperto, separate da un filetto. */
  .menu-aperto .site-nav ul.nav-rubriche { display: block; border-top: 2px solid var(--ink); margin-top: 4px; padding: 8px 0 0; list-style: none; }
  .nav-rubriche li { border-bottom: 1px solid var(--hair); }
  .nav-rubriche a { display: block; padding: 11px 0; color: var(--gray); font-family: var(--sans); font-size: 15px; }

  .torna-su { position: fixed; right: 14px; bottom: 18px; z-index: 300; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair); background: var(--paper); color: var(--ink); font-size: 20px; box-shadow: 0 2px 10px rgba(22,24,26,.18); opacity: 0; pointer-events: none; transition: opacity .2s; cursor: pointer; }
  .torna-su.visibile { opacity: 1; pointer-events: auto; }
}

@media (max-width: 700px) {
  /* Il fiume alla Corriere: testo a sinistra, miniatura quadrata a destra,
     ogni riga uguale — si scandisce col pollice. Sostituisce l'alternanza
     foto-grande/niente-foto, che lasciava il ritmo irregolare. */
  .home-seguito .sg-item,
  .home-seguito .sg-item:nth-child(2n+1) { display: grid; grid-template-columns: 1fr 92px; gap: 12px; align-items: start; padding: 14px 0; }
  .home-seguito .sg-foto,
  .home-seguito .sg-item:not(:nth-child(2n+1)) .sg-foto,
  .home-seguito .sg-item:nth-child(2n+1) .sg-foto { display: block; order: 0; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; }
  .home-seguito .sg-item h3 { font-size: 17.5px; line-height: 1.25; margin: 0 0 6px; }

  /* Un articolo senza foto non lascia il buco: sparisce il riquadro e il
     testo prende tutta la riga. */
  .sg-foto.vuota { display: none !important; }
  .home-seguito .sg-item:has(.sg-foto.vuota) { grid-template-columns: 1fr; }

  /* I segnaposto «foto in arrivo» non occupano mai una schermata. */
  .ls-box .media-frame .placeholder-media,
  .u-thumb .placeholder-media,
  .mo-thumb .placeholder-media { display: none; }
  .ls-box .media-frame:has(.placeholder-media),
  .u-thumb:has(.placeholder-media),
  .mo-thumb:has(.placeholder-media) { display: none; }

  /* GeoReportage: sul telefono il sommario si ferma a tre righe, così la
     foto respira dietro il testo. */
  .car-ampio .car-somm { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* Le intestazioni di sezione si impilano invece di schiacciarsi in tre
     colonne da 120px (titolo, sottotitolo, rimando). */
  .block-head { display: block; }
  .block-head > * { display: block; margin: 0 0 4px; }
}

/* -------------------------------------------------- 18/08 · da PRESERVARE
   Mobile (richiesta Sergio): 1) le Opinioni si distribuiscono lungo la
   pagina come strip singole (.op-strip--mob, piazzate in front-page) e il
   pannello raggruppato sparisce; sul desktop vale l'inverso. 2) GeoReportage
   a tutta larghezza: schede filo-a-filo, foto alta 4:5, box testo grande. */
.op-strip--mob { display: none; }
@media (max-width: 700px) {
  .op-strip--mob { display: block; }
  .home-opinioni--alto { display: none; }
}
@media (max-width: 640px) {
  .car-ampio { padding-left: 0; padding-right: 0; }
  .car-ampio .car-scheda { border-radius: 0; }
  .car-ampio .car-foto { aspect-ratio: 4 / 5; min-height: 440px; }
  .car-ampio .car-testo { padding: 24px 18px 28px; }
  .car-ampio .car-h { font-size: 27px; line-height: 1.14; }
  .car-ampio .car-somm { font-size: 16px; -webkit-line-clamp: 4; }
}

/* Le strip su mobile si mischiano FIN DALL'INIZIO (richiesta Sergio 18/08,
   secondo giro): s1 sta in col-lead (order 4 della regola 14/08, tra Ultime
   e fiume), s2-s4 dentro home-seguito ogni 5 notizie (lì il flex-order di
   home-open non agisce). Nel flex di main restano solo s5 e s6: la scala
   14/08 è rifatta spaziata per fargli posto; specificità più alta, regole
   originali intatte. */
@media (max-width: 700px) {
  main.wrap > * { order: 900; }
  main.wrap > .op-strip--mob { order: 900; }
  main.wrap > .home-open { order: 100; }
  main.wrap > .home-gioco { order: 200; }
  main.wrap > .home-geodossier { order: 250; }
  main.wrap > .home-rubrica { order: 300; }
  main.wrap > .op-strip--mob.op-posto-rubrica { order: 350; }
  main.wrap > .home-dossier { order: 400; }
  main.wrap > .home-mappa { order: 450; }
  main.wrap > .home-tre { order: 500; }
  main.wrap > .ad-slot { order: 600; }
  main.wrap > .ng2-carosello.car-ampio { order: 700; }
  main.wrap > .op-strip--mob.op-posto-coda { order: 750; }
  /* 29/08: pubblicità mobile ripetuta — nello schema a centinaia (a 11/33 finiva sopra l'apertura) */
  main.wrap > .ad-slot.ad-mobile.ad-posto-rubrica { order: 360; }
  main.wrap > .ad-slot.ad-mobile.ad-posto-coda { order: 760; }
}


/* ============================================================
   GEOGIOCHI v3 — quattro giochi nuovi + archivio (da PRESERVARE)
   GeoParola (.ng-parola), Crucipuzzle (.ng-crucipuzzle),
   Apegramma (.ng-ape), Cruciverba mini (.ng-gioco.ng-mini),
   pagina archivio (category-geogiochi.php).
   ============================================================ */
:root {
  --gc-parola: #567D2E;
  --gc-crucipuzzle: #17808F;
  --gc-mini: #2B2B2B;
  --gc-ape: #C99700;
}
.g-tile--parola { background: var(--gc-parola); }
.g-tile--crucipuzzle { background: var(--gc-crucipuzzle); }
.g-tile--mini { background: var(--gc-mini); }
.g-tile--ape { background: var(--gc-ape); color: #16181A; }
.gg-tab--parola.attiva { background: var(--gc-parola); }
.gg-tab--crucipuzzle.attiva { background: var(--gc-crucipuzzle); }
.gg-tab--mini.attiva { background: var(--gc-mini); }
.gg-tab--ape.attiva { background: var(--gc-ape); color: #16181A; }
.g-banda--parola { border-left-color: var(--gc-parola); background: #eff4e9; }
.g-banda--crucipuzzle { border-left-color: var(--gc-crucipuzzle); background: #e9f3f5; }
.g-banda--mini { border-left-color: var(--gc-mini); background: #efeeec; }
.g-banda--ape { border-left-color: var(--gc-ape); background: #faf4e0; }
.gg-hero--parola { background: var(--gc-parola); }
.gg-hero--crucipuzzle { background: var(--gc-crucipuzzle); }
.gg-hero--mini { background: var(--gc-mini); }
.gg-hero--ape { background: var(--gc-ape); color: var(--ink); }
.gg-hero--parola::after { content: 'A'; }
.gg-hero--crucipuzzle::after { content: '\2315'; }
.gg-hero--mini::after { content: '\25AB'; }
.gg-hero--ape::after { content: '\2B21'; }
.gg-hero--archivio { background: var(--ink, #16181A); }
.gg-hero--archivio::after { content: '\221E'; }

/* Banda «Come si vince» collassabile: dopo la prima partita completata il
   JS la fa partire chiusa — resta il nome del gioco, un tocco la riapre. */
.g-banda-toggle { cursor: pointer; position: relative; user-select: none; }
.g-banda-toggle::after {
  content: '▴'; position: absolute; right: 14px; top: 12px;
  font-size: 12px; color: var(--faint, #8A857C);
}
.g-banda-toggle.chiusa::after { content: '▾'; }
.g-banda.chiusa .g-vinci { display: none; }

/* Bottoni dei giochi, DUE famiglie (consolidamento 24/08):
   primario  = fondo ink, testo bianco, ombra dura ottanio (g-avanti, g-share,
               gg-carta-gioca; l'inverso ottanio resta SOLO a «Gioca ancora»)
   secondario = bianco, bordo ink 1.5px, ombra dura ink 2px (g-aiuto,
               g-arrendi, gg-filtro, pillole ape). */
.g-aiuto, .g-arrendi {
  display: inline-block; margin: 10px 10px 10px 0; padding: 10px 16px;
  font: 600 13.5px/1 var(--sans, sans-serif); cursor: pointer;
  border: 1.5px solid var(--ink, #16181A); background: #fff; color: var(--ink, #16181A);
  box-shadow: 2px 2px 0 var(--ink, #16181A);
}
.g-aiuto:active, .g-arrendi:active { transform: translate(2px, 2px); box-shadow: none; }
.g-arrendi { opacity: .75; }
.g-aiuto:disabled { opacity: .4; box-shadow: none; cursor: default; }
.g-indizio-svelato {
  margin: 10px 0; padding: 10px 14px; background: #eff4e9;
  border-left: 3px solid var(--gc-parola); font-style: italic;
}

/* «Gioca ancora →» nell'esito: porta all'archivio dei Geogiochi. Ottanio
   pieno, l'inverso del nero di «Condividi»: è lui che deve saltare all'occhio. */
.g-esito .g-gioca-ancora {
  display: inline-block; margin: 16px 0 0 12px; padding: 12px 26px;
  background: var(--accent, #0F6E56); color: #fff; text-decoration: none;
  font: 700 13.5px/1 var(--sans, sans-serif);
  box-shadow: 3px 3px 0 var(--ink, #16181A); transition: transform 0.08s;
}
.g-esito .g-gioca-ancora:hover { transform: translate(-1px, -1px); }

/* Nella pagina gioco la banda «Come si vince» ha margini negativi
   (-26px -28px) tarati sulle schede bordate: senza questo padding i tre
   giochi v3 la farebbero debordare sull'hero e oltre la colonna. */
.gg-scheda .ng-parola, .gg-scheda .ng-crucipuzzle, .gg-scheda .ng-ape {
  border: 1.5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  background: #fff; padding: 26px 28px;
}

/* ---- La GeoParola ---- */
.g-parola-griglia { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }
.gp-riga { display: flex; gap: 6px; justify-content: center; }
.gp-cella {
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #C9C4BA; font: 700 22px/1 var(--sans, sans-serif);
  text-transform: uppercase; background: #fff; color: var(--ink, #16181A);
}
.gp-cella.piena { border-color: var(--ink, #16181A); }
/* La riga attiva si distingue: bordo pieno e fondo carta (24/08). */
.gp-riga.attiva .gp-cella { border-color: var(--ink, #16181A); border-style: solid; background: #FBFAF7; }
.gp-riga.attiva .gp-cella:first-child { box-shadow: inset 3px 0 0 var(--accent, #0F6E56); }
.gp-cella.giusta { background: var(--gc-parola); border-color: var(--gc-parola); color: #fff; }
.gp-cella.quasi { background: #E3B505; border-color: #E3B505; color: #16181A; }
.gp-cella.no { background: #8A857C; border-color: #8A857C; color: #fff; }
.g-tastiera { margin: 14px 0 4px; user-select: none; }
.gt-fila { display: flex; gap: 5px; justify-content: center; margin-bottom: 6px; }
.gt-tasto {
  min-width: 30px; padding: 11px 6px; border: 1.5px solid var(--ink, #16181A);
  background: #fff; color: var(--ink, #16181A); cursor: pointer;
  font: 700 13px/1 var(--sans, sans-serif); box-shadow: 2px 2px 0 var(--ink, #16181A);
}
.gt-tasto:active { transform: translate(2px, 2px); box-shadow: none; }
.gt-largo { min-width: 52px; font-size: 11px; }
.gt-tasto.giusta { background: var(--gc-parola); color: #fff; }
.gt-tasto.quasi { background: #E3B505; color: #16181A; }
.gt-tasto.no { background: #8A857C; color: #fff; border-color: #8A857C; box-shadow: none; }
@media (max-width: 620px) {
  /* Celle dimensionate su quante sono (--gp-n dal JS): con 7-8 lettere le
     celle fisse sbordavano dalla scheda sugli schermi stretti. */
  .gp-riga { gap: 5px; }
  .gp-cella {
    width: calc((100% - (var(--gp-n, 5) - 1) * 5px) / var(--gp-n, 5));
    max-width: 44px; height: auto; aspect-ratio: 1; font-size: 18px;
  }
  /* Tastiera a tutta larghezza: tasti che si spartiscono la fila invece dei
     min-width fissi — bersagli più larghi e niente sbordo sui telefoni stretti. */
  .gt-fila { gap: 4px; }
  .gt-tasto { flex: 1 1 0; min-width: 0; padding: 12px 0; }
  .gt-largo { flex: 1.6 1 0; font-size: 11px; }
}

/* ---- Il Crucipuzzle ---- */
.g-cp-griglia {
  display: grid; grid-template-columns: repeat(var(--cp-col, 11), 1fr);
  gap: 2px; max-width: 480px; margin: 16px auto; user-select: none;
}
.cp-cella {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid #D8D3C9; background: #fff; color: var(--ink, #16181A);
  font: 600 15px/1 var(--sans, sans-serif); cursor: pointer; padding: 0;
}
.cp-cella.sel { background: var(--ink, #16181A); color: #fff; }
.cp-cella.trovata { background: var(--gc-crucipuzzle); border-color: var(--gc-crucipuzzle); color: #fff; }
.cp-cella.svelata { background: #E3B505; border-color: #E3B505; color: #16181A; }
.cp-cella.cp-no { background: #B3222D; border-color: #B3222D; color: #fff; }
.ng-crucipuzzle .parole { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ng-crucipuzzle .parole li {
  padding: 5px 12px; border: 1.5px solid var(--ink, #16181A); background: #fff;
  font: 600 13px/1 var(--sans, sans-serif); letter-spacing: .04em; text-transform: uppercase;
}
.ng-crucipuzzle .parole li.trovata { background: var(--gc-crucipuzzle); color: #fff; text-decoration: line-through; }
.ng-crucipuzzle .parole li.svelata { background: #E3B505; color: #16181A; text-decoration: line-through; }
@media (max-width: 620px) {
  /* La griglia esce dal padding della scheda: ogni cella guadagna ~4px
     di larghezza da toccare (rapporto design 24/08). */
  .g-cp-griglia { margin-left: -20px; margin-right: -20px; max-width: none; }
  .cp-cella { font-size: 14px; }
}

/* ---- L'Apegramma ---- */
.ape-parola {
  min-height: 40px; text-align: center; font: 700 26px/40px var(--sans, sans-serif);
  letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid var(--ink, #16181A);
  max-width: 340px; margin: 14px auto 10px;
}
.ape-alveare { display: flex; flex-direction: column; align-items: center; margin: 0 auto 6px; }
/* righe 2-3-2: quella da 2 è centrata sulla da 3, gli esagoni si incastrano
   da soli; il margine negativo li annida in verticale (le punte sono il 25%
   dell'altezza: 62px → ~15px di sovrapposizione, ne lasciamo 1 d'aria) */
.ape-riga { display: flex; gap: 10px; justify-content: center; }
.ape-riga + .ape-riga { margin-top: -14px; }
.ape-lettera {
  width: 62px; height: 62px; border: none; background: #EAE6DC;
  color: var(--ink, #16181A); font: 700 24px/1 var(--sans, sans-serif); cursor: pointer;
  /* niente bordo né ombra dura: il clip-path esagonale li taglierebbe — su
     fondo bianco restavano solo tacche e l'alveare era invisibile (24/08).
     La forma la dà il FONDO pieno. */
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.ape-lettera:active { transform: scale(.93); }
.ape-centro { background: var(--gc-ape); }
.ape-barra { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
/* Cancella/Mescola ereditavano dal JS il .g-cron-btn della Cronologia: un
   QUADRATO 34px per le frecce ↑↓ — il testo sbordava e i bottoni si
   accavallavano (24/08). Qui diventano pillole nello stile del tema. */
.ape-barra .g-cron-btn {
  width: auto; height: auto; padding: 11px 18px;
  font: 600 13.5px/1 var(--sans, sans-serif); border: 1.5px solid var(--ink, #16181A);
  background: #fff; box-shadow: 2px 2px 0 var(--ink, #16181A);
}
.ape-barra .g-cron-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.ape-barra .g-avanti { display: inline-block; margin-top: 0; }
.ape-conto { text-align: center; font: 600 13px/1.4 var(--sans, sans-serif); color: #6E6960; }
.ape-trovate { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0; }
.ape-pill {
  padding: 5px 12px; border: 1.5px solid var(--ink, #16181A); background: #fff;
  font: 600 13px/1 var(--sans, sans-serif); text-transform: lowercase;
}
.ape-pill.ape-lunga { background: var(--gc-ape); }
.ape-mancanti { font-size: 14.5px; color: #6E6960; margin-top: 12px; }

/* ---- Archivio dei Geogiochi ---- */
.gg-archivio-pagina .gg-hero { color: #fff; }
.gg-filtri { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 18px; }
.gg-filtro {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 1.5px solid var(--ink, #16181A); background: #fff; color: var(--ink, #16181A);
  font: 600 13.5px/1 var(--sans, sans-serif); cursor: pointer; box-shadow: 2px 2px 0 var(--ink, #16181A);
}
/* Attivo in OTTANIO, non nero: con la dark mode forzata dei telefoni (che il
   tema non gestisce) il nero pieno spariva sul fondo nero (Sergio, 24/08). */
.gg-filtro.attivo { background: var(--accent, #0F6E56); border-color: var(--accent, #0F6E56); color: #fff; }
.gg-filtro .g-tile { width: 20px; height: 20px; font-size: 12px; }
.gg-archivio-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 34px; }
.gg-carta {
  border: 1.5px solid var(--ink, #16181A); background: #fff; padding: 0 16px 14px;
  box-shadow: 4px 4px 0 var(--ink, #16181A); display: flex; flex-direction: column;
}
.gg-carta--oggi { outline: 3px solid var(--gc-cruciverba); outline-offset: 2px; }
.gg-carta-testa {
  display: flex; align-items: center; gap: 8px; margin: 0 -16px 12px; padding: 10px 14px;
  border-bottom: 1.5px solid var(--ink, #16181A);
  font: 700 13px/1 var(--sans, sans-serif); text-transform: uppercase; letter-spacing: .05em;
}
.gg-carta-oggi { margin-left: auto; font-size: 11px; color: var(--gc-cruciverba); }
.gg-carta-titolo { font-size: 20px; line-height: 1.2; margin: 0 0 8px; }
.gg-carta-titolo a { color: inherit; text-decoration: none; }
.gg-carta-payoff { font-size: 14.5px; color: #6E6960; margin: 0 0 12px; flex: 1; }
.gg-carta-piede { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gg-carta-data { font: 600 12.5px/1 var(--sans, sans-serif); color: var(--meta, #6E6A63); }
.gg-carta-gioca {
  padding: 8px 14px; border: 1.5px solid var(--ink, #16181A); background: var(--ink, #16181A);
  color: #fff; font: 700 13px/1 var(--sans, sans-serif); text-decoration: none;
  /* famiglia primario: ombra dura ottanio come g-avanti/g-share */
  box-shadow: 2px 2px 0 var(--accent, #0F6E56);
}
@media (max-width: 980px) { .gg-archivio-griglia { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .gg-archivio-griglia { grid-template-columns: 1fr; } }

/* ============================================================
   GEOGIOCHI v3.1 — barra dei tipi a fila UNICA (da PRESERVARE)
   Con 9 tipi la .gg-nav andava a capo e la seconda riga di
   pillole si accavallava sul filetto e su «Archivio · Alle
   notizie» (segnalato da Sergio il 20/08). Ora la fila scorre
   in orizzontale, come già le schede su mobile.
   ============================================================ */
.gg-topbar { flex-wrap: nowrap; gap: 16px; }
.gg-topbar .today { flex: none; white-space: nowrap; font-family: var(--sans, sans-serif); font-size: 12px; color: var(--faint, #8A857C); }
.gg-topbar .gg-nav { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gg-topbar .gg-nav::-webkit-scrollbar { display: none; }
.gg-topbar .gg-nav .gg-tab { flex: 0 0 auto; }
.gg-topbar .gg-back { flex: none; white-space: nowrap; gap: 7px; }

/* -------------------------------------------------- 26/08 · giochi su telefono
   La scheda teneva i padding desktop (26/28) anche sul mobile: nella
   Cronologia al testo restavano 114px di colonna (misurato a 390px) e le
   frecce finivano addosso al bordo. Qui: contorni dimezzati e frecce in
   colonna — il testo passa a ~240px. */
@media (max-width: 620px) {
  .gg-main { padding: 22px 14px 48px; }
  .gg-scheda .ng-gioco, .gg-scheda .ng-dove, .gg-scheda .ng-quiz,
  .gg-scheda .ng-cronologia,
  .gg-scheda .ng-parola, .gg-scheda .ng-crucipuzzle, .gg-scheda .ng-ape { padding: 18px 14px; }
  .gg-scheda .ng-intruso { padding: 16px 14px; }
  .gg-scheda .g-banda { margin: -18px -14px 18px; padding: 12px 14px; }
  .gg-scheda .ng-intruso .g-banda { margin: -16px -14px 16px; }
  /* riga della Cronologia: numerino | testo | frecce impilate */
  .g-cron-riga {
    display: grid; grid-template-columns: 16px 1fr 36px;
    grid-template-rows: auto auto; align-items: center;
    column-gap: 10px; row-gap: 6px; padding: 10px;
  }
  .g-cron-pos { grid-column: 1; grid-row: 1 / span 2; }
  .g-cron-testo { grid-column: 2; grid-row: 1 / span 2; }
  .g-cron-btn { grid-column: 3; }
}


/* ============================================================
   29/08 · L'OPINIONE IN VISTA (richiesta Sergio: «il valore della
   rivista sono le opinioni») — da PRESERVARE
   Desktop: box .op-side in testa alla barra destra con l'ultimo Punto.
   Mobile: strip più grandi, bordo nero, disco iniziali; la prima sta
   subito sotto l'apertura (.op-posto-lead), la seconda dopo le Ultime.
   Le strip si posizionano per classe .op-posto-*, non più per numero.
   ============================================================ */
.op-side {
  position: relative; text-align: center; padding: 22px 20px 22px;
  margin: 0 0 6px;
  background-color: #E8E6E0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M-3 17 17 -3M-7 7 7 -7M3 21 21 3' stroke='%23CDC9C0' stroke-width='1' opacity='0.8'/%3E%3C/svg%3E");
  border-top: 3px solid var(--ink);
}
.op-side .op-kicker { font-size: 30px; }
.op-side .op-tondo { display: flex; justify-content: center; margin: 16px 0 12px; }
.op-side .op-tondo img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; filter: grayscale(1); display: block; }
.op-side .op-iniziali { width: 88px; height: 88px; font-size: 32px; }
.op-side h3 { font-size: 27px; line-height: 1.16; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.op-side h3 a { color: var(--ink); }
.op-side .op-autore { display: block; font-size: 15px; }
.op-side .op-autore a { color: var(--accent); }
.op-side p { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--gray); margin: 12px 0 0; }
.op-side .op-side-tutte { display: inline-block; margin-top: 14px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }
.op-side + .ultime { margin-top: 26px; }
@media (max-width: 700px) { .op-side { display: none; } }

/* Strip mobile: da «discrete» a protagoniste. Specificità sopra le regole
   ≤620 che le dimezzavano (righe «Le strip Opinioni si fanno discrete»). */
@media (max-width: 700px) {
  .op-strip--mob { margin: 18px 0 22px; }
  .op-strip--mob .op-in { border: 2px solid var(--ink); padding: 20px 18px 22px; }
  .op-strip--mob .op-in.con-foto { padding-right: 120px; }
  .op-strip--mob .op-in.con-tondo { padding-right: 18px; }
  .op-strip--mob .op-kicker { font-size: 30px; color: var(--ink); }
  .op-strip--mob .op-kicker::after { width: 80px; margin: 7px auto 0; background: var(--ink); }
  .op-strip--mob .op-tondo--strip { display: flex; justify-content: center; margin: 14px 0 0; }
  .op-strip--mob .op-tondo--strip .op-iniziali { width: 60px; height: 60px; font-size: 23px; }
  .op-strip--mob .op-titolo { font-size: 26px; line-height: 1.16; margin-top: 10px; }
  .op-strip--mob .op-autore { margin-top: 7px; font-size: 15px; }
  /* sotto l'apertura la strip si appoggia al lead senza aria doppia */
  .home-open .op-posto-lead { margin-top: 4px; }
}


/* ============================================================
   29/08 · BANNER VAULT by iSwiss (da Claude Design «Banner Vault v2»)
   Due formati: .vb-970 (billboard home) e .vb-160 (manchette testata).
   Palette del banner, non del giornale: bordeaux #6B202C, carta #FAF6F3.
   Quattro claim a rotazione ogni 3s (ciclo 12s) con la keyframe vfade.
   ============================================================ */
@keyframes vfade { 0% { opacity: 0; } 5% { opacity: 1; } 19% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } }
.vb { display: flex; box-sizing: border-box; overflow: hidden; position: relative; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,0.15); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.vb .vb-rot { flex: 1; position: relative; display: block; min-width: 0; }
.vb .vb-claim { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; animation: vfade 12s linear infinite; }
.vb .vb-nome { font-style: italic; font-weight: 400; color: #6B202C; }
.vb img { display: block; }
@media (prefers-reduced-motion: reduce) { .vb .vb-claim { animation: none; } .vb .vb-claim:first-child { opacity: 1; } }

/* Billboard 970×250 */
.vb-970 { width: 970px; max-width: 100%; height: 250px; background: #FAF6F3; align-items: stretch; }
.vb-970 .vb-bar { width: 8px; background: #6B202C; flex-shrink: 0; }
.vb-970 .vb-brand { display: flex; align-items: center; gap: 16px; padding: 0 8px 0 24px; flex-shrink: 0; }
.vb-970 .vb-brand img { width: 130px; height: 130px; border-radius: 30px; object-fit: contain; }
.vb-970 .vb-wm { display: flex; flex-direction: column; gap: 2px; }
.vb-970 .vb-wm .vb-nome { font-size: 52px; letter-spacing: -0.03em; line-height: 1; }
.vb-970 .vb-by { font-size: 13px; letter-spacing: 0.24em; color: #A5747C; text-transform: uppercase; font-weight: 600; padding-left: 4px; }
.vb-970 .vb-sep { width: 1px; background: #E8D9D7; margin: 36px 0; flex-shrink: 0; }
.vb-970 .vb-claim { gap: 8px; padding: 0 28px; }
.vb-970 .vb-h { font-size: 29px; font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; color: #33191E; text-wrap: balance; }
.vb-970 .vb-h--rosso { font-size: 32px; line-height: 1.08; color: #6B202C; }
.vb-970 .vb-sub { font-size: 15px; color: #8E6E74; font-weight: 500; }
.vb-970 .vb-cta-col { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 0 32px 0 4px; flex-shrink: 0; }
.vb-970 .vb-btn { background: #6B202C; color: #FAF6F3; font-size: 16px; font-weight: 700; padding: 14px 26px; border-radius: 999px; white-space: nowrap; }
.vb-970 .vb-dev { font-size: 12px; color: #8A8271; letter-spacing: 0.04em; }
/* sotto i 1000px il billboard si restringe: via la colonna del marchio grande */
@media (max-width: 1000px) {
  .vb-970 .vb-brand img { width: 100px; height: 100px; border-radius: 22px; }
  .vb-970 .vb-wm .vb-nome { font-size: 44px; }
  .vb-970 .vb-claim { padding: 0 24px; }
  .vb-970 .vb-h { font-size: 28px; }
  .vb-970 .vb-h--rosso { font-size: 30px; }
  .vb-970 .vb-sub { font-size: 15px; }
  .vb-970 .vb-cta-col { padding: 0 20px 0 4px; }
  .vb-970 .vb-btn { font-size: 14px; padding: 12px 20px; }
}

/* Manchette 160×90 */
.vb-160 { width: 160px; height: 90px; background: #6B202C; flex-direction: column; }
.vb-160 .vb-claim { align-items: center; padding: 4px 14px 0; flex-direction: row; }
.vb-160 .vb-claim { font-size: 13px; font-weight: 700; line-height: 1.25; color: #FAF6F3; text-wrap: balance; letter-spacing: -0.01em; }
.vb-160 .vb-foot { display: flex; align-items: center; justify-content: space-between; background: #FAF6F3; padding: 6px 12px; }
.vb-160 .vb-marca { display: flex; align-items: center; gap: 6px; }
.vb-160 .vb-marca img { width: 26px; height: 26px; border-radius: 4px; object-fit: contain; }
.vb-160 .vb-marca .vb-nome { font-size: 15px; }
.vb-160 .vb-cta { font-size: 10px; font-weight: 700; color: #6B202C; letter-spacing: 0.06em; }

/* ============================================================
   29/08 · BANNER iSWISS ADS (da Claude Design «Banner iSwiss ADS»)
   Stessi due formati del banner Vault: .ab-970 (billboard home) e
   .ab-160 (manchette testata). Palette del banner: nero #14130F,
   lime #D8FF3E, avorio #F2EFE7. Riusa la keyframe vfade (4 claim,
   ciclo 12s). Alternato a Vault in crossfade via ng2_banner_turno().
   ============================================================ */
.ab { display: flex; box-sizing: border-box; overflow: hidden; position: relative; text-decoration: none; color: #F2EFE7; background: #14130F; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.ab:hover, .ab:focus { color: #F2EFE7; text-decoration: none; }
.ab .ab-rot { flex: 1; position: relative; display: block; min-width: 0; }
.ab .ab-claim { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; animation: vfade 12s linear infinite; }
.ab .ab-lime { color: #D8FF3E; }
@media (prefers-reduced-motion: reduce) { .ab .ab-claim { animation: none; } .ab .ab-claim:first-child { opacity: 1; } }

/* Billboard 970×250 */
.ab-970 { width: 970px; max-width: 100%; height: 250px; align-items: stretch; }
.ab-970 .ab-brand { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-left: 48px; flex-shrink: 0; }
.ab-970 .ab-wm { font-size: 58px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: #F2EFE7; }
.ab-970 .ab-tag { align-self: flex-start; background: #D8FF3E; color: #14130F; font-size: 16px; font-weight: 900; letter-spacing: 0.2em; padding: 4px 12px; }
.ab-970 .ab-sep { width: 1px; background: #3A382F; margin: 36px 0 36px 40px; flex-shrink: 0; }
.ab-970 .ab-claim { gap: 12px; padding: 0 48px; }
.ab-970 .ab-h { font-size: 42px; font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; color: #F2EFE7; text-wrap: balance; }
.ab-970 .ab-h--big { font-size: 44px; line-height: 1.05; }
.ab-970 .ab-sub { font-size: 19px; color: #9B978A; font-weight: 500; }
.ab-970 .ab-mail { font-size: 20px; color: #F2EFE7; font-weight: 700; }
.ab-970 .ab-cta-col { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 0 44px 0 8px; flex-shrink: 0; }
.ab-970 .ab-btn { background: #D8FF3E; color: #14130F; font-size: 17px; font-weight: 900; padding: 15px 30px; white-space: nowrap; }
.ab-970 .ab-dev { font-size: 12px; color: #9B978A; letter-spacing: 0.08em; font-weight: 600; }
/* sotto i 1000px il billboard si restringe (il tema lo mostra fino a 620px): marchio e bottone più piccoli, claim ridotti */
@media (max-width: 1000px) {
  .ab-970 .ab-brand { padding-left: 24px; gap: 6px; }
  .ab-970 .ab-wm { font-size: 40px; }
  .ab-970 .ab-tag { font-size: 12px; padding: 3px 9px; }
  .ab-970 .ab-sep { margin: 30px 0 30px 20px; }
  .ab-970 .ab-claim { padding: 0 20px; gap: 8px; }
  .ab-970 .ab-h { font-size: 26px; }
  .ab-970 .ab-h--big { font-size: 28px; }
  .ab-970 .ab-sub { font-size: 14px; }
  .ab-970 .ab-mail { font-size: 16px; }
  .ab-970 .ab-cta-col { padding: 0 18px 0 0; gap: 6px; }
  .ab-970 .ab-btn { font-size: 13px; padding: 10px 14px; }
  .ab-970 .ab-dev { font-size: 10px; }
}
/* sotto gli 800px via la colonna del bottone: la mail resta nel quarto claim e tutto il banner è già un link mailto */
@media (max-width: 800px) {
  .ab-970 .ab-cta-col { display: none; }
  .ab-970 .ab-claim { padding-right: 24px; }
}

/* Manchette 160×90 */
.ab-160 { width: 160px; height: 90px; flex-direction: column; }
.ab-160 .ab-claim { flex-direction: row; align-items: center; padding: 2px 14px 0; font-size: 13px; font-weight: 900; line-height: 1.25; color: #F2EFE7; text-wrap: balance; }
.ab-160 .ab-claim--mail { font-size: 12px; color: #D8FF3E; }
.ab-160 .ab-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #D8FF3E; padding: 5px 10px; height: 26px; box-sizing: border-box; flex-shrink: 0; }
.ab-160 .ab-nome { font-size: 11px; font-weight: 900; color: #14130F; white-space: nowrap; letter-spacing: -0.01em; }
.ab-160 .ab-cta { font-size: 8px; font-weight: 900; color: #14130F; white-space: nowrap; letter-spacing: 0.06em; }

/* ============================================================
   29/08 · TURNO Vault ↔ iSwiss ADS nello stesso slot (.ad-turno)
   I due banner sono impilati; ciclo 24s: 0-12s Vault (4 claim),
   12-24s iSwiss ADS (4 claim), crossfade di ~1s al cambio.
   Il banner nascosto è anche visibility:hidden (non cliccabile).
   ============================================================ */
@keyframes turnoA { 0%, 46% { opacity: 1; visibility: visible; } 50%, 96% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }
@keyframes turnoB { 0%, 46% { opacity: 0; visibility: hidden; } 50%, 96% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
.ad-turno { position: relative; display: block; }
.ad-turno-970 { width: 970px; max-width: 100%; height: 250px; }
.ad-turno-160 { width: 160px; height: 90px; }
.ad-turno > .vb, .ad-turno > .ab { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ad-turno > .vb { animation: turnoA 24s linear infinite; }
.ad-turno > .ab { animation: turnoB 24s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ad-turno > .vb, .ad-turno > .ab { animation: none; } .ad-turno > .ab { opacity: 0; visibility: hidden; } }

/* ============================================================
   29/08 · PUBBLICITÀ MOBILE (.ad-mobile): strip 100%×100px, formato
   'mob' di Vault (.vb-mob) e iSwiss ADS (.ab-mob), stesso turno in
   crossfade (.ad-turno-mob). Solo ≤700px, dove manchette e billboard
   sono nascosti; in home dopo la prima opinione, negli articoli a
   fine corpo.
   ============================================================ */
.ad-mobile { display: none; width: 100%; margin: 22px 0; }
@media (max-width: 700px) { .ad-mobile { display: flex; } }
.ad-turno-mob { width: 100%; height: 100px; }

/* Vault, strip */
.vb-mob { width: 100%; height: 100px; background: #FAF6F3; align-items: stretch; }
.vb-mob .vb-bar { width: 6px; background: #6B202C; flex-shrink: 0; }
.vb-mob .vb-brand { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; flex-shrink: 0; }
.vb-mob .vb-brand img { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; }
.vb-mob .vb-wm { display: flex; flex-direction: column; gap: 1px; }
.vb-mob .vb-wm .vb-nome { font-size: 22px; letter-spacing: -0.03em; line-height: 1; }
.vb-mob .vb-by { font-size: 8px; letter-spacing: 0.2em; color: #A5747C; text-transform: uppercase; font-weight: 600; padding-left: 2px; }
.vb-mob .vb-claim { padding: 0 10px 0 12px; }
.vb-mob .vb-h { font-size: 16px; font-weight: 800; line-height: 1.18; letter-spacing: -0.015em; color: #33191E; text-wrap: balance; }
.vb-mob .vb-cta-col { display: flex; align-items: center; padding: 0 12px 0 4px; flex-shrink: 0; }
.vb-mob .vb-btn { background: #6B202C; color: #FAF6F3; font-size: 12px; font-weight: 700; padding: 9px 13px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 360px) { .vb-mob .vb-wm { display: none; } .vb-mob .vb-h { font-size: 15px; } }

/* iSwiss ADS, strip */
.ab-mob { width: 100%; height: 100px; align-items: stretch; }
.ab-mob .ab-brand { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-left: 14px; flex-shrink: 0; }
.ab-mob .ab-wm { font-size: 24px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: #F2EFE7; }
.ab-mob .ab-tag { align-self: flex-start; background: #D8FF3E; color: #14130F; font-size: 9px; font-weight: 900; letter-spacing: 0.2em; padding: 2px 6px; }
.ab-mob .ab-claim { flex-direction: row; align-items: center; padding: 0 10px 0 14px; }
.ab-mob .ab-t { font-size: 16px; font-weight: 900; line-height: 1.18; letter-spacing: -0.01em; color: #F2EFE7; text-wrap: balance; }
.ab-mob .ab-cta-col { display: flex; align-items: center; padding: 0 12px 0 4px; flex-shrink: 0; }
.ab-mob .ab-btn { background: #D8FF3E; color: #14130F; font-size: 12px; font-weight: 900; padding: 9px 13px; white-space: nowrap; }

/* ============================================================
   29/08 · FASCIA DEL GIORNO sotto la testata mobile (.fascia-giorno):
   gioco del giorno (tessera colorata, banda pallida del suo colore) +
   citazione del giorno della newsletter. Solo ≤620px. L'icona nella
   barra (.mb-gioco) è stata provata e scartata da Sergio («messo male»).
   ============================================================ */
.fascia-giorno { display: none; }
@media (max-width: 620px) {
  .fascia-giorno { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; padding-bottom: 12px; }
  .fg-gioco { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; border-left: 4px solid var(--ink); text-decoration: none; color: var(--ink); }
  .fg-gioco .g-tile { width: 34px; height: 34px; font-size: 18px; border-radius: 7px; box-shadow: 2px 2px 0 var(--ink); transform: rotate(-4deg); }
  .fg-gioco .fg-t { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
  .fascia-giorno .fg-k { font-family: var(--sans); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
  .fg-gioco .fg-n { font-family: var(--serif-titoli, var(--serif)); font-size: 18px; font-weight: 700; line-height: 1.1; color: var(--ink); }
  .fg-gioco .fg-vai { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; border: 1px solid var(--ink); padding: 6px 10px; border-radius: 999px; background: var(--paper); }
  .fg-cit { display: flex; flex-direction: column; gap: 3px; padding: 6px 2px 0; }
  .fg-cit q { quotes: "«" "»"; font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
  .fg-cit .fg-f { font-family: var(--sans); font-size: 11.5px; color: var(--meta); }
}

/* ============================================================
   29/08 · COLORE SU MOBILE (l'editore: «troppo pallido, ci vuole un po'
   di colore»). Testata in ottanio con logotipo in negativo, barra e
   controlli in avorio (anche la barra fissa); la fascia del giorno resta
   su carta sotto la testata; le etichette di sezione nel fiume diventano
   chip pieni. Solo mobile: il desktop non cambia.
   ============================================================ */
@media (max-width: 620px) {
  .site-header { background: var(--accent); border-bottom: 0; }
  .site-header .masthead, .site-header .mobilebar { background: var(--accent); }
  .masthead { padding-top: 12px; }
  .brand a { color: var(--paper); }
  .nav-toggle span { background: var(--paper); }
  .mobilebar .mb-today { color: rgba(247,246,243,.78); }
  .search-toggle { color: var(--paper); border-color: rgba(247,246,243,.55); }
  .barra-fissa .mobilebar { background: var(--accent); border-bottom: 0; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
  .site-header .fascia-giorno { background: var(--paper); margin-top: 0; padding-top: 12px; border-bottom: 1px solid var(--ink); }
  .site-header .topbar { background: var(--paper); }
  /* 02/09 · La testata dei Geogiochi resta su carta come sul desktop
     (scelta di Sergio, opzione A): sull'ottanio logotipo, payoff e
     pillole non si leggevano. */
  .site-header.gg-header { background: var(--paper); border-bottom: 1px solid var(--ink); }
}
@media (max-width: 700px) {
  .kicker-row .kicker, .lead-sotto .ls-box > .kicker, .rubrica-card > .kicker, .ultime-side-item .kicker, .home-seguito .kicker {
    display: inline-block; background: var(--accent); color: var(--paper); font-size: 10px; letter-spacing: 0.12em; padding: 3px 7px 2px; border-radius: 3px; line-height: 1.2; text-decoration: none;
  }
}

/* ============================================================
   1.2.150 (09/09/2026) — «Geopolitica dal 2011» in piccolo sotto la testata
   (richiesta Sergio). Sans, maiuscoletto spaziato, colore attenuato; sul
   mobile la testata è ottanio, quindi la scritta va in carta trasparente.
   ============================================================ */
.brand .brand-since {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
  margin-top: 10px; line-height: 1; white-space: nowrap; /* 09/09 sera: «più spazio» (era 4px) */
}
@media (max-width: 620px) {
  .brand .brand-since { font-size: 9.5px; letter-spacing: 0.14em; margin-top: 6px; color: rgba(247,246,243,.78); }
}

/* ============================================================
   1.2.154 (09/09/2026 sera) — Testata verde su desktop PROVATA (1.2.152-153)
   e TOLTA: Sergio, «per me era meglio senza il verde», e da designer è
   così — su carta il logotipo serif ha più autorevolezza e il filetto nero
   fa da prima pagina; a 1280px il verde pieno litiga con i banner bordeaux.
   Il verde resta SOLO sul mobile (blocco 29/08), dove è una barra compatta.
   Di quella prova si tengono gli STATI ATTIVI leggibili sul verde mobile
   («i tasti cliccati diventano invisibili sul verde»): l'a:hover globale è
   verde scuro e sull'ottanio sparisce.
   ============================================================ */
@media (max-width: 620px) {
  .site-header:not(.gg-header) .brand a:active,
  .site-header:not(.gg-header) .brand a:focus-visible { color: var(--gold); outline: none; }
  .site-header:not(.gg-header) .search-toggle:active,
  .site-header:not(.gg-header) .search-toggle:focus-visible,
  .site-header:not(.gg-header) .cerca-aperta .search-toggle { background: var(--paper); color: var(--accent); border-color: var(--paper); outline: none; }
  .site-header:not(.gg-header) .nav-toggle:active span,
  .site-header:not(.gg-header) .nav-toggle:focus-visible span { background: var(--gold); }
}
@media (max-width: 620px) and (hover: hover) {
  .site-header:not(.gg-header) .brand a:hover { color: var(--gold); }
}