/* SafeHere — foglio di stile unico per tutte le pagine.
   Generato a mano, non da script. La struttura delle pagine sta in design/build_site.py */

:root{
  --deep:#17395B; --mid:#4E86C6; --tint:#EDF4FC; --bright:#A0C7F0;
  --ink:#17395B; --soft:#5A7794; --line:#D9E8F8;
  --paper:#FFFFFF; --paper-alt:#F5F9FE;
  --warm-deep:#78521A; --warm-tint:#FAF3E3;
  --green-deep:#1E4F37; --green-tint:#EBF4EE;
  --urgent:#8E2F2F; --urgent-tint:#FBEDED;
  --measure:36rem; --r:18px; --r-lg:26px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(1.02rem,.55vw + .92rem,1.15rem); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.1; letter-spacing:-.022em; font-weight:600; margin:0}
h1{font-size:clamp(2.15rem,5.6vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.3vw,2.5rem); max-width:22ch}
h3{font-size:1.14rem; letter-spacing:-.008em}
p{margin:0 0 1.05rem; max-width:var(--measure)}
p:last-child{margin-bottom:0}
a{color:var(--deep); text-underline-offset:.18em; text-decoration-thickness:.07em}
a:hover{color:var(--mid)}
:focus-visible{outline:3px solid var(--mid); outline-offset:3px; border-radius:4px}
img{max-width:100%; height:auto; display:block}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:99; background:var(--deep); color:#fff;
  padding:.7rem 1.1rem; border-radius:6px; text-decoration:none}

.wrap{width:min(100% - 2.4rem, 72rem); margin-inline:auto}
.narrow{width:min(100% - 2.4rem, 48rem); margin-inline:auto}
section{padding-block:clamp(3.4rem,6.5vw,6rem)}
.alt{background:var(--paper-alt)}
.eyebrow{font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--mid); margin:0 0 1rem}
.lede{font-size:1.14em; color:var(--soft); max-width:var(--measure)}
.chip{display:inline-flex; align-items:center; gap:.5rem; font-size:.74rem;
  letter-spacing:.15em; text-transform:uppercase; font-weight:600;
  padding:.45rem 1rem; border-radius:999px; border:1px solid currentColor}
.chip::before{content:"\2022"; font-size:1.2em; line-height:0}

/* ---------- top bar ---------- */
.bar{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.bar .wrap{display:flex; align-items:center; gap:1rem; min-height:4.2rem}
.bar .logo img{height:1.55rem; width:auto}
.bar nav{display:none; gap:1.4rem; margin-inline:auto}
.bar nav a{font-size:.9rem; font-weight:600; text-decoration:none; color:var(--soft)}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--deep)}
@media (min-width:60rem){.bar nav{display:flex}}
.help-link{margin-left:auto; font-size:.86rem; font-weight:600; text-decoration:none;
  background:var(--urgent); color:#fff; padding:.58rem 1.1rem; border-radius:999px; white-space:nowrap}
.help-link:hover{background:#732424; color:#fff}
@media (min-width:60rem){.help-link{margin-left:0}}

/* ---------- buttons ---------- */
.actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.1rem}
.btn{display:inline-block; font-size:.93rem; font-weight:600; text-decoration:none;
  padding:.78rem 1.5rem; border-radius:999px; border:1px solid transparent; white-space:nowrap}
.btn-solid{background:var(--deep); color:#fff}
.btn-solid:hover{background:var(--mid); color:#fff}
.btn-ghost{color:var(--deep); border-color:var(--deep)}
.btn-ghost:hover{background:var(--tint); color:var(--deep)}
.btn-light{background:#fff; color:var(--deep)}
.btn-light:hover{background:var(--tint); color:var(--deep)}
.btn-outline-light{color:#fff; border-color:rgba(255,255,255,.55)}
.btn-outline-light:hover{background:rgba(255,255,255,.14); color:#fff}

/* ---------- hero with photo ----------
   Attenzione: --bg viene impostata nell'HTML ma usata qui dentro, e un url()
   relativo si risolve rispetto a QUESTO foglio, non alla pagina. Per questo
   i percorsi delle foto partono da /: altrimenti diventano assets/assets/... */
.hero{position:relative; overflow:hidden; border-radius:0 0 var(--r-lg) var(--r-lg);
  background:var(--deep); color:#fff; padding-block:clamp(4rem,11vw,8.5rem)}
.hero::before{content:""; position:absolute; inset:0; background:var(--bg) center/cover no-repeat;
  opacity:.42}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(13,32,52,.93) 0%, rgba(13,32,52,.72) 46%, rgba(13,32,52,.30) 100%)}
.hero .wrap{position:relative; z-index:2}
.hero h1{max-width:17ch; color:#fff}
.hero p{margin-top:1.6rem; max-width:38rem; color:#D8E6F6; font-size:1.12em}
.hero .chip{color:#A0C7F0; margin-bottom:1.6rem}
.hero-sm{padding-block:clamp(3rem,7vw,5.2rem)}
.hero-sm h1{font-size:clamp(1.95rem,4.6vw,3.1rem); max-width:20ch}

/* ---------- urgent strip ---------- */
.urgent-strip{background:var(--urgent-tint); border-bottom:1px solid #EFD3D3}
.urgent-strip .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.1rem;
  padding-block:.95rem; font-size:.95rem}
.urgent-strip b{color:var(--urgent)}
.urgent-strip a{color:var(--urgent); font-weight:600}

/* ---------- figures ---------- */
.figures{display:grid; gap:1.1rem}
@media (min-width:46rem){.figures{grid-template-columns:repeat(3,1fr); gap:1.4rem}}
.figures.four{grid-template-columns:repeat(2,1fr)}
@media (min-width:60rem){.figures.four{grid-template-columns:repeat(4,1fr)}}
.fig{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem 1.5rem 1.7rem}
.fig b{display:block; font-size:clamp(2.3rem,4.6vw,3.1rem); font-weight:600;
  letter-spacing:-.035em; line-height:1; color:var(--mid)}
.fig strong{display:block; font-weight:600; margin:.75rem 0 .3rem}
.fig span{color:var(--soft); font-size:.93em; display:block}
.fig cite{display:block; margin-top:.7rem; font-size:.78rem; font-style:normal; color:var(--soft);
  opacity:.85}
.on-deep .fig{background:rgba(255,255,255,.07); border-color:rgba(160,199,240,.28)}
.on-deep .fig b{color:var(--bright)}
.on-deep .fig strong{color:#fff}
.on-deep .fig span,.on-deep .fig cite{color:#B9CFE8}

/* ---------- split (photo + text) ---------- */
.split{display:grid; gap:clamp(1.8rem,4vw,3.4rem); align-items:center}
@media (min-width:54rem){
  .split{grid-template-columns:repeat(2,1fr)}
  .split.rev>figure{order:2}
}
.split figure{margin:0}
.split img{border-radius:var(--r); width:100%; aspect-ratio:3/2; object-fit:cover}
.split figcaption{margin-top:.7rem; font-size:.8rem; color:var(--soft)}

/* ---------- cards ---------- */
.cards{display:grid; gap:1.2rem; margin-top:2.4rem; padding:0; list-style:none}
@media (min-width:52rem){.cards.c3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:46rem){.cards.c2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:60rem){.cards.c4{grid-template-columns:repeat(4,1fr)}}
.cards li{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column}
.cards img{aspect-ratio:16/10; object-fit:cover; width:100%}
.cards .body{padding:1.45rem 1.5rem 1.6rem; flex:1}
.cards .n{display:block; font-size:.74rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:600; color:var(--mid); margin-bottom:.6rem}
.cards h3{margin-bottom:.6rem}
.cards p{color:var(--soft); font-size:.96em; max-width:none}
.cards .more{display:inline-block; margin-top:1rem; font-weight:600; font-size:.92em;
  text-decoration:none}
.cards .more:hover{text-decoration:underline}

/* ---------- do / don't ---------- */
.duo{display:grid; gap:1.2rem; margin-top:2.2rem}
@media (min-width:46rem){.duo{grid-template-columns:repeat(2,1fr)}}
.panel{padding:clamp(1.5rem,3vw,2.15rem); border-radius:var(--r); border:1px solid var(--line)}
.panel.do{background:var(--green-tint); border-color:#CFE6D8}
.panel.dont{background:var(--warm-tint); border-color:#EBDCBB}
.panel h3{margin-bottom:1.05rem; font-size:1.16rem}
.panel.do h3{color:var(--green-deep)}
.panel.dont h3{color:var(--warm-deep)}
.panel ul{margin:0; padding:0; list-style:none}
.panel li{padding-left:1.65rem; position:relative; margin-bottom:.72rem}
.panel li:last-child{margin-bottom:0}
.panel.do li::before{content:"\2014"; position:absolute; left:0; color:var(--green-deep); font-weight:600}
.panel.dont li::before{content:"\00d7"; position:absolute; left:.15rem; color:var(--warm-deep);
  font-weight:600; font-size:1.13em; line-height:1.42}
.pull{margin:clamp(2rem,4vw,2.8rem) 0 0; font-size:1.2em; font-weight:600;
  max-width:46ch; line-height:1.38}

/* ---------- numbered steps ---------- */
.steps{margin:2.2rem 0 0; padding:0; list-style:none; counter-reset:s; display:grid; gap:1.3rem}
@media (min-width:52rem){.steps{grid-template-columns:repeat(3,1fr); gap:1.7rem}}
.steps li{counter-increment:s; padding-top:1.1rem; border-top:2px solid var(--line)}
.steps li::before{content:"0" counter(s); display:block; font-size:.8rem; font-weight:600;
  letter-spacing:.12em; color:var(--mid); margin-bottom:.55rem}
.steps strong{display:block; margin-bottom:.35rem}
.steps span{color:var(--soft); font-size:.95em}

/* ---------- crisis ---------- */
.crisis{background:var(--deep); color:#fff}
.crisis h2,.crisis h3,.crisis h4{color:#fff}
.crisis .eyebrow{color:var(--bright)}
.crisis p{color:#D6E5F5}
.crisis a{color:#fff}
.crisis a:hover{color:var(--bright)}
.sub{margin-top:2.6rem; font-size:.95rem; letter-spacing:.13em; text-transform:uppercase}
.lines{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.1rem}
.lines li{display:flex; flex-wrap:wrap; gap:.35rem .95rem; align-items:baseline;
  padding:.95rem 0; border-top:1px solid rgba(160,199,240,.26)}
.lines li:last-child{border-bottom:1px solid rgba(160,199,240,.26)}
.num{font-size:1.28rem; font-weight:600; letter-spacing:-.01em; min-width:8.2rem;
  color:#fff; text-decoration:none}
.num:hover{color:var(--bright)}
.lines .what{font-weight:600; min-width:12rem}
.lines .when{color:#A9C4E0; font-size:.9em; flex:1 1 12rem}
.note{margin-top:1.9rem; font-size:.92em; color:#B9CFE8; max-width:48rem;
  padding-top:1.35rem; border-top:1px solid rgba(160,199,240,.26)}
.callout{background:rgba(255,255,255,.09); border:1px solid rgba(160,199,240,.3);
  border-radius:var(--r); padding:1.4rem 1.5rem; margin-bottom:2.2rem}
.callout p{max-width:none; color:#fff; font-weight:600}

/* ---------- prose (privacy, terms) ---------- */
.prose h2{margin:2.6rem 0 .9rem; font-size:1.42rem; max-width:none}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.8rem 0 .6rem}
.prose ul{padding-left:1.2rem; margin:0 0 1.05rem; max-width:var(--measure)}
.prose li{margin-bottom:.45rem}
.prose .updated{font-size:.9rem; color:var(--soft)}
.prose table{border-collapse:collapse; width:100%; margin:1.2rem 0; font-size:.94em}
.prose th,.prose td{text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line);
  vertical-align:top}
.prose th{font-weight:600; color:var(--soft); font-size:.85em; letter-spacing:.05em;
  text-transform:uppercase}

/* ---------- band ---------- */
.band{position:relative; overflow:hidden; border-radius:var(--r-lg); color:#fff;
  background:var(--deep); padding:clamp(2.4rem,5vw,4rem)}
.band::before{content:""; position:absolute; inset:0; background:var(--bg) center/cover no-repeat; opacity:.3}
.band::after{content:""; position:absolute; inset:0; background:linear-gradient(95deg,rgba(13,32,52,.92),rgba(13,32,52,.55))}
.band>*{position:relative; z-index:2}
.band h2{color:#fff}
.band p{color:#D8E6F6}

/* ---------- footer ---------- */
footer{background:var(--deep); color:#B9CFE8; padding-block:3.4rem 2.4rem;
  font-size:.92rem; margin-top:0}
footer img{height:1.5rem; margin-bottom:1.2rem}
footer a{color:#DCE9F7}
.foot-grid{display:grid; gap:2.2rem}
@media (min-width:52rem){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-grid h4{font-size:.76rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--bright); margin-bottom:.9rem}
.foot-grid ul{list-style:none; margin:0; padding:0}
.foot-grid li{margin-bottom:.55rem}
.foot-grid p{max-width:24rem}
.foot-bottom{margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid rgba(160,199,240,.22);
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; font-size:.86rem}
.foot-crisis{background:rgba(142,47,47,.24); border:1px solid rgba(220,150,150,.4);
  border-radius:12px; padding:.85rem 1.1rem; margin-bottom:1.6rem; font-size:.9rem}
.foot-crisis a{font-weight:600}

/* ---------- dark mode ---------- */
@media (prefers-color-scheme:dark){
  :root{--paper:#0E1C2B; --paper-alt:#132436; --ink:#E7EFF8; --soft:#9DB4CC;
        --line:#22374D; --tint:#132436; --green-tint:#14261C; --warm-tint:#2A2113;
        --urgent-tint:#2B1616;}
  .bar{background:rgba(14,28,43,.94)}
  .bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--bright)}
  a{color:var(--bright)}
  .btn-solid{background:var(--bright); color:#0E1C2B}
  .btn-solid:hover{background:#fff; color:#0E1C2B}
  .btn-ghost{color:var(--bright); border-color:var(--bright)}
  .btn-ghost:hover{background:var(--paper-alt)}
  .fig,.cards li{background:var(--paper-alt)}
  .panel.do{border-color:#26432F} .panel.dont{border-color:#453820}
  .panel.do h3,.panel.do li::before{color:#8FD1A6}
  .panel.dont h3,.panel.dont li::before{color:#F0CD72}
  .urgent-strip{border-bottom-color:#4A2626}
  .urgent-strip b,.urgent-strip a{color:#F0A9A9}
  .help-link{background:#A33B3B}
  .help-link:hover{background:#BF4747}
}