/* ============================================================
   LUCANIA IS MORE — Lessico · ALLINEATO AL DESIGN SYSTEM
   Palette brand (panna · rosso · nero — 60/30/10), Visby ExtraBold
   MAIUSCOLO per i titoli, Newsreader per il lessico.
   Superfici piatte, bordi netti: niente ombre, niente angoli morbidi.
   Caricato dopo styles.css + lessico.css per vincere la cascata.
   ============================================================ */
:root{
  --cream:#FFF9E3;            /* panna · primario */
  --cream-2:#F4ECCF;          /* panna 2 · superficie */
  --ink:#1C1C1C;              /* nero */
  --ink-70:rgba(28,28,28,.70);
  --ink-55:rgba(28,28,28,.55);
  --ink-40:rgba(28,28,28,.40);
  --red:#A91013;              /* rosso · primario */
  --green:#575D46;            /* accento · pollino */
  --gold:#F4A200;             /* accento · crusco */
  --line:rgba(28,28,28,.13);
  --line-strong:rgba(28,28,28,.40);
}

/* logotipo sul rosso → panna piena */
.nav .logo-onred .ll1,
.nav .logo-onred .ll2{ fill:var(--cream); }

/* ---- TITOLI · Visby ExtraBold, maiuscolo, stretto ---- */
.lex-intro h1{ text-transform:uppercase; font-weight:800; letter-spacing:-.025em; line-height:.9; }
.lex-intro h1 em{ font-style:normal; color:var(--red); }      /* Visby non ha corsivo display */
.lex-sechead h2{ text-transform:uppercase; font-weight:800; letter-spacing:-.02em; }
.lex-empty h3{ text-transform:uppercase; font-weight:800; letter-spacing:-.01em; }

/* occhiello da sistema: trattino + maiuscolo spaziato */
.lex-intro .kick{ font-weight:700; font-size:12px; letter-spacing:.22em; text-transform:uppercase; }
.lex-intro .stat .n{ font-weight:800; letter-spacing:-.02em; }

/* watermark dietro al titolo — Newsreader, tono panna scuro */
.lex-intro .wm{ color:rgba(28,28,28,.05); }

/* indice di lettera: rosso pieno del brand */
.lx-ltr{ color:var(--red); }

/* i chip filtro restano su una riga (Outfit è un filo più largo) */
.lex-types button{ white-space:nowrap; letter-spacing:.1em; }

/* ============================================================
   VOCI · BLOCCHI PIENI  — Parola (panna) · Modo (verde) · Proverbio (inchiostro)
   La testata di tutte e tre usa LA STESSA font e LA STESSA dimensione
   (Newsreader corsivo). I tipi si distinguono per il campo di colore.
   ============================================================ */
body{ background:var(--cream); }
.lex-controls{ background:var(--cream); }

/* ---- TESTATA UNIFICATA · parola=.hw · modo/proverbio=.saying ---- */
.lex.parola .hw,
.lex.expr .saying{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(26px,2.7vw,33px); line-height:1.2; letter-spacing:-.01em; margin:0;
}
/* le parole (lemmi) usano la stessa font dei modi di dire ma in tondo */
.lex.parola .hw{ font-style:normal; }
/* il proverbio era in tondo: lo riportiamo in corsivo come gli altri */
.sec-proverbio .lex.expr .saying{ font-style:italic; }

/* ---- SIGNIFICATO UNIFICATO ---- */
.lx-body .mean,
.lex.expr .mean{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(16px,1.5vw,17.5px); line-height:1.56; letter-spacing:0; margin:0;
}

/* ---- ETICHETTA DI TIPO (colore per superficie, sotto) ---- */
.lex-tag{ display:block; font:600 10.5px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; }

/* ============================================================
   1 · PAROLA — scheda panna chiara, due colonne
   ============================================================ */
.lex.parola{
  display:grid; grid-template-columns:240px minmax(0,1fr); gap:52px; align-items:start;
  background:var(--cream-2); border:1px solid var(--line); border-radius:5px;
  padding:34px 42px; margin-bottom:16px;
}
.lex.parola:first-of-type{ border-top:1px solid var(--line); }
.lex.parola .ph{ display:block; font-family:var(--serif); font-style:italic; color:var(--ink-55);
  font-size:17px; margin-top:12px; }
.lex.parola .lx-head .pos{ display:block; margin-top:12px; font:500 10.5px/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-40); }
.lx-body .mean{ color:var(--ink); }
.lx-body .ex{ font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.5;
  color:var(--ink-70); margin:18px 0 0; padding-left:20px; border-left:2px solid var(--red); }
.lx-body .ex .tr{ display:block; font-family:var(--sans); font-style:normal; font-size:13.5px;
  line-height:1.4; color:var(--ink-40); margin-top:8px; }

/* iniziale di lettera */
.lx-ltr{ padding:34px 2px 4px; }
.lx-group:first-child .lx-ltr{ padding-top:8px; }

/* ============================================================
   2 + 3 · BLOCCHI CENTRATI (modo + proverbio) — guscio comune
   ============================================================ */
.lex.expr{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:0;
  border:0; max-width:820px; margin:0 auto 18px; padding:46px 56px; border-radius:5px;
}
.lex.expr:first-of-type{ border-top:0; }
.lex.expr .lf, .lex.expr .rt{ display:contents; }   /* tutto in colonna, centrato */
.lex.expr .saying{ max-width:24ch; }
.lex.expr .mean{ max-width:48ch; margin-top:20px; }
.lex.expr .say{ order:1; }                            /* Ascolta sempre in fondo */
.lex.expr .lf .say{ margin-top:28px; }

/* ---- 2 · MODO DI DIRE — blocco verde pieno ---- */
.lex[data-type="modo"]{ background:var(--green); color:var(--cream); }
.lex[data-type="modo"] .lex-tag{ color:rgba(255,249,227,.62); margin:0 0 20px; }
.lex[data-type="modo"] .saying{ color:var(--cream); }
.lex[data-type="modo"] .mean{ color:rgba(255,249,227,.82); }
.lex[data-type="modo"] .lit{ display:block; margin-top:10px; color:rgba(255,249,227,.5);
  font:500 11.5px/1.5 var(--sans); letter-spacing:.02em; }

/* ---- 3 · PROVERBIO — blocco inchiostro, accenti oro ---- */
.lex[data-type="proverbio"]{ background:var(--ink); color:var(--cream-2); }
.lex[data-type="proverbio"] .lex-tag{ color:var(--gold); margin:0; }
.lex[data-type="proverbio"] .lex-quote{ display:block; font-family:var(--serif); font-weight:600;
  font-size:62px; line-height:.45; color:var(--gold); margin:22px 0 18px; user-select:none; }
.lex[data-type="proverbio"] .saying{ color:#FBF4DC; }
.lex[data-type="proverbio"] .mean{ color:rgba(244,236,207,.62); }

/* ============================================================
   PLAYER AUDIO — knob + etichetta; colore per superficie
   ============================================================ */
.lex .say{ margin-top:26px; height:auto; gap:14px; padding:0; background:none; border:0; border-radius:0; }
.lex .say svg{ width:44px; height:44px; flex:0 0 44px; box-sizing:border-box;
  background:var(--red); border-radius:50%; fill:#fff; overflow:visible;
  transition:transform .18s ease, background .18s ease; }
.lex .say .say-label{ font:600 10.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-55); }
.lex .say:hover svg{ transform:scale(1.05); }
.lex .say.playing svg{ display:none; }
.lex .say .bars{ height:16px; }
.lex .say .bars i{ background:var(--red); width:3px; }

/* knob su blocco verde → panna con freccia verde */
.lex[data-type="modo"] .say svg{ background:var(--cream); fill:var(--green); }
.lex[data-type="modo"] .say .say-label{ color:rgba(255,249,227,.7); }
.lex[data-type="modo"] .say.playing .bars i{ background:var(--cream); }
/* knob su blocco inchiostro → oro con freccia inchiostro */
.lex[data-type="proverbio"] .say svg{ background:var(--gold); fill:var(--ink); }
.lex[data-type="proverbio"] .say .say-label{ color:rgba(244,236,207,.6); }
.lex[data-type="proverbio"] .say.playing .bars i{ background:var(--gold); }

/* tutta la card è cliccabile per avviare l'ascolto */
.lex{ cursor:pointer; }
.lex a, .lex button{ cursor:pointer; }

@media (max-width:760px){
  .lex.parola{ grid-template-columns:1fr; gap:16px; padding:26px 24px; }
  .lex.expr{ padding:38px 26px; }
}