/* ==========================================================================
   Attorno. La Terra — foglio di stile condiviso delle schede pubbliche
   Una sola fonte di stile per tutte le pagine /meraviglie.
   Cambi un colore, un font o un margine QUI e vale per ogni scheda.
   v1 — novembre 2026
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500&display=swap');

:root{
  --bg:#ECF2F1;        /* fondo pagina (verde-azzurro pallido) */
  --card:#ffffff;      /* riquadri bianchi che "galleggiano" sul fondo */
  --cardline:#DCE5E3;  /* bordo dei riquadri */
  --line:#D6E0DE;      /* linee divisorie (cassetti, fonti) */
  --name:#1A4A5A;      /* blu del nome/titoli (cugino del teal del logo) */
  --teal:#3E8294;      /* teal del logo: overline, sottotitolo, accenti */
  --ink:#2B383D;       /* testo principale scuro */
  --body:#38454A;      /* testo dei paragrafi */
  --muted:#7E8A8E;     /* testo tenue: descrizioni, fonti */
  --wave1:#9ED0DA; --wave2:#5BA7B8; --wave3:#3E8294; --wave4:#2C6675; /* palette onde logo */
}

/* NOTA dark mode (fase due): per una futura modalità scura basterà
   ridefinire qui sotto --bg, --card, --name ecc. dentro una regola
   @media (prefers-color-scheme: dark) o [data-theme="dark"].
   Il resto del layout non cambia. */

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* --- Intestazione del sito (uguale su ogni pagina, il marchio torna a casa) */
.site-hd{display:flex; align-items:center; gap:10px; padding:12px 20px; border-bottom:1px solid var(--line)}
.brand{display:inline-flex; align-items:center; gap:9px; text-decoration:none}
.brand .logo{width:30px; height:30px; display:block; flex:none}
.brand .bn{font-family:'Lora',serif; font-weight:600; font-size:18px; color:var(--name)}
.site-hd .nav{margin-left:auto; font-size:13px; color:var(--teal); text-decoration:none}

/* --- Banner (hero) a tutta larghezza, con tetto d'altezza --------------- */
.hero{width:100%; height:clamp(120px,16vw,210px); line-height:0; overflow:hidden}
.hero svg{display:block; width:100%; height:100%}

/* --- Colonna di lettura centrata --------------------------------------- */
.wrap{max-width:680px; margin:0 auto; padding:30px 20px 52px}

/* --- Testata della scheda ---------------------------------------------- */
.ov{font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--teal); margin:0 0 9px}
h1{font-family:'Lora',serif; color:var(--name); font-weight:600; font-size:30px; line-height:1.12; margin:0}
.sub{font-family:'Lora',serif; font-style:italic; color:var(--teal); font-size:19px; margin:3px 0 0}

/* Pillole-anteprima (riprendono le colonne della tabella /meraviglie) */
.chip{display:inline-block; font-size:12px; color:var(--name); background:var(--card);
  border:1px solid #CBDAD8; border-radius:20px; padding:4px 11px; margin:14px 8px 0 0}

/* --- Testo ------------------------------------------------------------- */
.lead{font-family:'Lora',serif; font-size:19px; line-height:1.55; color:#243136; margin:18px 0 0}
.bd{font-size:15.5px; margin:15px 0 0; color:var(--body)}

/* Link interni verso un'altra scheda: solo testo sottolineato (niente freccia) */
.xlink{color:var(--name); font-weight:500; text-decoration:underline;
  text-decoration-color:var(--wave1); text-underline-offset:2px; cursor:pointer}

/* --- Riquadri bianchi --------------------------------------------------- */
/* Dato chiave in evidenza */
.hl{background:var(--card); border:1px solid var(--cardline); border-radius:12px;
  padding:14px 16px; margin:20px 0 0; font-size:15.5px; color:var(--ink)}
.hl b{color:var(--name); font-weight:600}

/* Slot "reversibilità": stesso riquadro, contenuto onesto scheda per scheda
   (a volte speranza, a volte "a senso unico") */
.rev{background:var(--card); border:1px solid var(--cardline); border-radius:12px;
  padding:15px 16px; margin:20px 0 0; color:var(--ink); font-size:15.5px}
.rev .t{font-family:'Lora',serif; font-weight:600; font-size:16px; color:var(--name); display:block; margin:0 0 4px}

/* --- Cassetti "approfondisci" ------------------------------------------ */
details{border-top:1px solid var(--line); padding:12px 0 0; margin:13px 0 0}
summary{cursor:pointer; font-weight:500; color:var(--name); font-size:14.5px; list-style:none}
summary::-webkit-details-marker{display:none}
.dd{font-size:14px; color:#55636A; margin:9px 0 0}

/* Etichetta dei soli cassetti-mito (firma Attorno: distingue i miti da sfatare) */
.tag{display:inline-block; font-size:11px; color:#8A4B2B; background:#F6E7DD;
  border-radius:5px; padding:2px 7px; margin-left:8px; vertical-align:middle; letter-spacing:.3px}

/* --- Schede collegate (navigazione tra le pagine) ---------------------- */
.rel{background:var(--card); border:1px solid var(--cardline); border-radius:12px;
  padding:15px 16px; margin:24px 0 0}
.rel .rt{font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--teal); margin:0 0 9px}
.rel a{display:block; color:var(--name); font-weight:500; font-size:14.5px; margin:0 0 7px;
  text-decoration:underline; text-decoration-color:var(--wave1); text-underline-offset:2px}
.rel a:last-child{margin-bottom:0}
.rel a::before{content:"→ "; text-decoration:none}
.rel a .d{color:var(--muted); font-weight:400; font-size:13px; text-decoration:none}

/* --- Fonti e piè di pagina --------------------------------------------- */
.src{font-size:12.5px; color:var(--muted); margin:22px 0 0; border-top:1px solid var(--line); padding:12px 0 0}
.foot{max-width:680px; margin:0 auto; padding:26px 20px 40px; border-top:1px solid var(--line);
  font-family:'Lora',serif; font-size:14px; color:var(--teal)}
.foot b{color:var(--name); font-weight:600}
.foot .contact{display:inline; margin-left:6px; font-family:'Inter',sans-serif; font-size:13.5px; color:var(--body)}
.foot .contact a{color:var(--name); text-decoration:underline; text-decoration-color:var(--wave1); text-underline-offset:2px}

/* --- Piccoli schermi: margini laterali più stretti --------------------- */
@media (max-width:560px){
  .wrap{padding:24px 16px 44px}
  h1{font-size:27px}
  .lead{font-size:18px}
}