/* ===========================================================
   Luca Bortolazzi - Home, Pensieri, Chi sono, e la scrivania riservata (/scrivi).
   Nessuna affermazione biografica su Luca che lui non abbia scritto
   o confermato.
   Notte, ambra, carta: la stessa identita' delle versioni precedenti.
   Spectral per titoli e prosa, Karla per navigazione ed etichette.
   REGOLA: mai "padding" abbreviato su una classe usata insieme a
   .container - azzererebbe il padding laterale. Solo padding-block.
=========================================================== */

/* Caratteri serviti dal sito stesso (cartella fonts/, da Google Fonts:
   Spectral v15, Karla v33 variabile), solo alfabeto latino e latino esteso:
   il browser scarica il file "esteso" solo se nella pagina serve. */
@font-face { font-family: "Karla"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/karla-variabile-latin-ext-v33.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/karla-variabile-latin-v33.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/spectral-corsivo-300-latin-ext-v15.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/spectral-corsivo-300-latin-v15.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/spectral-corsivo-400-latin-ext-v15.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/spectral-corsivo-400-latin-v15.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/spectral-300-latin-ext-v15.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/spectral-300-latin-v15.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/spectral-400-latin-ext-v15.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/spectral-400-latin-v15.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/spectral-600-latin-ext-v15.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/spectral-600-latin-v15.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --carta: #FBF8F3;
  --carta-calda: #F2ECE1;
  --bianco: #FFFFFF;
  --inchiostro: #16181E;
  --inchiostro-morbido: #4C5162;
  --inchiostro-tenue: #646978;
  --riga: #E3DDD1;

  --notte: #1A2030;
  --notte-chiara: #2A3348;
  --ambra: #B76E28;
  --ambra-testo: #9C5C1F; /* arancione per scritte e pulsanti: leggibile su carta (5:1) e con il bianco sopra */
  --ambra-viva: #D08B3E;
  --ambra-tenue: #F4E6D3;

  --calma: #4F707A;
  --calma-scura: #35525B;
  --calma-tenue: #E6EEEF;

  --serif: "Spectral", "Iowan Old Style", Georgia, serif;
  --sans: "Karla", -apple-system, "Segoe UI", sans-serif;

  --raggio: 4px;
  --raggio-g: 12px;
  --ombra: 0 1px 2px rgba(22,24,30,0.05), 0 12px 32px -16px rgba(22,24,30,0.28);
  --ombra-alta: 0 24px 50px -22px rgba(22,24,30,0.45);
  --misura: 34rem;
}

* { box-sizing: border-box; }
/* "hidden" deve vincere sempre: senza questa riga, un elemento con una
   classe che imposta display (es. .btn) ricompare anche se nascosto. */
[hidden] { display: none !important; }
.salta {
  position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.8rem 1.2rem; border-radius: var(--raggio);
  background: var(--notte); color: #fff; font-family: var(--sans); font-weight: 600; text-decoration: none;
}
.salta:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--calma); outline-offset: 3px; }
.apertura :focus-visible, .richiamo :focus-visible, .fatto :focus-visible, .dialogo__barra :focus-visible { outline-color: var(--ambra-viva); }
main:focus { outline: none; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; scrollbar-color: #CDBEA8 var(--carta); }
::selection { background: rgba(208,139,62,0.3); color: inherit; }
section[id] { scroll-margin-top: 5.5rem; }
/* Monitor molto grandi (oltre 1920px di larghezza): tutto il sito e' in
   rem, quindi basta far crescere la dimensione base in proporzione allo
   schermo perche' testo, spazi, copertina e contenitore scalino insieme,
   mantenendo esattamente la composizione pensata a 1920px invece di
   restare piccola e sperduta al centro. A 1920px vale 16px esatti (nessuno
   scatto sul confine), a 3560px circa 29.7px; tetto a 32px per sicurezza. */
@media (min-width: 1920px) { html { font-size: clamp(16px, calc(100vw / 120), 32px); } }
body {
  margin: 0; background: var(--carta); color: var(--inchiostro);
  font-family: var(--serif); font-size: 1.0625rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: var(--sans); font-size: 0.95rem; }

.container { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.6rem; }
@media (max-width: 640px) { .container { padding: 0 1.15rem; } }
/* Su monitor molto larghi il contenitore cresce un po' (mai la larghezza
   del testo scorrevole, che resta fissa per restare leggibile): testata,
   hero e piede respirano di piu' invece di restare sempre alla stessa
   larghezza fissa qualunque sia lo schermo. */
@media (min-width: 1600px) { .container { max-width: 82rem; } }
.stretto { max-width: 46rem; }

.occhiello {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ambra-testo); display: block; margin-bottom: 0.9rem;
}
.occhiello--calma { color: var(--calma); }
.occhiello--chiaro { color: var(--ambra-viva); }

/* ===== Bottoni ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--sans); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.btn:active { transform: translateY(1px); }
.btn--pieno { background: var(--ambra-testo); color: #fff; }
.btn--pieno:hover { background: #7F4916; }
.btn--calma { background: var(--calma); color: #fff; }
.btn--calma:hover { background: var(--calma-scura); }
.btn--linea { border-color: var(--riga); color: var(--inchiostro); background: transparent; }
.btn--linea:hover { border-color: var(--inchiostro); }
.btn--chiaro { border: 1px solid rgba(255,255,255,0.35); color: #fff; background: transparent; }
.btn--chiaro:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
/* sfondo pieno del colore della notte della hero (anche sopra l'alone della lampada) */
.btn--notte { background: var(--notte); }
.btn--notte:hover { background: var(--notte-chiara); }
.btn--largo { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Testata ===== */
.testata { position: sticky; top: 0; z-index: 40; background: rgba(251,248,243,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--riga); }
.testata__riga { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.1rem; }
.marchio { font-family: var(--serif); font-size: 1.32rem; text-decoration: none; color: var(--inchiostro); letter-spacing: 0.01em; line-height: 1.1; }
.marchio em { font-style: italic; }
.testata .marchio { padding-block: 0.6rem; }
.piede__col a.marchio { display: inline-block; padding-block: 0.8rem; }
.menu { display: flex; align-items: center; gap: 1.85rem; }
.menu a { position: relative; font-family: var(--sans); font-size: 0.88rem; font-weight: 500; text-decoration: none; color: var(--inchiostro-morbido); transition: color 160ms ease; }
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--ambra);
  transform: scaleX(0); transform-origin: right; transition: transform 380ms cubic-bezier(.2,.8,.2,1);
}
.menu a:hover::after, .menu a.attivo::after { transform: scaleX(1); transform-origin: left; }
.menu a:hover, .menu a.attivo { color: var(--inchiostro); }
.testata__azioni { display: flex; align-items: center; gap: 0.8rem; }
.apri-menu {
  display: none; position: relative; width: 2.75rem; height: 2.75rem; border-radius: 50%; padding: 0;
  border: 1px solid var(--riga); background: transparent; color: var(--inchiostro); /* colore esplicito: su iPhone i pulsanti sono azzurri di sistema */
  align-items: center; justify-content: center; transition: color 400ms ease, border-color 400ms ease, transform 160ms ease;
}
.apri-menu:active { transform: scale(0.93); }
.apri-menu__linee { position: relative; display: block; width: 1.15rem; height: 0.8rem; }
.apri-menu__linee > span {
  position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 2px; background: currentColor;
  transition: transform 520ms cubic-bezier(.7,0,.2,1), opacity 260ms ease, width 360ms cubic-bezier(.2,.8,.2,1);
}
.apri-menu__linee > span:nth-child(1) { top: 0; }
.apri-menu__linee > span:nth-child(2) { top: calc(50% - 0.75px); width: 64%; }
.apri-menu__linee > span:nth-child(3) { bottom: 0; }
.apri-menu:hover .apri-menu__linee > span:nth-child(2) { width: 100%; }
@media (max-width: 760px) { .menu, .testata__azioni .btn { display: none; } .apri-menu { display: inline-flex; } }
/* ===== Menu del telefono: una tendina di notte che si apre dal pulsante =====
   Cerchio che si allarga dal pulsante (clip-path), voci che salgono una alla
   volta, la pagina in cui sei segnata con un tratto di penna, e in fondo
   l'ultimo pensiero pubblicato. La testata resta sopra, in chiaro. */
.menu-mobile {
  position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column;
  padding: calc(var(--altezza-testata, 4.8rem) + 1.2rem) 0 calc(2rem + env(safe-area-inset-bottom));
  background: var(--notte); color: var(--carta); overflow-y: auto; overscroll-behavior: contain;
  clip-path: circle(0 at var(--mx, calc(100% - 2.6rem)) var(--my, 2.6rem));
  visibility: hidden;
  transition: clip-path 620ms cubic-bezier(.7,0,.25,1), visibility 0s linear 620ms;
}
.menu-mobile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(34rem 28rem at var(--mx, 88%) var(--my, 0%), rgba(208,139,62,0.2), rgba(208,139,62,0.05) 45%, transparent 70%);
}
html.menu-aperto .menu-mobile {
  clip-path: circle(150vmax at var(--mx, calc(100% - 2.6rem)) var(--my, 2.6rem)); visibility: visible;
  transition: clip-path 760ms cubic-bezier(.7,0,.25,1), visibility 0s;
}
@media (min-width: 761px) { .menu-mobile { display: none; } }
.menu-mobile__dentro { position: relative; display: flex; flex-direction: column; gap: 2.2rem; flex: 1; }
.menu-mobile__voci { display: flex; flex-direction: column; align-items: flex-start; }
.menu-mobile__voce {
  position: relative; display: block; overflow: hidden; padding: 0.2rem 0.2em 0.55rem 0; margin-right: -0.2em;
  font-family: var(--serif); font-weight: 300; font-size: clamp(2.5rem, 12vw, 3.6rem); line-height: 1.12;
  color: var(--carta); text-decoration: none;
}
.menu-mobile__voce > span { display: inline-block; transform: translateY(115%); transition: transform 520ms cubic-bezier(.7,0,.25,1); }
html.menu-aperto .menu-mobile__voce > span { transform: none; transition: transform 900ms cubic-bezier(.2,.8,.2,1) calc(260ms + var(--i, 0) * 85ms); }
.menu-mobile__voce[aria-current="page"] { font-style: italic; color: var(--ambra-viva); }
.menu-mobile__voce .tratto { left: 0; width: calc(100% - 0.2em); bottom: 0.18rem; height: 0.42rem; }
.menu-mobile__voce .tratto path { stroke-dashoffset: 1; transition: stroke-dashoffset 300ms ease; }
html.menu-aperto .menu-mobile__voce .tratto path { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms cubic-bezier(.6,0,.2,1) 820ms; }
.menu-mobile__voce:active > span { opacity: 0.65; }
.menu-mobile__ultimo, .menu-mobile .testata__scrivi { opacity: 0; transform: translateY(0.8rem); transition: opacity 300ms ease, transform 300ms ease; }
html.menu-aperto .menu-mobile__ultimo, html.menu-aperto .menu-mobile .testata__scrivi { opacity: 1; transform: none; transition: opacity 700ms ease 620ms, transform 900ms cubic-bezier(.2,.8,.2,1) 620ms; }
.menu-mobile__ultimo {
  display: grid; gap: 0.35rem; margin-top: auto; padding-top: 1.4rem; border-top: 1px solid rgba(251,248,243,0.16);
  color: var(--carta); text-decoration: none;
}
.menu-mobile__etichetta { font-family: var(--sans); font-size: 0.85rem; color: var(--ambra-viva); }
.menu-mobile__titolo { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.45rem; line-height: 1.25; }
.menu-mobile .testata__scrivi { align-self: flex-start; }
/* testata sopra la tendina: diventa trasparente, scritte e pulsante chiari */
html.menu-aperto { overflow: hidden; }
html.menu-aperto .testata { z-index: 60; background: transparent; border-bottom-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }
html.menu-aperto .testata .marchio { color: var(--carta); }
html.menu-aperto .apri-menu { color: var(--carta); border-color: rgba(251,248,243,0.3); }
html.menu-aperto .apri-menu__linee > span:nth-child(1) { transform: translateY(calc(0.4rem - 0.75px)) rotate(45deg); }
html.menu-aperto .apri-menu__linee > span:nth-child(2) { opacity: 0; width: 0; }
html.menu-aperto .apri-menu__linee > span:nth-child(3) { transform: translateY(calc(-0.4rem + 0.75px)) rotate(-45deg); }
.testata .marchio { transition: color 400ms ease; }

/* ===== Apertura (home) ===== */
.apertura { position: relative; overflow: hidden; isolation: isolate; background: var(--notte); color: var(--carta); }
.apertura > .container { position: relative; z-index: 1; }
/* la lampada: un alone caldo che su computer segue il mouse (script.js),
   sul telefono vaga piano da solo */
.apertura__luce {
  position: absolute; top: 0; left: 0; z-index: 0; width: 46rem; height: 46rem; margin: -23rem 0 0 -23rem; border-radius: 50%;
  pointer-events: none; background: radial-gradient(closest-side, rgba(208,139,62,0.22), rgba(208,139,62,0.07) 50%, transparent 72%);
  transform: translate3d(var(--lx, 72vw), var(--ly, 14rem), 0);
}
.apertura__griglia { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; padding-block: 5rem 5.5rem; }
.apertura h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); color: #fff; font-weight: 300; }
.apertura h1 em { font-style: italic; color: var(--ambra-viva); }
.apertura__testo { margin-top: 1.6rem; font-size: 1.12rem; color: rgba(251,248,243,0.78); max-width: 30rem; font-weight: 300; }
.apertura__azioni { display: flex; gap: 0.8rem; margin-top: 2.2rem; flex-wrap: wrap; }
.apertura__vetro { display: flex; justify-content: center; }
@media (max-width: 900px) {
  .apertura__griglia { grid-template-columns: 1fr; gap: 2.6rem; padding-block: 3rem 3.4rem; }
  .apertura__vetro { justify-content: center; }
}

/* ===== Copertina decorativa (composta via CSS, niente immagini) ===== */
.copertina {
  position: relative; aspect-ratio: 2 / 3; border-radius: var(--raggio);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.5rem 1.3rem; overflow: hidden; box-shadow: var(--ombra);
  color: #fff; text-decoration: none;
}
.copertina::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 22% 12%, rgba(255,255,255,0.22), transparent 58%); }
.copertina > * { position: relative; z-index: 1; }
.copertina__autrice { font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.82; }
.copertina__titolo { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.16; }
.copertina__riga { width: 2.2rem; height: 1px; background: rgba(255,255,255,0.55); margin-bottom: 0.7rem; }
.copertina--uno { background: linear-gradient(158deg, #2B3450, #141A28); }
/* Copertina con la foto di Luca: la foto riempie tutto, il nome sta in
   basso su una sfumatura scura (in alto nella foto c'e' neve chiara). */
.copertina--foto { justify-content: flex-end; padding: 0; background: var(--notte); }
.copertina picture { display: contents; }
.copertina .copertina__foto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.copertina--foto::after { background-image: linear-gradient(to top, rgba(14,17,26,0.82) 0%, rgba(14,17,26,0.3) 28%, transparent 50%), radial-gradient(circle at 22% 12%, rgba(255,255,255,0.12), transparent 58%); }
.copertina__didascalia { display: block; padding: 1.2rem 1.3rem 1.3rem; }
.copertina--foto .copertina__autrice { display: block; font-size: 0.66rem; opacity: 0.95; }
/* Larghezza fissa, non "quanto serve al titolo": con un titolo corto
   (es. "Pensieri") la copertina altrimenti si restringe. */
.copertina--grande { width: 17rem; max-width: 100%; box-shadow: var(--ombra-alta); }
@media (max-width: 900px) { .copertina--grande { width: min(16rem, 72vw); } }

/* ===== Sezioni ===== */
.sezione { padding-block: 4.4rem; }
.sezione--stretta { padding-block: 2.8rem; }
.sezione--carta { background: var(--carta-calda); }
.sezione--notte { background: var(--notte); color: var(--carta); }
.sezione--notte h2, .sezione--notte h3 { color: #fff; }
.sezione--calma { background: var(--calma-tenue); }
.sezione__testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.sezione__testa h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 300; }
.sezione__testa p { color: var(--inchiostro-morbido); margin-top: 0.6rem; max-width: 34rem; }

/* ===== Prosa ===== */
.prosa { max-width: var(--misura); }
.prosa p { margin-bottom: 1.3rem; color: var(--inchiostro-morbido); font-size: 1.06rem; line-height: 1.78; }
.prosa p:last-child { margin-bottom: 0; }
.prosa h2 { font-size: 1.7rem; font-weight: 400; margin: 2.6rem 0 1rem; }
.prosa h3 { font-size: 1.28rem; font-weight: 600; margin: 2.2rem 0 0.8rem; }
.prosa blockquote { margin: 2rem 0; padding-left: 1.4rem; border-left: 2px solid var(--ambra); font-style: italic; font-size: 1.12rem; color: var(--inchiostro); }
.prosa a { color: var(--ambra-testo); text-underline-offset: 3px; }

/* ===== Griglia "Chi sono": testo + vetrina laterale =====
   Su schermi stretti resta una sola colonna (la vetrina non compare,
   niente di nuovo da testare li'). Da 1100px in su la larghezza del
   testo NON cambia (resta leggibile, --misura fissa): quello che cambia
   e' che lo spazio libero a fianco, che su schermi grandi restava vuoto
   per meta' pagina, ospita la stessa copertina decorativa della home,
   agganciata (sticky) mentre si scorre la biografia. */
/* Sotto i 1100px la foto sta sopra il testo, centrata. */
.bio-griglia { display: flex; flex-direction: column; gap: 2.4rem; }
.bio-vetrina { display: flex; justify-content: center; order: -1; }
@media (min-width: 1100px) {
  .bio-griglia { display: grid; grid-template-columns: minmax(0, var(--misura)) 1fr; gap: 4.5rem; align-items: start; }
  .bio-vetrina { display: flex; justify-content: flex-start; position: sticky; top: 7rem; order: 0; }
}

/* ===== Moduli (pagina riservata /scrivi) ===== */
.modulo-box { background: var(--bianco); border: 1px solid var(--riga); border-radius: var(--raggio-g); padding: 1.8rem; }
@media (max-width: 640px) { .modulo-box { padding: 1.2rem; } }
.campo { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.campo label { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--inchiostro-morbido); }
.campo input {
  border: 1px solid var(--riga); border-radius: var(--raggio); padding: 0.8rem 0.95rem;
  background: var(--bianco); font-size: 1rem; color: var(--inchiostro); font-family: var(--sans);
}
.campo input:focus { outline: none; border-color: var(--calma); }

/* ===== Pensieri: elenco pubblico (ogni scheda porta alla sua pagina) ===== */
.pensieri-lista { display: flex; flex-direction: column; gap: 1.1rem; }
.pensiero-card {
  display: block; background: var(--bianco); border: 1px solid var(--riga); border-radius: var(--raggio-g);
  padding: 1.8rem 1.9rem; text-decoration: none; color: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
a.pensiero-card:hover { border-color: var(--ambra); box-shadow: var(--ombra); transform: translateY(-2px); }
@media (max-width: 640px) { .pensiero-card { padding: 1.3rem 1.2rem; } }
.pensiero-card__data { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inchiostro-tenue); }
.pensiero-card__titolo { font-size: 1.45rem; font-weight: 400; margin-top: 0.3rem; margin-bottom: 0.6rem; }
.pensiero-card__titolo > span {
  background: linear-gradient(var(--ambra), var(--ambra)) 0 100% / 0% 2px no-repeat; padding-bottom: 3px;
  transition: background-size 600ms cubic-bezier(.2,.8,.2,1);
}
a.pensiero-card:hover .pensiero-card__titolo > span, a.pensiero-card:focus-visible .pensiero-card__titolo > span { background-size: 100% 2px; }
.pensiero-card__corpo { color: var(--inchiostro-morbido); font-size: 1rem; line-height: 1.72; max-width: 46rem; }
.pensiero-card__leggi { display: inline-block; margin-top: 0.9rem; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--ambra-testo); }
.pensieri-vuoto { font-family: var(--sans); font-size: 0.95rem; color: var(--inchiostro-tenue); text-align: center; padding: 2rem 0; }
/* Le tre correnti dei pensieri (/pensieri): tre porte, una accanto all'altra */
.correnti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 820px) { .correnti { grid-template-columns: minmax(0, 1fr); } }
.corrente-porta {
  position: relative; display: flex; flex-direction: column; min-height: 17rem; overflow: hidden;
  background: var(--bianco); border: 1px solid var(--riga); border-radius: var(--raggio-g);
  padding: 1.8rem 1.7rem; text-decoration: none; color: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.corrente-porta:hover { border-color: var(--ambra); box-shadow: var(--ombra); transform: translateY(-3px); }
.corrente-porta__numero {
  font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 3.4rem; line-height: 1;
  color: var(--ambra); opacity: 0.55; transition: opacity 200ms ease;
}
.corrente-porta:hover .corrente-porta__numero { opacity: 1; }
.corrente-porta__nome { font-size: 1.9rem; font-weight: 400; margin-top: 1.1rem; }
.corrente-porta__nome > span {
  background: linear-gradient(var(--ambra), var(--ambra)) 0 100% / 0% 2px no-repeat; padding-bottom: 3px;
  transition: background-size 600ms cubic-bezier(.2,.8,.2,1);
}
.corrente-porta:hover .corrente-porta__nome > span, .corrente-porta:focus-visible .corrente-porta__nome > span { background-size: 100% 2px; }
.corrente-porta__quanti { margin-top: 0.5rem; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inchiostro-tenue); }
.corrente-porta__ultimo { margin-top: 1.1rem; color: var(--inchiostro-morbido); font-size: 1rem; line-height: 1.5; }
.corrente-porta__ultimo > span { display: block; font-family: var(--sans); font-size: 0.8rem; color: var(--inchiostro-tenue); }
.corrente-porta__entra { margin-top: auto; padding-top: 1.3rem; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--ambra-testo); }
@media (max-width: 820px) {
  .corrente-porta { min-height: 0; padding: 1.4rem 1.3rem; }
  .corrente-porta__numero { position: absolute; top: 1.2rem; right: 1.3rem; font-size: 2.6rem; }
  .corrente-porta__nome { margin-top: 0; padding-right: 3.2rem; }
}
.correnti__senza { margin-top: 3rem; }
/* in fondo a una corrente: le altre due */
.correnti-altre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.4rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--riga); font-family: var(--sans); font-size: 0.95rem; }
.correnti-altre > span { color: var(--inchiostro-tenue); }
.correnti-altre > a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ambra-testo); font-weight: 600; text-underline-offset: 3px; }
/* spazio gia' riservato alle schede che arrivano: la pagina sotto non salta */
.pensieri-lista--home { min-height: 15rem; }
.azioni { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.8rem; }

/* ===== Pagina del singolo pensiero ===== */
/* Colonna di lettura centrata, come la pagina di un libro: su schermi
   larghi un testo lungo tutto a sinistra lascia vuota meta' pagina. */
.articolo { padding-block: 3.2rem 4rem; }
.articolo > * { max-width: 38rem; margin-inline: auto; }
.articolo .prosa { max-width: 38rem; }
.articolo__testa { margin-bottom: 2.4rem; }
.articolo__testa h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); font-weight: 300; }
.articolo__data { margin-top: 0.8rem; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inchiostro-tenue); }
.articolo__corpo h2 { font-size: 1.55rem; margin-top: 2.8rem; }
.articolo__corpo h2:first-child { margin-top: 0; }
.articolo__ritorno { margin-top: 3rem; }

/* ===== Intestazione pagina =====
   La larghezza massima va sui figli, non sul blocco: il blocco resta
   largo come .container, cosi' il titolo si allinea a sinistra con il
   testo sotto anche sugli schermi larghi (nella demo restava centrato). */
.testa-pagina { padding-block: 3.2rem 1.4rem; }
.testa-pagina > * { max-width: 46rem; }
.testa-pagina h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); font-weight: 300; }
.testa-pagina p { margin-top: 1.1rem; color: var(--inchiostro-morbido); font-size: 1.08rem; }

/* ===== Richiamo finale ===== */
.richiamo { background: var(--notte); color: var(--carta); border-radius: var(--raggio-g); padding: 3.4rem 2.4rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.richiamo h2 { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 300; }
.richiamo p { color: rgba(251,248,243,0.75); max-width: 34rem; }

/* ===== Piede ===== */
.piede { border-top: 1px solid var(--riga); padding-block: 3rem 2.2rem; margin-top: 1rem; }
.piede__griglia { display: grid; grid-template-columns: 2fr 1fr; gap: 2.2rem; }
.piede__titolo { font-family: var(--sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inchiostro-tenue); margin-bottom: 1rem; }
.piede__col a { display: block; font-family: var(--sans); font-size: 0.88rem; text-decoration: none; color: var(--inchiostro-morbido); padding: 0.32rem 0; }
.piede__col a:hover { color: var(--inchiostro); }
.piede__intro { font-size: 0.97rem; color: var(--inchiostro-morbido); margin-top: 0.9rem; max-width: 20rem; }
.piede__basso { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--riga); display: flex; justify-content: space-between; gap: 0.7rem; flex-wrap: wrap; font-family: var(--sans); font-size: 0.86rem; color: var(--inchiostro-tenue); align-items: center; }
.piede__riservata { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.4rem; margin-inline-end: -0.4rem; }
.piede__riservata:hover { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; }
/* Pulsante "Scrivi" in testata: lo aggiunge script.js solo se chi guarda
   ha gia' fatto l'accesso (cioe' Luca, sul suo dispositivo). */
.testata__scrivi { white-space: nowrap; }
/* Con "Scrivi" in piu', sugli schermi stretti "Leggi le riflessioni" non ci
   sta e la testata andrebbe a capo: lo toglie (nel menu c'e' gia' "Riflessioni"). */
@media (max-width: 860px) { .testata__azioni:has(.testata__scrivi) .btn--linea { display: none; } }
@media (max-width: 700px) { .piede__griglia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .piede__col a { display: flex; align-items: center; min-height: 2.75rem; padding: 0; font-size: 0.95rem; }
  .piede__col a.marchio { display: inline-block; min-height: 0; padding-block: 0.8rem; }
}

/* finestra: una frase di Luca */
.frase { background: var(--calma-tenue); }
.frase__dentro { padding-block: clamp(3.4rem, 8vw, 5.6rem); }
.frase__citazione { margin: 1.2rem 0 0; max-width: 52rem; }
.frase__citazione p {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.75rem, 4.4vw, 2.9rem); line-height: 1.25;
  color: var(--inchiostro); text-wrap: balance;
}
.frase__citazione p::before { content: "“"; color: var(--ambra); margin-inline-end: 0.04em; }
.frase__citazione p::after { content: "”"; color: var(--ambra); }
.frase__fonte { margin-top: 1.4rem; font-family: var(--sans); font-size: 0.95rem; color: var(--calma-scura); }
.frase__fonte a { color: inherit; text-underline-offset: 3px; }
.frase__fonte a:hover { color: var(--inchiostro); }

/* finestra: il romanzo */
.libro { background: var(--carta-calda); }
.libro__griglia { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.4rem, 6vw, 5rem); align-items: center; padding-block: clamp(3.6rem, 8vw, 6rem); }
.libro__copertina { justify-self: center; width: min(17rem, 100%); display: block; perspective: 60rem; }
.libro__copertina img {
  width: 100%; height: auto; display: block; border-radius: 2px 5px 5px 2px;
  box-shadow: inset 4px 0 6px -4px rgba(0,0,0,0.35), 0 2px 4px rgba(22,24,30,0.12), 0 28px 50px -22px rgba(22,24,30,0.55);
  transform: rotateY(-8deg) rotateX(2deg); transform-origin: left center;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), box-shadow 600ms ease;
}
.libro__copertina:hover img, .libro__copertina:focus-visible img { transform: rotateY(0deg); box-shadow: 0 2px 4px rgba(22,24,30,0.12), 0 34px 60px -24px rgba(22,24,30,0.6); }
.libro__testo h2 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 300; margin-top: 0.7rem; text-wrap: balance; }
.libro__dati { margin-top: 0.7rem; font-family: var(--sans); font-size: 0.9rem; color: var(--inchiostro-tenue); }
.libro__apertura { margin-top: 1.6rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.4rem); line-height: 1.45; color: var(--inchiostro); max-width: 34rem; }
.libro__quarta { margin-top: 1rem; max-width: 34rem; color: var(--inchiostro-morbido); }
.libro__nota { margin-top: 0.6rem; font-family: var(--sans); font-size: 0.82rem; color: var(--inchiostro-tenue); }
.libro__azioni { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.8rem; }
@media (max-width: 760px) {
  .libro__griglia { grid-template-columns: 1fr; }
  .libro__copertina { width: min(13rem, 62vw); }
  .libro__azioni .btn { flex: 1 1 auto; }
}
@media (max-width: 460px) { .piede__griglia { grid-template-columns: 1fr; gap: 1.8rem; } }
.libro__testo h2 a { color: inherit; text-decoration: none; }
.libro__testo h2 a:hover { color: var(--ambra-testo); }
.libro__nota a { color: var(--ambra-testo); text-underline-offset: 3px; display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem; }

/* pagina del romanzo (/la-lunga-adolescenza-di-luca): stessa finestra della
   home in alto, poi la quarta di copertina intera e la scheda del libro */
.libro--pagina .libro__testo h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); font-weight: 300; margin-top: 0.7rem; text-wrap: balance; }
.romanzo-griglia { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: clamp(2.4rem, 6vw, 5rem); align-items: start; }
@media (max-width: 900px) { .romanzo-griglia { grid-template-columns: minmax(0, 1fr); } }
.romanzo__titolo { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 300; margin-bottom: 1.2rem; }
.romanzo__quarta { max-width: var(--misura); }
.romanzo__quarta > p:first-child::first-letter { float: left; font-size: 3.4em; line-height: 0.82; margin: 0.08em 0.1em 0 0; color: var(--ambra); font-weight: 300; }
.romanzo__lato { background: var(--bianco); border: 1px solid var(--riga); border-radius: var(--raggio-g); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--ombra); }
.romanzo__dati { margin: 0; font-family: var(--sans); font-size: 0.95rem; }
.romanzo__dati > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px dotted #CFC6B6; }
.romanzo__dati dt { color: var(--inchiostro-tenue); }
.romanzo__dati dd { margin: 0; text-align: right; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.romanzo__dati a { color: var(--ambra-testo); }
.romanzo__foto { margin: 1.8rem 0 0; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.romanzo__foto .copertina--grande { width: min(15rem, 100%); }
.romanzo__foto figcaption { font-family: var(--sans); font-size: 0.85rem; color: var(--inchiostro-tenue); }

/* il percorso sopra il titolo di un pensiero o di uno scritto e la firma */
.occhiello--link { display: inline-block; text-decoration: none; padding-block: 0.7rem; margin-block: -0.7rem 0.2rem; }
.occhiello--link:hover { color: var(--calma-scura); text-decoration: underline; text-underline-offset: 3px; }
.articolo__data a { color: inherit; text-underline-offset: 3px; }
.articolo__data a:hover { color: var(--inchiostro); }

/* finestra: gli scritti. L'ultimo scritto e' un libro aperto sotto la
   lampada, nella notte: a sinistra titolo e inizio, a destra l'indice (le
   voci usano le classi di .opera__indice). Lo riempie script.js. */
.scritti-home { position: relative; overflow: hidden; isolation: isolate; background: var(--notte); color: var(--carta); }
.scritti-home::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 11rem; width: min(70rem, 150vw); aspect-ratio: 1.5; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(208,139,62,0.34), rgba(208,139,62,0.1) 52%, transparent 74%); pointer-events: none;
}
.scritti-home__dentro { padding-block: clamp(3.6rem, 8vw, 6rem); }
.scritti-home__testa { text-align: center; max-width: 38rem; margin: 0 auto clamp(2.4rem, 5vw, 3.4rem); }
.scritti-home__testa h2 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 300; margin-top: 0.7rem; }
.scritti-home__testa h2 em { font-style: italic; color: var(--ambra-viva); }
.scritti-home__testa p { margin: 1.1rem auto 0; color: rgba(251,248,243,0.78); font-weight: 300; font-size: 1.08rem; max-width: 32rem; }
.scritti-home__testa :focus-visible, .scritti-home__piede :focus-visible { outline-color: var(--ambra-viva); }
.scritti-home__libro { max-width: 64rem; margin: 0 auto; min-height: 24rem; }
.scritti-home__libro > .pensieri-vuoto { color: rgba(251,248,243,0.7); text-align: center; padding-top: 4rem; }
.scritti-home__piede { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; margin-top: clamp(2.2rem, 5vw, 3rem); text-align: center; }
.scritti-home__altri { font-family: var(--serif); font-size: 1.05rem; color: rgba(251,248,243,0.78); max-width: 40rem; }
.scritti-home__altri-titolo { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ambra-viva); margin-inline-end: 0.3rem; }
.scritti-home__altri a { color: #fff; font-style: italic; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-block: 0.6rem; }
.scritti-home__altri a:hover { color: var(--ambra-viva); }

.libro-aperto { position: relative; display: grid; grid-template-columns: 1fr 1fr; perspective: 90rem; }
/* l'ombra del libro sul tavolo */
.libro-aperto::after { content: ""; position: absolute; z-index: -1; inset: 6% 3% -4%; border-radius: 50%; background: rgba(6,8,14,0.55); filter: blur(2.4rem); }
.libro-aperto--senza-indice { grid-template-columns: minmax(0, 36rem); justify-content: center; }
.libro-aperto__pagina {
  position: relative; color: var(--inchiostro); padding: clamp(1.8rem, 4vw, 3.2rem) clamp(1.5rem, 3.6vw, 3rem);
  transition: transform 120ms linear;
}
/* la carta piu' scura verso il dorso, come in un libro vero */
.libro-aperto__pagina--sx {
  border-radius: var(--raggio-g) 0 0 var(--raggio-g); transform-origin: 100% 50%;
  background: linear-gradient(to right, #F7F2E9 0%, var(--carta) 55%, #EDE5D7 92%, #DCD1BF 100%);
  display: flex; flex-direction: column; align-items: flex-start;
}
.libro-aperto__pagina--dx {
  border-radius: 0 var(--raggio-g) var(--raggio-g) 0; transform-origin: 0% 50%;
  background: linear-gradient(to left, #F7F2E9 0%, var(--carta) 55%, #EDE5D7 92%, #DCD1BF 100%);
}
.libro-aperto--senza-indice .libro-aperto__pagina--sx { border-radius: var(--raggio-g); background: var(--carta); }
.libro-aperto__titolo { font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 300; line-height: 1.12; margin: 0.6rem 0 1.2rem; text-wrap: balance; }
.libro-aperto__titolo a { color: inherit; text-decoration: none; }
.libro-aperto__titolo a > span {
  background: linear-gradient(var(--ambra), var(--ambra)) 0 100% / 0% 2px no-repeat; padding-bottom: 3px;
  transition: background-size 600ms cubic-bezier(.2,.8,.2,1);
}
.libro-aperto__titolo a:hover > span, .libro-aperto__titolo a:focus-visible > span { background-size: 100% 2px; }
.libro-aperto__estratto { font-family: var(--serif); font-size: 1.08rem; line-height: 1.7; color: var(--inchiostro-morbido); }
.libro-aperto__estratto::first-letter { float: left; font-size: 3.4em; line-height: 0.82; margin: 0.08em 0.1em 0 0; color: var(--ambra); font-weight: 300; }
.libro-aperto__azioni { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: auto; padding-top: 1.8rem; }
.libro-aperto__link { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; color: var(--ambra-testo); text-underline-offset: 3px; padding-block: 0.8rem; }
.libro-aperto__indice-titolo { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ambra-testo); margin-bottom: 0.6rem; }
.libro-aperto .opera__indice a { min-height: 44px; }
.libro-aperto .opera__indice li.letta .opera__nome { color: var(--inchiostro-tenue); }
.libro-aperto__qui { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; color: var(--ambra-testo); white-space: nowrap; }
.libro-aperto__ancora a { justify-content: flex-end; font-family: var(--serif); font-style: italic; color: var(--inchiostro-tenue); }
.libro-aperto__ancora a:hover { color: var(--ambra-testo); }
/* il segnalibro: un nastro che esce dall'alto della pagina */
.libro-aperto__segnalibro {
  position: absolute; top: -0.5rem; right: clamp(1.4rem, 3vw, 2.4rem); width: 1.1rem; height: 4.4rem;
  background: linear-gradient(to right, #A55F1E, var(--ambra-viva) 55%, #B76E28);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
@media (max-width: 820px) {
  .libro-aperto { grid-template-columns: minmax(0, 1fr); }
  .libro-aperto__pagina--sx { border-radius: var(--raggio-g) var(--raggio-g) 0 0; background: linear-gradient(to bottom, #F7F2E9, var(--carta) 70%, #E9E0D0); }
  .libro-aperto__pagina--dx { border-radius: 0 0 var(--raggio-g) var(--raggio-g); background: linear-gradient(to top, #F7F2E9, var(--carta) 70%, #E9E0D0); }
  .libro-aperto__segnalibro { top: -1.6rem; }
  .libro-aperto__azioni .btn { flex: 1 1 auto; }
}

/* ===== La scrivania di Luca (/scrivi) =====
   Pensata per chi non e' pratico di computer: pulsanti grandi con la
   parola scritta, il testo si vede gia' come sara' pubblicato, ogni
   azione conferma con parole semplici cosa e' successo. */
.scrivania { padding-block: 2.6rem 5rem; }
.scrivania > #caricamento { padding-block: 5rem; }

/* accesso */
.accesso { max-width: 27rem; margin: 3rem auto 2rem; background: var(--bianco); border: 1px solid var(--riga); border-radius: var(--raggio-g); padding: 2.4rem 2.2rem; box-shadow: var(--ombra); }
.accesso__titolo { font-size: clamp(2.2rem, 5vw, 2.8rem); font-weight: 300; }
.accesso__sotto { color: var(--inchiostro-morbido); margin: 0.6rem 0 1.6rem; }
.accesso__nota { font-family: var(--sans); font-size: 0.8rem; color: var(--inchiostro-tenue); margin-top: 1rem; line-height: 1.5; }
.accesso .btn--largo { margin-top: 0.4rem; }
.campo-password { position: relative; display: flex; }
.campo-password input { flex: 1; padding-right: 6rem; }
.campo-password__mostra {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--calma-scura);
  background: var(--calma-tenue); border: none; border-radius: var(--raggio); padding: 0 0.9rem; min-height: 2.5rem; min-width: 4.5rem;
}
@media (max-width: 640px) { .accesso { padding: 1.8rem 1.3rem; margin-top: 1.5rem; } }

/* testa della scrivania */
.scrivania__testa { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.scrivania__saluto { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 300; }
.scrivania__riepilogo { color: var(--inchiostro-morbido); margin-top: 0.5rem; font-size: 1.05rem; }
.scrivania__azioni { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* guida */
.guida { background: var(--calma-tenue); border-radius: var(--raggio-g); padding: 0.2rem 1.3rem; margin-bottom: 1.6rem; font-family: var(--sans); }
.guida summary { cursor: pointer; padding: 0.9rem 0; font-weight: 600; color: var(--calma-scura); list-style: none; }
.guida summary::-webkit-details-marker { display: none; }
.guida summary::before { content: "+"; display: inline-block; width: 1.4rem; font-weight: 700; transition: transform 200ms ease; }
.guida[open] summary::before { transform: rotate(45deg); }
.guida__passi { margin: 0 0 1.1rem; padding-left: 1.4rem; display: grid; gap: 0.6rem; color: var(--inchiostro-morbido); font-size: 0.95rem; line-height: 1.6; }
.guida__passi strong { color: var(--inchiostro); }

/* carica un file Word o PDF */
.importa {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem 1.4rem; flex-wrap: wrap;
  border: 1.5px dashed var(--riga); border-radius: var(--raggio-g); padding: 1rem 1.3rem; margin-bottom: 1.2rem;
  font-family: var(--sans); background: var(--carta); transition: border-color 150ms ease, background 150ms ease;
}
.importa__testo { display: grid; gap: 0.15rem; flex: 1 1 18rem; }
.importa__testo strong { color: var(--inchiostro); font-weight: 600; }
.importa__testo span { color: var(--inchiostro-morbido); font-size: 0.92rem; }
.importa__pulsante { flex: 0 0 auto; }
.importa__pulsante:disabled { opacity: 0.75; cursor: progress; }
.importa__esito { flex-basis: 100%; font-size: 0.95rem; line-height: 1.55; }
.importa__esito:empty { display: none; }
.importa__esito--ok { color: var(--calma-scura); }
.importa__esito--errore { color: #A1401F; }
.foglio--trascina .importa, .importa:hover { border-color: var(--calma); }
.foglio--trascina .importa { background: var(--calma-tenue); }
@media (max-width: 640px) { .importa__pulsante { width: 100%; } }

/* il foglio */
.foglio { position: relative; }
.barra {
  position: sticky; top: var(--altezza-testata, 4.8rem); z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  background: rgba(251,248,243,0.94); backdrop-filter: blur(8px); padding: 0.7rem 0; border-bottom: 1px solid var(--riga);
}
.barra__modalita { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inchiostro-tenue); }
.foglio--modifica .barra__modalita { color: var(--ambra-testo); }
.barra__pulsanti { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.barra button {
  font-family: var(--sans); font-size: 0.92rem; padding: 0.6rem 1rem; min-height: 2.75rem;
  border: 1px solid var(--riga); border-radius: var(--raggio); background: var(--bianco); color: var(--inchiostro);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.barra button:hover { border-color: var(--calma); }
.barra button.attivo { background: var(--calma); border-color: var(--calma); color: #fff; }
.foglio__carta {
  background: var(--bianco); border: 1px solid var(--riga); border-radius: var(--raggio-g); margin-top: 1.2rem;
  padding: clamp(1.6rem, 5vw, 3.4rem) clamp(1.2rem, 6vw, 4rem); box-shadow: var(--ombra);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.foglio__carta:focus-within { border-color: var(--ambra-tenue); box-shadow: 0 1px 2px rgba(22,24,30,0.05), 0 18px 40px -18px rgba(183,110,40,0.35); }
.foglio__carta > * { max-width: 38rem; margin-inline: auto; }
.foglio__titolo {
  display: block; width: 100%; border: none; background: transparent; padding: 0; margin-bottom: 1.4rem;
  font-family: var(--serif); font-size: clamp(1.9rem, 4.2vw, 2.8rem); font-weight: 300; color: var(--inchiostro); line-height: 1.2;
}
.foglio__titolo::placeholder { color: var(--inchiostro-tenue); opacity: 0.7; }
.foglio__titolo:focus { outline: none; }
.foglio__testo { min-height: 18rem; outline: none; overflow-wrap: anywhere; font-size: 1.1rem; line-height: 1.8; }
.foglio__testo:empty::before { content: "Scrivi qui, oppure incolla da Word o da un PDF."; color: var(--inchiostro-tenue); }
.foglio__testo p { margin-bottom: 1.2rem; color: var(--inchiostro); }
.foglio__testo h2 { font-size: 1.5rem; margin: 2rem 0 0.8rem; }
.foglio__testo h2:first-child { margin-top: 0; }
.foglio__piede { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.8rem; font-family: var(--sans); font-size: 0.85rem; color: var(--inchiostro-tenue); }
.stato-bozza { color: var(--calma-scura); }
.azioni-editor { display: flex; justify-content: flex-end; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.azioni-editor #pubblica { min-width: 9rem; }
@media (max-width: 640px) {
  .barra__modalita { width: 100%; }
  /* "Pubblica" sempre a portata di pollice */
  .azioni-editor {
    position: sticky; bottom: 0; z-index: 20; margin-inline: -1.15rem; padding: 0.8rem 1.15rem calc(0.8rem + env(safe-area-inset-bottom));
    background: rgba(251,248,243,0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--riga);
  }
  .azioni-editor .btn { flex: 1; }
}

.messaggio { font-family: var(--sans); font-size: 0.95rem; margin-top: 1rem; }
.messaggio:empty { display: none; }
.messaggio--ok { color: var(--calma-scura); }
.messaggio--errore { color: #A1401F; }
.messaggio a { color: inherit; font-weight: 600; }

/* pubblicato! */
.fatto {
  text-align: center; background: var(--notte); color: var(--carta); border-radius: var(--raggio-g);
  padding: clamp(2.4rem, 6vw, 4rem) 1.6rem; margin-top: 1.2rem; outline: none;
  animation: fatto-entra 500ms cubic-bezier(.2,.8,.2,1) both;
}
.fatto__segno {
  display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: var(--ambra); color: #fff; font-size: 1.7rem; font-family: var(--sans); margin-bottom: 1.2rem;
  animation: fatto-segno 700ms 150ms cubic-bezier(.2,1.4,.4,1) both;
}
.fatto__titolo { color: #fff; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 300; }
.fatto__testo { color: rgba(251,248,243,0.78); margin: 0.6rem auto 1.8rem; max-width: 32rem; }
.fatto__azioni { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; }
.fatto .btn--linea { color: #fff; border-color: rgba(255,255,255,0.35); }
.fatto .btn--linea:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.link-pulsante { margin-top: 1.6rem; background: none; border: none; font-family: var(--sans); font-size: 0.92rem; color: var(--ambra-viva); text-decoration: underline; text-underline-offset: 4px; }
@keyframes fatto-entra { from { opacity: 0; transform: translateY(1rem) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fatto-segno { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }

/* i suoi pensieri */
.miei { margin-top: 3.4rem; }
.miei__titolo { font-size: 1.8rem; font-weight: 300; margin-bottom: 1.2rem; }
.miei-pensieri { display: flex; flex-direction: column; gap: 0.9rem; }
.mio-pensiero {
  display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  background: var(--bianco); border: 1px solid var(--riga); border-radius: var(--raggio-g); padding: 1.3rem 1.5rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.mio-pensiero:hover { border-color: var(--ambra-tenue); box-shadow: var(--ombra); }
.mio-pensiero__testo { flex: 1 1 20rem; min-width: 0; }
.mio-pensiero .pensiero-card__data { margin-right: 0.6rem; }
.mio-pensiero__letture { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--calma-tenue); color: var(--calma-scura); font-family: var(--sans); font-size: 0.78rem; font-weight: 600; vertical-align: 0.05em; white-space: nowrap; }
.mio-pensiero__titolo { font-size: 1.3rem; margin: 0.25rem 0 0.35rem; }
.mio-pensiero__estratto { color: var(--inchiostro-morbido); font-size: 0.95rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mio-pensiero__azioni { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mio-pensiero__azioni .btn { padding: 0.6rem 1.05rem; font-size: 0.85rem; }
/* i pensieri divisi per corrente: un riquadro per corrente, una riga per pensiero */
.miei__aiuto { max-width: 46rem; margin: -0.4rem 0 1.3rem; font-family: var(--sans); font-size: 0.95rem; line-height: 1.55; color: var(--inchiostro-morbido); }
.gruppo { background: var(--bianco); border: 1px solid var(--riga); border-radius: var(--raggio-g); overflow: hidden; }
.gruppo--senza { border-color: var(--ambra); }
.gruppo__testa {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; cursor: pointer; list-style: none;
  background: var(--carta-calda);
}
.gruppo__testa::-webkit-details-marker { display: none; }
.gruppo__testa:focus-visible { outline: 2px solid var(--calma); outline-offset: -2px; }
.gruppo__nome { font-size: 1.4rem; font-weight: 400; }
.gruppo__nome::before { content: "▸"; display: inline-block; width: 1.3rem; font-size: 0.9rem; color: var(--ambra-testo); transition: transform 160ms ease; }
.gruppo[open] .gruppo__nome::before { transform: rotate(90deg); }
.gruppo__quanti { flex: none; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inchiostro-tenue); }
.gruppo__vuoto { padding: 1rem 1.3rem; border-top: 1px solid var(--riga); font-family: var(--sans); font-size: 0.92rem; color: var(--inchiostro-tenue); }
.mio-pensiero--riga { gap: 0.2rem 0.6rem; padding: 0.45rem 0.9rem 0.45rem 0.4rem; border: none; border-top: 1px solid var(--riga); border-radius: 0; }
.mio-pensiero--riga:hover { box-shadow: none; background: var(--carta); }
.mio-pensiero--riga:has([data-scegli]:checked) { background: #FCF4EA; }
.mio-pensiero__scegli { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; cursor: pointer; }
.mio-pensiero__scegli input { width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--ambra-testo); cursor: pointer; }
.mio-pensiero--riga .mio-pensiero__testo { flex: 1 1 14rem; }
.mio-pensiero--riga .mio-pensiero__titolo { font-family: var(--serif); font-size: 1.12rem; font-weight: 400; margin: 0 0 0.1rem; }
.mio-pensiero--riga .mio-pensiero__azioni { gap: 0; }
.mio-pensiero--riga .mio-pensiero__azioni .btn { padding: 0.6rem 0.7rem; border-color: transparent; background: none; font-weight: 500; }
.mio-pensiero--riga .mio-pensiero__azioni .btn:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .mio-pensiero--riga .mio-pensiero__azioni { width: 100%; padding-left: 2.85rem; margin-top: -0.3rem; flex-wrap: nowrap; }
  .mio-pensiero--riga .mio-pensiero__azioni .btn { padding-inline: 0.5rem; white-space: nowrap; }
}
/* barra "Sposta": compare in basso quando Luca mette almeno una spunta */
.sposta {
  position: fixed; left: 50%; bottom: 1.2rem; z-index: 55; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 0.6rem 1.2rem; flex-wrap: wrap;
  width: max-content; max-width: calc(100% - 1.6rem); padding: 0.8rem 1.1rem 0.8rem 1.4rem; border-radius: var(--raggio-g);
  background: var(--notte); color: var(--carta); font-family: var(--sans); box-shadow: var(--ombra-alta);
}
.sposta__testo { font-size: 0.95rem; }
.sposta__scelte { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.sposta__scelte .btn { padding: 0.6rem 1.05rem; font-size: 0.9rem; }
.sposta__annulla { min-height: 2.75rem; padding: 0 0.7rem; border: none; background: none; color: rgba(251,248,243,0.8); font: inherit; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sposta__annulla:hover { color: #fff; }
@media (max-width: 640px) {
  .sposta { left: 0; right: 0; bottom: 0; transform: none; width: auto; max-width: none; border-radius: 0; padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom)); }
}
.btn--pericolo { color: #A1401F; }
.btn--pericolo:hover { border-color: #A1401F; }
.btn--pericolo-pieno { background: #A1401F; color: #fff; }
.btn--pericolo-pieno:hover { background: #86341A; }

/* finestre (conferma eliminazione, anteprima) */
.dialogo { border: none; border-radius: var(--raggio-g); padding: 2rem 1.8rem; max-width: 30rem; width: calc(100% - 2rem); box-shadow: var(--ombra-alta); background: var(--bianco); color: var(--inchiostro); }
.dialogo::backdrop { background: rgba(26,32,48,0.55); backdrop-filter: blur(3px); }
.dialogo[open] { animation: fatto-entra 260ms ease both; }
.dialogo__titolo { font-size: 1.6rem; font-weight: 400; }
.dialogo__testo { color: var(--inchiostro-morbido); margin: 0.7rem 0 1.6rem; }
.dialogo__azioni { display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.dialogo--anteprima { max-width: 56rem; padding: 0; background: var(--carta); }
.dialogo__barra {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 1.4rem; background: var(--notte); color: var(--carta); font-family: var(--sans); font-size: 0.88rem;
}
.articolo--anteprima { padding: 2.4rem 1.4rem 3rem; }

/* avviso a comparsa ("Link copiato") */
.avviso {
  position: fixed; left: 50%; bottom: 1.6rem; z-index: 60; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  background: var(--notte); color: var(--carta); font-family: var(--sans); font-size: 0.92rem; padding: 0.8rem 1.3rem; border-radius: 999px;
  box-shadow: var(--ombra-alta); transition: opacity 220ms ease, transform 220ms ease; max-width: calc(100% - 2rem); text-align: center;
}
.avviso--visibile { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) { .avviso { bottom: 6rem; } }

/* ===== Pagina del pensiero: condividi, altri pensieri, capolettera ===== */
.articolo__corpo > p:first-of-type::first-letter {
  float: left; font-size: 3.7em; line-height: 0.82; font-weight: 300; color: var(--ambra);
  padding: 0.06em 0.1em 0 0;
}
.condividi { margin-top: 3.4rem; padding-top: 2rem; border-top: 1px solid var(--riga); }
.condividi__titolo { font-family: var(--serif); font-style: italic; font-size: 1.25rem; margin-bottom: 1rem; color: var(--inchiostro); }
.condividi__azioni { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.altri { padding-block: 1rem 4.4rem; }
.altri > * { max-width: 38rem; margin-inline: auto; }
.altri__titolo { font-size: 1.7rem; font-weight: 300; margin-bottom: 1.2rem; }

/* barra di lettura: quanto manca alla fine del pensiero */
.barra-lettura {
  position: fixed; top: 0; left: 0; z-index: 50; width: 100%; height: 3px; background: var(--ambra);
  transform-origin: 0 50%; transform: scaleX(var(--letto, 0)); pointer-events: none;
}

/* ===== Scritti: testi lunghi a capitoli =====
   L'elenco e' fatto come l'indice di un libro (capitoli con i puntini che
   portano ai minuti di ognuno); la pagina di lettura ha l'indice che segue
   chi legge: di lato sul computer, in un foglio che sale dal basso sul
   telefono. Il filo a sinistra dell'indice si riempie d'inchiostro man mano
   che si legge. */
.opere { display: grid; gap: 1.6rem; }
.opera {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.8rem, 5vw, 4rem); align-items: start;
  background: var(--bianco); border: 1px solid var(--riga); border-radius: var(--raggio-g);
  padding: clamp(1.5rem, 4vw, 2.8rem); box-shadow: var(--ombra);
}
.opere--strette .opera, .opera:not(:has(.opera__indice)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 820px) { .opera { grid-template-columns: minmax(0, 1fr); } }
.opera__titolo { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 300; margin: 0.35rem 0 1rem; }
.opere--strette .opera__titolo { font-size: 1.6rem; }
.opera__titolo a { color: inherit; text-decoration: none; }
.opera__titolo a > span {
  background: linear-gradient(var(--ambra), var(--ambra)) 0 100% / 0% 2px no-repeat; padding-bottom: 3px;
  transition: background-size 600ms cubic-bezier(.2,.8,.2,1);
}
.opera__titolo a:hover > span, .opera__titolo a:focus-visible > span { background-size: 100% 2px; }
.opera__estratto { color: var(--inchiostro-morbido); font-size: 1rem; line-height: 1.72; }
.opera__leggi { margin-top: 1.6rem; }
.opera__indice { list-style: none; margin: 0; padding: 0; display: grid; }
.opera__indice a { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.55rem 0; color: var(--inchiostro); text-decoration: none; }
.opera__num { flex: 0 0 2.1rem; font-family: var(--serif); font-style: italic; color: var(--ambra-testo); }
.opera__nome { font-family: var(--serif); font-size: 1.02rem; line-height: 1.38; transition: color 160ms ease; }
.opera__puntini {
  flex: 1 1 2rem; min-width: 2rem; align-self: flex-end; margin-bottom: 0.42em;
  border-bottom: 2px dotted #CFC6B6; transform-origin: 0 50%;
}
.opera__min { flex: none; align-self: flex-end; font-family: var(--sans); font-size: 0.8rem; color: var(--inchiostro-tenue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.opera__indice a:hover .opera__nome, .opera__indice a:focus-visible .opera__nome { color: var(--ambra-testo); }
.opera__indice a:hover .opera__puntini { border-bottom-color: var(--ambra); }
/* scorrendo, i capitoli entrano uno alla volta e i puntini si tracciano */
.opera__indice > li.rivela .opera__puntini { transform: scaleX(0); transition: transform 900ms cubic-bezier(.6,0,.2,1) 250ms; }
.opera__indice > li.rivela.visibile .opera__puntini { transform: none; }

/* pagina di lettura */
.scritto { --indice: 15rem; --spazio: clamp(3rem, 5.5vw, 5rem); padding-block: 3.2rem 4rem; }
.scritto > * { max-width: 38rem; margin-inline: auto; }
.scritto__testa { margin-bottom: 3rem; }
.scritto__testa h1 { font-size: clamp(2.3rem, 5.4vw, 3.6rem); font-weight: 300; }
.scritto__inizio { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.8rem; }
.scritto__griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
.scritto__corpo { max-width: 38rem; }
.scritto__premessa { margin-bottom: 3.5rem; }
.capitolo { scroll-margin-top: calc(var(--altezza-testata, 4.8rem) + 1rem); }
.capitolo + .capitolo { margin-top: 4.6rem; }
.capitolo__testa { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 2.2rem; }
.capitolo__numero { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(3rem, 8vw, 4.4rem); line-height: 1; color: var(--ambra); }
.scritto__corpo .capitolo__testa h2 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); font-weight: 300; line-height: 1.2; margin: 0.7rem 0 0; color: var(--inchiostro); }
.capitolo__tratto { width: 6.5rem; height: 0.8rem; margin-top: 1rem; overflow: visible; }
.capitolo__tratto path { fill: none; stroke: var(--ambra); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.capitolo__testa.rivela .capitolo__tratto path { stroke-dashoffset: 1; transition: stroke-dashoffset 1300ms cubic-bezier(.6,0,.2,1) 350ms; }
.capitolo__testa.rivela.visibile .capitolo__tratto path { stroke-dashoffset: 0; }
.capitolo__testa + p::first-letter, .scritto__premessa > p:first-child::first-letter {
  float: left; font-size: 3.7em; line-height: 0.82; font-weight: 300; color: var(--ambra); padding: 0.06em 0.1em 0 0;
}

/* l'indice (senza script, o sul telefono prima che lo script lo prenda:
   un riquadro sopra il testo) */
.indice { font-family: var(--sans); background: var(--carta-calda); border-radius: var(--raggio-g); padding: 1.3rem 1.3rem 1.1rem; }
.indice__titolo { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ambra-testo); margin-bottom: 0.8rem; }
.indice__voci { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--riga); }
.indice__voce {
  position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.2rem; padding: 0.5rem 0.3rem 0.5rem 0.9rem;
  font-size: 0.9rem; line-height: 1.35; color: var(--inchiostro-morbido); text-decoration: none; transition: color 200ms ease;
}
.indice__voce::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--ambra);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform 200ms linear, opacity 300ms ease;
}
.indice__voce.letta::before { transform: none; opacity: 0.35; }
.indice__voce[aria-current="true"] { color: var(--inchiostro); }
.indice__voce[aria-current="true"]::before { transform: scaleY(var(--letto, 0)); opacity: 1; }
.indice__voce:hover { color: var(--inchiostro); }
.indice__num { font-family: var(--serif); font-style: italic; color: var(--ambra-testo); grid-row: span 2; }
.indice__min { grid-column: 2; font-size: 0.75rem; color: var(--inchiostro-tenue); font-variant-numeric: tabular-nums; }
.indice__resto { margin-top: 0.9rem; font-size: 0.8rem; color: var(--inchiostro-tenue); }
.indice__resto:empty { display: none; }

@media (min-width: 1080px) {
  .scritto--capitoli > :not(.scritto__griglia) { max-width: calc(var(--indice) + var(--spazio) + 38rem); padding-left: calc(var(--indice) + var(--spazio)); }
  .scritto--capitoli .scritto__griglia { max-width: calc(var(--indice) + var(--spazio) + 38rem); grid-template-columns: var(--indice) minmax(0, 38rem); gap: var(--spazio); }
  .scritto--capitoli .scritto__testa { margin-bottom: 3.6rem; }
  .indice {
    position: sticky; top: calc(var(--altezza-testata, 4.8rem) + 1.4rem); align-self: start;
    max-height: calc(100vh - var(--altezza-testata, 4.8rem) - 2.8rem); overflow-y: auto;
    background: transparent; padding: 0;
  }
  .indice-pulsante, .indice-velo { display: none !important; }
}

/* sul telefono (con lo script): l'indice e' un foglio di notte che sale dal
   basso, aperto dalla pillola "Capitolo III di VII - Indice" */
.indice-pulsante {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 45;
  display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0.45rem 0.45rem 1.15rem; min-height: 2.9rem;
  border: none; border-radius: 999px; background: var(--notte); color: var(--carta); box-shadow: var(--ombra-alta);
  font-family: var(--sans); font-size: 0.86rem; white-space: nowrap;
  transform: translate(-50%, calc(100% + 2rem)); transition: transform 520ms cubic-bezier(.2,.8,.2,1);
}
.indice-pulsante--visibile { transform: translate(-50%, 0); }
.indice-pulsante__azione { padding: 0.45rem 0.95rem; border-radius: 999px; background: var(--ambra-testo); color: #fff; font-weight: 600; }
.indice-velo {
  position: fixed; inset: 0; z-index: 55; background: rgba(26,32,48,0.5); opacity: 0; visibility: hidden;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}
html.indice-aperto { overflow: hidden; }
html.indice-aperto .indice-velo { opacity: 1; visibility: visible; transition: opacity 400ms ease, visibility 0s; }
@media (max-width: 1079px) {
  .js-indice .indice {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; max-height: min(80vh, 38rem); overflow-y: auto; overscroll-behavior: contain;
    max-width: none; margin: 0; border-radius: 18px 18px 0 0; padding: 1.5rem 1.3rem calc(1.4rem + env(safe-area-inset-bottom));
    background: var(--notte); color: var(--carta); box-shadow: 0 -20px 50px -20px rgba(0,0,0,0.5);
    transform: translateY(105%); visibility: hidden;
    transition: transform 560ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 560ms;
  }
  html.indice-aperto .indice { transform: none; visibility: visible; transition: transform 560ms cubic-bezier(.2,.8,.2,1), visibility 0s; }
  .js-indice .indice::before { content: ""; display: block; width: 2.6rem; height: 4px; border-radius: 4px; margin: -0.6rem auto 1rem; background: rgba(251,248,243,0.25); }
  .js-indice .indice__titolo { color: var(--ambra-viva); }
  .js-indice .indice__voci { border-left-color: rgba(251,248,243,0.18); }
  .js-indice .indice__voce { color: rgba(251,248,243,0.72); padding-block: 0.7rem; font-size: 0.98rem; }
  .js-indice .indice__voce[aria-current="true"], .js-indice .indice__voce:hover { color: #fff; }
  .js-indice .indice__voce::before { background: var(--ambra-viva); }
  .js-indice .indice__num { color: var(--ambra-viva); }
  .js-indice .indice__min, .js-indice .indice__resto { color: rgba(251,248,243,0.6); }
  .js-indice .indice :focus-visible { outline-color: var(--ambra-viva); }
}

/* scrivania: pensiero o scritto? */
.genere { border: none; margin: 0 0 1.2rem; padding: 0; min-width: 0; }
.genere__domanda { padding: 0; margin-bottom: 0.7rem; font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: var(--inchiostro); }
.genere__scelte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.genere__scelte--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .genere__scelte { grid-template-columns: minmax(0, 1fr); } }
.genere__scelta {
  display: flex; align-items: flex-start; gap: 0.8rem; padding: 1rem 1.1rem; cursor: pointer; font-family: var(--sans);
  background: var(--bianco); border: 1.5px solid var(--riga); border-radius: var(--raggio-g);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.genere__scelta:hover { border-color: var(--ambra); }
.genere__scelta:has(input:checked) { border-color: var(--ambra); background: #FCF4EA; box-shadow: var(--ombra); }
.genere__scelta:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.genere__scelta:has(input:focus-visible) { outline: 2px solid var(--calma); outline-offset: 3px; }
.genere__scelta input { flex: none; width: 1.2rem; height: 1.2rem; margin: 0.15rem 0 0; accent-color: var(--ambra-testo); }
.genere__testo { display: grid; gap: 0.2rem; }
.genere__testo strong { font-size: 1rem; color: var(--inchiostro); }
.genere__testo span { font-size: 0.88rem; line-height: 1.45; color: var(--inchiostro-morbido); }
.genere__nota { margin-top: 0.8rem; padding: 0.75rem 1rem; border-radius: var(--raggio); background: var(--calma-tenue); color: var(--calma-scura); font-family: var(--sans); font-size: 0.92rem; line-height: 1.5; }
/* nel foglio di uno scritto ogni titolo di capitolo ha sopra il suo numero */
.foglio--scritto .foglio__testo { counter-reset: capitolo; }
.foglio--scritto .foglio__testo h2 { counter-increment: capitolo; padding-top: 1.2rem; border-top: 1px dashed var(--riga); }
.foglio--scritto .foglio__testo h2:first-child { padding-top: 0; border-top: none; }
.foglio--scritto .foglio__testo h2::before {
  content: "Capitolo " counter(capitolo); display: block; margin-bottom: 0.35rem;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ambra-testo);
}

/* ===== Effetti: la penna e la lampada =====
   Un'idea sola per tutto il sito: l'inchiostro che segna cio' che conta
   (tratti di penna), la luce nella notte (la lampada della hero, la tendina
   del menu), le parole che emergono. Tutto spento con "riduci animazioni". */

/* passaggio tra le pagine: il titolo del pensiero vola dalla scheda alla
   sua pagina (view-transition-name uguale su entrambe, messo nell'HTML) */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 480ms; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; }
.testata { view-transition-name: testata; }

/* testata: ombra quando si scorre, e si fa da parte mentre si legge
   (torna appena si risale; non nella scrivania) */
.testata { transition: box-shadow 250ms ease, transform 420ms cubic-bezier(.2,.8,.2,1), background 400ms ease, border-color 400ms ease; }
.testata--scorsa { box-shadow: 0 10px 28px -20px rgba(22,24,30,0.45); }
.testata--nascosta { transform: translateY(-100%); box-shadow: none; }

/* comparsa dolce allo scorrimento (la classe la mette script.js: senza
   JavaScript tutto resta visibile) */
.rivela { opacity: 0; transform: translateY(1.3rem); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1); }
.rivela.visibile { opacity: 1; transform: none; }

/* la penna: tratto d'inchiostro che si disegna sotto cio' che conta */
.segnato { position: relative; white-space: nowrap; }
.tratto { position: absolute; left: -3%; bottom: 0.02em; width: 106%; height: 0.3em; overflow: visible; pointer-events: none; }
.tratto path { fill: none; stroke: var(--ambra-viva); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.testa-pagina .tratto path { stroke: var(--ambra); stroke-width: 3.6; }
.tratto--anima path { stroke-dashoffset: 1; animation: traccia 1100ms cubic-bezier(.6,0,.2,1) var(--ritardo, 0ms) forwards; }
@keyframes traccia { to { stroke-dashoffset: 0; } }

/* ingresso della hero: le parole del titolo salgono da sotto una riga,
   una dopo l'altra; poi la penna segna "non si dice" */
@keyframes sale { from { opacity: 0; transform: translateY(1.1rem); } to { opacity: 1; transform: none; } }
@keyframes sale-copertina { from { opacity: 0; transform: translateY(1.6rem) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes parola-sale { to { transform: none; } }
.parole-sale .maschera { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.12em 0.16em; margin: -0.06em -0.12em -0.16em; }
.parole-sale .maschera > span { display: inline-block; transform: translateY(112%); animation: parola-sale 1000ms cubic-bezier(.2,.8,.2,1) calc(100ms + var(--i, 0) * 75ms) forwards; }
.apertura__griglia > div:first-child > :not(h1) { animation: sale 850ms cubic-bezier(.2,.8,.2,1) both; }
.apertura__griglia > div:first-child > :nth-child(3) { animation-delay: 560ms; }
.apertura__griglia > div:first-child > :nth-child(4) { animation-delay: 680ms; }
.apertura__vetro { animation: sale-copertina 1100ms 300ms cubic-bezier(.2,.8,.2,1) both; }
@media (hover: none), (pointer: coarse) {
  .apertura__luce { animation: luce-vaga 16s ease-in-out infinite alternate; }
}
@keyframes luce-vaga { from { transform: translate3d(78vw, 7rem, 0); } to { transform: translate3d(18vw, 24rem, 0); } }
/* scorrendo, il testo della hero sale un po' piu' in fretta e la foto un po'
   piu' piano (--sy lo scrive script.js: i pixel scorsi) */
.apertura__griglia > div:first-child { translate: 0 calc(var(--sy, 0) * -0.09px); opacity: calc(1 - var(--sy, 0) / 1100); }
.apertura__vetro { translate: 0 calc(var(--sy, 0) * 0.08px); }

/* la copertina si inclina appena seguendo il mouse (script.js) */
.apertura__vetro, .bio-vetrina { perspective: 60rem; }
.copertina--grande { transition: transform 500ms cubic-bezier(.2,.8,.2,1), box-shadow 500ms ease; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.copertina--grande.inclinata { transition-duration: 120ms; box-shadow: 0 34px 60px -26px rgba(0,0,0,0.6); }

/* "Una frase": le parole si accendono una alla volta mentre la si legge
   scorrendo (--scorre: quanto la frase ha attraversato lo schermo, da 0 a 1;
   senza script vale 1 e la frase e' tutta accesa) */
.frase__citazione { --avanza: clamp(0, calc((var(--scorre, 1) - 0.12) / 0.4), 1); }
.frase__citazione .parola { opacity: clamp(0.14, calc(var(--avanza) * (var(--n, 1) + 3) - var(--i, 0)), 1); transition: opacity 160ms linear; }

/* il libro si apre mentre ci si arriva: parte girato e si raddrizza */
.libro__copertina img { transform: rotateY(calc(-8deg - (1 - min(1, var(--scorre, 1) * 2.2)) * 28deg)) rotateX(2deg); }

/* gli scritti in home: il libro arriva socchiuso e si distende mentre lo si
   raggiunge (solo da 821px in su: sul telefono le pagine stanno una sopra
   l'altra); la penna segna "con calma" quando il titolo compare */
@media (min-width: 821px) {
  .libro-aperto { --apre: calc(1 - min(1, var(--scorre, 1) * 2.4)); }
  .libro-aperto__pagina--sx { transform: rotateY(calc(var(--apre) * 24deg)); }
  .libro-aperto__pagina--dx { transform: rotateY(calc(var(--apre) * -24deg)); }
}
.scritti-home__testa h2.rivela .tratto path { stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms cubic-bezier(.6,0,.2,1) 550ms; }
.scritti-home__testa h2.rivela.visibile .tratto path { stroke-dashoffset: 0; }

/* fine del pensiero: un piccolo fregio d'inchiostro che si disegna */
.fine { display: flex; justify-content: center; margin-top: 2.8rem; color: var(--ambra); }
.fine svg { width: 7.5rem; height: 1.5rem; overflow: visible; }
.fine path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fine circle { fill: currentColor; }
.fine.rivela path { stroke-dashoffset: 1; transition: stroke-dashoffset 1600ms cubic-bezier(.6,0,.2,1) 250ms; }
.fine.rivela.visibile path { stroke-dashoffset: 0; }

/* link nel testo: sottolineatura che si allunga */
.prosa a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size 250ms ease; }
.prosa a:hover { background-size: 100% 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .rivela { opacity: 1; transform: none; }
  .copertina--grande { transform: none; }
  .libro__copertina img { transform: rotateY(-8deg) rotateX(2deg); }
  .libro-aperto__pagina--sx, .libro-aperto__pagina--dx { transform: none !important; }
  .apertura__luce { animation: none; }
  .apertura__griglia > div:first-child, .apertura__vetro { translate: none; opacity: 1; }
  .frase__citazione .parola { opacity: 1; }
  .testata--nascosta { transform: none; }
  .menu-mobile { transition: visibility 0s; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ===== Stampa: un pensiero stampato esce pulito, come la pagina di un libro ===== */
@media print {
  .salta, .testata, .menu-mobile, .piede, .condividi, .altri, .barra-lettura, .avviso, .apri-menu, .scrivania, .fine, .indice, .indice-pulsante, .indice-velo, .scritto__inizio { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; line-height: 1.55; }
  .rivela { opacity: 1 !important; transform: none !important; }
  .articolo { padding: 0; }
  .articolo > *, .articolo .prosa { max-width: none; }
  .prosa p, .articolo__data { color: #000; }
  .articolo__corpo > p:first-of-type::first-letter { color: #000; }
  .articolo__testa h1 { font-size: 22pt; }
  h1, h2 { break-after: avoid; }
  p { orphans: 3; widows: 3; }
  a { color: inherit; text-decoration: none; background: none !important; }
  /* uno scritto stampato (o salvato in PDF): ogni capitolo su una pagina nuova */
  .scritto { padding: 0; }
  .scritto > *, .scritto--capitoli > :not(.scritto__griglia), .scritto__griglia, .scritto__corpo { max-width: none !important; padding-left: 0 !important; display: block; }
  .scritto__testa h1 { font-size: 24pt; }
  .capitolo + .capitolo { break-before: page; margin-top: 0; }
  .capitolo__numero, .capitolo__testa + p::first-letter, .scritto__premessa > p:first-child::first-letter { color: #000; }
  .capitolo__tratto path { stroke: #000; stroke-dashoffset: 0 !important; }
  .scritto[data-indirizzo]::after { content: "Luca Bortolazzi, " attr(data-indirizzo); display: block; margin-top: 2rem; padding-top: 0.6rem; border-top: 1px solid #999; font-family: var(--sans); font-size: 9pt; color: #444; }
  .articolo[data-indirizzo]::after { content: "Luca Bortolazzi, " attr(data-indirizzo); display: block; margin-top: 2rem; padding-top: 0.6rem; border-top: 1px solid #999; font-family: var(--sans); font-size: 9pt; color: #444; }
}

/* ---------- Le riflessioni dei lettori (07/10/2026) ---------- */
/* numero di testi in attesa (scrivania e pulsante "Scrivi") */
.bollino {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.45rem;
  border-radius: 999px; background: var(--ambra); color: #fff; font-family: var(--sans); font-size: 0.82rem; font-weight: 700; line-height: 1;
}
.bollino--pulsante { min-width: 1.3rem; height: 1.3rem; margin-left: 0.45rem; background: #fff; color: var(--ambra-testo); font-size: 0.75rem; }

/* invito a scrivere, in fondo alle pagine delle riflessioni */
.invito-lettori {
  margin-top: 3rem; padding: clamp(1.6rem, 4vw, 2.4rem); border-radius: var(--raggio-g);
  background: var(--carta-calda); border: 1px solid var(--riga);
}
.invito-lettori__titolo { font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 300; }
.invito-lettori p { margin: 0.6rem 0 1.3rem; color: var(--inchiostro-morbido); max-width: 36rem; }
.invito-lettori__azioni { display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* il modulo pubblico (/la-tua-riflessione) */
.proponi { padding-bottom: 4rem; }
.proponi .testa-pagina a:not(.occhiello) { color: var(--ambra-testo); text-underline-offset: 3px; }
.proponi .campo { max-width: 26rem; }
.campo__aiuto { font-family: var(--sans); font-size: 0.85rem; color: var(--inchiostro-tenue); }
.proponi .genere__nota { margin: -0.3rem 0 0.8rem; padding: 0; background: none; font-size: 0.9rem; color: var(--inchiostro-tenue); }
.proponi .genere__nota a { color: inherit; text-underline-offset: 3px; }
.proponi .genere__scelta { justify-content: center; text-align: center; }
.barra--ferma { position: static; }
/* campo trappola per i programmi automatici: fuori dallo schermo, non nascosto (alcuni robot riconoscono display:none) */
.trappola { position: absolute; left: -100vw; top: auto; width: 1px; height: 1px; overflow: hidden; }
.consenso { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 1.4rem; max-width: 40rem; font-family: var(--sans); font-size: 0.95rem; line-height: 1.55; color: var(--inchiostro-morbido); cursor: pointer; }
.consenso input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; flex: 0 0 auto; accent-color: var(--ambra-testo); }

/* scrivania: i testi in attesa di approvazione */
.attesa {
  background: var(--bianco); border: 1px solid var(--ambra-tenue); border-radius: var(--raggio-g);
  padding: clamp(1.2rem, 3vw, 1.8rem); margin-bottom: 1.6rem; box-shadow: var(--ombra);
}
.attesa__testa { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.attesa__titolo { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 300; }
.attesa__aiuto { margin: 0.6rem 0 1.2rem; max-width: 46rem; font-family: var(--sans); font-size: 0.95rem; line-height: 1.55; color: var(--inchiostro-morbido); }
.attesa__aiuto a { color: var(--ambra-testo); text-underline-offset: 3px; }
.attesa__vuoto { font-family: var(--sans); color: var(--inchiostro-tenue); padding: 0.4rem 0; }
.proposte { display: flex; flex-direction: column; gap: 1rem; }
.proposta { border: 1px solid var(--riga); border-radius: var(--raggio-g); padding: 1.2rem 1.4rem; background: var(--carta); }
.proposta__testa { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem 1.2rem; flex-wrap: wrap; font-family: var(--sans); font-size: 0.92rem; color: var(--inchiostro-morbido); }
.proposta__chi strong { color: var(--inchiostro); }
.proposta__corretta { color: var(--calma-scura); }
.proposta__corrente { display: inline-flex; align-items: center; gap: 0.5rem; }
.proposta__corrente select { font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--riga); border-radius: var(--raggio); background: var(--bianco); color: var(--inchiostro); min-height: 2.75rem; }
.proposta__nome { margin-top: 0.9rem; max-width: 22rem; }
.proposta__titolo { font-size: 1.45rem; margin: 0.9rem 0 0.6rem; }
.proposta__corpo { max-width: 42rem; }
.proposta__corpo p { font-size: 1rem; }
.proposta--chiusa .proposta__corpo { max-height: 13rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.proposta__tutto { margin-top: 0.4rem; color: var(--ambra-testo); min-height: 2.75rem; }
.proposta--correzione .proposta__titolo,
.proposta--correzione .proposta__corpo { outline: 1.5px dashed var(--ambra-viva); outline-offset: 0.4rem; border-radius: var(--raggio); }
.proposta__nota { margin-top: 1rem; font-family: var(--sans); font-size: 0.9rem; color: var(--ambra-testo); }
.proposta__azioni { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.proposta__azioni .btn { padding: 0.65rem 1.1rem; font-size: 0.88rem; }
@media (max-width: 640px) {
  .proposta__azioni .btn { flex: 1 1 auto; }
}

/* ---------- Testi giustificati, come in un libro (07/10/2026) ---------- */
/* Chiesto da Loris: nelle riflessioni (di Luca e dei lettori) e negli scritti
   ogni riga del paragrafo arriva fino al margine destro. L'ultima riga resta
   a sinistra; titoli e capitoli non cambiano. La sillabazione italiana
   (lang="it" sulla pagina) evita i buchi tra le parole sulle righe strette del
   telefono. Stessa regola dove si scrive e si rilegge prima di pubblicare
   (foglio della scrivania e del modulo pubblico, anteprima, testi in attesa),
   cosi' il testo si vede gia' come sara' sul sito. */
.articolo__corpo p,
.articolo__corpo blockquote,
.scritto__corpo p,
.scritto__corpo blockquote,
.foglio__testo,
.foglio__testo p,
.proposta__corpo p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 7 3 3; /* si va a capo solo nelle parole di almeno 7 lettere, lasciandone almeno 3 per parte */
}

/* Riflessioni dei lettori come quarta porta in /riflessioni, larga tutta la riga (07/10/2026) */
.corrente-porta--lettori { grid-column: 1 / -1; min-height: 11rem; }
.corrente-porta--lettori .corrente-porta__numero { font-style: normal; font-size: 4.2rem; line-height: 0.8; }
.corrente-porta--lettori .corrente-porta__nome { margin-top: 0.6rem; }
.corrente-porta--lettori .corrente-porta__ultimo { max-width: 42rem; }
@media (min-width: 821px) {
  .corrente-porta--lettori { padding-right: 9rem; }
  .corrente-porta--lettori .corrente-porta__numero { position: absolute; top: 1.6rem; right: 2rem; font-size: 6rem; }
  .corrente-porta--lettori .corrente-porta__nome { margin-top: 0; }
}
@media (max-width: 820px) {
  .corrente-porta--lettori .corrente-porta__numero { font-size: 3.4rem; }
}