/* ============================================================
   INYUVATE — internal pages · v2 editorial refinement
   ============================================================ */

.section { padding-top: calc(var(--section) * .65); }
.section--tight { padding-top: calc(var(--section) * .4); }

/* ---------- axes diagram (dimensions overview) ---------- */
.axes-frame { background: var(--bone-2); --ink-3: rgba(237, 234, 225, .80); border-radius: var(--r-panel); padding: clamp(2.5rem, 7vh, 4rem) clamp(1.5rem, 4vw, 3rem); position: relative; }
.axes-frame .frame-meta { position: absolute; top: 1.1rem; left: clamp(1.5rem, 4vw, 3rem); }
.axes-frame .frame-meta--r { left: auto; right: clamp(1.5rem, 4vw, 3rem); }
.axes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.axis { display: grid; justify-items: center; gap: .9rem; text-align: center; }
.axis .name { font-family: var(--serif); font-weight: var(--fw-display); font-size: 1.1rem; }
.axis .role { font-family: var(--mono); font-size: var(--micro); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.axis-line { position: relative; width: 1px; height: clamp(110px, 20vh, 190px); background: var(--line); }
.axis-line::before, .axis-line::after {
  content: ""; position: absolute; left: 50%; transform: translate(-50%, 0);
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--ink); background: var(--bone);
}
.axis-line::before { top: -5px; }
.axis-line::after { bottom: -5px; border-color: var(--clay); }
@media (max-width: 720px) {
  .axes { grid-template-columns: repeat(2, 1fr); gap: 3rem 1rem; }
}

/* ---------- chapters — magazine spreads ---------- */
.chapter { padding-top: calc(var(--section) * .8); position: relative; }
.chapter-head { position: relative; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.chapter-head .k { display: block; margin-bottom: 1.8rem; }
.chapter-head h2 {
  font-family: var(--serif); font-weight: var(--fw-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.1; letter-spacing: -.015em; max-width: 12em;
}
.chapter-ghost {
  position: absolute; right: -.05em; top: .2em; z-index: -1;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(3.2rem, 7.5vw, 6.5rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(181, 160, 138, .30);
  pointer-events: none; user-select: none;
}
.chapter .q { margin: clamp(2.4rem, 6vh, 4rem) 0 clamp(2rem, 4.5vh, 3rem) clamp(0rem, 6vw, 5rem); }
.chapter-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--colgap); align-items: start; }
.chapter-grid .prose { grid-column: 2 / 8; max-width: 34em; }
.chapter-grid .chapter-fig { grid-column: 9 / 13; }
.chapter--flip .chapter-grid .prose { grid-column: 6 / 12; }
.chapter--flip .chapter-grid .chapter-fig { grid-column: 1 / 5; order: -1; }
.chapter-fig { aspect-ratio: 4 / 5; position: sticky; top: 8rem; max-width: min(100%, 300px); justify-self: end; }
.chapter--flip .chapter-fig { justify-self: start; }
.chapter--flip .chapter .deepen { margin-top: clamp(2.5rem, 6vh, 4rem); margin-left: clamp(0rem, 8vw, 8.4rem); max-width: 46em; }
@media (max-width: 880px) {
  .chapter-grid .prose, .chapter--flip .chapter-grid .prose { grid-column: 1 / 13; }
  /* relative, non static: serve solo a togliere lo sticky, ma il riquadro deve
     restare il riferimento dell'immagine, che e' posizionata in assoluto per
     il parallasse (vedi .fig[data-plx] img). Con static l'immagine usciva dal
     riquadro e si stirava sulla pagina.
     `top: auto` è indispensabile: senza, gli 8rem dello sticky restavano e su
     un elemento relative diventano uno spostamento vero di 128px, che
     mandava l'immagine SOPRA il paragrafo che segue (93px di sovrapposizione
     misurati a 393px). */
  .chapter-grid .chapter-fig, .chapter--flip .chapter-grid .chapter-fig { grid-column: 1 / 13; order: -1; position: relative; top: auto; aspect-ratio: 16 / 10; max-width: 100%; justify-self: stretch; margin: 0 0 2.2rem !important; }
  .chapter .q { margin-left: 0; }
  .chapter .deepen { margin-left: 0; }
  .chapter-ghost { font-size: 4rem; top: -.5em; }
}

/* ---------- essay (extended domain / vision / science) ---------- */
.essay { max-width: 680px; }
.essay > * + * { margin-top: 1.5em; }
.essay p { color: var(--ink-2); }
.essay .lead { font-family: var(--serif); font-weight: 400; font-size: var(--d4); line-height: 1.5; color: var(--ink-2); }
.essay-rule { border: 0; border-top: 1px solid var(--line); margin: clamp(2.5rem, 6vh, 4rem) 0 !important; width: 56px; }
.essay .note { font-family: var(--mono); font-size: .74rem; line-height: 1.7; letter-spacing: 0; color: var(--ink-3); max-width: 46em; }

/* essay pages (essay-01/02, set 23 set 2026 from the final PDFs):
   the statements the PDF sets larger, the one thought set in italics,
   the PDF download and the reference list */
.essay .essay-pull {
  position: relative; margin-block: clamp(2.2rem, 5vh, 3.2rem);
  padding-left: clamp(1.4rem, 3vw, 2.2rem);
  font-family: var(--serif); font-weight: var(--fw-display); font-size: var(--d3);
  line-height: 1.4; letter-spacing: -.005em; color: var(--ink); max-width: 30em;
}
.essay .essay-pull::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: 1px; background: var(--clay); }
.essay .essay-pull--thought { font-style: italic; font-weight: var(--fw-emph); }
.essay .essay-dl { margin-top: clamp(2.4rem, 6vh, 3.6rem); }
.essay-refs ol { list-style: none; margin: 1.2rem 0 0; padding: 0; counter-reset: ref; }
.essay-refs li {
  position: relative; padding-left: 2.2rem; margin-top: .85rem;
  font-size: .8125rem; line-height: 1.6; color: var(--ink-3); overflow-wrap: anywhere;
}
.essay-refs li::before {
  counter-increment: ref; content: counter(ref, decimal-leading-zero);
  position: absolute; left: 0; top: .12em; font-family: var(--mono); font-size: .68rem; color: var(--clay);
}
.essay-refs li em { font-style: italic; }
.essay-refs a { border-bottom: 1px solid var(--line); transition: color .4s var(--ease), border-color .4s var(--ease); }
.essay-refs a:hover { color: var(--ink); border-color: var(--clay); }
.essay-refs .micro { color: var(--ink-3); }

/* cognitive-integrity masthead: keep the two-tone treatment but hold it on one line on mobile */
@media (max-width: 720px) {
  .phero h1.ttl-inline .tail { display: inline; padding-left: .3em; }
}

/* .essay--offset (la colonna rientrata di Vision) è stata rimossa: era uno
   dei quattro allineamenti diversi che la pagina aveva. Tutto sta ora nella
   colonna 2 — vedi il blocco "Vision" in fondo a questo foglio. */

/* ---------- marginalia — sticky side rail ---------- */
.marginalia { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--colgap); padding-top: calc(var(--section) * .6); }
.marginalia .side { grid-column: 1 / 4; position: sticky; top: 7.5rem; align-self: start; padding-right: clamp(1rem, 3vw, 2.5rem); }
.marginalia .side .idx { display: block; margin-bottom: 1rem; }
.marginalia .side h2 { font-family: var(--serif); font-weight: var(--fw-display); font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.2; letter-spacing: -.01em; }
.marginalia .side::after { content: ""; display: block; width: 34px; height: 1px; background: var(--clay); margin-top: 1.6rem; }
.marginalia .essay { grid-column: 5 / 12; }
@media (max-width: 880px) {
  .marginalia .side { grid-column: 1 / 13; position: static; margin-bottom: 2rem; }
  .marginalia .essay { grid-column: 1 / 13; }
}

/* ---------- loop diagram (science) — four dimension nodes orbiting the ring ---------- */
.loop-wrap { position: relative; width: min(500px, 84vw); aspect-ratio: 1; margin: clamp(3.5rem, 9vh, 6rem) auto; overflow: visible; }
.loop-wrap .ring-organic { position: absolute; inset: 0; }
.loop-center { position: absolute; inset: 24%; display: grid; place-items: center; text-align: center; }
.loop-center p { font-family: var(--serif); font-weight: var(--fw-display); font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.3; color: var(--title); max-width: 8em; }
.loop-orbit { position: absolute; inset: 10%; animation: node-orbit 90s linear infinite; pointer-events: none; }
.loop-node { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: .55rem; text-align: center; animation: node-orbit 90s linear infinite reverse; }
.loop-node i { width: 10px; height: 10px; border-radius: 50%; background: var(--clay); }
.loop-node span { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.loop-node--1 { left: 50%; top: 0; }
.loop-node--2 { left: 100%; top: 50%; }
.loop-node--3 { left: 50%; top: 100%; }
.loop-node--4 { left: 0; top: 50%; }
@keyframes node-orbit { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .loop-orbit, .loop-node { animation: none; } }
@media (max-width: 560px) {
  .loop-wrap { width: 90vw; }
  .loop-orbit { inset: 17%; }
  .loop-center { inset: 26%; }
  .loop-node span { font-size: .54rem; letter-spacing: .08em; }
}

/* two-sided support (science) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: clamp(2rem, 5vh, 3rem); }
.essay > .duo { margin-block: clamp(2.4rem, 5.5vh, 3.4rem); }
.duo .panel .micro { color: var(--petrol); }
@media (max-width: 720px) {
  .duo { grid-template-columns: 1fr; }
  /* stacked panels: box 2→3 sits on the same rhythm as 1→2 (no extra gap) */
  .duo + .duo { margin-top: 1.2rem; }
}

/* ---------- training formats ---------- */
.formats { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--colgap); row-gap: 1.4rem; margin-top: clamp(2rem, 5vh, 3.5rem); }
.formats .panel { display: flex; flex-direction: column; }
.formats .panel:nth-child(1) { grid-column: 1 / 7; }
.formats .panel:nth-child(2) { grid-column: 7 / 13; }
.formats .panel .figures { margin-top: auto; padding-top: 2.4rem; display: flex; gap: 2.8rem; }
.formats .fig-num { font-family: var(--serif); font-weight: var(--fw-display); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; }
.formats .fig-num small { display: block; font-family: var(--mono); font-size: var(--micro); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-top: .6rem; }
@media (max-width: 880px) {
  .formats .panel:nth-child(1), .formats .panel:nth-child(2) { grid-column: 1 / 13; margin-top: 0; }
}

/* ---------- image band — full bleed with hanging caption ----------
   Larga quanto tutto il resto della pagina (la stessa misura di .wrap: il
   riquadro dei quattro moduli, i pannelli, le colonne di testo) e alta di
   conseguenza. Prima era una striscia di 920x320 dentro una pagina da 1280:
   rientrava rispetto a tutto ciò che aveva sopra e sotto, e leggeva bassa
   (feedback ago 2026). */
/* Le due misure che decidono quanto è grande la banda sono DICHIARATE qui,
   non ereditate: prima la larghezza era il numero 1280 ricopiato da .wrap e
   l'altezza un rapporto scritto nella regola, quindi bastava una riscrittura
   di questo blocco per riportarle al default di sistema senza accorgersene.
   Chi vuole cambiarle tocca solo --band-w / --band-ar. */
.band {
  /* 70% della misura piena, centrata. A tutta pagina l'immagine si staccava
     dal testo e leggeva come un intervallo fra due pagine diverse; anche
     l'aria attorno era troppa, quindi lo stacco prima e dopo scende a metà
     (revisione ago 2026). */
  --band-w: 896px;
  --band-ar: 11 / 5;      /* alta quanto serve per non leggere bassa */
  margin-top: calc(var(--section) * .5); position: relative;
  width: min(var(--band-w), 100% - var(--gutter) * 2); margin-inline: auto;
}
/* e la sezione che la segue non riparte con lo stacco pieno */
.band + section { padding-top: calc(var(--section) * .4); }
.band .fig { aspect-ratio: var(--band-ar); border-radius: var(--r-panel); }
/* su telefono la larghezza è già quella della pagina: quello che cambia è
   l'altezza, e 16:10 era troppo poca */
@media (max-width: 720px) { .band { --band-ar: 4 / 3; } }
.band-caption {
  position: absolute; left: 1.1rem; bottom: 1rem;
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .04em; text-transform: uppercase;
  color: rgba(237,234,225,.85); mix-blend-mode: difference;
}

/* ---------- cta row ---------- */
.cta-row { padding: calc(var(--section) * .7) 0 clamp(3rem, 8vh, 6rem); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--colgap); align-items: end; row-gap: 2.5rem; }
/* variante colonna centrale ridotta (allineata all'accordion FAQ, 760px) */
.cta-row.cta-row--narrow { width: min(760px, 100% - var(--gutter) * 2); margin-inline: auto; }
.cta-row .pull { grid-column: 1 / 9; }
.cta-row .btn { grid-column: 10 / 13; justify-self: end; }
@media (max-width: 880px) {
  .cta-row .pull, .cta-row .btn { grid-column: 1 / 13; justify-self: start; }
}
/* ---------- .cta-row--stack: il bottone SOTTO la frase, non accanto ----------
   Su The Training l'Enquire stava in fondo a destra, cioè a un dito dal
   "Next → Vision" della sezione successiva, che sta nello stesso angolo: due
   modi di uscire diversi, alla stessa altezza e allo stesso bordo, si
   leggevano come una coppia di bottoni della stessa fila. Sotto la frase che
   lo chiede il legame è quello giusto e la navigazione resta un'altra cosa
   (feedback 12 ago 2026). Vale anche su desktop: è lì che il problema c'era. */
.cta-row--stack { align-items: start; row-gap: 1.7rem; }
.cta-row--stack .pull { grid-column: 1 / 9; }
.cta-row--stack .btn { grid-column: 1 / 9; justify-self: start; }

/* ---------- prev / next ---------- */
.pn { margin-top: var(--section); }
.pn .wrap { display: flex; justify-content: space-between; gap: 2rem; padding-block: 2.4rem; }
.pn a { display: grid; gap: .5rem; }
.pn a .micro { transition: color .4s var(--ease); }
.pn a:hover .micro { color: var(--clay); }
.pn a .t { font-family: var(--serif); font-weight: var(--fw-display); font-size: 1.15rem; }
.pn a.next { text-align: right; margin-left: auto; }

/* ---------- faq ---------- */
.faq-list .deepen-inner { max-width: 34em; }
/* pannello glass attorno all'accordion: preserva la leggibilità dalla linea-filo ruggine */
.faq-list .deepen {
  position: relative; z-index: 1;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid var(--line); border-top: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: clamp(.4rem, 1.5vw, 1rem) clamp(1.4rem, 3.2vw, 2.6rem);
}
.faq-list .deepen-item:last-child { border-bottom: 0; }
@media (max-width: 620px) { .faq-list .deepen { padding-inline: clamp(1.1rem, 4vw, 1.6rem); } }

/* the thread's styles now live in style.css: since ago 2026 the homepage draws
   the same line, and it does not load this sheet. */

/* ============================================================
   ESSAY INDEX — hairline rows, numeral · title · read
   ============================================================ */
.essay-index { display: grid; }
.ei-row {
  display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: baseline;
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.1rem, 2.6vh, 1.6rem) 0;
  border-top: 1px solid var(--line);
  transition: opacity .4s var(--ease);
}
.essay-index .ei-row:last-child { border-bottom: 1px solid var(--line); }
.ei-n { color: var(--clay); }
.ei-t {
  font-family: var(--serif); font-weight: var(--fw-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.25; letter-spacing: -.012em;
  color: var(--title);
}
.ei-m { color: var(--ink-3); transition: color .4s var(--ease), translate .4s var(--ease); }
.ei-row:hover .ei-m { color: var(--clay); translate: 4px 0; }
@media (max-width: 620px) {
  .ei-row { grid-template-columns: 2.6rem 1fr; row-gap: .5rem; }
  .ei-m { grid-column: 2; }
}

/* ---------- always a little air before the footer ----------
   Rule for every inner page: whatever a page ends with, it must not sit
   flush against the footer. The two deliberate exceptions carry their own
   bottom padding: .pn (prev/next, designed to meet the footer) and
   .cta-row / .contact-grid (already padded). */
#main > :last-child:not(.pn):not(.cta-row):not(script) {
  padding-bottom: clamp(3rem, 8vh, 6rem);
}

/* short pages (privacy, a stub essay): the footer settles at the bottom of the
   viewport instead of floating mid-screen with empty ground beneath it.
   Inner pages only — the homepage footer is a fixed parallax reveal. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
#main { flex: 1 0 auto; }
.footer { flex-shrink: 0; }

/* ============================================================
   REVISIONI — feedback sul sito live, ago 2026
   Ogni blocco riporta la richiesta a cui risponde.
   ============================================================ */

/* ---------- l'introduzione è UNA cosa sola ----------
   Il secondo paragrafo stava dall'altra parte della pagina, due misure sotto
   il lede e a una sezione intera di distanza: le due metà della stessa
   introduzione si leggevano come due appunti scollegati. Stessa colonna,
   stessa misura, un solo passo di distanza. (Framework · In Practice ·
   Cognitive Integrity) */
.section--continue { padding-top: 0; margin-top: -1rem; }
.page-intro {
  grid-column: 6 / 13; max-width: var(--measure);
  font-size: 1.125rem; line-height: 1.6; color: var(--ink-2);
}
@media (max-width: 880px) {
  .page-intro { grid-column: 1 / 13; font-size: 1.0625rem; }
}

/* ---------- i titoli dei moduli e i loro numeri ----------
   In mono a .68rem le diciture erano l'elemento più debole di riquadri che
   invece sono la struttura della pagina. */
.panel-head .micro { font-size: .78rem; letter-spacing: .05em; color: var(--ink); }
.panel-head .idx, .panel-head .idx b { font-size: .74rem; }

/* L'inversione dei quattro moduli di Framework (carta chiara + testo scuro al
   passaggio) è stata rimossa: non era il comportamento voluto e faceva di
   questa pagina un'eccezione. I riquadri di Framework, Science e Training
   rispondono ora tutti allo stesso modo — vedi .panel in style.css. */

/* ---------- il diagramma dei quattro moduli ----------
   Un punto ruggine percorre lentamente ciascuna linea dall'alto verso il
   basso, e mentre lo fa tiene insieme la parola sopra e quella sotto. Le
   quattro partenze sono sfalsate, così il diagramma non pulsa all'unisono. */
.axis-line i {
  position: absolute; left: 50%; top: 0; translate: -50% -50%;
  width: 7px; height: 7px; border-radius: 50%;
  /* l'alone era rimasto quello della vecchia ruggine: un punto tortora con
     un'aura arancione (13 ago 2026). Ora è l'accento stesso, sfumato. */
  background: var(--clay); box-shadow: 0 0 10px 2px rgba(181, 160, 138, .40);
  opacity: 0; animation: axis-travel 5.6s var(--ease) infinite;
}
.axes .axis:nth-child(2) .axis-line i { animation-delay: 1.1s; }
.axes .axis:nth-child(3) .axis-line i { animation-delay: 2.2s; }
.axes .axis:nth-child(4) .axis-line i { animation-delay: 3.3s; }
@keyframes axis-travel {
  0%           { top: 0;    opacity: 0; }
  9%           { opacity: 1; }
  76%          { opacity: 1; }
  86%, 100%    { top: 100%; opacity: 0; }
}
/* le diciture in basso sono l'altra metà di ogni coppia: vanno lette */
.axis .role { font-size: .74rem; color: var(--ink); letter-spacing: .05em; }
@media (prefers-reduced-motion: reduce) { .axis-line i { animation: none; } }

/* ---------- l'affermazione che chiude la pagina ----------
   Si perdeva nel vuoto in fondo: ora ha la misura di una conclusione, il suo
   filetto ruggine sopra, e l'aria attorno è quella giusta e non quella
   avanzata. */
.cta-row--closing { padding-top: clamp(3rem, 8vh, 5rem); padding-bottom: clamp(2.6rem, 7vh, 4.5rem); }
/* Il corpo è quello della lettura, come la chiusa di Vision: cresceva fino a
   30px e leggeva come un secondo titolo in fondo a una pagina che il titolo
   ce l'ha già in cima. A dirla conclusione bastano il peso, il filetto ruggine
   e l'aria attorno — non la taglia (rev. 12 ago 2026). */
.cta-row--closing .pull {
  grid-column: 2 / 11; max-width: var(--measure);
  font-size: 1.0625rem; line-height: 1.62; letter-spacing: 0;
  font-weight: 600; color: var(--ink);
  position: relative; padding-top: 1.5rem;
}
.cta-row--closing .pull::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 44px; height: 2px; background: var(--clay);
}
/* e la pagina finisce lì: sotto l'affermazione restava un mezzo schermo vuoto
   prima del prev/next */
.page-framework .pn { margin-top: calc(var(--section) * .45); }
@media (max-width: 880px) {
  .cta-row--closing .pull { grid-column: 1 / 13; }
}

/* ---------- In Practice: le tre sezioni respiravano troppo ----------
   Su desktop il vuoto era la voce più forte della pagina: il testo di ogni
   capitolo è breve, l'immagine alta e stretta, e sotto restava mezzo schermo
   di nulla. Meno stacco fra un capitolo e l'altro, testo un gradino più
   grande, immagine un gradino più piccola: la stessa composizione, con le
   proporzioni rifatte sul contenuto che c'è davvero. */
.chapter-grid { margin-top: clamp(1.8rem, 4vh, 2.8rem); }
.page-practice .chapter { padding-top: calc(var(--section) * .46); }
/* ---------- .pair — il blocco testo/immagine ----------
   Nato su In Practice (Uncertainty · Complexity · Performance) e da lì
   promosso a componente: proporzione della griglia, allineamento in alto,
   scala dell'immagine e misura del testo stanno QUI, una volta sola. Vision
   lo riusa così com'è invece di ricopiarne i valori (revisione ago 2026).
   Il ritratto 4:5 era il pezzo più alto della composizione e decideva da solo
   l'altezza della sezione: quadrato, sta accanto al testo invece che
   sovrastarlo. */
.chapter-grid.pair .chapter-fig { max-width: min(100%, 292px); aspect-ratio: 1 / 1; }
.chapter-grid.pair .prose p { font-size: 1.0625rem; line-height: 1.62; }
/* Il testo è più corto dell'immagine: allineato in alto lasciava sotto di sé
   un vuoto grande quanto mezza figura, e la coppia leggeva sbilanciata. Da
   desktop il paragrafo si centra sull'altezza dell'immagine; l'immagine resta
   ancorata in alto perché è lei a dare l'altezza alla riga, ed è sticky
   (richiesta cliente, revisione ago 2026). Su telefono i due sono impilati e
   questa riga non ha effetto. */
.chapter-grid.pair .prose { align-self: center; }
.page-practice .pn { margin-top: calc(var(--section) * .5); }
@media (max-width: 880px) {
  .page-practice .chapter { padding-top: calc(var(--section) * .55); }
  .chapter-grid.pair .chapter-fig { max-width: 100%; }
}

/* ---------- Cognitive Integrity ----------
   1. Il titolo si leggeva come due parole staccate: il "tail" andava a capo
      con un rientro grande quanto mezza pagina. Qui le due parole sono UN
      nome, quindi restano sulla stessa riga a ogni misura.
   2. I tre paragrafi d'apertura ora stanno sulla stessa colonna e in una sola
      progressione di misure: lede → introduzione → affermazione. */
/* .06em oltre allo spazio della parola: le due parole sono un nome, non due
   colonne */
.phero h1.ttl-inline .tail { display: inline; padding-left: .06em; }
.ci-claim { margin-top: clamp(1.8rem, 4.5vh, 3rem); }
.ci-claim .pull { grid-column: 6 / 13; max-width: var(--measure); }
@media (max-width: 880px) { .ci-claim .pull { grid-column: 1 / 13; } }

/* ---------- un link dentro la prosa ----------
   "contact us" non si distingueva dal testo attorno: ruggine, con una
   sottolineatura discreta che si completa al passaggio. */
.inline-cta {
  color: var(--clay); padding-bottom: .12em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: color .4s var(--ease), opacity .4s var(--ease);
}
.inline-cta:hover { opacity: .75; }

/* ---------- Science: il diagramma su telefono ----------
   Sul telefono la giostra girava per novanta secondi e le quattro voci
   arrivavano una alla volta: la struttura — quattro dimensioni attorno a una
   sola organizzazione — non si capiva al primo sguardo, che è l'unica cosa
   che quel disegno deve fare. Qui sta ferma, tutta insieme, e si legge. */
@media (max-width: 720px) {
  .loop-wrap { width: min(420px, 88vw); margin-block: clamp(2.6rem, 7vh, 4.2rem); }
  .loop-orbit, .loop-node { animation: none; }
  .loop-orbit { inset: 12%; }
  .loop-center { inset: 27%; }
  .loop-node span { font-size: .62rem; letter-spacing: .06em; color: var(--ink); }
  .loop-node i { width: 8px; height: 8px; }
  /* le due voci laterali rientrano nella cornice invece di uscirne */
  .loop-node--2 { left: 88%; }
  .loop-node--4 { left: 12%; }
  /* e compare subito: la comparsa lenta era metà del problema */
  .loop-wrap[data-r] { transition-duration: .7s; }
}

/* ---------- The Training: la riga di apertura ----------
   "Structure · Delivery · Profile" sono tre parole sole e su desktop andavano
   a capo dentro due colonne: la riga si prende lo spazio che le serve. Sotto
   i 720 il piede del masthead diventa un blocco e il ritorno a capo torna
   lecito. */
@media (min-width: 721px) {
  .phero-foot .idx { grid-column: 1 / 6; white-space: nowrap; }
}

/* ---------- Vision: un solo allineamento, una sola misura ----------
   Tutti i blocchi stanno nella colonna 2 — la stessa della prosa del blocco
   testo/immagine, e quindi la stessa delle pagine precedenti. La domanda che
   chiude non cresce più di corpo e non cambia colore: è il testo di sempre,
   in semibold. Il peso è l'unica differenza, ed è quello che la fa leggere
   come la conclusione (revisione ago 2026). */
.page-vision .section { padding-top: calc(var(--section) * .45); }
.page-vision .g12 > .essay { grid-column: 2 / 9; }
.page-vision .essay p,
.page-vision .pair .prose p { font-size: 1.0625rem; line-height: 1.62; color: var(--ink); }
/* anche il peso e il colore sono uno solo: il "lead" stava a 400 e la prosa
   del blocco testo/immagine a ink-3, cioè due voci in più su una pagina che
   ne deve avere una */
.page-vision .essay .lead { font-size: 1.0625rem; line-height: 1.62; font-weight: var(--fw-read); }
.vision-close { margin-top: clamp(1.6rem, 4vh, 2.6rem); }
.page-vision .vision-close .pull {
  grid-column: 2 / 9; max-width: var(--measure);
  font-size: 1.0625rem; line-height: 1.62; letter-spacing: 0;
  font-weight: 600; color: var(--ink);
}
.page-vision .pn { margin-top: calc(var(--section) * .5); }
@media (max-width: 880px) {
  .page-vision .g12 > .essay,
  .page-vision .vision-close .pull { grid-column: 1 / 13; max-width: none; }
}

/* ---------- .pair su telefono: le immagini sono la stessa cosa, quindi hanno
   la stessa forma ----------
   Uncertainty e Performance diventavano quadrate, Complexity restava 16:10:
   la regola del capitolo "flip" è più specifica e vinceva. Qui la battono
   entrambe, e sono quadrate ovunque. */
@media (max-width: 880px) {
  .chapter-grid.pair .chapter-fig,
  .chapter--flip .chapter-grid.pair .chapter-fig { aspect-ratio: 1 / 1; }
}

/* Vision: l'immagine sta a lato del paragrafo "Research across…" con lo stesso
   blocco di In Practice. Due sole differenze, e riguardano solo il telefono,
   dove la richiesta era di non cambiare nulla: lì la figura resta SOTTO il
   testo (il componente la porta sopra) e tiene la proporzione che aveva. */
@media (max-width: 880px) {
  .page-vision .chapter-grid.pair .chapter-fig { order: 0; aspect-ratio: 4 / 3; margin: 2.2rem 0 0 !important; }
}
/* Il ritaglio quadrato taglia i lati e la figura che cammina sta sul bordo
   destro: l'inquadratura si sposta verso di lei. */
.page-vision .pair .fig img { object-position: 74% center; }

/* ---------- SEO pass (23 set 2026) ----------
   FAQ questions now sit inside an <h2> (heading hierarchy); the button
   inherits font, so the wrapper must not bring the h2 look with it. */
.deepen-h { font: inherit; }
/* essays index + related rows: a short verbatim excerpt under the title */
.ei-row .ei-x { grid-column: 2; margin-top: .55rem; font-size: .9375rem; line-height: 1.55; color: var(--ink-3); max-width: 40em; }
.ei-row .ei-m { grid-column: 3; grid-row: 1; }
@media (max-width: 620px) { .ei-row .ei-m { grid-column: 2; grid-row: auto; } }
/* the closing statement of The Framework now leads on to The Training */
.cta-row--closing .btn { grid-column: 2 / 11; justify-self: start; }
@media (max-width: 880px) { .cta-row--closing .btn { grid-column: 1 / 13; } }
.cta-row--stack:has(> .btn:only-child) { padding-top: clamp(2.5rem, 7vh, 4.5rem); }
.essay .essay-related { margin-top: clamp(2.8rem, 7vh, 4.2rem); }
.essay-related .essay-index { margin-top: 1rem; }
.essay-related .ei-t { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }