/* iannellifamily.com — il giornale di famiglia (22/10/2026, veste approvata da Andrea). Carta bianca, un solo rosso.
   Regole di misura dell'articolo prese da Antenati (REGOLE-RESPONSIVE.md, R1-R7); il tocco sulla foto apre il visore. */
:root{
  --carta:#FFFFFF; --inchiostro:#15171B; --inchiostro2:#575C66; --filo:#E4E5E8; --rosso:#8C1C13; --fondo-foto:#F2F2F3; --riquadro:#F7F7F8;
  --testata:"Libre Caslon Display","Baskerville","Libre Baskerville",Georgia,serif;
  --testo:"Source Serif 4","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --etichetta:"IBM Plex Sans Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --ombra:0 1px 2px rgba(21,23,27,.05),0 8px 22px rgba(21,23,27,.06);
  --ombra-su:0 2px 4px rgba(21,23,27,.08),0 16px 34px rgba(21,23,27,.11);
  --margine:max(20px,env(safe-area-inset-left,0px));
  --colonna:760px; --largo:1240px; --scala:1;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:calc(16px * var(--scala))}
body{margin:0;background:var(--carta);color:var(--inchiostro);font:400 1.0625rem/1.62 var(--testo);text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--rosso);outline-offset:3px;border-radius:4px}
.riga{max-width:var(--largo);margin:0 auto;padding-left:var(--margine);padding-right:max(20px,env(safe-area-inset-right,0px));display:flex;justify-content:space-between;align-items:center;gap:1rem}

/* in alto a destra: il testo grande (tre misure, come su Antenati) e le lingue. Il tasto resta della stessa misura a ogni scala */
.comandi{display:flex;align-items:center;gap:.5rem}
.btn-testo{font:600 16px/1 var(--etichetta);color:var(--inchiostro);background:var(--carta);border:1px solid var(--filo);border-radius:999px;min-width:44px;height:44px;padding:0 .7rem;cursor:pointer;transition:box-shadow .15s}
.btn-testo span{font-size:1.3em;margin-left:1px}
.btn-testo:hover{box-shadow:inset 0 0 0 1px var(--inchiostro2)}
.btn-testo[data-livello="1"],.btn-testo[data-livello="2"]{border-color:var(--inchiostro)}
/* lingue: due sigle, quella in uso piena */
.lingue{display:flex;gap:.2rem;align-items:center;font:600 .74rem/1 var(--etichetta);letter-spacing:.12em}
.lingue a{text-decoration:none;color:var(--inchiostro2);padding:.45rem .6rem;border-radius:999px;transition:box-shadow .15s,color .15s}
.lingue a[aria-current="page"]{background:var(--inchiostro);color:var(--carta)}
.lingue a:not([aria-current="page"]):hover{color:var(--inchiostro);box-shadow:inset 0 0 0 1px var(--filo)}

/* testata della prima pagina */
.testata{padding-block:4px 18px;border-bottom:1px solid var(--inchiostro)}
.riga-su{font:500 .74rem/1 var(--etichetta);letter-spacing:.08em;text-transform:uppercase;color:var(--inchiostro2)}
.nome{margin:.9rem 0 .2rem;text-align:center;font:400 clamp(2.6rem,10.5vw,6.2rem)/.95 var(--testata);letter-spacing:-.01em;padding-inline:var(--margine)}
.nome a{text-decoration:none}
.di{margin:0;text-align:center;font:italic 400 1.08rem/1.3 var(--testo);color:var(--inchiostro2)}
.edizione{max-width:var(--largo);margin:.95rem auto 0;padding:.6rem var(--margine) 0;border-top:1px solid var(--filo);display:flex;justify-content:center;flex-wrap:wrap;gap:.35rem 1.2rem;font:500 .72rem/1.3 var(--etichetta);letter-spacing:.09em;text-transform:uppercase;color:var(--inchiostro2)}
.presentazione{max-width:40rem;margin:1.25rem auto 0;padding-inline:var(--margine);text-align:center;font-size:1.06rem;color:#2C3038;text-wrap:pretty}

/* gli articoli in prima pagina */
.feed{max-width:var(--largo);margin:0 auto;padding:24px var(--margine) 40px;display:grid;gap:18px}
.scheda{display:flex;flex-direction:column;text-decoration:none;background:var(--carta);border:1px solid var(--filo);border-radius:18px;overflow:hidden;box-shadow:var(--ombra);transition:transform .2s ease,box-shadow .2s ease}
.scheda:hover{transform:translateY(-2px);box-shadow:var(--ombra-su)}
.scheda .cop{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--fondo-foto)}
.scheda .cop img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.12) contrast(1.02);transition:transform .6s ease}
.scheda:hover .cop img{transform:scale(1.035)}
.scheda .t{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kicker{font:600 .7rem/1.2 var(--etichetta);letter-spacing:.12em;text-transform:uppercase;color:var(--rosso);margin:0}
.scheda b{font:600 1.3rem/1.18 var(--testo);text-wrap:balance}
.scheda .som{color:var(--inchiostro2);font-size:.98rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.scheda .data{font:500 .72rem/1 var(--etichetta);letter-spacing:.08em;text-transform:uppercase;color:var(--inchiostro2);margin-top:4px}
.scheda.grande b{font:400 clamp(1.75rem,4.2vw,2.7rem)/1.06 var(--testata)}
.scheda.grande .som{-webkit-line-clamp:5}
@media (min-width:760px){
  .feed{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding-top:30px}
  .scheda.grande{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .scheda.grande .cop{aspect-ratio:auto;min-height:340px;max-height:min(60vh,520px)}
  .scheda.grande .t{padding:28px 32px;justify-content:center;gap:12px}
}
@media (min-width:1100px){.feed{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* barra delle pagine interne */
.barra{padding-block:calc(12px + env(safe-area-inset-top,0px)) 12px;border-bottom:1px solid var(--inchiostro);background:var(--carta)}
/* la barra resta ferma in alto quando si scorre (Andrea 22/10): negli articoli tutta la barra, nella home solo la riga di su;
   la testata grande scorre via. La fascia del notch è coperta dalla barra stessa (padding con safe-area) */
.barra,.barra-su{position:sticky;top:0;z-index:30}
.barra-su{background:var(--carta);padding-block:calc(14px + env(safe-area-inset-top,0px)) 10px;border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.barra.staccata,.barra-su.staccata{box-shadow:0 6px 18px rgba(21,23,27,.07)}
.barra-su.staccata{border-bottom-color:var(--inchiostro)}
.marchio-mini{display:none;font:400 1.3rem/1 var(--testata);letter-spacing:0;text-transform:none;color:var(--inchiostro);text-decoration:none}
.barra-su.staccata .etich{display:none}
.barra-su.staccata .marchio-mini{display:inline}
html{scroll-padding-top:5.5rem}
.marchio{font:400 1.45rem/1 var(--testata);text-decoration:none}

/* l'articolo — R1: asse unico; R3: testata compatta */
.art{max-width:var(--largo);margin:0 auto;padding:22px var(--margine) 30px}
.tutti{font:600 .74rem/1 var(--etichetta);letter-spacing:.1em;text-transform:uppercase;color:var(--inchiostro2);text-decoration:none}
.tutti:hover{color:var(--inchiostro)}
.capo{display:grid;gap:18px;margin:16px auto 0;max-width:var(--colonna)}
.capo h1{font:400 clamp(2.1rem,7vw,3.7rem)/1.04 var(--testata);margin:.3rem 0 .45rem;text-wrap:balance}
.catenaccio{font:italic 400 1.16rem/1.45 var(--testo);color:#2C3038;margin:0;text-wrap:pretty}
.firma{font:500 .74rem/1.4 var(--etichetta);letter-spacing:.08em;text-transform:uppercase;color:var(--inchiostro2);margin:.9rem 0 0}
.copertina{margin:0;border-radius:16px;overflow:hidden;background:var(--fondo-foto)}
.copertina a{display:block;cursor:zoom-in}
.copertina img{display:block;width:100%;max-height:60vh;object-fit:cover}
/* R2: la copertina non ruba la prima schermata */
@media (min-width:700px) and (orientation:portrait){.copertina img{max-height:42vh}}

/* la colonna di lettura: ~70 caratteri */
.corpo{max-width:var(--colonna);margin:26px auto 0}
.corpo::after{content:"";display:block;clear:both}
.corpo p{margin:0 0 1.05em;hyphens:auto}
.corpo h2{font:400 1.75rem/1.15 var(--testata);margin:1.6em 0 .5em;text-wrap:balance;clear:both}
.corpo blockquote{margin:1.4em 0;padding:.15em 0 .15em 1.1em;border-left:3px solid var(--rosso);font-style:italic;font-size:1.12rem;clear:both}
.corpo blockquote p{margin:0}
.corpo blockquote cite{display:block;font:500 .8rem/1.45 var(--etichetta);font-style:normal;letter-spacing:.03em;color:var(--inchiostro2);margin-top:.5em}
/* R4: le foto nel testo non superano il 60% della finestra; si aprono intere al tocco */
.corpo figure.foto{margin:1.6em auto;text-align:center}
.corpo figure.foto a{display:inline-block;border-radius:12px;overflow:hidden;box-shadow:var(--ombra);cursor:zoom-in;line-height:0}
.corpo figure.foto img{display:block;width:auto;max-width:100%;max-height:60vh;transition:transform .5s ease}
.corpo figure.foto a:hover img{transform:scale(1.025)}
.corpo figcaption{font:400 .9rem/1.45 var(--etichetta);color:var(--inchiostro2);margin:.6em auto 0;max-width:56ch;text-wrap:pretty}
.tabella{clear:both;margin:1.8em 0}
.tabella h3{font:600 .76rem/1.2 var(--etichetta);letter-spacing:.1em;text-transform:uppercase;color:var(--inchiostro2);margin:0 0 .6rem}
.scorre{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabella table{border-collapse:collapse;width:100%;min-width:30rem;font:400 .92rem/1.45 var(--etichetta)}
.tabella th,.tabella td{text-align:left;vertical-align:top;padding:.55rem .6rem;border-bottom:1px solid var(--filo)}
.tabella th{font-weight:600;color:var(--inchiostro2);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}
.fonti{max-width:var(--colonna);margin:30px auto 0;padding:18px 20px;background:var(--riquadro);border-radius:16px;font:400 .92rem/1.5 var(--etichetta);color:#3B4049}
.fonti h3{font:600 .72rem/1 var(--etichetta);letter-spacing:.12em;text-transform:uppercase;color:var(--inchiostro2);margin:0 0 .7rem}
.fonti ul{margin:0;padding-left:1.1rem;display:grid;gap:.3rem}
.firmafine{max-width:var(--colonna);margin:18px auto 0;font:400 .85rem/1.45 var(--etichetta);color:var(--inchiostro2)}
/* articoli vecchi (WordPress 2013-2017): il loro testo così com'era, nella colonna nuova */
.vecchio img{border-radius:12px;height:auto}
.vecchio a{color:var(--rosso)}
.vecchio iframe{max-width:100%;border:0;border-radius:12px;aspect-ratio:16/9;width:100%;height:auto}
/* l'albero di Pietro */
.albero .aiuto{font:400 .9rem/1.4 var(--etichetta);color:var(--inchiostro2);text-align:center}
.striscia{margin:1.2em 0}
.striscia .quadro{position:relative;line-height:0}
.striscia img{width:100%;height:auto;border-radius:10px}
.striscia .zona{position:absolute;background:transparent;border:0;padding:0;cursor:pointer;border-radius:6px}
.striscia .zona:hover,.striscia .zona[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--rosso)}

/* R5-R6 (Andrea 22/10, dopo la prova in Full HD): una colonna sola a ogni misura, come su Antenati. Titolo, catenaccio,
   firma, copertina e foto stanno uno sotto l'altro nello stesso blocco centrale, un po' più largo di quello di Antenati;
   le foto nel testo sono un po' più piccole e centrate */
:root{--colonna:820px}
.art{max-width:calc(var(--colonna) + 2 * var(--margine))}   /* «tutti i racconti» allineato alla colonna */
@media (min-width:1000px){
  html{font-size:calc(18px * var(--scala))}   /* il testo come su Antenati (~19 px), ~85 caratteri per riga */
  .capo{margin-top:22px}
  .capo h1{font-size:3.5rem}
  .copertina{margin-top:10px}
  .copertina img{max-height:min(62vh,560px)}
  .corpo{margin-top:34px}
  .corpo figure.foto{margin:2em auto}
  .corpo figure.foto img{max-height:min(52vh,460px)}
}
/* R7: sugli schermi molto larghi cresce il testo, non la colonna */
@media (min-width:2200px){html{font-size:calc(21px * var(--scala))}:root{--colonna:880px;--largo:1500px}}
@media (min-width:3000px){html{font-size:calc(24px * var(--scala))}:root{--largo:1800px}}

.piede{border-top:1px solid var(--inchiostro);margin-top:30px;padding-block:16px calc(26px + env(safe-area-inset-bottom,0px));font:500 .72rem/1.4 var(--etichetta);letter-spacing:.06em;text-transform:uppercase;color:var(--inchiostro2)}
.piede .riga{flex-wrap:wrap}
.piede a{text-decoration:none}

/* il visore: la foto a schermo intero, con «torna all'articolo» */
.visore{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(10,11,13,.97);color:#F1F2F4}
.visore[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.visore::backdrop{background:rgba(10,11,13,.97)}
.v-barra{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
.visore button{font:600 .85rem/1 var(--etichetta);letter-spacing:.05em;color:#F1F2F4;background:rgba(255,255,255,.1);border:0;border-radius:999px;padding:.7rem 1.05rem;cursor:pointer}
.visore button:hover{background:rgba(255,255,255,.2)}
.visore button:focus-visible{outline:2px solid #F1F2F4}
.v-frecce{display:flex;gap:.4rem}
.v-conta{font:500 .74rem/1 var(--etichetta);letter-spacing:.1em;color:#C9CCD2}
.v-area{display:grid;place-items:center;min-height:0;padding:0 max(12px,env(safe-area-inset-left,0px))}
.v-area img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;touch-action:pan-y pinch-zoom}
.v-did{margin:0;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));text-align:center;font:400 .92rem/1.45 var(--etichetta);color:#C9CCD2}
.visore.una .v-frecce,.visore.una .v-conta{visibility:hidden}

@media (hover:none){.scheda:hover{transform:none;box-shadow:var(--ombra)}.scheda:hover .cop img,.corpo figure.foto a:hover img{transform:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* articoli vecchi: la foto d'apertura a sinistra del testo, come nel 2013 */
.vecchio p > img:first-child{float:left;width:auto;max-width:38%;margin:.3em 1.1em .6em 0}
.vecchio::after{content:"";display:block;clear:both}
/* giro 2 di controllo (22/10): a capo con il trattino solo per le parole lunghe; l'albero leggibile al telefono; testata senza copertina */
.corpo p{hyphenate-limit-chars:8 4 4;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4}
.striscia .scorre{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
.striscia .quadro{min-width:720px}
/* giro 3 di controllo (22/10): niente trattini sugli schermi larghi; titolo centrato accanto alla copertina; i ritratti non perdono la testa */
.corpo p{hyphens:manual}
@media (max-width:520px){.corpo p{hyphens:auto}}
.scheda .cop img{object-position:50% 28%}
/* 22/10: una parola o una fila di link troppo lunga va a capo invece di uscire dallo schermo */
.corpo{overflow-wrap:break-word}