/* -----------------------------------------------------------------
   style.css — white paper, black ink, Times New Roman.
   The few things worth changing are in the first block.
   ----------------------------------------------------------------- */

:root {
  --paper: #FFFFFF;
  --ink:   #111111;
  --soft:  #6B6B6B;   /* secondary text */
  --hair:  #E2E2E2;   /* thin rules */
  --measure: 720px;   /* text width */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, legend, button, strong, b, em, i {
  font-weight: 400;
  font-style: normal;
}

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
a:hover { border-bottom-color: var(--ink); }

/* --- language switch --- */
.lang {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 10;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hair);
  color: var(--soft);
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.08em;
  padding: 2px 1px;
  cursor: pointer;
}
.lang:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- 1. the hook: one screen, one sentence --- */
.hook {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 72px 32px;
}
.hook-inner {
  max-width: 940px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
  text-align: center;
}
.hook-inner .doors { margin-left: auto; margin-right: auto; }

.hero-small {
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.5;
  margin: 0 0 10px;
  opacity: 0.85;
}

/* a vertical photo standing beside the words */
.hook.has-portrait .hook-inner { max-width: 1080px; }
.hook-portrait { display: none; }

@media (min-width: 900px) {
  .hook.has-portrait .hook-inner {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 56px;
    align-items: center;
  }
  .hook.has-portrait .hook-portrait {
    display: block;
    width: 100%;
    max-height: 74svh;
    object-fit: cover;
  }
}
@media (max-width: 899px) {
  .hook.has-portrait .hook-portrait {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 0 34px;
    object-fit: cover;
  }
  .hook.has-portrait .hook-inner { display: flex; flex-direction: column-reverse; }
}

/* the photo or video behind the hook */
.hook { position: relative; overflow: hidden; }
.hook-media { position: absolute; inset: 0; z-index: 0; }
.hook-media img, .hook-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hook-media::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* white writing over a darkened photo */
.hook.tone-dark .hook-media::after {
  background: linear-gradient(100deg,
    rgba(0,0,0,0.66) 0%,
    rgba(0,0,0,0.54) 45%,
    rgba(0,0,0,0.34) 100%);
}
.hook.tone-dark h1,
.hook.tone-dark .vision,
.hook.tone-dark .cue-label,
.hook.tone-dark .door { color: #FFFFFF; }
/* black writing over a lightened photo */
.hook.tone-light .hook-media::after {
  background: linear-gradient(100deg,
    rgba(255,255,255,0.82) 0%,
    rgba(255,255,255,0.70) 45%,
    rgba(255,255,255,0.50) 100%);
}

.hero-photo {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 0 44px;
}

h1 {
  font-size: clamp(40px, 6.6vw, 84px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}

.three-words {
  margin: 0 0 22px;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}
.hook.tone-dark .three-words { color: #FFFFFF; }

.masthead-words {
  margin: 8px 0 0;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--soft);
  opacity: 1;
}

.foot-words { max-width: 32em; }

.vision {
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.55;
  max-width: 32em;
  margin: 30px auto 0;
  opacity: 0.85;
}

.cue-label {
  margin: 52px 0 14px;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* the three doors into the site */
.doors { display: block; max-width: 34em; }

.hook-inner .doors .door {
  border: none;
  text-align: center;
  padding: 11px 0;
  font-size: clamp(19px, 1.6vw, 23px);
  opacity: 1;
}
.hook-inner .doors .door:last-child { border-bottom: none; }
.hook-inner .doors .door::after { content: none; }
.hook-inner .doors .door:hover { text-decoration: underline; text-underline-offset: 5px; }

.door-icon {
  display: inline-block;
  margin-right: 13px;
  font-size: 1.05em;
  opacity: 1;
  vertical-align: -0.05em;
  /* the one place on the page that is not Times New Roman */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}
.door {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  background: none;
  border: none;
  border-top: 1px solid currentColor;
  color: inherit;
  font-family: inherit;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  padding: 15px 30px 15px 0;
  cursor: pointer;
  position: relative;
  opacity: 0.88;
}
.door:last-child { border-bottom: 1px solid currentColor; }
.door::after {
  content: "\2192";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.15s ease;
}
.door:hover { opacity: 1; }
.door:hover::after { transform: translateY(-50%) translateX(4px); }

.hook.tone-dark .door { border-color: rgba(255,255,255,0.45); }
.hook.tone-dark .door:last-child { border-bottom-color: rgba(255,255,255,0.45); }

.cue {
  display: inline-block;
  margin-top: 48px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-family: inherit;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 1px;
  cursor: pointer;
}
.cue:hover { opacity: 0.55; }

/* the rest of the page sits below the hero */
main { display: block; }

.block {
  scroll-margin-top: 28px;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 84px 32px 0;
}

h2 {
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}

.lede { color: var(--soft); margin-bottom: 26px; }

/* --- who I am: one statement per line --- */
.lines { list-style: none; margin: 0; padding: 0; }
.lines li {
  font-size: 23px;
  line-height: 1.5;
  padding: 0 0 16px;
}
.lines li:last-child { padding-bottom: 0; }

/* --- where I have lived --- */
.timeline { margin: 0; }
.timeline div {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
}
.timeline div:last-child { border-bottom: none; }
.timeline dt { color: var(--soft); font-size: 18px; }
.timeline dd { margin: 0; }

/* --- notes: click the title, the note opens --- */
.notes { margin: 0; }

.note { border-bottom: 1px solid var(--hair); }
.note:last-child { border-bottom: none; }

.note-head {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 20px;
  line-height: 1.5;
  padding: 22px 30px 22px 0;
  cursor: pointer;
  position: relative;
}
.note-head:hover .note-title { border-bottom-color: var(--ink); }
.note-title {
  display: inline;
  font-size: 26px;
  border-bottom: 1px solid transparent;
}
.note-teaser { display: block; color: var(--soft); margin-top: 5px; }
.note-head::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 24px;
  color: var(--soft);
  font-size: 22px;
}
.note.open .note-head::after { content: "\2013"; }

.note-body { padding: 0 0 26px; max-width: 34em; }
.note-body[hidden] { display: none; }

/* the playbooks list has no open/close */
.notes.plain .note-head { cursor: default; padding-right: 0; }
.notes.plain .note-head::after { content: none; }
.notes.plain .note-head:hover .note-title { border-bottom-color: transparent; }

/* --- photos --- */
.split { display: block; }
.side-photo {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 34px 0 0;
  object-fit: cover;
}
@media (min-width: 860px) {
  .split { display: grid; grid-template-columns: 1fr 240px; gap: 42px; align-items: start; }
  .split.no-photo { display: block; }
  .side-photo { margin-top: 4px; max-width: none; }
}

/* =================================================================
   THE LANDING: your photos on the left, the words on the right
   ================================================================= */
.landing {
  display: block;
  min-height: 100svh;
}

.landing-photos { display: none; }

.landing-words {
  max-width: 620px;
  margin: 0 auto;
  padding: 72px 28px;
  text-align: center;
}

@media (min-width: 900px) {
  .landing {
    display: grid;
    grid-template-columns: 44fr 56fr;
  }
  .landing-photos {
    display: block;
    position: relative;
    min-height: 100svh;
    background: #EFEDE9;
    overflow: hidden;
  }
  .landing-photos img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s ease;
  }
  .landing-photos img.on { opacity: 1; }

  .landing-words {
    max-width: 620px;
    margin: 0;
    padding: 64px 60px;
    text-align: left;
    align-self: center;
  }
}

/* on a phone the photos sit above the words */
@media (max-width: 899px) {
  .landing-photos {
    display: block;
    position: relative;
    height: 56svh;
    background: #EFEDE9;
    overflow: hidden;
  }
  .landing-photos img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s ease;
  }
  .landing-photos img.on { opacity: 1; }
  .landing-words { text-align: left; padding: 44px 26px 72px; }
}

.landing .hero-small { margin-bottom: 8px; }
.landing h1 { font-size: clamp(34px, 3.7vw, 52px); }
.landing .vision { margin: 20px 0 0; max-width: 30em; font-size: 19px; }

.landing-more { margin: 26px 0 0; font-size: 18px; }

/* --- the three paths --- */
.paths { display: block; margin: 32px 0 0; }

.path {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 17px 0;
  border-top: 1px solid var(--ink);
  border-bottom: none;
  text-decoration: none;
  color: var(--ink);
}
.path:last-child { border-bottom: 1px solid var(--ink); }
.path:hover .path-name { text-decoration: underline; text-underline-offset: 5px; }

.path-icon {
  font-size: 30px;
  line-height: 1.1;
  flex: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.path-words { display: block; }
.path-name {
  display: block;
  font-size: clamp(23px, 2vw, 29px);
  line-height: 1.25;
}
.path-line {
  display: block;
  margin-top: 5px;
  color: var(--soft);
  font-size: 18px;
  line-height: 1.5;
}

/* --- the mark: a single C --- */
.mark {
  display: inline-block;
  width: 26px;
  height: 31px;
  color: var(--ink);
  border-bottom: none;
  line-height: 0;
}
.mark svg { width: 100%; height: 100%; display: block; }
.mark:hover { opacity: 0.55; }

.mark-landing { margin-bottom: 26px; width: 30px; height: 36px; }

/* --- the list of articles inside a path --- */
.entries { margin: 0; }

.entry {
  display: block;
  padding: 26px 0;
  border-top: 1px solid var(--hair);
  border-bottom: none;
  text-decoration: none;
  color: var(--ink);
}
.entry:last-child { border-bottom: 1px solid var(--hair); }
.entry:hover .entry-title { text-decoration: underline; text-underline-offset: 5px; }

.entry-title {
  display: block;
  font-size: clamp(24px, 2.2vw, 31px);
  line-height: 1.25;
  max-width: 22em;
}
.entry-teaser {
  display: block;
  margin-top: 7px;
  color: var(--soft);
  font-size: 19px;
  line-height: 1.5;
  max-width: 34em;
}

/* --- a single article --- */
.kicker {
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 22px;
}
.article-page h1 {
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.16;
  margin: 0 0 18px;
  max-width: 20em;
}
/* Il ritmo di lettura, misurato sulle newsletter che Carolina usa come riferimento:
   paragrafi brevi (mediana 27 parole, quasi meta' sotto le 25), due titoletti per
   pezzo, una riga in corsivo sotto il titolo. Da qui: misura piu' stretta, piu'
   aria fra un paragrafo e l'altro, e i titoletti che si vedono davvero. */
.article-body p {
  max-width: 30em;
  margin-bottom: 26px;
  line-height: 1.62;
}

/* Il titoletto di sezione: staccato sopra, vicino al paragrafo che introduce. */
.article-body h2 {
  font-size: clamp(22px, 2.2vw, 27px);
  line-height: 1.24;
  max-width: 24em;
  margin: 52px 0 16px;
}
.article-body h2:first-child { margin-top: 0; }

/* I passi numerati prendono un filo sopra: si contano con gli occhi. */
.article-body p.passo {
  border-top: 1px solid var(--hair);
  padding-top: 20px;
  margin-top: 34px;
}

/* La frase cardine in grassetto respira: e' l'unico accento che usiamo. */
/* L'evidenziazione era grigia al sette per cento e non si vedeva. Azzurro:
   si legge, e su Times resta piu' calmo di un grassetto pieno. */
.article-body strong {
  font-weight: 400;
  box-shadow: inset 0 -0.58em 0 rgba(122, 176, 214, 0.42);
}

.back { margin-top: 56px; font-size: 17px; }

/* --- the head of an article page --- */
.masthead {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 34px 32px 0;
}
.masthead .mark { display: block; margin-bottom: 16px; }
.masthead-name {
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
  border-bottom: none;
}
.masthead-name:hover { color: var(--ink); }

.article-page .block:first-of-type { padding-top: 52px; }

/* --- an article, told in full --- */
.articles { margin: 0; }
.article { padding: 0 0 12px; }
.article + .article {
  margin-top: 46px;
  padding-top: 46px;
  border-top: 1px solid var(--hair);
}
.article h3 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.18;
  margin: 0 0 14px;
  max-width: 20em;
}
/* La riga sotto il titolo: in corsivo, una sola, come nelle newsletter di
   riferimento. E' la frase che toglie la scusa prima che il lettore se la dia. */
.article-lead {
  color: var(--ink);
  font-style: italic;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.45;
  max-width: 28em;
  margin-bottom: 30px;
}
.article p { max-width: 34em; }

/* --- where to go next --- */
.onward { padding-top: 72px; }
.doors-plain .door { color: var(--ink); opacity: 1; }
.doors-plain .door:hover { opacity: 0.55; }
.onward-home { margin-top: 26px; font-size: 17px; color: var(--soft); }

/* --- a row of photos --- */
.gallery-block {
  max-width: 1100px;
  margin: 0 auto;
  padding: 84px 32px 0;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.gallery img,
.gallery video {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  background: #F2F2F2;
}

/* --- form --- */
form { margin-top: 8px; }

.field { display: block; border: none; padding: 0; margin: 0 0 24px; }

.field > span, legend {
  display: block;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 8px;
  padding: 0;
}

input[type="text"], input[type="email"], textarea {
  width: 100%;
  background: var(--paper);
  border: none;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-family: inherit;
  font-size: 20px;
  line-height: 1.5;
  padding: 8px 0;
  resize: vertical;
}
input:focus, textarea:focus { outline: none; border-bottom-width: 2px; }

.choices label {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 6px 0;
  cursor: pointer;
}
.choices input { margin: 0; accent-color: var(--ink); flex: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fine { color: var(--soft); font-size: 16px; line-height: 1.5; margin-bottom: 24px; }

button[type="submit"] {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: inherit;
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 13px 40px;
  cursor: pointer;
}
button[type="submit"]:hover { background: var(--paper); color: var(--ink); }
button[type="submit"][disabled] { opacity: 0.4; cursor: default; }

.status { margin: 16px 0 0; min-height: 1.6em; color: var(--soft); }
.status.bad { color: #A32B1C; }

/* --- foot --- */
.foot {
  max-width: 1180px;
  margin: 0 auto;
  padding: 84px 32px 96px;
  color: var(--soft);
  font-size: 17px;
  border-top: 1px solid var(--hair);
  margin-top: 84px;
}
.foot p { margin: 0 0 6px; }
.foot-photo { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; margin-bottom: 18px; }
.links a { margin-right: 18px; }

/* --- phone --- */
@media (max-width: 620px) {
  body { font-size: 19px; }
  .hook { padding: 0 24px; }
  .block { padding: 60px 24px 0; }
  .foot { padding: 60px 24px 72px; margin-top: 60px; }
  .lines li { font-size: 21px; }
  .note-title { font-size: 23px; }
  .timeline div { grid-template-columns: 88px 1fr; gap: 12px; }
  .cue { margin-top: 36px; }
  .hook { padding: 60px 24px; }
  .three-words {
  margin: 0 0 22px;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}
.hook.tone-dark .three-words { color: #FFFFFF; }

.masthead-words {
  margin: 8px 0 0;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--soft);
  opacity: 1;
}

.foot-words { max-width: 32em; }

.vision { margin-top: 20px; }
  .cue-label { margin-top: 38px; }
  .gallery-block { padding: 60px 24px 0; }
  .gallery img, .gallery video { height: 200px; }
}

/* Il richiamo a Realux in fondo a ogni articolo. Stesso nero del pulsante del
   modulo, con un filetto sopra che lo stacca dal corpo del testo. */
.cta {
  margin: 56px 0 8px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.cta-text {
  margin: 0 0 20px;
  max-width: 34em;
}
.cta-button {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 13px 40px;
  text-decoration: none;
}
.cta-button:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 640px) {
  .cta-button { display: block; text-align: center; padding: 14px 20px; }
}

/* --- Il blocco di iscrizione --- 
   Un sito con cento articoli e nessun modo per iscriversi perde tutto quello
   che porta. Sta in fondo a ogni articolo e a ogni indice, con la stessa
   sobrieta' del resto: un filo sopra, niente riquadri colorati. */
.iscriviti {
  max-width: var(--measure);
  margin: 88px auto 0;
  padding: 40px 32px 0;
  border-top: 1px solid var(--ink);
}
.iscriviti h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  max-width: 18em;
  margin: 0 0 12px;
}
.iscriviti-riga {
  max-width: 30em;
  margin: 0 0 26px;
  color: var(--soft);
}
.iscriviti-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 34em;
}
.iscriviti-form input {
  flex: 1 1 180px;
  font-family: inherit;
  font-size: 18px;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
}
.iscriviti-form input::placeholder { color: var(--soft); opacity: 1; }
.iscriviti-form button {
  flex: 0 0 auto;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: inherit;
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 13px 34px;
  cursor: pointer;
}
.iscriviti-form button:hover { background: var(--paper); color: var(--ink); }
.iscriviti-form button[disabled] { opacity: 0.4; cursor: default; }
.iscriviti-nota { margin: 14px 0 0; font-size: 15px; color: var(--soft); }
.iscriviti-esito { margin: 10px 0 0; min-height: 1.5em; }
@media (max-width: 640px) {
  .iscriviti { padding: 34px 24px 0; margin-top: 64px; }
  .iscriviti-form button { flex: 1 1 100%; }
}

/* --- La barra di navigazione ---
   Prima non c'era: si arrivava su un articolo e l'unico modo di muoversi era
   tornare in home. Resta in alto, sottile, e la sezione in cui ti trovi e'
   sottolineata. */
.navbar {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Tre colonne con i lati di pari larghezza (1fr | auto | 1fr): il centro
     della colonna di mezzo coincide col centro della pagina, anche se il
     nome a sinistra e' molto piu' largo del bottone della lingua a destra. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 28px;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
  padding: 18px 32px;
}
.navbar-nome { justify-self: start; }
.navbar-lingua { justify-self: end; }
.navbar-nome {
  font-size: 16px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  border-bottom: none;
  white-space: nowrap;
}
.navbar-voci {
  display: flex;
  gap: 34px;
  justify-content: center;
  white-space: nowrap;
}
.navbar-voci a {
  font-size: 16px;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.navbar-voci a:hover { color: var(--ink); }
.navbar-voci a.qui { color: var(--ink); border-bottom-color: var(--ink); }
.navbar-lingua {
  background: none;
  border: none;
  border-bottom: 1px solid var(--hair);
  color: var(--soft);
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.08em;
  padding: 2px 1px;
  cursor: pointer;
  white-space: nowrap;
}
.navbar-lingua:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 860px) {
  /* Stretto: nome e lingua sulla prima riga, le voci centrate sotto. */
  .navbar {
    grid-template-columns: 1fr auto;
    gap: 12px 14px;
    padding: 14px 20px;
  }
  .navbar-voci {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 18px;
    flex-wrap: wrap;
    white-space: normal;
  }
  .navbar-lingua { grid-row: 1; }
  .navbar-voci a { font-size: 15px; }
}

/* --- Le voci di un indice ---
   `.entries` non aveva nemmeno una regola: i cento articoli uscivano come
   una lista di link uno sotto l'altro. Adesso ogni voce e' una riga con il
   titolo grande, la frase sotto, e un filo che le separa. */
.entries { margin: 34px 0 0; }
.entry {
  display: block;
  padding: 26px 0;
  border-top: 1px solid var(--hair);
  border-bottom: none;
}
.entry:last-child { border-bottom: 1px solid var(--hair); }
.entry-title {
  display: block;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.24;
  max-width: 24em;
  margin-bottom: 8px;
}
.entry-teaser {
  display: block;
  color: var(--soft);
  max-width: 34em;
  line-height: 1.55;
}
.entry:hover .entry-title { text-decoration: underline; text-underline-offset: 4px; }
.entry:hover .entry-teaser { color: var(--ink); }

/* --- Il piede ---
   Stessa struttura di quello di Realux — marchio piu' tre colonne: contatti,
   sezioni, newsletter — ma in bianco e nero e senza fondo colorato. Sotto,
   una riga sola con Realux. */
.foot-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 44px;
  align-items: start;
}
.foot-col { min-width: 0; }
.foot-col a { display: block; margin-bottom: 6px; }
.foot-nome {
  color: var(--ink);
  font-size: 18px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.foot-eti {
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.foot-col--news .iscriviti-form { max-width: none; gap: 8px; margin-top: 14px; }
.foot-col--news .iscriviti-form input { font-size: 16px; padding: 10px 12px; flex-basis: 130px; }
.foot-col--news .iscriviti-form button { font-size: 15px; padding: 11px 22px; }

/* La riga di Realux, sotto tutto: un filo sopra e quattro voci in fila. */
.foot-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: baseline;
  margin-top: 54px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  font-size: 16px;
}
.foot-riga span:first-child {
  color: var(--ink);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 14px;
}
@media (max-width: 900px) {
  .foot-griglia { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 560px) {
  .foot-griglia { grid-template-columns: 1fr; gap: 32px; }
  .foot-riga { margin-top: 38px; }
}

/* --- La home: gli ultimi pezzi, e basta --- */
.ultimi { max-width: var(--measure); margin: 0 auto; padding: 64px 32px 0; }
.ultimi-tit {
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.18;
  margin: 0 0 8px;
}
.ultimi-tutti { margin-top: 30px; font-size: 17px; }
@media (max-width: 640px) { .ultimi { padding: 44px 20px 0; } }

/* --- L'apertura della home: una frase, una riga, e l'iscrizione --- */
.apertura {
  max-width: 46em;
  margin: 0 auto;
  padding: clamp(64px, 12vh, 140px) 32px clamp(48px, 9vh, 96px);
  text-align: center;
}
.apertura-tit {
  font-size: clamp(34px, 6vw, 72px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  margin: 0 0 22px;
}
.apertura-riga {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  max-width: 30em;
  margin: 0 auto 34px;
}
.apertura-form {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: 30em;
  margin: 0 auto;
}
.apertura-form input {
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 18px;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  border-right: none;
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
}
.apertura-form input::placeholder { color: var(--soft); opacity: 1; }
.apertura-form button {
  flex: 0 0 auto;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: inherit;
  font-size: 17px;
  letter-spacing: 0.1em;
  padding: 14px 32px;
  cursor: pointer;
}
.apertura-form button:hover { background: var(--paper); color: var(--ink); }
.apertura-nota { margin: 14px 0 0; font-size: 15px; color: var(--soft); }
.apertura-esito { margin: 8px 0 0; min-height: 1.4em; }
@media (max-width: 560px) {
  .apertura-form { flex-wrap: wrap; }
  .apertura-form input { border-right: 1px solid var(--ink); flex-basis: 100%; }
  .apertura-form button { flex-basis: 100%; margin-top: 10px; }
}

/* --- La home: solo barra e piede ---
   Senza niente in mezzo il piede resterebbe attaccato sotto la barra con il
   vuoto sotto. La pagina occupa l'altezza dello schermo e il piede va in
   fondo, dove ci si aspetta di trovarlo. */
body[data-page="home"] {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body[data-page="home"] .landing {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
body[data-page="home"] .foot {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

/* --- La frase al centro della home ---
   La home e' barra, questa frase e piede. La frase sta in mezzo, non in alto:
   e' l'unica cosa che si legge entrando. */
body[data-page="home"] .landing { display: flex; flex-direction: column; }
.centrale {
  /* Alta quanto la finestra meno la barra: entrando si vede una schermata
     bianca con la sola frase, e il piede sta appena sotto, da raggiungere
     scorrendo. 58px e' l'altezza della barra, bordo compreso. */
  flex: 1 1 auto;
  min-height: calc(100svh - 58px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 32px;
}
@media (max-width: 860px) {
  /* Stretta la barra va su due righe: occupa circa il doppio. */
  .centrale { min-height: calc(100svh - 104px); }
}
.centrale h1 {
  font-size: clamp(30px, 5.4vw, 64px);
  line-height: 1.08;
  text-align: center;
  max-width: 16em;
  margin: 0;
}


/* --- Una sezione: la fotografia in colonna a sinistra, gli articoli a destra ---
   La foto tiene le sue proporzioni, quindi una verticale resta verticale e una
   orizzontale resta orizzontale. La colonna e' piu' larga della misura di
   lettura normale perche' deve reggere due colonne senza schiacciarle.
   La foto e' appiccicata in alto: l'elenco e' lungo e senza questo resterebbe
   mezza pagina di bianco accanto agli ultimi articoli. */
.block.sezione-doppia {
  max-width: 1240px;
  display: grid;
  grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.sezione-doppia__testo { min-width: 0; }
.sezione-doppia h2 { margin-top: 0; }
.foto-colonna {
  display: block;
  width: 100%;
  height: auto;
  position: sticky;
  top: 96px;
}
@media (max-width: 980px) {
  .block.sezione-doppia { grid-template-columns: 1fr; gap: 34px; }
  .foto-colonna { position: static; max-width: 420px; }
}

/* --- About: la storia in prima persona e poi la biografia --- */
.pagina-about .about-storia p,
.pagina-about .about-bio p {
  max-width: 34em;
  margin: 0 0 22px;
  line-height: 1.62;
}
.pagina-about .about-storia p:first-child {
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.5;
}
.pagina-about h3 {
  font-size: clamp(17px, 1.4vw, 19px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--soft);
  margin: 54px 0 20px;
  padding-top: 26px;
  border-top: 1px solid var(--hair);
}

/* --- I quattro passi possibili, sopra il piede ---
   Stanno su ogni pagina tranne la home. Portano tutti a Realux: la newsletter,
   la chiamata, la richiesta di accesso e la posta di Carolina. */
.azioni {
  max-width: 1240px;
  margin: 96px auto 0;
  padding: 44px 32px 0;
  border-top: 1px solid var(--hair);
}
.azioni-eti {
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 24px;
}
.azioni-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.bottone {
  display: inline-block;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: var(--paper);
  padding: 13px 22px;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.bottone:hover,
.bottone:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.foot-col--news .bottone { margin: 4px 0 12px; }
@media (max-width: 620px) {
  .azioni { margin-top: 64px; padding: 34px 20px 0; }
  .azioni-fila { flex-direction: column; align-items: stretch; }
  .bottone { text-align: center; }
}

/* --- La firma in fondo a un articolo --- */
.firma {
  font-style: italic;
  font-size: 19px;
  margin: 44px 0 0;
  color: var(--ink);
}

/* --- La hero: la frase e sotto i quattro passi --- */
.centrale-dentro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
}
.centrale-dentro .azioni-fila { justify-content: center; }

/* --- L'iscrizione alla newsletter nel pie' di pagina ---
   Stesso modulo del pie' di pagina di realux.it: email, pulsante, e il
   consenso esplicito che parte non spuntato. */
.iscriviti-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 0;
}
.iscriviti-form input[type="email"] {
  flex: 1 1 190px;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hair);
  padding: 12px 13px;
}
.iscriviti-form input[type="email"]:focus {
  outline: none;
  border-color: var(--ink);
}
.iscriviti-form button {
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.iscriviti-form button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.iscriviti-form button:disabled { opacity: 0.5; cursor: default; }
.iscriviti-consenso {
  flex: 1 1 100%;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--soft);
}
.iscriviti-consenso input { margin-top: 3px; flex: none; }
.iscriviti-esito { font-size: 14px; margin: 12px 0 0; color: var(--ink); }
.iscriviti-esito--fatta { color: var(--soft); }

/* =====================================================================
   TELEFONO
   Misurato a 390 pixel, che e' la larghezza di un iPhone normale.
   Il problema non era l'impaginazione — niente sforava — ma la mano:
   le voci della barra erano alte 27 pixel e i pulsanti della home
   restavano stretti in mezzo alla riga invece di occuparla tutta.
   Quarantaquattro pixel e' la misura sotto la quale un dito sbaglia.
   ===================================================================== */
@media (max-width: 760px) {

  /* Le voci della barra: stessa dimensione a vedersi, area piu' alta da
     toccare. Il margine negativo tiene la barra della stessa altezza. */
  .navbar-voci a {
    padding: 9px 0 11px;
    margin: -9px 0 -11px;
  }
  .navbar-lingua { padding: 9px 1px 11px; }

  /* I quattro passi, in colonna e larghi quanto la riga. */
  .centrale-dentro { align-items: stretch; gap: 40px; }
  .centrale-dentro .azioni-fila { flex-direction: column; }
  .centrale-dentro .bottone { text-align: center; }
  .bottone { padding: 15px 22px; }

  /* La frase in home: sotto i 30 pixel diventava piccola in mezzo al bianco. */
  .centrale h1 { font-size: clamp(32px, 8.4vw, 44px); }
  .centrale { padding: 56px 24px; }

  /* Le voci di un indice: il bersaglio e' tutta la riga, non solo il titolo. */
  .entries .entry { padding-top: 18px; padding-bottom: 18px; }

  /* Il modulo della newsletter: campo e pulsante alti uguali e pieni. */
  .iscriviti-form input[type="email"],
  .iscriviti-form button { flex: 1 1 100%; min-height: 48px; }
  .iscriviti-consenso { font-size: 15px; }

  /* I collegamenti del piede, uno sotto l'altro, con spazio fra le dita. */
  .foot-col a, #piedePagine a { display: inline-block; padding: 9px 0; }
  .foot-riga a { display: inline-block; padding: 9px 0; }

  /* Il nome in alto a sinistra e' un collegamento alla home. */
  .navbar-nome { padding: 9px 0; margin: -9px 0; }
  .navbar-lingua { padding: 13px 1px; margin: -13px 0; }

  /* La casella del consenso: piccola da toccare, ma si tocca l'etichetta. */
  .iscriviti-consenso input { width: 18px; height: 18px; }

  /* Torna all'indice, la storia, la home: stavano sotto i venti pixel. */
  #backToIndex, #storyLink, #navHome, .onward-home a {
    display: inline-block;
    padding: 12px 0;
  }
}

/* Su iOS il testo in orizzontale veniva ingrandito da solo. */
html { -webkit-text-size-adjust: 100%; }


/* --- La chat della home -------------------------------------------
   Stessa carta, stesso inchiostro, stesso Times. La barra e' l'unica
   cosa arrotondata del sito: serve che si riconosca come un posto in
   cui si scrive, senza diventare un oggetto di un altro sito. */

/* Con la barra sotto, la frase non puo' restare alta 64px: le due cose
   insieme non entrerebbero in una schermata. */
body[data-page="home"] .centrale h1 {
  font-size: clamp(26px, 4vw, 44px);
  max-width: 14em;
  /* Niente margine: .centrale-dentro e' gia' una colonna con 52px fra
     un elemento e l'altro, e i due valori si sommerebbero. */
  margin: 0 auto;
}
body[data-page="home"] .centrale {
  align-items: flex-start;
  padding-top: clamp(64px, 14vh, 150px);
}

.chat {
  /* .centrale-dentro e' una colonna centrata: senza width la barra si
     stringe attorno al testo e taglia la domanda dentro al campo. */
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
}

.chat-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 6px 8px 6px 24px;
  background: var(--paper);
  transition: border-color 0.15s;
}
.chat-barra:focus-within { border-color: var(--ink); }

.chat-barra input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  padding: 10px 0;
}
.chat-barra input:focus { outline: none; }
.chat-barra input::placeholder { color: var(--soft); opacity: 1; }

.chat-barra button {
  flex: none;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0.06em;
  padding: 11px 26px;
  cursor: pointer;
}
.chat-barra button:hover { opacity: 0.82; }
.chat-barra button[disabled] { opacity: 0.35; cursor: default; }




@media (max-width: 560px) {
  /* Stretto, il bottone accanto al campo lascia due centimetri per
     scrivere: va sotto, largo quanto la riga. */
  .chat-barra {
    flex-wrap: wrap;
    border-radius: 22px;
    padding: 8px 16px 12px;
  }
  .chat-barra input { flex-basis: 100%; font-size: 17px; }
  .chat-barra button { flex: 1 1 100%; padding: 12px; }
}

/* La riga sopra la barra: dice a cosa serve la chat. Sta sotto l'hook,
   quindi deve pesare meno di quello e piu' della nota. */
.chat-cta {
  margin: 0 0 18px;
  text-align: center;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.35;
  color: var(--ink);
}
@media (max-width: 560px) {
  .chat-cta { font-size: 18px; margin-bottom: 14px; }
}

/* Sotto la barra, e solo quando una conversazione di prima e' ancora nel
   pannello chiuso: e' il solo modo di sapere che c'e' ancora. */
.chat-riprendi {
  display: block;
  margin: 18px auto 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hair);
  font-family: inherit;
  font-size: 16px;
  color: var(--soft);
  padding: 2px 1px;
  cursor: pointer;
}
.chat-riprendi:hover { color: var(--ink); border-bottom-color: var(--ink); }


/* --- Il pannello della conversazione ------------------------------
   La barra apre questo, e la home resta dov'e'. Prima le risposte si
   attaccavano sotto la barra, dentro la pagina: la home si allungava a
   ogni scambio e la barra restava su in cima (Carolina, 25 set 2026).

   Stessa carta, stesso inchiostro, stesso Times. Quello che cambia e' che
   il filo ha un posto suo, che scorre da se', con chi risponde scritto in
   testa e il campo fisso in fondo: la forma di Aurelia sulla piattaforma
   di Realux, in bianco e nero.
   ----------------------------------------------------------------- */

/* Con il pannello aperto non scorre la pagina, scorre il filo. */
html.cdchat-aperta { overflow: hidden; }

.cdchat {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.cdchat__velo {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.2);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.cdchat.is-aperta .cdchat__velo { opacity: 1; }

.cdchat__foglio {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  height: min(680px, calc(100vh - 48px));
  height: min(680px, calc(100dvh - 48px));
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 22px;
  box-shadow: 0 40px 90px -40px rgba(17, 17, 17, 0.45);
  overflow: hidden;
  /* Sale verso il centro, dove sta la barra che l'ha aperto, e ci rientra
     quando si chiude. */
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
.cdchat.is-aperta .cdchat__foglio { opacity: 1; transform: none; }

/* --- La testata: chi risponde, e cosa sta facendo --------------- */
.cdchat__testa {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 15px 15px 22px;
  background: var(--ink);
  color: var(--paper);
}
.cdchat__chi { display: flex; align-items: center; gap: 13px; min-width: 0; }
.cdchat__colonna { display: flex; flex-direction: column; min-width: 0; }
.cdchat__colonna strong { font-size: 19px; line-height: 1.2; }

/* Il posto della riga di stato e' fisso in altezza: il nome sopra non si
   muove quando "rispondo con quello che ho scritto" diventa "sto
   scrivendo". */
.cdchat__stato {
  display: block;
  height: 1.4em;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.4em;
  color: var(--paper);
  opacity: 0.64;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Un cerchio pieno e un anello che si allarga e svanisce sopra di lui: il
   respiro di una cosa accesa. Lento mentre aspetta, corto mentre
   risponde. Lo stesso segnale, un altro passo. */
.cdchat__punto {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
}
.cdchat__punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--paper);
  animation: cdchat-respiro 2800ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.cdchat__punto.is-occupata::after { animation-duration: 1100ms; }
@keyframes cdchat-respiro {
  0%        { transform: scale(1);   opacity: 0.7; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

.cdchat__x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--paper);
  opacity: 0.68;
  cursor: pointer;
  transition: opacity 0.18s ease, background-color 0.18s ease;
}
.cdchat__x svg { width: 18px; height: 18px; }
.cdchat__x:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }

/* --- Il filo ---------------------------------------------------- */
.cdchat__filo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.cdchat__fondo { flex: none; height: 1px; }

.cdchat__riga {
  margin: 0;
  max-width: 86%;
  white-space: pre-wrap;    /* il modello va a capo: si rispetta */
  overflow-wrap: anywhere;
}

/* La domanda sta a destra con l'inchiostro dentro, la risposta sta a
   sinistra sulla carta: si vede da che parte arriva prima di leggerla. */
.cdchat__io {
  align-self: flex-end;
  padding: 11px 18px;
  border-radius: 20px;
  background: var(--ink);
  color: var(--paper);
  font-size: 17px;
  line-height: 1.5;
}
.cdchat__lei {
  font-size: 19px;
  line-height: 1.6;
}
.cdchat__lei.is-guaio { color: var(--soft); }

/* Finche' scrive, un trattino la segue: dice che non e' finita, e che
   quello che manca sta arrivando. */
.cdchat__lei.is-scrive::after {
  content: "";
  display: inline-block;
  vertical-align: -2px;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  background: var(--ink);
  animation: cdchat-tratto 900ms steps(1, end) infinite;
}
@keyframes cdchat-tratto { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* L'attesa ha la forma di una risposta che sta arrivando, non di un
   cerchio che gira: tre punti nel posto in cui comparira' il testo. */
.cdchat__puntini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 1.6em;
}
.cdchat__puntini i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--soft);
  animation: cdchat-punti 1200ms ease-in-out infinite;
}
.cdchat__puntini i:nth-child(2) { animation-delay: 160ms; }
.cdchat__puntini i:nth-child(3) { animation-delay: 320ms; }
@keyframes cdchat-punti {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* --- Il filo vuoto: cosa si puo' chiedere ----------------------- */
.cdchat__saluto { align-self: stretch; }
.cdchat__saluto p {
  margin: 0 0 16px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--soft);
}
.cdchat__spunti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cdchat__spunti button {
  width: 100%;
  text-align: left;
  padding: 11px 18px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--paper);
  font-family: inherit;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.cdchat__spunti button:hover { border-color: var(--ink); }

/* --- Da dove viene la risposta ---------------------------------- */
.cdchat__fonti {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: -3px 0 4px;
  padding-left: 16px;
  border-left: 1px solid var(--hair);
}
.cdchat__fonti-eti {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
}
.cdchat__fonte {
  display: block;
  align-self: flex-start;
  font-size: 16px;
  line-height: 1.4;
  color: var(--soft);
  border-bottom: 1px solid var(--hair);   /* si deve capire che si clicca */
}
.cdchat__fonte:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* Le fonti che non si aprono: un nome, non un link. Niente sottolineatura,
   cosi' non si prova a cliccarle. */
.cdchat__fonte.senza-link { border-bottom: none; cursor: default; }
.cdchat__fonte.senza-link:hover { color: var(--soft); }
.cdchat__fonte-tit { display: block; }
.cdchat__fonte-som {
  display: block;
  margin-top: 1px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--soft);
  opacity: 0.8;
}
.cdchat__fonte:hover .cdchat__fonte-som { opacity: 1; }

/* --- Dove andare, sotto la risposta ------------------------------
   Il primo e' pieno perche' e' il passo che lei considera giusto; l'altro
   resta un'alternativa, e si vede che lo e'. */
.cdchat__vai {
  align-self: stretch;
  margin: -2px 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cdchat__vai a,
.cdchat__vai button {
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  padding: 8px 18px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cdchat__vai a { text-decoration: none; }
.cdchat__vai .is-primo { background: var(--ink); color: var(--paper); }
.cdchat__vai a:hover,
.cdchat__vai button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* --- Quando la risposta non arriva ------------------------------ */
.cdchat__ritenta {
  margin: -4px 0 0;
  font-size: 16px;
  color: var(--soft);
}
.cdchat__ritenta button {
  background: none;
  border: none;
  border-bottom: 1px solid var(--hair);
  font-family: inherit;
  font-size: 16px;
  color: var(--soft);
  padding: 0 1px;
  cursor: pointer;
}
.cdchat__ritenta a { font-size: 16px; color: var(--soft); }
.cdchat__ritenta button:hover,
.cdchat__ritenta a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- Il campo, fisso in fondo ----------------------------------- */
.cdchat__scrivi {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 14px 16px 10px;   /* il pie con "lasciami i contatti" viene subito sotto */
  border-top: 1px solid var(--hair);
  background: var(--paper);
}
.cdchat__scrivi textarea {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 132px;
  border: 1px solid var(--hair);
  border-radius: 22px;
  background: var(--paper);
  font-family: inherit;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  padding: 11px 18px;
  resize: none;
  overflow-y: auto;
}
.cdchat__scrivi textarea:focus { outline: none; border-color: var(--ink); }
.cdchat__scrivi textarea::placeholder { color: var(--soft); opacity: 1; }

/* Il bottone d'invio e' un cerchio con dentro una freccia, non il pulsante
   squadrato del resto del sito: la regola generale dei submit (padding
   13x40, bordo, maiuscolo) lo allargava a ottanta pixel e ci schiacciava
   dentro la freccia fino a farla sparire. Da qui il nome della classe
   ripetuto: serve a pesare piu' di `button[type="submit"]`. */
.cdchat .cdchat__manda {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: var(--ink);
  color: var(--paper);
  text-transform: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.cdchat .cdchat__manda svg { width: 20px; height: 20px; }
.cdchat .cdchat__manda:hover { opacity: 0.82; background: var(--ink); color: var(--paper); }
.cdchat .cdchat__manda[disabled] { opacity: 0.22; cursor: default; }

/* --- Lasciare i propri contatti, dentro al filo ------------------
   Quando la chat non ha una risposta, la conversazione finiva in un
   indirizzo email da copiare a mano. Questo modulo si apre li' dove
   serve, e va alla stessa rotta del modulo in fondo al sito. */
.cdchat__modulo {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 2px 0 6px;
  padding: 18px;
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: var(--paper);
}
.cdchat__modulo-intro {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}
.cdchat__modulo label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cdchat__modulo label span {
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft);
}
.cdchat__modulo input,
.cdchat__modulo textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  padding: 6px 1px;
  resize: none;
}
.cdchat__modulo input:focus,
.cdchat__modulo textarea:focus { outline: none; border-bottom-color: var(--ink); }

/* La trappola per i robot: fuori dallo schermo, non nascosta con display,
   perche' un campo con display:none certi robot lo saltano. */
.cdchat__esca {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.cdchat__modulo-nota {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--soft);
}
.cdchat__modulo-fila {
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.cdchat .cdchat__modulo-invia {
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: none;
  padding: 10px 26px;
  cursor: pointer;
}
.cdchat .cdchat__modulo-invia:hover { opacity: 0.82; background: var(--ink); color: var(--paper); }
.cdchat .cdchat__modulo-invia[disabled] { opacity: 0.35; cursor: default; }
.cdchat__modulo-annulla {
  border: none;
  background: none;
  border-bottom: 1px solid var(--hair);
  font-family: inherit;
  font-size: 16px;
  color: var(--soft);
  padding: 0 1px;
  cursor: pointer;
}
.cdchat__modulo-annulla:hover { color: var(--ink); border-bottom-color: var(--ink); }
.cdchat__modulo-stato {
  margin: 0;
  min-height: 1.5em;
  font-size: 16px;
  color: var(--soft);
}
.cdchat__modulo-stato:empty { min-height: 0; }
.cdchat__modulo-stato.is-guaio { color: var(--ink); }

/* La riga sotto al campo: si puo' sempre chiedere una risposta a lei. */
.cdchat__pie {
  flex: none;
  margin: 0;
  padding: 0 16px 14px;
  text-align: center;
  background: var(--paper);
}
.cdchat__pie button {
  border: none;
  background: none;
  border-bottom: 1px solid var(--hair);
  font-family: inherit;
  font-size: 15px;
  color: var(--soft);
  padding: 1px;
  cursor: pointer;
}
.cdchat__pie button:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Sul telefono il pannello e' lo schermo: un foglio che sale dal basso,
   perche' un pannello con i bordi attorno lascerebbe due dita di pagina
   inutilizzabile sui lati. */
@media (max-width: 640px) {
  .cdchat { padding: 0; align-items: stretch; }
  .cdchat__foglio {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    border: none;
    border-radius: 0;
    transform: translateY(26px);
  }
  .cdchat__filo { padding: 18px 16px; }
  .cdchat__modulo { padding: 16px 14px; }
  .cdchat__pie { padding: 0 14px 12px; }
  .cdchat__lei { font-size: 18px; }
  .cdchat__io  { font-size: 16px; }
  .cdchat__riga { max-width: 92%; }
}

/* Chi ha chiesto meno movimento: il pannello c'e', e basta. */
@media (prefers-reduced-motion: reduce) {
  .cdchat__velo,
  .cdchat__foglio { transition: none; }
  .cdchat__punto::after,
  .cdchat__puntini i,
  .cdchat__lei.is-scrive::after { animation: none; }
}