/* ================================================================
   PROVENANCE — the genealogical table, and the leaf of each hand.

   Drawn the way an engraver of 1800 would have drawn a table of
   descent: nothing but rules and set names. No boxes with rounded
   corners, no cards, no colour but the royal of the book. The
   rules are one SVG, plotted in script from the real position of
   every name, so they follow the type at any width instead of
   being guessed at in CSS.

   The gestures obey the house rules: only transform and opacity
   move, the ink itself never fades under the reading line, and
   every entrance is undone again inside @media print.
   ================================================================ */

.prov{padding:2vh 28px 4vh}
.prov .shell{max-width:1280px;margin:0 auto}

/* ---------- the state of the record, stated first ---------- */
.tally{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-bottom:9vh}
.tally div{flex:1 1 190px;padding:22px 26px 20px;border-right:1px solid var(--line)}
.tally div:last-child{border-right:0}
.tally b{display:block;font-family:var(--mono);font-weight:400;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--royal);margin-bottom:10px}
.tally span{font-family:var(--serif-display);font-weight:360;font-size:clamp(28px,3.2vw,40px);
  line-height:1;letter-spacing:-.02em}
.tally i{display:block;margin-top:9px;font-family:var(--serif);font-style:italic;
  font-size:14.5px;line-height:1.5;color:var(--ink-soft)}

/* ================= THE TABLE ================= */
.tree{margin:0}
.tree .stage{position:relative;padding:6px 0 10px}
.tree .rules{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tree .rules path{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
/* the descent lit under the hand: royal, drawn over the quiet rules */
.tree .rules path.lit{stroke:var(--royal);stroke-width:1.4}

.tree .gen{position:relative;margin-bottom:clamp(52px,7vh,86px)}
.tree .gen:last-child{margin-bottom:0}
/* 🔴 sulla tavola larga l'etichetta di generazione e RUMORE: ogni nome dice
   gia chi e ("Father's father"), e messa in colonna a sinistra si faceva
   attraversare dai filetti. Torna solo dove i filetti spariscono, cioe sulle
   carte strette, dove la tavola si legge come elenco di ascendenti. */
.tree .gl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tree .row{display:grid;gap:14px;list-style:none;margin:0;padding:0}
.tree .g3 .row{grid-template-columns:repeat(8,minmax(0,1fr))}
.tree .g2 .row{grid-template-columns:repeat(4,minmax(0,1fr));padding:0 min(6%,90px)}
.tree .g1 .row{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 min(19%,270px)}
.tree .g0 .row{grid-template-columns:minmax(0,1fr);padding:0 min(37%,520px)}

/* ---------- one name on the table ----------
   🔴 SECONDA MANO. Prima ogni nodo era una riga di testo su una griglia:
   corretta e anonima. Ora e una SCHEDA DI CATALOGO, perche dietro ognuna
   c'e un volumetto e la tavola deve farlo vedere. Tre cose nuove:
   il numero di Ahnentafel (il sistema con cui i genealogisti contano dal
   1590: io 1, ogni padre il doppio del figlio, ogni madre uno in piu);
   il RITRATTO — riquadro in attesa della fotografia, con le iniziali
   incise nel frattempo; e lo STATO DEL RACCONTO, quante parole esistono
   di quella persona. Cosi la tavola non e piu solo chi discende da chi:
   e la mappa di quanto e stato salvato e quanto manca ancora. */
/* il numero d'ordine e passato sulla copertina, dove sta su un vero volume */
/* ---- IL VOLUME DENTRO IL NODO ----
   Ogni posto della tavola non e piu un riquadro con le iniziali: e il LIBRO
   di quella persona, in prospettiva di tre quarti come i volumi del Capitolo
   III, solo in ottavo invece che in quarto. Le iniziali stanno dove devono
   stare, cioe sulla copertina, col numero d'ordine sopra. Cresce di
   generazione in generazione scendendo verso il presente: i bisnonni in
   ottavo, io in quarto.
   🔴 MAI un `filter` qui dentro: appiattisce preserve-3d e fa sparire dorso
   e taglio delle pagine. */
.tree .book{display:block;position:relative;width:var(--bw,104px);height:var(--bh,146px);
  margin:14px auto 16px;transform-style:preserve-3d;
  transform:perspective(760px) rotateY(38deg);
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.tree .nd a:hover .book,.tree .nd a:focus-visible .book,.tree .nd.on .book{
  transform:perspective(760px) rotateY(12deg)}
.tree .book .face{position:absolute;backface-visibility:hidden}
.tree .book .cover{inset:0;transform:translateZ(11px);border-radius:1px 3px 3px 1px;
  background:var(--c,#16255f);color:#F2EDE4;overflow:hidden;
  box-shadow:inset 3px 0 8px rgba(0,0,0,.3),10px 14px 24px -8px rgba(11,21,51,.42);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.tree .book .cno{font-family:var(--mono);font-size:8px;letter-spacing:.22em;opacity:.68}
.tree .book .cover i{font-family:var(--serif-display);font-style:normal;font-weight:350;
  font-size:var(--bi,25px);letter-spacing:.03em;line-height:1}
.tree .book .spine{top:0;bottom:0;left:0;width:22px;transform:rotateY(-90deg) translateZ(11px);
  background:var(--c,#16255f);display:flex;align-items:center;justify-content:center;
  box-shadow:inset -3px 0 8px rgba(0,0,0,.36)}
.tree .book .spine em{font-style:normal;writing-mode:vertical-rl;font-family:var(--mono);
  font-size:6.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,237,228,.8);
  white-space:nowrap;overflow:hidden;max-height:100%}
.tree .book .pages{top:3px;bottom:3px;right:0;width:22px;
  transform:rotateY(90deg) translateZ(calc(var(--bw,104px) - 11px));
  background:repeating-linear-gradient(90deg,#EDE6D8 0 1.5px,#D9CFBC 1.5px 2.5px)}
/* i sei posti senza nome: un volume mai rilegato — cartone nudo, punto interrogativo */
.tree .book.empty{--c:transparent}
.tree .book.empty .cover{background:none;border:1px dashed var(--line);color:var(--ink-soft);
  box-shadow:none}
.tree .book.empty .cover i{opacity:.4}
.tree .book.empty .spine{background:none;border-left:1px dashed var(--line);box-shadow:none}
.tree .book.empty .pages{background:repeating-linear-gradient(90deg,rgba(18,16,14,.1) 0 1.5px,transparent 1.5px 2.5px)}
/* il volume cresce scendendo verso il presente */
.tree .g3 .book{--bw:104px;--bh:146px;--bi:23px}
.tree .g2 .book{--bw:122px;--bh:171px;--bi:27px}
.tree .g1 .book{--bw:140px;--bh:196px;--bi:31px}
.tree .g0 .book{--bw:168px;--bh:235px;--bi:38px}
/* quante parole di questa persona esistono: la tavola dichiara il proprio stato */
.tree .nd .bk{display:block;margin-top:8px;font-family:var(--mono);font-size:7.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);opacity:.6}
.tree .nd.written .bk{color:var(--royal);opacity:.9}

/* ---------- one name on the table ---------- */
.tree .nd{position:relative;text-align:center}
/* 🔴 niente filetto lungo quanto la colonna sopra ogni nome: competeva con
   le graffe incise e faceva sembrare che le linee finissero nel vuoto. Sopra
   il nome sta un TRATTO corto, come la testata di una voce di catalogo, e la
   graffa ci scende sopra. */
.tree .nd a{display:block;padding:14px 8px 14px;text-decoration:none;color:inherit;position:relative}
.tree .nd a::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:34px;height:1px;background:var(--line);transition:background .38s var(--ease),width .38s var(--ease)}
.tree .nd{padding-top:2px}
.tree .nd.void::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:34px;height:0;border-top:1px dashed var(--line)}
.tree .nd .nm{display:block;font-family:var(--serif-display);font-weight:360;
  letter-spacing:-.012em;line-height:1.16;font-size:clamp(14px,1.22vw,19px);color:var(--ink)}
.tree .nd .nm b{display:block;font-weight:360}
.tree .nd .nm i{font-style:italic;color:var(--ink-soft)}
.tree .nd .rl{display:block;margin-top:7px;font-family:var(--mono);font-size:8px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);opacity:.68}
.tree .nd .dt{display:block;margin-top:4px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--royal);opacity:.9}
/* the one still at the foot of the table is set in the book's own hand */
.tree .nd.self a::before{width:64px;height:1.6px;background:var(--royal)}
.tree .nd.self .nm{font-size:clamp(19px,1.9vw,27px)}
/* those who are gone keep a hairline above the rule, like a catalogue obelus */
.tree .nd.gone .rl::before{content:"† ";color:var(--royal)}

/* the six seats with no name: ruled, not drawn — an empty seat is a fact */
.tree .nd.void{padding:14px 8px 14px;position:relative}
.tree .nd.void .nm{margin-top:0}
.tree .nd.void::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:34px;height:0;border-top:1px dashed var(--line)}
.tree .nd.void .nm{font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);opacity:.68;line-height:1.5}
.tree .nd.void .rl{display:block;margin-top:6px;font-family:var(--mono);font-size:8px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);opacity:.68}

/* ---------- the hand on the table ---------- */
/* 🔴 solo transform e opacity: la tavola sta su una pagina lunga e deve
   restare liscia su un portatile medio. Il nome NON sbiadisce mai sotto la
   riga di lettura: quello che si muove e il foglio, non l'inchiostro. */
.tree .nd a:hover .nm,.tree .nd a:focus-visible .nm{color:var(--royal)}
.tree .nd a:hover::before,.tree .nd a:focus-visible::before{background:var(--royal);width:52px}
.tree .nd a:focus-visible{outline:2px solid var(--royal);outline-offset:4px}
/* the whole descent under the hand comes up together */
/* 🔴 l'arretramento non tocca il ROYAL: a .7 quello scendeva a 3,2:1 (axe),
   perche parte gia da 5,4:1 e non ha margine. Arretra solo l'inchiostro nero,
   che di margine ne ha. */
   A .34 il nome scendeva a 2,0:1 (axe): mentre il puntatore resta fermo su un
   altro nodo, quel testo e semplicemente illeggibile — e vale la regola di
   casa, l'inchiostro non sfuma. A .7 resta sopra AA, e la differenza la porta
   il ROYAL sugli accesi, non il buio sugli altri. */
.tree.lighting .nd:not(.on) a .nm,
.tree.lighting .nd:not(.on) a .rl,
.tree.lighting .nd:not(.on) .book{opacity:.55;transition:opacity .34s var(--ease)}

.tree .nd.on a::before{background:var(--royal)}
.tree .nd.on .nm{color:var(--royal)}

/* ---------- the entrance: the table is engraved, bottom upward ---------- */
.tree .nd{opacity:0;transform:translateY(9px)}
.tree.drawn .nd{opacity:1;transform:none}
.tree .rules path{stroke-dasharray:var(--len,0);stroke-dashoffset:var(--len,0)}
.tree.drawn .rules path{stroke-dashoffset:0}

/* ---------- opening a name: the table withdraws, the name goes on ---------- */
.tree.leaving .nd:not(.chosen){opacity:0;transform:translateY(6px);
  transition:opacity .34s var(--ease),transform .34s var(--ease)}
.tree.leaving .rules{opacity:0;transition:opacity .3s var(--ease)}
.tree.leaving .nd.chosen{transform:scale(1.06);transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.tree.leaving .nd.chosen .nm{color:var(--royal)}

/* 🔴 `flex-wrap:wrap`, e NON e cosmetico. La didascalia e una riga flex, e a
   pagina viva il gesto d'entrata spezza la sua prosa in una `span.wm` PER
   PAROLA: ogni pezzo diventa un elemento della riga flex, la riga non va a
   capo, e il `margin-left:auto` del comando "Trace" lo spinge FUORI dalla
   carta. Misurato a pagina percorsa fino in fondo: bottone a 948..1132 su una
   carta larga 768 — irraggiungibile su tavoletta in verticale, da 744 a 1180.
   A moto ridotto il gesto non si monta, la prosa resta un nodo solo e il
   bottone stava dentro: per questo la prima passata, tutta a moto ridotto,
   non lo vedeva. Con il wrap i pezzi vanno a capo e il comando resta in
   pagina; a riga singola non cambia nulla. */
.tree figcaption{margin-top:5vh;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;
  font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--ink-soft)}
.tree figcaption b{font-family:var(--mono);font-style:normal;font-weight:400;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--royal);white-space:nowrap}

/* ================= THE LEAF OF ONE HAND ================= */
.line-h{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--royal);padding-bottom:14px;
  border-bottom:1px solid var(--line);margin-bottom:8px}
.leafpage .shell{max-width:900px}
.pers{padding:8px 0 34px}
.pers dl{margin-top:14px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:0}
.pers dt{font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);padding:11px 26px 11px 0;
  border-top:1px solid var(--line)}
.pers dd{font-family:var(--serif);font-size:clamp(16px,1.35vw,18.5px);line-height:1.55;
  padding:11px 0;border-top:1px solid var(--line);color:var(--ink-soft)}
.pers dl>dt:first-of-type,.pers dl>dt:first-of-type+dd{border-top:0}
.pers dd a{color:var(--royal);text-decoration:none;border-bottom:1px solid rgba(40,70,207,.35)}
.pers dd a:hover{border-color:var(--royal)}
/* 🔴 non con opacity: a .55 su carta la fonte scendeva a 2,9:1 (axe).
   La gerarchia la fa il corpo piccolo in mono, non lo sbiadimento. */
.src{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-left:.6em;white-space:nowrap}
.gap{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--royal);position:relative;padding-left:20px}
.gap::before{content:"";position:absolute;left:0;top:.62em;width:13px;height:1px;
  background:var(--royal);opacity:.55}
.asklist{margin:16px 0 0;padding:0;list-style:none}
.asklist li{font-family:var(--serif);font-size:clamp(16px,1.35vw,18.5px);line-height:1.55;
  color:var(--ink-soft);padding:11px 0 11px 24px;border-top:1px solid var(--line);position:relative}
.asklist li:first-child{border-top:0}
.asklist li::before{content:"";position:absolute;left:0;top:1.1em;width:13px;height:1px;
  background:var(--royal);opacity:.55}
.pers .note{margin-top:22px;font-family:var(--serif);font-style:italic;
  font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.7;color:var(--ink-soft);max-width:62ch}
.pers .note a{color:var(--royal);text-decoration:none;border-bottom:1px solid rgba(40,70,207,.35)}

/* ---------- the standing request ---------- */
.ask{margin-top:9vh;padding:34px 0 0;border-top:1px solid var(--line);max-width:760px}
.ask p{font-family:var(--serif);font-size:clamp(16.5px,1.4vw,19.5px);line-height:1.72;color:var(--ink-soft)}
.ask p+p{margin-top:16px}
.ask .to{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px 30px;align-items:baseline}
/* 🔴 NON .link-quiet qui: quella e crema, tagliata per i fondi di notte —
   posata sulla carta dava 1,1:1, cioe niente (axe). */
.ask .aside{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-soft)}
.ask .aside a{color:var(--royal);text-decoration:none;border-bottom:1px solid rgba(40,70,207,.35)}
.ask .aside a:hover{border-color:var(--royal)}

/* ================= NARROW LEAVES ================= */
/* Sotto i 900 px una tavola a otto colonne diventa illeggibile: le
   generazioni si impilano in due colonne e le regole si spengono — un
   albero stretto e una LISTA di ascendenti, ed e cosi che va letto. */
@media (max-width:900px){
  .tree .rules{display:none}
  .tree .gl{position:static;width:auto;height:auto;overflow:visible;clip-path:none;
    font-family:var(--mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
    color:var(--ink-soft);opacity:.68;margin-bottom:14px}
  .tree .g3 .row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tree .g2 .row{grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
  .tree .g1 .row{grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
  .tree .g0 .row{grid-template-columns:minmax(0,1fr);padding:0}
  .tree .gen{margin-bottom:36px}
  .tree .nd .nm{font-size:16px}
  .tree .nd a::before,.tree .nd.void::before{width:26px}
}
@media (max-width:700px){
  .tally div{border-right:0;border-bottom:1px solid var(--line)}
  .tally div:last-child{border-bottom:0}
  .pers dl{grid-template-columns:minmax(0,1fr)}
  .pers dt{padding-bottom:0;border-top:1px solid var(--line)}
  .pers dd{padding-top:2px;border-top:0}
  .pers dl>dt:first-of-type+dd{border-top:0}
  .tree figcaption{flex-direction:column;gap:8px}
}
@media (max-width:760px){.prov{padding-left:20px;padding-right:20px}}
@media (min-width:761px){.prov .shell{padding-left:28px;padding-right:28px}}

/* a reader who asked for stillness gets the table already engraved */
@media (prefers-reduced-motion:reduce){
  .tree .nd{opacity:1;transform:none}
  .tree .rules path{stroke-dashoffset:0}
  .tree.leaving .nd:not(.chosen),.tree.leaving .rules{opacity:1}
  .tree.leaving .nd.chosen{transform:none}
}

/* ================= THE PAPER EDITION ================= */
/* 🔴 ogni gesto d'entrata va disfatto anche qui, sennò il libro si stampa
   con la tavola bianca: e la regola che questo sito ha gia pagato. */
@media print{
  .tree .nd{opacity:1!important;transform:none!important}
  /* in stampa il volume in prospettiva non serve: diventa un riquadro dritto */
  .tree .book{transform:none!important;transform-style:flat;width:44px!important;height:58px!important;
    margin:0 auto 10px!important;box-shadow:none}
  .tree .book .spine,.tree .book .pages{display:none!important}
  .tree .book .cover{position:static;transform:none;background:none!important;color:#000!important;
    border:1px solid #000;box-shadow:none;gap:4px}
  .tree .book .cover i{font-size:14px!important}
  .tree .book .cno{opacity:1}
  .tree .rules path{stroke-dashoffset:0!important;stroke:#000!important}
  .tree.lighting .nd:not(.on) a .nm,
  .tree.lighting .nd:not(.on) a .rl,
  .tree.lighting .nd:not(.on) a .dt{opacity:1!important}
  .tree .nd .dt,.tree .nd.gone .rl::before,.gap,.line-h,.tree figcaption b{color:#000!important}
  .gap::before,.asklist li::before{background:#000!important}
  .tally div{border-right:0}
  .tree .gen,.pers,.tree figcaption{break-inside:avoid}
  .tree .stage{break-inside:avoid}
}

/* ================================================================
   TAB. II — THE CENTURY. The same nine people, laid on real time.

   A table of descent answers WHO and is silent on WHEN — which
   turns out to be the only question that hurts. One scale, 1900
   to 2030. Each life is a bar: solid where the record holds,
   open where it stops, and inked royal over the years we shared.
   Two of the four grandparents have no royal at all, because
   nobody wrote down when they died. That absence is the point,
   and it is drawn, not explained.
   ================================================================ */
.turn{margin-top:11vh;max-width:760px}
.turn p{margin-top:16px;font-family:var(--serif);font-size:clamp(16.5px,1.4vw,19.5px);
  line-height:1.72;color:var(--ink-soft)}
.turn p em{font-style:italic;color:var(--ink)}

.century{margin:5vh 0 0}
.century .scale{position:relative;height:22px;margin-left:var(--lane,300px);
  border-bottom:1px solid var(--line)}
.century .scale span{position:absolute;bottom:6px;transform:translateX(-50%);
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink-soft);opacity:.75}
.century .scale span:first-child{transform:none}
.century .scale span:last-child{transform:translateX(-100%)}

.century .lives{list-style:none;margin:0;padding:0}
.century .lf{display:grid;grid-template-columns:var(--lane,300px) minmax(0,1fr) 180px;
  align-items:center;gap:0;border-bottom:1px solid var(--line)}
.century .lf:first-child{border-top:1px solid var(--line)}
.century .lf a{display:block;padding:15px 24px 15px 0;text-decoration:none;color:inherit}
.century .who{display:block;font-family:var(--serif-display);font-weight:360;
  letter-spacing:-.012em;font-size:clamp(16px,1.5vw,21px);line-height:1.15;color:var(--ink);
  transition:color .3s var(--ease)}
.century .rl{display:block;margin-top:5px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.century .lf a:hover .who,.century .lf a:focus-visible .who{color:var(--royal)}
.century .lf a:focus-visible{outline:2px solid var(--royal);outline-offset:3px}

/* the bar itself */
.century .track{position:relative;height:100%;min-height:56px}
.century .track i{position:absolute;top:50%;height:7px;margin-top:-3.5px;display:block}
.century .life{background:var(--ink);opacity:.24}
/* a life whose end nobody entered does not get a tidy edge: it frays out */
.century .lf.open .life{-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);
  mask-image:linear-gradient(90deg,#000 62%,transparent)}
/* no birth year at all: the whole century is the guess */
.century .guess{left:0;width:100%;height:1px;margin-top:-.5px;
  background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 12px)}
/* the years we shared — the only ink that is royal on this figure */
.century .ours{background:var(--royal);height:7px;margin-top:-3.5px}
.century .yrs{padding:15px 0 15px 22px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);text-align:right}
.century .lf:has(.ours) .yrs{color:var(--royal)}

/* stessa rete della didascalia della tavola: a pagina viva la prosa e spezzata
   in pezzi flex e senza il wrap la riga esce dalla carta */
.century figcaption{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;
  font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--ink-soft)}
.century figcaption b{font-family:var(--mono);font-style:normal;font-weight:400;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--royal);white-space:nowrap}

/* the bars are drawn as the reader arrives, oldest life first */
.century .life,.century .ours,.century .guess{transform:scaleX(0);transform-origin:left center}
.century.ticking .life,.century.ticking .ours,.century.ticking .guess{transform:scaleX(1)}

/* ---------- one bay, four generations ---------- */
.coast{margin-top:10vh;max-width:820px}
.coast p{margin-top:16px;font-family:var(--serif);font-size:clamp(16.5px,1.4vw,19.5px);
  line-height:1.72;color:var(--ink-soft)}
.coast p b{font-weight:400;font-family:var(--serif-display);color:var(--ink)}
.coast p span{display:block;margin-top:14px;font-family:var(--serif-display);font-weight:360;
  font-size:clamp(21px,2.2vw,30px);line-height:1.25;letter-spacing:-.015em;color:var(--royal)}

@media (max-width:900px){
  .century{--lane:200px}
  .century .lf{grid-template-columns:var(--lane) minmax(0,1fr);}
  .century .yrs{grid-column:1 / -1;text-align:left;padding:0 0 14px 0;margin-top:-6px}
  .century .track{min-height:44px}
}
@media (max-width:640px){
  .century{--lane:100%}
  .century .scale{margin-left:0}
  .century .lf{grid-template-columns:minmax(0,1fr)}
  .century .lf a{padding-bottom:6px}
  .century .track{min-height:30px}
  .century .yrs{padding-top:0}
}

@media (prefers-reduced-motion:reduce){
  .century .life,.century .ours,.century .guess{transform:scaleX(1)}
}
@media print{
  .century .life,.century .ours,.century .guess{transform:scaleX(1)!important}
  .century .life{opacity:.35!important;background:#000!important}
  .century .ours{background:#000!important}
  .century .lf,.century figcaption,.coast,.turn{break-inside:avoid}
  .century .yrs,.coast p span,.century figcaption b{color:#000!important}
}

/* ================================================================
   TAB. I — le rifiniture della seconda mano: la discendenza scende
   invece di accendersi tutta insieme, il nome acceso prende un
   accento appena percettibile, e la tavola si richiude verso il
   nome scelto invece di svanire.
   ================================================================ */
/* l'accento sul nome acceso: un respiro, non un salto. Solo transform. */
.tree .nd.on a{transform:scale(1.035);transition:transform .34s cubic-bezier(.2,.7,.2,1)}
.tree .nd a{transform:scale(1);transition:transform .34s var(--ease)}
.tree .nd.self.on a{transform:scale(1.05)}
/* il filetto acceso arriva con la sua corsa, non a interruttore */
.tree .rules path{transition:stroke .28s var(--ease),stroke-width .28s var(--ease)}

/* il comando che legge la tavola ad alta voce */
.trace{margin-left:auto;background:none;border:0;padding:6px 0 6px 18px;cursor:pointer;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--royal);white-space:nowrap;position:relative}
.trace::after{content:"";position:absolute;left:18px;right:0;bottom:3px;height:1px;
  background:currentColor;opacity:.4;transform:scaleX(1);transform-origin:left;
  transition:opacity .3s var(--ease)}
.trace:hover::after,.trace.on::after{opacity:1}
.trace i{font-style:normal;display:inline-block;margin-left:6px;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.trace.on i{transform:translateY(3px)}
.trace:focus-visible{outline:2px solid var(--royal);outline-offset:3px}
@media (max-width:700px){.trace{margin-left:0;padding-left:0}.trace::after{left:0}}

/* il secolo risponde alla tavola, e viceversa */
.century.lighting .lf:not(.on) .who,
.century.lighting .lf:not(.on) .rl{opacity:.7;transition:opacity .3s var(--ease)}
.century.lighting .lf:not(.on) .track i{opacity:.2;transition:opacity .3s var(--ease)}
.century .lf.on .who{color:var(--royal)}
.century .lf.on{background:rgba(40,70,207,.045)}
.century .lf{transition:background .3s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .tree .nd.on a,.tree .nd.self.on a{transform:none}
  .trace.on i{transform:none}
}
@media print{
  .trace{display:none!important}
  .tree .nd.on a{transform:none!important}
  .century.lighting .lf:not(.on) .who,
  .century.lighting .lf:not(.on) .rl,
  .century.lighting .lf:not(.on) .yrs,
  .century.lighting .lf:not(.on) .track i{opacity:1!important}
  .century .lf.on{background:none!important}
}

/* ================================================================
   THE CHAPTER — one life, in six movements.

   Every person on the line gets the same six, so the volume reads
   as a book and not as nine scattered notes. A movement with
   nothing in it does not go blank: it prints the QUESTION that
   will fill it, set as a compositor's note in the margin. A blank
   says "there is nothing here"; a question says "this is still
   collectable, and here is what to ask".
   ================================================================ */
.chapter{padding-top:0}
.chapter .leaf{max-width:900px}
.mv{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0;padding:38px 0;
  border-top:1px solid var(--line)}
.mv:first-child{border-top:0;padding-top:12px}
.mvn{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--royal);
  padding-top:.55em}
.mvb h2{font-family:var(--serif-display);font-weight:360;letter-spacing:-.015em;
  font-size:clamp(23px,2.4vw,32px);line-height:1.15;color:var(--ink)}
.mvb p{margin-top:16px;font-family:var(--serif);font-size:clamp(16.5px,1.4vw,19.5px);
  line-height:1.74;color:var(--ink-soft);max-width:62ch}
.mvb p b{font-weight:400;font-family:var(--serif-display);color:var(--ink)}
.mvb p i{font-style:italic}
/* la domanda che aspetta di essere riempita: e una nota del compositore,
   non un buco. Corsivo, rientrata, con la sbarra del margine. */
.mv.waiting .mvb h2{color:var(--ink-soft)}
.mvb .q{font-style:italic;position:relative;padding-left:22px;color:var(--ink-soft)}
.mvb .q::before{content:"";position:absolute;left:0;top:.55em;bottom:.4em;width:1px;
  background:var(--royal);opacity:.5}
.mvb .qh{margin-top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);line-height:1.7;padding-left:22px}
.mvb .qh a{color:var(--royal);text-decoration:none;border-bottom:1px solid rgba(40,70,207,.35)}
.mvb .qh a:hover{border-color:var(--royal)}
@media (max-width:700px){
  .mv{grid-template-columns:minmax(0,1fr);padding:28px 0}
  .mvn{padding-top:0;margin-bottom:8px}
}
@media print{
  .mv{break-inside:avoid}
  .mvn,.mvb .qh a{color:#000!important}
  .mvb .q::before{background:#000!important}
}

/* ================================================================
   THE VOLUME — one life, written out.

   The chapter of six questions is a scaffold. This is the building:
   a real account, as long as it needs to be, set in the Logbook's
   own hand — because that machinery already exists here and already
   does the one thing a life needs, which is to keep the DATA in the
   margin so the PROSE can stay prose. Dates, sources and doubts go
   to the side; the sentences carry the person.
   ================================================================ */
.volume{padding:0 28px 6vh}
.volume .shell{max-width:1280px;margin:0 auto}
.volume .prose{max-width:660px;margin:0 auto}
.volume .prose h2{font-family:var(--serif-display);font-weight:360;letter-spacing:-.016em;
  font-size:clamp(24px,2.5vw,33px);line-height:1.16;color:var(--ink);margin:9vh 0 0}
.volume .prose h2:first-child{margin-top:0}
.volume .prose h2+p{margin-top:20px;text-indent:0}
.volume .prose p{font-family:var(--serif);font-size:clamp(17px,1.45vw,20px);line-height:1.78;
  color:var(--ink-soft);margin-top:1.15em;text-indent:2.2em}
.volume .prose p:first-of-type,.volume .prose p.drop{text-indent:0}
/* il capolettera apre il racconto, come apre ogni capitolo di questo libro */
.volume .prose p.drop::first-letter{float:left;font-family:var(--serif-display);font-weight:340;
  font-size:4.1em;line-height:.84;padding:.06em .1em 0 0;color:var(--ink)}
.volume .prose blockquote{margin:2.4em 0;padding-left:26px;border-left:1px solid var(--royal)}
.volume .prose blockquote p{font-family:var(--serif-display);font-weight:350;font-style:italic;
  font-size:clamp(19px,1.75vw,24px);line-height:1.45;color:var(--ink);text-indent:0;margin:0}
.volume .vend{max-width:660px;margin:9vh auto 0;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.8}
.volume .vend a{color:var(--royal);text-decoration:none;border-bottom:1px solid rgba(40,70,207,.35)}

/* quante parole ha questo racconto, dichiarato in apertura */
.vmeta{margin-top:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft)}
.vmeta b{display:inline-block;font-weight:400;color:var(--royal);margin-right:14px}

/* gli anni in fila, a chiusura */
.timeline{margin-top:10vh;padding-top:26px;border-top:1px solid var(--line)}
.timeline h2{font-family:var(--mono)!important;font-size:10px!important;letter-spacing:.2em;
  text-transform:uppercase;color:var(--royal)!important;margin:0 0 6px!important}
.timeline ol{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:0;padding:12px 0;
  border-top:1px solid var(--line);align-items:baseline}
.timeline li:first-child{border-top:0}
.timeline b{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.14em;
  color:var(--royal)}
.timeline span{font-family:var(--serif);font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.55;
  color:var(--ink-soft)}

@media (min-width:1201px){
  /* la nota a margine esce nel margine destro, come nei trattati */
  .volume .prose .gloss{float:right;clear:right;width:200px;margin:.3em -244px .8em 26px;
    text-align:left;display:block;font-family:var(--serif);font-style:italic;font-size:13px;
    line-height:1.5;color:var(--ink-soft)}
  .volume .prose .gloss::before{content:"";display:block;width:26px;height:1px;
    background:var(--royal);opacity:.8;margin:0 0 7px}
  .volume .prose .gloss+p{margin-top:1.15em}
}
@media (max-width:1200px){
  .volume .prose .gloss{display:block;font-family:var(--serif);font-style:italic;font-size:13.5px;
    line-height:1.55;color:var(--ink-soft);margin:1.6em 0 .55em}
  .volume .prose .gloss::before{content:"";display:inline-block;width:18px;height:1px;
    background:var(--royal);vertical-align:middle;margin:0 9px 3px 0;opacity:.8}
  .volume .prose .gloss+p{margin-top:0;text-indent:2.2em}
}
@media (max-width:760px){.volume{padding-left:20px;padding-right:20px}}
@media print{
  .volume .prose{max-width:none}
  .volume .prose .gloss{float:none;width:auto;margin:1.2em 0 .5em}
  .volume .prose h2{break-after:avoid}
  .volume .prose blockquote,.timeline li{break-inside:avoid}
  .vmeta b,.timeline b,.timeline h2,.volume .vend a{color:#000!important}
  .volume .prose blockquote{border-left-color:#000!important}
}

/* ================================================================
   THE LIBRARY — nine bound volumes, one per hand.

   Same geometry as the works in Chapter III: a real three-quarter
   book with a deep spine and page edges, turning to face the reader.
   These are volumes, not thumbnails, and they are the size of
   volumes — 338×472, exactly the plates of the Works.

   🔴 MAI un `filter` vicino a .book: un filtro appiattisce
   preserve-3d e il dorso e il taglio delle pagine spariscono.
   L'ombra vive dentro .cover come box-shadow. (Gia pagato.)
   ================================================================ */
.library{margin:0 0 2vh}
.shelf{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,6vw,90px) clamp(24px,3vw,48px);
  perspective:2100px}
.shelf-item{display:flex;flex-direction:column;align-items:center}
.shelf .vol{display:block;text-decoration:none;color:inherit;outline-offset:10px;border-radius:4px}
.shelf .vol:focus-visible{outline:2px solid var(--royal)}
.shelf .book{display:block;position:relative;width:338px;height:472px;transform-style:preserve-3d;
  transform:perspective(1700px) rotateY(54deg);transition:transform .8s var(--ease);cursor:pointer}
.shelf .vol:hover .book,.shelf .vol:focus-visible .book{transform:perspective(1700px) rotateY(9deg)}
@media(pointer:coarse){.shelf .book{transform:perspective(1700px) rotateY(36deg)}}
.shelf .book .face{position:absolute;backface-visibility:hidden}
.shelf .book .cover{inset:0;transform:translateZ(35px);border-radius:2px 6px 6px 2px;overflow:hidden;
  background:var(--c,#16255f);color:#F2EDE4;
  box-shadow:inset 4px 0 11px rgba(0,0,0,.28),28px 40px 60px -18px rgba(11,21,51,.5);
  display:flex;flex-direction:column;padding:38px 30px 30px}
/* la copertina e volutamente BASICA: un fondo, un nome, un ruolo. Sta cosi
   finche non arrivano le fotografie, che prenderanno questo stesso posto. */
.shelf .cimp{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  opacity:.6}
.shelf .cttl{margin-top:auto;font-family:var(--serif-display);font-weight:360;letter-spacing:-.018em;
  line-height:1.06;font-size:34px}
.shelf .cttl b{display:block;font-weight:360}
.shelf .crule{display:block;width:52px;height:1px;background:rgba(242,237,228,.55);margin:20px 0 16px}
.shelf .cft{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;opacity:.72}
.shelf .book .spine{top:0;bottom:0;left:0;width:70px;transform:rotateY(-90deg) translateZ(35px);
  background:var(--c,#16255f);display:flex;align-items:center;justify-content:center;
  box-shadow:inset -4px 0 10px rgba(0,0,0,.35)}
.shelf .book .spine i{font-style:normal;writing-mode:vertical-rl;font-family:var(--mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(242,237,228,.85);white-space:nowrap}
.shelf .book .pages{top:6px;bottom:6px;right:0;width:70px;transform:rotateY(90deg) translateZ(303px);
  background:repeating-linear-gradient(90deg,#EDE6D8 0 2px,#D9CFBC 2px 3px)}
.shelf-cap{margin-top:26px;text-align:center}
.shelf-cap b{display:block;font-family:var(--serif-display);font-weight:360;letter-spacing:-.012em;
  font-size:18px;color:var(--ink)}
/* 🔴 niente opacity sul royal: a .85 scendeva a 4,3:1, sotto AA (axe). Il
   corpo piccolo basta a farlo arretrare. */
.shelf-cap span{display:block;margin-top:5px;font-family:var(--mono);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--royal)}
.library figcaption{margin-top:7vh;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;
  font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--ink-soft)}
.library figcaption b{font-family:var(--mono);font-style:normal;font-weight:400;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--royal);white-space:nowrap}

@media (max-width:1180px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .shelf{grid-template-columns:minmax(0,1fr);gap:56px}
  .shelf-item{align-items:flex-start;padding-left:18px}
  .shelf-cap{text-align:left}
}
@media (max-width:430px){
  .shelf .book{width:290px;height:405px}
  .shelf .book .pages{transform:rotateY(90deg) translateZ(255px)}
  .shelf .cttl{font-size:29px}
  .shelf-item{padding-left:8px}
}
@media (prefers-reduced-motion:reduce){
  .shelf .book{transform:perspective(1700px) rotateY(22deg)}
  .shelf .vol:hover .book{transform:perspective(1700px) rotateY(9deg)}
}
/* sulla carta stampata un libro in prospettiva non ha senso: diventa una voce
   di catalogo, dritta e leggibile */
@media print{
  .shelf{grid-template-columns:repeat(3,minmax(0,1fr));perspective:none;gap:26px}
  .shelf .book{width:auto;height:auto;transform:none!important;transform-style:flat}
  .shelf .book .spine,.shelf .book .pages{display:none}
  .shelf .book .cover{position:static;transform:none;background:none!important;color:#000!important;
    box-shadow:none;border:1px solid #000;padding:16px;min-height:150px}
  .shelf .cttl{font-size:19px}
  .shelf-item,.library figcaption{break-inside:avoid}
  .shelf-cap span,.library figcaption b{color:#000!important}
  .shelf .crule{background:#000!important}
}