/* home.css — look della bozza (9/10/2026) applicato alle due home, IT ed EN.
   Si carica DOPO site.css e solo da index.html e en/index.html: le altre pagine
   restano com'erano. Qui cambiano colori, tipografia, apertura, player e misura
   dei bersagli da toccare; HTML e script non si toccano. */

/* 1 — Palette: stessi nomi di site.css, valori nuovi (da DESIGN_NOTES). */
:root {
  --ink: #17211f;
  --paper: #f3f0e8;
  --panel: #fffef9;
  --line: #cfcec4;
  --blue: #2d5bff;
  --blue-deep: #203fb4;
  --blue-soft: #dce6f1;
  --signal: #c6f04e;
  --muted: #505a53;
  --ink-lift: #202d29;   /* superficie scura rialzata: pannello del player */
  --on-ink: #d0d5cf;     /* testo secondario su fondo scuro */
  --on-ink-mute: #aab1a9;
  --touch: 44px;         /* misura minima di ogni elemento da toccare */
}

/* 2 — Base */
body { font-size: 18px; font-variant-numeric: lining-nums tabular-nums; }
::selection { background: var(--signal); color: var(--ink); }
a:focus-visible, button:focus-visible { outline-color: var(--blue); }
.hero a:focus-visible, .hero button:focus-visible,
.together a:focus-visible, .together button:focus-visible { outline-color: var(--signal); }

/* 3 — Barra in alto: voci da 44px, EN comodo da toccare */
.topbar { min-height: 74px; }
.wordmark { font-size: 19px; line-height: 1.2; }
.wordmark span { margin-top: 4px; font-size: 12px; letter-spacing: .08em; }
.topbar nav a { display: inline-flex; align-items: center; min-height: var(--touch); font-size: 15px; }
.topbar .language { padding-inline: 10px; }
.topbar .nav-contact { padding-inline: 18px; }
.topbar .nav-contact:hover { background: var(--blue-deep); text-decoration: none; }
.topbar .nav-contact .nav-number { color: #fff; }   /* il blu nuovo è più chiaro: numerino bianco per restare leggibile */
@media (max-width: 560px) {
  .topbar nav { display: flex; justify-content: space-between; gap: 4px; }
  .topbar nav a { font-size: 14px; }
  .topbar .nav-contact { padding-inline: 12px; }
}

/* 4 — Apertura (come la bozza): a sinistra titolo e player, a destra il ritratto con la frase sotto.
   La foto di sfondo a rotazione resta e si vede sotto al player e al ritratto. */
.hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 84px); padding: clamp(56px, 7vw, 92px) var(--gutter) 150px; }
.hero:after { display: none; }   /* niente cerchi decorativi */
.hero h1 { margin: 28px 0 24px; font-size: clamp(64px, 8vw, 108px); line-height: .92; letter-spacing: -.055em; text-wrap: balance; }
.hero-foot { font-size: 12px; }
.hero::before { inset: 0; background-position: 55% 78%; background-size: cover; opacity: .4;
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 82%); mask-image: linear-gradient(180deg, transparent 30%, #000 82%);
  -webkit-mask-composite: source-over; mask-composite: add; }
.hero-portrait { position: relative; z-index: 1; margin: 0; align-self: center; }
.hero-portrait img { width: 100%; height: auto; display: block; }
.hero-portrait figcaption { min-height: 112px; padding: 16px 22px; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 20px; border-top: 4px solid var(--signal); background: var(--panel); color: var(--ink); }
.hero-portrait figcaption > span { font-size: 14px; font-weight: 650; }
.hero-portrait figcaption p { margin: 0; font: 400 clamp(22px, 2.6vw, 30px)/1.16 var(--serif); letter-spacing: -.025em; }
.hero-portrait figcaption p.frase-lunga { font-size: clamp(19px, 2.1vw, 25px); }
@media (max-width: 1100px) {
  .hero-portrait figcaption { grid-template-columns: 1fr; gap: 7px; min-height: 124px; padding: 14px 17px 16px; align-content: center; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; padding-bottom: 120px; }
  .hero h1 { font-size: clamp(57px, 14vw, 88px); }
  .hero::before { opacity: .3; }
  .hero-portrait figcaption p { font-size: 24px; }
}

/* 5 — Player: pannello scuro con filo verde, controlli da 44px, selezione leggibile */
.player-hero { max-width: 520px; margin-top: 34px; padding: 22px 24px 20px; background: var(--ink-lift); border-left: 4px solid var(--signal); }
.player-play { min-height: 58px; padding: 7px 22px 7px 7px; background: var(--signal); color: var(--ink); }
.player-play:hover:not(:disabled) { background: #d7fa75; }
.player-icon { background: var(--ink); }
.player-hero .player-prev, .player-hero .player-fav, .player-hero .player-help { width: var(--touch); height: var(--touch); min-width: var(--touch); min-height: var(--touch); margin: 0; position: static; align-self: center; }
.player-hero .player-help { background: none; border-color: var(--on-ink-mute); color: var(--on-ink); font-size: 16px; }
.player-hero .player-prev:hover:not(:disabled), .player-hero .player-fav[aria-pressed="true"],
.player-hero .player-help[aria-expanded="true"], .player-hero .player-help:hover { border-color: var(--signal); color: var(--signal); }
.player-meta { color: var(--on-ink); font-size: 15px; }
.player-meta [data-title] { color: var(--panel); font: 400 22px/1.2 var(--serif); letter-spacing: -.01em; }
.player-progress { color: var(--on-ink); font-size: 14px; }
.player-progress input { accent-color: var(--signal); }
.player-note { color: var(--on-ink); font-size: 14px; }
.player-help-text { border-left-color: var(--signal); font-size: 15px; }
.player-picks { color: var(--on-ink); font-size: 15px; }
.player-picks-actions button { min-height: var(--touch); padding: 10px 16px; color: var(--panel); font-size: 14px; }
.player-picks-actions button[data-picks-download] { background: var(--blue); border-color: var(--blue); }
.player-picks-actions button:hover:not(:disabled) { background: var(--blue-deep); }
.player-pick-title, .player-pick-remove { min-height: var(--touch); }
.player-pick-remove { min-width: var(--touch); }
@media (max-width: 600px) {
  body { font-size: 17px; }
  .player-hero { max-width: none; padding: 20px 18px; }
  .player-hero .player-play { flex: 1 0 100%; }
}

/* 6 — Sezioni, schede e piede */
.section h2, .work-heading h2 { font-size: clamp(46px, 6vw, 80px); line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
.card-cta { color: var(--blue-deep); }
a.work-card:hover { background: #17211f0d; }
footer { border-top: 1px solid var(--line); }

/* Tocco minimo 44px: chip di avvio del modulo contatti e selettore lingua */
.message-starters button { min-height: var(--touch); }
.topbar .language { min-width: var(--touch); justify-content: center; }

/* 7 — Meter stereo del player (meter.js): L/R con picco; -48…0 dBFS, rosso negli ultimi 6 dB */
.player-meter { display: grid; gap: 4px; margin-top: 12px; opacity: .35; transition: opacity .3s ease; }
.player-hero.is-playing .player-meter.is-live { opacity: 1; }
.meter-row { display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 8px; }
.meter-ch { color: var(--on-ink-mute); font: 600 10px/1 var(--sans); letter-spacing: .04em; }
.meter-track { position: relative; height: 6px; background: #0000004d; overflow: hidden; }
.meter-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--signal) 0 75%, #f2d14b 75% 87.5%, #e5322d 87.5% 100%); clip-path: inset(0 100% 0 0); }
.meter-peak { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -2px; background: var(--panel); }
.meter-peak.is-over { background: #e5322d; }