/* =========================================================
   Silere Non Possum — Chi siamo (desktop)
   Palette "Oro liturgico" · vanilla CSS3, nessuna dipendenza.

   FONT: Newsreader (titoli/testo) + Hanken Grotesk (UI). Senza
   connessione usa i fallback di sistema; per i font originali
   decommenta il link in index.html.
   ========================================================= */

:root {
  --paper:#faf7f1; --ink:#2a2218; --accent:#9a7327; --accent-soft:#e8c879;
  --meta:#8a7f6c; --tint:#f3ecdf; --border:#e6ddcc; --card:#fffdf8;
  --font-serif:"Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;
  --maxw:1240px; --col:760px;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; line-height:1.5; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
::selection { background:var(--accent-soft); color:var(--ink); }
.container { max-width:var(--maxw); margin:0 auto; padding-inline:32px; }
.col { max-width:var(--col); margin:0 auto; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:8px; background:var(--accent); color:#fff; font-weight:800; font-size:13px; letter-spacing:.03em; padding:13px 20px; }
.btn--ghost-gold { background:transparent; border:1px solid rgba(232,200,121,.5); color:var(--accent-soft); }
.btn--lg { padding:16px 26px; font-size:14px; }
.btn--block { width:100%; }

/* rivelazione progressiva */
[data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity:1; transform:none; }

/* =========================================================
   SECTION: header
   ========================================================= */
.masthead { position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:1px solid var(--ink); }
.masthead__inner { display:flex; align-items:center; justify-content:space-between; height:70px; gap:20px; }
.brand__logo { height:30px; width:auto; }
.nav { display:flex; gap:24px; font-weight:600; font-size:14px; }
.nav__link:hover { color:var(--accent); }
.nav__link--active { color:var(--accent); }
.masthead__actions { display:flex; align-items:center; gap:12px; }
.icon-btn { width:42px; height:42px; border:1px solid var(--border); background:none; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.icon-btn svg { stroke:var(--ink); }
.nav-toggle { display:none; width:42px; height:42px; border:1px solid var(--border); background:none; border-radius:10px; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.nav-toggle__bar { width:18px; height:2px; background:var(--ink); border-radius:2px; }
.nav-drawer { display:none; border-bottom:1px solid var(--border); background:var(--paper); }
.nav-drawer.is-open { display:block; }
.nav-drawer__link { display:block; padding:14px 0; font-weight:600; font-size:16px; border-bottom:1px solid var(--border); }
.nav-drawer__link:last-child { border-bottom:none; }

/* =========================================================
   SECTION: hero
   ========================================================= */
.hero { position:relative; overflow:hidden; background:var(--ink); }
.hero__media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:.34; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,16,11,.96), rgba(20,16,11,.62)); }
.hero__inner { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:96px 32px 88px; text-align:center; }
.hero__kicker { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-soft); }
.hero__kicker::before, .hero__kicker::after { content:""; width:26px; height:1px; background:rgba(232,200,121,.5); }
.hero__title { font-family:var(--font-serif); font-weight:700; font-size:62px; line-height:1.04; color:#fff; margin:22px 0 0; letter-spacing:-.02em; text-wrap:balance; }
.hero__lede { font-family:var(--font-serif); font-size:21px; line-height:1.55; color:#e6e0d2; margin:22px auto 0; max-width:60ch; }

/* =========================================================
   SECTION: intro
   ========================================================= */
.intro { padding:64px 0 8px; }
.intro__lede { font-family:var(--font-serif); font-size:24px; line-height:1.5; color:var(--ink); margin:0; }
.intro__lede .accent { color:var(--accent); font-weight:600; }
.intro p { font-family:var(--font-serif); font-size:18px; line-height:1.72; color:#3e372c; margin:22px 0 0; }

/* =========================================================
   SECTION: pilastri
   ========================================================= */
.pillars { padding:64px 0 16px; }
.pillars__head { text-align:center; margin-bottom:40px; }
.section-kicker { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.section-kicker::before { content:""; width:24px; height:3px; background:var(--accent); }
.pillars__title { font-family:var(--font-serif); font-weight:700; font-size:38px; line-height:1.12; margin:14px 0 0; letter-spacing:-.01em; }
.pillars__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pillar { position:relative; overflow:hidden; background:var(--ink); border:1px solid #3a3024; border-radius:20px; padding:38px 32px 34px; transition:transform .2s ease, box-shadow .2s ease; }
.pillar::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#c79a3c,#e8c879,#c79a3c); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.pillar:hover { transform:translateY(-5px); box-shadow:0 22px 50px rgba(20,16,11,.32); }
.pillar:hover::before { transform:scaleX(1); }
.pillar__icon { display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:16px; background:linear-gradient(150deg,rgba(232,200,121,.18),rgba(199,154,60,.1)); border:1px solid rgba(232,200,121,.32); color:var(--accent-soft); }
.pillar__title { font-family:var(--font-serif); font-weight:700; font-size:24px; line-height:1.18; color:#fff; margin:22px 0 0; }
.pillar__text { font-size:14.5px; line-height:1.68; color:#c4bcad; margin:14px 0 0; }
.pillar__num { position:absolute; right:22px; bottom:10px; font-family:var(--font-serif); font-weight:700; font-size:72px; line-height:1; color:rgba(232,200,121,.1); pointer-events:none; }

/* =========================================================
   SECTION: citazione Moscati
   ========================================================= */
.quote { background:var(--ink); margin-top:72px; position:relative; }
.quote__inner { max-width:920px; margin:0 auto; padding:80px 32px; text-align:center; }
.quote__mark { font-family:var(--font-serif); font-size:90px; line-height:.6; color:var(--accent-soft); height:54px; }
.quote__text { font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:30px; line-height:1.4; color:#fff; margin:0; text-wrap:balance; }
.quote__author { font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-soft); margin-top:30px; }
.quote__src { font-size:12.5px; color:#8a8070; margin-top:8px; }

/* =========================================================
   SECTION: storia
   ========================================================= */
.story { padding:72px 0 8px; }
.story__lede { font-family:var(--font-serif); font-size:18px; line-height:1.72; color:#3e372c; margin:18px 0 0; }

/* =========================================================
   SECTION: casi (slot foto + descrizione)
   ========================================================= */
.cases { padding:36px 0 16px; }
.cases__head { margin-bottom:34px; }
.cases__title { font-family:var(--font-serif); font-weight:700; font-size:34px; line-height:1.12; margin:14px 0 0; letter-spacing:-.01em; }
.cases__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.case-card { background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(42,34,24,.04); transition:transform .18s ease, box-shadow .18s ease; }
.case-card:hover { transform:translateY(-4px); box-shadow:0 18px 42px rgba(42,34,24,.16); }
.case-card__media { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--tint); }
.case-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.case-card:hover .case-card__media img { transform:scale(1.04); }
.case-card__media::after { content:""; position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(to top, rgba(42,34,24,.28), transparent); }
.case-card__body { padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.case-card__title { font-family:var(--font-serif); font-weight:700; font-size:21px; line-height:1.22; color:var(--ink); }
.case-card__text { font-size:14px; line-height:1.6; color:#5a5040; margin:10px 0 0; }

/* =========================================================
   SECTION: enciclica
   ========================================================= */
.encyclical { padding:56px 0 8px; }
.encyclical__card { background:var(--tint); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:0 16px 16px 0; padding:38px 40px; }
.encyclical__kicker { font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.encyclical__text { font-family:var(--font-serif); font-size:19px; line-height:1.7; color:var(--ink); margin:16px 0 0; }
.encyclical__src { font-size:13.5px; color:var(--meta); margin:18px 0 0; font-style:italic; }
.encyclical__closing { font-family:var(--font-serif); font-size:21px; line-height:1.55; color:var(--ink); text-align:center; margin:40px auto 0; max-width:46ch; font-weight:500; }

/* =========================================================
   SECTION: direttore
   ========================================================= */
.director { padding:60px 0 8px; }
.director__card { display:flex; align-items:center; gap:28px; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:30px 34px; }
.director__avatar { width:96px; height:96px; flex:none; border-radius:50%; object-fit:cover; border:2px solid var(--accent-soft); }
.director__role { font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.director__name { font-family:var(--font-serif); font-size:26px; font-weight:700; margin:4px 0 0; }
.director__note { font-size:14.5px; line-height:1.6; color:var(--meta); margin:6px 0 0; }

/* =========================================================
   SECTION: dona + abbonati
   ========================================================= */
.engage { padding:64px 0 72px; }
.engage__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.engage-card { border-radius:20px; padding:40px 36px; }
.engage-card--donate { background:var(--ink); color:#e6e0d2; }
.engage-card--sub { background:linear-gradient(150deg,#9a7327,#7d5d1e); color:#fff; }
.engage-card__kicker { font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.engage-card--donate .engage-card__kicker { color:var(--accent-soft); opacity:1; }
.engage-card__title { font-family:var(--font-serif); font-weight:700; font-size:30px; line-height:1.16; margin:12px 0 0; }
.engage-card__text { font-size:15px; line-height:1.6; margin:14px 0 26px; opacity:.9; }
.engage-card--donate .btn { background:var(--accent); }
.engage-card--sub .btn { background:#fff; color:var(--accent); }

/* =========================================================
   SECTION: footer
   ========================================================= */
.site-footer { background:var(--ink); color:#a39c8d; padding:46px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
.footer-brand__logo { height:34px; width:auto; }
.footer-brand__addr { font-size:13px; line-height:1.6; margin-top:16px; }
.footer-col__title { font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:14px; }
.footer-links { display:flex; flex-direction:column; gap:10px; font-size:13.5px; }
.social { display:flex; gap:9px; margin-top:18px; }
.social__link { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.footer-legal { max-width:var(--maxw); margin:26px auto 0; padding:18px 32px 0; border-top:1px solid rgba(255,255,255,.12); font-size:11.5px; color:#6f695b; line-height:1.6; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .nav { display:none; }
  .nav-toggle { display:flex; }
  .hero__inner { padding:70px 24px 64px; }
  .hero__title { font-size:42px; }
  .pillars__grid { grid-template-columns:1fr; }
  .cases__grid { grid-template-columns:1fr 1fr; }
  .quote__text { font-size:24px; }
  .engage__grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .container { padding-inline:18px; }
  .hero__title { font-size:33px; }
  .hero__lede { font-size:18px; }
  .intro__lede { font-size:20px; }
  .pillars__title { font-size:28px; }
  .cases__grid { grid-template-columns:1fr; }
  .cases__title { font-size:26px; }
  .quote__inner { padding:56px 22px; }
  .quote__text { font-size:21px; }
  .director__card { flex-direction:column; text-align:center; gap:18px; }
  .encyclical__card { padding:28px 22px; }
  .engage-card { padding:32px 24px; }
  .footer-grid { grid-template-columns:1fr; gap:26px; }
}