@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin-ext-opsz-normal.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2");font-weight:200 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin-ext-opsz-italic.woff2") format("woff2");font-weight:200 900;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Africa on the Ground: stile.
   Idea: due strati con due colori, sempre gli stessi.
     indaco     = il racconto documentato (la carta, l'inchiostro)
     terracotta = la voce di chi conosce il luogo (calda, umana)
     zafferano  = ciò che non si sa ancora (lacune, attenzione)
   Font: i primi nominati sono locali (src/fonts); se mancano valgono quelli di sistema. */

/* Un solo elenco di colori: ogni variabile ha il valore chiaro e quello scuro (light-dark).
   Il tema segue il sistema, ma si può forzare con data-theme="light" o "dark" sull'elemento html
   (lo imposta il pulsante in testata e lo ricorda il browser). */
:root {
  --ring: light-dark(#1d1670, #f4b324);
  color-scheme: light dark;

  --paper: light-dark(#fbf5ea, #13102b);
  --surface: light-dark(#fffdf8, #1d1941);
  --sand: light-dark(#f3e9d6, #1a1637);
  --ink: light-dark(#1b1630, #f7f0e3);
  --ink-soft: light-dark(#5a5370, #b9b1cf);
  --line: light-dark(#e6dac2, #352f66);

  --record: light-dark(#2b2399, #b9b3ff);
  --record-tint: light-dark(#e8e5fb, #26215a);
  --band: light-dark(#1d1670, #0c0924);
  --on-band: light-dark(#fbf5ea, #f7f0e3);

  --voice: light-dark(#b3340f, #ff9a73);
  --voice-fill: light-dark(#c63d17, #e5603a);
  --voice-tint: light-dark(#fde6db, #3a1f2c);
  --voice-surface: light-dark(#fff1e9, #2a1b2e);
  --voice-line: light-dark(#f3c4ad, #6a3a45);
  --on-voice: light-dark(#ffffff, #13102b);
  --on-voice-soft: light-dark(#ffe2d3, #3a1f2c);

  --saffron: light-dark(#f4b324, #ffc94a);
  --flag: light-dark(#7a5200, #ffd16b);
  --flag-tint: light-dark(#fdf0c8, #3a3016);
  --flag-line: light-dark(#ecd38a, #6b5a22);

  --water: light-dark(#d8ecf1, #1b3350);
  --river: light-dark(#3f93c4, #5fb0e0);
  --leaf: light-dark(#17795a, #3bb98d);
  --sky-1: light-dark(#1d1670, #0b0822);
  --sky-2: light-dark(#4a2a8f, #1f175c);
  --sky-3: light-dark(#c63d17, #6a2a63);
  --sky-4: light-dark(#f08a2a, #a8431f);
  --sky-5: light-dark(#f9c85a, #d98a2e);
  --sun: light-dark(#fff0b8, #ffd98a);
  --far: light-dark(#7a2e7e, #4a1f5e);
  --mid: light-dark(#4b1f6f, #2e1650);
  --near: light-dark(#240f4f, #170c36);
  --ground: light-dark(#0c0924, #07051a);
  --river-1: light-dark(#ffcf6b, #d9a24a);
  --river-2: light-dark(#d4551d, #8f3a17);
  --cream: #fbf5ea;
  --land: light-dark(#fffdf8, #342d78);
  --land-2: light-dark(#f3e9d6, #28225e);

  --viz-1: light-dark(#4338d4, #8a80ff);
  --viz-2: light-dark(#e0501f, #ea6332);
  --viz-3: light-dark(#0a8f7e, #2da08f);
  --viz-4: light-dark(#a87a00, #b8860f);
  --viz-5: light-dark(#b0338f, #d65fb4);
  --viz-gray: light-dark(#cfc4ad, #4a4378);
  --seq-1: light-dark(#e8e5fb, #2b2470);
  --seq-2: light-dark(#c6c0f7, #3b33a0);
  --seq-3: light-dark(#9d94ee, #5547c9);
  --seq-4: light-dark(#7266e3, #7a6ef0);
  --seq-5: light-dark(#4a3dcb, #a89fff);
  --seq-6: light-dark(#281d8c, #d5d0ff);
  --on-seq: light-dark(#ffffff, #13102b);

  --f-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-record: "Source Serif 4", Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 18px;
  --shadow: 0 1px 2px light-dark(rgba(27, 22, 48, .06), rgba(0, 0, 0, .4)), 0 10px 30px -12px light-dark(rgba(27, 22, 48, .25), rgba(0, 0, 0, .7));
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-display); font-size: 17px; line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: var(--record); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 3px; }
/* sull'indaco e sul buio l'anello è zafferano; sulla carta chiara è indaco, per superare il contrasto 3:1 */
.top :focus-visible, .night :focus-visible, .band-indigo :focus-visible, .scape-hero :focus-visible, .foot :focus-visible, .phero :focus-visible { outline-color: var(--saffron); }
h1, h2, h3 { text-wrap: balance; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 44px); }
.section { padding-block: clamp(40px, 7vw, 88px); }
.skip { position: absolute; left: 8px; top: -80px; z-index: 50; background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 8px; }

/* ---------- testata e piè di pagina ---------- */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.brand svg { display: block; }
.brand .r { fill: var(--record); }
.brand .v { fill: var(--voice-fill); }
.brand .s { fill: var(--saffron); }
.top-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.theme-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); }
.theme-btn:hover { box-shadow: inset 0 0 0 2px var(--record); }
.theme-btn[hidden] { display: none; }
.theme-btn svg { grid-area: 1 / 1; display: none; }
.theme-btn[data-mode="auto"] .i-auto, .theme-btn[data-mode="light"] .i-light, .theme-btn[data-mode="dark"] .i-dark { display: block; }
.top nav { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.top nav a { font-weight: 600; font-size: .98rem; color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 999px; }
.top nav a:hover { background: var(--record-tint); }
.top nav a[aria-current] { background: var(--ink); color: var(--paper); }

.foot { background: var(--band); color: var(--on-band); padding-block: 40px; margin-top: 0; }
.foot a { color: var(--on-band); }
.foot-in { display: grid; gap: 16px; }
.foot p { margin: 0; max-width: 62ch; font-size: .95rem; opacity: .92; }
.foot .foot-brand { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; opacity: 1; }

/* ---------- elementi comuni ---------- */
.kicker { margin: 0; font-weight: 700; font-size: .85rem; letter-spacing: .04em; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 26px; height: 4px; border-radius: 4px; background: var(--saffron); }
h1 { margin: 0; font-weight: 800; font-size: clamp(2.8rem, 8.4vw, 6.4rem); line-height: .95; letter-spacing: -0.04em; }
.sub { margin: 0; font-size: clamp(1.1rem, 2.2vw, 1.4rem); color: var(--ink-soft); max-width: 46ch; line-height: 1.4; }
.lede { margin: 0; font-size: 1.1rem; max-width: 60ch; }
.btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 14px 22px; min-height: 48px; transition: transform .15s, background .15s; }
.btn:hover { transform: translateY(-2px); }
.btn-alt { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-saffron { background: var(--saffron); color: #1b1630; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.layer-tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .85rem; letter-spacing: .01em; }
.layer-tag::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: currentColor; flex: none; }
.layer-tag.rec { color: var(--record); }
.layer-tag.voi { color: var(--voice); }
.layer-tag.gap { color: var(--flag); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.legend li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .95rem; }
.chip-type { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .85rem; background: var(--record-tint); color: var(--record); border-radius: 999px; padding: 5px 12px; }
.ticon { fill: currentColor; flex: none; }
.draft { margin: 0; font-weight: 700; font-size: .85rem; background: var(--saffron); color: #1b1630; border-radius: 999px; padding: 5px 12px; }
.fine { font-size: .88rem; color: var(--ink-soft); }
.count { font-weight: 600; color: var(--ink-soft); font-size: .9rem; margin-left: 8px; }
.listh { margin: 0 0 20px; font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.05; }

/* ---------- home: apertura ---------- */
.hero { padding-block: clamp(36px, 6vw, 80px) clamp(28px, 5vw, 56px); display: grid; gap: 18px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-art { max-width: 380px; } }
.hero-text { display: grid; gap: 20px; align-content: start; }
.hero-art { width: 100%; }
.hero-art svg { display: block; width: 100%; height: auto; border-radius: 28px; }

/* i due strati, spiegati con i loro colori */
.layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 820px) { .layers { grid-template-columns: minmax(0, 1fr); } }
.layer { border-radius: var(--radius); padding: clamp(22px, 3.4vw, 38px); display: grid; gap: 12px; align-content: start; }
.layer h2 { margin: 0; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.025em; line-height: 1.1; }
.layer p { margin: 0; max-width: 46ch; }
.layer-rec { background: var(--band); color: var(--on-band); }
.layer-rec .layer-tag { color: var(--saffron); }
.layer-voi { background: var(--voice-fill); color: var(--on-voice); }
.layer-voi .layer-tag { color: var(--on-voice-soft); }
.demo { margin-top: 6px !important; font-size: .95rem; }
.demo .cite { color: var(--saffron); }
.layer-voi .demo { font-style: italic; }

/* ---------- fasce a colori ---------- */
.band-sand { background: var(--sand); }
.band-indigo { background: var(--band); color: var(--on-band); }
.band-indigo .listh, .band-indigo .kicker, .band-indigo .fine { color: var(--on-band); }
.band-indigo .kicker::before { background: var(--saffron); }
.band-saffron { background: var(--saffron); color: #1b1630; }
.band-saffron a { color: #1b1630; }

/* ---------- schede dei luoghi ---------- */
.places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.places li[hidden] { display: none; }
.place { display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--surface); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.place:hover, li.hl .place { transform: translateY(-4px); }
.place:focus-visible { outline-offset: 4px; }
.pimg { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--record-tint); }
.pimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.place:hover .pimg img { transform: scale(1.04); }
.pimg .pimg-art { width: 100%; height: 100%; display: block; }
.pbody { display: grid; gap: 8px; padding: 18px 20px 22px; align-content: start; }
.pbody .kicker { font-size: .8rem; }
.pname { font-weight: 800; font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.08; }
.psub { color: var(--ink-soft); font-size: .98rem; line-height: 1.4; }
.pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.pmeta .ticon { fill: var(--record); }
.pbadge { position: absolute; left: 12px; top: 12px; }

/* ---------- mappe SVG ---------- */
.map { display: block; width: 100%; height: auto; background: var(--water); border-radius: var(--radius); }
.map .land { fill: var(--land); stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map .land.has { fill: var(--saffron); stroke: var(--ink); stroke-width: 1.2; }
.map-africa .land { stroke-width: .6; }
.map-gambia .land { fill: var(--land-2); }
.map-gambia .land.has { fill: var(--land); stroke: var(--record); stroke-width: 1.4; }
.map .river { fill: none; stroke: var(--river); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.locator { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.mlabel { font-family: var(--f-display); font-weight: 600; font-style: italic; font-size: 18px; letter-spacing: .06em; fill: var(--ink-soft); pointer-events: none; }
.pin { cursor: pointer; text-decoration: none; }
.pin .hit { fill: transparent; stroke: transparent; }
.pin circle:not(.hit):not(.ring), .pin rect { fill: var(--record); stroke: var(--surface); stroke-width: 3; transition: transform .12s; transform-box: fill-box; transform-origin: center; }
.pin.draft circle:not(.hit):not(.ring), .pin.draft rect { fill: var(--surface); stroke: var(--record); stroke-width: 3; stroke-dasharray: 4 3; }
.pin.cur circle:not(.hit):not(.ring), .pin.cur rect { fill: var(--voice-fill); }
.pin .ring { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.pin.dim { opacity: .5; }
.pin.off { display: none; }
.pin:hover circle:not(.hit):not(.ring), .pin:hover rect, .pin.hl circle:not(.hit):not(.ring), .pin.hl rect { transform: scale(1.3); }
.pin:focus-visible { outline: none; }
.pin:focus-visible .hit { stroke: var(--saffron); stroke-width: 4; }
.plabel { font-family: var(--f-display); font-weight: 700; font-size: 24px; fill: var(--ink); stroke: var(--surface); stroke-width: 7px; paint-order: stroke; stroke-linejoin: round; opacity: 0; pointer-events: none; }
.pin:hover .plabel, .pin:focus-visible .plabel, .pin.hl .plabel, .map-local .pin.cur .plabel { opacity: 1; }
.map-africa a { cursor: pointer; }
.map-africa a:hover .land, .map-africa a:focus-visible .land { stroke-width: 2; }
.map-africa a:focus-visible { outline: none; }
@media (max-width: 920px) { .plabel { font-size: 34px; } .mlabel { font-size: 26px; } .pin circle:not(.hit):not(.ring) { r: 15px; } .pin rect { x: -12px; y: -12px; width: 24px; height: 24px; } }

.maphead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.maphead .listh { margin: 0; }
.maps { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 2fr); gap: clamp(14px, 2.4vw, 28px); align-items: start; }
@media (max-width: 920px) { .maps { grid-template-columns: minmax(0, 1fr); } .fig-gambia { order: -1; } .fig-africa { max-width: 14rem; } }
.maps figure, .loc { margin: 0; }
figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: 10px; max-width: 70ch; }
.band-indigo figcaption, .band-indigo .legend-types li { color: var(--on-band); opacity: .9; }
.legend-types { margin-top: 16px; }
.legend-types li { font-weight: 600; font-size: .9rem; }
.band-indigo .ticon { fill: var(--saffron); }
.filters, .seg { display: flex; flex-wrap: wrap; gap: 8px; }
.fbtn, .seg button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: .92rem; color: var(--ink); background: var(--surface); border: 0; border-radius: 999px; padding: 9px 16px; min-height: 44px; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); transition: background .15s; }
.fbtn:hover, .seg button:hover { box-shadow: inset 0 0 0 2px var(--record); }
.fbtn[aria-pressed="true"], .seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.fbtn .ticon { fill: var(--record); }
.fbtn[aria-pressed="true"] .ticon { fill: var(--saffron); }

/* ---------- pagina del luogo: apertura con foto ---------- */
.phero { position: relative; display: flex; align-items: flex-end; min-height: clamp(460px, 68vh, 700px); color: #fff; background: var(--band); overflow: hidden; }
.phero-img, .phero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 10, 40, .55) 0%, rgba(14, 10, 40, .18) 34%, rgba(14, 10, 40, .55) 62%, rgba(14, 10, 40, .85) 100%); }
.phero-text h1, .phero-text .sub, .phero-text .kicker { text-shadow: 0 1px 14px rgba(14, 10, 40, .6); }
@media (max-width: 920px) { .phero-shade { background: linear-gradient(180deg, rgba(14, 10, 40, .55) 0%, rgba(14, 10, 40, .4) 30%, rgba(14, 10, 40, .72) 60%, rgba(14, 10, 40, .9) 100%); } }
.phero-in { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: end; padding-block: 28px clamp(28px, 5vw, 56px); }
@media (max-width: 920px) { .phero-in { grid-template-columns: minmax(0, 1fr); } }
.phero-top { grid-column: 1 / -1; align-self: start; }
.phero { align-items: stretch; flex-direction: column; justify-content: space-between; }
.phero-text { display: grid; gap: 14px; }
.phero h1 { color: #fff; font-size: clamp(2.6rem, 7.4vw, 5.6rem); }
.phero .sub { color: rgba(255, 255, 255, .92); max-width: 40ch; }
.phero .kicker { color: rgba(255, 255, 255, .92); }
.phero .chip-type { background: rgba(255, 255, 255, .94); color: #1d1670; }
.crumb { margin: 0; }
.crumb a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; color: #fff; text-decoration: none; background: rgba(14, 10, 40, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 8px 14px; border-radius: 999px; }
.crumb a:hover { background: rgba(14, 10, 40, .7); }
.photo-credit { position: relative; z-index: 2; margin: 0; padding: 8px clamp(18px, 4vw, 44px); font-size: .78rem; color: rgba(255, 255, 255, .88); text-align: right; background: rgba(14, 10, 40, .55); }
.photo-credit a { color: #fff; }
.phero .loc { background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); }
.phero .loc .map { border-radius: 10px; }
.phero .loc figcaption { margin: 8px 4px 2px; font-size: .78rem; }
.phero .ptype { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.phero.noimg { background: var(--band); }
.phero-art { position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: min(46vw, 560px); opacity: .95; }
.phero-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 920px) { .phero-art { opacity: .22; } }

.page-intro { padding-block: clamp(28px, 4vw, 48px) 8px; display: grid; gap: 16px; }
.jump { display: none; margin: 0; font-weight: 600; }
@media (max-width: 920px) { .jump { display: block; } }

.cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; padding-block: clamp(24px, 4vw, 48px) clamp(48px, 7vw, 96px); }
@media (max-width: 920px) { .cols { grid-template-columns: minmax(0, 1fr); } }

/* strato 1: il racconto documentato, su carta, senza scatole */
.record { display: grid; gap: clamp(36px, 5vw, 56px); min-width: 0; }
.record h2 { margin: 0 0 14px; font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.3rem); letter-spacing: -0.03em; line-height: 1.08; }
.record p, .record li, .record dd { font-family: var(--f-record); font-size: 1.125rem; line-height: 1.7; }
.record p { margin: 0 0 1em; max-width: 66ch; }
.record p:last-child { margin-bottom: 0; }
.sec-head { margin-bottom: 14px; }
.cite { font-family: var(--f-mono); font-size: .68rem; vertical-align: super; line-height: 0; margin-left: .15em; color: var(--record); text-decoration: none; white-space: nowrap; font-weight: 500; }
.cite:hover { text-decoration: underline; }
.record > section { padding-left: clamp(0px, 2vw, 22px); border-left: 0; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 12px; margin: 22px 0; }
.facts div { background: var(--record-tint); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.facts dt { font-weight: 600; font-size: .82rem; color: var(--ink-soft); }
.facts dd { margin: 4px 0 0; font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }

.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--record-tint); }
.timeline li { position: relative; display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: 4px 18px; padding: 10px 0 14px 30px; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 4px var(--record); }
.yr { font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--record); padding-top: .15rem; }
@media (max-width: 560px) { .timeline li { grid-template-columns: minmax(0, 1fr); } }
.record .note-small { font-family: var(--f-display); font-size: .9rem; color: var(--ink-soft); line-height: 1.5; margin-top: 12px; }

.gaps { background: var(--flag-tint); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); border-left: 8px solid var(--saffron); }
.gaps ul { margin: 12px 0 0; padding-left: 1.1em; }
.gaps li { margin-bottom: .6em; }
.gaps li:last-child { margin-bottom: 0; }
.record .gaps li { font-size: 1.02rem; line-height: 1.55; }
.panel-gaps { margin-bottom: 28px; }

.sources h2 { margin: 0 0 14px; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; }
.sources ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.sources li { display: grid; gap: 4px; font-family: var(--f-display) !important; font-size: .95rem !important; line-height: 1.45 !important; scroll-margin-top: 90px; }
.sources li a { overflow-wrap: anywhere; }
.retr { color: var(--ink-soft); font-size: .84rem; }
.tier { justify-self: start; font-weight: 700; font-size: .74rem; border-radius: 999px; padding: 2px 10px; background: var(--record-tint); color: var(--record); }
.tier.chk { background: var(--flag-tint); color: var(--flag); box-shadow: inset 0 0 0 1px var(--flag-line); }

/* strato 2: le voci, un pannello caldo */
.voices { position: sticky; top: 92px; background: var(--voice-surface); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); display: grid; gap: 26px; min-width: 0; box-shadow: inset 0 0 0 1.5px var(--voice-line); }
@media (max-width: 920px) { .voices { position: static; } }
.voices h2 { margin: 0; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.015em; }
.voices .vhead { display: grid; gap: 10px; }
.voices .vhead h2 { font-size: clamp(1.5rem, 2.8vw, 1.9rem); line-height: 1.08; letter-spacing: -0.025em; }
.voices p { margin: 0; }
.voices .intro { color: var(--ink-soft); font-size: .98rem; }
.notes { display: grid; gap: 12px; }
.notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.empty { border: 2px dashed var(--voice-line); border-radius: 14px; padding: 18px; display: grid; gap: 6px; }
.empty strong { font-weight: 700; }
.empty span { color: var(--ink-soft); font-size: .93rem; }
.nt { background: var(--surface); border-radius: 14px; padding: 16px 18px; display: grid; gap: 8px; min-width: 0; box-shadow: var(--shadow); }
.chip { justify-self: start; font-weight: 700; font-size: .78rem; color: var(--voice); background: var(--voice-tint); border-radius: 999px; padding: 3px 11px; }
.nt .txt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.02rem; line-height: 1.55; }
.nt .by { font-size: .86rem; color: var(--ink-soft); }
.nt .by b { color: var(--ink); font-weight: 700; }
.asks ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.asks li { font-size: .95rem; display: grid; gap: 4px; }

/* ---------- pagine di testo (Method) ---------- */
.prose-hero { padding-block: clamp(36px, 6vw, 72px) 8px; }
.prose { max-width: 70ch; padding-block: 8px clamp(48px, 7vw, 96px); }
.prose h1 { font-size: clamp(2.6rem, 8vw, 5rem); margin-bottom: 18px; }
.prose h2 { font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.025em; margin: 44px 0 10px; display: flex; align-items: center; gap: 12px; }
.prose h2::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--saffron); flex: none; }
.prose h2:nth-of-type(2)::before { background: var(--voice-fill); }
.prose h2:nth-of-type(1)::before { background: var(--record); }
.prose p { font-family: var(--f-record); font-size: 1.15rem; line-height: 1.75; margin: 0 0 1em; }
.prose .lede { font-family: var(--f-display); font-size: 1.4rem; line-height: 1.4; }

/* ======================================================================
   Pagina Countries
   ====================================================================== */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
@media (max-width: 820px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 4px; min-width: 0; background: var(--record-tint); }
.kpi:nth-child(2) { background: var(--voice-tint); }
.kpi:nth-child(3) { background: var(--flag-tint); }
.kpi:nth-child(4) { background: var(--sand); }
.kl { font-weight: 600; font-size: .85rem; color: var(--ink-soft); }
.kv { font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.5rem); letter-spacing: -0.035em; line-height: 1.05; }

.panel { background: var(--surface); border-radius: var(--radius); padding: clamp(18px, 3vw, 32px); box-shadow: var(--shadow); }
.phead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.panel h2 { margin: 0; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.05; }
.panel .fine { margin: 14px 0 0; max-width: 70ch; }

.mapwrap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 36px); align-items: start; }
@media (max-width: 920px) { .mapwrap { grid-template-columns: minmax(0, 1fr); } }
.mapcol { min-width: 0; }
.cmap .c { stroke: var(--surface); stroke-width: .8; cursor: pointer; transition: opacity .12s; }
.cmap .c:hover, .cmap .c:focus-visible { stroke: var(--ink); stroke-width: 2; outline: none; }
.cmap .nodata { fill: var(--line); opacity: .7; }
.cmap .cap { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
.cmap .c.dim, .cmap .cap.dim { opacity: .18; }
.cmap .selring { fill: none; stroke: var(--ink); stroke-width: 3; pointer-events: none; }
.cmap .c.sel { stroke: var(--ink); }
.isles-t { margin: 14px 0 8px; font-weight: 700; font-size: .85rem; color: var(--ink-soft); }
.isles { display: flex; flex-wrap: wrap; gap: 6px; }
.isle { font-size: .88rem; font-weight: 700; padding: 6px 13px; border-radius: 999px; cursor: pointer; color: var(--ink); }
.isle.dim { opacity: .25; }
.isle.sel { outline: 3px solid var(--ink); outline-offset: 2px; }
.mapwrap[data-m] .isle { color: var(--ink); }
.legends { display: grid; gap: 16px; }
.scale-t { margin: 0 0 8px; font-weight: 800; }
.scale ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.scale li { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.scale .sw { width: 30px; height: 14px; border-radius: 4px; flex: none; }
.scale .n { margin-left: auto; font-size: .8rem; color: var(--ink-soft); font-weight: 600; }
.scale .n::after { content: " countries"; }
.sw[data-b="1"] { background: var(--seq-1); } .sw[data-b="2"] { background: var(--seq-2); } .sw[data-b="3"] { background: var(--seq-3); }
.sw[data-b="4"] { background: var(--seq-4); } .sw[data-b="5"] { background: var(--seq-5); } .sw[data-b="6"] { background: var(--seq-6); }
.mapwrap[data-m="pop"] .scale:not([data-for="pop"]), .mapwrap[data-m="area"] .scale:not([data-for="area"]), .mapwrap[data-m="den"] .scale:not([data-for="den"]), .mapwrap[data-m="bloc"] .scale:not([data-for="bloc"]) { display: none; }
.capkey { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); margin-right: 5px; }
.detail { background: var(--paper); border-radius: 14px; padding: 16px 18px; display: grid; gap: 10px; box-shadow: inset 0 0 0 1.5px var(--line); }
.detail[hidden] { display: none; }
.detail h3 { margin: 0; font-weight: 800; font-size: 1.6rem; letter-spacing: -0.03em; }
.detail p { margin: 0; }
.detail-hint, .detail-cap, .detail-rank { color: var(--ink-soft); font-size: .93rem; }
.detail-dl { margin: 0; display: grid; gap: 6px; }
.detail-dl div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 10px; }
.detail-dl dt { font-weight: 600; font-size: .86rem; color: var(--ink-soft); padding-top: .15rem; }
.detail-dl dd { margin: 0; font-weight: 700; }
.detail-card { font-weight: 700; }
.detail-clear { justify-self: start; font: inherit; font-weight: 600; font-size: .85rem; color: var(--ink); background: none; border: 0; box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 999px; padding: 7px 14px; min-height: 38px; cursor: pointer; }
.detail-clear:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.mapwrap[data-m="pop"] .c[data-pop="1"], .mapwrap[data-m="area"] .c[data-area="1"], .mapwrap[data-m="den"] .c[data-den="1"] { fill: var(--seq-1); background: var(--seq-1); }
.mapwrap[data-m="pop"] .c[data-pop="2"], .mapwrap[data-m="area"] .c[data-area="2"], .mapwrap[data-m="den"] .c[data-den="2"] { fill: var(--seq-2); background: var(--seq-2); }
.mapwrap[data-m="pop"] .c[data-pop="3"], .mapwrap[data-m="area"] .c[data-area="3"], .mapwrap[data-m="den"] .c[data-den="3"] { fill: var(--seq-3); background: var(--seq-3); }
.mapwrap[data-m="pop"] .c[data-pop="4"], .mapwrap[data-m="area"] .c[data-area="4"], .mapwrap[data-m="den"] .c[data-den="4"] { fill: var(--seq-4); background: var(--seq-4); }
.mapwrap[data-m="pop"] .c[data-pop="5"], .mapwrap[data-m="area"] .c[data-area="5"], .mapwrap[data-m="den"] .c[data-den="5"] { fill: var(--seq-5); background: var(--seq-5); }
.mapwrap[data-m="pop"] .c[data-pop="6"], .mapwrap[data-m="area"] .c[data-area="6"], .mapwrap[data-m="den"] .c[data-den="6"] { fill: var(--seq-6); background: var(--seq-6); }
/* testo sulle etichette delle isole: sulle fasce scure serve il colore opposto allo sfondo */
.mapwrap[data-m="pop"] .isle[data-pop="4"], .mapwrap[data-m="pop"] .isle[data-pop="5"], .mapwrap[data-m="pop"] .isle[data-pop="6"],
.mapwrap[data-m="area"] .isle[data-area="4"], .mapwrap[data-m="area"] .isle[data-area="5"], .mapwrap[data-m="area"] .isle[data-area="6"],
.mapwrap[data-m="den"] .isle[data-den="4"], .mapwrap[data-m="den"] .isle[data-den="5"], .mapwrap[data-m="den"] .isle[data-den="6"] { color: var(--on-seq); }

.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 56px); }
@media (max-width: 920px) { .charts { grid-template-columns: minmax(0, 1fr); } }
.chart { margin: 0; min-width: 0; }
.chart.wide { grid-column: 1 / -1; }
.chart h2 { margin: 0 0 6px; font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.75rem); letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
.chart-sub { margin: 0 0 18px; color: var(--ink-soft); font-size: .95rem; }
.chart figcaption { margin-top: 14px; font-size: .9rem; max-width: 75ch; }
.subfilter { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: .9rem; font-weight: 600; }
.bars, .paired { display: grid; gap: 10px; }
.brow { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr) 4.6rem; align-items: center; gap: 12px; }
.bname { font-size: .95rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.btrack { display: block; min-width: 0; }
.bfill { display: block; height: 16px; background: var(--viz-1); border-radius: 0 6px 6px 0; min-width: 2px; }
.bfill.mute { background: var(--viz-gray); }
.bfill.s1 { background: var(--viz-1); } .bfill.s2 { background: var(--viz-2); }
.bval { font-weight: 700; font-size: .85rem; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.brow.dim, .prow.dim { opacity: .25; }
@media (max-width: 480px) { .brow { grid-template-columns: 5.6rem minmax(0, 1fr) 3.8rem; gap: 8px; } }
.prow { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; column-gap: 14px; row-gap: 2px; padding: 12px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.prow-thumb { grid-row: 1 / span 2; width: 56px; height: 72px; border-radius: 999px 999px 10px 10px; overflow: hidden; background: color-mix(in srgb, var(--record) 12%, var(--surface)); display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; color: var(--record); box-shadow: 0 0 0 1.5px var(--line); }
.prow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pline { display: grid; grid-template-columns: minmax(0, 1fr) 3.4rem; align-items: center; gap: 12px; }
.vlegend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 16px; padding: 0; font-size: .92rem; font-weight: 600; }
.vlegend li { display: inline-flex; align-items: center; gap: 8px; }
.vkey { width: 14px; height: 14px; border-radius: 4px; }
.vkey.s1 { background: var(--viz-1); } .vkey.s2 { background: var(--viz-2); }
.brow:focus-visible, .pline:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }

.sc { display: block; width: 100%; max-width: 780px; height: auto; margin-inline: auto; }
.sc .grid { stroke: var(--line); stroke-width: 1; }
.sc .tick { fill: var(--ink-soft); font-family: var(--f-display); font-weight: 600; font-size: 12px; }
.sc .axt { fill: var(--ink-soft); font-family: var(--f-display); font-weight: 600; font-size: 13px; }
.sc .iso { stroke: var(--ink-soft); stroke-opacity: .5; stroke-width: 1; }
.sc .isot { fill: var(--ink-soft); font-family: var(--f-display); font-weight: 600; font-size: 11.5px; }
.sc .dot { fill: var(--viz-1); stroke: var(--surface); stroke-width: 2; cursor: pointer; transition: opacity .12s; }
.sc .dot:hover, .sc .dot:focus-visible { stroke: var(--ink); outline: none; }
.sc .dot.dim { opacity: .18; }
.sc .plab { fill: var(--ink); font-family: var(--f-display); font-weight: 800; font-size: 13.5px; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
@media (max-width: 600px) { .sc .tick, .sc .isot { font-size: 16px; } .sc .axt, .sc .plab { font-size: 17px; } }

.tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tools input, .tools select, .subfilter select { font: inherit; font-size: .95rem; color: var(--ink); background: var(--paper); border: 0; box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 999px; padding: 9px 16px; min-height: 44px; width: auto; }
.tools input { min-width: 15rem; }
.tablewrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .96rem; }
table.data th, table.data td { padding: 12px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
table.data thead th { font-weight: 700; font-size: .85rem; color: var(--ink-soft); white-space: nowrap; user-select: none; position: sticky; top: 0; background: var(--surface); }
table.data thead th[aria-sort="ascending"]::after { content: " \2191"; color: var(--record); }
table.data thead th[aria-sort="descending"]::after { content: " \2193"; color: var(--record); }
table.data tbody th { font-weight: 700; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tr[hidden] { display: none; }
table.data tbody tr { cursor: pointer; }
table.data tbody tr:hover { background: var(--record-tint); }
table.data tbody tr.sel { background: var(--saffron); color: #1b1630; }
table.data tbody tr.sel a { color: #1b1630; }
table.data tbody tr:focus-visible { outline: 3px solid var(--saffron); outline-offset: -3px; }
.cardlink { display: inline-block; margin-left: 8px; font-weight: 700; font-size: .78rem; background: var(--voice-tint); color: var(--voice); border-radius: 999px; padding: 2px 10px; text-decoration: none; }
tr.sel .cardlink { background: #fff; color: #7a2410; }
#tip { position: absolute; z-index: 60; max-width: min(22rem, calc(100vw - 16px)); background: var(--ink); color: var(--paper); font-size: .85rem; line-height: 1.35; padding: 8px 12px; border-radius: 10px; pointer-events: none; }
#tip[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } .place:hover { transform: none; } }

/* grafica geometrica generata (art) */
.art .a1 { fill: var(--record); } .art .a2 { fill: var(--voice-fill); } .art .a3 { fill: var(--saffron); }
.art .a4 { fill: var(--surface); } .art .a5 { fill: var(--leaf); } .art .a6 { fill: var(--sand); } .art .a7 { fill: var(--band); }
.pimg .pimg-art { width: 100%; height: 100%; }
.phero-in { flex: 1; grid-template-rows: auto 1fr; }
.teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.teaser-text { display: grid; gap: 14px; max-width: 58ch; }
.teaser .listh { margin: 0; }
.band-saffron .kicker, .band-saffron .lede { color: #1b1630; }
.band-saffron .kicker::before { background: #1b1630; }
.band-saffron .btn { background: #1b1630; color: #fbf5ea; }
.layers-sec { padding-block: clamp(8px, 2vw, 24px) clamp(40px, 6vw, 72px); }
.band-indigo .legend-types li { opacity: 1; }
.band-indigo .map { box-shadow: 0 0 0 1px rgba(255,255,255,.12); }

/* ======================================================================
   Home: il paesaggio, la notte con le schede ad arco, i due soli
   ====================================================================== */
.has-hero .top { position: absolute; left: 0; right: 0; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.has-hero .brand, .has-hero .top nav a { color: var(--cream); }
.has-hero .brand .r { fill: var(--cream); }
.has-hero .brand .v { fill: var(--sky-4); }
.has-hero .brand .s { fill: var(--sun); }
.has-hero .top nav a:hover { background: rgba(251, 245, 234, .16); }
.has-hero .top nav a[aria-current] { background: var(--cream); color: #1d1670; }
.has-hero .theme-btn { color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(251, 245, 234, .55); }
.has-hero .theme-btn:hover { box-shadow: inset 0 0 0 2px var(--cream); }

.scape-hero { position: relative; height: clamp(660px, 94vh, 920px); overflow: hidden; background: var(--sky-1); color: var(--cream); display: flex; justify-content: center; }
.scape { position: absolute; inset: 0; width: 100%; height: 100%; }
.scape .sk1 { stop-color: var(--sky-1); } .scape .sk2 { stop-color: var(--sky-2); } .scape .sk3 { stop-color: var(--sky-3); }
.scape .sk4 { stop-color: var(--sky-4); } .scape .sk5 { stop-color: var(--sky-5); }
.scape .glow { stop-color: var(--sun); }
.scape .riv1 { stop-color: var(--river-1); } .scape .riv2 { stop-color: var(--river-2); }
.scape .sunfill { fill: var(--sun); }
.scape .far { fill: var(--far); } .scape .mid { fill: var(--mid); } .scape .near { fill: var(--near); } .scape .ground { fill: var(--ground); }
.scape .refl { stroke: var(--sun); }
.scape .star { fill: var(--cream); } .scape .bird { stroke: var(--cream); }
.bao { fill: var(--ground); stroke: var(--ground); }
.scape-text { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: clamp(96px, 14vh, 140px) clamp(18px, 4vw, 56px) 0; max-width: 1100px; }
.scape-kicker { margin: 0; font-weight: 700; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sun); }
.scape-text h1 { font-size: clamp(3.1rem, 11vw, 9.4rem); color: var(--cream); max-width: none; text-shadow: 0 2px 36px rgba(29, 22, 112, .5); }
.scape-sub { margin: 0; font-size: clamp(1.1rem, 2.2vw, 1.55rem); line-height: 1.35; max-width: 32ch; color: var(--cream); text-shadow: 0 1px 3px rgba(29, 22, 112, .55), 0 2px 22px rgba(29, 22, 112, .7); }
.btn-cream { background: var(--cream); color: #1d1670; }
.scape-text .actions { justify-content: center; }

.night { background: var(--ground); color: var(--cream); padding-block: clamp(32px, 5vw, 56px) clamp(64px, 9vw, 130px); }
.night-head { display: grid; gap: 14px; justify-items: start; margin-bottom: clamp(32px, 6vw, 72px); }
.night-head .listh { margin: 0; color: var(--cream); }
.night-note { margin: 0; max-width: 56ch; font-family: var(--f-record); font-size: 1.15rem; line-height: 1.6; color: rgba(251, 245, 234, .86); text-wrap: pretty; }
.night .count { color: rgba(251, 245, 234, .7); }
.arches { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 19rem)); justify-content: center; gap: clamp(28px, 4vw, 56px); align-items: start; }
.arches .place { background: transparent; box-shadow: none; color: var(--cream); border-radius: 0; overflow: visible; grid-template-rows: auto auto; gap: 22px; }
.arches .place:hover, .arches li.hl .place { transform: translateY(-6px); }
.arches .pimg { aspect-ratio: 5 / 7; border-radius: 999px 999px 28px 28px; box-shadow: 0 0 0 6px rgba(244, 179, 36, .22), 0 30px 80px -24px rgba(240, 138, 42, .5); background: var(--near); }
.arches .pbody { padding: 0; gap: 8px; }
.arches .kicker { color: var(--sky-5); }
.arches .kicker::before { background: var(--sky-5); }
.arches .pname { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1; }
.arches .psub { color: rgba(251, 245, 234, .82); }
.arches .pmeta { color: rgba(251, 245, 234, .78); }
.arches .pmeta .ticon { fill: var(--sun); }
.arches .pbadge { left: 50%; top: 18px; transform: translateX(-50%); }
@media (min-width: 920px) { .arches li:nth-child(even) { margin-top: 72px; } }
@media (max-width: 600px) { .arches li { max-width: 22rem; margin-inline: auto; width: 100%; } .arches .pimg { aspect-ratio: 4 / 5; } }

.wave { background: var(--ground); line-height: 0; }
.wave svg { display: block; width: 100%; height: clamp(60px, 8vw, 120px); }
.wave path { fill: var(--paper); }

.suns-sec { padding-block: clamp(36px, 6vw, 72px) clamp(56px, 9vw, 128px); display: grid; justify-items: center; gap: clamp(32px, 5vw, 56px); }
.suns-title { margin: 0; font-weight: 800; font-size: clamp(2.2rem, 6vw, 4.75rem); line-height: .98; letter-spacing: -0.04em; text-align: center; max-width: 14ch; }
.suns { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); justify-content: center; }
.sun { width: min(100%, 460px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: clamp(36px, 8%, 64px); }
.sun h3 { margin: 0; font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -0.035em; }
.sun p { margin: 0; font-size: 1.1rem; line-height: 1.5; max-width: 34ch; }
.sun-rec { background: var(--band); color: var(--on-band); }
.sun-rec .layer-tag { color: var(--saffron); }
.sun-voi { background: var(--voice-fill); color: var(--on-voice); }
.sun-voi .layer-tag { color: var(--on-voice-soft); }
@media (max-width: 820px) { .sun { aspect-ratio: auto; border-radius: 28px; padding: 32px 26px; } }

/* ======================================================================
   Aperture delle altre pagine: stesso paesaggio, più basso, con onda finale
   ====================================================================== */
/* L'altezza segue il testo: un titolo lungo (le storie) non deve finire sotto l'onda in fondo. */
.scape-hero.compact { height: auto; min-height: clamp(420px, 58vh, 560px); }
.scape-hero.compact .scape-text { padding-top: clamp(88px, 13vh, 120px); padding-bottom: clamp(72px, 9vw, 120px); }
.scape-hero.compact h1 { font-size: clamp(2.4rem, 7vw, 5.6rem); text-wrap: balance; }
.hero-wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(40px, 6vw, 80px); display: block; z-index: 1; }
.hero-wave path { fill: var(--paper); }
.hero-lede { padding-block: clamp(20px, 3vw, 36px) clamp(14px, 2vw, 24px); }
.hero-lede .lede { max-width: 66ch; }
.phero-in { padding-top: 92px; padding-bottom: clamp(64px, 9vw, 120px); }
.phero .scape { z-index: 0; }
.phero .scape ~ .phero-in { position: relative; }
.photo-note { margin-block: 0; padding-block: 8px 0; font-size: .82rem; color: var(--ink-soft); }
.photo-note a { color: var(--ink-soft); }
.prose-hero { padding-top: clamp(16px, 3vw, 32px); }

/* ======================================================================
   Modulo "Add your voice": prepara un messaggio, non invia nulla
   ====================================================================== */
.share { display: grid; gap: 14px; padding-top: 22px; border-top: 2px solid var(--voice-line); }
.share h2 { font-size: 1.35rem; }
.share-intro, .share-nojs { font-size: .96rem; color: var(--ink-soft); }
.btn-voice { justify-self: start; font: inherit; font-weight: 700; font-size: 1rem; background: var(--voice-fill); color: var(--on-voice); border: 0; border-radius: 999px; padding: 13px 22px; min-height: 48px; cursor: pointer; transition: transform .15s; }
.btn-voice:hover { transform: translateY(-2px); }
.btn-voice[hidden], .share-form[hidden], .share-nojs[hidden] { display: none; }
.share-form { display: grid; gap: 14px; }
.share-form label { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; }
.share-form .opt { font-weight: 500; color: var(--ink-soft); }
.share-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px; }
.share-form input[type="text"], .share-form select, .share-form textarea { width: 100%; min-width: 0; font: inherit; font-weight: 400; color: var(--ink); background: var(--surface); border: 0; box-shadow: inset 0 0 0 1.5px var(--voice-line); border-radius: 12px; padding: 11px 13px; min-height: 46px; }
.share-form textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.share-form input:focus-visible, .share-form select:focus-visible, .share-form textarea:focus-visible { outline: 3px solid var(--saffron); outline-offset: 1px; }
.share-q { color: var(--voice); font-weight: 600; font-size: .95rem; }
.share-count { margin: -8px 0 0 !important; font-size: .8rem; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.share-form .share-consent { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; font-weight: 500; font-size: .9rem; line-height: 1.45; padding: 12px 14px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--voice-line); }
.share-consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--voice-fill); }
.share-priv { font-size: .9rem; color: var(--ink-soft); }
.share-priv summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.share-priv p { margin: 8px 0 0 !important; }
.share-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.share-send, .share-copy { font: inherit; font-weight: 700; font-size: .95rem; border: 0; border-radius: 999px; padding: 12px 20px; min-height: 46px; cursor: pointer; }
.share-send { background: var(--voice-fill); color: var(--on-voice); }
.share-copy { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink-soft); }
.share-send:hover, .share-copy:hover { transform: translateY(-1px); }
.share-status { min-height: 1.4em; margin: 0 !important; font-size: .92rem; font-weight: 600; color: var(--ink); }
.share-status.err { color: var(--voice); }

/* ---------- pulsante flottante ---------- */
.fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab[hidden], .fab-menu[hidden] { display: none; }
.fab-btn { width: 52px; height: 52px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--sun); color: #1d1670; box-shadow: 0 10px 28px -8px rgba(12, 9, 36, .55), 0 0 0 2px #1d1670; transition: transform .2s; }
.fab-btn:hover { transform: translateY(-2px); }
.fab-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.fab-btn svg { transition: transform .2s; }
.fab-menu { list-style: none; margin: 0; padding: 8px; min-width: 11rem; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 40px -14px rgba(12, 9, 36, .5), 0 0 0 1px var(--line); }
.fab-menu a { display: block; padding: 13px 14px; border-radius: 10px; color: inherit; text-decoration: none; font-weight: 600; font-size: .95rem; }
.fab-menu a:hover, .fab-menu a:focus-visible { background: color-mix(in srgb, var(--record) 14%, transparent); }
@media (prefers-reduced-motion: reduce) { .fab-btn, .fab-btn svg { transition: none; } }

/* ---------- pagina Places ---------- */
.places-index { padding-block: clamp(24px, 4vw, 48px) clamp(56px, 8vw, 110px); }
.pi-count { margin: 0 0 18px; color: var(--ink-soft); }
.pi-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 4vw, 44px); }
.pi-jump a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--line); }
.pi-jump a:hover { box-shadow: inset 0 0 0 2px var(--record); }
.pi-jump .n { color: var(--ink-soft); font-weight: 500; }
.pgroup { margin-bottom: clamp(28px, 5vw, 56px); scroll-margin-top: 80px; }
.pgroup h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 3vw, 2rem); }
.prows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 4px 28px; }
.prow { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 12px; row-gap: 2px; padding: 14px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.prow:hover .prow-name, .prow:focus-visible .prow-name { color: var(--record); text-decoration: underline; text-underline-offset: 3px; }
.prow-name { font-weight: 700; font-size: 1.1rem; }
.prow-meta { grid-column: 2 / -1; color: var(--ink-soft); font-size: .88rem; }
.prow .ticon { vertical-align: -2px; margin-right: 4px; }
.prow .draft { grid-column: 3; grid-row: 1; background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 600; }
.night-more { margin-top: clamp(28px, 5vw, 56px); text-align: center; }

/* filtri della pagina Places */
.pi-tools { display: grid; gap: 14px; margin-bottom: 18px; }
.pi-tools[hidden], .pi-empty[hidden], .pgroup[hidden], .pgroup li[hidden] { display: none; }
.pi-search input { width: 100%; max-width: 30rem; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; font: inherit; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
.pi-search input:focus-visible { outline: 3px solid var(--record); outline-offset: 2px; }
.pi-jump a[aria-pressed="true"] { background: var(--record); color: var(--paper); box-shadow: none; }
.pi-jump a[aria-pressed="true"] .n { color: inherit; }
.pi-empty { margin: 8px 0 32px; color: var(--ink-soft); }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--record); text-decoration: underline; cursor: pointer; }
.sun-more { margin: 14px 0 0; } .sun-more a { color: inherit; font-weight: 700; text-underline-offset: 3px; }

/* paesaggio sui telefoni: il sole e il baobab di destra si spostano dentro l'inquadratura invece di essere tagliati */
@media (max-width: 760px) {
  .scape .sun-m { transform: translateX(-330px); }
  .scape .bR { transform: translateX(-430px); }
  .scape .bird { display: none; }
}

.sourcing { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--radius); background: var(--flag-tint); color: var(--ink); font-size: .95rem; max-width: 62ch; }

/* ---------- movimento (solo se la persona non ha chiesto di ridurlo: la classe m-ok la mette theme.js) ---------- */
/* Il testo dei titoli aspetta Motion; se Motion non parte, compare comunque dopo 2 secondi. */
.m-ok .scape-text > *, .m-ok .phero-text > * { opacity: 0; animation: m-fallback 0s 2s forwards; }
@keyframes m-fallback { to { opacity: 1; } }
.m-ok .scape .sunrise { animation: m-sunrise 3.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes m-sunrise { from { transform: translateY(190px); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
.m-ok .scape .star circle { animation: m-twinkle 5s ease-in-out infinite; }
.m-ok .scape .star circle:nth-child(2n) { animation-delay: -1.7s; animation-duration: 6.3s; }
.m-ok .scape .star circle:nth-child(3n) { animation-delay: -3.1s; animation-duration: 4.4s; }
@keyframes m-twinkle { 50% { opacity: .25; } }
.m-ok .scape .bird { animation: m-drift 42s linear infinite alternate; }
@keyframes m-drift { from { transform: translate(-60px, 6px); } to { transform: translate(90px, -10px); } }
.m-ok .phero-img img { transform: scale(1.14); }
/* le foto delle schede ad arco respirano al passaggio */
.arches .pimg { overflow: hidden; }
.m-ok .arches .pimg img, .m-ok .arches .pimg .art { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.m-ok .arches .place:hover .pimg img, .m-ok .arches .place:focus-visible .pimg img { transform: scale(1.07); }
.m-ok .fab:not([hidden]) { animation: m-fabin .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes m-fabin { from { opacity: 0; transform: translateY(16px) scale(.8); } }
.m-ok .btn { transition: transform .2s, box-shadow .2s; }
.m-ok .btn:hover { transform: translateY(-2px); }
.m-ok .btn:active { transform: translateY(0) scale(.98); }
/* tra una pagina e l'altra: dissolvenza, con la testata ferma (dove il browser supporta le transizioni di vista) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .top { view-transition-name: top; }
  ::view-transition-old(root) { animation: m-vt-out .22s ease both; }
  ::view-transition-new(root) { animation: m-vt-in .4s ease both; }
}
@keyframes m-vt-out { to { opacity: 0; } }
@keyframes m-vt-in { from { opacity: 0; } }

/* mappa continentale con un pin per scheda */
.mapbox { margin: 0; }
.mapbox figcaption { margin-top: 12px; font-size: .9rem; color: var(--on-band, var(--cream)); opacity: .85; max-width: 70ch; }
.map-continent { max-height: 86vh; }
.map-continent .land, .map-continent .land.has { fill: var(--land); stroke: var(--line); stroke-width: .6; }
.map-continent .plabel { display: none; }
.map-continent .pin circle:not(.hit):not(.ring), .map-continent .pin rect { transform: scale(1.5); stroke-width: 2.5; }
.map-continent .pin:hover circle:not(.hit):not(.ring), .map-continent .pin:hover rect, .map-continent .pin.hl circle:not(.hit):not(.ring), .map-continent .pin.hl rect { transform: scale(2.1); }
.band-indigo .filters { margin-bottom: 16px; }
.tag-outline { grid-column: 3; grid-row: 1; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---------- mappa dell'Africa, versione notturna ---------- */
.mapbox { position: relative; }
.map-continent { background: #0d0a2b; border-radius: var(--radius); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
.map-continent .grat { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: calc(1px * var(--k, 1)); }
.map-continent .land, .map-continent .land.has { fill: #2a2478; stroke: rgba(255, 240, 184, .32); stroke-width: calc(1.1px * var(--k, 1)); vector-effect: none; transition: fill .25s; }
.map-continent .land:hover { fill: #4a3a9a; }
.map-continent .pin circle:not(.hit):not(.ring):not(.pulse), .map-continent .pin rect { fill: var(--sun); stroke: #0c0924; stroke-width: 2; transform: scale(calc(1.1 * var(--k, 1))); filter: drop-shadow(0 0 6px rgba(255, 217, 138, .9)); }
.map-continent .pin:hover circle:not(.hit):not(.ring):not(.pulse), .map-continent .pin:hover rect, .map-continent .pin:focus-visible circle:not(.hit):not(.ring):not(.pulse), .map-continent .pin:focus-visible rect { transform: scale(calc(1.9 * var(--k, 1))); fill: #fff; }
.map-continent .clabels a, .map-continent .cplabels a { cursor: pointer; }
.map-continent .cn:hover, .map-continent .cp:hover text { fill: #fff; }
.map-continent .cn { font: 600 calc(11px * var(--k, 1)) var(--f-display); letter-spacing: .14em; text-transform: uppercase; fill: rgba(236, 230, 255, .62); paint-order: stroke; stroke: #1c1650; stroke-width: calc(3px * var(--k, 1)); stroke-linejoin: round; display: none; }
.map-continent[data-lod="0"] .cn.big, .map-continent[data-lod="1"] .cn, .map-continent[data-lod="2"] .cn { display: block; }
.map-continent .cp { display: none; }
.map-continent .cp circle { fill: #fff; stroke: #0c0924; stroke-width: calc(1.2px * var(--k, 1)); transform: scale(var(--k, 1)); transform-box: fill-box; transform-origin: center; }
.map-continent .cp text { font: 700 calc(11px * var(--k, 1)) var(--f-display); fill: #fff; paint-order: stroke; stroke: #0c0924; stroke-width: calc(3px * var(--k, 1)); stroke-linejoin: round; display: none; transform: scale(1); }
.map-continent[data-lod="1"] .cp, .map-continent[data-lod="2"] .cp { display: block; }
.map-continent[data-lod="2"] .cp text { display: block; }
.detail-prof { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.detail-prof dd { font-weight: 400; font-size: .92rem; }
.map-continent .hit { transform: scale(var(--k, 1)); transform-box: fill-box; transform-origin: center; }
.map-continent .pin.clu circle:not(.hit):not(.ring):not(.pulse), .map-continent .pin.clu rect { stroke: #fff; stroke-width: 2.5; }
.map-continent { cursor: default; }
.map-continent .pin.clu { cursor: zoom-in; }
.map-continent .pulse { display: none; fill: none; stroke: var(--sun); stroke-width: 2; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.m-ok .map-continent .pulse { display: block; opacity: 0; }
.m-ok .map-continent.in .pulse { animation: m-pulse 3.2s ease-out infinite; animation-delay: calc(var(--i) * -290ms); }
@keyframes m-pulse { from { transform: scale(calc(1.1 * var(--k, 1))); opacity: .7; } to { transform: scale(calc(3.4 * var(--k, 1))); opacity: 0; } }
/* i pin compaiono a pioggia quando la mappa entra in vista; senza JavaScript restano visibili */
.m-ok .map-continent:not(.in) .pin { opacity: 0; animation: m-fallback 0s 8s forwards; }
.m-ok .map-continent.in .pin circle:not(.hit):not(.ring):not(.pulse), .m-ok .map-continent.in .pin rect { animation: m-pop .7s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(1.1s + var(--i) * 45ms); }
@keyframes m-pop { from { transform: scale(0); } to { transform: scale(calc(1.1 * var(--k, 1))); } }
.mapcard { position: absolute; z-index: 5; width: 250px; background: var(--surface); color: var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .65), 0 0 0 1px var(--line); pointer-events: none; }
.mapcard[hidden] { display: none; }
.mapcard img { display: block; width: 100%; height: 130px; object-fit: cover; }
.mapcard-t { padding: 12px 16px 14px; display: grid; gap: 2px; }
.mapcard-t b { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.15; }
.mapcard-t span { font-size: .85rem; color: var(--ink-soft); }
.mapcard-go { display: none; margin-top: 8px; font-weight: 700; color: var(--record); }
.mapcard.touch { pointer-events: auto; }
.mapcard.touch .mapcard-go { display: inline; }
@media (prefers-reduced-motion: no-preference) { .mapcard:not([hidden]) { animation: m-card .22s cubic-bezier(.2, .8, .2, 1) both; } }
@keyframes m-card { from { opacity: 0; transform: translateY(6px) scale(.96); } }

/* ---------- pagina Compare ---------- */
.vkey.c1 { background: var(--viz-1); } .vkey.c2 { background: var(--viz-2); } .vkey.c3 { background: var(--viz-3); } .vkey.c4 { background: var(--viz-4); } .vkey.c5 { background: var(--viz-5); } .vkey.c6 { background: var(--viz-gray); }
.sbars { display: grid; gap: 7px; }
.srow { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) minmax(6.5rem, 10rem); align-items: center; gap: 12px; padding: 1px 0; border-radius: 6px; }
.srow:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.srow[hidden] { display: none; }
.strack { display: flex; gap: 2px; height: 16px; background: transparent; }
.seg { display: block; height: 100%; min-width: 2px; }
.seg:first-child { border-radius: 6px 0 0 6px; } .seg:last-child { border-radius: 0 6px 6px 0; } .seg:only-child { border-radius: 6px; }
.seg.c1 { background: var(--viz-1); } .seg.c2 { background: var(--viz-2); } .seg.c3 { background: var(--viz-3); } .seg.c4 { background: var(--viz-4); } .seg.c5 { background: var(--viz-5); } .seg.c6 { background: var(--viz-gray); }
.srow .bval { font-size: .86rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .srow { grid-template-columns: 1fr; gap: 3px; } .srow .bval { order: 2; } }
.cmp-grid { display: grid; gap: 28px 40px; }
.cmp-find { font-family: var(--f-display); font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.2; margin: 0 0 6px; max-width: 34ch; text-wrap: balance; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.chips li { font-size: .84rem; padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); }
.gov-row { display: grid; gap: 4px; margin-bottom: 14px; }
.xtab { width: 100%; border-collapse: collapse; font-size: .92rem; }
.xtab th, .xtab td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.xtab td.n { text-align: right; font-variant-numeric: tabular-nums; }
.xtab thead th { font-size: .8rem; color: var(--ink-soft); font-weight: 600; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.pair label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.pair select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.pairtab { width: 100%; border-collapse: collapse; margin-top: 18px; }
.pairtab th, .pairtab td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: .94rem; }
.pairtab th { width: 9rem; font-size: .84rem; color: var(--ink-soft); font-weight: 600; }
.panel > h2 + .cmp-find { margin-top: 14px; }
.cmp-grid h3 { margin: 0; }
.bars + .fine, .sbars + .fine, .tablewrap + .fine { margin-top: 14px; }
.cmp-grid { margin-top: 24px; }
.panel h3 { margin-top: 28px; }

/* ---------- Stories ---------- */
.scards { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 18px; }
.scard { display: grid; align-content: start; gap: 8px; height: 100%; padding: 22px; border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1.5px var(--line); transition: transform .2s, box-shadow .2s; }
.scard:hover { transform: translateY(-3px); box-shadow: 0 0 0 1.5px var(--record), 0 18px 40px -22px rgba(30, 20, 90, .5); }
.scard:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.scard .kicker { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--record); }
.scard-t { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.15; text-wrap: balance; }
.scard-s { font-family: var(--f-record); font-size: .98rem; line-height: 1.5; color: var(--ink-soft); }
.scard-c { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.scard[data-kind="myth"] .kicker { color: var(--viz-2); } .scard[data-kind="food"] .kicker { color: var(--viz-3); }
.story-group { margin: 40px 0; }
.story-group .blurb { color: var(--ink-soft); max-width: 60ch; margin: 4px 0 0; }
.story-meta { color: var(--ink-soft); font-size: .92rem; margin: 0 0 8px; }
.story .related, .story .more { margin-top: 40px; }
.story .related ul { padding-left: 1.1rem; }
.story .more h2 { margin-bottom: 0; }

/* ---------- modulo: campi per tipo, note con risposte ---------- */
.share-fields { display: grid; gap: 12px; }
.share-fields:empty { display: none; }
.share-warn { margin: 8px 0; padding: 10px 14px; border-radius: 10px; font-size: .92rem; box-shadow: inset 0 0 0 1.5px var(--saffron); background: color-mix(in srgb, var(--saffron) 12%, var(--surface)); }
.nt-fields { margin: 8px 0 0; display: grid; gap: 4px; font-size: .9rem; }
.nt-fields div { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: 10px; }
.nt-fields dt { color: var(--ink-soft); font-weight: 600; }
.nt-fields dd { margin: 0; }
.story-voices { margin-top: 48px; padding: 24px; border-radius: var(--radius); background: color-mix(in srgb, var(--voice-fill, #ffb347) 10%, var(--surface)); }
.detail-voices { margin-top: 14px; }
.detail-voices h4 { margin: 0 0 8px; font-size: .95rem; }

/* ---------- mappa dei paesi, versione notturna (come la mappa della home) ---------- */
.mapwrap { --seq-1: #3a3299; --seq-2: #5a4fc4; --seq-3: #8076e8; --seq-4: #aaa2ff; --seq-5: #d3ceff; --seq-6: #fff1bf; --on-seq: #0c0924; }
.mapcol { --ink: #fbf5ea; --ink-soft: rgba(251, 245, 234, .78); --surface: #0d0a2b; --line: rgba(255, 255, 255, .22); background: #0d0a2b; color: var(--ink); border-radius: var(--radius); padding: 0 0 16px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); overflow: hidden; }
.mapcol .cmap { display: block; width: 100%; height: auto; }
.mapcol .isles-t, .mapcol .isles { margin-left: 16px; margin-right: 16px; }
.cmap .grat { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.cmap .c { stroke: rgba(255, 240, 184, .38); stroke-width: .9; }
.cmap .c:hover, .cmap .c:focus-visible { stroke: #fff; stroke-width: 2; }
.cmap .c.sel { stroke: #fff; }
.cmap .nodata { fill: rgba(255, 255, 255, .1); opacity: 1; }
.cmap .cap { fill: #fff; stroke: #0c0924; stroke-width: 1.4; }
.cmap .selring { stroke: #fff; stroke-width: 3; }
.cmap .cn { font: 600 9px var(--f-display); letter-spacing: .14em; text-transform: uppercase; fill: #fff; pointer-events: none; paint-order: stroke; stroke: rgba(12, 9, 36, .9); stroke-width: 2.6px; stroke-linejoin: round; }
.sw { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .18); }

/* ---------- True size: l'Africa a superficie uguale con forme trascinabili ---------- */
.ts-intro { margin: 14px 0 0; max-width: 62ch; font-family: var(--f-record); }
.ts-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); gap: 24px; margin-top: 22px; align-items: start; }
.ts-card { color-scheme: dark; padding: 0; overflow: hidden; }
.ts-svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.ts-svg .grat { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.ts-svg .eq { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1; stroke-dasharray: 3 5; }
.ts-svg .c { fill: #3a3299; stroke: rgba(255, 240, 184, .38); stroke-width: .9; }
.ts-shape { stroke-width: 2.2; stroke-linejoin: round; cursor: grab; touch-action: none; vector-effect: non-scaling-stroke; }
.ts-shape.grab { cursor: grabbing; }
.ts-shape:focus-visible { outline: none; stroke: #fff; stroke-width: 3.4; }
.ts-shape.s1 { fill: color-mix(in srgb, var(--viz-1) 60%, transparent); stroke: var(--viz-1); }
.ts-shape.s2 { fill: color-mix(in srgb, var(--viz-2) 60%, transparent); stroke: var(--viz-2); }
.ts-shape.s3 { fill: color-mix(in srgb, var(--viz-3) 60%, transparent); stroke: var(--viz-3); }
.ts-shape.s4 { fill: color-mix(in srgb, var(--viz-4) 60%, transparent); stroke: var(--viz-4); }
.ts-shape.s5 { fill: color-mix(in srgb, var(--viz-5) 60%, transparent); stroke: var(--viz-5); }
.ts-name { font: 700 15px var(--f-display); fill: #fff; paint-order: stroke; stroke: rgba(12, 9, 36, .9); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.ts-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ts-side > p { margin: 0; }
.ts-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-chips[hidden] { display: none; }
.ts-chips .fbtn:disabled { opacity: .45; cursor: not-allowed; }
.ts-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.ts-keys:empty { display: none; }
.ts-keys li { display: flex; align-items: center; gap: 10px; }
.ts-sw { flex: none; width: 14px; height: 14px; border-radius: 4px; }
.ts-sw.s1 { background: var(--viz-1); } .ts-sw.s2 { background: var(--viz-2); } .ts-sw.s3 { background: var(--viz-3); } .ts-sw.s4 { background: var(--viz-4); } .ts-sw.s5 { background: var(--viz-5); }
.ts-out { font-family: var(--f-record); line-height: 1.5; }
.ts-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-btns .fbtn:disabled { opacity: .45; cursor: not-allowed; }
.ts-max { color: var(--ink-soft); }
@media (max-width: 52rem) { .ts-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- telefono: intestazione su due righe al massimo ---------- */
/* Il logo e il pulsante del tema stanno sulla prima riga; il menu scorre in orizzontale sulla seconda. */
@media (max-width: 40rem) {
  .top-in { padding-block: 8px; gap: 2px 12px; }
  .top-r { display: contents; }
  .brand { order: 0; font-size: 1.05rem; }
  .theme-btn { order: 1; width: 40px; height: 40px; margin-left: auto; }
  .top nav { order: 2; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: -8px; padding-inline: 8px; gap: 0; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { flex: none; white-space: nowrap; padding: 8px 11px; font-size: .95rem; }
  .scape-text { padding-top: 120px; }
  .scape-hero.compact .scape-text { padding-top: 112px; }
}
@media (max-width: 40rem) {
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair select { width: 100%; min-width: 0; }
}
@media (max-width: 40rem) { .pairtab th { width: 6.5rem; } .pairtab th, .pairtab td { overflow-wrap: anywhere; padding-inline: 8px; } }

/* ---------- schede (tab), anteprime e blocchi regionali ---------- */
.tabbar { display: flex; gap: 6px; margin: 0 0 20px; padding: 4px 0 6px; overflow-x: auto; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tabbar button { flex: none; font: inherit; font-weight: 700; font-size: .95rem; color: var(--ink); background: transparent; border: 0; border-radius: 999px; padding: 10px 18px; min-height: 44px; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); white-space: nowrap; }
.tabbar button:hover { box-shadow: inset 0 0 0 2px var(--record); }
.tabbar button[aria-selected="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.tabbar button:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
[data-tab][hidden], .fold [hidden] { display: none !important; }
.fold-btn { margin-top: 14px; }
.fold.folded .sbars { margin-bottom: 0; }

.mapwrap[data-m="bloc"] .c { fill: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .1); }
.mapwrap[data-m="bloc"] .c.in { fill: var(--seq-6); background: var(--seq-6); }
.mapwrap[data-m="bloc"] .isle.in { color: var(--on-seq); }
.mapwrap[data-m="bloc"] .cmap .c.in { stroke: #fff; }
.bloc-legend .filters { margin: 8px 0 12px; }
.bloc-legend .sw-out { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, .1); vertical-align: -2px; margin-left: 10px; margin-right: 6px; box-shadow: inset 0 0 0 1.5px var(--line); }
.bloc-legend .sw[data-b="6"] { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--seq-6); vertical-align: -2px; margin-right: 6px; }
.bloc-card h3 { margin: 14px 0 6px; font-size: 1.05rem; }
.bloc-card p { margin: 6px 0; font-size: .94rem; }
.bloc-members summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.blocs-cell { font-size: .88rem; color: var(--ink-soft); }
@media (max-width: 40rem) { .scape-hero.compact { min-height: 400px; } }

/* ---------- Quiz ---------- */
.quiz-intro { margin: 14px 0 0; max-width: 62ch; font-family: var(--f-record); }
.quiz-topics { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 14px; }
.quiz-topic { display: grid; gap: 6px; align-content: start; width: 100%; height: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--paper); border: 0; border-radius: var(--radius); padding: 18px 20px; min-height: 44px; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); }
.quiz-topic:hover { box-shadow: inset 0 0 0 2px var(--record); }
.quiz-topic:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.qt-name { font-weight: 800; font-size: 1.1rem; }
.qt-blurb { font-size: .92rem; color: var(--ink-soft); }
.qt-n { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
#quiz-play { margin-top: 22px; max-width: 46rem; }
.quiz-count { margin: 0; font-weight: 700; font-size: .88rem; color: var(--ink-soft); }
.quiz-q { margin: 8px 0 18px; font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.25; text-wrap: balance; }
.quiz-q:focus { outline: none; }
.quiz-opts { display: grid; gap: 10px; }
.quiz-opt { text-align: left; font: inherit; font-weight: 600; color: var(--ink); background: var(--paper); border: 0; border-radius: 14px; padding: 14px 18px; min-height: 48px; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); }
.quiz-opt:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--record); }
.quiz-opt:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.right { background: color-mix(in srgb, var(--viz-3) 22%, var(--paper)); box-shadow: inset 0 0 0 2px var(--viz-3); }
.quiz-opt.wrong { background: color-mix(in srgb, var(--viz-2) 20%, var(--paper)); box-shadow: inset 0 0 0 2px var(--viz-2); }
.quiz-mark { font-weight: 700; font-size: .82rem; color: var(--ink-soft); margin-left: 6px; }
.quiz-fb { margin-top: 18px; display: grid; gap: 10px; }
.quiz-fb:empty { display: none; }
.quiz-fb p { margin: 0; }
.quiz-verdict { font-weight: 800; font-size: 1.1rem; }
.quiz-why { font-family: var(--f-record); line-height: 1.55; }
.quiz-src, .quiz-story { font-size: .88rem; color: var(--ink-soft); }
.quiz-tier { display: inline-block; font-size: .76rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); }
.quiz-tier.chk { box-shadow: inset 0 0 0 1.5px var(--saffron); }
.quiz-next { justify-self: start; margin-top: 6px; border: 0; cursor: pointer; }

.lang-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.lang-list li { font-size: .94rem; }
.lang-c { color: var(--ink-soft); }

.duo { display: inline-block; font-weight: 700; font-size: .82rem; padding: 2px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); }
.duo.yes { background: color-mix(in srgb, var(--viz-3) 24%, var(--paper)); box-shadow: inset 0 0 0 1.5px var(--viz-3); }
.duo-list { margin: 14px 0 0; padding-left: 1.1rem; display: grid; gap: 8px; max-width: 68ch; }
.ph-list { display: grid; gap: 18px; margin-top: 18px; }
.ph { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ph h3 { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 1.1rem; }
.ph-t { font-family: var(--f-record); font-weight: 400; color: var(--ink-soft); }
.ph-m { margin: 4px 0 8px; font-size: .94rem; }

/* ---------- pagina di un paese ---------- */
.cp-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 40px); align-items: start; margin-top: 16px; }
.cp-map { position: sticky; top: 16px; }
.locator { display: block; width: 100%; height: auto; }
.locator .else { fill: color-mix(in srgb, var(--ink) 14%, transparent); stroke: var(--paper); stroke-width: .8; }
.locator .here { fill: var(--viz-2); stroke: var(--ink); stroke-width: 1.2; }
.cp .facts { margin-top: 18px; }
.cp-sec { margin-top: 36px; }
.cp-sec h2 { margin: 0 0 14px; font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.03em; }
.cp-cards { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 22px; align-items: start; }
.cp-cards .pimg { aspect-ratio: 4 / 3; }
.cp-cards .pimg img, .cp-cards .pimg .art { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 52rem) { .cp-grid { grid-template-columns: minmax(0, 1fr); } .cp-map { position: static; max-width: 22rem; } }