/* Dungeon Memory — pagina di lancio.
   ==========================================================================
   L'idea: la pagina e' un TAVOLO da gioco a lume di candela su cui qualcuno ha
   appoggiato dei fogli. Le bande si alternano fra la NOTTE (il buio caldo attorno
   alla torcia) e la CARTA (pergamena, inchiostro seppia). La prima versione era
   tutta scura e sembrava spenta: il nero uniforme non e' atmosfera, e' assenza.
   Qui il buio serve a far risaltare la carta, che e' il vero soggetto — questo
   prodotto parla di appunti presi a mano.

   Le illustrazioni sono SVG scritti a mano dentro l'HTML, non immagini: cosi'
   ereditano i caratteri della pagina e cambiano colore da sole passando da una
   banda all'altra (un SVG caricato come <img> e' un documento separato, e sotto
   la nostra CSP non potrebbe nemmeno caricarsi i font).
   ========================================================================== */

:root {
  /* --- LA NOTTE: nero caldo, non obsidiana fredda ------------------------ */
  --notte: #14100a;
  --notte-2: #1c170e;
  --notte-3: #262015;
  --bordo-notte: #3a3123;

  /* --- LA CARTA ---------------------------------------------------------- */
  --carta: #efe3c8;
  --carta-2: #e6d8b6;
  --carta-alta: #f7efdc;
  --inchiostro: #2f2718;
  --seppia: #6d5c40;
  --seppia-tenue: #907d5c;

  /* --- LA FIAMMA --------------------------------------------------------- */
  --ambra: #e8973f;
  --ambra-viva: #f6b062;
  --brace: #d4571f;
  --oro: #c9a24a;
  --oro-cupo: #a8823a;      /* l'oro che si legge SULLA carta */
  --ambra-inchiostro: #2a1804;
  --alone: 232, 151, 63;

  /* --- testo sulla notte -------------------------------------------------- */
  --osso: #f4ecdc;
  --osso-tenue: #cfc3ab;
  --osso-fioco: #9a8f79;

  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;

  --largo: 1120px;
  --raggio: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--notte);
  color: var(--osso);
  font-family: var(--font);
  font-size: 18.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* Il filtro della grana vive fuori dal flusso. */
.filtri { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--ambra); color: var(--ambra-inchiostro);
  padding: 10px 16px; border-radius: 0 0 10px 0; font-family: var(--font-display);
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--ambra-viva); outline-offset: 3px; }

/* ======================================================================== */
/* INTESTAZIONE                                                             */
/* ======================================================================== */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  max-width: var(--largo); margin: 0 auto; padding: 24px 26px 0;
  position: relative; z-index: 2;
}
.brand {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.05em;
  font-size: 1.04rem; display: inline-flex; align-items: center; gap: 10px;
  color: var(--osso);
}
.brand__mark { color: var(--ambra); filter: drop-shadow(0 0 10px rgba(var(--alone), 0.6)); }
.top__tag {
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--oro);
  border: 1px solid rgba(201, 162, 74, 0.4); border-radius: 999px; padding: 6px 14px;
}

/* ======================================================================== */
/* HERO — la notte, con il foglio appoggiato accanto                        */
/* ======================================================================== */
.hero {
  position: relative;
  max-width: var(--largo); margin: 0 auto; padding: 74px 26px 92px;
  display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 54px; align-items: center;
}
/* L'alone della torcia: due luci calde sfalsate, non un gradiente piatto. */
.hero::before {
  content: ''; position: absolute; inset: -60px -10% auto -10%; height: 720px;
  background:
    radial-gradient(680px 420px at 22% 26%, rgba(var(--alone), 0.16), transparent 70%),
    radial-gradient(520px 380px at 78% 8%, rgba(212, 87, 31, 0.10), transparent 72%);
  pointer-events: none; z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.5rem, 6.6vw, 4.4rem); line-height: 1.06;
  letter-spacing: 0.012em; margin: 0 0 24px; text-wrap: balance;
  text-shadow: 0 0 50px rgba(var(--alone), 0.2);
}
.hero__sub {
  max-width: 46ch; margin: 0 0 38px;
  font-size: clamp(1.1rem, 1.9vw, 1.28rem); color: var(--osso-tenue);
}

/* Il foglio nell'hero e' leggermente ruotato, come lasciato li'. */
.hero__carta { transform: rotate(-2.2deg); }

/* ======================================================================== */
/* IL MODULO                                                                */
/* ======================================================================== */
.notify { max-width: 560px; }
.notify--centro { margin: 30px auto 0; }
.notify__label {
  display: block; font-family: var(--font-display); font-size: 0.76rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--oro);
  margin-bottom: 11px;
}
.notify__row { display: flex; gap: 10px; flex-wrap: wrap; }
.notify__input {
  flex: 1 1 240px; min-width: 0;
  background: rgba(0, 0, 0, 0.28); color: var(--osso);
  border: 1px solid var(--bordo-notte); border-radius: 10px;
  padding: 14px 16px; font-family: var(--font); font-size: 1rem;
}
.notify__input::placeholder { color: var(--osso-fioco); }
.notify__input:focus {
  border-color: var(--ambra); outline: none;
  box-shadow: 0 0 0 3px rgba(var(--alone), 0.2);
}

.btn {
  flex: 0 0 auto; cursor: pointer;
  background: linear-gradient(180deg, var(--ambra-viva), var(--ambra));
  color: var(--ambra-inchiostro); border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 10px; padding: 14px 24px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.04em;
  box-shadow: 0 0 0 1px rgba(var(--alone), 0.25), 0 10px 28px rgba(var(--alone), 0.24);
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.07); box-shadow: 0 0 0 1px rgba(var(--alone), 0.36), 0 12px 34px rgba(var(--alone), 0.32); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: default; box-shadow: none; }

.notify__note { margin: 13px 0 0; font-size: 0.89rem; color: var(--osso-fioco); }
.notify__note--ok { color: var(--oro); }
.notify__note--err { color: #e8837a; }
.notify__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ======================================================================== */
/* LE BANDE                                                                 */
/* ======================================================================== */
.banda { position: relative; }
.banda__dentro {
  position: relative; z-index: 1;
  max-width: var(--largo); margin: 0 auto; padding: 84px 26px;
}
.banda__dentro--stretta { max-width: 760px; }
.centro { text-align: center; }

.banda--notte { background: var(--notte); }
.banda--finale {
  background:
    radial-gradient(700px 340px at 50% 0%, rgba(var(--alone), 0.10), transparent 70%),
    var(--notte);
}

/* --- la carta ----------------------------------------------------------- */
.banda--carta {
  background: linear-gradient(178deg, var(--carta-alta), var(--carta) 22%, var(--carta-2));
  color: var(--inchiostro);
  /* Il bordo scuro in alto e in basso fa sembrare il foglio APPOGGIATO sul
     tavolo invece che incollato: e' l'ombra che lo stacca dal buio. */
  box-shadow:
    inset 0 14px 26px -14px rgba(0, 0, 0, 0.55),
    inset 0 -14px 26px -14px rgba(0, 0, 0, 0.55);
}
/* la grana: rumore in scala di grigi, moltiplicato sulla carta */
.grana {
  position: absolute; inset: 0; pointer-events: none;
  filter: url(#grana); opacity: 0.055; mix-blend-mode: multiply;
  /* Senza un contenuto il filtro non ha nulla su cui lavorare. */
  background: #808080;
}
.banda--carta .lede, .banda--carta p { color: var(--inchiostro); }
.banda--carta .fine { color: var(--seppia); }

/* ======================================================================== */
/* TIPOGRAFIA                                                               */
/* ======================================================================== */
.occhiello {
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--oro-cupo); margin: 0 0 16px;
}
.occhiello--chiaro { color: var(--oro); }

.h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.14;
  margin: 0 0 24px; text-wrap: balance;
}
.h2--centro { text-align: center; margin-bottom: 18px; }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; margin: 0 0 12px; }

.lede { font-size: clamp(1.05rem, 1.8vw, 1.2rem); max-width: 60ch; margin: 0 0 20px; }
.lede--grande { font-size: clamp(1.16rem, 2.1vw, 1.42rem); line-height: 1.56; }
.banda p { max-width: 60ch; }
.centro .lede, .centro p { margin-left: auto; margin-right: auto; }
.fine { font-size: 0.92rem; max-width: 60ch; margin-top: 26px; }

/* Il capolettera: il segno che dice "questa e' una pagina scritta". */
.capolettera {
  float: left; font-family: var(--font-display); font-weight: 700;
  font-size: 3.5em; line-height: 0.78; margin: 0.06em 0.1em 0 0;
  color: var(--brace);
}

.fregio { display: block; width: 220px; margin: 42px auto 0; height: auto; }
.fregio path, .fregio circle { fill: none; stroke: var(--seppia-tenue); stroke-width: 1.2; }
.fregio path:nth-of-type(3) { fill: var(--oro-cupo); stroke: var(--oro-cupo); }
.fregio circle { fill: var(--seppia-tenue); }

/* ======================================================================== */
/* I TRE PASSI                                                              */
/* ======================================================================== */
.passo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center;
  padding: 44px 0; border-top: 1px solid var(--bordo-notte);
}
.passo:first-of-type { border-top: 0; padding-top: 26px; }
.passo--rovescio .passo__testo { order: 2; }
.passo__n {
  font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.2em;
  color: var(--ambra); margin: 0 0 14px;
}
.passo__n span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(var(--alone), 0.4);
  box-shadow: 0 0 22px rgba(var(--alone), 0.14) inset;
}
.passo__testo p { color: var(--osso-tenue); }
.didascalia {
  margin: 14px 0 0; font-size: 0.88rem; color: var(--osso-fioco);
  text-align: center; font-style: italic;
}

/* ======================================================================== */
/* LE ILLUSTRAZIONI                                                          */
/* ======================================================================== */
/* Colori di default (sulla notte); le bande chiare li riscrivono piu' sotto. */
.ill {
  --linea: #b9a684;
  --linea-forte: var(--osso);
  --foglio: #efe3c8;
  --evidenza: var(--ambra);
  width: 100%; height: auto; display: block;
}
.banda--carta .ill {
  --linea: #8a7857;
  --linea-forte: var(--inchiostro);
  --foglio: #f7efdc;
  --evidenza: var(--brace);
}

.ill .ink path,
.ill .ink circle,
.ill .ink rect,
.ill .ink ellipse {
  fill: none; stroke: var(--linea); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ill text {
  font-family: var(--font); font-size: 11.5px; fill: var(--linea-forte);
  stroke: none; letter-spacing: 0.02em;
}

/* ATTENZIONE ALLA SPECIFICITA'. La regola generale qui sopra e' `.ill .ink path`
   (0,2,1): un selettore di parte scritto come `.ill--appunti .foglio` (0,2,0) PERDE,
   e il suo fill viene sovrascritto da `fill: none`. Nella prima versione il foglio
   di appunti veniva fuori come un fil di ferro invece che come un pezzo di carta.
   Percio' ogni regola di parte include `.ink`: stessa forma, specificita' che vince. */

/* --- la pagina di appunti ------------------------------------------------ */
.ill--appunti .ink .foglio {
  fill: var(--foglio); stroke: #6f5c3c; stroke-width: 1.6;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}
.ill--appunti .ink .scrittura path { stroke: #6a5a3e; stroke-width: 2.6; opacity: 0.62; }
.ill--appunti .ink .cancellato path { stroke: #6a5a3e; stroke-width: 2.4; opacity: 0.45; }
.ill--appunti .ink .freccia { stroke: var(--brace); stroke-width: 2.2; opacity: 0.9; }
.ill--appunti .ink .caffe circle { stroke: #a9793f; stroke-width: 3; opacity: 0.4; }
.ill--appunti .ink .macchia { fill: #3d3018; stroke: none; opacity: 0.7; }
.ill--appunti .ink .doodle { stroke: #6a5a3e; stroke-width: 2; opacity: 0.55; }

/* --- la rete dei nomi ---------------------------------------------------- */
.ill--rete .ink .legami path { stroke-width: 1.5; opacity: 0.8; }
.ill--rete .ink .legami .dedotto { stroke-dasharray: 3 6; opacity: 0.45; }
.ill--rete .ink .nodi circle { fill: var(--foglio); stroke-width: 2; }
.ill--rete .ink .nodi .acceso { fill: var(--evidenza); stroke: var(--evidenza); }
.ill--rete .ink .etichette text { font-size: 11px; }
.ill--rete .ink .etichette .acceso { fill: var(--evidenza); font-weight: 600; }

/* --- il pennino e le fonti ----------------------------------------------- */
.ill--fonti .ink .pennino { fill: none; stroke: var(--linea-forte); stroke-width: 2; }
.ill--fonti .ink path.pennino:first-of-type { fill: var(--foglio); }
.ill--fonti .ink .scrittura path { stroke-width: 2.8; opacity: 0.5; }
.ill--fonti .ink .targhe rect { fill: rgba(232, 151, 63, 0.18); stroke: var(--evidenza); stroke-width: 1.3; }
.ill--fonti .ink .targhe text { font-size: 10px; fill: var(--evidenza); font-weight: 600; }
.ill--fonti .ink .vuoto path { stroke-dasharray: 3 5; opacity: 0.4; }
.ill--fonti .ink .vuoto text { font-size: 10.5px; fill: var(--linea); font-style: italic; }

/* --- il tavolo ------------------------------------------------------------ */
.ill--tavolo { max-width: 400px; margin-top: 34px; }
.ill--tavolo .ink .piano { fill: rgba(122, 94, 54, 0.16); stroke-width: 1.5; opacity: 0.75; }
.ill--tavolo .ink .alone { fill: rgba(232, 151, 63, 0.14); stroke: none; }
.ill--tavolo .ink .candela rect { fill: var(--foglio); stroke-width: 1.7; }
.ill--tavolo .ink .fiamma { fill: var(--evidenza); stroke: var(--evidenza); }
.ill--tavolo .ink .dado { fill: var(--foglio); stroke-width: 1.6; opacity: 0.94; }
.ill--tavolo .ink .telefono { fill: rgba(0, 0, 0, 0.34); stroke: var(--evidenza); stroke-width: 1.7; }
.ill--tavolo .ink .telefono + .scrittura path { stroke: var(--evidenza); stroke-width: 2.2; opacity: 0.6; }
.ill--tavolo .ink .mano { fill: rgba(122, 94, 54, 0.24); stroke-width: 1.5; opacity: 0.85; }

/* --- il sigillo di ceralacca ---------------------------------------------- */
.sigillo { width: 84px; height: 84px; margin: 0 auto 24px; display: block; }
.sigillo .cera {
  fill: var(--brace); stroke: #8e3a12; stroke-width: 1.5;
  filter: drop-shadow(0 6px 16px rgba(212, 87, 31, 0.4));
}
.sigillo .rilievo { fill: none; stroke: rgba(255, 220, 190, 0.55); stroke-width: 2.2; }

/* ======================================================================== */
/* GLI SCATTI DEL PRODOTTO                                                   */
/* ======================================================================== */
.scatto {
  margin: 0; border: 1px solid var(--bordo-notte);
  border-radius: var(--raggio); overflow: hidden; background: var(--notte-2);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6);
}
.scatto--largo { margin: 40px auto 0; max-width: 900px; }
.scatto--telefono {
  max-width: 290px; margin: 0 auto; border-radius: 24px;
  border-color: rgba(var(--alone), 0.3);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.66), 0 0 40px rgba(var(--alone), 0.12);
}
.scatto figcaption {
  padding: 11px 16px; font-size: 0.85rem; color: var(--osso-fioco);
  border-top: 1px solid var(--bordo-notte); background: var(--notte-3);
}
.scatto__zoom { display: block; }
.tocca { display: none; }
@media (max-width: 760px) { .tocca { display: inline; color: var(--ambra); } }

/* ======================================================================== */
/* IL REGISTRO DEI NUMERI                                                    */
/* ======================================================================== */
.registro {
  list-style: none; margin: 34px 0 0; padding: 0;
  border-top: 1px solid rgba(109, 92, 64, 0.35);
}
.registro li {
  display: flex; align-items: baseline; gap: 20px;
  padding: 17px 4px; border-bottom: 1px solid rgba(109, 92, 64, 0.28);
}
.registro__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem); color: var(--brace);
  font-variant-numeric: tabular-nums; line-height: 1;
  min-width: 4.6ch; text-align: right;
}
.registro__su { font-size: 0.56em; color: var(--oro-cupo); }
.registro__k { font-size: 1.02rem; color: var(--inchiostro); }

/* ======================================================================== */
/* COSA NON È                                                                */
/* ======================================================================== */
.nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.nots li { padding-left: 26px; position: relative; max-width: 60ch; }
.nots li::before {
  content: '✕'; position: absolute; left: 0; top: 0.1em;
  color: var(--brace); font-size: 0.86em;
}
.nots strong { font-weight: 700; }

/* ======================================================================== */
/* IL TAVOLO (banda)                                                         */
/* ======================================================================== */
.tavolo { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 54px; align-items: center; }

/* ======================================================================== */
/* PIÈ DI PAGINA                                                             */
/* ======================================================================== */
.foot {
  border-top: 1px solid var(--bordo-notte);
  max-width: var(--largo); margin: 0 auto; padding: 28px 26px 56px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--osso-fioco);
}
.foot__dim { color: #746a56; }

/* ======================================================================== */
/* SCHERMI STRETTI                                                           */
/* ======================================================================== */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-bottom: 68px; }
  .hero__carta { max-width: 420px; }
  .passo { grid-template-columns: 1fr; gap: 26px; }
  .passo--rovescio .passo__testo { order: 0; }
  .tavolo { grid-template-columns: 1fr; gap: 36px; }
  .ill--tavolo { margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) {
  body { font-size: 17.5px; }
  .hero { padding: 48px 20px 56px; }
  .banda__dentro { padding: 58px 20px; }
  .top { padding: 18px 20px 0; }
  .registro li { gap: 14px; }
  .registro__n { min-width: 3.8ch; }
  .capolettera { font-size: 3em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001ms !important; }
}