/* ============================================================================
   STILE 4 — TAVOLA CALDA · colori e caratteri
   Bianco, grigio chiaro, arancio caldo. Niente decorazioni: deve sembrare un
   listino, non una carta. Caratteri stretti per starci dentro in poco spazio.
   Secondo tema chiaro: riusa le variabili aperte da Mare, senza aggiungerne.
   ========================================================================== */

:root{
  --bg:        #f6f6f4;   /* grigio chiarissimo */
  --bg-2:      #ffffff;   /* le righe */
  --bg-3:      #ffffff;
  --bg-4:      #e8e7e3;   /* fondo dei francobolli */
  --ember:     #d6541f;   /* arancio da rosticceria */
  --ember-2:   #ef7a43;
  --flame:     #b6401a;
  --brick:     #8f3113;
  --gold:      #c06a1c;   /* qui l'"oro" è l'arancio bruciato dei prezzi */
  --gold-soft: #8a5216;   /* sul bianco il prezzo deve restare leggibile */
  --basil:     #5d7a3a;
  --cream:     #22201d;   /* ⚠️ testo scuro su fondo chiaro */
  --muted:     #6e6a63;
  --line:      rgba(34,32,29,.13);
  --shadow:    0 10px 24px rgba(34,32,29,.10);

  --gold-rgb:  192,106,28;
  --ember-rgb: 214,84,31;
  --ink-rgb:   26,24,21;

  --overlay-bg:     #f6f6f4;              /* pieno: dietro una lista non si deve intravedere la home */
  --btn-bg:         rgba(34,32,29,.40);
  --dot-bg:         rgba(34,32,29,.22);
  --photo-veil:     rgba(255,255,255,.92);
  --gold-2:         #a3561a;
  --page-text:      #ffffff;
  --page-text-soft: rgba(255,255,255,.86);
  --page-line:      rgba(255,255,255,.24);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-head:    "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Barlow", system-ui, sans-serif;
}

/* fondo piatto: niente aloni, è un listino */
body{ background:var(--bg); }
body::before{ display:none; }        /* via anche la trama a griglia */

.hero{ padding-top:26px; }
.hero-name{ font-weight:800; letter-spacing:-.02em; text-shadow:none; color:var(--flame); }
.hero .sub{ letter-spacing:.14em; font-size:.92rem; color:var(--muted); font-weight:600; }
.kicker{ color:var(--gold-soft); letter-spacing:.2em; }
.hero .flame-rule{ background:var(--ember); box-shadow:none; height:3px; width:52px; border-radius:0; margin:16px auto 12px; }

/* le righe della home: bordo netto, nessun rilievo */
.cat-btn{
  background:var(--bg-2);
  border:1px solid var(--line);
  box-shadow:none;
  animation:none;                    /* niente entrata scaglionata: deve comparire subito */
}
.cat-btn:hover, .cat-btn:focus-visible{ border-color:var(--ember); box-shadow:none; }
.cat-btn::after{ display:none; }
.cat-btn .label{ text-transform:uppercase; letter-spacing:.02em; font-weight:600; }
.cat-btn .arrow{ color:var(--ember); }

/* le righe della lista: separatore sottile invece della carta */
.deck.as-list .card{
  background:var(--bg-2);
  border:1px solid var(--line);
}
.deck.as-list .card .photo{ background:var(--bg-4); }
.card .body h3{ font-family:var(--font-body); font-weight:600; }
.ov-title{ font-family:var(--font-display); font-weight:700; }