/* ============================================================
   Todi Steak — ritocchi grafici di questo ristorante.

   Il disegno viene dalle loro carte stampate: il carbone della copertina
   del menu' (#231f20), la vinaccia della carta dei vini (#521029), l'oro
   delle grafiche del sito, e il logo in carattere stretto, pieno in
   "TODI" e sottilissimo in "STEAK". Qui il carattere stretto fa da
   titolo in due pesi, gli angoli sono vivi come un banco di macelleria e
   la brace volante del preset resta spenta: il gesto della casa e' il
   taglio (vedi wow.js, sezione "I tagli").
============================================================ */
@font-face{font-family:'Todi Condensed';font-style:normal;font-weight:300;font-display:swap;
  src:url('/assets/img/caratteri/barlow-condensed-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Todi Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/img/caratteri/barlow-condensed-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
/* 500 e 600 (e le lettere fuori dal latino base) li porta il template */
@font-face{font-family:'Todi Condensed';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/barlow-condensed-latin-460f141ec8.woff2') format('woff2')}
@font-face{font-family:'Todi Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/barlow-condensed-latin-215a93c696.woff2') format('woff2')}

:root, :root[data-preset]{
  --carbone:#231f20;
  --carbone-fondo:#1b1819;
  --vinaccia:#521029;
  --vinaccia-viva:#8c2140;
  --ottone:#c9a777;
  --osso:#f2ece4;

  --bg:var(--carbone);
  --panel:rgba(242,236,228,.04);
  --line:rgba(242,236,228,.14);
  --text:var(--osso);
  --muted:#b5aba1;
  --accent:var(--vinaccia-viva);
  --accent2:var(--ottone);
  --accent-rgb:140,33,64;
  --accent2-rgb:201,167,119;
  --su-accento:#fff;
  --gold:var(--ottone);
  --su-gold:#231f20;
  --granata:var(--vinaccia);

  --font-display:'Todi Condensed','Barlow Condensed',system-ui,sans-serif;
  --font-sans:'Barlow',system-ui,sans-serif;
  --font-mono:'Todi Condensed','Barlow Condensed',system-ui,sans-serif;

  --raggio:3px;
  --raggio-pulsante:2px;
  --bordo:1px;
  --riempimento:rgba(242,236,228,.035);
  --ombra:0 30px 60px -34px rgba(0,0,0,.9);
  --alza:-3px;
  --etichetta-font:var(--font-sans);
  --etichetta-transform:none;
  --etichetta-spaziatura:.04em;
  --etichetta-peso:500;
  --etichetta-larga:.06em;
  --punti:none;
  --numeri:none;
  --frecce:none;
  --bagliore:0 0 0;
  --cornice:0px;
  --cornice-bordo:0;
  --braci:none;
  --velo:.72;
  --velo-hero:radial-gradient(75% 60% at 50% 45%, rgba(35,31,32,.25), rgba(27,24,25,.82) 100%);
  --velatura:rgba(27,24,25,.62);
  --velatura-forte:rgba(27,24,25,.93);
  --campo:#2a2526;
  --sfondo-alto:#1f1b1c;
  --ombra-testo:0 2px 18px rgba(0,0,0,.85);
  --ombra-logo:drop-shadow(0 12px 40px rgba(0,0,0,.7));

  /* transizioni del template, vestite coi colori della casa */
  --trans-apertura:onda;
  --trans-onda-1:#521029;
  --trans-onda-2:#231f20;
  --trans-inchiostro:#c9a777;
  --trans-menu-sfondo:#231f20;
  --trans-menu-testo:#f2ece4;
  --trans-prenota-sfondo:#521029;
  --trans-prenota-testo:#f2ece4;
}
:root{color-scheme:dark}
::selection{background:var(--vinaccia);color:#fff}

/* ---------- titoli: il carattere stretto del logo ----------
   I titoli grandi sono in peso sottile, come "STEAK"; le intestazioni
   piccole in peso pieno, come "TODI". Maiuscole perche' e' la voce del
   marchio, non per fare etichetta. */
html body :is(.sez-titolo,.choice .ccard h2,.menu-intro h2,.page-head h1,.sec-head h2,.menu-cta h2){
  font-family:var(--font-display);font-weight:300;text-transform:uppercase;letter-spacing:.005em;line-height:.95}
html body .sez-titolo{font-size:clamp(2.6rem,6vw,4.6rem)}
html body .choice .ccard.pieno h2{color:var(--osso);font-weight:700}
.piatto h3,.ts-taglio-testo h3,.card h3,.list-row .n{font-family:var(--font-display);font-weight:600;letter-spacing:.01em}
.piatto h3{text-transform:uppercase;font-size:1.25rem;line-height:1.05}
html body .menu-intro h2 span{font-weight:700;color:var(--osso)}
/* menu': un piatto senza foto non mostra il riquadro vuoto con la macchina */
html .card .photo:has(> .ph-icon){display:none}
html .card:has(.photo > .ph-icon) .card-body{padding-right:58px}
html body .card{border-radius:var(--raggio)}
html .grid{align-items:start}
/* la vinaccia e' un fondo, non un colore di scritta: sul carbone non si legge */
html body .page-head h1,html body .page-head h1 span{color:var(--osso)}
html body .page-head h1 span + span{font-weight:700}
html body :is(.card .chead .n,.field label b,section h2 .num,footer .col h4){color:var(--ottone)}
.sez-kicker{font-size:14px;letter-spacing:.04em;color:var(--ottone)}
.storia-corpo,.ts-testo{font-size:clamp(1.02rem,1.2vw,1.12rem)}
.orari .h,.piatto .prezzo{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---------- prima schermata ---------- */
.logo img[data-brand-logo],.brand-hero img[data-brand-logo]{width:min(420px,78vw) !important}
.stage .kicker{font-size:14px;letter-spacing:.06em;color:var(--osso);opacity:.82}
.scene video.ready{opacity:.62}
.choice{border-bottom-color:rgba(242,236,228,.22)}
.choice .ccard .filo{background:rgba(242,236,228,.22)}
.choice .ccard h2{font-size:clamp(2.8rem,6.4vw,5rem)}
.choice .ccard.pieno h2{color:var(--osso);font-weight:700}
.choice .ccard::before{background:var(--vinaccia)}
.choice .ccard.pieno::before{background:var(--osso)}
@media (hover:hover){ html body .choice .ccard.pieno:hover h2,html body .choice .ccard.pieno:hover p{color:var(--carbone)} }
html body .choice .ccard.pieno:focus-visible h2,html body .choice .ccard.pieno:focus-visible p,
html body .choice .ccard.pieno:active h2,html body .choice .ccard.pieno:active p{color:var(--carbone)}
.marquee{background:var(--vinaccia);border-color:transparent}
.marquee span{font-family:var(--font-display);font-weight:500;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,236,228,.78)}
.marquee span b{color:var(--osso);font-weight:700}

/* numeri del template (piatti, sezioni): per un locale cosi' contano
   quelli della filiera, che stanno nella sezione sotto */
#fatti{display:none !important}

/* pulsanti: rettangoli netti, il pieno e' vinaccia */
.btn{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.btn.pieno{background:var(--vinaccia-viva);border-color:var(--vinaccia-viva)}
.btn.pieno:hover{background:var(--vinaccia);border-color:var(--vinaccia)}
.storia-foto,.piatto,.galleria-lista figure{border-radius:var(--raggio)}
.piatto:hover{border-color:var(--ottone)}
.orari .oggi .g::after{background:var(--vinaccia-viva)}

/* ============================================================
   Sezioni della casa (costruite da wow.js)
============================================================ */
.ts-sez{position:relative}
.ts-testa{max-width:62ch}
.ts-testo{margin-top:20px;color:var(--muted);line-height:1.75;max-width:60ch}
.ts-testo + .ts-testo{margin-top:1em}

/* video con pausa sempre a portata (WCAG 2.2.2) */
.ts-media{position:relative;margin:0;overflow:hidden;border-radius:var(--raggio);background:var(--carbone-fondo)}
.ts-media img,.ts-media video{width:100%;height:100%;object-fit:cover;display:block}
.ts-pausa{position:absolute;right:12px;bottom:12px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(242,236,228,.4);background:rgba(27,24,25,.6);color:var(--osso);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ts-pausa svg{width:18px;height:18px;fill:currentColor}
.ts-pausa .i-avvia{display:none}
.ts-media.fermo .ts-pausa .i-pausa{display:none}
.ts-media.fermo .ts-pausa .i-avvia{display:block}
.ts-pausa:focus-visible{outline:2px solid var(--ottone);outline-offset:3px}

/* ---------- la filiera: video della cella e tre fatti ---------- */
.ts-filiera{background:var(--carbone-fondo);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ts-filiera-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.ts-filiera .ts-media{aspect-ratio:4/5}
.ts-fatti{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border-top:1px solid var(--line)}
.ts-fatti div{padding:20px 14px 0 0}
.ts-fatti dt{font-family:var(--font-display);font-weight:300;font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;color:var(--osso)}
.ts-fatti dt b{font-weight:700}
.ts-fatti dd{margin:8px 0 0;font-size:14px;line-height:1.4;color:var(--muted)}

/* ---------- I tagli: il pezzo forte della home ----------
   A sinistra i sei tagli in grande, a destra la foto. Scegliendo un
   taglio la foto nuova scende dall'alto dietro una lama d'ottone. */
.ts-tagli-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:44px}
.ts-elenco{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ts-elenco li{border-bottom:1px solid var(--line)}
.ts-elenco button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:clamp(10px,1.4vw,16px) 2px;color:rgba(242,236,228,.42);transition:color .3s}
.ts-elenco .nome{font-family:var(--font-display);font-weight:300;text-transform:uppercase;font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:.95;transition:font-weight .2s}
.ts-elenco .epiteto{font-size:14px;color:var(--muted);text-align:right;white-space:nowrap}
.ts-elenco button:hover{color:var(--osso)}
.ts-elenco button[aria-pressed="true"]{color:var(--osso)}
.ts-elenco button[aria-pressed="true"] .nome{font-weight:700}
.ts-elenco button[aria-pressed="true"] .epiteto{color:var(--ottone)}
.ts-elenco button:focus-visible{outline:2px solid var(--ottone);outline-offset:-2px}
.ts-banco{position:sticky;top:84px}
.ts-banco .ts-media{aspect-ratio:4/3;box-shadow:var(--ombra)}
.ts-banco .ts-media img{position:absolute;inset:0}
.ts-lama{position:absolute;left:0;right:0;top:0;height:2px;background:var(--ottone);box-shadow:0 0 18px rgba(201,167,119,.8);opacity:0;pointer-events:none}
.ts-taglio-testo{margin-top:22px;min-height:9.5em}
.ts-taglio-testo h3{font-size:1.5rem;text-transform:uppercase;color:var(--osso)}
.ts-taglio-testo p{margin-top:10px;color:var(--muted);line-height:1.7;max-width:56ch}

/* ---------- la cucina ---------- */
.ts-cucina-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:40px}
.ts-cucina-grid .ts-media{aspect-ratio:3/4}
.ts-cucina-grid .ts-media.largo{grid-column:span 2;aspect-ratio:auto}

/* ---------- la gift card BiSteak ---------- */
html body .ts-regalo{padding:0;overflow:hidden;background:var(--vinaccia)}
.ts-regalo-grid{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(420px,46vw,620px)}
.ts-regalo .ts-media{border-radius:0;height:100%}
.ts-regalo-testo{padding:clamp(48px,7vw,96px) clamp(24px,6vw,80px);align-self:center}
.ts-regalo .sez-kicker{color:#e9cfa3}
.ts-regalo .ts-testo{color:rgba(242,236,228,.82)}
.ts-prezzo{display:block;margin-top:26px;font-family:var(--font-display);font-weight:300;font-size:clamp(2.4rem,4vw,3.2rem);line-height:1}
.ts-regalo .azioni{margin-top:26px}
.ts-regalo .btn.pieno{background:var(--osso);border-color:var(--osso);color:var(--vinaccia)}
.ts-regalo .btn.pieno:hover{background:#fff;border-color:#fff}
.ts-regalo .btn:not(.pieno){border-color:rgba(242,236,228,.45);background:transparent}

/* ---------- voci degli ospiti ---------- */
.ts-voci-lista{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);margin-top:36px}
.ts-voce{margin:0;padding-top:22px;border-top:1px solid var(--line)}
.ts-voce blockquote{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2;color:var(--osso)}
.ts-voce figcaption{margin-top:16px;font-size:14px;color:var(--ottone)}

#galleria .ts-testa{margin-bottom:32px}

@media (max-width:820px){
  .ts-filiera-grid,.ts-tagli-grid,.ts-regalo-grid,.ts-voci-lista{grid-template-columns:1fr}
  .ts-filiera .ts-media{aspect-ratio:4/3}
  .ts-banco{position:relative;top:0;order:-1}
  .ts-tagli-grid{display:flex;flex-direction:column}
  .ts-cucina-grid{grid-template-columns:1fr 1fr}
  .ts-cucina-grid .ts-media.largo{grid-column:1 / -1;aspect-ratio:16/10}
  .ts-regalo .ts-media{aspect-ratio:4/3;height:auto}
}
@media (max-width:720px){
  .ts-fatti{grid-template-columns:1fr;border-top:0}
  .ts-fatti div{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
  .ts-fatti dd{margin:0}
  .ts-elenco .nome{font-size:clamp(2rem,11vw,2.8rem)}
  .ts-elenco .epiteto{font-size:13px}
  .ts-taglio-testo{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .ts-lama{display:none}
  .ts-elenco button,.ts-elenco .nome{transition:none}
}