/* =========================================================================
   ZONA.CSS — stile condiviso per le aree moderne "Lo Scrittore" / "L'Analista"
   Coerente col portale (index.html): palette scura calda, oro, serif editoriali.
   Usato da <lang>/scrittore/index.html e <lang>/analista/index.html (profondità 2).
   ========================================================================= */
:root{
  --bg:#0a0908; --bg-soft:#12100d;
  --ink:#f0e6d0; --ink-dim:#8a7e70; --ink-off:#4a4238;
  --gold:#c8a96e; --gold-dim:#7a6040;
  --border:#2a2520; --border-h:#c8a96e;
  --analyst:#8890b8; --analyst-dim:#4a4f66;
  --maxw:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:'IM Fell English',Georgia,serif;
  font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased;
  position:relative; min-height:100vh;
}
body::before{ /* vignettatura calda */
  content:""; position:fixed; top:0; right:0; bottom:0; left:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 90% at 50% -10%, #1a160f 0%, var(--bg) 55%, #050403 100%);
}
.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* ---- barra superiore ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0 18px; border-bottom:1px solid var(--border);
  font-family:'Playfair Display',serif;
}
.topbar a.home{
  color:var(--ink-dim); text-decoration:none; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; transition:color .25s;
}
.topbar a.home:hover{color:var(--gold)}
.langs{display:flex; gap:14px; font-size:.78rem; letter-spacing:.12em}
.langs a{color:var(--ink-off); text-decoration:none; text-transform:uppercase; transition:color .2s}
.langs a:hover{color:var(--ink-dim)}
.langs a.cur{color:var(--gold); border-bottom:1px solid var(--gold-dim); padding-bottom:2px}

/* ---- hero ---- */
.hero{display:flex; gap:54px; align-items:center; padding:68px 0 56px}
.hero .portrait{flex:0 0 300px; max-width:300px}
.hero .htxt{flex:1 1 auto}
.portrait{position:relative; width:100%; border:1px solid var(--border-h); line-height:0}
.portrait img{display:block; width:100%; height:auto;
  filter:grayscale(.25) contrast(1.04)}
.portrait .c{position:absolute; width:14px; height:14px; border:1px solid var(--gold)}
.portrait .tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.portrait .tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.portrait .bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.portrait .br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.hero .num{font-family:'Playfair Display',serif; font-size:1rem; letter-spacing:.4em; color:var(--gold-dim)}
.hero h1{
  font-family:'Playfair Display',serif; font-weight:900; line-height:1.02;
  font-size:clamp(2.6rem,6vw,4.4rem); margin:.18em 0 .26em; color:var(--ink);
}
.hero .tag{font-style:italic; color:var(--ink-dim); font-size:1.18rem; max-width:30ch}
.rule{width:64px; height:1px; background:var(--gold-dim); margin:26px 0}

/* ---- corpo editoriale ---- */
.lede{max-width:68ch; font-size:1.12rem; color:#e3d8c2; margin:0 0 14px}
.section{padding:46px 0; border-top:1px solid var(--border)}
.section > h2{
  font-family:'Playfair Display',serif; font-weight:700; font-size:1.5rem;
  letter-spacing:.02em; margin-bottom:6px;
}
.section > .kicker{
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-dim); margin-bottom:26px;
}
.prose p{max-width:68ch; margin-bottom:1em; color:#ded2bb}

/* ---- griglia di pannelli ---- */
.grid{display:flex; flex-wrap:wrap; gap:20px; margin-top:8px}
.panel{flex:1 1 240px; min-width:240px;
  position:relative; display:block; text-decoration:none; color:inherit;
  border:1px solid var(--border); padding:26px 24px 24px; background:var(--bg-soft);
  transition:border-color .3s, transform .3s;
}
.panel:hover{border-color:var(--border-h); transform:translateY(-3px)}
.panel .pn{font-family:'Playfair Display',serif; font-size:1.18rem; color:var(--ink); margin-bottom:8px}
.panel .pd{font-size:.98rem; color:var(--ink-dim); line-height:1.55}
.panel .go{display:inline-block; margin-top:16px; font-family:'Playfair Display',serif;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dim);}
.panel:hover .go{color:var(--gold)}

/* ---- nota redazionale (placeholder per Roberto) ---- */
.editnote{
  border-left:2px solid var(--gold-dim); padding:6px 0 6px 18px; margin:18px 0;
  color:var(--ink-off); font-style:italic; font-size:.96rem; max-width:64ch;
}

/* ---- footer ---- */
footer{border-top:1px solid var(--border); padding:34px 0 56px; margin-top:40px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px}
footer .sig{font-family:'Playfair Display',serif; color:var(--ink-dim); font-size:.9rem; letter-spacing:.08em}
footer a{color:var(--ink-off); text-decoration:none; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; transition:color .25s}
footer a:hover{color:var(--gold)}

/* ---- variante Analista (accento bluastro come la porta II del portale) ---- */
body.analista{--gold:var(--analyst); --gold-dim:var(--analyst-dim); --border-h:var(--analyst)}
body.analista .portrait{filter:grayscale(.3) contrast(1.04)}

/* ---- variante Scrittore (accento ORO, tema di default del portale) ----
   alcuni componenti (grok, medkicker, langbar, bigcta) erano nati per l'Analista
   con var(--analyst) hardcoded: qui li riallineo all'oro sullo Scrittore. */
body.scrittore .grok{border-color:var(--gold-dim); border-left-color:var(--gold);
  background:linear-gradient(180deg,#15120c,#100d08); color:#ded2bb}
body.scrittore .grok::before{color:var(--gold-dim)}
body.scrittore .grok b{color:var(--gold)}
body.scrittore .grok .by{color:var(--gold)}
body.scrittore .medkicker{color:var(--gold)}
body.scrittore .bigcta{border-color:var(--gold-dim); background:linear-gradient(110deg,#16120c,#0d0b07)}
body.scrittore .bigcta:hover{border-color:var(--gold)}
body.scrittore .bigcta .k{color:var(--gold)}
body.scrittore .langbar .here{border-color:var(--gold); background:rgba(200,169,110,.12)}
/* biografia di Ian Watson: stessa impostazione del grok, tono leggermente diverso */
.grok.watson{background:linear-gradient(180deg,#17130c,#110d07)}
body.scrittore .grok.watson{border-left-color:#9a7b4a}

/* ---- responsive ---- */
@media(max-width:720px){
  .hero{flex-direction:column; align-items:flex-start; gap:30px; padding:44px 0 38px}
  .hero .portrait{flex-basis:auto; max-width:230px}
  .topbar{flex-direction:column; gap:12px; align-items:flex-start}
}

/* =====================================================================
   COMPONENTI AREE — cover-hero, citato Grok, libri, embed, CTA, social
   (aggiunti per "L'Analista"; riusabili da "Lo Scrittore")
   ===================================================================== */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* cover-hero: poster verticale + colonna introduttiva */
.cover-hero{display:flex; gap:54px; align-items:center; padding:58px 0 50px}
.cover-hero .poster{flex:0 0 360px; max-width:360px; position:relative; line-height:0;
  border:1px solid var(--border-h); box-shadow:0 26px 64px rgba(0,0,0,.6)}
.cover-hero .poster img{display:block; width:100%; height:auto}
.cover-hero .poster .c{position:absolute; width:16px; height:16px; border:1px solid var(--gold)}
.cover-hero .poster .tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.cover-hero .poster .tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.cover-hero .poster .bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.cover-hero .poster .br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.cover-hero .intro{flex:1 1 auto}
.cover-hero .intro .num{font-family:'Playfair Display',serif; font-size:1rem; letter-spacing:.4em; color:var(--gold-dim)}
.cover-hero .intro .tag{font-style:italic; color:var(--ink-dim); font-size:1.2rem; max-width:34ch; margin:.5em 0 1em}
.cover-hero .intro .lede1{font-size:1.12rem; color:#e6dbc4; max-width:46ch}

/* prosa d'autore */
.authorprose p{max-width:72ch; margin:0 0 1.05em; color:#e0d4bd; font-size:1.08rem}
.authorprose a{color:var(--gold); text-decoration:none; border-bottom:1px solid var(--gold-dim)}
.authorprose a:hover{color:var(--ink)}
.leadin{color:var(--ink-dim); font-style:italic}

/* citato di Grok */
.grok{position:relative; max-width:80ch; margin:8px 0 4px; padding:32px 36px 26px 44px;
  background:linear-gradient(180deg,#101319,#0c0e13); border:1px solid var(--analyst-dim);
  border-left:3px solid var(--analyst); color:#d6dae8; font-size:1rem; line-height:1.72}
.grok::before{content:"\201E"; position:absolute; top:.02em; left:.2em;
  font-family:'Playfair Display',serif; font-size:4.6rem; color:var(--analyst-dim); opacity:.55}
.grok p{margin:0 0 .85em; max-width:none}
.grok b{color:var(--analyst); font-weight:700; font-family:'Playfair Display',serif}
.grok .by{display:block; margin-top:12px; font-family:'Playfair Display',serif;
  color:var(--analyst); font-size:.84rem; letter-spacing:.16em; text-transform:uppercase}

/* libri di saggistica */
.books{display:flex; flex-wrap:wrap; gap:30px 34px; margin-top:12px}
.book{flex:1 1 calc(50% - 34px); min-width:300px; display:flex; gap:22px; align-items:flex-start}
.book .cov{flex:0 0 150px; max-width:150px; display:block; line-height:0; border:1px solid var(--border-h);
  transition:transform .3s, box-shadow .3s}
.book .cov img{display:block; width:100%; height:auto}
.book .cov:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.5)}
.book .bdy{flex:1 1 auto}
.book .bt{font-family:'Playfair Display',serif; font-size:1.18rem; color:var(--ink); line-height:1.18}
.book .bs{font-style:italic; color:var(--ink-dim); font-size:.92rem; margin:4px 0 9px}
.book .bx{font-size:.95rem; color:#cdbfa6; line-height:1.55}
.book .buy{display:inline-block; margin-top:11px; font-family:'Playfair Display',serif;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dim); text-decoration:none}
.book .buy:hover{color:var(--gold)}

/* embed playlist 16:9 */
.embeds{display:flex; flex-wrap:wrap; gap:26px; margin-top:8px}
.embed{flex:1 1 calc(50% - 13px); min-width:300px; background:var(--bg-soft);
  border:1px solid var(--border); transition:border-color .3s}
.embed:hover{border-color:var(--border-h)}
.embed .fr{position:relative; width:100%; padding-top:56.25%; line-height:0; background:#000}
.embed .fr iframe{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; border:0}
.embed .cap{padding:14px 18px 16px}
.embed .cap .t{font-family:'Playfair Display',serif; font-size:1.06rem; color:var(--ink)}
.embed .cap .d{font-size:.87rem; color:var(--ink-dim); margin-top:3px}
.embed .cap .pl-link{display:inline-block; margin-top:10px; font-family:'Playfair Display',serif;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  color:var(--gold-dim); transition:color .25s}
.embed .cap .pl-link:hover{color:var(--gold)}

/* CTA grande mediateca */
.bigcta{display:block; text-decoration:none; color:inherit; margin-top:14px;
  border:1px solid var(--analyst-dim); background:linear-gradient(110deg,#10131a,#0b0d12);
  padding:34px 38px; position:relative; transition:border-color .3s, transform .3s}
.bigcta:hover{border-color:var(--analyst); transform:translateY(-3px)}
.bigcta .k{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--analyst); margin-bottom:9px}
.bigcta .h{font-family:'Playfair Display',serif; font-size:1.7rem; color:var(--ink); line-height:1.15}
.bigcta .p{color:var(--ink-dim); margin-top:9px; max-width:62ch}
.bigcta .go{display:inline-block; margin-top:16px; font-family:'Playfair Display',serif;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--analyst)}

/* cross-link scrittore / museo */
.cross{display:flex; flex-wrap:wrap; gap:24px; margin-top:12px}
.xcard{flex:1 1 360px; min-width:300px; display:flex; gap:20px; align-items:center;
  text-decoration:none; color:inherit; border:1px solid var(--border); background:var(--bg-soft);
  padding:20px; transition:border-color .3s, transform .3s}
.xcard:hover{border-color:var(--gold); transform:translateY(-3px)}
.xcard .ph{flex:0 0 92px; width:92px; height:116px; line-height:0; border:1px solid var(--border-h); overflow:hidden}
.xcard .ph img{width:100%; height:100%; object-fit:cover; filter:grayscale(.3) contrast(1.05)}
.xcard .tx .k{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:6px}
.xcard .tx .h{font-family:'Playfair Display',serif; font-size:1.12rem; color:var(--ink); line-height:1.28}
.xcard:hover .tx .k{color:var(--gold)}

/* footer social */
.social{border-top:1px solid var(--border); padding:42px 0 8px; margin-top:48px}
.social .kicker{font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:20px}
.social .grid2{display:flex; flex-wrap:wrap; gap:10px 12px}
.social a.chip{display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  border:1px solid var(--border); padding:8px 14px; color:var(--ink-dim); font-size:.88rem;
  transition:border-color .25s, color .25s}
.social a.chip:hover{border-color:var(--gold); color:var(--ink)}
.social a.chip .ico{width:15px; height:15px; flex:0 0 auto; opacity:.82; transition:opacity .25s}
.social a.chip:hover .ico{opacity:1}
.social a.chip b{color:var(--ink-off); font-weight:400; font-size:.78rem; letter-spacing:.02em}
.social .mail{margin-top:20px; font-size:.96rem; color:var(--ink-dim)}
.social .mail a{color:var(--gold); text-decoration:none; border-bottom:1px solid var(--gold-dim)}

@media(max-width:760px){
  .cover-hero{flex-direction:column; align-items:flex-start; gap:30px; padding:38px 0 30px}
  .cover-hero .poster{flex-basis:auto; max-width:290px; margin:0 auto}
  .book{flex-basis:100%}
  .embed{flex-basis:100%}
}

/* ---- responsività fine (telefoni) ---- */
@media(max-width:560px){
  body{font-size:17px}
  .wrap{padding:0 18px}
  .cover-hero{padding:30px 0 24px}
  .cover-hero .poster{max-width:240px}
  .section{padding:34px 0}
  .grok{padding:24px 22px 22px 28px; font-size:.96rem}
  .grok::before{font-size:3.4rem}
  .book{gap:16px}
  .book .cov{flex-basis:120px; max-width:120px}
  .bigcta{padding:26px 22px}
  .bigcta .h{font-size:1.4rem}
  .xcard{flex-basis:100%}
  .social .grid2{gap:8px 8px}
  .social a.chip{padding:7px 11px; font-size:.84rem}
  footer{flex-direction:column; align-items:flex-start; gap:10px}
}

/* ---- selettore mediateca a piattaforme ---- */
.medkicker{margin-top:14px; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--analyst)}
.medintro{max-width:72ch; margin:12px 0 4px; color:#e0d4bd; font-size:1.06rem}
.meddoor{display:flex; flex-wrap:wrap; gap:18px; margin-top:20px}
.medcard{flex:1 1 220px; min-width:200px; position:relative; display:flex; flex-direction:column;
  text-decoration:none; color:inherit; background:var(--bg-soft);
  border:1px solid var(--border); border-top:3px solid var(--brand,#888);
  padding:24px 22px 22px; transition:border-color .3s, transform .3s, box-shadow .3s}
a.medcard:hover{transform:translateY(-4px); border-color:var(--brand); box-shadow:0 16px 38px rgba(0,0,0,.55)}
.medcard .logo{color:var(--brand); line-height:0; margin-bottom:14px}
.medcard .logo svg{width:34px; height:34px}
.medcard .mname{font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--ink); margin-bottom:8px}
.medcard .mnote{font-size:.92rem; color:var(--ink-dim); line-height:1.5; flex:1 1 auto}
.medcard .mgo{display:inline-block; margin-top:16px; font-family:'Playfair Display',serif;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brand)}
.medcard.soon{cursor:default; opacity:.7}
.medcard.soon .mgo{color:var(--ink-off)}
.medcard .badge{position:absolute; top:14px; right:14px; font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-off); border:1px solid var(--border); padding:3px 8px}
@media(max-width:560px){
  .meddoor{gap:14px}
  .medcard{flex-basis:100%}
}

/* =====================================================================
   PAGINE MEDIATECA PER PIATTAFORMA (youtube / vkvideo / odysee)
   ===================================================================== */
.medtop{display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; justify-content:space-between;
  padding:20px 0; border-bottom:1px solid var(--border)}
.medtop .back{font-family:'Playfair Display',serif; letter-spacing:.03em; color:var(--ink-dim); text-decoration:none; white-space:nowrap}
.medtop .back:hover{color:var(--gold)}
.medswitch{display:flex; flex-wrap:wrap; gap:8px}
.medswitch a,.medswitch span{display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  border:1px solid var(--border); padding:6px 12px; font-size:.83rem; color:var(--ink-dim);
  transition:border-color .25s,color .25s}
.medswitch a svg,.medswitch span svg{width:15px; height:15px; color:var(--brand,#888)}
.medswitch a:hover{border-color:var(--brand,#c8a96e); color:var(--ink)}
.medswitch .here{border-color:var(--brand); color:var(--ink); cursor:default}
.medswitch .soon{opacity:.5; cursor:default}

.medhero{display:flex; align-items:center; gap:24px; padding:46px 0 30px}
.medhero .blk{flex:0 0 auto; width:82px; height:82px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--brand); color:var(--brand)}
.medhero .blk svg{width:44px; height:44px}
.medhero .htx{flex:1 1 auto}
.medhero .k{font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:6px}
.medhero h1{font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(1.9rem,5vw,2.9rem); line-height:1.05; margin:0; color:var(--ink)}
.medhero .obs{font-style:italic; color:var(--ink-dim); margin-top:10px; max-width:58ch}
.medhero .obs b{color:var(--brand); font-style:normal; font-weight:400}

/* card-poster (variante non-iframe della card embed) */
.embed .fr .poster{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; gap:12px;
  align-items:center; justify-content:center; text-decoration:none;
  background:radial-gradient(120% 120% at 50% 32%, var(--brandsoft,#11131a), #0a0c11)}
.embed .fr .poster svg{width:54px; height:54px; color:var(--brand); opacity:.95; transition:transform .3s}
.embed .fr .poster .pl{font-family:'Playfair Display',serif; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-dim)}
.embed:hover .fr .poster svg{transform:scale(1.09)}

/* player Odysee a piena larghezza */
.odplayer{position:relative; width:100%; padding-top:56.25%; margin-top:8px; background:#000; border:1px solid var(--border)}
.odplayer iframe{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; border:0}
.odgate{display:block; text-decoration:none; color:inherit; margin-top:22px; text-align:center;
  border:1px solid var(--brand); border-top-width:3px;
  background:radial-gradient(140% 130% at 50% 0%, var(--brandsoft,#11131a), #0a0c11);
  padding:34px 30px; transition:transform .3s, box-shadow .3s}
.odgate:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.5)}
.odgate .h{font-family:'Playfair Display',serif; font-size:1.5rem; color:var(--ink); margin-bottom:8px}
.odgate .p{color:var(--ink-dim); max-width:60ch; margin:0 auto}
.odgate .go{display:inline-block; margin-top:16px; font-family:'Playfair Display',serif;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brand)}

@media(max-width:560px){
  .medhero{gap:16px; padding:34px 0 22px}
  .medhero .blk{width:62px; height:62px}
  .medhero .blk svg{width:34px; height:34px}
}

/* poster VK con miniatura reale (caricata via YouTube Data API quando disponibile) */
.embed .fr .poster.hasthumb{background-size:cover; background-position:center}
.embed .fr .poster.hasthumb::before{content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:radial-gradient(120% 120% at 50% 38%, rgba(7,8,12,.42), rgba(7,8,12,.84))}
.embed .fr .poster.hasthumb > *{position:relative; z-index:1}

/* rimando alla mediateca letteraria (sezione Scrittore) — accento ORO esplicito
   (su body.analista la var --gold e' blu, quindi qui i colori oro sono letterali) */
.litlink{display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px; justify-content:space-between;
  margin-top:34px; padding:26px 32px; text-decoration:none; color:inherit;
  border:1px solid #6f5836; border-left:3px solid #c8a96e;
  background:linear-gradient(110deg,#141009,#0b0a08); transition:border-color .3s, transform .3s}
.litlink:hover{border-color:#c8a96e; transform:translateY(-2px)}
.litlink .lt{max-width:64ch}
.litlink .lt .k{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#9a7b4a; margin-bottom:7px}
.litlink .lt .h{font-family:'Playfair Display',serif; font-size:1.22rem; color:var(--ink); line-height:1.25}
.litlink .lt .p{color:var(--ink-dim); font-size:.95rem; margin-top:6px}
.litlink .go{font-family:'Playfair Display',serif; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:#c8a96e; white-space:nowrap}
@media(max-width:560px){ .litlink{padding:22px 22px} }

/* contatori mediateca: pill "N video" per playlist + riga statistiche di pagina */
.embed .cap .count{display:none}
.embed .cap .count.on{display:inline-block; margin-left:8px; vertical-align:middle; white-space:nowrap;
  font-family:'Playfair Display',serif; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); border:1px solid var(--border); border-radius:2px; padding:2px 7px}
.medstats{display:none; margin:4px 0 2px; color:var(--ink-dim); font-size:1.02rem}
.medstats.on{display:block}
.medstats b{color:var(--ink); font-weight:700; font-family:'Playfair Display',serif}
.medstats .muted{color:var(--ink-off)}

/* selettore lingua (bandierine) in fondo a ogni pagina */
.langbar{margin:42px 0 0; padding-top:26px; border-top:1px solid var(--border); text-align:center}
.langbar .lbl{font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-off); margin-bottom:14px}
.langbar .flags{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.langbar a,.langbar .here{display:inline-flex; align-items:center; gap:7px; padding:6px 12px;
  border:1px solid var(--border); text-decoration:none; color:var(--ink-dim); font-size:.86rem;
  transition:border-color .25s,color .25s}
.langbar a:hover{border-color:var(--ink-dim); color:var(--ink)}
.langbar .here{border-color:var(--analyst); color:var(--ink); background:rgba(136,144,184,.12); cursor:default}
.langbar .fl{font-size:1.05rem; line-height:1}