/* =========================================================================
   Il menu del giardino: la colonna di sinistra da cui si raggiunge tutto.
   ========================================================================= */
.giardino-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.giardino-menu { padding-top: 46px; position: sticky; top: 24px; }
.menu-giardino-toggle, .menu-giardino-burger { display: none; }

.menu-chi {
  margin: 0 0 26px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 21px; color: var(--ink);
}
.menu-titolo {
  margin: 26px 0 10px;
  font: 700 10px/1.4 var(--sans); letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold);
}
.menu-titolo:first-of-type { margin-top: 0; }
.menu-voci { list-style: none; margin: 0; padding: 0; }
.menu-voci a, .menu-stanza summary, .menu-stanza-chiusa, .menu-schede a {
  display: block; padding: 7px 0; font-size: 14px; text-decoration: none; color: var(--text);
}
.menu-voci a:hover, .menu-schede a:hover { color: var(--gold-deep); }
.menu-voci a[aria-current], .menu-schede a[aria-current] { color: var(--ink); font-weight: 700; }
.menu-esci { color: var(--muted) !important; }

.menu-stanza summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.menu-stanza summary::marker { color: var(--gold); }
.menu-stanza summary small { font-weight: 400; color: var(--muted); font-size: 12px; }
.menu-gruppo {
  margin: 12px 0 2px 14px;
  font: 700 9px/1.4 var(--sans); letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted);
}
.menu-schede {
  list-style: none; margin: 2px 0 8px; padding: 0 0 0 14px;
  border-left: 1px solid var(--line);
  max-height: 300px; overflow-y: auto; scrollbar-width: thin;
}
.menu-schede a { padding: 5px 0; color: var(--muted); }
.menu-schede a[aria-current] { color: var(--ink); }
.menu-stanza-chiusa { color: #9a9c8e; font-size: 14px; }
.menu-stanza-chiusa span { color: var(--gold); margin-right: 6px; }

.giardino { padding-block: 46px 30px; }
.giardino > section + section,
.giardino > .em-card + section,
.giardino > section + .em-card { margin-top: 70px; }

/* L'Erba Guida: il centro del giardino. Il riquadro si stringe intorno alla lettera,
   così sembra un foglio e non un pannello mezzo vuoto. */
.giardino-erba { border-top: 2px solid var(--gold); }
.giardino-erba h2 { font-size: clamp(32px, 3.4vw, 46px); margin: 0 0 22px; }
.giardino-lettera {
  border-left: 2px solid var(--moonlight);
  padding: 2px 0 2px 26px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text);
  overflow-wrap: break-word;
}
.giardino-lettera br + br { line-height: 2.4; }
.giardino-erba .fine-print { margin-top: 22px; }
.giardino-erba-vuota { background: linear-gradient(135deg, #f1e7cd, #e8d7ad); border-color: #c5b98f; }

/* Le due cose personali — la chiave e la lettera — stanno in una colonna piu' stretta:
   si leggono meglio e sembrano fogli, non pannelli. Le stanze e i doni restano larghi.
   In pixel e non in rem: rem dipende dal carattere predefinito del browser di chi legge,
   e su chi lo tiene a 20px il riquadro tornava largo come prima. */
.giardino-chiave, .giardino-erba { max-width: 960px; margin-inline: auto; }
.giardino-chiave { border-top: 2px solid var(--moonlight); background: linear-gradient(135deg, #f1e7cd, #e8d7ad); border-color: #c5b98f; }
.giardino-chiave h2 { font-size: clamp(28px, 3vw, 38px); margin: 0 0 14px; }


/* Le tre aree, sulla prima pagina */
.giardino-aree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.giardino-aree .area {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-top: 2px solid #b59b69; border-radius: var(--radius);
  background: var(--card); padding: 26px 24px; text-decoration: none;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.giardino-aree .area:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow-soft); }
.giardino-aree h2 { font-size: 27px; margin: 10px 0 12px; }
.giardino-aree p:not(.eyebrow) { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.giardino-aree .text-link { margin-top: auto; align-self: start; }
.stanza-gruppo { margin: 22px 0 6px; font: 700 10px/1.4 var(--sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); }

/* La ricerca: un campo che si vede, non una riga sottile sotto un'etichetta.
   Sta in cima alla pagina degli approfondimenti e deve dire da solo cosa fa. */
.stanze-cerca { margin-bottom: 34px; }
.cerca-campo {
  position: relative; display: flex; align-items: center;
  max-width: 480px; background: var(--card);
  border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .18s, box-shadow .18s;
}
.cerca-campo:hover { border-color: var(--gold); }
.cerca-campo:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px #a4753622; }
.cerca-lente {
  position: absolute; left: 18px; width: 19px; height: 19px; pointer-events: none;
  fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round;
}
.cerca-campo:focus-within .cerca-lente { stroke: var(--gold); }
.cerca-campo input[type=search] {
  flex: 1; min-width: 0; margin: 0; border: 0; background: none; border-radius: 999px;
  padding: 15px 46px 15px 48px; font-family: inherit; font-size: 16px; color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.cerca-campo input[type=search]::placeholder { color: var(--muted); opacity: 1; }
.cerca-campo input[type=search]:focus { outline: none; }
.cerca-campo input[type=search]::-webkit-search-cancel-button { display: none; }
.cerca-pulisci {
  position: absolute; right: 8px; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--muted);
}
.cerca-pulisci:hover { background: var(--paper); color: var(--ink); }
.cerca-pulisci:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cerca-esito { margin: 12px 0 0; min-height: 20px; font-size: 13px; color: var(--muted); }
.cerca-esito.vuoto { color: var(--ink); }
.menu-libri .chiuso { color: #9a9c8e; font-size: 14px; padding: 7px 0; }
.menu-libri .chiuso span { color: var(--gold); margin-right: 6px; }

/* Le stanze dei libri */
.giardino-stanza {
  border: 1px solid var(--line);
  border-top: 2px solid #b59b69;
  border-radius: var(--radius);
  background: var(--card);
  padding: 28px 30px;
}
.giardino-stanza + .giardino-stanza { margin-top: 18px; }
.giardino-stanza > header { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.giardino-stanza h3 { margin: 0; font-size: 26px; }
.giardino-stanza .eyebrow { margin-bottom: 8px; }
.stanza-stato { font-size: 12px; color: var(--muted); white-space: nowrap; }

.giardino-stanza.chiusa { background: var(--paper-2); border-top-color: var(--line-strong); }
.giardino-stanza.chiusa h3 { color: var(--muted); }
.stanza-sigillo { margin: 20px 0 14px; color: var(--muted); font-size: 15px; max-width: 62ch; }
.stanza-sigillo span { color: var(--gold); font: 22px/1 Georgia, serif; margin-right: 8px; vertical-align: -2px; }
/* il lucchetto della stanza chiusa: un ornamento non diceva «chiuso», questo si' */
.sigillo-icona {
  width: 17px; height: 17px; margin-right: 7px; vertical-align: -3px;
  fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round;
}
.giardino-stanza.attesa .sigillo-icona { stroke: var(--muted); }
/* la stanza di un libro i cui approfondimenti non sono ancora scritti: chiusa,
   ma senza il numero di schede, che sarebbe una promessa non ancora mantenuta */
.giardino-stanza.attesa .stanza-stato { font-style: italic; }
.giardino-stanza.attesa .stanza-sigillo span { color: var(--muted); }

.stanza-schede { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stanza-schede a, .stanza-schede .seme {
  display: block; height: 100%;
  border: 1px solid var(--line); border-radius: 3px;
  padding: 15px 17px;
  text-decoration: none;
  transition: transform .2s, border-color .2s, background .2s;
}
.stanza-schede a { background: var(--paper); }
.stanza-schede a:hover { transform: translateY(-3px); border-color: var(--gold); background: #fff; }
.stanza-schede strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink); }
.stanza-schede span { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
/* L'iconcina della scheda (21/09/2026): un tratto sottile accanto al titolo, mai piu'
   forte di lui. Colore del testo schiarito; si scalda d'oro quando la card si solleva. */
.stanza-schede a:has(.scheda-icona) { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.stanza-schede a:has(.scheda-icona) > strong, .stanza-schede a:has(.scheda-icona) > span { grid-column: 2; }
.stanza-schede .scheda-icona {
  grid-row: 1 / span 2; width: 30px; height: 30px; margin-top: 3px;
  fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
  color: var(--ink); opacity: .55; transition: opacity .2s, color .2s;
}
.stanza-schede a:hover .scheda-icona { opacity: .9; color: var(--gold); }
.stanza-semi { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.stanza-semi summary { font-size: 14px; color: var(--muted); font-weight: 400; }
.stanza-semi summary::marker { color: var(--gold); }
.stanza-semi > p { margin: 14px 0 0; font-size: 14px; color: var(--muted); max-width: 62ch; }
.stanza-semi .semi-nomi { font-family: var(--serif); font-size: 17px; line-height: 1.9; color: #8e9184; }

/* I doni */
.doni-elenco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
.doni-elenco li { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 12px 0; }
.doni-elenco strong { font-weight: 400; font-family: var(--serif); font-size: 19px; color: var(--ink); }
.doni-elenco span { font-size: 12px; color: var(--muted); white-space: nowrap; align-self: center; }

/* Il cancello: soglia, sigillo, germoglio */
.giardino-scheda { padding-block: 46px 40px; }
.giardino-soglia, .giardino-sigillo, .giardino-avviso { max-width: 720px; margin-inline: auto; text-align: center; }
.giardino-soglia h2, .giardino-sigillo h2, .giardino-avviso h2 { font-size: clamp(30px, 3.4vw, 44px); margin: 0 0 18px; }
.giardino-soglia p, .giardino-sigillo p, .giardino-avviso p { max-width: 58ch; margin-inline: auto; }
.sigillo-segno { display: block; font: 56px/1 Georgia, serif; color: var(--gold); margin-bottom: 18px; }
.giardino-soglia .hero-actions { justify-content: center; margin: 30px 0 24px; }
.giardino-sigillo { background: var(--paper-2); }
.giardino-vie { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 24px; text-align: left; }
.giardino-vie p { margin-inline: 0; }
.giardino-vie strong { color: var(--ink); }

/* Il testo di una scheda aperta */
.giardino-testo { max-width: 76ch; margin-inline: auto; font-size: 17px; line-height: 1.8; }
.giardino-testo h2 { font-size: clamp(27px, 2.8vw, 36px); margin: 2em 0 .6em; }
.giardino-testo h3 { margin: 1.8em 0 .5em; }
.giardino-testo img { border-radius: var(--radius); margin: 2em 0 .6em; max-width: 100%; height: auto; }
.giardino-testo figcaption { font-size: 12px; color: var(--muted); text-align: center; }
/* l'immagine dell'occorrente: width/height stanno nel tag per non far saltare la pagina mentre carica */
.scheda-figura { margin: 2.4em 0; }
.scheda-figura img { display: block; width: 100%; height: auto; margin: 0; }
.giardino-testo ol, .giardino-testo ul { padding-left: 22px; }
.giardino-testo li + li { margin-top: 10px; }
.giardino-testo blockquote { margin: 2em 0; border-left: 2px solid var(--moonlight); padding-left: 24px; font-family: var(--serif); font-size: 21px; line-height: 1.6; color: var(--ink); }
.giardino-torna { margin-top: 60px; text-align: center; }

@media (max-width: 900px) {
  .stanza-schede { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .giardino-aree { grid-template-columns: 1fr; }
  .giardino-layout { grid-template-columns: 1fr; gap: 0; }
  .giardino-menu { position: static; padding-top: 22px; }
  .menu-giardino-burger {
    display: block; cursor: pointer; user-select: none;
    border: 1px solid var(--line); border-radius: 3px;
    padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--ink);
    background: var(--card); min-height: 46px;
  }
  .menu-giardino-burger::after { content: 'Il tuo giardino +'; }
  .menu-giardino-toggle:checked ~ .menu-giardino-burger::after { content: 'Chiudi \2212'; }
  .menu-giardino-toggle:focus-visible ~ .menu-giardino-burger { outline: 3px solid var(--gold); outline-offset: 3px; }
  .menu-giardino-dentro { display: none; padding: 22px 0 4px; }
  .menu-giardino-toggle:checked ~ .menu-giardino-dentro { display: block; }
  .menu-voci a, .menu-stanza summary, .menu-schede a { padding: 11px 0; }
  .menu-schede { max-height: none; }
}
@media (max-width: 560px) {
  .giardino { padding-top: 28px; }
  .giardino > section + section { margin-top: 48px; }
  .giardino-barra { padding-block: 12px; font-size: 12px; }
  .giardino-barra > div { gap: 4px 16px; }
  .giardino-barra a { min-height: 40px; display: inline-flex; align-items: center; }
  .giardino-stanza { padding: 22px 18px; }
  .giardino-stanza h3 { font-size: 23px; }
  .stanza-schede { grid-template-columns: 1fr; gap: 10px; }
  .giardino-lettera { padding-left: 18px; font-size: 16px; }
  .doni-elenco { grid-template-columns: 1fr; }
  .giardino-testo { font-size: 16px; }
  .sigillo-segno { font-size: 44px; }
}

/* Libri in preparazione nel menu (20/09/2026): niente lucchetto, perche' il lucchetto
   promette qualcosa dietro e qui dietro non c'e' ancora niente. Solo un punto, e la
   ragione scritta accanto. */
.menu-libri .chiuso.attesa span { color: var(--muted); }
.menu-libri .chiuso.attesa em { font-style: italic; font-size: 12px; color: #a9ab9d; }

/* Il sigillo APERTO (20/09/2026). Il lucchetto chiuso si vedeva, quello aperto no:
   le stanze chiuse avevano un segno e quella aperta niente, quindi «aperta» si
   deduceva da un'assenza. Verde invece che ottone: l'ottone e' il colore della
   soglia, il verde e' quello di chi e' dentro. */
.stanza-sigillo.aperto { color: var(--ok); font-weight: 600; }
.stanza-sigillo.aperto .sigillo-icona { stroke: var(--ok); }

/* ============================================================================
   LE STANZE, IN PRIMA PAGINA (20/09/2026, rifatte a card)
   Lo stato dei sigilli si deve vedere entrando, non un clic piu' in la'. E si deve
   capire senza leggere: la copertina spenta e il lucchetto dicono «non e' tua»
   prima di qualunque parola.
   ========================================================================= */
.stanze-rapide { margin: 0 0 26px; }
.stanze-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.stanze-testa .eyebrow { margin: 0; }
.stanze-sommario { margin: 0; font-size: 13px; color: var(--muted); }

.stanze-rapide ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}

.stanza-card > a, .stanza-card > div {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--card); text-decoration: none; color: var(--text);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Solo cio' che porta da qualche parte reagisce al passaggio del mouse: un riquadro
   che si solleva e non fa niente e' una promessa non mantenuta. */
.stanza-card > a:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow-soft); }
.stanza-card > a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.stanza-copertina { position: relative; aspect-ratio: 3 / 4; background: var(--paper-2); overflow: hidden; }
.stanza-copertina img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .2s ease, opacity .2s ease; }

/* Il bollo del sigillo: sempre nello stesso angolo, cosi' l'occhio lo cerca in un
   posto solo e confronta quattro card in un colpo. */
.stanza-bollo {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(248, 243, 232, .94); border: 1px solid var(--line);
}
.stanza-bollo svg { width: 16px; height: 16px; fill: none; stroke-width: 1.7; }

.stanza-testo { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.stanza-occhiello { margin: 0; font: 700 9px/1.4 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }
.stanza-testo h3 { margin: 0; font: 600 17px/1.25 var(--serif); color: var(--ink); }
.stanza-riga { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.stanza-riga strong { color: var(--ink); font-weight: 700; }
.stanza-azione { margin-top: auto; padding-top: 10px; font: 600 13px/1 var(--sans); color: var(--gold); }

/* APERTA: il lucchetto e' verde, la copertina piena. */
.stanza-card.aperta .stanza-bollo { border-color: var(--ok); }
.stanza-card.aperta .stanza-bollo svg { stroke: var(--ok); }
.stanza-card.aperta .stanza-azione { color: var(--ok); }

/* CHIUSA: la copertina si spegne. Non sparisce — il libro si deve riconoscere,
   e' il modo di capire quale ti manca. */
.stanza-card.chiusa .stanza-copertina img { filter: grayscale(.85) contrast(.92); opacity: .62; }
.stanza-card.chiusa > a:hover .stanza-copertina img { filter: grayscale(.4); opacity: .85; }
.stanza-card.chiusa .stanza-bollo svg { stroke: var(--gold); }
.stanza-card.chiusa .stanza-testo h3 { color: var(--text); }

/* IN PREPARAZIONE: non e' chiusa a chiave, e' un cantiere. Lucchetto spento e
   niente ottone: l'ottone promette una porta, qui la porta non c'e' ancora. */
.stanza-card.attesa .stanza-bollo svg { stroke: var(--line-strong); }
.stanza-card.attesa .stanza-occhiello { color: var(--muted); }
.stanza-card.attesa .stanza-riga { font-style: italic; }

@media (max-width: 900px) { .stanze-rapide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 420px) {
  /* Su uno schermo stretto quattro copertine in colonna sono un muro da scorrere:
     la card si corica e la copertina si fa piccola, cosi' le quattro stanze si
     vedono ancora tutte insieme — che e' tutto il punto di metterle qui. */
  .stanze-rapide ul { grid-template-columns: 1fr; gap: 10px; }
  .stanza-card > a, .stanza-card > div { flex-direction: row; align-items: stretch; }
  .stanza-copertina { width: 88px; flex: 0 0 88px; aspect-ratio: auto; }
  .stanza-bollo { width: 24px; height: 24px; top: 6px; right: 6px; }
  .stanza-bollo svg { width: 13px; height: 13px; }
  .stanza-testo { padding: 11px 13px; }
  .stanza-testo h3 { font-size: 16px; }
}

/* Le energie di oggi (04/10/2026): l'invito in cima alla prima pagina. Una riga sola,
   scura come il cielo della prima storia: è la cosa che cambia ogni giorno, e si vede. */
.energie-invito {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  margin: 0 0 56px; padding: 20px 24px; border-radius: 16px;
  background: radial-gradient(120% 120% at 90% 0%, #2b5a4a 0%, transparent 60%), linear-gradient(165deg, var(--night), var(--ink));
  color: #efe6d2; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.energie-invito:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.energie-invito-luna { font: 40px/1 Georgia, serif; }
.energie-invito-testo { display: flex; flex-direction: column; gap: 4px; }
.energie-invito .eyebrow { color: var(--moonlight); margin: 0; }
.energie-invito strong { font-family: var(--serif); font-weight: 400; font-size: 22px; color: #fbf4e4; }
.energie-invito .text-link { color: var(--moonlight); white-space: nowrap; }
@media (max-width: 560px) {
  .energie-invito { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .energie-invito .text-link { grid-column: 1 / -1; }
}