/* =====================================================================
   Juancito's Tacos — v3  "EL COMAL" (bold street-food fire)
   Dark, high-contrast, ember/smoke. The food comes off the griddle.
   Mechanics frozen (controllers verbatim); this is the LOOK only.
   ===================================================================== */

:root{
  /* grounds */
  --char:        #16100D;   /* page char ground */
  --plate:       #0E0A08;   /* near-black plate / cards */
  --smoke:       #231914;   /* raised smoke panels */
  --smoke-2:     #1B1310;   /* reviews / dark bands */
  --ash-line:    #3A2A20;   /* hairlines on dark */

  /* fire accents */
  --ember:       #F26A1B;   /* ember-orange — heads/links/glow (6.15:1 on char) */
  --ember-soft:  #FF8A3D;   /* brighter ember for glow gradients (decorative) */
  --marigold:    #F4B53C;   /* flame-yellow — prices / sparks / stars (10.3:1) */
  --chile:       #C42612;   /* CTA fill (white 5.78:1) */
  --chile-deep:  #A81E0D;   /* CTA hover (white 7.35:1) */

  /* text */
  --cream:       #F3E7D6;   /* body on dark (15.45:1 on char) */
  --muted:       #C9B8A6;   /* secondary on dark (9.78:1) */
  --ink:         #16100D;   /* dark ink on light surfaces */
  --burnt:       #9A3410;   /* burnt-orange head on cream (5.99:1) */

  /* light surface (footer credit strip etc.) */
  --cream-bg:    #F3E7D6;

  /* type */
  --display: "Archivo Black", Impact, "Arial Black", system-ui, sans-serif;
  --cond:    "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --sans:    "Barlow", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* rhythm */
  --section-y: clamp(3.25rem, 6vw, 5.5rem);
  --wrap: 1200px;
  /* the single edge-margin contract: every .wrap is centred with a CONSISTENT,
     generous --edge gutter on both sides, desktop AND mobile, so no band kisses
     the viewport edge. (matches the polished v2; the old --gut was too tight.) */
  --edge: clamp(1.25rem, 5vw, 3rem);
  --radius: 14px;

  /* a reusable ember heat-line (griddle edge) */
  --heatline: linear-gradient(90deg,
     transparent 0%, var(--chile) 14%, var(--ember) 38%,
     var(--marigold) 50%, var(--ember) 62%, var(--chile) 86%, transparent 100%);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--char);
  color:var(--cream);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--ember);text-decoration:none}
a:hover{color:var(--ember-soft)}
h1,h2,h3{margin:0;line-height:1.02;font-family:var(--display);font-weight:400}
p{margin:0}
.wrap{width:min(var(--wrap), 100% - 2*var(--edge));margin-inline:auto}

.icon{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.2em}

/* shared display/eyebrow bits ---------------------------------------- */
.kicker{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:.82rem;color:var(--ember);
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 .7rem;
}
.kicker::before{
  content:"";width:1.6rem;height:2px;border-radius:2px;
  background:var(--heatline);
}
.kicker--center{justify-content:center}
.kicker--center::after{
  content:"";width:1.6rem;height:2px;border-radius:2px;background:var(--heatline);
}
.section-head{max-width:62ch}
.section-head--center{margin-inline:auto;text-align:center}
.section-head__title{
  font-size:clamp(2rem, 5.2vw, 3.2rem);
  text-transform:uppercase;letter-spacing:.005em;color:#fff;
}
.section-head__lede{margin-top:.9rem;color:var(--muted);font-size:1.06rem;max-width:54ch}
.section-head--center .section-head__lede{margin-inline:auto}

/* heat-line divider */
.heat-rule{height:3px;border:0;margin:0;background:var(--heatline);
  box-shadow:0 0 18px -2px rgba(242,106,27,.5)}

/* =====================================================================
   THE EMBER HEAT-DIVIDER — the recurring CONCEPT MOTIF between sections.
   A glowing griddle edge (never a plain <hr>), with a hot ember bead riding
   the centre. Repeats at every section seam so the comal-fire thread runs the
   whole page. Sits flush between two bands; the glow bleeds onto both.
   ===================================================================== */
.heat-divider{position:relative;height:0;z-index:5}
.heat-divider::before{ /* the hot griddle edge */
  content:"";position:absolute;left:0;right:0;top:-1px;height:3px;
  background:var(--heatline);
  box-shadow:0 0 22px -1px rgba(242,106,27,.7), 0 0 46px 2px rgba(196,38,18,.35);
}
.heat-divider__ember{ /* the live ember bead at centre */
  position:absolute;left:50%;top:-1px;transform:translate(-50%,-50%);
  width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #FFE6A8 0%, var(--marigold) 28%, var(--ember) 58%, var(--chile) 100%);
  box-shadow:0 0 16px 3px rgba(242,106,27,.8), 0 0 30px 6px rgba(196,38,18,.45);
}

/* buttons ------------------------------------------------------------ */
.btn{
  --b:var(--chile);--bh:var(--chile-deep);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:1.02rem;line-height:1;
  padding:.92rem 1.5rem;border-radius:10px;border:2px solid transparent;
  background:var(--b);color:#fff;cursor:pointer;min-height:48px;
  transition:background .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow:0 10px 26px -14px rgba(196,38,18,.8);
}
.btn:hover{background:var(--bh);color:#fff;transform:translateY(-1px)}
.btn--lg{font-size:1.1rem;padding:1.05rem 1.8rem;min-height:54px}
.btn--sm{font-size:.86rem;padding:.6rem 1.05rem;min-height:44px}
.btn--ghost{
  background:transparent;border-color:var(--ember);color:var(--ember);
  box-shadow:none;
}
.btn--ghost:hover{background:rgba(242,106,27,.12);color:var(--ember-soft);border-color:var(--ember-soft)}
.btn--ash{
  background:transparent;border-color:#5A4636;color:var(--cream);box-shadow:none;
}
.btn--ash:hover{background:rgba(243,231,214,.08);color:#fff;border-color:#7a6150}

/* =====================================================================
   HEADER + NAV  (nav.js verbatim; modal cover on mobile via data-nav-lock)
   ===================================================================== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(14,10,8,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--ash-line);
}
/* When the mobile menu is open, drop backdrop-filter on the header: a
   backdrop-filter ancestor becomes the containing block for the position:fixed
   nav panel, trapping its inset:0 to the ~68px header box (the "menu covers only
   a top strip / page shows through" bug). Without the filter the fixed panel
   escapes to the viewport and covers full-screen. (site-nav §4.) */
.site-header[data-open]{backdrop-filter:none;background:transparent;border-bottom-color:transparent}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:var(--heatline);opacity:.85}
.header__inner{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:68px}
.wordmark{display:inline-flex;align-items:center;gap:.6rem;color:var(--cream)}
.wordmark__logo{height:42px;width:auto}
.wordmark__text{display:flex;flex-direction:column;line-height:1}
.wordmark__name{font-family:var(--display);font-size:1.12rem;text-transform:uppercase;
  letter-spacing:.02em;color:#fff}
.wordmark__tag{font-family:var(--cond);font-weight:600;font-size:.62rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ember);margin-top:2px}

.nav-toggle{display:none}
.nav{display:flex;align-items:center;gap:1.55rem}
.nav a{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.98rem;color:var(--cream);
  display:inline-flex;align-items:center;min-height:44px;
}
.nav a:hover{color:var(--ember)}
.nav .btn{min-height:44px;padding:.7rem 1.15rem;font-size:.95rem}

@media (max-width:720px){
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;border:1px solid var(--ash-line);border-radius:10px;
    background:rgba(35,25,20,.6);color:var(--cream);cursor:pointer;
    position:relative;z-index:90;   /* stay tappable ABOVE the open panel (z 80) */
  }
  .site-header[data-open] .nav-toggle{background:rgba(35,25,20,.85)}
  /* keep the brand visible at the top of the open full-screen menu */
  .site-header[data-open] .wordmark{position:relative;z-index:90}
  .nav-toggle__close{display:none}
  .site-header[data-open] .nav-toggle__open{display:none}
  .site-header[data-open] .nav-toggle__close{display:inline-flex}

  /* closed state keyed on the ALWAYS-PRESENT .site-header (not .nav-enhanced)
     so there is NO flash-of-open-menu at first paint. */
  .nav{
    position:fixed;inset:0;z-index:80;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:88px var(--edge) 2rem;
    background:var(--char);
    background-image:radial-gradient(120% 60% at 50% 100%, rgba(242,106,27,.16), transparent 62%);
    visibility:hidden;opacity:0;transform:translateY(-10px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    overflow-y:auto;
  }
  .site-header[data-open] .nav{
    visibility:visible;opacity:1;transform:none;
    transition:opacity .22s ease, transform .22s ease, visibility 0s;
  }
  .nav a{
    min-height:56px;font-size:1.5rem;color:#fff;
    border-bottom:1px solid var(--ash-line);
  }
  .nav a:hover{color:var(--ember)}
  .nav .btn{margin-top:1.3rem;min-height:54px;font-size:1.1rem}
}
html.nav-locked{overflow:hidden}

/* =====================================================================
   HERO — full-bleed griddle scene + heat-glow + glowing real wordmark
   ===================================================================== */
.hero{position:relative;isolation:isolate;background:var(--plate);
  min-height:clamp(560px, 88vh, 820px);display:flex;align-items:center;overflow:hidden}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
/* char scrim — keeps text legible over any bright tortilla highlight */
.hero__scrim{position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg, rgba(8,5,4,.78) 0%, rgba(8,5,4,.68) 38%, rgba(8,5,4,.72) 72%, rgba(8,5,4,.92) 100%),
    radial-gradient(120% 80% at 18% 34%, rgba(8,5,4,.28), rgba(8,5,4,.8) 92%);
}
/* ember heat-glow rising from the bottom edge (the griddle's fire) */
.hero__heat{position:absolute;left:0;right:0;bottom:-2px;height:46%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 130% at 50% 130%, rgba(242,106,27,.5) 0%, rgba(196,38,18,.28) 36%, transparent 64%);
  mix-blend-mode:screen;opacity:.9}
/* hero content is CENTRED on desktop (eyebrow, title, lede, CTAs, rating all
   balanced on the vertical axis) — matches the centred section heads across the
   page. A flex column centres the block-level/flex children (brand, CTA row);
   text-align:center centres the inline-flex bits (eyebrow, rating) and the
   wrapping copy. The full-bleed photo/scrim/heat-glow + glowing wordmark are
   untouched — this is alignment only. */
.hero__inner{position:relative;padding-block:clamp(2.5rem,7vw,4rem);width:100%;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__brand{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.4rem}
.hero__logo{
  width:clamp(190px, 34vw, 330px);height:auto;
  filter:drop-shadow(0 6px 26px rgba(242,106,27,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.hero__eyebrow{
  font-family:var(--cond);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  font-size:.88rem;color:var(--marigold);margin:0 0 1rem;
  display:inline-flex;align-items:center;gap:.6rem;
}
.hero__eyebrow::before{content:"";width:1.8rem;height:2px;background:var(--heatline);border-radius:2px}
.hero__title{
  font-size:clamp(2.7rem, 8.4vw, 5.6rem);text-transform:uppercase;
  letter-spacing:-.01em;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.hero__title .flame{
  color:var(--ember);
  text-shadow:0 0 26px rgba(242,106,27,.55), 0 2px 0 rgba(0,0,0,.35);
}
.hero__lede{margin-top:1.15rem;max-width:46ch;font-size:1.16rem;color:var(--cream);
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;margin-top:1.8rem}
.hero__rating{
  margin-top:1.7rem;display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:.6rem .95rem;border-radius:12px;
  background:rgba(14,10,8,.62);border:1px solid var(--ash-line);
  backdrop-filter:blur(2px);
}
.hero__rating .stars{color:var(--marigold);letter-spacing:.08em;font-size:1.05rem}
.hero__rating b{font-family:var(--display);font-size:1.2rem;color:#fff}
.hero__rating small{color:var(--muted);font-size:.92rem;font-weight:600}
.hero__rating .sep{color:var(--ash-line)}
.hero__rating a{color:var(--cream);font-weight:700;font-family:var(--cond);letter-spacing:.04em}
.hero__rating a:hover{color:var(--ember)}

/* =====================================================================
   SECTIONS base
   ===================================================================== */
.section{padding-block:var(--section-y);position:relative}
.section--char{background:var(--char)}
.section--plate{background:var(--plate)}

/* =====================================================================
   SIGNATURES — char-cards with a glowing ember top-rule (concept)
   ===================================================================== */
.sig-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem;
}
.char-card{
  position:relative;background:var(--plate);border:1px solid var(--ash-line);
  border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.char-card::before{ /* the hot griddle edge */
  content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:2;
  background:var(--heatline);box-shadow:0 0 16px -1px rgba(242,106,27,.65);
}
.char-card:hover{transform:translateY(-4px);border-color:#4a382b;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.95), 0 0 30px -16px rgba(242,106,27,.5)}
.char-card__media{aspect-ratio:5/4;overflow:hidden;background:#000}
.char-card__media img{width:100%;height:100%;object-fit:cover}
.char-card__body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.5rem}
.char-card__num{
  position:absolute;top:.7rem;right:.7rem;z-index:3;
  width:2.1rem;height:2.1rem;border-radius:50%;
  display:grid;place-items:center;font-family:var(--display);font-size:.95rem;color:#fff;
  background:var(--chile);box-shadow:0 6px 16px -6px rgba(196,38,18,.9), 0 0 0 3px rgba(14,10,8,.6);
}
.char-card__name{
  font-family:var(--display);font-size:1.4rem;text-transform:uppercase;
  letter-spacing:.01em;color:#fff;line-height:1.02;
}
.char-card__es{display:block;font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;color:var(--ember);margin-top:.25rem}
.char-card__call{color:var(--muted);font-size:.98rem;line-height:1.5}
.char-card__call b{color:var(--marigold);font-weight:700}

/* =====================================================================
   THE DIP — full-bleed consommé feature band (the signature beat)
   ===================================================================== */
.dip{position:relative;isolation:isolate;overflow:hidden;background:var(--plate)}
.dip__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
/* centered head over the band: a top-and-bottom-weighted scrim (not left-heavy)
   keeps the centred text legible over the middle of the consommé photo. */
.dip__scrim{position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg, rgba(8,5,4,.86) 0%, rgba(8,5,4,.62) 42%, rgba(8,5,4,.7) 78%, rgba(8,5,4,.9) 100%),
    radial-gradient(120% 90% at 50% 50%, rgba(8,5,4,.2), rgba(8,5,4,.74) 95%)}
.dip__heat{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 130% at 50% 120%, rgba(242,106,27,.34), transparent 58%);
  mix-blend-mode:screen}
.dip__inner{padding-block:clamp(3.5rem,8vw,6rem)}
.dip__body{max-width:46rem;margin-inline:auto;text-align:center}
.dip__body .kicker{justify-content:center}
.dip__body .kicker::after{content:"";width:1.6rem;height:2px;border-radius:2px;background:var(--heatline)}
.dip__title{font-size:clamp(2.1rem,5.6vw,3.4rem);text-transform:uppercase;color:#fff;
  text-shadow:0 3px 22px rgba(0,0,0,.6)}
.dip__title .flame{color:var(--ember);text-shadow:0 0 24px rgba(242,106,27,.55)}
.dip__lede{margin-top:1rem;margin-inline:auto;color:var(--cream);font-size:1.12rem;max-width:46ch;
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
.dip__cta{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* =====================================================================
   MENU TEASER — "off the griddle" board on charcoal
   ===================================================================== */
.teaser{background:var(--smoke);position:relative;overflow:hidden}
.teaser::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--heatline);opacity:.8}
/* head (kicker + title + lede + note) is a centred full-width block above; below
   it the board sits centred at a readable width with the CTAs centred under it,
   so the whole section reads top-to-bottom centred (no lopsided empty column). */
.teaser__inner{margin-top:clamp(1.8rem,3.5vw,2.6rem);display:flex;flex-direction:column;
  align-items:center;gap:1.6rem}
.teaser__note{margin-top:1rem;font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.86rem;color:var(--ember)}
.teaser__inner .board{width:min(640px,100%)}
.teaser__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.board{
  background:var(--plate);border:1px solid var(--ash-line);border-radius:var(--radius);
  padding:1.5rem 1.6rem 1.7rem;box-shadow:0 30px 60px -34px rgba(0,0,0,.95);position:relative;
}
.board::before{content:"";position:absolute;top:0;left:1.2rem;right:1.2rem;height:3px;
  background:var(--heatline);border-radius:0 0 3px 3px}
.board__head{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;
  font-size:1.05rem;color:var(--marigold);margin:0 0 1rem;
  display:flex;align-items:center;gap:.6rem;
}
.board__head::after{content:"";flex:1;height:1px;background:var(--ash-line)}
.board ul{list-style:none;margin:0;padding:0}
.board li{display:flex;align-items:baseline;gap:.4rem;padding:.5rem 0;border-bottom:1px dashed var(--ash-line)}
.board li:last-child{border-bottom:0}
.board__dish{font-family:var(--cond);font-weight:600;font-size:1.12rem;text-transform:uppercase;
  letter-spacing:.03em;color:var(--cream)}
.board__dots{flex:1;border-bottom:1px dotted #50402f;transform:translateY(-3px)}
.board__price{font-family:var(--display);font-size:1.05rem;color:var(--marigold)}

/* =====================================================================
   GALLERY — "THE WHOLE PLANCHA": a living hot-steel grid that drifts.
   The marquee track is an EVEN 2-row griddle grid — every plate the same tile,
   packed two-high column by column, so the band reads as a full comal of plates
   sliding past (balanced by construction, no lone spanning tile to throw it off).
   It sits on a brushed-steel griddle surface with an ember heat-glow underneath
   — the comal going full-tilt. gallery.js clones the items inside the SAME track
   to -50% (verbatim); an even tile count makes that seam land exactly. The steel
   band + tiles are additive look only.
   ===================================================================== */
.gallery{background:var(--char);position:relative;overflow:hidden}
/* the hot-steel griddle slab the photos ride on */
.plancha{position:absolute;left:0;right:0;bottom:0;height:74%;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 122%, rgba(242,106,27,.30), rgba(196,38,18,.12) 40%, transparent 66%),
    repeating-linear-gradient(95deg, rgba(255,255,255,.018) 0 2px, rgba(0,0,0,.05) 2px 5px),
    linear-gradient(180deg, #19120E 0%, #110C09 100%);
  border-top:1px solid #4A3A2C;
  box-shadow:inset 0 1px 0 rgba(255,180,120,.08), inset 0 22px 60px -30px rgba(0,0,0,.9)}
.gallery .wrap{position:relative;z-index:2}
.marquee{position:relative;z-index:2;margin-top:2.4rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
/* base track is a flex row; the .mmos modifier makes it the 2-row mosaic grid */
.marquee__track{display:flex;gap:1rem;width:max-content;padding:.6rem 0;list-style:none;margin:0}
.marquee--animated .marquee__track{animation:marquee 60s linear infinite;
  will-change:transform;backface-visibility:hidden}
.marquee--animated:hover .marquee__track,
.marquee--animated:focus-within .marquee__track{animation-play-state:paused}
/* translate3d (not translateX) so the loop runs on the GPU compositor — a 2D
   translate can be repainted on the main thread and stutter sub-pixel. */
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee--static{overflow-x:auto;scroll-snap-type:x mandatory}

/* the even 2-row hot-steel grid: flows column-by-column, two plates per column,
   every tile the SAME size.
   SEAM FIX — the grid carries NO column `gap`. gallery.js clones the items into the
   SAME track and the keyframe travels exactly -50%; with a grid `gap`, the original
   block and the cloned block are separated by one extra inter-column gap that -50%
   never traverses (-50% = 6·tile + 5.5·gap, but the clone of tile 1 sits at
   6·tile + 6·gap), so the loop snapped back ~half-a-gap every cycle → the jutter.
   With gap:0 the pitch is a clean multiple of the tile, so -50% lands frame-exact
   and the wrap is seamless. The visual gutter lives INSIDE each cell as padding,
   keeping the hot-steel spacing without re-introducing a track gap. */
.mmos{display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(2, clamp(118px,15vw,178px));
  grid-auto-columns:clamp(168px,19vw,238px);align-items:stretch;gap:0}
.mmos__cell{display:block;padding:.35rem}   /* the gutter, baked into the cell (no track gap) */
.shot{
  display:block;width:100%;height:100%;border:0;padding:0;margin:0;cursor:zoom-in;
  border-radius:11px;overflow:hidden;background:#000;position:relative;
  scroll-snap-align:center;transition:box-shadow .2s ease, filter .2s ease;
  /* each tile reads like a plate resting on hot steel: a thin hot rim + drop */
  box-shadow:0 14px 30px -18px rgba(0,0,0,.95), 0 0 0 1px #46362A,
             inset 0 0 0 1px rgba(0,0,0,.35);
}
.shot::after{content:"";position:absolute;inset:0;border-radius:11px;pointer-events:none;
  box-shadow:inset 0 0 0 0 rgba(242,106,27,0);transition:box-shadow .2s ease}
/* hover is box-shadow/filter ONLY — never transform: the track already animates
   transform, and a second transform on a moving tile composites two motions and
   stutters (photo-gallery bug bar). A hot-rim glow + slight brighten reads the lift
   without fighting the scroll. */
.shot:hover{filter:brightness(1.05);
  box-shadow:0 22px 46px -18px rgba(0,0,0,.95), 0 0 30px -8px rgba(242,106,27,.65), 0 0 0 1px #5A4636}
.shot:hover::after{box-shadow:inset 0 0 0 2px rgba(242,106,27,.6)}
.shot img{width:100%;height:100%;object-fit:cover}

/* lightbox (gallery.js builds it) */
.ph-lock{overflow:hidden}
.ph-lightbox[aria-hidden="true"]{display:none}
.ph-lightbox{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center}
.ph-lightbox__backdrop{position:absolute;inset:0;background:rgba(6,4,3,.92)}
.ph-lightbox__dialog{position:relative;max-width:92vw;max-height:92vh;display:flex;align-items:center;gap:.5rem}
.ph-lightbox__figure{margin:0;max-width:84vw;max-height:88vh;display:flex;flex-direction:column;align-items:center}
.ph-lightbox__img{max-width:84vw;max-height:80vh;border-radius:10px;box-shadow:0 30px 80px -20px #000}
.ph-lightbox__cap{margin-top:.7rem;color:var(--cream);font-size:.95rem;text-align:center;max-width:60ch}
.ph-lightbox__btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--ash-line);
  background:rgba(20,14,11,.85);color:var(--cream);cursor:pointer;display:grid;place-items:center}
.ph-lightbox__btn:hover{background:var(--chile);color:#fff;border-color:var(--chile)}
.ph-lightbox__btn svg{width:24px;height:24px}
.ph-lightbox__close{position:absolute;top:-62px;right:0}
.ph-lightbox__prev{position:absolute;left:-64px;top:50%;transform:translateY(-50%)}
.ph-lightbox__next{position:absolute;right:-64px;top:50%;transform:translateY(-50%)}
@media (max-width:720px){
  .ph-lightbox__prev{left:6px}
  .ph-lightbox__next{right:6px}
  .ph-lightbox__close{top:8px;right:8px}
}

/* =====================================================================
   AMBIANCE — the real room (festive & bright, but dark-framed here)
   ===================================================================== */
.ambiance{background:var(--smoke)}
/* head is now a centred full-width block above; this row pairs the pull-quote
   (left) with the room photos (right). */
.ambiance__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3.2rem);
  align-items:center;margin-top:clamp(2rem,4vw,3rem)}
.ambiance__copy{display:flex;flex-direction:column;justify-content:center;align-self:stretch}
.ambiance__quote{margin:0;font-family:var(--cond);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.55rem);
  line-height:1.35;color:var(--cream);border-left:3px solid var(--ember);padding-left:1.1rem}
.ambiance__cite{display:block;margin-top:.5rem;font-family:var(--sans);font-weight:600;
  font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ember)}
.ambiance__media{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.ambiance__shot{margin:0;border-radius:12px;overflow:hidden;background:#000;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.95), 0 0 0 1px var(--ash-line)}
.ambiance__shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.ambiance__shot--lg{grid-row:span 2;aspect-ratio:auto}
.ambiance__shot--lg img{aspect-ratio:3/5}

/* =====================================================================
   REVIEWS — carousel on a smoke band (reviews.js verbatim)
   ===================================================================== */
.reviews-band{background:var(--smoke-2);position:relative;overflow:hidden}
.reviews-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 80% at 85% -10%, rgba(242,106,27,.12), transparent 55%)}
.reviews{position:relative;margin-top:2.2rem}
.reviews__viewport{overflow:hidden}
.reviews__track{display:flex;gap:1.3rem;list-style:none;margin:0;padding:.3rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.reviews__track::-webkit-scrollbar{display:none}
/* reviews are "comal tickets" pulled off the wall: a black ticket card with a
   hot top-edge, a chile order-tab notch, equal height (align-items:stretch), the
   byline footed (margin-top:auto) so every name baseline-aligns. */
.reviews__track{align-items:stretch}
.review{
  flex:0 0 min(420px, 84%);scroll-snap-align:start;
  background:linear-gradient(180deg,#100B09,#0B0706);border:1px solid var(--ash-line);
  border-radius:var(--radius);
  padding:2.1rem 1.6rem 1.6rem;display:flex;flex-direction:column;gap:.75rem;
  box-shadow:0 22px 50px -32px rgba(0,0,0,.95);position:relative;overflow:hidden;
}
.review::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--heatline);opacity:.9}
/* the order-ticket tab in the corner */
.review__tab{position:absolute;top:0;right:1.3rem;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.62rem;color:#fff;background:var(--chile);
  padding:.28rem .6rem .26rem;border-radius:0 0 6px 6px;
  box-shadow:0 6px 14px -8px rgba(196,38,18,.9)}
.review__stars{margin:.2rem 0 0;color:var(--marigold);font-size:1.12rem;letter-spacing:.12em}
.review__text{margin:0;font-family:var(--cond);font-weight:500;font-size:1.2rem;
  line-height:1.42;color:var(--cream)}
.review__by{margin:auto 0 0;padding-top:.6rem;display:flex;flex-direction:column;gap:.1rem;
  border-top:1px dashed var(--ash-line)}
.review__author{font-family:var(--display);font-size:.92rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ember)}
.review__src{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.66rem;color:var(--muted)}
.reviews__controls{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:1.7rem}
.reviews__btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--ash-line);
  background:var(--plate);color:var(--cream);cursor:pointer;display:grid;place-items:center}
.reviews__btn:hover:not(:disabled){background:var(--chile);color:#fff;border-color:var(--chile)}
.reviews__btn:disabled{opacity:.35;cursor:default}
.reviews__btn svg{width:22px;height:22px}
.reviews__dots{display:flex;gap:.5rem}
.reviews__dot{width:11px;height:11px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:#4a382b;transition:background .15s ease, transform .15s ease}
.reviews__dot.is-active{background:var(--ember);transform:scale(1.18)}

/* =====================================================================
   VISIT — storefront + details
   ===================================================================== */
.visit{background:var(--char)}
.visit__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3rem);align-items:stretch}
.visit__photo{margin:0;border-radius:var(--radius);overflow:hidden;background:#000;
  box-shadow:0 24px 54px -30px rgba(0,0,0,.95), 0 0 0 1px var(--ash-line)}
.visit__photo img{width:100%;height:100%;object-fit:cover;min-height:280px}
.visit__card{background:var(--smoke);border:1px solid var(--ash-line);border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column}
/* centred head inside the card (kicker + title); the detail lines below stay a
   left-aligned list, which is how an info block should read. */
.visit__card .kicker{justify-content:center}
.visit__card .kicker::after{content:"";width:1.6rem;height:2px;border-radius:2px;background:var(--heatline)}
.visit__title{font-size:clamp(1.8rem,4.4vw,2.6rem);text-transform:uppercase;color:#fff;margin-top:.2rem;
  text-align:center}
.visit__lines{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:1.1rem}
.visit__line{display:flex;gap:.9rem;align-items:flex-start}
.visit__ico{flex:0 0 auto;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:var(--plate);border:1px solid var(--ash-line);color:var(--ember)}
.visit__ico svg{width:22px;height:22px}
.visit__line span:last-child{line-height:1.45}
.visit__line strong{color:#fff}
.visit__line a{color:var(--cream)}
.visit__line a:hover{color:var(--ember)}
.visit__cta{margin-top:auto;padding-top:1.7rem;display:flex;flex-wrap:wrap;gap:.8rem}

/* =====================================================================
   FOOTER — closing time at the comal: the griddle's last hot edge + a glowing
   wordmark + branded columns. The concept's closing frame, not a link dump.
   ===================================================================== */
.footer{background:linear-gradient(180deg,#0D0907,#070403);position:relative;overflow:hidden}
/* the final hot griddle edge with a live ember bead, matching the divider motif */
.footer__heat{position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--heatline);box-shadow:0 0 26px 0 rgba(242,106,27,.55)}
.footer__ember{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #FFE6A8 0%, var(--marigold) 28%, var(--ember) 58%, var(--chile) 100%);
  box-shadow:0 0 16px 3px rgba(242,106,27,.8), 0 0 30px 6px rgba(196,38,18,.45)}
/* a low ember glow rising from the very bottom — the banked coals */
.footer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;pointer-events:none;
  background:radial-gradient(110% 120% at 50% 135%, rgba(242,106,27,.16), transparent 62%)}
.footer__inner{position:relative;padding-block:clamp(2.6rem,5vw,3.6rem);display:grid;
  grid-template-columns:1.1fr 1.6fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.footer__brand{display:inline-flex;align-items:center;gap:.7rem}
.footer__logo{height:64px;width:auto;filter:drop-shadow(0 6px 20px rgba(242,106,27,.5)) drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.footer__tag{margin-top:1rem;color:var(--muted);max-width:36ch;font-size:.98rem;line-height:1.55}
.footer__rating{margin-top:1rem;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:.84rem;color:var(--cream)}
.footer__stars{color:var(--marigold);letter-spacing:.08em}
.footer__rating b{font-family:var(--display);color:#fff;font-size:1rem}
.footer__cols{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.footer__lbl{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:.78rem;color:var(--ember);margin:0 0 .6rem;display:inline-flex;align-items:center;gap:.5rem}
.footer__lbl::before{content:"";width:.85rem;height:2px;border-radius:2px;background:var(--heatline)}
.footer__col p{color:var(--cream);font-size:.96rem;line-height:1.6;margin:0 0 .4rem}
.footer__col a:not(.btn){color:var(--cream)}
.footer__col a:not(.btn):hover{color:var(--ember)}
.footer__link{background:none;border:0;padding:0;color:var(--cream);font:inherit;cursor:pointer;text-align:left}
.footer__link:hover{color:var(--ember)}
.footer__order{margin-top:.35rem}
.footer__legal{position:relative;border-top:1px solid var(--ash-line);padding:1.2rem 0 1.4rem;
  color:var(--muted);font-size:.82rem;letter-spacing:.02em}

/* =====================================================================
   ORDER SHEET (order.js verbatim) — dark, ember
   ===================================================================== */
.order-sheet[aria-hidden="true"]{pointer-events:none}
.order-sheet{position:fixed;inset:0;z-index:130;display:flex;align-items:flex-end;justify-content:center}
.order-sheet__scrim{position:absolute;inset:0;background:rgba(6,4,3,.78);opacity:0;transition:opacity .25s ease}
.order-sheet[data-open] .order-sheet__scrim{opacity:1}
.order-sheet__panel{position:relative;width:min(560px,100%);max-height:88vh;overflow:auto;
  background:var(--smoke);border:1px solid var(--ash-line);border-bottom:0;
  border-radius:18px 18px 0 0;padding:1.3rem 1.3rem 1.7rem;
  transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -30px 80px -30px rgba(0,0,0,.95)}
.order-sheet[data-open] .order-sheet__panel{transform:none}
.order-sheet__panel::before{content:"";position:absolute;top:0;left:1.4rem;right:1.4rem;height:3px;
  background:var(--heatline);border-radius:0 0 3px 3px}
.order-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.order-sheet__title{font-family:var(--display);text-transform:uppercase;font-size:1.4rem;color:#fff}
.order-sheet__close{width:44px;height:44px;border-radius:10px;border:1px solid var(--ash-line);
  background:var(--plate);color:var(--cream);cursor:pointer;display:grid;place-items:center}
.order-sheet__close:hover{background:var(--chile);color:#fff;border-color:var(--chile)}
.order-sheet__close svg{width:22px;height:22px}
.order-toggle{display:flex;gap:.4rem;background:var(--plate);border:1px solid var(--ash-line);
  border-radius:12px;padding:.32rem;margin-bottom:1rem}
.order-toggle__tab{flex:1;min-height:44px;border:0;border-radius:9px;background:transparent;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:.95rem;color:var(--muted);cursor:pointer}
.order-toggle__tab[aria-selected="true"]{background:var(--chile);color:#fff}
.order-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.order-row__link{display:flex;align-items:center;gap:.95rem;padding:.85rem .95rem;
  border-radius:12px;background:var(--plate);border:1px solid var(--ash-line);
  min-height:64px;transition:border-color .15s ease, transform .12s ease}
.order-row__link:hover{border-color:#4a382b;transform:translateX(2px)}
.order-row__icon{flex:0 0 auto;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  background:#fff;color:var(--brand, #fff)}
.order-row__icon svg{width:24px;height:24px}
.order-row__body{display:flex;flex-direction:column;gap:.15rem}
.order-row__name{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:1.02rem;color:#fff}
.order-row__meta{color:var(--muted);font-size:.86rem;line-height:1.3}
html.order-locked{overflow:hidden}


/* =====================================================================
   MENU PAGE  (menu-nav.js verbatim; standard menu-page markup contract)
   ===================================================================== */
.menu-hero{position:relative;isolation:isolate;background:var(--plate);overflow:hidden;
  padding-block:clamp(3rem,7vw,5rem)}
.menu-hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.menu-hero__scrim{position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg, rgba(8,5,4,.82) 0%, rgba(8,5,4,.7) 50%, rgba(8,5,4,.92) 100%)}
.menu-hero__heat{position:absolute;left:0;right:0;bottom:0;height:55%;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 130% at 50% 130%, rgba(242,106,27,.4), transparent 62%);mix-blend-mode:screen}
.menu-hero__inner{position:relative}
.menu-hero h1{font-size:clamp(2.4rem,6.5vw,4rem);text-transform:uppercase;color:#fff;
  text-shadow:0 3px 22px rgba(0,0,0,.6)}
.menu-hero__lede{margin-top:1rem;color:var(--cream);font-size:1.1rem;max-width:54ch;
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
.menu-hero__note{margin-top:1rem;color:var(--muted);font-size:.94rem;max-width:54ch}
.menu-hero__note a{color:var(--marigold)}

.menu-nav{position:sticky;top:68px;z-index:50;background:rgba(14,10,8,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--ash-line)}
.menu-nav::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--heatline);opacity:.7}
.menu-nav .wrap{display:flex;align-items:center;gap:.45rem;overflow-x:auto;scrollbar-width:none;
  padding-block:.6rem}
.menu-nav .wrap::-webkit-scrollbar{display:none}
.menu-nav a{flex:0 0 auto;font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:.86rem;color:var(--muted);
  padding:.5rem .85rem;border-radius:999px;border:1px solid var(--ash-line);
  min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;
  transition:color .15s, background .15s, border-color .15s}
.menu-nav a:hover{color:var(--cream);border-color:#4a382b}
.menu-nav a:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
.menu-nav a.is-active{color:#fff;background:var(--chile);border-color:var(--chile)}

/* prev/next arrows — menu-nav.js injects them as direct children of [data-menu-nav]
   FLANKING the scrolling .wrap (prev before, next after), and toggles
   .menu-nav--scrollable on the bar only when the chip strip overflows. The
   controller styles nothing: this contract fully styles the buttons AND lays them
   out. Make the bar a flex row so the wrap can flex between the two arrows; the
   arrows sit on the LEFT (--prev, order:-1) and RIGHT (--next, order:1) edges,
   not stacked. Hidden until --scrollable. ≥44px tap target, focus-visible ring. */
.menu-nav__arrow{flex:0 0 auto;width:44px;height:44px;display:none;align-self:center;
  align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--ash-line);
  background:var(--plate);color:var(--cream);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.menu-nav--scrollable{display:flex;align-items:center;padding-inline:var(--edge)}
/* neutralise the global .wrap width/centring so the strip flexes between the
   arrows and fills the row (the bar itself now carries the --edge gutter). */
.menu-nav--scrollable .wrap{flex:1 1 auto;min-width:0;width:auto;margin-inline:0;order:0}
.menu-nav--scrollable .menu-nav__arrow{display:inline-flex}
.menu-nav__arrow--prev{order:-1;margin-right:.35rem}   /* flanks the .wrap on the LEFT  */
.menu-nav__arrow--next{order:1;margin-left:.35rem}     /* …and on the RIGHT */
.menu-nav__arrow:hover:not(:disabled){background:var(--chile);color:#fff;border-color:var(--chile)}
.menu-nav__arrow:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
.menu-nav__arrow:disabled{opacity:.3;cursor:default}
.menu-nav__arrow svg{width:20px;height:20px}
/* fade the strip edges only when it actually pages, so chips don't look clipped */
.menu-nav--scrollable .wrap{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)}

.menu-main{padding-block:clamp(2.5rem,5vw,4rem);background:var(--char)}
.menu-section{padding-top:.5rem;margin-bottom:2.8rem;
  scroll-margin-top:calc(68px + var(--menu-nav-h, 58px) + 14px)}
.menu-section__head{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.1rem;
  padding-bottom:.7rem;border-bottom:2px solid transparent;
  border-image:var(--heatline) 1}
.menu-section__title{font-family:var(--display);font-size:clamp(1.5rem,3.6vw,2.1rem);
  text-transform:uppercase;color:#fff}
.menu-section__es{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.78rem;color:var(--ember)}
.menu-list{list-style:none;margin:0;padding:0}
.menu-item{display:flex;align-items:baseline;gap:.5rem;padding:.7rem 0;border-bottom:1px dashed var(--ash-line)}
.menu-item:last-child{border-bottom:0}
.menu-item__col{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.menu-item__name{font-family:var(--cond);font-weight:600;font-size:1.12rem;text-transform:uppercase;
  letter-spacing:.02em;color:var(--cream)}
.menu-item__desc{color:var(--muted);font-size:.92rem;line-height:1.4}
.menu-item__dots{flex:1;border-bottom:1px dotted #50402f;transform:translateY(-4px);min-width:1.5rem}
.menu-item__price{font-family:var(--display);font-size:1.05rem;color:var(--marigold);white-space:nowrap}
.menu-foot{margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--ash-line);
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;text-align:center}
.menu-foot__line{color:var(--muted);font-size:1.05rem;max-width:46ch}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:980px){
  .teaser__inner{grid-template-columns:1fr}
  .ambiance__inner{grid-template-columns:1fr}
  .visit__inner{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr}
}
@media (max-width:860px){
  .sig-grid{grid-template-columns:repeat(2,1fr);gap:1.1rem}
}
@media (max-width:620px){
  .footer__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  /* the plancha mosaic: shorter rows + tighter tiles so the band stays compact;
     still TWO rows scrolling (one continuous band, never a collapsed grid).
     gap stays 0 (seam fix); the cell padding gives the tighter gutter. */
  .mmos{grid-template-rows:repeat(2, 116px);grid-auto-columns:128px;gap:0}
  .mmos__cell{padding:.28rem}
  .marquee{margin-top:1.8rem}
}
@media (max-width:480px){
  body{font-size:16px}
  .hero__rating{gap:.5rem;padding:.55rem .75rem}
  .hero__rating small{width:100%}
  .char-card__body{padding:1rem 1rem 1.2rem}
  .footer__cols{grid-template-columns:1fr}
  /* sig-grid stays 2-up (never 1 col) — standing operator rule */
}
@media (max-width:360px){
  .sig-grid{gap:.85rem}
  .ambiance__media{gap:.55rem}
  .mmos{grid-template-rows:repeat(2, 104px);grid-auto-columns:116px}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .marquee--animated .marquee__track{animation:none}
}