/* ============================================================================
   «I nodi del bambù» · Maestro Fushi — stile del sito
   Carta, inchiostro e un solo rosso, come il libro.
   ============================================================================ */

@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(font/EBGaramond.ttf) format("truetype"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url(font/EBGaramond-Italic.ttf) format("truetype"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(font/LibreBaskerville.ttf) format("truetype"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(font/LibreBaskerville-Italic.ttf) format("truetype"); }

:root {
  --carta: #F5F0E6;
  --carta-scura: #EBE3D3;
  --bianco: #FBF8F2;
  --inchiostro: #1F1C19;
  --grigio: #6A635A;
  --linea: #D9CFBD;
  --rosso: #C43018;
  --rosso-scuro: #A3260F;
  --kanji: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --testo: "EB Garamond", Georgia, "Times New Roman", serif;
  --titoli: "Libre Baskerville", Georgia, serif;
  --largo: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--carta); color: var(--inchiostro);
  font-family: var(--testo); font-size: 20px; line-height: 1.55;
  font-variant-numeric: oldstyle-nums; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--rosso); text-underline-offset: 3px; }
a:hover { color: var(--rosso-scuro); }
h1, h2, h3 { font-family: var(--titoli); font-weight: 400; line-height: 1.2; margin: 0; letter-spacing: -0.005em; }
p { margin: 0 0 1em; }
[lang="ja"], .kanji { font-family: var(--kanji); font-weight: 400; letter-spacing: 0; }
em, i { font-style: italic; }

.contenitore { width: 100%; max-width: var(--largo); margin: 0 auto; padding: 0 24px; }
.stretto { max-width: 720px; }
.etichetta {
  font-family: var(--titoli); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rosso); margin: 0 0 18px;
}
.nota { font-size: 16px; color: var(--grigio); }
.rosso { color: var(--rosso); }

/* Segnaposto della bozza: si vedono finché in config.js c'è  bozza: true */
.da-decidere { outline: 1.5px dashed var(--rosso); outline-offset: 3px; background: rgba(196, 48, 24, 0.06); }
.da-decidere::after { content: " · da decidere"; font-family: var(--titoli); font-size: 11px; letter-spacing: 0.08em; color: var(--rosso); white-space: nowrap; }
body:not(.bozza) .da-decidere { outline: 0; background: none; }
body:not(.bozza) .da-decidere::after { content: none; }

/* ---------- bottoni ---------- */
.bottone {
  display: inline-block; background: var(--rosso); color: #fff; text-decoration: none;
  font-family: var(--titoli); font-size: 16px; letter-spacing: 0.02em;
  padding: 15px 26px; border-radius: 2px; border: 0; cursor: pointer;
  transition: background 0.15s ease;
}
.bottone:hover { background: var(--rosso-scuro); color: #fff; }
.bottone--chiaro { background: transparent; color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--inchiostro); }
.bottone--chiaro:hover { background: var(--inchiostro); color: var(--carta); }
.bottone[aria-disabled="true"] { background: var(--linea); color: var(--grigio); pointer-events: none; }

/* ---------- testata ---------- */
.testata { position: sticky; top: 0; z-index: 10; background: rgba(245, 240, 230, 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.testata.scesa { border-bottom-color: var(--linea); }
.testata__riga { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--inchiostro); font-family: var(--titoli); font-size: 13px; letter-spacing: 0.2em; }
.marchio img { width: 26px; height: 26px; }
.menu { display: flex; align-items: center; gap: 28px; font-family: var(--titoli); font-size: 14px; }
.menu a { color: var(--inchiostro); text-decoration: none; }
.menu a:hover { color: var(--rosso); }
.menu .bottone { color: #fff; padding: 10px 18px; font-size: 14px; }

/* ---------- apertura ---------- */
.apertura { position: relative; overflow: hidden; }
.apertura__sfondo { position: absolute; inset: 0; background: url(img/bambu.jpg) right center / cover no-repeat; opacity: 0.55; }
.apertura__sfondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--carta) 0%, var(--carta) 34%, rgba(245, 240, 230, 0.2) 70%, rgba(245, 240, 230, 0) 100%); }
.apertura__griglia { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; padding: 72px 24px 88px; }
.apertura h1 { font-size: clamp(44px, 6.4vw, 76px); margin-bottom: 14px; }
.apertura__sotto { font-family: var(--titoli); font-style: italic; color: var(--rosso); font-size: clamp(19px, 2.2vw, 24px); line-height: 1.4; margin-bottom: 26px; }
.apertura__testo { font-size: 21px; max-width: 34em; }
.apertura__azione { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.apertura__azione .nota { margin: 0; }
.apertura__copertina { justify-self: center; width: min(100%, 360px); box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 18px 40px rgba(60, 40, 20, 0.22); transform: rotate(0.6deg); }

/* ---------- la stagione di oggi ---------- */
.oggi { background: var(--inchiostro); color: var(--carta); }
.oggi__riga { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 26px 24px; }
.oggi__kanji { font-family: var(--kanji); font-size: 44px; line-height: 1; color: var(--carta); }
.oggi__testo { font-size: 19px; margin: 0; }
.oggi__testo strong { font-family: var(--titoli); font-weight: 400; }
.oggi__testo .quando { color: #B9AE9C; font-size: 16px; }
.oggi a.bottone--chiaro { color: var(--carta); box-shadow: inset 0 0 0 1px var(--carta); white-space: nowrap; }
.oggi a.bottone--chiaro:hover { background: var(--carta); color: var(--inchiostro); }

/* ---------- sezioni ---------- */
.sezione { padding: 104px 0; }
.sezione--bianca { background: var(--bianco); }
.sezione--scura { background: var(--carta-scura); }
.sezione h2 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 28px; }
.sezione__intro { font-size: 21px; max-width: 36em; }

/* l'idea: il nodo */
.nodo { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: center; }
.nodo__kanji { justify-self: center; width: 240px; }
.nodo__kanji figcaption { text-align: center; font-family: var(--titoli); font-style: italic; color: var(--grigio); font-size: 15px; margin-top: 10px; }
.nodo blockquote { margin: 28px 0 0; padding-left: 22px; border-left: 2px solid var(--rosso); font-style: italic; font-size: 22px; }

/* due colonne: per chi è / che libro non è */
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 48px; }
.due h3 { font-size: 22px; margin-bottom: 14px; }

/* le 24 stagioni */
.stagioni { margin-top: 56px; display: grid; gap: 64px; }
.stagione__testa { display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--linea); padding-bottom: 12px; margin-bottom: 26px; }
.stagione__testa h3 { font-size: 26px; }
.stagione__testa .kanji { color: var(--rosso); font-size: 24px; }
.stagione__testa .nota { margin: 0 0 0 auto; }
.carte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 26px; }
.carta { position: relative; }
.carta img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; background: var(--carta-scura); filter: saturate(0.95); }
.carta__num { font-family: var(--titoli); color: var(--rosso); font-size: 13px; letter-spacing: 0.12em; margin: 14px 0 4px; }
.carta h4 { font-family: var(--titoli); font-weight: 400; font-size: 19px; margin: 0; }
.carta h4 .kanji { font-size: 17px; margin-left: 4px; }
.carta__trad { font-style: italic; color: var(--grigio); font-size: 16px; margin: 2px 0 8px; }
.carta__gancio { font-size: 18px; line-height: 1.45; margin: 0; }
.carta.adesso img { outline: 3px solid var(--rosso); outline-offset: 4px; }
.carta.adesso .carta__num::after { content: "  ·  adesso"; letter-spacing: 0.06em; }

/* come è fatto ogni capitolo */
.passi { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; counter-reset: passo; }
.passi li { counter-increment: passo; border-top: 1px solid var(--inchiostro); padding-top: 16px; }
.passi li::before { content: counter(passo); font-family: var(--titoli); color: var(--rosso); font-size: 14px; display: block; margin-bottom: 8px; }
.passi h3 { font-size: 20px; margin-bottom: 8px; }
.passi p { font-size: 18px; margin: 0; }
.consiglio { margin-top: 56px; padding: 30px 34px; background: var(--bianco); border-left: 3px solid var(--rosso); font-size: 20px; }
.consiglio p:last-child { margin: 0; }

/* chi racconta */
/* Chi racconta: il ritratto montato su carta come una stampa, col sigillo 節 sull'angolo */
.maestro { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: center; }
.maestro__ritratto { position: relative; margin: 0; padding: 14px 14px 46px; background: var(--bianco);
  box-shadow: 0 1px 2px rgba(31, 28, 25, 0.08), 0 18px 40px -18px rgba(31, 28, 25, 0.35); }
.maestro__ritratto > img:first-child { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }
.maestro__sigillo { position: absolute; right: 14px; bottom: 5px; width: 38px; height: 38px; }
.maestro__ritratto figcaption { position: absolute; left: 16px; bottom: 13px; font-size: 15px; font-style: italic; color: var(--grigio); }
.maestro__citazione { margin: 6px 0 30px; padding: 0; }
.maestro__citazione p { margin: 0; font-family: var(--titoli); font-size: clamp(24px, 2.8vw, 33px); line-height: 1.38; }
.maestro__citazione p::before { content: "«"; display: block; font-size: 2.6em; line-height: 0.6; color: var(--rosso); margin-bottom: 6px; }
.maestro__citazione p::after { content: "»"; }
.maestro__citazione footer { margin-top: 14px; font-size: 17px; font-style: italic; color: var(--grigio); }
.maestro__nome { font-style: normal; font-family: var(--titoli); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--inchiostro); }
.dichiarato { font-size: 17px; color: var(--grigio); border-left: 2px solid var(--rosso); padding: 2px 0 2px 16px; margin-top: 26px; }

/* sfoglialo */
.pagine { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 48px; }
.pagine figure { margin: 0; }
.pagine a { display: block; }
.pagine img { width: 100%; aspect-ratio: 140 / 210; object-fit: cover; box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 10px 26px rgba(60, 40, 20, 0.14); transition: transform 0.2s ease; background: #fff; }
.pagine a:hover img { transform: translateY(-4px); }
.pagine figcaption { font-family: var(--titoli); font-size: 14px; color: var(--grigio); margin-top: 14px; text-align: center; }

/* cosa ricevi + come è fatto */
.elenco { list-style: none; padding: 0; margin: 32px 0 0; }
.elenco li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--linea); }
.elenco li::before { content: ""; position: absolute; left: 4px; top: 25px; width: 14px; height: 2px; background: var(--rosso); }
.trasparenza { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 48px; margin-top: 44px; }
.trasparenza h3 { font-size: 19px; margin-bottom: 6px; }
.trasparenza p { font-size: 18px; margin: 0; }

/* domande */
.domande { margin-top: 36px; border-top: 1px solid var(--linea); }
.domande details { border-bottom: 1px solid var(--linea); }
.domande summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-family: var(--titoli); font-size: 19px; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 26px; color: var(--rosso); font-family: var(--testo); transition: transform 0.2s; }
.domande details[open] summary::after { transform: rotate(45deg); }
.domande details > div { padding: 0 0 22px; font-size: 19px; max-width: 40em; }
.domande details > div p:last-child { margin: 0; }

/* acquista */
.acquista { background: var(--inchiostro); color: var(--carta); }
.acquista h2 { color: var(--carta); }
.acquista .etichetta { color: #E0806C; }
.acquista__intro { font-size: 21px; color: #D8CFBF; max-width: 34em; }
.offerte { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
.offerta { background: var(--carta); color: var(--inchiostro); padding: 38px 36px 34px; display: flex; flex-direction: column; }
.offerta--carta { background: var(--bianco); }
.offerta .etichetta { color: var(--rosso); margin-bottom: 8px; }
.offerta h3 { font-size: 28px; margin-bottom: 18px; }
.prezzo { font-family: var(--titoli); font-size: 46px; line-height: 1; margin: 0 0 6px; }
.prezzo__nota { font-size: 15px; color: var(--grigio); margin: 0 0 22px; }
.offerta ul { list-style: none; padding: 0; margin: 0 0 30px; flex: 1; }
.offerta li { padding: 7px 0 7px 26px; position: relative; font-size: 18px; line-height: 1.4; }
.offerta li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 12px; height: 2px; background: var(--rosso); }
.offerta .bottone { text-align: center; }
.sicuro { text-align: center; margin: 30px 0 0; color: #B9AE9C; font-size: 16px; }

/* piede */
.piede { padding: 52px 0 64px; font-size: 15px; color: var(--grigio); line-height: 1.6; }
.piede .marchio { margin-bottom: 18px; }
.piede p { margin: 0 0 4px; }
.piede nav { margin-top: 16px; display: flex; gap: 22px; flex-wrap: wrap; }
.piede nav a { color: var(--grigio); }

/* barra d'acquisto sul telefono */
.barra { display: none; }

/* ---------- telefono e tablet ---------- */
@media (max-width: 900px) {
  .contenitore { padding: 0 20px; }
  body { font-size: 19px; }
  .menu a:not(.bottone) { display: none; }
  .apertura__sfondo { background-position: 70% center; opacity: 0.35; }
  .apertura__sfondo::after { background: linear-gradient(180deg, rgba(245,240,230,0.2) 0%, var(--carta) 55%); }
  .apertura__griglia { grid-template-columns: 1fr; gap: 36px; padding: 36px 20px 64px; }
  .apertura__copertina { order: -1; width: min(62%, 260px); }
  .apertura__testo { font-size: 19px; }
  .oggi__riga { grid-template-columns: 1fr; gap: 14px; padding: 28px 20px; }
  .oggi__riga .bottone { text-align: center; }
  .oggi__kanji { font-size: 32px; }
  .apertura__azione .bottone { width: 100%; text-align: center; }
  .sezione { padding: 72px 0; }
  .nodo, .maestro, .due, .offerte, .trasparenza { grid-template-columns: 1fr; gap: 36px; }
  .nodo__kanji { width: 160px; }
  .carte { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .carta__gancio { font-size: 17px; }
  .passi { grid-template-columns: 1fr; gap: 26px; }
  .pagine { grid-template-columns: 1fr 1fr; gap: 18px; }
  .maestro__ritratto { width: min(100%, 440px); margin: 0 auto; }
  .maestro__ritratto > img:first-child { aspect-ratio: 1 / 1; }
  .offerta { padding: 30px 24px 26px; }
  .barra {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; gap: 12px; align-items: center; justify-content: space-between;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(31, 28, 25, 0.96); color: var(--carta);
    transform: translateY(110%); transition: transform 0.25s ease; font-family: var(--titoli); font-size: 14px;
  }
  .barra.vista { transform: none; }
  .barra .bottone { padding: 11px 16px; font-size: 14px; }
}
@media (max-width: 520px) {
  .carte { grid-template-columns: 1fr; }
  .stagione__testa { flex-wrap: wrap; }
  .stagione__testa .nota { margin: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ---- Pagine semplici: la copia personale, «grazie», termini e privacy ---- */
.foglio { max-width: 760px; margin: 0 auto; padding: 72px 24px 104px; min-height: 60vh; }
.foglio h1 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 22px; }
.foglio h2 { font-size: 24px; margin: 44px 0 12px; }
.foglio .etichetta { color: var(--rosso); margin-bottom: 10px; }
.copia__intestazione { font-size: 22px; }
.copia__scarica { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 34px 0 10px; }
.copia__scarica > div { background: var(--bianco); padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.copia__scarica .bottone { text-align: center; }
.copia__scarica .nota { font-size: 16px; }
.copia__carta, .copia__link { border-top: 1px solid var(--linea); margin-top: 40px; }
.copia__indirizzo code { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 15px; background: var(--bianco);
  padding: 12px 14px; overflow-wrap: anywhere; user-select: all; }
.attesa { display: flex; gap: 16px; align-items: center; margin: 30px 0; color: var(--grigio); }
.attesa__kanji { font-family: var(--kanji); color: var(--rosso); font-size: 34px; animation: respiro 2.4s ease-in-out infinite; }
@keyframes respiro { 50% { opacity: 0.35; } }
.legale { font-size: 18px; }
.legale h2 { font-size: 21px; margin: 38px 0 10px; }
.legale ul { padding-left: 1.2em; }
.legale li { margin-bottom: 0.4em; }
.legale .aggiornato { color: var(--grigio); font-size: 16px; }
@media (max-width: 640px) {
  .foglio { padding: 48px 20px 80px; }
  .copia__scarica { grid-template-columns: 1fr; }
}