/* ============================================================
   Il cimitero delle parole — notte, pietra, un po' di ironia
   Palette frontek (teal, coral, gold, dark) su un cielo scuro.
   Tema unico scuro: è un cimitero di notte, per scelta.
   ============================================================ */

:root{
  --teal:#2A9D8F; --coral:#E76F51; --gold:#E9C46A; --dark:#264653;
  --night:#0b1418; --night2:#11222a; --ground:#14262d; --line:#24373f;
  --ink:#e8efee; --muted:#9db0b6; --faint:#6f8189;
  --stone:#e6e2d8; --stone2:#cfcabe; --stone-ink:#2b2a26; --stone-muted:#6b675e;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Noto Serif",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 2px 6px rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.35);
  color-scheme:dark;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:var(--sans); color:var(--ink);
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(233,196,106,.10), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night2) 70%, var(--ground) 100%);
}
a{ color:var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ line-height:1.15; }
[hidden]{ display:none !important; }
main{ flex:1 1 auto; }

/* ---- TOP ---- */
.top{ display:flex; align-items:center; gap:16px; padding:14px clamp(14px,4vw,34px); flex-wrap:wrap; }
.brand{ font-size:1.02rem; letter-spacing:.16em; font-weight:800; color:var(--ink); }
.brand:hover{ text-decoration:none; }
.brand span{ color:var(--gold); }
.top__nav{ margin-left:auto; display:flex; gap:18px; font-size:.92rem; }
.top__nav a{ color:var(--muted); }
.top__nav a:hover{ color:var(--ink); }

/* ---- BOTTONI E CAMPI ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; cursor:pointer;
  background:var(--teal); color:#fff; font:600 .95rem var(--sans); padding:12px 20px; border-radius:12px;
  transition:filter .12s ease, transform .12s ease; text-decoration:none; }
.btn:hover{ filter:brightness(1.08); text-decoration:none; transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn--ghost:hover{ border-color:var(--muted); }
.btn--gold{ background:var(--gold); color:#2b2a26; }
.btn--sm{ padding:7px 12px; font-size:.84rem; border-radius:9px; }
.btn--disabled{ background:var(--line); color:var(--muted); cursor:default; }
.btn--disabled:hover{ transform:none; filter:none; }
.inp{ width:100%; border:1px solid var(--line); background:var(--night); color:var(--ink);
  border-radius:10px; padding:11px 13px; font:inherit; font-size:.95rem; outline:none; }
.inp:focus{ border-color:var(--teal); }
textarea.inp{ resize:vertical; }
.note{ color:var(--muted); font-size:.86rem; line-height:1.55; }

/* ---- HERO ---- */
.hero{ text-align:center; padding:clamp(28px,7vh,80px) 16px clamp(24px,5vh,50px); max-width:820px; margin:0 auto; }
.kicker{ margin:0 0 10px; color:var(--gold); letter-spacing:.3em; text-transform:uppercase; font-size:.78rem; font-weight:700; }
.hero__title{ margin:0 0 14px; font-family:var(--serif); font-weight:700; font-size:clamp(2.2rem,7vw,4rem); letter-spacing:-.01em; }
.hero__sub{ margin:0 auto 26px; color:var(--muted); font-size:1.08rem; line-height:1.6; max-width:640px; }
.stats{ list-style:none; padding:0; margin:0 0 26px; display:flex; justify-content:center; gap:clamp(18px,5vw,48px); }
.stats b{ display:block; font-family:var(--serif); font-size:2rem; color:var(--ink); }
.stats span{ font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.hero__cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---- SEZIONI ---- */
.section{ max-width:1180px; margin:0 auto; padding:clamp(22px,5vh,48px) clamp(14px,4vw,34px); }
.section--alt{ max-width:none; background:rgba(0,0,0,.18); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section--alt > *{ max-width:900px; margin-left:auto; margin-right:auto; }
.section__title{ font-family:var(--serif); font-size:clamp(1.5rem,4vw,2.1rem); margin:0 0 14px; text-align:center; }
.section__lead{ color:var(--muted); text-align:center; max-width:640px; margin:0 auto 22px; line-height:1.6; }

/* ---- FILTRI ---- */
.filters{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; margin-bottom:26px; }
.filters .inp{ max-width:320px; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px;
  padding:7px 14px; font:600 .85rem var(--sans); cursor:pointer; }
.chip:hover{ color:var(--ink); border-color:var(--muted); }
.chip.is-on{ background:var(--ink); color:var(--night); border-color:var(--ink); }
.empty{ text-align:center; color:var(--muted); font-style:italic; }

/* ---- LAPIDI ---- */
.graves{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(16px,2.5vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); align-items:end; }
.stone{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  min-height:290px; padding:34px 16px 18px; color:var(--stone-ink);
  background:linear-gradient(180deg,var(--stone),var(--stone2));
  border-radius:110px 110px 8px 8px; box-shadow:var(--shadow);
  transition:transform .15s ease; text-decoration:none; }
.stone::after{ content:""; position:absolute; left:-10px; right:-10px; bottom:-8px; height:12px; border-radius:6px; background:#0d1a1f; z-index:-1; }
a.stone:hover{ transform:translateY(-4px); text-decoration:none; }
a.stone:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; }
.stone__rip{ font-family:var(--serif); letter-spacing:.32em; font-size:.72rem; color:var(--stone-muted); text-transform:uppercase; }
.stone__word{ font-family:var(--serif); font-weight:700; font-size:1.55rem; line-height:1.15; margin:4px 0 0;
  text-shadow:0 1px 0 rgba(255,255,255,.6); overflow-wrap:break-word; }
.stone__word--long{ font-size:1.2rem; }
.stone__dates{ font-family:var(--serif); font-size:.9rem; color:var(--stone-muted); }
.stone__epi{ font-family:var(--serif); font-style:italic; font-size:.92rem; line-height:1.45; color:#4a4740; margin:8px 0 auto; }
.stone__free{ margin-top:12px; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--stone-muted);
  border:1px dashed #a9a397; border-radius:999px; padding:3px 10px; }
.stone__flower{ margin-top:12px; font-size:.8rem; font-weight:700; color:#7a3b2c; }
.badge{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; border-radius:999px; padding:2px 9px; }
.badge--coma{ background:#2b2a26; color:var(--gold); }
.graves--small{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.graves--small .stone{ min-height:250px; }

/* ---- PAGINA DELLA PAROLA ---- */
.wrap{ max-width:820px; margin:0 auto; padding:8px clamp(14px,4vw,34px) 40px; }
.back{ display:inline-block; color:var(--muted); font-size:.9rem; margin:6px 0 22px; }
.grave{ display:flex; flex-direction:column; gap:26px; }
.stone--big{ min-height:0; padding:clamp(40px,8vw,64px) clamp(18px,6vw,60px) 32px; border-radius:300px 300px 10px 10px; max-width:560px; width:100%; margin:0 auto; }
.stone--big .stone__word{ font-size:clamp(2rem,8vw,3.2rem); }
.stone--big .stone__dates{ font-size:1.05rem; }
.stone--big .stone__epi{ font-size:1.12rem; margin:14px 0 0; }
.adopted{ margin-top:18px; padding-top:14px; border-top:1px solid #b9b3a6; width:100%; }
.adopted p{ margin:4px 0; font-family:var(--serif); }
.adopted__who{ font-size:1.05rem; }
.adopted__ded{ font-style:italic; color:#4a4740; }
.adopted__date{ font-size:.85rem; color:var(--stone-muted); }
.adopted__date a{ color:#1f6f66; }

.obit, .adopt{ background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:16px; padding:clamp(18px,4vw,28px); }
.obit h2, .adopt h2, .more h2{ font-family:var(--serif); margin:0 0 14px; font-size:1.5rem; }
.obit dl{ margin:0; display:grid; grid-template-columns:max-content 1fr; gap:12px 20px; }
.obit dt{ color:var(--muted); font-size:.86rem; text-transform:uppercase; letter-spacing:.06em; padding-top:3px; }
.obit dd{ margin:0; line-height:1.6; }
.obit blockquote{ margin:0; font-family:var(--serif); font-style:italic; font-size:1.08rem; border-left:3px solid var(--gold); padding-left:12px; }
.adopt{ text-align:center; border-color:rgba(233,196,106,.35); }
.adopt p{ color:var(--muted); line-height:1.6; max-width:560px; margin:0 auto 16px; }
.adopt__alt{ font-size:.86rem; margin-top:14px !important; margin-bottom:0 !important; }
.share{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; }
.share__label{ color:var(--muted); font-size:.86rem; margin-right:4px; }
.more{ margin-top:46px; }

/* ---- COME FUNZIONA / PROPOSTE ---- */
.steps{ list-style:none; counter-reset:s; padding:0; margin:0 auto 18px; display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
.steps li{ counter-increment:s; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:14px; padding:18px; }
.steps li::before{ content:counter(s); display:inline-flex; width:30px; height:30px; border-radius:50%; align-items:center; justify-content:center;
  background:var(--gold); color:#2b2a26; font-weight:800; margin-bottom:10px; }
.steps b{ display:block; margin-bottom:6px; }
.steps span{ color:var(--muted); font-size:.9rem; line-height:1.5; }
.flower{ text-align:center; margin-top:22px; }
.flower p{ color:var(--muted); }
.propose{ display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:720px; margin:0 auto; }
.propose label{ display:flex; flex-direction:column; gap:6px; font-size:.86rem; color:var(--muted); }
.propose .wide{ grid-column:1 / -1; }
.propose .note{ text-align:center; margin:0; }

/* ---- DIALOG DI ADOZIONE ---- */
.dialog{ border:0; padding:0; background:transparent; color:var(--ink); max-width:min(560px,calc(100vw - 24px)); width:100%; }
.dialog::backdrop{ background:rgba(5,10,12,.7); }
.dialog__box{ position:relative; background:var(--night2); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:var(--shadow); }
.dialog__box h2{ font-family:var(--serif); margin:0 0 16px; padding-right:30px; }
.dialog__x{ position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
  background:transparent; color:var(--ink); font-size:1.2rem; cursor:pointer; }
.dialog__steps{ margin:0; padding-left:22px; display:flex; flex-direction:column; gap:18px; }
.dialog__steps li{ padding-left:4px; }   /* niente flex sul li: farebbe sparire il numero */
.dialog__steps li > *{ display:block; }
.dialog__steps li > * + *{ margin-top:8px; }
.dialog__steps li::marker{ color:var(--gold); font-weight:800; }
.dialog__steps label{ display:flex; flex-direction:column; gap:5px; font-size:.85rem; color:var(--muted); }
.dialog__steps span{ color:var(--muted); font-size:.86rem; }
.dialog__steps .btn{ display:inline-flex; }
.dialog__msg{ margin:0; white-space:pre-wrap; font-size:.86rem; background:var(--night); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; color:var(--ink); }

/* ---- CERTIFICATO ---- */
.cert{ background:linear-gradient(180deg,#f7f3e8,#ece5d2); color:#2b2a26; border-radius:6px; padding:clamp(28px,6vw,60px);
  text-align:center; font-family:var(--serif); border:10px double #b9a46a; box-shadow:var(--shadow); }
.cert p{ margin:6px 0; }
.cert h1{ font-size:clamp(1.8rem,5vw,2.6rem); margin:6px 0 18px; }
.cert__head{ letter-spacing:.3em; text-transform:uppercase; font-size:.78rem; color:#7a6a3c; }
.cert__name{ font-size:clamp(1.6rem,5vw,2.3rem); font-weight:700; color:#1f4f49; margin:8px 0 !important; }
.cert__word{ font-size:clamp(1.5rem,4.5vw,2rem); font-weight:700; }
.cert__dates{ color:#6b675e; }
.cert__ded{ font-style:italic; margin-top:14px !important; }
.cert__epi{ margin-top:16px !important; color:#4a4740; font-style:italic; }
.cert__foot{ margin-top:26px !important; font-size:.85rem; color:#6b675e; }
.cert__actions{ text-align:center; margin-top:20px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---- FOOTER / TOAST ---- */
.foot{ text-align:center; color:var(--faint); font-size:.82rem; padding:22px 16px 30px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.foot__dot{ color:var(--line); }
.toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:90; background:var(--gold); color:#2b2a26;
  padding:10px 16px; border-radius:10px; font-size:.9rem; font-weight:600; box-shadow:var(--shadow); }

/* ---- RESPONSIVE ---- */
@media (max-width:760px){
  .steps{ grid-template-columns:1fr; }
  .propose{ grid-template-columns:1fr; }
  .obit dl{ grid-template-columns:1fr; gap:4px; }
  .obit dd{ margin-bottom:10px; }
  .top__nav{ margin-left:0; width:100%; }
}
@media (max-width:460px){
  .graves{ grid-template-columns:1fr 1fr; gap:14px; }
  .stone{ min-height:250px; padding:26px 10px 14px; border-radius:80px 80px 8px 8px; }
  .stone__word{ font-size:1.2rem; }
  .stone__word--long{ font-size:1rem; }
  .stone__epi{ font-size:.82rem; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }

/* ---- STAMPA: solo il certificato ---- */
@media print{
  body{ background:#fff; }
  .top, .foot, .cert__actions, .back, .toast{ display:none !important; }
  .cert{ box-shadow:none; }
  @page{ size:A4 landscape; margin:12mm; }
}