/* ============================================================================
   YUUJOU — TIPOGRAFIA DEI TESTI (2026-08-14)

   Il testo GIUSTIFICATO e' una scelta di Alain e resta: e' la composizione
   della stampa da cinque secoli, ed e' per questo che l'occhio la riconosce
   come "professionale". Il problema del web non e' il giustificato in se',
   e' che il browser di suo NON SILLABA: per pareggiare i due margini puo'
   solo dilatare gli spazi fra le parole, e nascono i "fiumi" bianchi che
   serpeggiano nella colonna. Su un telefono, con ~38 caratteri per riga,
   diventano voragini.

   Qui si accende la sillabazione automatica, che e' esattamente cio' che
   rende bello il giustificato dei libri. Funziona perche' le nostre pagine
   dichiarano la lingua giusta (<html lang="it|ja|en">, verificato): il
   browser usa il dizionario di quella lingua per sapere dove spezzare.
   Supporto: tutti i browser dal settembre 2023.

   Per il GIAPPONESE la sillabazione non esiste — si va a capo quasi ovunque.
   Al suo posto valgono le regole di KINSOKU SHORI (禁則処理): niente
   punteggiatura, parentesi chiuse o piccoli kana (ゃゅょっ) a inizio riga.
   'line-break: strict' e' il livello piu' rigoroso, quello dei testi curati.

   NB: questo foglio va caricato PRIMA di yj_dark.css, che deve poter
   sovrascrivere i colori quando il tema scuro e' acceso.
   ========================================================================== */

/* --- la composizione del testo lungo -------------------------------------
   ⚠️ 20/8: era QUI, adesso e' nel **blocco V** in fondo al foglio, insieme a
   quelle che stavano nei blocchi D, D5 e Q. Erano quattro copie della stessa
   regola in quattro punti diversi, e ogni contenitore nuovo andava aggiunto a
   tutte e quattro: e' cosi' che .yj_legale, nato il 18/8, e' rimasto fuori da
   tutto per due giorni senza che nessuno se ne accorgesse. Ora l'elenco e' uno
   solo, e chi nasce si marca con **`.yj_testo`** e basta. */

/* --- testo giapponese: via i trattini ------------------------------------
   16/8: si guarda la lingua del TESTO, non quella dell'interfaccia. `:lang()`
   risale all'antenato piu' vicino che dichiara una lingua: se l'interfaccia e'
   in giapponese vale per tutto (come prima), e in piu' vale sui singoli blocchi
   che yj_lang.js marca con lang="ja" perche' SCRITTI in giapponese. Serve nel
   blog bilingue: un articolo giapponese letto da un italiano era composto con
   le regole del latino. */
/* ⚠️ 20/8: anche questa e' confluita nel blocco V — il giapponese ha ormai
   tre regole (niente trattini, `text-justify: auto`, `text-autospace: normal`)
   e tenerle in tre elenchi diversi era la stessa trappola di prima. */

/* --- il nero -------------------------------------------------------------
   #000 su bianco fa 21:1, il massimo possibile: sembra un pregio ma in
   lettura lunga i bordi delle lettere "vibrano" sul fondo e affaticano.
   #1c1c1c resta a ~16:1, cioe' ampiamente sopra il livello AAA delle linee
   guida di accessibilita', e si legge senza abbagliare. */
.wall_post {
  color: #1c1c1c;
}

/* --- il corpo del testo lungo --------------------------------------------
   Misurato il 14/8: Literata ha l"altezza-x al 95%% di Arial ed e" l"8%% piu"
   stretta, quindi a parita" di px il testo RISULTA piu" piccolo — non e"
   un"impressione (Alain: "forse troppo piccoli"). Si compensa portando il
   corpo da 15 a 17px, con interlinea 28px (1,65 del corpo: dentro
   l"intervallo consigliato 1,5-1,7 per il testo continuo).
   L"INTERFACCIA non si tocca: Inter ha la stessa altezza-x di Arial, e
   ingrandirla farebbe uscire le voci dai menu.

   16/8: ritoccato da 18 a 17px (interlinea 30 -> 29, sempre 1,7 del corpo).
   Alain: "pochissimo troppo grandi". Misurato: a 18px la riga del feed su PC
   conteneva 81 caratteri, sopra l"intervallo buono per il testo continuo
   (55-75); a 17px il blocco pesa meno. Sul telefono si passa da 43 a 45
   caratteri per riga, che e" il punto giusto per una colonna da 360px.

   16/8 sera: 17px e" risultato troppo piccolo e 18 un filo troppo grande. Il
   punto giusto e" **17,5**, con interlinea **30** (1,71): mezzo pixel si vede
   eccome su una serif dall"occhio grande, e i browser lo rendono senza
   sgranature (il calcolo del testo e" gia" in sub-pixel). Il 30 uniforma anche
   feed e articolo, che prima divergevano di un pixel (29 contro 30). */
.wall_post,
.wall_item_comment,
.comment_text .full_comment,
.wrapper-one-article .one-article .blogs_post_content,
.wrapper-one-article .one-article .blogs_post_content p,
.wrapper-one-article .one-article .blogs_post_content li {
  font-size: 17.5px;
  line-height: 30px;
}

/* ===========================================================================
   I CARATTERI (2026-08-14)

   Prima di oggi il sito era interamente in Arial: "Montserrat" era dichiarato
   sui titoli ma non e' mai stato caricato (nessun @font-face, nessun file),
   quindi cadeva su Arial anche quello. Qui non si sostituisce una scelta: si
   colma un vuoto.

   Due famiglie, con compiti diversi:
   - LITERATA per il testo lungo (post, articoli, commenti). E' una serif
     disegnata da TypeTogether per la lettura prolungata SU SCHERMO: ha l'occhio
     grande e i tratti robusti, al contrario dei Garamond da stampa che a 16px
     si sgranano. Da' al sito il tono editoriale che gli si addice.
   - INTER per l'interfaccia (menu, pulsanti, nomi, schede): disegnata per le UI,
     forme aperte e nitide ai corpi piccoli.

   GIAPPONESE E COREANO: dal 4/10/2026 i Noto di Google, ospitati da noi
   (fonts/yj/noto/, regole in fonts/yj/noto/yj_noto.css). Fino al 3/10 si usava
   lo stack dei font di sistema (Hiragino, Yu Gothic, Noto CJK): ottimi, ma
   diversi da un dispositivo all'altro, e su Chrome il grassetto giapponese era
   finto. Per il testo lungo il MINCHO (Noto Serif JP), coerente con Literata;
   per il coreano il myeongjo (Noto Serif KR).

   PESO: 131 KB per un lettore italiano — un solo file per famiglia, perche' sono
   font VARIABILI (tutti i pesi in un file). I sottoinsiemi non latini vengono
   scaricati solo se in pagina compare un carattere che li richiede (unicode-range).
   Ospitati da noi: nessuna richiesta a Google dal browser dei visitatori.
   ========================================================================== */

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;            /* file VARIABILE: un solo scaricamento per tutti i pesi */
  font-display: swap;              /* il testo si legge subito col font di sistema, poi si sostituisce */
  src: url('../fonts/yj/literata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;            /* file VARIABILE: un solo scaricamento per tutti i pesi */
  font-display: swap;              /* il testo si legge subito col font di sistema, poi si sostituisce */
  src: url('../fonts/yj/literata-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;            /* file VARIABILE: un solo scaricamento per tutti i pesi */
  font-display: swap;              /* il testo si legge subito col font di sistema, poi si sostituisce */
  src: url('../fonts/yj/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;            /* file VARIABILE: un solo scaricamento per tutti i pesi */
  font-display: swap;              /* il testo si legge subito col font di sistema, poi si sostituisce */
  src: url('../fonts/yj/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- interfaccia ---------------------------------------------------------- */
body,
input, textarea, select, button,
.btn, .form-control {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
               "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP",
               Meiryo, sans-serif;
}

/* --- testo lungo: la parte che si legge davvero --------------------------- */
.wall_post,
.wall_item_comment,
.comment_text .full_comment,
.wrapper-one-article .one-article .blogs_post_content,
.cham-content-style-10 p {
  font-family: 'Literata', Georgia, "Times New Roman",
               "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP",
               "Hiragino Sans", "Yu Gothic", serif;
}

/* --- i titoli ------------------------------------------------------------
   ⚠️ 14/8: i selettori che avevo scritto (.blogs_post_title, .one_blog_title)
   NON ESISTONO in questo tema — i titoli restavano in Arial. Quelli veri usano
   tutti .cham-heading, e vanno distinti per CONTESTO:
   - il titolo di un ARTICOLO e' contenuto -> serif, come il testo che segue;
   - «Sfoglia i blog» e simili sono INTERFACCIA -> sans, come i menu. */
.cham-heading {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
               "Hiragino Sans", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
}

.wrapper-one-article h2.cham-heading,
.wrap_static_page.wrapper-one-article h2 {
  font-family: 'Literata', Georgia, "Hiragino Mincho ProN", "Yu Mincho",
               "Noto Serif JP", serif;
  font-weight: 600;
  letter-spacing: -0.01em;   /* i corpi grandi in serif stanno meglio un filo piu' stretti */
}

/* --- le icone: NON si toccano ---------------------------------------------
   ⚠️ 14/8/2026: qui c"era una regola che dava "font-family: inherit" a
   .glyphicon e a tutte le classi icon_*, con l"idea di proteggerle. Faceva
   l"opposto: le privava del loro font e l"icona della chat era sparita
   (segnalato da Alain). Le icone hanno gia" il loro font dichiarato dove
   serve: il modo di proteggerle e" NON scrivere regole su di loro.
   Resta solo la blindatura di FontAwesome, che eredita dal body. */
.fa { font-family: FontAwesome !important; }

/* --- cirillico: scaricato SOLO se in pagina compare un carattere cirillico
       (unicode-range). Per un lettore italiano e' come se non esistesse. --- */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/yj/literata-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/yj/literata-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/yj/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/yj/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- gli altri titoli che sono CONTENUTO ----------------------------------
   Trovati ispezionando il DOM il 14/8 (non hanno classi proprie, si prendono
   dal contenitore):
   - .cham-post-text  = il titolo dell'articolo nelle schede dell'elenco blog;
   - .blogs_post_content = i sottotitoli scritti dall'autore DENTRO l'articolo.
   Entrambi sono testo dell'autore, quindi parlano con la voce del testo. */
.cham-post-text h1,
.cham-post-text h2,
.cham-post-text h3,
.cham-post-text h4,
.blogs_post_content h1,
.blogs_post_content h2,
.blogs_post_content h3,
.blogs_post_content h4,
.blogs_post_content h5,
.blogs_post_content h6 {
  font-family: 'Literata', Georgia, "Hiragino Mincho ProN", "Yu Mincho",
               "Noto Serif JP", serif;
}

/* --- regola generale per i titoli -----------------------------------------
   Invece di rincorrere ogni selettore rimasto in Arial (ce n'erano sparsi in
   modali, schede, viste alternative dell'elenco blog), si dichiara che TUTTI i
   titoli parlano con la voce dell'interfaccia. Le regole qui sopra, che danno
   Literata ai titoli di CONTENUTO, restano valide perche' hanno selettori piu'
   specifici e quindi vincono. */
h1, h2, h3, h4, h5, h6,
.modal-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
               "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP",
               Meiryo, sans-serif;
}

/* i titoli di contenuto: ridichiarati DOPO la regola generale, cosi' vincono
   a prescindere dall'ordine di specificita' */
.wrapper-one-article h2.cham-heading,
.cham-post-text h1, .cham-post-text h2, .cham-post-text h3, .cham-post-text h4,
.cham-blog-style-2 h1, .cham-blog-style-2 h2, .cham-blog-style-2 h3,
.blogs_post_content h1, .blogs_post_content h2, .blogs_post_content h3,
.blogs_post_content h4, .blogs_post_content h5, .blogs_post_content h6 {
  font-family: 'Literata', Georgia, "Hiragino Mincho ProN", "Yu Mincho",
               "Noto Serif JP", serif;
}

/* ===========================================================================
   IL GIAPPONESE PIU' GRANDE DEL LATINO (2026-08-14)

   Alain: «l'unica cosa che trovo difficile da leggere è il giapponese».
   Ha ragione, e la causa e' nella natura dei segni: un kanji puo' contenere
   venti tratti dentro lo stesso quadratino in cui una "o" ne ha uno. Alla
   stessa dimensione dichiarata il giapponese risulta quindi molto piu' fitto
   e stanca prima. Nella composizione giapponese si compensa da sempre
   ingrandendo il CJK rispetto al latino.

   Qui NON si ingrandisce tutto il testo: le famiglie giapponesi e coreane
   ('YJ JP', 'YJ JP Serif', 'YJ KR', 'YJ KR Serif') hanno 'size-adjust: 106%'
   e 'unicode-range' limitato ai soli caratteri asiatici. Risultato: il latino
   resta identico, il giapponese cresce del 6%.

   4/10/2026: le quattro famiglie stanno in fonts/yj/noto/yj_noto.css (i Noto,
   dal nostro server). Prima qui c'erano due @font-face con local() verso i
   font di sistema: copia in yj_tipografia.css.bak-20261004-2335-font-noto.
   ========================================================================== */

/* le famiglie asiatiche entrano negli stack SUBITO DOPO il font latino: il
   browser usa il latino per le lettere, queste per giapponese e coreano */
body,
input, textarea, select, button,
.btn, .form-control,
h1, h2, h3, h4, h5, h6, .modal-title, .cham-heading {
  font-family: 'Inter', 'YJ JP', 'YJ KR', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
               "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP",
               Meiryo, sans-serif;
}

.wall_post,
.wall_item_comment,
.comment_text .full_comment,
.wrapper-one-article .one-article .blogs_post_content,
.cham-content-style-10 p,
.wrapper-one-article h2.cham-heading,
.cham-post-text h1, .cham-post-text h2, .cham-post-text h3, .cham-post-text h4,
.cham-blog-style-2 h1, .cham-blog-style-2 h2, .cham-blog-style-2 h3,
.blogs_post_content h1, .blogs_post_content h2, .blogs_post_content h3,
.blogs_post_content h4, .blogs_post_content h5, .blogs_post_content h6 {
  font-family: 'Literata', 'YJ JP Serif', 'YJ KR Serif', Georgia, "Hiragino Mincho ProN", "Yu Mincho",
               "Noto Serif JP", "Hiragino Sans", "Yu Gothic", serif;
}

/* --- interlinea per il giapponese ----------------------------------------
   Il testo giapponese vuole piu' aria del latino: i kanji riempiono tutto il
   quadratino, senza le "valli" fra le lettere che nell'alfabeto latino fanno
   respirare la riga. La pratica editoriale giapponese sta su 1,7-1,8 contro
   l'1,5-1,7 del latino. Si applica quando l'interfaccia e' in giapponese. */
.wall_post:lang(ja),
.wall_item_comment:lang(ja),
.comment_text .full_comment:lang(ja),
.comment_text_cont:lang(ja),
.txt_comment:lang(ja),
.wrapper-one-article .one-article .blogs_post_content:lang(ja),
.wrapper-one-article .one-article .blogs_post_content p:lang(ja) {
  line-height: 32px;   /* segue il corpo: 1,83 di 17,5px, dentro l'uso giapponese (1,7-1,8+) */
}

/* --- i commenti parlano con la voce dei post ------------------------------
   14/8: erano rimasti in Inter a 15px mentre i post erano in Literata a 18 —
   incoerenza vera, notata da Alain: un commento e' testo scritto da una
   persona, esattamente come un post. Si applica la serif al TESTO, non ai
   comandi («Ti piace», «Rispondi», l'ora) che restano interfaccia.
   Corpo un gradino sotto il post, perche' il commento e' secondario, ma
   abbastanza per leggersi bene: 16px sceso a 15,5 il 16/8 insieme al post,
   per tenere lo stesso stacco di prima (il post e' passato da 18 a 17). */
.comment_text_cont,
.txt_comment,
.comment_text .comment_text_cont,
.blog_post_comment_item .comment_text_cont {
  font-family: 'Literata', 'YJ JP Serif', 'YJ KR Serif', Georgia, "Hiragino Mincho ProN", "Yu Mincho",
               "Noto Serif JP", "Hiragino Sans", "Yu Gothic", serif;
  font-size: 16px;
  line-height: 26px;
}

/* --- la firma dell'articolo ----------------------------------------------
   Sui giornali la firma e' composta nello stesso carattere del pezzo: e' parte
   dell'articolo, non dell'interfaccia. Qui la riga con autore, data e «Tutti i
   blog» sta in .user_information dentro la pagina di un articolo. */
.wrapper-one-article .user_information,
.wrapper-one-article .user_information a,
.wrapper-one-article .cham-meta,
.wrapper-one-article .blog_edit_post {
  font-family: 'Literata', 'YJ JP Serif', 'YJ KR Serif', Georgia, "Hiragino Mincho ProN", "Yu Mincho",
               "Noto Serif JP", serif;
}

/* ############################################################################
   IL SISTEMA — 16/8/2026

   Fin qui il foglio diceva CON QUALE CARATTERE si scrive. Da qui dice anche
   con quale CORPO, quale PESO e quale CONTRASTO: sono la stessa materia, e
   tenerli in un file solo vuol dire che per tornare indietro basta togliere
   un <link> da _header.html.

   Le misure che motivano ogni scelta stanno nell'analisi del 16/8 (memoria
   tipografia-e-font.md): 1.004 elementi censiti su 44 viste, chiaro e scuro,
   PC e telefono.

   ⚠️ I COLORI QUI SOTTO VALGONO PER IL TEMA CHIARO. Le controparti per il
   buio stanno in yj_dark.css, che si carica DOPO e solo per chi ha acceso il
   tema scuro: e' l'unico modo pulito di avere due palette senza selettori
   acrobatici.
   ########################################################################## */

/* === A. CONTRASTO ========================================================
   Sotto 4,5:1 un testo non si legge senza sforzo (soglia AA). Questi erano
   i punti sotto soglia, misurati sul sito vero. */

/* A1. La fascia dei contatori — SOLO IL COLORE DELLE SCRITTE.
   Storia breve: avevo cambiato fondo, corpo e margini; Alain ha guardato e ha
   deciso che l'aspetto va bene com'e' e che **si tocca solo il contrasto delle
   scritte** — ingrandirle rischia di spostare le voci (aveva ragione: a 9px in
   su l'etichetta "wall posts" non entra piu' nella sua casella).

   Quindi resta una riga sola, e cambia una tinta: nessuna misura si muove.
   #cdd4dd su #6f7b88 fa 2,9; il bianco pieno fa **4,3** — il massimo
   ottenibile senza toccare il fondo, che e' il vero limite (per superare 4,5
   bisognerebbe scurire la fascia, e la fascia non si tocca).
   I numeri sopra le etichette sono gia' bianchi ma restano piu' grandi e in
   grassetto: la gerarchia fra numero ed etichetta non si perde. */
.pl_grid_count .bl_count .name{ color: #ffffff; }

/* A2. I metadati grigi: data del post, ora del commento, contatori delle
   schede blog. Erano #999 (2,8) e #b3b3b3 (2,1) — cioe' piu' decorazione che
   informazione. #6b7280 sta a 5,0 e resta chiaramente secondario. */
.user_wall_info .comment_time_ago,
.cham-post-meta .info_item,
.cham-blog-style-1 .cham-post .cham-post-meta span.info_item{ color: #6b7280; }

/* A3. Il blu dei link e dei nomi.
   #1784fb e' il blu di serie del CMS: su bianco fa 3,7, sotto soglia proprio
   sull'elemento piu' cliccato del sito. #1268d0 fa 5,3 ed e' la stessa tinta
   due gradini piu' profonda: nessuno si accorge del cambio, tutti leggono
   meglio. Si nominano i punti di CONTENUTO, non il generico `a`: i link su
   fondo colorato (intestazione, pulsanti) devono restare come sono. */
.user_wall_info .info .name a,
.column .bl .title a,
.column_blogs_list_title span,
.wall_post a,
.comment_text_cont a,
.blogs_post_content a,
.wall_post_meta_link_title{ color: #1268d0; }

/* A4. ⚠️ TOLTO il 16/8: il grigio-blu #6b7c82 (voce di menu attiva e pulsanti
   "Pubblica sul blog"/"Crea gruppo") era forzato da qui, con !important, perche'
   il pannello vinceva. Ora il valore giusto (#4f5c61) sta nelle OPZIONI —
   config id 1037, 1176, 1177 — cioe' nel posto suo: il bianco sopra passa da
   4,3 a 6,4 senza una riga di CSS. Restava solo da togliere questo.
   Il "Altro" del menu, invece, resta qui sotto: quel colore nel pannello non e'
   stato cambiato. */

/* il "More" del menu, che sta su un grigio piu' scuro: 3,2 -> 6,1 */
.navbar-default .navbar-nav > li > a.dropdown-toggle{ color: #d3dde2; }

/* A5. ⚠️ TOLTO il 16/8: qui c'era un verde piu' scuro per .btn-success. Era
   inutile due volte — quel pulsante non e' verde ma ROSA, e a dipingerlo e' lo
   <style> del pannello, che vince perche' viene stampato dopo i fogli. Il rosa
   e' colore d'identita': Alain l'ha guardato scurito e ha preferito il suo
   (#ff6699). Si cambia dalle opzioni, non da qui. */

/* === B. LA SCALA ==========================================================
   Il censimento del 16/8 ha trovato TREDICI corpi diversi in uso sul PC
   (10 · 12 · 12,5 · 13 · 14 · 15 · 16 · 17,5 · 18 · 19 · 20 · 24 · 30) e
   quindici sul telefono, con un 8px. Il guaio non e' il numero in se': e' che
   una differenza di 1px non si legge come un livello di importanza, si legge
   come un'imprecisione. Qui si chiudono le coppie che si pestano i piedi.

   ⚠️ COSA NON SI TOCCA, e perche': i corpi 14, 15 e 16 dell'interfaccia
   restano dove sono. Ingrandirli allarga le voci dei menu (che su schermi
   medi vanno a capo) e rimpicciolirli peggiora la leggibilita': sono gia' al
   loro posto. Il consolidamento riguarda i gradini che NON hanno un mestiere
   proprio. */

/* B1. 12,5 -> 12. Mezzo pixel non comunica niente. */
.yjev_card_date, .yjev_fc_chip, .yjev_lt, .yjev_fc_foot{ font-size: 12px; }

/* B2. 13 -> 14 per i metadati che si LEGGONO (date e luoghi delle schede).
   Restano a 13 i numeri dentro pastiglie di dimensione fissa, che se crescono
   sfondano la pastiglia. */
.cham-post-meta .info_item,
.cham-blog-style-1 .cham-post .cham-post-meta span.info_item,
.yjev_fc_where{ font-size: 14px; }

/* B3. 18 -> 19: i titoli delle colonne laterali si allineano ai nomi utente,
   che sono l'altro elemento di quel rango. */
.column .bl .title,
.column .bl .title a{ font-size: 19px; }

/* B4. 24 -> 26 e 30 -> 32: i due gradini alti erano troppo vicini al testo.
   Un titolo deve staccarsi, non somigliare. */
h3.cham-heading{ font-size: 26px; }
.wrapper-one-article h2.cham-heading,
.wrap_static_page.wrapper-one-article h2{ font-size: 32px; line-height: 42px; }

/* === C. I PESI ============================================================
   Su 1.004 elementi il sito ne usava DUE: 802 in regolare (400) e 195 in nero
   (700). Cioe' un solo modo di dire "questo conta": passare al 700, che nei
   corpi piccoli e' un macigno. Eppure Literata e Inter sono file VARIABILI e
   rispondono su tutta la scala 400-700 — verificato misurando la larghezza
   della stessa frase a pesi intermedi: 500 e 600 sono gia' scaricati.

   La regola che si adotta:
     400  leggere
     500  nomi e comandi — hanno presenza senza gridare
     600  titoli
     700  SOLO il grassetto che scrive l'autore dentro il testo.
   Cosi' il grassetto d'autore torna a significare qualcosa invece di
   confondersi con l'interfaccia. */

.user_wall_info .info .name a{ font-weight: 500; }
.column .bl .title,
.column .bl .title a{ font-weight: 600; }

h1, h2, h3, h4, h5, h6,
.cham-heading,
.modal-title{ font-weight: 600; }

.yjev_fc_title{ font-weight: 600; }        /* era 800: un peso che nessun altro titolo del sito usa */

/* il grassetto dentro il testo scritto dalle persone resta pieno */
.wall_post b, .wall_post strong,
.comment_text_cont b, .comment_text_cont strong,
.blogs_post_content b, .blogs_post_content strong{ font-weight: 700; }

/* === D. RIFINITURE ========================================================= */

/* D1. I commenti si compongono come i post.
   Era l'ultima disuniformita' fra feed e blog: il post giustificato e
   sillabato, il commento a bandiera. Un commento e' testo scritto da una
   persona esattamente come un post — e sotto ci sono le stesse regole di
   sillabazione, senza le quali il giustificato su colonna stretta si spalanca.
   ⚠️ La CHAT resta fuori, e deve restarci: le bolle sono corte e il
   giustificato le farebbe allargare tutte alla stessa misura. */
/* la composizione di questi tre contenitori sta nel blocco V (20/8). */

/* D2. Le icone delle reazioni nel riepilogo.
   Non sono mai cambiate (18px in pixel fissi da luglio), ma il testo intorno
   e' passato da 15 a 17,5: il rapporto icona/testo e' sceso da 1,20 a 1,03 e
   l'icona ha smesso di reggere la riga. A 20px torna in proporzione.
   La barra di scelta (40/34) resta com'e': li' l'emoji e' gia' protagonista. */
.yj_react_sum .yjr,
.yj_react_face,
.who_liked .yj_react_face{ width: 20px; height: 20px; }
.yj_react_sum .yj_react_total{ font-size: 14px; line-height: 20px; }

/* D3. ⚠️ RIMOSSA il 16/8 a notte, su segnalazione di Alain.
   Qui c'era una regola che portava a 44px l'area sensibile dei comandi sotto
   il post (Mi piace / Commenta / Condividi), che sul telefono sono alti 34.
   Per farlo rendeva il link un `inline-flex`: e cambiare il tipo di
   contenitore ha cambiato anche l'allineamento verticale fra l'icona e la
   parola, che sul telefono si vedevano sfasate.

   La lezione: in una barra gia' equilibrata NON si cambia il `display` per
   guadagnare pixel di area sensibile. Se un giorno si vorra' rifare, la strada
   e' un'area invisibile aggiunta sopra il link (uno pseudo-elemento), che
   allarga il bersaglio senza spostare nulla — ma va misurata perche' non
   arrivi a coprire il testo sopra e i commenti sotto.
   I 44px sono una raccomandazione; un'icona disallineata si vede subito. */

/* D4. I segnaposto delle foto per chi non ne ha ancora caricate.
   Chi si iscrive oggi trova sopra il feed una fila di riquadri con l'icona
   della fotocamera: e' la prima cosa che vede, ed e' rumore. Qui si attenuano
   soltanto (restano cliccabili: e' anche il modo per caricare le foto).
   ⚠️ NON si nascondono: la griglia piena e quella vuota si distinguono solo
   per classi fragili, e una regola sbagliata farebbe sparire le foto a chi ce
   le ha. Cosa mostrare a un profilo vuoto e' una decisione di prodotto. */
.grid_item_empty_photo{ opacity: .5; transition: opacity .25s ease; }
.grid_item_empty_photo:hover{ opacity: .85; }

/* === E. SECONDO GIRO SUI CONTRASTI =========================================
   Rimisurato dopo il primo intervento: questi erano rimasti indietro perche'
   stanno su selettori diversi da quelli gia' nominati. */

/* E1. Nomi e comandi DENTRO i commenti: sono lo stesso blu dei nomi nel feed,
   ma con classi proprie. 3,7 -> 5,3. */
.comment_link_name,
.comment_item a,
.comment_item_data a,
.comment_reply_data a,
.comment_text a,
a.comment_item_reply_link,
.wall_item_comment a{ color: #1268d0; }

/* E2. Gli ultimi grigi #b3b3b3 (2,1): l'ora sotto i commenti e il «Leggi tutto
   il commento». Sono informazione, non ornamento. */
.comment_item_data,
.comment_reply_data,
.comment_item_data span,
.comment_reply_data span,
.full_comment_show_more,
.comment_text .hidden-xs{ color: #6b7280; }

/* E3. Il tastino Traduci era #8a98a5 su bianco: 3,0. */
.yj_tr_btn{ color: #6b7280; }

/* E4. I nomi bianchi sopra le copertine dei blog: il velo nero al 20% non
   bastava sulle foto chiare, e il 16/8 era stato portato al 45%.
   ⚠️ RIPORTATO AL 20% il 31/8/2026. Il 45% non e' un velo, e' una pillola nera
   piena: sulle copertine chiare (le lezioni in giapponese) si stacca dalla foto
   e si legge come un difetto — segnalato da Alain, che ha verificato sulla demo
   del fornitore. Li' il valore e' rgba(0,0,0,.2): la pillola si legge come un
   semplice contorno bianco. La leggibilita' persa si recupera con un'ombra sul
   TESTO, che non sporca la foto (una copertina si guarda, un nome si legge). */
.cham-post-image .cham-category span.name,
.cham-post-link .cham-category span.name{
  background-color: rgba(0,0,0,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

/* E5. I pulsanti rosa del marchio (Log in, Accetta) hanno il bianco a 2,5.
   ⚠️ Il rosa arriva dalle opzioni del pannello, non da questo foglio: e' un
   colore d'identita' e non lo cambio di mia iniziativa. Qui si fa l'unica cosa
   che aiuta senza toccarlo: il peso del testo, che ne irrobustisce i tratti. */
/* ⚠️ 18/8: il semi-grassetto su questi bottoni e' stato TOLTO. Alain ha
   acconsentito a rimettere l'inchiostro scuro «se si tratta di una modifica
   unicamente relativa al colore e non cambia la dimensione ne' il
   posizionamento»: il peso cambia lo spessore (e di un soffio la larghezza)
   delle lettere, quindi fuori. Sul bottone agisce solo il colore. */

/* === F. RINFORZI ==========================================================
   Tre regole del blocco E perdevano contro selettori piu' specifici di
   style.css (`.bl_comments .item ul.list li ...`, che vale 0-2-2). Non si
   usa !important: si nomina la stessa catena, un gradino piu' in giu'.
   Trovato con lo strumento che elenca, per un elemento, TUTTE le regole di
   colore che lo toccano e chi vince (chi_vince.py). */

.bl_comments .item ul.list li.comment_item_data,
.bl_comments .item ul.list li.comment_reply_data{ color: #6b7280; }

.bl_comments .item ul.list li span.comment_item,
.bl_comments .item ul.list li a{ color: #1268d0; }

/* Il nome sopra la copertina del blog.
   ⚠️ CORRETTO il 31/8/2026. Il velo scuro era stato messo su `.cham-category.name`
   credendo che fosse lui stesso la pillola. Non lo e': quello e' il CONTENITORE, e
   dentro ha uno `span.name` con border-radius 30px e 4px di margine a destra e sotto.
   Risultato: un rettangolo nero squadrato che sbordava di 4px oltre la pillola.
   Non si notava finche' le copertine erano foto scure; con le copertine chiare delle
   lezioni di giapponese saltava all'occhio (segnalato da Alain).
   Ora il velo sta sulla PILLOLA, che ha gia' la sua forma arrotondata; al contenitore
   resta comunque il raggio, cosi' se in qualche vista il testo fosse diretto non
   ricompare lo spigolo. */
.cham-post-image .cham-category.name,
.cham-post-link .cham-category.name,
.cham-blog-style-1 .cham-post .cham-post-image .cham-category.name{
  background-color: transparent;
  border-radius: 30px;
}
.cham-post-image .cham-category.name > span.name,
.cham-post-link .cham-category.name > span.name,
.cham-blog-style-1 .cham-post .cham-post-image .cham-category.name > span.name{
  background-color: rgba(0,0,0,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

/* il "9 mesi fa" sotto il titolo dell'articolo e la riga luogo/ora delle
   schede evento: gli ultimi due grigi sotto soglia */
.wrapper-one-article .user_information .cham-meta span,
.wrapper-one-article .cham-meta{ color: #6b7280; }
.yjev_fc_where{ color: #6b6a64; }
.yjev_past_link, a.yjev_past_link{ color: #1268d0; }

/* === G. IL BLU, UNA VOLTA SOLA ============================================
   Fin qui il blu leggibile e' stato messo un pezzo alla volta, e ogni giro ne
   saltava fuori un altro (il "Rispondi", il "Filtra", il "Pubblica sul blog"…):
   sono decine di punti in cui il CMS scrive lo stesso #1784fb. Si dichiara
   quindi UNA volta sul selettore piu' generale, con la specificita' piu' bassa
   possibile: cosi' vale ovunque per eredita', e ogni regola piu' specifica del
   tema — i link bianchi dell'intestazione, quelli dentro i pulsanti — continua
   a vincere come prima.
   Al buio ci pensa yj_dark.css, che si carica dopo e alza il blu invece di
   abbassarlo. */
a{ color: #1268d0; }

/* la voce di menu attiva e il menu "Altro" aperto: il fondo grigio-blu del
   CMS arriva da una regola piu' forte, e qui si nomina l'id del contenitore
   per superarla senza !important */
#navbar .navbar-nav > li.active > a,
#navbar .navbar-nav > li.active > a:hover,
#navbar .navbar-nav > li.active > a:focus,
#navbar .navbar-nav > li.open > a,
#navbar .navbar-nav > li.open > a:hover,
#navbar .navbar-nav > li.open > a:focus{ background-color: #4f5c61; }

/* il "x mesi fa" sotto il titolo dell'articolo: e' lo span stesso ad avere la
   classe, non un figlio */
span.cham-meta,
.wrapper-one-article span.cham-meta{ color: #6b7280; }

/* il verde del pulsante "Crea evento" (nostro): bianco su #2f8f52 fa 2,5 */
.yjev_btn_create, a.yjev_btn_create{ background-color: #2f7d3a; }

/* === H. VINCERE SUL PANNELLO ==============================================
   ⚠️ SCOPERTA CHE VALE PER SEMPRE: il CMS stampa nel <head> uno <style>
   generato dalle opzioni di colore, e lo stampa DOPO i fogli di stile; alcune
   sue regole hanno perfino id + !important. Quando una regola di colore "non fa
   presa", e' quasi sempre questo, non un selettore sbagliato.
   ⚠️ E la conseguenza pratica, imparata il 16/8: se il colore arriva dal
   pannello, la cosa giusta NON e' rincorrerlo con !important — e' cambiarlo
   nelle opzioni. Le regole che stavano qui (voce di menu attiva e
   .btn-primary-2) sono state tolte proprio per questo: il valore ora e' giusto
   alla fonte, config id 1037, 1176, 1177.
   Resta solo il "Altro" del menu, il cui colore nel pannello non e' cambiato. */

/* ⚠️ 18/8: tolto anche l'ultimo !important. Il colore del testo di "Altro" era
   forzato da qui perche' il pannello vinceva; ora e' giusto nell'opzione sua
   (config 1352, member_navbar_menu_more_text_color_highlighted: da #97adb7 a
   #dde5e9, contrasto 3,2 -> 5,9). Nota che l'opzione riguarda SOLO il "Altro":
   le altre voci del menu (config 1035) stanno su fondo nero e vanno gia' bene,
   e cambiarle le avrebbe rese indistinguibili dalla voce attiva.
   In questo foglio non resta nessuna forzatura di colore: i colori stanno nelle
   opzioni, qui c'e' la tipografia. */

/* === I. LE RISPOSTE AI COMMENTI, E IL «LEGGI TUTTO» =======================
   Segnalato da Alain il 16/8 a notte, guardando il commento di Kenji: due
   «Read full comment» vicini con due caratteri diversi. Aveva ragione, ed era
   il sintomo di una cosa piu' grossa.

   1) Il 14/8 avevo portato in Literata i COMMENTI ma non le RISPOSTE ai
      commenti (.comment_text_reply_one), che erano rimaste in Inter 15px a
      bandiera. Una risposta e' testo scritto da una persona esattamente come
      un commento: stessa voce, stesso corpo, stessa composizione.
   2) Il «Leggi tutto» ereditava il carattere del contenitore: serif dentro un
      commento, sans dentro una risposta. Ma non e' testo: e' un COMANDO, e i
      comandi parlano sempre con la voce dell'interfaccia. Ora e' Inter in
      tutt'e due i posti — che era anche il modo per far sparire la differenza
      vista da Alain. */

/* qui restano solo carattere e corpo: la composizione sta nel blocco V (20/8) */
.comment_text_reply_one,
.comment_text_reply_cont{
  font-family: 'Literata', 'YJ JP Serif', 'YJ KR Serif', Georgia, "Hiragino Mincho ProN", "Yu Mincho",
               "Noto Serif JP", "Hiragino Sans", "Yu Gothic", serif;
  font-size: 16px;
  line-height: 26px;
}
.comment_text_reply_one:lang(ja),
.comment_text_reply_cont:lang(ja){ line-height: 30px; }

/* il comando, ovunque si trovi, e' interfaccia */
.show_hide_full_comment,
.show_hide_full_comment span,
.full_comment_show_more{
  font-family: 'Inter', 'YJ JP', 'YJ KR', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
               "Hiragino Sans", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 14px;
  text-align: left;
}

/* === L. LA FASCIA CHE ESCE A DESTRA — ⚠️ ANNULLATO ========================
   Sul telefono le otto voci sbordavano: 8 margini da 20px (regola del CMS)
   piu' il testo fanno ~400px su uno schermo da 390. L'avevo sistemato
   portando i margini a 11px, e le voci rientravano tutte (misurato a 360, 390
   e 430). Alain ha preferito rivedere quel pezzo con calma: rimesso com'era.
   Se un giorno si riprende, la riga e' una sola:
     @media (max-width: 480px){
       .wrap_profile_menu_inner_small .pl_grid_count .bl_count.left .item{ margin-right: 11px; }
     }
   ⚠️ NON provare a centrare il blocco (padding 0 + text-align:center o flex):
   misurato, su 360px torna a sbordare — il rientro di sinistra non viene da
   li'. */

/* === M. IL CORSIVO NON ESISTE IN GIAPPONESE ================================
   Osservazione di Alain, 16/8: «il giapponese credo non ce lo abbia, il
   corsivo». Esatto: i font CJK non hanno un disegno corsivo, quindi il browser
   INCLINA i caratteri a forza. Su un kanji si vede che e' storto — in
   composizione giapponese e' un difetto, non uno stile. Qui l'inclinazione si
   spegne: sul testo latino non cambia niente, il corsivo vero resta corsivo.

   ⚠️ I BOTEN (圏点, i puntini sopra i caratteri: il modo giapponese di dare
   enfasi) erano stati messi al posto dell'inclinazione, con
   `text-emphasis: filled dot`. TOLTI la notte del 16/8, per due motivi trovati
   sul campo:
     1. sul sito le ICONE sono <i class="fa ...">, lo stesso tag del corsivo, e
        i puntini finivano anche sulle icone (visto da Alain);
     2. nei post tradotti al volo i puntini restavano appiccicati alla riga
        sopra: vogliono spazio, e l'interlinea del feed non gliene lascia.
   Se un giorno si riprendono: servono `i:not([class])` e una riga piu' alta
   solo per i blocchi che li usano. */
:lang(ja) i:not([class]):not([style]),
:lang(ja) em:not([class]){
  font-style: normal;
}

/* le icone non portano mai enfasi, in nessuna lingua */
.fa, .glyphicon, [class^="icon_"], [class*=" icon_"], .smile, .emoji, i[class]{
  -webkit-text-emphasis: none;
  text-emphasis: none;
}

/* === N. I DUE TASTI DEL BANNER DEI COOKIE (18/8/2026) ======================
   Aggiunto «Rifiuta» accanto ad «Accetta», i due finivano uno sopra l'altro e
   perfettamente incollati (segnalato da Alain): la colonna destra del banner e'
   una cella stretta, e mandava a capo senza lasciare aria.
   Qui non si tocca il banner del CMS: si sistema solo come stanno i due tasti.
   - su schermo largo: in riga, con lo stesso rilievo — rifiutare non deve
     costare piu' fatica che accettare, ed e' anche cio' che chiedono le linee
     guida europee;
   - su telefono: uno sotto l'altro a tutta larghezza, con l'aria in mezzo. */
.cookie-popup .cookie-popup-right{ white-space: nowrap; }
.cookie-popup .yj_cookie_deny{ margin: 0 10px 0 0; }

@media (max-width: 700px){
  /* su schermo stretto il banner del CMS resta a due colonne: il testo si
     strizza in sette righe a sinistra e i due tasti si accatastano a destra
     (visto da Alain). Qui si impila: prima il testo a tutta larghezza, poi i
     due tasti affiancati, meta' e meta'. Stessa larghezza per tutti e due —
     e' anche cio' che chiedono le linee guida: rifiutare deve avere lo stesso
     rilievo di accettare. */
  .cookie-popup .cookie-popup-inner{ display: block; }
  .cookie-popup .cookie-popup-left,
  .cookie-popup .cookie-popup-right{ display: block; width: 100%; }
  .cookie-popup .cookie-popup-right{
    display: flex;
    gap: 10px;
    margin-top: 14px;
    white-space: normal;
  }
  .cookie-popup .yj_cookie_deny,
  .cookie-popup .btn-cookie-accept{
    flex: 1 1 0;
    margin: 0;
    text-align: center;
  }
}

/* === O. LA COMPOSIZIONE DEL BANNER DEI COOKIE (18/8/2026) ==================
   Misurato, non a occhio, dopo la domanda di Alain «il rapporto fra tasti e
   testo ti convince?». Non convinceva, e i numeri lo dicevano:

     titolo 20px · testo 12px · etichetta dei tasti 15px

   cioe' **il testo che serve a decidere era piu' piccolo dell'etichetta del
   pulsante che decide** (rapporto 0,8): gerarchia rovesciata. E su PC quel
   testo correva largo 1.175px — circa 180 caratteri per riga, il triplo di
   quanto un occhio riesce a seguire.

   Qui si sistemano tre cose, senza toccare colori, posizioni ne' il banner del
   CMS: la larghezza della riga, i due corpi, e la veste del tasto secondario. */

/* 1. la riga di lettura torna una riga di lettura (70-75 caratteri).
      ⚠️ il limite va messo sul TESTO, non sulla colonna: .cookie-popup-left e'
      una cella di tabella, e su una cella il max-width non fa presa (provato:
      la riga restava larga 1.028px). */
.cookie-popup .cookie-popup-headline,
.cookie-popup .cookie-popup-sub-headline{ max-width: 640px; }

/* 2. il titolo smette di gridare, il testo diventa leggibile davvero:
      18 / 14, contro i 15 delle etichette dei tasti */
.cookie-popup .cookie-popup-headline{ font-size: 18px; line-height: 1.35; }
.cookie-popup .cookie-popup-sub-headline{ font-size: 14px; line-height: 1.5; }

/* 3. il tasto che rifiuta: era grigio pieno con la scritta bianca sopra —
      contrasto 3,5 e, peggio, l'aria di un tasto DISABILITATO. Un rifiuto che
      sembra spento e' il modo elegante di scoraggiarlo, ed e' esattamente cio'
      che le linee guida europee chiamano dark pattern. Qui diventa un tasto
      "fantasma": bordo e scritta scura su fondo chiaro. Resta chiaramente
      secondario rispetto al pieno di «Accetta», ma si legge (8,9) e si vede
      che e' vivo. Stessa dimensione, stessa posizione. */
.cookie-popup .yj_cookie_deny,
.cookie-popup a.yj_cookie_deny{
  background: transparent;
  border: 1px solid #9aa0a6;
  color: #2b2b2b;
}
.cookie-popup .yj_cookie_deny:hover,
.cookie-popup a.yj_cookie_deny:hover{
  background: #f2f3f4;
  border-color: #6b7280;
  color: #1c1c1c;
}

/* === P. LE PAGINE LEGALI (18/8/2026) =======================================
   Informativa e Termini nelle quattro lingue. Il contenuto e' marcato con
   .yj_legale: le regole valgono per quelle pagine e per nient'altro — le altre
   pagine statiche (la pagina delle donazioni ha un suo impianto) restano
   intatte.
   ⚠️ Lo stile stava DENTRO le pagine, in un <style> incollato nel testo: e'
   stato tolto di li'. Il contenuto e' testo, lo stile sta nei fogli — se no fra
   un anno ci sono otto copie della stessa regola da tenere allineate.
   Cosa non andava, misurato: titoli a 40 e 35px (fuori da ogni scala), testo in
   Inter grigio a 16px invece della serif del sito, riga larga 1.110px (circa
   150 caratteri) e — nel tema scuro — l'intestazione delle tabelle bianca con
   testo chiaro sopra, cioe' illeggibile. */

/* ⚠️ NIENTE tetto di larghezza: il 18/8 avevo messo max-width:780px per
   restare sui ~72 caratteri per riga, che e' l'ottimo tipografico. Alain,
   20/8: «per quale motivo hai ristretto la colonna? Noi vogliamo un sito
   coerente, che si presenta sempre allo stesso modo». Ha ragione: misurato,
   un articolo del blog legge su 1.140px e l'informativa leggeva su 780 —
   due pagine dello stesso sito con due impaginazioni diverse. La coerenza
   dell'insieme viene prima dell'ottimo del singolo pezzo: queste pagine
   usano la colonna del sito, come tutto il resto. */

.yj_legale h1{ font-size: 32px; line-height: 42px; margin: 0 0 .5em; }
.yj_legale h2{ font-size: 26px; line-height: 34px; margin: 1.8em 0 .5em; }
.yj_legale h3{ font-size: 20px; line-height: 28px; margin: 1.4em 0 .4em; }

/* il testo di queste pagine e' testo da leggere: parla con la voce del testo
   lungo del sito, non con quella dell'interfaccia */
.yj_legale p,
.yj_legale li,
.yj_legale td{
  font-family: 'Literata', 'YJ JP Serif', 'YJ KR Serif', Georgia, "Hiragino Mincho ProN", "Yu Mincho",
               "Noto Serif JP", "Hiragino Sans", "Yu Gothic", serif;
  font-size: 17.5px;
  line-height: 30px;
  color: #1c1c1c;
}
.yj_legale li{ margin-bottom: .4em; }
.yj_legale .yj_agg{ color: #6b7280; }

/* le tabelle e le targhette <code>: sono state spostate nel blocco S il 20/8,
   insieme alla resa sul telefono. Un posto solo, non due da tenere allineati. */

@media (max-width: 700px){
  .yj_legale h1{ font-size: 26px; line-height: 34px; }
  .yj_legale h2{ font-size: 21px; line-height: 29px; }
}

/* === Q. LE PAGINE LEGALI PARLANO COME IL RESTO DEL SITO (20/8/2026) ========
   Alain, 20/8: «terms, privacy, le preferenze cookie e le pagine che si aprono
   come popup non hanno una formattazione sovrapponibile a quella degli altri
   contenuti; e sul giapponese ci sono adattamenti che vorrei tenere anche li'».
   Ha ragione, ed e' stato misurato prima di toccare (Playwright, PC 1280 e
   telefono 390): il testo legale aveva gia' il carattere e il corpo giusti
   (Literata 17,5/30, blocco P), ma era COMPOSTO con le regole di prima del
   14/8 — cioe' con nessuna delle quattro che valgono per post e articoli:

     allineamento    start (a bandiera)   invece di  justify
     sillabazione    manual (spenta)      invece di  auto
     line-break      auto                 invece di  strict  (= niente kinsoku)
     interlinea ja   30px                 invece di  32px

   Il motivo e' semplice: le regole del 14/8 elencano i quattro contenitori
   dove vive il testo lungo (.wall_post, i commenti, .blogs_post_content,
   .cham-content-style-10 p) e .yj_legale, nato il 18/8, non e' fra quelli.

   Valendo su .yj_legale, questo blocco vale anche DENTRO le due finestre
   (#pp_term_cond, #pp_priv_policy): caricano via ajax lo stesso identico HTML.

   ⚠️ Le CELLE delle tabelle restano a bandiera di proposito: sono colonne
   strette, e su una riga di poche parole il giustificato spalanca gli spazi
   (e' lo stesso motivo per cui la chat non e' giustificata). */

/* la composizione di queste due sta nel blocco V (20/8). */

/* il kinsoku vale su tutto il documento, celle e titoli compresi: e' innocuo
   sul testo latino, e sul giapponese impedisce che punteggiatura, parentesi
   chiuse e piccoli kana (ゃゅょっ) finiscano a inizio riga */
.yj_legale p,
.yj_legale li,
.yj_legale td,
.yj_legale th,
.yj_legale h2,
.yj_legale h3{
  line-break: strict;
}

/* giapponese: via i trattini (i kanji non si sillabano) e riga piu' alta,
   esattamente come nei post e negli articoli */
/* qui resta solo la misura della riga: le tre regole del giapponese stanno
   nel blocco V (20/8) */
.yj_legale:lang(ja) p,
.yj_legale:lang(ja) li{
  line-height: 32px;   /* 1,83 di 17,5px: la misura giapponese del sito */
}

/* === R. I TITOLI DEI DOCUMENTI LEGALI (20/8/2026) ==========================
   Il corpo di queste pagine e' Literata dal 18/8 (sono testo da leggere), ma i
   titoli erano rimasti Inter: un documento con due voci: serif nel testo, sans
   nelle intestazioni. Nel resto del sito la regola e' gia' scritta e vale il
   CONTESTO, non il tag — i titoli che sono CONTENUTO dell'autore vanno in
   serif (.blogs_post_content h1..h6), quelli che sono interfaccia in Inter.
   Un'informativa e' contenuto: e' un documento, non una schermata.

   E la gerarchia era piatta: il titolo della PAGINA (h3.cham-heading, 26px) e
   i titoli di SEZIONE (.yj_legale h2, 26px) avevano lo stesso corpo, quindi
   niente diceva al lettore dove comincia il documento. Ora 32 / 23 / 19, che
   e' la scala del sito (32 e' lo stesso corpo del titolo di un articolo).

   ⚠️ IL VINCOLO: il titolo h3.cham-heading e' stampato dal template di TUTTE
   le pagine statiche (Contatti, le lezioni N5, «Where Japan Meets the World»…)
   e quelle NON devono cambiare. Per questo il selettore usa :has(.yj_legale):
   colpisce il titolo solo quando nella pagina c'e' davvero un documento legale.
   Dove :has() non fosse supportato (Firefox < 121, dic. 2023) il titolo resta
   semplicemente com'era: nessun danno. */

.cham-project-style-1:has(.yj_legale) h3.cham-heading{
  font-family: 'Literata', 'YJ JP Serif', 'YJ KR Serif', Georgia, "Hiragino Mincho ProN",
               "Yu Mincho", "Noto Serif JP", serif;
  font-size: 32px;
  line-height: 42px;
  font-weight: 600;
  letter-spacing: -0.01em;   /* i corpi grandi in serif stanno meglio un filo piu' stretti */
}

.yj_legale h2,
.yj_legale h3{
  font-family: 'Literata', 'YJ JP Serif', 'YJ KR Serif', Georgia, "Hiragino Mincho ProN",
               "Yu Mincho", "Noto Serif JP", serif;
  font-weight: 600;
}
.yj_legale h2{ font-size: 23px; line-height: 32px; }
.yj_legale h3{ font-size: 19px; line-height: 27px; }

@media (max-width: 700px){
  .cham-project-style-1:has(.yj_legale) h3.cham-heading{ font-size: 26px; line-height: 34px; }
  .yj_legale h2{ font-size: 20px; line-height: 28px; }
  .yj_legale h3{ font-size: 18px; line-height: 26px; }
}

/* --- coreano: le parole non si spezzano a meta' ---------------------------
   Conseguenza diretta del giustificato acceso qui sopra: col valore di serie
   (`word-break: normal`) l'hangul puo' andare a capo IN MEZZO a una parola, e
   nei testi coreani curati non si fa — la raccomandazione del W3C (klreq) e'
   di spezzare solo agli spazi. `keep-all` fa esattamente questo.
   ⚠️ SUPERATO IL 20/8, vedi il punto 1 del blocco S: `keep-all` sommato al
   giustificato apriva voragini di 21px sulla colonna del telefono. Ora vale
   `word-break: normal`. La riga qui sotto resta solo per leggibilita' della
   storia: e' sovrascritta piu' avanti nel foglio. */
.yj_legale:lang(ko) p,
.yj_legale:lang(ko) li{
  word-break: keep-all;
  -webkit-hyphens: none;
  hyphens: none;
}

/* === S. TABELLE LEGALI E COMPOSIZIONE CJK (20/8/2026) ======================
   Alain, 20/8: «su cellulare la resa non e' ottimale; rivedi anche le tabelle;
   lavora da team dei migliori web designer, tendenze moderne». Guardato per
   davvero su iPhone 13 emulato, lingua per lingua. Tre difetti veri, di cui
   due erano MIEI, introdotti stanotte:

   1. COREANO SPACCATO. Il giustificato acceso col blocco Q, sommato a
      `word-break: keep-all` del blocco R, su una colonna di 330px apriva
      voragini bianche fra le parole — proprio i fiumi che il giustificato
      serve a evitare. L'avevo installato senza guardarlo.
      L'hangul non si sillaba e le sue parole sono lunghe: con poche parole per
      riga il giustificato non ha di che allungarsi. Il coreano ben composto sul
      web va a bandiera, e resta `keep-all`.

   2. GIAPPONESE MISTO. `text-justify: inter-word` mette TUTTO l'allungamento
      sugli spazi latini: una riga come 「者）は Alain Labricciosa Gallese です」
      si apriva solo attorno al nome, mentre i kana restavano attaccati.
      Con `auto` il browser distribuisce lo spazio fra tutti i caratteri — che e'
      il modo giapponese di giustificare (均等割り付け). Sul giapponese puro le
      due rese sono identiche: si perde nulla e si guadagna il misto.

   3. LE TABELLE, il difetto piu' grave e il piu' vecchio (18/8). Sono 22, da 2
      a 5 colonne. La regola che doveva salvarle sul telefono —
      `display:block; overflow-x:auto` — NON FUNZIONA: senza una larghezza
      minima la tabella non ha nulla da far scorrere e si strizza. Risultato
      misurato sul giapponese: terza colonna larga due caratteri, testo che
      cadeva UN CARATTERE PER RIGA. Illeggibile.
      Sul telefono ogni riga diventa una SCHEDA e ogni cella una voce con la
      sua etichetta (le etichette le ricopia js/yj_legale_tab.js). Niente
      scorrimento laterale, niente colonne da due caratteri, ordine di lettura
      naturale.

   Con l'occasione le tabelle prendono la veste che hanno oggi i documenti
   curati (Stripe, Vercel, le legali di Apple): via la gabbia di bordi grigi,
   restano filetti orizzontali sottili, intestazione piccola in maiuscoletto
   spaziato, aria vera fra le colonne. Il reticolo pieno era il modo di
   impaginare del 2010 e su un testo di lettura fa rumore.

   ⚠️ Le regole delle tabelle stavano nel blocco P: sono state SPOSTATE qui,
   non duplicate — una tabella, un posto solo. */

/* --- 1. coreano: giustificato come tutto il resto, spezzando le sillabe -----
   Storia in tre passaggi, tutti MISURATI sulla colonna del telefono (330px) —
   perche' ogni volta che ho deciso a occhio ho sbagliato. Larghezza degli spazi
   renderizzati, contro i 4px naturali:

     a) giustificato + `word-break: keep-all` (blocchi Q e R, stanotte)
        mediano 7,3 · massimo **21,5** → voragini bianche, cioe' esattamente i
        fiumi che il giustificato dovrebbe evitare. L'hangul non si sillaba e le
        sue parole sono lunghe: su poche parole per riga non c'e' altro da fare
        che spalancare gli spazi.
     b) a bandiera: pulito (tutti gli spazi a 4), ma Alain, 20/8: «il coreano
        non e' giustificato, e' una scelta voluta? Il resto va bene, ma il
        coreano no». Ha ragione: una pagina che si compone in modo diverso dalle
        altre e' incoerente, e la coerenza qui viene prima.
     c) giustificato TOGLIENDO `keep-all`, cioe' lasciando che la riga vada a
        capo fra due sillabe qualsiasi: mediano 5,8 · massimo **7,7**. Cioe'
        piu' composto dell'italiano (6,2 / 13,6) e molto piu' dell'inglese
        (7,9 / 21), che stanno sulle stesse pagine. Nessun fiume.

   E non e' una forzatura: spezzare fra sillabe e' la regola **tradizionale**
   del coreano (W3C klreq: in coreano l'a capo puo' cadere fra due sillabe
   qualunque). `keep-all` e' una preferenza recente, nata sul web, che ha senso
   su colonne larghe — non su 330px.
   `line-break: strict` resta e continua a fare il suo mestiere: la punteggiatura
   coreana non finisce mai a inizio riga. */
.yj_legale:lang(ko) p,
.yj_legale:lang(ko) li{
  word-break: normal;
}

/* --- 2. giapponese: spazio distribuito, non appeso agli spazi latini ------- */
.yj_legale:lang(ja) p,
.yj_legale:lang(ja) li{
  text-justify: auto;
}

/* --- 3. le tabelle, su schermo largo --------------------------------------- */
.yj_legale .yj_tab{
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
}
.yj_legale .yj_tab th{
  font-family: 'Inter', 'YJ JP', 'YJ KR', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6b7280;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #c8ccd1;
  padding: 0 28px 10px 0;
  text-align: left;
  vertical-align: bottom;
}
.yj_legale .yj_tab td{
  border: 0;
  border-bottom: 1px solid #ecedef;
  padding: 15px 28px 15px 0;
  font-size: 16px;
  line-height: 26px;
  text-align: left;
  vertical-align: top;
}
.yj_legale .yj_tab th:last-child,
.yj_legale .yj_tab td:last-child{ padding-right: 0; }
.yj_legale .yj_tab tr:last-child td{ border-bottom: 0; }

/* la prima colonna e' la voce: e' quella che si cerca scorrendo la tabella */
.yj_legale .yj_tab td:first-child{ font-weight: 600; }

/* il maiuscoletto spaziato e' una figura latina: su kanji e hangul la
   spaziatura extra fa solo danno, e le maiuscole non esistono */
.yj_legale:lang(ja) .yj_tab th,
.yj_legale:lang(ko) .yj_tab th,
.yj_legale:lang(zh) .yj_tab th{
  letter-spacing: 0;
  text-transform: none;
  font-size: 13.5px;
}

/* i nomi tecnici (sid, _ga…) sono dati, non prosa: piccola targhetta */
.yj_legale code{
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .86em;
  background: #f2f3f5;
  border-radius: 5px;
  padding: .1em .38em;
}

/* --- 4. sul telefono: ogni riga una scheda --------------------------------- */
@media (max-width: 700px){

  /* tabella non convertita (javascript spento, forma inattesa): almeno scorre
     davvero, con una larghezza minima che le impedisce di strizzarsi */
  .yj_legale .yj_tab:not([data-yj-cards]){
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .yj_legale .yj_tab:not([data-yj-cards]) tbody{ display: table; width: 100%; min-width: 460px; }

  .yj_legale .yj_tab[data-yj-cards]{ display: block; margin: 1.5em 0; }
  .yj_legale .yj_tab[data-yj-cards] tbody{ display: block; }
  .yj_legale .yj_tab[data-yj-cards] tr{ display: block; }

  /* l'intestazione ora vive dentro le schede, riga per riga */
  .yj_legale .yj_tab[data-yj-cards] tr:first-child{ display: none; }

  .yj_legale .yj_tab[data-yj-cards] tr + tr{
    border: 1px solid #e6e8ea;
    border-radius: 14px;
    background: #fafbfc;
    padding: 16px 18px;
    margin-bottom: 12px;
  }
  .yj_legale .yj_tab[data-yj-cards] td{
    display: block;
    border: 0;
    padding: 0;
    font-size: 16px;
    line-height: 26px;
  }
  .yj_legale .yj_tab[data-yj-cards] td + td{ margin-top: 12px; }

  .yj_legale .yj_tab[data-yj-cards] td[data-yj-lab]::before{
    content: attr(data-yj-lab);
    display: block;
    font-family: 'Inter', 'YJ JP', 'YJ KR', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 11.5px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8b9096;
    margin-bottom: 3px;
  }
  .yj_legale:lang(ja) .yj_tab[data-yj-cards] td[data-yj-lab]::before,
  .yj_legale:lang(ko) .yj_tab[data-yj-cards] td[data-yj-lab]::before,
  .yj_legale:lang(zh) .yj_tab[data-yj-cards] td[data-yj-lab]::before{
    letter-spacing: 0;
    text-transform: none;
    font-size: 12.5px;
  }

  /* la prima cella e' il titolo della scheda: l'etichetta sarebbe rumore */
  .yj_legale .yj_tab[data-yj-cards] td:first-child::before{ display: none; }
  .yj_legale .yj_tab[data-yj-cards] td:first-child{
    font-size: 17px;
    line-height: 27px;
    font-weight: 600;
  }

  /* il giapponese vuole la sua interlinea anche dentro le schede */
  .yj_legale:lang(ja) .yj_tab td{ line-height: 29px; }
}

/* --- 5. il titolo delle due finestre --------------------------------------
   #pp_term_cond e #pp_priv_policy mostrano lo STESSO documento della pagina,
   ma la loro intestazione e' chrome del CMS: restava in Inter, e sopra un
   testo in serif si vedeva subito che erano due cose diverse. In giapponese
   era ancora piu' evidente — titolo gotico, testo mincho. Qui il titolo prende
   la voce del documento che introduce. Solo queste due finestre: tutte le
   altre modali del sito sono interfaccia e restano in Inter. */
#pp_term_cond .modal-title,
#pp_priv_policy .modal-title{
  font-family: 'Literata', 'YJ JP Serif', 'YJ KR Serif', Georgia, "Hiragino Mincho ProN",
               "Yu Mincho", "Noto Serif JP", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* --- 6. il coreano aveva due voci nella stessa riga -------------------------
   Guardato su iPhone e verificato col protocollo del browser (quali font usa
   DAVVERO, non quali gli abbiamo chiesto): nella riga
   「PayPal (Europe) S.à r.l. et Cie, S.C.A.(룩셈부르크)」 le lettere latine
   uscivano in Literata (serif) e l'hangul in Noto Sans CJK KR (bastone). Due
   caratteri diversi dentro la stessa frase: sembra un errore, ed e' un errore.
   Causa: la pila di caratteri del blocco P prevede le serif giapponesi ma
   nessuna serif coreana, quindi per l'hangul si cadeva sul generico di sistema.
   Qui la pila coreana c'e': myeongjo (l'equivalente coreano del mincho) su
   tutti e tre i sistemi — AppleMyungjo su iPhone e Mac, Batang su Windows,
   Noto Serif CJK KR su Android. Provate a confronto: il coreano in myeongjo
   parla con la stessa voce dell'italiano e del giapponese, e resta leggibile.
   Se un giorno un dispositivo non ne avesse nessuna, cade su `serif` e non
   succede niente di grave.
   4/10/2026: prima di tutte 'YJ KR Serif' (Noto Serif KR, dal nostro server),
   uguale su ogni dispositivo; le altre restano come riserva. */
.yj_legale:lang(ko) p,
.yj_legale:lang(ko) li,
.yj_legale:lang(ko) td,
.yj_legale:lang(ko) h2,
.yj_legale:lang(ko) h3{
  font-family: 'Literata', 'YJ KR Serif', 'Nanum Myeongjo', AppleMyungjo, Batang,
               'Noto Serif KR', 'Noto Serif CJK KR', Georgia, serif;
}

/* ============================================================================
   V. LA COMPOSIZIONE DEL TESTO LUNGO — UN ELENCO SOLO (20/8/2026)

   Alain, 20/8: «fai la classe unica».

   IL PROBLEMA CHE RISOLVE. Le regole di composizione (giustificato,
   sillabazione, kinsoku, a-capo) erano scritte **quattro volte**, identiche, in
   quattro punti del foglio: blocco A per feed e articoli, D per i commenti, D5
   per le risposte, Q per le pagine legali. E le regole del giapponese, ormai
   tre, stavano in altri tre elenchi (A, T, U). Ogni contenitore nuovo andava
   aggiunto a mano a sette liste — e chi se ne dimenticava non riceveva nessun
   errore: il testo semplicemente si componeva con le regole di prima del 14/8.
   E' successo davvero: `.yj_legale`, nato il 18/8, e' rimasto fuori da tutte le
   liste per due giorni, e se n'e' accorto Alain guardando la pagina, non io.

   COME FUNZIONA ADESSO. Due elenchi, qui, e basta. In testa a entrambi c'e'
   **`.yj_testo`**: da oggi un contenitore nuovo di testo lungo si marca con
   quella classe nell'HTML e riceve tutto, senza toccare il foglio di stile.
   I contenitori storici restano elencati perche' il loro HTML e' del CMS e non
   si puo' marcare a mano; quando un domani si toccasse quel template, si mette
   `.yj_testo` e si toglie la riga da qui.

   ⚠️ DOVE STA E PERCHE' IN FONDO. In fondo al foglio, non all'inizio: cosi'
   vince sui fogli del fornitore a parita' di specificita'. Le regole che
   devono batterlo — il coreano del blocco S, per esempio — hanno una
   specificita' piu' alta (`:lang(ko)`) e vincono lo stesso.

   ⚠️ COSA NON C'E' QUI: corpo, interlinea, colore e carattere. Quelli
   cambiano da contenitore a contenitore (feed 17,5/30, commenti 16/26,
   risposte 16/26) e restano dove sono. Qui c'e' solo cio' che e' IDENTICO
   ovunque — che e' la ragione per cui si poteva unire.

   Verificato con un'impronta di **64 combinazioni** (16 contenitori x 2 lingue
   x PC e telefono, 17 proprieta' ciascuna): prima e dopo la riscrittura lo
   stile calcolato e' identico in tutto. La CHAT resta fuori, come deve.
   ========================================================================== */

/* --- 1. come si compone il testo lungo, ovunque esso sia ------------------ */
.yj_testo,
.wall_post,
.comment_text .full_comment,
.wrapper-one-article .one-article .blogs_post_content,
.cham-content-style-10 p,
.comment_text_cont,
.txt_comment,
.blog_post_comment_item .comment_text_cont,
.comment_text_reply_one,
.comment_text_reply_cont,
.yj_legale p,
.yj_legale li{
  text-align: justify;
  /* si allargano solo gli SPAZI, mai le lettere: stirare i glifi e' il
     difetto che rende un testo "tirato" e stanca l'occhio */
  text-justify: inter-word;

  -webkit-hyphens: auto;
  hyphens: auto;
  /* il trattino non spezza parole corte e lascia almeno tre lettere da
     entrambe le parti: senza questo limite si ottengono spezzature goffe
     tipo "a-mico". Dove non supportato (Firefox) la sillabazione resta,
     solo un po' meno raffinata. */
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 6 3 3;

  /* kinsoku giapponese, innocuo sul testo latino */
  line-break: strict;

  /* un indirizzo lunghissimo va spezzato invece di sfondare la colonna,
     ma senza spezzare le parole normali (che ci pensa la sillabazione) */
  overflow-wrap: break-word;
  word-break: normal;
}

/* --- 2. e come si compone quando e' scritto in giapponese ----------------
   `:lang(ja)` risale all'antenato piu' vicino che dichiara una lingua: vale
   quando l'interfaccia e' in giapponese, e in piu' sui singoli blocchi che
   yj_lang.js marca con lang="ja" perche' SCRITTI in giapponese (serve nel blog
   bilingue: un articolo giapponese letto da un italiano era composto con le
   regole del latino).

   Le tre regole, e perche':
   - **niente trattini**: i kanji non si sillabano;
   - **`text-justify: auto`**: con `inter-word` tutto l'allungamento finisce
     sui pochi spazi latini della riga (misurato: buchi da 37px contro 4px
     naturali) e le righe senza spazi non si giustificano affatto — il 30-72%
     restava corto. Con `auto` il browser distribuisce fra i caratteri, che e'
     il modo giapponese (均等割り付け);
   - **`text-autospace: normal`**: il 和欧間スペース, un quarto di quadratone fra
     kanji/kana e lettere o cifre (「1947年」 → 「1947 年」). Baseline da nov. 2025.
     ⚠️ MDN dice che e' gia' il valore iniziale: non e' vero, misurato — su
     Chromium 148 di serie e' `no-autospace`. E si scrive per forza `normal`:
     le forme lunghe (`ideograph-alpha` ecc.) Chromium non le riconosce. */
.yj_testo:lang(ja),
.wall_post:lang(ja),
.comment_text .full_comment:lang(ja),
.wrapper-one-article .one-article .blogs_post_content:lang(ja),
.wrapper-one-article .one-article .blogs_post_content p:lang(ja),
.cham-content-style-10 p:lang(ja),
.comment_text_cont:lang(ja),
.txt_comment:lang(ja),
.blog_post_comment_item .comment_text_cont:lang(ja),
.comment_text_reply_one:lang(ja),
.comment_text_reply_cont:lang(ja),
.yj_legale:lang(ja) p,
.yj_legale:lang(ja) li,
.yj_legale:lang(ja) td,
.yj_legale:lang(ja) h2,
.yj_legale:lang(ja) h3{
  -webkit-hyphens: none;
  hyphens: none;
  text-justify: auto;
  text-autospace: normal;
}

/* --- 3. i PEZZI giapponesi dentro un contenuto misto ----------------------
   20/8/2026. Le regole qui sopra scattano quando e' il contenitore intero a
   essere in giapponese. Ma un contenuto puo' essere misto per costruzione — la
   card di un evento ha il titolo giapponese in uno <span> e data, luogo e
   categoria in italiano negli altri — e in quel caso yj_lang.js non marca il
   blocco: marca i singoli pezzi. Senza questa regola quei pezzi resterebbero
   composti con le misure del latino.
   Stesse tre proprieta', applicate ai DISCENDENTI marcati: `:is()` tiene la
   lista in una riga sola invece di raddoppiare i quattordici selettori. */
:is(.yj_testo, .wall_post, .comment_text .full_comment, .blogs_post_content,
    .cham-content-style-10 p, .comment_text_cont, .txt_comment,
    .comment_text_reply_one, .comment_text_reply_cont, .yj_legale) :lang(ja){
  -webkit-hyphens: none;
  hyphens: none;
  text-justify: auto;
  text-autospace: normal;
}

/* === X. LA FASCIA DEL FEED SI RESTRINGE (20/8/2026) ========================
   Alain: «la voce a destra e' tagliata; contrariamente agli altri elementi
   quella barra non reagisce quando viene rimpicciolita, e' come se non fosse
   piu' in un contenitore che si restringe». Era **letteralmente** cosi'.

   ⚠️ E' la fascia `.wrap_profile_menu_inner_small`, quella che compare di
   default **sul feed** — non quella del profilo (`.header_profile`), che e' un
   altro elemento e non si tocca.

   MISURATO SU SAFARI (WebKit) con le 8 voci vere, in inglese: l'ultima voce
   (`blogs`) finisce sempre a **405px**, IDENTICO a 320, 360, 390 e 430 di
   larghezza. La fascia non si restringe mai: la sua larghezza e' la somma
   delle voci, e non c'e' ne' a-capo ne' scorrimento. Quindi a 430 ci sta
   (405<430), a 390 sborda di 15, a 360 di 45, a 320 di **85** — e cio' che
   sborda viene tagliato via. Su PC non si vede: 405px ci stanno comodi.

   ⚠️ NON L'ABBIAMO INTRODOTTO NOI, verificato con tre prove:
   1. le regole `.wrap_profile_menu_inner_small` di **lovelia.eu** (CMS
      originale) e le nostre: `diff` → **nessuna differenza**;
   2. nel nostro foglio l'unica riga che nomina quella classe e' dentro un
      **commento** (blocco L, annullato): inattiva;
   3. il tema scuro le cambia solo i colori.
   La causa e' il NUMERO di voci: il CMS ne prevede poche, noi ne abbiamo otto
   (wall posts, photos, videos, music, friends, pages, groups, blogs). Otto
   voci a larghezza fissa piu' otto margini fissi da 20px fanno 405px, punto.

   LA SOLUZIONE: sotto i 480px la fascia diventa una riga flessibile e le voci
   si dividono lo spazio disponibile invece di pretenderne una quantita' fissa.
   Cosi' **si restringe insieme allo schermo**, che e' cio' che Alain chiedeva.
   Verificato su WebKit a 320, 360, 390 e 430: nessuno sbordamento e nessuna
   etichetta tagliata a nessuna larghezza (prima: +85, +45, +15, OK).
   ⚠️ Ridurre solo i margini NON basta: anche portandoli a un valore fluido
   minimo, a 320px si sbordava ancora di 4px (misurato). */

@media (max-width: 480px){
  .wrap_profile_menu_inner_small .pl_grid_count{
    display: flex;
    align-items: flex-start;
  }
  .wrap_profile_menu_inner_small .pl_grid_count .bl_count{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex: 1 1 0;
    min-width: 0;
    /* il CMS stacca la fascia dal bordo con margin-left:15px e width:calc(100%-15px):
       con le voci distribuite quel margine resta solo a sinistra e la barra sembra
       spostata (misurato a 430px: 30px a sinistra, 15 a destra). Azzerato: i mezzi
       spazi di space-around fanno da margine, uguali sui due lati. */
    width: 100%;
    margin-left: 0;
    padding-left: 0;
  }
  .wrap_profile_menu_inner_small .pl_grid_count .bl_count.left .item,
  .wrap_profile_menu_inner_small .pl_grid_count .bl_count.right .item{
    margin: 0;
  }
}

/* === Y. LA BARRA DELLE REAZIONI SUI TELEFONI STRETTI (20/8/2026) ===========
   La barra ha quattro elementi — reazione, commenta, condividi e la freccetta
   del menu del post — e nel CMS sono separati da margini FISSI: 20px fra i
   primi, 5px prima della freccetta, piu' un quarto margine di 20px appeso
   DOPO l'ultimo elemento, che non separa niente e ruba larghezza. Su un
   telefono stretto quella somma non ci sta piu': la freccetta scende sulla
   riga sotto e la barra passa da 34 a 57px.

   MISURATO (stato «gia' reagito», WebKit, colonna del post = schermo - 30px):
     italiano a 360px  Reazione 85 + Commenta 92 + Condividi 81 + freccetta 15
                       = 273 su 300 disponibili → restano 27px per TRE spazi.
   Coi margini del CMS ne servirebbero 57: ecco perche' andava a capo.

   RIMEDIO: sotto i 480px la lista diventa una riga flessibile con **spaziatura
   uniforme** (`gap`) al posto dei margini. Si guadagnano due cose:
     1. sparisce il margine appeso in coda (12-20px recuperati);
     2. lo spazio fra le voci diventa lo stesso ovunque — prima era 20, 20, 5,
        e un grafico quel 5 lo vede.
   Con gap 12px la barra sta su una riga da 375px in su in tutte e quattro le
   lingue; a 360 (larghezza diffusissima su Android) serve scendere a 8px, e
   allora ci sta con 18px di avanzo.

   ⚠️ A 320px (iPhone SE di prima generazione) italiano e giapponese restano su
   due righe: 273px di parole non entrano in 260, e non si rovina la spaziatura
   di tutti per un formato ormai raro. Le due righe restano ordinate: il gap
   verticale e' 6px, non 12.
   ⚠️ Sopra i 480px non cambia NIENTE: la barra resta quella del CMS. */

@media (max-width: 480px){
  .like_comment_and_share ul.list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 6px fra le due righe se proprio deve andare a capo (a 320), 12 fra le voci */
    gap: 6px 12px;
  }
  .like_comment_and_share ul.list > li{
    margin-right: 0;
    margin-left: 0;
  }
}

/* sotto i 375px (Android da 360) la parola piu' lunga chiede gli ultimi pixel */
@media (max-width: 374px){
  .like_comment_and_share ul.list{
    gap: 6px 8px;
  }
}

/* === Z. L'EMOJI NEL TESTO STAVA TROPPO IN BASSO (26/9/2026) ================
   Segnalato da Alain lo stesso giorno in due forme:
   1) nel suo post 10558 «Ciao a tutti! (emoji) Volevo...» l'emoji era bassa;
   2) nella risposta «Vale no io non comando nulla (emoji)» il NOME citato
      stava 3-4 px sotto il testo accanto.
   Una causa sola. Le emoji del CMS sono immagini di 26 px (il doppio delle
   maiuscole di Literata a 17,5 px) e prendono il `vertical-align: middle`
   generico delle immagini: si centrano sull'altezza delle MINUSCOLE e sotto
   la linea di base scendono di 8,6 px, contro i 4 delle lettere con la gamba.
   Cosi' uscivano dal fondo della riga e la allungavano: 1,6 px nei post,
   3,6 nei commenti e 4,9 nelle risposte, dove il CMS aggiunge allo span
   anche 2 px di margin-bottom. E il nome citato il CMS lo aggancia al FONDO
   della riga (style.css, `.bl_comments .comment_link_name`, vertical-align:
   bottom): la riga si allungava e il nome scendeva con lei.

   -0.375em mette il centro dell'emoji a meta' delle maiuscole (6,4 px contro
   6,5 in post e commenti) e la tiene DENTRO la riga in tutti i contesti:
   17,5/30 e 17,5/32 (post e commenti, it/ja), 16/26 e 16/30 (risposte, blog,
   dirette, visore). Il 16/26 e' il caso stretto: l'emoji e' alta quanto la
   riga e -0.375em e' il valore che la fa stare esatta (da -6 a +20 sulla
   base, come la riga).
   Misurato sulle linee di base in Chromium e WebKit (anche iPhone simulato):
   la riga non cresce in nessuno degli 8 contesti, e il nome citato torna a 0
   in ogni caso (anche nomi giapponesi e due emoji di fila) SENZA toccare la
   regola del CMS sul nome. La chat resta fuori: ha il suo stile.
   ⚠️ Il valore dipende da tre numeri: corpo e interlinea dei commenti, e la
   taglia delle emoji (26 px, fissata in replaceSmile() di _include/lib/lib.php).
   Se ne cambia uno, si rimisura. */
.wall_post .smile img,
.comment_text .smile img{ vertical-align: -0.375em; }
.comment_text .smile{ margin-bottom: 0; }

/* ==========================================================================
   LEZIONI BILINGUI — il gruppo "Italiano per giapponesi" (7/9/2026)
   ==========================================================================
   Regola redazionale di Alain: la spiegazione sta in italiano e, subito sotto,
   la STESSA COSA in giapponese; le battute da dire stanno solo in italiano.
   Perche' funzioni, chi legge deve vedere a colpo d'occhio tre cose diverse:

     .yj-jp     «questa riga e' la traduzione di quella sopra»  → si stringe
                al paragrafo italiano, prende un filetto verticale e un tono
                piu' basso: e' la stessa frase, non una frase nuova.
     .yj-dire   «questo si dice ad alta voce»                   → riquadro
                azzurro tenue con il filetto pieno: e' il copione.
     .yj-voce   una parola del vocabolario.
     .yj-nota   una nota a margine.

   I colori sono tutti in trasparenza sul fondo (rgba) e i toni si ottengono con
   `opacity`: cosi' le stesse regole reggono nel tema chiaro e in quello scuro
   senza duplicati. Il font non si tocca: il giapponese eredita gia' il Mincho
   di sistema dal blocco "testo lungo" qui sopra.
   Le classi arrivano fin qui perche' Blogs::_filterClassiLezioni le lascia
   passare: chi ne aggiunge una deve metterla ANCHE in quella lista bianca. */

/* ⚠️ 7/9/2026, sera — VIA I FILETTI. La prima versione segnava la traduzione con
   una riga verticale a sinistra. Alain, guardando la lezione 1: «quelle linee
   verticali prima del testo, bruttissime». Ha ragione: in una pagina con
   quaranta traduzioni diventano quaranta stanghette, e il testo sembra
   ingabbiato. Il legame fra le due lingue si ottiene meglio SENZA disegnare
   niente: la traduzione sta attaccata al paragrafo italiano (margine zero
   sopra), pesa un po' meno e ha un tono piu' basso. Il giapponese, poi, ha gia'
   una texture tutta sua: si riconosce da solo. */
.blogs_post_content .yj-jp,
.wrapper-one-article .yj-jp,
#blog_text .yj-jp {
  margin-top: 0;
  opacity: .72;
  font-size: .94em;
}

/* il paragrafo italiano che ha la traduzione sotto si stringe a lei: i due
   paragrafi devono leggersi come una cosa sola. Se il browser non conosce
   :has(), restano semplicemente due paragrafi normali — nessun danno. */
.blogs_post_content p:has(+ .yj-jp),
.wrapper-one-article p:has(+ .yj-jp),
#blog_text p:has(+ .yj-jp) {
  margin-bottom: .25em;
}

/* la battuta si riconosce dal riquadro, non da un filetto: fondo tenue e
   angoli tondi su tutti i lati (stessa ragione di sopra) */
/* ⚠️ i selettori lunghi non sono un vezzo: nella PAGINA dell'articolo vale
   `.wrapper-one-article .one-article p { padding: 0 }` di style.css, che per
   specificita' (0,3,1) batte un `.blogs_post_content .yj-dire` (0,2,0) e
   azzerava il padding del riquadro e la colonna del nome. */
.blogs_post_content .yj-dire,
.wrapper-one-article .yj-dire,
#blog_text .yj-dire,
.wrapper-one-article .one-article .blogs_post_content .yj-dire,
.blogs_post_content .yj-batt,
.wrapper-one-article .yj-batt,
#blog_text .yj-batt,
.wrapper-one-article .one-article .blogs_post_content .yj-batt,
.blogs_post_content .yj-battse,
.wrapper-one-article .yj-battse,
#blog_text .yj-battse,
.wrapper-one-article .one-article .blogs_post_content .yj-battse {
  background: rgba(23, 132, 251, .07);
  border-radius: 6px;
  padding: .45em .85em;
  margin: .4em 0 .2em;
}

/* ⚠️ 8/9/2026 — Alain: «i nomi sono appiccicati al dialogo, CAMERIERE e CLIENTE
   devono essere staccati dal testo, e non stanno nemmeno sulla stessa linea
   immaginaria del testo detto a voce». Il nome prende quindi una COLONNA sua e
   la battuta gli scorre accanto, allineata alla stessa linea di base.

   Perche' una classe nuova (`yj-batt`) e non un selettore furbo su `yj-dire`:
   il primo tentativo distingueva la battuta col nome dalla frase-chiave con
   `:has(> b:not(:only-child))`, e NON funziona — `:only-child` guarda gli
   elementi e ignora i nodi di testo, quindi <p><b>Cameriere:</b> Buonasera</p>
   e <p><b>Il conto, per favore.</b></p> sono per il CSS la stessa cosa.
   Le battute con il nome portano ora una classe loro; il resto (fondo azzurro,
   angoli) e' condiviso con yj-dire qui sopra.
   ⚠️ Chi tocca questa classe deve toccare anche blogs.js (l'attributo di Quill)
   e Blogs::_filterClassiLezioni (la lista bianca del core): tre pezzi, sempre.

   Si fa col rientro sporgente perche' nei blog il CMS lascia passare solo
   <p> <b> <h3> <br> <a>: niente <span>, niente tabelle, niente griglia. E il
   corpo del nome NON si tocca — se il <b> avesse un font-size suo, la sua
   larghezza in em e il rientro del paragrafo non corrisponderebbero piu'. */
.blogs_post_content .yj-dire b,
.wrapper-one-article .yj-dire b,
#blog_text .yj-dire b,
.blogs_post_content .yj-batt > b:first-child,
.wrapper-one-article .yj-batt > b:first-child,
#blog_text .yj-batt > b:first-child {
  opacity: .72;
  font-weight: 600;
}

.blogs_post_content .yj-batt,
.wrapper-one-article .yj-batt,
#blog_text .yj-batt,
.wrapper-one-article .one-article .blogs_post_content .yj-batt,
.blogs_post_content .yj-battse,
.wrapper-one-article .yj-battse,
#blog_text .yj-battse,
.wrapper-one-article .one-article .blogs_post_content .yj-battse {
  padding-left: 8.25em;   /* .85em del riquadro + 7.4em della colonna del nome */
  text-indent: -7.4em;    /* le righe dopo la prima restano allineate al testo */
}

/* la colonna del NOME. Corpo identico a quello del testo: se il <b> avesse un
   font-size suo, la larghezza in em non corrisponderebbe piu' al rientro.
   ⚠️ Un tempo qui c'erano DUE colonne, numero e nome: Quill fonde due <b>
   adiacenti in uno solo, quindi i numeri delle battute vivono solo nel PDF. */
.blogs_post_content .yj-batt > b:first-child,
.wrapper-one-article .yj-batt > b:first-child,
#blog_text .yj-batt > b:first-child,
.wrapper-one-article .one-article .blogs_post_content .yj-batt > b:first-child,
.blogs_post_content .yj-battse > b:first-child,
.wrapper-one-article .yj-battse > b:first-child,
#blog_text .yj-battse > b:first-child,
.wrapper-one-article .one-article .blogs_post_content .yj-battse > b:first-child {
  display: inline-block;
  width: 7.4em;
  text-indent: 0;
  padding-right: .5em;    /* lo stacco fra il nome e la battuta */
  opacity: .72;
  font-weight: 600;
  vertical-align: baseline;
}

/* la risposta alternativa: la stessa battuta detta in un altro modo. Non e' una
   battuta nuova, e si deve vedere: sta ATTACCATA a quella sopra, dentro lo
   stesso riquadro (che si chiude solo qui, con gli angoli tondi in basso), un
   tono piu' chiaro, e allineata alla colonna del parlato. La parola «oppure»
   fa da cerniera fra le due. */
.blogs_post_content .yj-alt,
.wrapper-one-article .yj-alt,
#blog_text .yj-alt,
.wrapper-one-article .one-article .blogs_post_content .yj-alt {
  background: rgba(23, 132, 251, .04);
  border-radius: 0 0 6px 6px;
  margin: 0 0 .45em;
  padding: .1em .85em .5em 8.25em;
  text-indent: -7.4em;
  font-size: .96em;
}

.blogs_post_content .yj-alt > b:first-child,
.wrapper-one-article .yj-alt > b:first-child,
#blog_text .yj-alt > b:first-child,
.wrapper-one-article .one-article .blogs_post_content .yj-alt > b:first-child {
  display: inline-block;
  width: 7.4em;
  padding-right: .5em;
  text-indent: 0;
  text-align: right;
  font-size: .82em;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5E6B3B;
  opacity: .75;
  vertical-align: baseline;
}

/* la battuta che ha un'alternativa sotto perde gli angoli e il margine in
   basso: le due righe diventano un blocco solo. Senza :has() restano due
   riquadri vicini — nessun danno. */
.blogs_post_content .yj-batt:has(+ .yj-alt),
.wrapper-one-article .yj-batt:has(+ .yj-alt),
#blog_text .yj-batt:has(+ .yj-alt),
.wrapper-one-article .one-article .blogs_post_content .yj-batt:has(+ .yj-alt),
.blogs_post_content .yj-battse:has(+ .yj-alt),
.wrapper-one-article .yj-battse:has(+ .yj-alt),
#blog_text .yj-battse:has(+ .yj-alt),
.wrapper-one-article .one-article .blogs_post_content .yj-battse:has(+ .yj-alt) {
  border-radius: 6px 6px 0 0;
  margin-bottom: 0;
  padding-bottom: .3em;
}

/* dentro il ramo l'alternativa segue il colore del ramo, non l'azzurro */
.blogs_post_content .yj-battse + .yj-alt,
.wrapper-one-article .yj-battse + .yj-alt,
#blog_text .yj-battse + .yj-alt,
.wrapper-one-article .one-article .blogs_post_content .yj-battse + .yj-alt {
  background: rgba(176, 125, 25, .06);
}

/* ── IL RAMO DELLA SCENA ────────────────────────────────────────────────────
   8/9/2026 sera. Alain: «il flusso delle battute… i numeri sono davvero troppo
   vecchia scuola». Giusto: «vai alla battuta 14» obbliga a tenere a mente un
   numero. Qui il bivio si VEDE — le battute della deviazione hanno un colore
   loro (ambra invece dell'azzurro) e il blocco e' aperto e chiuso da una riga
   di etichetta. Quando l'ambra finisce, si e' tornati sulla strada principale:
   non serve dirlo. Niente linee verticali (7/9: «bruttissime»): il colore basta,
   ed e' lo stesso ambra delle tavole della serie. */
.blogs_post_content .yj-battse,
.wrapper-one-article .yj-battse,
#blog_text .yj-battse,
.wrapper-one-article .one-article .blogs_post_content .yj-battse {
  background: rgba(176, 125, 25, .11);
}

.blogs_post_content .yj-se,
.wrapper-one-article .yj-se,
#blog_text .yj-se,
.wrapper-one-article .one-article .blogs_post_content .yj-se {
  margin: 1.1em 0 .1em;
  font-size: .82em;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #9A6B14;
}

.blogs_post_content .yj-se + .yj-jp,
.wrapper-one-article .yj-se + .yj-jp,
#blog_text .yj-se + .yj-jp,
.wrapper-one-article .one-article .blogs_post_content .yj-se + .yj-jp {
  margin-bottom: .45em;
  font-size: .88em;
}

/* sul telefono sette em di colonna lascerebbero al parlato una striscia di
   niente: li' il nome torna sopra la sua battuta, su una riga tutta sua. */
@media (max-width: 520px) {
  .blogs_post_content .yj-batt,
  .wrapper-one-article .yj-batt,
  #blog_text .yj-batt,
  .wrapper-one-article .one-article .blogs_post_content .yj-batt,
  .blogs_post_content .yj-battse,
  .wrapper-one-article .yj-battse,
  #blog_text .yj-battse,
  .wrapper-one-article .one-article .blogs_post_content .yj-battse {
    padding-left: .85em;
    text-indent: 0;
  }
  /* ⚠️ la catena lunga serve ANCHE qui: una media query non aggiunge
     specificita', e senza di essa la regola del desktop (0,4,1) vinceva sul
     telefono — il nome restava in colonna e si spezzava in «CAME-RIERE». */
  .blogs_post_content .yj-batt > b:first-child,
  .wrapper-one-article .yj-batt > b:first-child,
  #blog_text .yj-batt > b:first-child,
  .wrapper-one-article .one-article .blogs_post_content .yj-batt > b:first-child,
  .blogs_post_content .yj-battse > b:first-child,
  .wrapper-one-article .yj-battse > b:first-child,
  #blog_text .yj-battse > b:first-child,
  .wrapper-one-article .one-article .blogs_post_content .yj-battse > b:first-child {
    display: block;
    width: auto;
    padding-right: 0;
    font-size: .82em;
    opacity: .62;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .blogs_post_content .yj-alt,
  .wrapper-one-article .yj-alt,
  #blog_text .yj-alt,
  .wrapper-one-article .one-article .blogs_post_content .yj-alt {
    padding-left: .85em;
    text-indent: 0;
  }
  .blogs_post_content .yj-alt > b:first-child,
  .wrapper-one-article .yj-alt > b:first-child,
  #blog_text .yj-alt > b:first-child,
  .wrapper-one-article .one-article .blogs_post_content .yj-alt > b:first-child {
    display: block;
    width: auto;
    padding-right: 0;
    text-align: left;
  }
}

/* una frase-chiave (dire senza nome) pesa un filo di piu': e' quella da imparare */
.blogs_post_content .yj-dire > b:only-child,
.wrapper-one-article .yj-dire > b:only-child,
#blog_text .yj-dire > b:only-child {
  opacity: 1;
  font-size: 1.05em;
}

/* la traduzione di una battuta sta attaccata al suo riquadro */
/* la traduzione di una battuta sta attaccata al suo riquadro, e rientra quanto
   basta perche' si veda che appartiene a quella e non alla frase dopo */
.blogs_post_content .yj-dire + .yj-jp,
.wrapper-one-article .yj-dire + .yj-jp,
#blog_text .yj-dire + .yj-jp,
.wrapper-one-article .one-article .blogs_post_content .yj-dire + .yj-jp,
.blogs_post_content .yj-batt + .yj-jp,
.wrapper-one-article .yj-batt + .yj-jp,
#blog_text .yj-batt + .yj-jp,
.wrapper-one-article .one-article .blogs_post_content .yj-batt + .yj-jp {
  margin-top: .15em;
  padding-left: .85em;
}

.blogs_post_content .yj-voce,
.wrapper-one-article .yj-voce,
#blog_text .yj-voce {
  margin: .5em 0 .1em;
}

.blogs_post_content .yj-nota,
.wrapper-one-article .yj-nota,
#blog_text .yj-nota {
  font-size: .95em;
  opacity: .82;
}

/* ============================================================================
   Z. IL TITOLO DELLA COPERTINA (4-5/10/2026)

   Il giapponese non ha spazi fra le parole: il browser puo' andare a capo fra
   due caratteri qualunque, anche dentro una parola. Sul telefono il titolo
   della home si spezzava cosi':  海外に友だちが / できるコミュニ / ティ  -
   «comunità» tagliata a meta', la prima cosa che vede un giapponese.
   Nei titoli il compositore giapponese va a capo per gruppi di parole: qui
   lo dice la voce di lingua stessa (are_you_social_enough), con un <wbr>
   fra un gruppo e l'altro, e keep-all impedisce gli altri a capo. I gruppi
   sono quelli di BudouX, la libreria di Google su cui si basa Chrome
   (海外に|友だちが|できる|コミュニティ): se la frase cambia, si rifanno con
   budoux.load_default_japanese_parser().parse(frase). Il coreano
   le parole le separa con lo spazio: keep-all basta (senza, l'hangul si
   spezza fra le sillabe). balance: righe di lunghezza simile.
   overflow-wrap: anywhere e' la rete di sicurezza: se un gruppo non ci sta
   in una riga intera, si spezza lo stesso invece di uscire dallo schermo.
   ========================================================================== */
.cham-cover .cham-cover-text .cover-text-lead:lang(ja),
.cham-cover .cham-cover-text .cover-text-lead:lang(ko) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 5/10, Alain: «fai anche una scelta estetica tu, non e' detto che le
   dimensioni fossero giuste». Misurato su sette schermi e quattro lingue:

   - TUTTE LE LINGUE: righe di lunghezza simile. Prima, sul PC, «La community
     per chi ama il / Giappone»: l'articolo in fondo alla riga e il nome da
     solo sotto. Con balance (e il&nbsp;Giappone nella voce italiana) diventa
     «La community per / chi ama il Giappone». Il latino resta a 40px, 600.
   - GIAPPONESE E COREANO un gradino sotto il latino: un kanji riempie tutto
     il suo quadrato, quindi a parita' di corpo pesa molto piu' di una parola
     latina. A 40px sul telefono erano tre righe che coprivano la foto; a 32px
     sono due, su tutti i telefoni da 360 a 430: 海外に友だちが / できるコミュニティ
     e 일본을 사랑하는 / 사람들이 모이는 곳. Sul PC 36px.
   - GIAPPONESE a peso 500: a parita' di peso i kanji risultano piu' scuri del
     latino. palt = la spaziatura proporzionale dei kana che la grafica
     giapponese usa nei titoli, piu' un filo d'aria fra i segni (.04em).
     Il coreano resta a 600: l'hangul ha meno tratti, regge il peso pieno.
   Il tema riduce il titolo a 30px sotto i 320px e sui telefoni in
   orizzontale: qui gli stessi due casi, un gradino sotto. */
.cham-cover .cham-cover-text .cover-text-lead {
  text-wrap: balance;
}
.cham-cover .cham-cover-text .cover-text-lead:lang(ja),
.cham-cover .cham-cover-text .cover-text-lead:lang(ko) {
  font-size: 36px;
  line-height: 1.4;
}
.cham-cover .cham-cover-text .cover-text-lead:lang(ja) {
  font-weight: 500;
  font-feature-settings: "palt";
  letter-spacing: .04em;
}
@media (max-width: 480px) {
  .cham-cover .cham-cover-text .cover-text-lead:lang(ja),
  .cham-cover .cham-cover-text .cover-text-lead:lang(ko) {
    font-size: 32px;
  }
}
@media (max-width: 320px), (max-height: 360px) and (orientation: landscape) {
  .cham-cover .cham-cover-text .cover-text-lead:lang(ja),
  .cham-cover .cham-cover-text .cover-text-lead:lang(ko) {
    font-size: 26px;
  }
}