/* ===========================================================================
   Homepage: tequilamama.com layout, Cantina brand.
   ---------------------------------------------------------------------------
   Geometry, type ramp and motion are the values read off the live Taqueria DOM
   (see clients/_reference/tequilamama-taqueria/web-react/design-tokens.json):
   1180px container, 24px gutter, 8px buttons / 12px media / 16px cards, and a
   700ms translateY(28px) reveal staggered in 100ms steps.

   Colour comes from the theme's own --tmt-* tokens, so this file carries no
   brand hex of its own and follows tokens.css if the palette ever moves.

   The reference is React and resolves cards-per-view in JS. Here the track is
   CSS (--per drives the item width) and JS only sets --per and the offset, so
   the section still lays out correctly before the script runs.
   ---------------------------------------------------------------------------
   BAND RHYTHM (Santi, 2026-09-08): every band contrasts with the one above it,
   so no two neighbours share a ground. Top to bottom:

     1 hero      storefront photo
     2 menu      WHITE + the TMC monogram pattern   <- Mama's table, first band
     3 specials  yellow + sunburst                     under the hero
     4 events    teal
     5 catering  white
     6 reviews   no ground of its own - inherits --surface-page (renders only
                 when real reviews have been entered in the Customizer)
     7 cta       yellow + pattern
       footer    cream-deep

   Three bands were cut on 2026-09-08 and are NOT in that list any more: the
   teal welcome ("La casa is loud tonight"), ABOUT US (ink) and the Instagram
   photo strip (ink) that closed the page. With them gone the page ends yellow
   into the cream footer.

   Bands may repeat a ground but never back to back - and note that reviews
   sits between catering and the CTA only when reviews exist, so BOTH orders
   have to work; it carries no background, so today it would read as a second
   white band straight after the white catering one. Give it a ground before
   turning reviews on. The hero-to-menu step is a PHOTOGRAPH
   against a patterned white, not one flat ground against another: that is the
   contrast there, and it is the one join worth re-checking if the hero art
   ever changes. Change any ground and check its neighbours before deploying.
   ======================================================================== */

:root {
  --tq-wrap: 1180px;
  --tq-gutter: 24px;
  --tq-r-btn: 8px;
  --tq-r-media: 12px;
  --tq-r-card: 16px;
  --tq-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tq-display: 'Archivo Narrow', 'Arial Narrow', Impact, sans-serif;
  --tq-accent: 'Raleway', var(--font-inria), sans-serif;
}

.tq-wrap { width: 100%; max-width: var(--tq-wrap); margin: 0 auto; padding: 0 var(--tq-gutter); }
.tq-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- type ramp ---------------------------------------------------------- */
.tq-h2 {
  font-family: var(--tq-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 42px); line-height: 1.03; letter-spacing: 0.01em;
  color: var(--tmt-white); margin: 0; text-wrap: balance;
}
.tq-h2--red { color: var(--tmt-red); }
.tq-accent {
  font-family: var(--tq-accent); font-weight: 700; text-transform: uppercase;
  font-size: 18px; line-height: 1.25; letter-spacing: 0.02em; margin: 0;
}
.tq-accent--lg { font-size: clamp(20px, 2.2vw, 26px); }
.tq-accent--yellow { color: var(--tmt-yellow); }
.tq-accent--teal   { color: var(--tmt-teal-deep); }
.tq-accent--ink    { color: var(--tmt-ink); }
.tq-body {
  font-family: var(--font-inria); font-size: 16px; line-height: 26px;
  color: var(--tmt-charcoal); margin: 0; max-width: 64ch; text-wrap: pretty;
}
.tq-body--light { color: var(--tmt-white); }
.tq-body--ink   { color: var(--tmt-ink); }

/* ---- the one button ----------------------------------------------------- */
.tq-btn {
  display: inline-block; font-family: var(--font-inria); font-weight: 600;
  font-size: 18px; line-height: 1.2; padding: 12px 32px; border-radius: var(--tq-r-btn);
  text-decoration: none; border: 2px solid transparent;
  transition: background 200ms var(--tq-ease), transform 200ms var(--tq-ease), color 200ms;
}
.tq-btn--primary { background: var(--tmt-red); color: var(--tmt-white); }
.tq-btn--primary:hover, .tq-btn--primary:focus-visible { background: var(--tmt-red-deep); transform: scale(1.05); }
.tq-btn--ghost { background: transparent; color: var(--tmt-white); border-color: var(--tmt-white); }
.tq-btn--ghost:hover, .tq-btn--ghost:focus-visible { background: var(--tmt-white); color: var(--tmt-ink); transform: scale(1.05); }
.tq-btn:active { transform: scale(0.98); }

/* ---- ornaments and badges ---------------------------------------------- */
.tq-badge { width: 56px; height: auto; display: block; }
.tq-badge--lg { width: 90px; }
.tq-rule { width: min(320px, 80%); height: auto; display: block; opacity: 0.9; }
.tq-orn  { width: min(180px, 60%); height: auto; display: block; }
.tq-orn--wide { width: min(320px, 74%); }

/* ---- shared section heading -------------------------------------------- */
.tq-sec-head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; margin-bottom: 46px;
}
.tq-sec-head .tq-body { text-align: center; }
.tq-sec-foot { display: flex; justify-content: center; margin-top: 38px; }

/* ---- scroll reveal ------------------------------------------------------ */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 700ms var(--tq-ease), transform 700ms var(--tq-ease);
}
[data-reveal].tq-in { opacity: 1; transform: none; }

/* =========================================================== 1. hero ==== */
.tq-hero {
  position: relative; width: 100%; min-height: 600px; height: 100dvh; max-height: 900px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--tmt-ink);
}
.tq-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tq-hero__scrim { position: absolute; inset: 0; }
.tq-hero__inner {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: 30px; padding: 0 20px;
}
/* Cantina's lockup is red script: it needs the halo the white Taqueria one did not. */
.tq-hero__logo {
  width: 240px; height: auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55)) drop-shadow(0 18px 24px rgba(0,0,0,0.4));
}
.tq-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ====================================================== 2. who we are === */
.tq-about {
  position: relative; padding: 80px 0; overflow: hidden;
  background: var(--tmt-ink) url('taq/fondo_tequila.webp') center / cover;
}
.tq-about__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.tq-about__head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; max-width: 700px;
}
.tq-about__head .tq-body { text-align: center; }
.tq-stats {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 18px 40px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 640px;
  border-top: 1px solid rgba(255,255,255,0.22); padding-top: 22px;
}
.tq-stats li { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.tq-stats__n {
  font-family: var(--tq-display); font-weight: 700; text-transform: uppercase;
  font-size: 30px; line-height: 1; color: var(--tmt-yellow);
}
.tq-stats__l {
  font-family: var(--font-inria); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.78);
}
.tq-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.tq-mosaic__cell { overflow: hidden; border-radius: var(--tq-r-media); aspect-ratio: 1 / 1; }
.tq-mosaic__cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 500ms var(--tq-ease);
}
.tq-mosaic__cell:hover img { transform: scale(1.05); }

/* ======================================================= 3. locations === */
.tq-locs { position: relative; padding: 80px 0; background: var(--tmt-white); }
.tq-loc {
  position: relative; display: block; overflow: hidden; border-radius: var(--tq-r-media);
  aspect-ratio: 4 / 5; background: var(--tmt-ink); text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}
.tq-loc img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--tq-ease);
}
.tq-loc:hover img, .tq-loc:focus-visible img { transform: scale(1.05); }
.tq-loc__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0.2) 45%, rgba(0,0,0,0.18));
}
.tq-loc__wash {
  position: absolute; inset: 0; background: var(--tmt-teal-deep); opacity: 0;
  transition: opacity 300ms var(--tq-ease);
}
.tq-loc:hover .tq-loc__wash, .tq-loc:focus-visible .tq-loc__wash { opacity: 0.3; }
.tq-loc__chip {
  position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;
  padding: 8px 20px; border: 2px solid var(--tmt-white); border-radius: var(--tq-r-btn);
  color: var(--tmt-white); font-family: var(--font-inria); font-weight: 600; font-size: 15px;
  opacity: 0; transition: opacity 300ms var(--tq-ease);
}
.tq-loc:hover .tq-loc__chip, .tq-loc:focus-visible .tq-loc__chip { opacity: 1; }
.tq-loc__meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px;
  display: flex; flex-direction: column; gap: 4px; text-align: center; color: var(--tmt-white);
}
.tq-loc__name { font-family: var(--tq-display); font-weight: 700; text-transform: uppercase; font-size: 22px; }
.tq-loc__addr { font-family: var(--font-inria); font-size: 14px; line-height: 20px; }

/* ============================================================ 4. menu === */
.tq-menu { position: relative; padding: 80px 0; background: var(--tmt-cream-deep); }
.tq-dish {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: var(--tq-r-card); background: var(--tmt-yellow);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1); transition: box-shadow 300ms var(--tq-ease);
}
.tq-dish:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.16); }
.tq-dish__well {
  position: relative; background: var(--tmt-yellow-deep);
  padding: 30px 16px 12px; display: flex; justify-content: center;
}
.tq-dish__badge { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 32px; height: auto; }
.tq-dish__img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; transition: transform 500ms var(--tq-ease); }
.tq-dish:hover .tq-dish__img { transform: scale(1.05); }
.tq-dish__img--none { background: rgba(0,0,0,0.06); border-radius: var(--tq-r-media); }
.tq-dish__body { padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tq-dish__name {
  font-family: var(--tq-display); font-weight: 700; text-transform: uppercase;
  font-size: 22px; line-height: 1.2; color: var(--tmt-red); margin: 0;
}
.tq-dish__desc { font-family: var(--font-inria); font-size: 14px; line-height: 20px; color: var(--tmt-ink); margin: 0; }

/* ======================================================== 5. specials === */
.tq-specials {
  position: relative; padding: 80px 0 130px;
  background: var(--tmt-yellow) url('taq/fondo_amarillento.webp') center / cover;
}
.tq-spec {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: var(--tq-r-card); border: 1px solid var(--tmt-white);
  background: var(--tmt-teal-deep); box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}
.tq-spec__media { position: relative; padding: 12px; }
.tq-spec__frame { overflow: hidden; border-radius: var(--tq-r-media); aspect-ratio: 7 / 5; }
.tq-spec__frame img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; display: block; }
.tq-spec__badge {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 48px; height: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.tq-spec__body { padding: 0 20px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tq-spec__title {
  font-family: var(--tq-display); font-weight: 700; text-transform: uppercase;
  font-size: 22px; color: var(--tmt-white); margin: 0;
}
.tq-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tq-tag {
  font-family: var(--font-inria); font-size: 13px; font-weight: 500; line-height: 1;
  padding: 6px 12px; border-radius: var(--tq-r-btn);
  background: var(--tmt-white); color: var(--tmt-teal-ink);
}
.tq-tag--day { background: var(--tmt-yellow); color: var(--tmt-ink); font-weight: 700; }
.tq-spec__text { font-family: var(--font-inria); font-size: 14px; line-height: 20px; color: var(--tmt-white); margin: 0; }
.tq-spec__price {
  margin: auto 0 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.28);
  font-family: var(--tq-display); font-weight: 700; text-transform: uppercase;
  font-size: 24px; color: var(--tmt-yellow);
}
.tq-wave { position: absolute; left: 0; bottom: -2px; width: 100%; height: 80px; display: block; z-index: 1; pointer-events: none; }

/* ======================================================== 6. catering === */
.tq-cater { position: relative; padding: 80px 0; background: var(--tmt-white); }
.tq-pkgs { display: grid; gap: 22px; grid-template-columns: 1fr; }
.tq-pkg {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--tq-r-card); background: var(--tmt-white);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}
.tq-pkg__media { aspect-ratio: 16 / 9; overflow: hidden; }
.tq-pkg__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--tq-ease); }
.tq-pkg:hover .tq-pkg__media img { transform: scale(1.05); }
.tq-pkg__body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tq-pkg__label {
  font-family: var(--tq-accent); font-weight: 700; text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.14em; color: var(--tmt-red); margin: 0; min-height: 1em;
}
.tq-pkg__title {
  font-family: var(--tq-display); font-weight: 700; text-transform: uppercase;
  font-size: 26px; line-height: 1.05; color: var(--tmt-ink); margin: 0;
}
.tq-pkg__text { font-family: var(--font-inria); font-size: 15px; line-height: 24px; color: var(--tmt-charcoal); margin: 0; }
.tq-pkg__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tq-pkg__list li { font-family: var(--font-inria); font-size: 14px; line-height: 20px; color: var(--tmt-charcoal); }
.tq-pkg__from {
  margin: auto 0 0; padding-top: 14px; border-top: 1px dashed var(--tmt-sand);
  font-family: var(--font-inria); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 15px; color: var(--tmt-ink);
}
.tq-pkg__from span { color: var(--tmt-stone); font-weight: 400; letter-spacing: 0.04em; }
/* The real terms, under the bars. Deliberately quiet: it is fine print, not a
   selling point -- but it has to be on the page, because the numbers it carries
   (30-guest minimum, 20% service fee) are the ones the invented card copy used
   to contradict. */
.tq-cater__terms {
  margin: 26px 0 0; font-family: var(--font-inria); font-size: 13.5px; line-height: 22px;
  color: var(--tmt-stone); text-align: center; max-width: 62ch;
  margin-inline: auto; text-wrap: pretty;
}

/* ==================================== 7. instagram: REMOVED 2026-09-08 === */
/* The photo strip that scrolled above the footer is gone at Santi's request,
   and `@keyframes tq-marquee` with it - nothing else used that animation. The
   images stay in assets/taq/ and tm_taq_instagram() stays in inc/taq-data.php,
   both unused. */

/* ============================================================= rails ==== */
/* --per is the cards-per-view; JS sets it per breakpoint and shifts the track
   by one card per step, which is what gives 8 dishes at 4-up five stops. */
.tq-rail { position: relative; --per: 1; --step: 0; }
.tq-rail__track {
  display: flex; align-items: stretch;
  transform: translateX(calc(var(--step) * -100% / var(--per)));
  transition: transform 500ms ease-in-out;
}
.tq-rail__item { flex: 0 0 calc(100% / var(--per)); padding: 0 10px; display: flex; }
.tq-rail__item > * { width: 100%; }
.tq-rail { overflow: hidden; padding-bottom: 4px; }
.tq-rail-ctl { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 0 6px; }
.tq-arrow {
  flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--tmt-red); color: var(--tmt-yellow); display: grid; place-items: center;
  transition: background 200ms var(--tq-ease), transform 200ms var(--tq-ease);
}
.tq-arrow:hover { background: var(--tmt-red-deep); }
.tq-arrow:active { transform: scale(0.94); }
.tq-arrow[disabled] { opacity: 0.35; cursor: default; }
.tq-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.tq-dots button {
  width: 12px; height: 12px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in oklab, var(--tmt-red) 40%, transparent);
  transition: width 200ms var(--tq-ease), background 200ms var(--tq-ease);
}
.tq-dots button[aria-current="true"] { width: 26px; background: var(--tmt-red); }

/* No JS: the track becomes a horizontal scroller rather than a dead frame. */
.no-js .tq-rail__track { overflow-x: auto; scroll-snap-type: x mandatory; }
.no-js .tq-rail__item { scroll-snap-align: start; }
.no-js .tq-rail-ctl { display: none; }

/* ========================================================= breakpoints == */
@media (min-width: 640px) {
  .tq-hero__logo { width: 300px; }
}
@media (min-width: 768px) {
  .tq-about, .tq-locs, .tq-menu, .tq-cater { padding: 92px 0; }
  .tq-specials { padding: 92px 0 140px; }
  .tq-mosaic {
    grid-template-columns: 1fr 1fr 1.35fr; grid-template-rows: 240px 240px;
  }
  .tq-mosaic__cell { aspect-ratio: auto; }
  .tq-mosaic__cell:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
  .tq-mosaic__cell:nth-child(2) { grid-area: 1 / 3 / 3 / 4; }
  .tq-mosaic__cell:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
  .tq-mosaic__cell:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
  /* Two up here, four across at 1024 -- the programme is four bars, and the
     three-column rule this replaced was written when the band showed three
     invented packages. auto-fit is deliberately NOT used: it would reflow to
     3 + 1 and orphan a card. */
  .tq-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tq-spec__text, .tq-dish__desc, .tq-loc__addr { font-size: 16px; }
}
@media (min-width: 1024px) {
  .tq-about, .tq-locs, .tq-cater { padding: 108px 0; }
  .tq-specials { padding: 108px 0 150px; }
  .tq-hero__logo { width: 360px; }
  .tq-locs { background: var(--tmt-white) url('taq/fondo_tequilamama.webp') center / cover fixed; }
  /* Ground goes white with the plate masonry; the pattern stays fixed so it
     sits still while the cards scroll past it. */
  .tq-menu { background: var(--tmt-white) url('taq/fondo_tequilamama.webp') center / cover fixed; }
}

/* ============================================================== a11y ==== */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .tq-rail__track { transition: none; }
  .tq-btn:hover, .tq-loc:hover img, .tq-dish:hover .tq-dish__img,
  .tq-pkg:hover .tq-pkg__media img, .tq-mosaic__cell:hover img { transform: none; }
}

/* =========================================================== 8. events === */
.tq-events { position: relative; padding: 80px 0; background: var(--tmt-teal-deep); }
.tq-ev {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: var(--tq-r-card); background: var(--tmt-white);
  box-shadow: 0 10px 26px rgba(0,0,0,0.2);
}
.tq-ev__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tq-ev__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--tq-ease); }
.tq-ev:hover .tq-ev__media img { transform: scale(1.05); }
.tq-ev__date {
  position: absolute; top: 14px; left: 14px; margin: 0; display: grid; justify-items: center;
  gap: 1px; padding: 8px 12px; border-radius: var(--tq-r-btn);
  background: var(--tmt-red); color: var(--tmt-white);
}
.tq-ev__mon, .tq-ev__dow { font-family: var(--font-inria); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.tq-ev__day { font-family: var(--tq-display); font-weight: 700; font-size: 26px; line-height: 1; }
.tq-ev__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tq-ev__meta {
  font-family: var(--tq-accent); font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.14em; color: var(--tmt-teal-deep); margin: 0;
}
.tq-ev__title {
  font-family: var(--tq-display); font-weight: 700; text-transform: uppercase;
  font-size: 24px; line-height: 1.05; color: var(--tmt-ink); margin: 0;
}
.tq-ev__text { font-family: var(--font-inria); font-size: 15px; line-height: 22px; color: var(--tmt-charcoal); margin: 0; }
.tq-ev__foot {
  margin: auto 0 0; padding-top: 10px; font-family: var(--font-inria);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tmt-stone);
}
@media (min-width: 768px) { .tq-events { padding: 92px 0; } .tq-ev__text { font-size: 16px; } }
@media (min-width: 1024px) { .tq-events { padding: 108px 0; } }

/* ============================================================= chrome === */
.tq-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200; padding: 12px 18px;
  background: var(--tmt-ink); color: var(--tmt-white); font-family: var(--font-inria);
}
.tq-skip:focus { left: 0; }

/* At the top of the homepage the bar sits over the hero, so it is glass and the
   photo reads through it. Past 40px of scroll home-taq.js adds tq-head--small,
   which condenses the bar AND turns it solid white: that is the scrolled state.
   Interior pages pad main by 80px, so there the translucency just shows ground. */
.tq-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 80px;
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: none;
  transition: height 300ms var(--tq-ease), background-color 300ms var(--tq-ease),
              box-shadow 300ms var(--tq-ease);
}
/* Without blur support (older Firefox, some in-app webviews) 55% white over a
   dark hero photo would not hold the grey nav, so lean opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tq-head { background: rgba(255,255,255,0.88); }
}
/* Through the glass the backdrop is mid-grey, where the design's stone nav
   measures ~2.4:1 — under the 4.5:1 floor. Ink clears 7:1 on it. The scrolled
   bar is solid white, so there the lighter stone stays as designed. */
.tq-head:not(.tq-head--small) .tq-head__nav > a,
.tq-head:not(.tq-head--small) .tq-more__btn { color: var(--tmt-ink); }
.tq-head--small {
  height: 64px;
  background: var(--tmt-white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.tq-head__bar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.tq-head__logo { display: flex; align-items: center; flex: 0 0 auto; }
.tq-head__logo img { max-height: 48px; width: auto; height: auto; display: block; }
.tq-head--small .tq-head__logo img { max-height: 40px; }
.tq-head__nav { display: none; }
.tq-head__end { display: flex; align-items: center; gap: 12px; }
.tq-btn--sm { font-size: 15px; padding: 9px 20px; }

.tq-burger {
  width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  display: grid; place-content: center; gap: 5px; padding: 0;
}
.tq-burger span { display: block; width: 22px; height: 2px; background: var(--tmt-ink); border-radius: 2px; }

.tq-more { position: relative; }
.tq-more__btn {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent;
  cursor: pointer; font-family: var(--font-inria); font-size: 16px; color: var(--tmt-stone);
  padding: 6px 0; transition: color 200ms;
}
.tq-more__btn:hover, .tq-more__btn[aria-expanded="true"] { color: var(--tmt-red); }
.tq-more__panel {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px; z-index: 5;
  display: flex; flex-direction: column; padding: 10px;
  background: var(--tmt-white); border-radius: var(--tq-r-media);
  box-shadow: 0 14px 34px rgba(0,0,0,0.16);
}
.tq-more__panel a {
  padding: 9px 12px; border-radius: var(--tq-r-btn); text-decoration: none;
  font-family: var(--font-inria); font-size: 15px; color: var(--tmt-charcoal);
}
.tq-more__panel a:hover { background: var(--tmt-cream-deep); color: var(--tmt-red); }

.tq-drawer {
  position: fixed; inset: 80px 0 0; z-index: 55; overflow-y: auto;
  background: var(--tmt-cream-deep); padding: 22px var(--tq-gutter) 40px;
}
.tq-drawer__nav { display: flex; flex-direction: column; gap: 2px; }
.tq-drawer__nav a {
  padding: 14px 6px; text-decoration: none; font-family: var(--tq-display); font-weight: 700;
  text-transform: uppercase; font-size: 22px; color: var(--tmt-ink);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.tq-drawer__nav a:hover { color: var(--tmt-red); }
.tq-drawer__cta { margin-top: 22px; text-align: center; border-bottom: 0; color: var(--tmt-white); }
body.tq-locked { overflow: hidden; }

/* Interior pages have no full-bleed hero to sit under the fixed bar. */
body:not(.home) .tq-main-pad { padding-top: 80px; }

.tq-foot { background: var(--tmt-cream-deep); }
/* FIVE children live in this grid: brand, Eat & drink, More, Opening hours,
   Find us. It was laid out in FOUR columns, so Find us wrapped to a second row
   under the brand and left a 300px hole across the middle of the footer - the
   reason it was restructured 2026-09-08. One column on phones, 2 + a full-width
   brand on tablets, all five across from 1024px. Add a sixth column and this
   breaks again: check the count when you add one. */
.tq-foot__grid { display: grid; gap: 38px; padding: 56px var(--tq-gutter); grid-template-columns: 1fr; }
.tq-foot__brand img { width: 170px; height: auto; display: block; }
.tq-foot__brand p {
  font-family: var(--font-inria); font-size: 15px; line-height: 24px;
  color: var(--tmt-charcoal); margin: 16px 0; max-width: 34ch;
}
.tq-foot__social { display: flex; gap: 10px; }
.tq-foot__social a {
  width: 38px; height: 38px; border-radius: var(--tq-r-btn); display: grid; place-items: center;
  background: var(--tmt-white); border: 1px solid rgba(0,0,0,0.1); color: var(--tmt-teal-deep);
  transition: color 200ms, border-color 200ms;
}
.tq-foot__social a:hover { color: var(--tmt-red); border-color: color-mix(in oklab, var(--tmt-red) 40%, transparent); }
.tq-foot__h {
  font-family: var(--font-inria); font-weight: 700; text-transform: uppercase;
  font-size: 13px; letter-spacing: 0.12em; color: var(--tmt-teal-ink); margin: 0;
}
.tq-foot__rule { display: block; width: 24px; height: 2px; background: var(--tmt-teal-deep); margin: 8px 0 16px; }
.tq-foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tq-foot__col a {
  font-family: var(--font-inria); font-size: 14px; letter-spacing: 0.04em;
  color: var(--tmt-teal-deep); text-decoration: none;
}
.tq-foot__col a:hover { color: var(--tmt-red); }
.tq-foot__open {
  font-family: var(--font-inria); font-weight: 700; font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tmt-teal-deep); margin: 0 0 10px;
}
/* No fixed cap: in a five-across footer this column is ~200px and a 260px
   table overflowed it. "Wednesday" + "11am-10pm" at 13.5px fits ~185px. */
.tq-foot__hours { width: 100%; max-width: 100%; border-collapse: collapse; }
.tq-foot__hours th, .tq-foot__hours td {
  font-family: var(--font-inria); font-size: 13.5px; font-weight: 400; text-align: left;
  padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,0.08); color: var(--tmt-charcoal);
}
.tq-foot__hours td { text-align: right; color: var(--tmt-red-ink); }
.tq-foot__addr, .tq-foot__col p {
  font-family: var(--font-inria); font-size: 15px; line-height: 24px; color: var(--tmt-charcoal); margin: 0 0 8px;
}
.tq-foot__phone, .tq-foot__dir { color: var(--tmt-red-ink); text-decoration: none; }
.tq-foot__phone:hover, .tq-foot__dir:hover { text-decoration: underline; }
.tq-foot__sub { border-top: 1px solid rgba(0,0,0,0.1); padding: 26px 0; }
.tq-foot__legal { border-top: 1px solid rgba(0,0,0,0.1); padding: 16px 0 26px; }
.tq-foot__legal .tq-wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.tq-foot__legal span {
  font-family: var(--font-inria); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tmt-stone);
}

@media (min-width: 768px) {
  .tq-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  /* The brand is a masthead here rather than a fifth of a row, which keeps the
     four info blocks on a clean 2x2 instead of 2 + 2 + 1 orphan. */
  .tq-foot__brand { grid-column: 1 / -1; }
  .tq-foot__brand p { max-width: 52ch; }
  /* Half of a 900px footer is ~330px, and the day/time pair stretched to fill
     it reads as two unrelated columns. Capped here only - the desktop track is
     narrower than this anyway. */
  .tq-foot__hours { max-width: 300px; }
}
@media (min-width: 1024px) {
  .tq-head__nav { display: flex; align-items: center; gap: 26px; }
  .tq-head__nav > a {
    position: relative; font-family: var(--font-inria); font-size: 16px;
    color: var(--tmt-stone); text-decoration: none; padding: 6px 0; transition: color 200ms;
  }
  .tq-head__nav > a::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
    background: var(--tmt-red); transition: width 200ms var(--tq-ease);
  }
  .tq-head__nav > a:hover { color: var(--tmt-red); }
  .tq-head__nav > a:hover::after { width: 100%; }
  .tq-burger { display: none; }
  /* All five across. The brand takes the widest track (the logo is 170px and
     its line wants ~30 characters), Find us and Opening hours a little more
     than the two link menus, which are one word per row. */
  .tq-foot__grid {
    grid-template-columns: 1.5fr 0.9fr 0.9fr 1.05fr 1.15fr;
    column-gap: 30px; row-gap: 0;
  }
  .tq-foot__brand { grid-column: auto; }
  .tq-foot__brand p { max-width: 30ch; margin-bottom: 0; }
}

/* The `hidden` attribute is a UA display:none, which any author display rule
   outranks - the More panel and the drawer both set one, so both need this or
   they render open on load. */
.tq-more__panel[hidden], .tq-drawer[hidden] { display: none !important; }

/* The newsletter block ships its own <style> from inc/forms.php, styled for the
   previous build: slab display face, 3px ink borders, an offset yellow button.
   It is reused verbatim on the interior pages, so rather than fork the markup
   these override it inside the new footer only. */
.tq-foot__sub .tm-subscribe { border-top: 0; background: transparent; margin: 0; }
.tq-foot__sub .tm-sub-inner { padding: 0; gap: 20px 40px; }
.tq-foot__sub .tm-sub-copy h2 {
  font-family: var(--tq-display); font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px); letter-spacing: 0.01em; color: var(--tmt-ink);
}
.tq-foot__sub .tm-sub-form input[type="email"] {
  border: 1px solid rgba(0,0,0,0.18); border-radius: var(--tq-r-btn);
  box-shadow: none; background: var(--tmt-white); padding: 12px 16px;
}
.tq-foot__sub .tm-sub-form input[type="email"]:focus-visible {
  outline: 2px solid var(--tmt-teal-deep); outline-offset: 1px; border-color: var(--tmt-teal-deep);
}
.tq-foot__sub .tm-sub-form button {
  font-family: var(--font-inria); font-weight: 600; font-size: 15px; letter-spacing: 0.02em;
  text-transform: none; padding: 12px 26px; border: 0; border-radius: var(--tq-r-btn);
  background: var(--tmt-red); color: var(--tmt-white); box-shadow: none;
  transition: background 200ms var(--tq-ease), transform 200ms var(--tq-ease);
}
.tq-foot__sub .tm-sub-form button:hover { background: var(--tmt-red-deep); transform: scale(1.04); }

/* <picture> wraps the hero image, so the positioning rules have to reach it. */
.tq-hero > picture { position: absolute; inset: 0; display: block; }

/* Dots and arrows: the reference draws 12px dots and 40px arrows, which are
   fine with a mouse and too small on a phone. The visible pill stays exactly
   the same size; the button around it grows to a 44px touch target. */
.tq-dots button {
  width: 26px; height: 44px; background: transparent; position: relative;
  display: grid; place-items: center;
}
.tq-dots button::before {
  content: ''; display: block; width: 12px; height: 12px; border-radius: 999px;
  background: color-mix(in oklab, var(--tmt-red) 40%, transparent);
  transition: width 200ms var(--tq-ease), background 200ms var(--tq-ease);
}
.tq-dots button[aria-current="true"] { width: 34px; background: transparent; }
.tq-dots button[aria-current="true"]::before { width: 26px; background: var(--tmt-red); }
.tq-arrow { width: 44px; height: 44px; }

/* ---- AA contrast on the Cantina ramp -----------------------------------
   The reference's red is #d01e25; Cantina's is a brighter #F61E25, and that
   brightness costs contrast in the two places the reference relied on it:

     white on red button     4.09  (needs 4.5)
     red title on yellow     2.66  (needs 3.0)

   --tmt-red-deep (#C8151B) is the next step down the same ramp and clears
   both (5.87 and 3.81) while still reading as the brand red. Measured, not
   guessed - the bright red stays everywhere it is a large display colour. */
.tq-btn--primary { background: var(--tmt-red-deep); }
.tq-btn--primary:hover, .tq-btn--primary:focus-visible { background: var(--tmt-red-ink); }
.tq-dish__name { color: var(--tmt-red-deep); }
.tq-arrow { background: var(--tmt-red-deep); }
.tq-arrow:hover { background: var(--tmt-red-ink); }
.tq-ev__date { background: var(--tmt-red-deep); }

/* Remaining AA gaps, each moved to the measured passing step of the same token
   ramp rather than to a new colour:
     specials heading on yellow   2.66 -> 3.81  (red-deep)
     events accent on teal        3.11 -> 4.79  (white; no yellow step clears
                                   4.5 on this teal, so the accent goes white
                                   and the yellow stays where it does pass)
     footer links on cream        4.14 -> 6.82  (teal-ink)
     package labels on white      4.09 -> 5.87  (red-deep)
     subscribe button             4.09 -> 5.87  (red-deep) */
.tq-specials .tq-h2--red { color: var(--tmt-red-deep); }
.tq-events .tq-accent--yellow { color: var(--tmt-white); }
.tq-pkg__label { color: var(--tmt-red-deep); }
.tq-foot__col a, .tq-foot__phone, .tq-foot__dir, .tq-foot__open { color: var(--tmt-teal-ink); }
.tq-foot__sub .tm-sub-form button { background: var(--tmt-red-deep); }

/* ===========================================================================
   Requested changes: yellow buttons, Rauda Slab titles.
   ---------------------------------------------------------------------------
   Buttons move from red to yellow. The label goes to INK, not white: white on
   --tmt-yellow measures 1.9:1, which is the exact fault that made the contact
   page's "Order Online" label invisible. Ink on yellow is 10.9:1.

   Titles go to Rauda Slab Solid, the face the theme already self-hosts, so
   this also drops the Archivo Narrow web request. Rauda Slab has one weight,
   so weight declarations are neutralised where they would synthesise a bold.
   ======================================================================== */
:root {
  --tq-display: 'Rauda Slab Solid', 'Alfa Slab One', serif;
}
.tq-h2, .tq-loc__name, .tq-dish__name, .tq-spec__title, .tq-spec__price,
.tq-pkg__title, .tq-ev__title, .tq-ev__day, .tq-stats__n, .tq-drawer__nav a,
.tm-page-hero h1, .tm-section-head h2, .tm-aside h2, .tm-prose h2, .tm-prose h3,
.tm-loc-inner h3, .tm-feature h3, .tm-pkg h3, .tm-step h3 {
  font-family: var(--tq-display);
  font-weight: normal;
  letter-spacing: 0;
}
/* The slab is heavier per em than Archivo Narrow, so the display steps come
   down a touch to hold the same optical weight in each slot. */
.tq-h2 { font-size: clamp(28px, 4vw, 38px); line-height: 1.06; }
.tq-loc__name, .tq-dish__name, .tq-spec__title { font-size: 21px; }
.tq-pkg__title, .tq-ev__title { font-size: 23px; }
.tm-page-hero h1 { font-size: clamp(28px, 4.6vw, 46px); }

/* ---- buttons: yellow fill, ink label ----------------------------------- */
.tq-btn--primary,
.tq-btn--primary:hover, .tq-btn--primary:focus-visible {
  color: var(--tmt-ink);
}
.tq-btn--primary { background: var(--tmt-yellow); }
.tq-btn--primary:hover, .tq-btn--primary:focus-visible { background: var(--tmt-yellow-deep); }
.tq-arrow { background: var(--tmt-yellow); color: var(--tmt-ink); }
.tq-arrow:hover { background: var(--tmt-yellow-deep); color: var(--tmt-ink); }
.tq-foot__sub .tm-sub-form button { background: var(--tmt-yellow); color: var(--tmt-ink); }
.tq-foot__sub .tm-sub-form button:hover { background: var(--tmt-yellow-deep); color: var(--tmt-ink); }
/* The ghost button sits on the hero photo, where a yellow stroke reads better
   than white now that the primary beside it is yellow. */
.tq-btn--ghost { color: var(--tmt-yellow); border-color: var(--tmt-yellow); }
.tq-btn--ghost:hover, .tq-btn--ghost:focus-visible { background: var(--tmt-yellow); color: var(--tmt-ink); }

/* Same cause as the menu prices: 21px at normal weight needs 4.5, and
   red-deep on yellow is 3.81. red-ink on yellow is 6.12. */
.tq-dish__name { color: var(--tmt-red-ink); }

/* ===========================================================================
   Type split: titles are Rauda Slab, everything else is Inria Sans.
   ---------------------------------------------------------------------------
   Three faces were doing non-title work and all three go: Raleway on the
   accent lines, --tmt-mono on eyebrows/meta/prices, and Archivo Narrow
   wherever it was still standing in. Remapping the tokens catches the inline
   styles in the generated markup, which no class selector can reach.

   Archivo Narrow and Raleway are no longer used anywhere, so the Google Fonts
   request drops to what tokens.css already loads for Inria Sans + Yellowtail.
   ======================================================================== */
:root {
  --tq-accent: var(--font-inria);
  --tmt-mono: var(--font-inria);
}
.tq-accent, .tq-ev__meta, .tq-pkg__label, .tq-stats__l, .tq-loc__addr,
.tq-tag, .tq-dish__desc, .tq-spec__text, .tq-ev__text, .tq-ev__foot,
.tq-foot__h, .tq-foot__legal span, .tq-head__nav > a, .tq-more__btn,
.tm-ph-eyebrow, .tm-ph-sub, .tm-field span, .tm-btn, .tq-btn {
  font-family: var(--font-inria);
}
/* The mono face carried the letterspacing that made small caps readable; Inria
   needs a touch less of it at the same size. */
.tq-accent, .tq-ev__meta, .tq-pkg__label, .tq-stats__l, .tm-ph-eyebrow { letter-spacing: 0.1em; }

/* ===========================================================================
   Casa de Tacos pass: section order and three new bands.
   ---------------------------------------------------------------------------
   The reference project (Casa de Tacos, Behance 250055157) organises its home
   page as: hero, light welcome, quote, menu carousel, CATEGORY CHOOSER,
   offers, events, story, reviews, CLOSING CTA. This build had the welcome and
   the story fused into one dense band under the hero and no chooser or closing
   band at all, so the page ran hero -> wall-of-about -> carousel.

   What changed here is arrangement only: no colour token was redefined and no
   sentence was written, moved between languages or reworded. The three new
   bands are built from copy the site already publishes - the about deck's
   second paragraph becomes the quote, the taxonomy's own term names become the
   chooser, and the closing band is the one /menu/ already ends on.

   The reference's REVIEWS rail has no counterpart here and is deliberately
   absent: it would need the restaurant's actual reviews, and inventing them is
   the mistake the catering page already had to be walked back from.
   ======================================================================== */

/* ---- 2. welcome: REMOVED 2026-09-08 ------------------------------------- */
/* The teal welcome band ("La casa is loud tonight") that used to sit between
   the hero and Mama's table is gone at Santi's request, and its rules with it.
   `taq/fondo_tequila.webp` (the tequila-bottle line texture it carried) stays
   on disk; the `.tq-about*` rules further up this file are now unused by the
   homepage too, and are left only because interior pages share that layer. */

/* ---- 10. closing CTA: the band /menu/ already ends on ------------------- */
.tq-cta {
  position: relative; text-align: center;
  padding: 68px 0 72px;
  background: var(--tmt-yellow) url('taq/fondo_amarillento.webp') center / cover;
  border-top: 3px solid var(--tmt-ink);
}
.tq-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.tq-cta .tq-h2 { color: var(--tmt-ink); margin: 0; }
.tq-cta .tq-badge--lg { width: clamp(56px, 7vw, 86px); height: auto; }
.tq-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* The global primary is a yellow fill, which disappears on this ground - so
   the buttons here are the pair /menu/'s band uses: red-deep fill, ink stroke. */
.tq-cta .tq-btn--primary { background: var(--tmt-red-deep); color: var(--tmt-white); border-color: var(--tmt-ink); }
.tq-cta .tq-btn--primary:hover, .tq-cta .tq-btn--primary:focus-visible {
  background: var(--tmt-red-ink); color: var(--tmt-white);
}
.tq-cta .tq-btn--ghost { background: transparent; color: var(--tmt-ink); border-color: var(--tmt-ink); }
.tq-cta .tq-btn--ghost:hover, .tq-cta .tq-btn--ghost:focus-visible {
  background: var(--tmt-ink); color: var(--tmt-yellow);
}


/* ---- 9. about us: the reference's block, in this restaurant's brand ------
   Display title, a band of photographs, the story paragraph, then the facts
   as a numbered list. The reference sets this on its peach ground with blue
   type; here it is the theme's cream with the red display face and ink text,
   so the arrangement is the reference's and the palette is Tequila Mama's. */
/* ---- 9. about us: REMOVED 2026-09-08 ----------------------------------- */
/* The ABOUT US band is gone at Santi's request, so its rules are too - display
   title, four-photo mosaic, story paragraph, three numbered facts, and the ink
   ground they had been recoloured onto earlier the same day. The catering band
   above it is white and the closing CTA below it is yellow, so cutting it did
   not leave two like grounds touching. */

@media (min-width: 640px) {
  .tq-revs { padding: 88px 0 96px; }
}
@media (min-width: 1024px) {
  .tq-revs { padding: 104px 0 112px; }
}

/* ---- nav in the display face ------------------------------------------- */
/* The type split had sent the header nav to Inria with everything else that
   was not a title; the client wants the menu itself in the slab. Uppercase and
   a little tracking because Rauda Slab is a display face at 16px, and it does
   not carry a second weight to lean on. */
.tq-head__nav > a, .tq-more__btn {
  font-family: var(--tq-display);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
@media (min-width: 1024px) {
  .tq-head__nav > a { font-size: 15px; }
  .tq-head__nav { gap: 22px; }
}

/* ===========================================================================
   Menu + categories: one two-column section.
   ---------------------------------------------------------------------------
   Left: the section heading, the category words, and Order Online. Hovering a
   word raises a photograph that follows the pointer.
   Right: the featured dishes as a slider with no end - the track is printed
   twice and translated -50% forever, the same trick the Instagram marquee
   uses, so there are no arrows and nothing to reach the end of.
   ======================================================================== */
/* The white TMC pattern, not a flat ground - the cards are white too, so
   their shadow is what separates them from it. */
.tq-menu {
  position: relative; padding: 76px 0 84px;
  background: var(--tmt-white) url('taq/fondo_tequilamama.webp') center / cover;
}
.tq-menu__grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
.tq-menu__left {
  position: relative;
  /* Column 1 is centred on its own axis, not ranged left against the
     masonry - the words, the rule, the accent and the button all share one
     centre line. */
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.tq-sec-head--left { align-items: center; text-align: center; }
.tq-catlist { width: 100%; }

.tq-catlist { list-style: none; margin: 26px 0 0; padding: 0; position: relative; z-index: 2; }
.tq-catlist li + li { border-top: 1px solid color-mix(in oklab, var(--tmt-ink) 14%, transparent); }
.tq-catlist a {
  display: block; padding: 13px 6px; text-align: center; text-decoration: none;
  font-family: var(--tq-display); font-weight: normal; text-transform: uppercase;
  font-size: clamp(24px, 4.4vw, 40px); line-height: 1.1; letter-spacing: 0;
  color: var(--tmt-red-ink);
  transition: color 200ms var(--tq-ease), transform 200ms var(--tq-ease);
}
.tq-catlist a:hover, .tq-catlist a:focus-visible { color: var(--tmt-teal-ink); }
.tq-menu__cta { margin-top: 26px; text-align: center; position: relative; z-index: 2; }

/* ---- the plate masonry -------------------------------------------------- */
/* Every photographed plate, in two stacks that scroll. Hovering a category
   word filters it (see the note in taq-sections.php for why the stacks are
   explicit rather than `column-count: 2`). */
.tq-plates { position: relative; }
.tq-plates__head {
  margin: 0 0 14px; font-family: var(--font-inria); font-weight: 700;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tmt-stone);
}
.tq-plates__viewport {
  position: relative; overflow: hidden;
  /* Bounded on EVERY width, not just from 900px up. The height rules used to
     start at the 900px breakpoint, so on a phone the wall was unbounded: 48
     plates twice over made this one band 13,393px tall (measured 2026-09-08).
     A bound here is also what keeps the animated track inside the raster
     window Chrome paints - see the note on .tq-plates__track. */
  height: 560px;
  /* A soft top and bottom edge so cards arrive and leave rather than being
     cut off square. */
  -webkit-mask: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
          mask: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
}
/* KNOWN LIMIT, measured 2026-09-08: an animated layer this tall does not get
   fully rasterised. Chrome only paints an interest rect of roughly 4,000px
   around the viewport on a composited animated element, and this track is two
   sets of 48 cards - about 15,000px. Cards outside that window arrive blank:
   `complete` is true and `naturalWidth` is non-zero for all 96 images, yet the
   wells paint empty, and injecting `animation: none` makes every one of them
   appear immediately. That test is how to re-confirm it. It is the same class
   of failure as the per-card drop-shadow noted on .tq-plate__img. The fix is
   fewer cards in the wall (a shorter track fits the window) - a content call,
   still open. */
.tq-plates__track {
  display: flex; flex-direction: column;
  animation: tq-plates-slide 200s linear infinite;
}
/* The track holds the set twice, so translating by one set's height lands
   exactly on the copy and the loop has no seam. That is -50% MINUS half the
   gap between the two sets: the gap counts in the track's height, so a plain
   -50% stops 8px short and the wall jumps once a cycle. */
@keyframes tq-plates-slide {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-50% - 8px)); }
}
/* Reading is not a race: the descent holds while the pointer is inside it. */
.tq-plates__viewport:hover .tq-plates__track,
.tq-plates__viewport:focus-within .tq-plates__track { animation-play-state: paused; }
/* A filtered view is six plates, which neither needs to move nor to be
   echoed - the copy behind would show the same category twice. */
.tq-plates.is-filtering .tq-plates__track { animation: none; transform: none; }
.tq-plates.is-filtering [data-plates-echo] { display: none; }
.tq-plates__none {
  margin: 24px 0 0; text-align: center; font-family: var(--font-inria);
  font-size: 14px; color: var(--tmt-stone);
}

.tq-plates__masonry { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.tq-plates__col { display: flex; flex-direction: column; gap: 16px; }
/* The second stack starts lower, so the two columns interlock instead of
   reading as rows. */
.tq-plates__col:last-child { margin-top: 40px; }
.tq-plates__set + .tq-plates__set { margin-top: 16px; }
.tq-plates__none {
  margin: 24px 0 0; text-align: center; font-family: var(--font-inria);
  font-size: 14px; color: var(--tmt-stone);
}

/* ---- one plate card ---------------------------------------------------- */
.tq-plate {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--tq-r-card); background: var(--tmt-white);
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
  transition: box-shadow 300ms var(--tq-ease), transform 300ms var(--tq-ease), opacity 200ms var(--tq-ease);
}
.tq-plate:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.16); transform: translateY(-2px); }
.tq-plate__well {
  position: relative; overflow: hidden;
  /* A 5% ink wash rather than pure white. Several plates are photographed as
     cutouts of WHITE china, which on a white well disappeared completely -
     two of five in Mama's Especiales were blank cards. The card itself stays
     white; only the photo's own field is a hair darker. */
  background: color-mix(in oklab, var(--tmt-ink) 5%, var(--tmt-white));
}
.tq-plate__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* The plates are cutouts with a generous transparent margin, so a 1:1 source
     in a 1:1 box crops nothing and the food sits small in the middle of the
     card. The scale eats that margin, which is what filling the card needs.
     There is deliberately NO drop-shadow filter here: per-card filters inside
     the 15,000px animated track left random cards' images unrasterised - a
     different two or three came up blank on every load. The card's own
     box-shadow and this well tint do the separating instead. */
  transform: scale(1.14);
  transition: transform 500ms var(--tq-ease);
}
.tq-plate:hover .tq-plate__img { transform: scale(1.2); }
.tq-plate__name {
  margin: 0; padding: 12px 14px 16px; text-align: center;
  font-family: var(--tq-display); font-weight: normal; text-transform: uppercase;
  font-size: 17px; line-height: 1.15; color: var(--tmt-red-ink);
}
/* Filtered out: collapsed, not just faded, so the stacks close up. */
.tq-plate.is-out { display: none; }

@media (min-width: 900px) {
  .tq-menu { padding: 96px 0 104px; }
  .tq-menu__grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
  .tq-plates__viewport { height: 760px; }
}
@media (min-width: 1200px) {
  .tq-menu__grid { gap: 72px; }
  .tq-plates__viewport { height: 820px; }
}

/* Nothing should drift for anyone who has asked motion to stop - the slider
   holds still and shows the first cards. The hover panels are inert on touch
   anyway: there is no hover to give them. */
@media (prefers-reduced-motion: reduce) {
  /* No descent, and the viewport becomes a plain scroller so the whole menu
     is still reachable - `height: auto` did not do that, it just let the band
     grow to its full 13,000px instead. */
  .tq-plates__track { animation: none; }
  .tq-plates__viewport { overflow-y: auto; -webkit-mask: none; mask: none; }
  .tq-plates [data-plates-echo] { display: none; }
  .tq-plate, .tq-plate__img { transition: none; }
  .tq-plate:hover { transform: none; }
  .tq-plate:hover .tq-plate__img { transform: scale(1.14); }
}

/* ===========================================================================
   Catering band: four bars across.
   ---------------------------------------------------------------------------
   The band shows the real programme now (four per-person bars, read straight
   out of tm_catering_packages), where it used to show three invented packages.
   Four cards in a 1180px wrap are ~250px wide, so the display step comes down
   from 23px -- "DIY TACO SALAD BAR" in Rauda Slab at 23px wraps to four lines
   in that column and the cards stop matching each other's rhythm. This block
   sits at the end of the file on purpose: the 23px rule above is unconditional.
   ======================================================================== */
@media (min-width: 1024px) {
  .tq-pkgs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .tq-pkg__title { font-size: 20px; }
  .tq-pkg__body { padding: 20px 18px 24px; gap: 9px; }
  .tq-pkg__text { font-size: 14.5px; line-height: 23px; }
}

/* The bar photos are the same August cutouts the plate masonry uses, so they
   get the same treatment it worked out (see .tq-plate__well above), not a
   second one:
     - a 1:1 well, because a 1:1 cutout in a 16/9 or 4/5 box is cropped through
       the food - the taco tray lost its bottom edge to a 4/5 crop;
     - a 5% ink wash on the well, because the Nacho Bar is white china cut out
       on transparency and vanished into the white card;
     - scale, because the cutouts carry a wide transparent margin and the food
       otherwise sits small in the middle of the well.
   No drop-shadow, for the reason recorded on .tq-plate__img. */
.tq-pkg__media {
  aspect-ratio: 1 / 1;
  background: color-mix(in oklab, var(--tmt-ink) 5%, var(--tmt-white));
}
.tq-pkg__media img { transform: scale(1.1); }
/* Base is scaled now, so the hover step has to climb from there, not to 1.05. */
.tq-pkg:hover .tq-pkg__media img { transform: scale(1.17); }
@media (prefers-reduced-motion: reduce) {
  .tq-pkg:hover .tq-pkg__media img { transform: scale(1.1); }
}

/* ===========================================================================
   MENU BAND v2 — ROLLED BACK 2026-09-08
   ---------------------------------------------------------------------------
   The V1.2 menu's treatment was piloted on this band: a patterned YELLOW
   ground, a cream panel facing a deep-teal panel, poster caps with a hard red
   offset shadow, and a yellow pill for the small label. Santi's call after
   seeing it: too many things in one section, and it should read like the rest
   of the page - white ground with the TMC pattern.

   So the pilot is gone and the band is back to its base rules above
   (`.tq-menu` at the top of the plate-masonry block): white + fondo_tequilamama,
   no panels, flat red display caps, red-ink category rows on hairlines, plain
   letterspaced label. The two `.tq-panel` wrappers came out of
   inc/taq-sections.php with it, as did the second head ornament.

   Kept from the menu, because it costs nothing and is not noise: nothing. The
   yellow talavera tile (`taq/fondo_talavera.webp`) stays on disk unused - it is
   a faithful extraction from the V1.2 cover and the next band that wants a
   patterned yellow ground should use it rather than re-cutting one.
   ======================================================================== */

/* ===========================================================================
   LOS TONTOS PASS — 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   The client picked lostontos.be as the layout to follow. Header and hero are
   untouched by request; everything under the hero is re-organised into that
   page's shape:

     big__text__block   -> .tq-stmt    one oversized line, a lead, a sub, a button
     block__menu        -> .tq-mlist   category ROWS, not cards, with a hover shot
     block__latest__event -> .tq-feat  ONE featured event as a wide cover card
     block__reviews     -> .tq-revlist reviews side by side, no rail
     block__newsletter  -> .tq-rw      full-bleed photo with a panel over it
     reservation CTA    -> .tq-cta     unchanged, it was already this band

   Appended rather than edited into the blocks above, which is how every pass
   in this file has been applied: the earlier rules stay readable as history and
   the cascade settles it. The dead-component resets at the foot of this block
   are the price of that - four sections changed markup, and their old class
   names are still matched by rules further up.

   BAND RHYTHM, re-dealt for the new order (supersedes the list at the top of
   this file, which described the Casa de Tacos order):

     1 hero       storefront photograph
     2 statement  WHITE + the TMC monogram pattern
     3 menu       TEAL DEEP - big cream words, the darkest step on the page
     4 events     WHITE + pattern
     5 specials   YELLOW + sunburst
     6 reviews    CREAM DEEP  (renders only when real reviews are entered)
     7 rewards    PHOTOGRAPH + scrim, full bleed
     8 cta        YELLOW + pattern
       footer     CREAM DEEP

   No two neighbours share a ground. Reviews is conditional, so check the join
   BOTH ways: with it off, specials (yellow) meets rewards (photograph), which
   still contrasts. Yellow repeats at 5 and 8 but never back to back.
   ======================================================================== */

/* ---- 2. statement ------------------------------------------------------- */
.tq-stmt {
  position: relative;
  padding: clamp(64px, 8vw, 104px) 0;
  background: var(--tmt-white) url('taq/fondo_tequilamama.webp') center / cover;
}
.tq-stmt__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; text-align: center;
}
/* The reference sets this line at roughly a third of the viewport width and
   lets it run to three or four lines; a max-width in CH rather than PX keeps
   that measure whatever the display face is doing. */
.tq-stmt__big {
  margin: 0; max-width: 20ch;
  font-family: var(--tq-display);
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--tmt-red);
}
.tq-stmt__lead {
  margin: 0; max-width: 62ch;
  font-family: var(--font-inria);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--tmt-ink);
}
.tq-stmt__sub {
  margin: 0; max-width: 54ch;
  font-family: var(--font-inria);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--tmt-charcoal);
}
.tq-stmt__cta { margin-top: 10px; }

/* ---- 3. menu as rows ---------------------------------------------------- */
.tq-menu {
  position: relative;
  padding: clamp(64px, 8vw, 104px) 0;
  background: var(--tmt-teal-deep);
}
.tq-menu .tq-h2, .tq-menu .tq-h2--red { color: var(--tmt-cream); }
.tq-menu .tq-accent--teal { color: var(--tmt-yellow); }
.tq-sec-head--left { align-items: flex-start; text-align: left; }

.tq-mlist { position: relative; margin-top: clamp(28px, 3vw, 44px); }

/* The hover shot sits BEHIND the rows, pinned to the right half. The reference
   parks it centre-right and fades between categories; same idea, except the
   rows here are links over the top of it, so it is inert (aria-hidden, no
   pointer events) and never intercepts a tap. */
.tq-mlist__stage--dead {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: min(38%, 420px); aspect-ratio: 4 / 5;
  pointer-events: none; z-index: 0;
  border-radius: var(--tq-r-media); overflow: hidden;
}
.tq-mlist__shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transform: scale(1.06);
  transition: opacity 420ms var(--tq-ease), transform 620ms var(--tq-ease);
}
.tq-mlist__shot.is-on { opacity: 1; transform: scale(1); }

.tq-mlist__rows { position: relative; z-index: 1; }

.tq-mrow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'text arrow' 'sub arrow';
  align-items: center;
  gap: 2px clamp(16px, 3vw, 40px);
  padding: clamp(18px, 2.4vw, 30px) 0;
  border-top: 1px solid rgba(255,255,255,0.22);
  text-decoration: none;
  color: var(--tmt-cream);
}
.tq-mrow:last-child { border-bottom: 1px solid rgba(255,255,255,0.22); }
.tq-mrow__text {
  grid-area: text;
  font-family: var(--tq-display);
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1.02;
  text-transform: uppercase;
  overflow: hidden;
}
/* The inner span is what moves, so the overflow above clips it: the word
   slides right and the row does not reflow while it does. */
.tq-mrow__inner {
  display: inline-block;
  transition: transform 380ms var(--tq-ease), color 240ms var(--tq-ease);
}
.tq-mrow__sub {
  grid-area: sub;
  font-family: var(--font-inria);
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.4;
  color: rgba(255,255,255,0.68);
}
.tq-mrow__arrow {
  grid-area: arrow;
  display: flex; align-items: center; justify-content: center;
  width: clamp(40px, 4vw, 52px); aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 50%;
  color: var(--tmt-cream);
  transition: transform 320ms var(--tq-ease), background 240ms, color 240ms, border-color 240ms;
}
.tq-mrow:hover .tq-mrow__inner,
.tq-mrow:focus-visible .tq-mrow__inner { transform: translateX(18px); color: var(--tmt-yellow); }
.tq-mrow:hover .tq-mrow__arrow,
.tq-mrow:focus-visible .tq-mrow__arrow {
  background: var(--tmt-yellow); color: var(--tmt-ink);
  border-color: var(--tmt-yellow); transform: translateX(6px);
}
.tq-menu__cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(28px, 3vw, 40px);
}

/* ---- 4. featured event -------------------------------------------------- */
.tq-events {
  position: relative;
  padding: clamp(64px, 8vw, 104px) 0;
  background: var(--tmt-white) url('taq/fondo_tequilamama.webp') center / cover;
}
.tq-events .tq-h2 { color: var(--tmt-red); }
.tq-feat {
  display: grid; grid-template-columns: 1fr;
  margin-top: clamp(24px, 3vw, 38px);
  background: var(--tmt-cream);
  border-radius: var(--tq-r-card);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}
.tq-feat__cover { position: relative; aspect-ratio: 16 / 10; }
.tq-feat__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-feat__date {
  position: absolute; top: 16px; left: 16px; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 10px 14px; border-radius: var(--tq-r-btn);
  background: var(--tmt-red); color: var(--tmt-white);
  font-family: var(--tq-display); text-transform: uppercase; line-height: 1;
}
.tq-feat__mon { font-size: 13px; letter-spacing: 0.06em; }
.tq-feat__day { font-size: 30px; }
.tq-feat__dow { font-size: 12px; opacity: 0.85; }
.tq-feat__info {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: clamp(24px, 3vw, 40px);
}
.tq-feat__meta {
  margin: 0; font-family: var(--font-inria); font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--tmt-teal-ink);
}
.tq-feat__title {
  font-family: var(--tq-display); font-weight: 400;
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.06;
  text-transform: uppercase; color: var(--tmt-ink);
}
.tq-feat__text {
  margin: 0; font-family: var(--font-inria); font-size: 16px;
  line-height: 1.6; color: var(--tmt-charcoal); max-width: 56ch;
}
.tq-feat__foot {
  margin: 0; font-family: var(--font-inria); font-size: 13.5px;
  color: var(--tmt-stone);
}
.tq-feat__info .tq-btn { margin-top: 6px; }

/* The four events that did not get the card. A dated list, not a second rail:
   the reference shows one event and this page has five, so the rest are read
   rather than clicked through. */
.tq-evlist {
  list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0;
  border-top: 1px solid rgba(0,0,0,0.12);
}
.tq-evrow {
  display: grid; grid-template-columns: 58px 1fr auto;
  align-items: baseline; gap: 4px 18px;
  padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,0.12);
}
.tq-evrow__when {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--tq-display); text-transform: uppercase;
  color: var(--tmt-red); line-height: 1;
}
.tq-evrow__mon { font-size: 12px; letter-spacing: 0.06em; }
.tq-evrow__day { font-size: 22px; }
.tq-evrow__body { display: flex; flex-direction: column; gap: 3px; }
.tq-evrow__title {
  font-family: var(--tq-display); font-size: 19px;
  text-transform: uppercase; color: var(--tmt-ink); line-height: 1.15;
}
.tq-evrow__meta { font-family: var(--font-inria); font-size: 14px; color: var(--tmt-charcoal); }
.tq-evrow__foot { font-family: var(--font-inria); font-size: 13px; color: var(--tmt-stone); }

/* ---- 5. specials grid --------------------------------------------------- */
.tq-specials {
  position: relative;
  padding: clamp(64px, 8vw, 104px) 0;
  background: var(--tmt-yellow) url('taq/fondo_amarillento.webp') center / cover;
}
.tq-specials .tq-h2, .tq-specials .tq-h2--red { color: var(--tmt-red-ink); }
.tq-specgrid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: clamp(24px, 3vw, 38px);
}
.tq-spec {
  display: flex; flex-direction: column;
  background: var(--tmt-white);
  border-radius: var(--tq-r-card);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  transition: transform 260ms var(--tq-ease), box-shadow 260ms var(--tq-ease);
}
.tq-spec:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(0,0,0,0.16); }
.tq-spec__cover { position: relative; aspect-ratio: 4 / 3; }
.tq-spec__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-spec__day {
  position: absolute; top: 12px; left: 12px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--tmt-red); color: var(--tmt-white);
  font-family: var(--font-inria); font-size: 12px;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.tq-spec__info {
  display: flex; flex-direction: column; gap: 7px; flex: 1;
  padding: 18px 18px 22px;
}
.tq-spec__title {
  font-family: var(--tq-display); font-weight: 400;
  font-size: 22px; line-height: 1.08;
  text-transform: uppercase; color: var(--tmt-ink);
}
.tq-spec__when {
  margin: 0; font-family: var(--font-inria); font-size: 12.5px;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--tmt-teal-ink);
}
.tq-spec__text {
  margin: 0; flex: 1; font-family: var(--font-inria);
  font-size: 14.5px; line-height: 1.5; color: var(--tmt-charcoal);
}
.tq-spec__price {
  margin: 0; font-family: var(--tq-display); font-size: 22px;
  text-transform: uppercase; color: var(--tmt-red);
}

/* ---- 6. reviews side by side -------------------------------------------- */
/* This band had no ground of its own and the note at the top of the file warned
   that it would read as a second white band as soon as it was switched on. In
   the new order it lands between yellow and a photograph, so it takes
   cream-deep and that warning is settled. */
.tq-revs {
  position: relative;
  padding: clamp(64px, 8vw, 104px) 0;
  background: var(--tmt-cream-deep);
}
.tq-revlist {
  list-style: none; margin: clamp(24px, 3vw, 38px) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(18px, 2.2vw, 26px);
}
.tq-revcard {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--tmt-white);
  border-radius: var(--tq-r-card);
  box-shadow: 0 8px 22px rgba(0,0,0,0.09);
}
.tq-revcard__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.tq-revcard__stars { font-size: 17px; letter-spacing: 0.06em; color: var(--tmt-yellow-deep); }
.tq-revcard__src {
  font-family: var(--font-inria); font-size: 12px;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--tmt-stone);
}
.tq-revcard__quote { margin: 0; flex: 1; }
.tq-revcard__quote p {
  margin: 0; font-family: var(--font-inria);
  font-size: 15.5px; line-height: 1.6; color: var(--tmt-ink);
}
.tq-revcard__by {
  font-family: var(--tq-display); font-style: normal;
  font-size: 17px; text-transform: uppercase; color: var(--tmt-red);
}
.tq-revs__foot { display: flex; justify-content: center; margin-top: clamp(26px, 3vw, 38px); }

/* ---- 7. rewards --------------------------------------------------------- */
.tq-rw { position: relative; isolation: isolate; padding: clamp(72px, 9vw, 120px) 0; }
.tq-rw__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.tq-rw__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(0,0,0,0.78), rgba(0,0,0,0.42) 62%, rgba(0,0,0,0.30));
}
.tq-rw__inner { display: flex; }
.tq-rw__panel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  max-width: 46rem;
}
.tq-rw__eyebrow {
  margin: 0; font-family: var(--font-inria); font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tmt-yellow);
}
.tq-rw__title {
  margin: 0;
  font-family: var(--tq-display);
  font-size: clamp(38px, 6.4vw, 82px);
  line-height: 0.96;
  text-transform: uppercase;
  color: var(--tmt-white);
}
.tq-rw__title span { display: block; color: var(--tmt-yellow); }
.tq-rw__text {
  margin: 0; max-width: 46ch;
  font-family: var(--font-inria); font-size: clamp(15px, 1.4vw, 17.5px);
  line-height: 1.6; color: rgba(255,255,255,0.9);
}
.tq-rw__cta { margin-top: 8px; }
.tq-rw__fine {
  margin: 0; font-family: var(--font-inria);
  font-size: 12.5px; color: rgba(255,255,255,0.66);
}

/* ---- breakpoints -------------------------------------------------------- */
@media (min-width: 768px) {
  .tq-specgrid { grid-template-columns: repeat(2, 1fr); }
  .tq-revlist  { grid-template-columns: repeat(2, 1fr); }
  .tq-feat     { grid-template-columns: 1.05fr 1fr; }
  .tq-feat__cover { aspect-ratio: auto; min-height: 100%; }
}
@media (min-width: 1024px) {
  .tq-specgrid { grid-template-columns: repeat(3, 1fr); }
  .tq-revlist  { grid-template-columns: repeat(3, 1fr); }
  /* A fourth review would otherwise sit alone on a second row; at four the
     grid goes two-up rather than leaving one card stranded. */
  .tq-revlist:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
  .tq-mrow { grid-template-columns: minmax(0, 1fr) minmax(0, 22ch) auto;
             grid-template-areas: 'text sub arrow'; align-items: center; }
  .tq-mrow__sub { text-align: right; }
}
/* No hover on a touch screen, so the stage can never be raised: hide it and
   give the rows the full width back. This is the same trap the plate masonry
   hit before it was bounded - an element that only makes sense under a pointer
   has to be removed, not just left empty, or it takes up the layout anyway. */
@media (hover: none), (max-width: 767px) {
  .tq-mlist__stage--dead { display: none; }
}

/* ---- dead components ---------------------------------------------------- */
/* Four sections changed markup in this pass and their old class names are still
   matched by rules earlier in this file. Nothing emits these any more:
     .tq-plates* / .tq-catlist / .tq-menu__grid|__left|__right  (plate masonry)
     .tq-ev / .tq-ev__*                                         (events rail)
     .tq-rev / .tq-rev__*                                       (reviews rail)
     .tq-spec__media|__frame|__badge|__body                     (specials rail)
   The rails themselves are gone from all four, so .tq-rail-ctl no longer has
   anything to control on this page. Left as a guard rather than deleted: if a
   band is ever restored from a .bak-tontos file, the markup comes back and
   these rules are what it expects to find. */
.tq-plates, .tq-catlist, .tq-ev, .tq-rev { display: none; }
.tq-menuev .tq-rail-ctl { display: none; }
/* Specials and reviews went back onto the rail on 2026-09-09, so their controls
   are NOT hidden - only the fused menu+events band has no rail left. */

/* Two properties the old specials card set that the new one does not restate,
   and so would inherit: the 1px white border drawn around what is now a white
   card, and the rule + padding above the price, which belonged to a price
   pinned to the foot of a teal card with `margin: auto 0 0`. */
.tq-spec { border: 0; height: auto; }
.tq-spec__price { padding-top: 0; border-top: 0; }

/* ===========================================================================
   LOS TONTOS PASS, part 2 — 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   Three changes on top of the block above, all of them the reference's own
   structure rather than new invention:

     1  menu + events are ONE band (`menu__event__wrapper` there, .tq-menuev
        here). They were two bands on two grounds; now they share one teal
        ground and one wrap, and the event card sits on the teal.
     2  the footer is rebuilt to the reference's four pieces - promo banner,
        three columns, subscribe row, copyright row.
     3  a floating order button pinned to the viewport, with a sheet offering
        ordering or the phone.

   BAND RHYTHM after the fuse (supersedes both lists above):

     1 hero        storefront photograph
     2 statement   WHITE + monogram pattern
     3 menu+events TEAL DEEP
     4 specials    YELLOW + sunburst
     5 reviews     CREAM DEEP   (only when real reviews are entered)
     6 rewards     PHOTOGRAPH + scrim
       footer      CREAM DEEP, opening on the promo banner

   The closing yellow CTA band is gone - it moved into the footer - so the page
   now ends on the rewards photograph into the cream footer. Reviews is still
   conditional: with it off, yellow meets the photograph, which still contrasts.
   ======================================================================== */

/* ---- 3+4. the united band ----------------------------------------------- */
.tq-menuev {
  position: relative;
  padding: clamp(64px, 8vw, 104px) 0;
  background: var(--tmt-teal-deep);
}
.tq-menuev__inner { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 92px); }
.tq-menuev .tq-h2, .tq-menuev .tq-h2--red { color: var(--tmt-cream); }
.tq-menuev .tq-accent--teal { color: var(--tmt-yellow); }

/* The two halves used to be sections with their own padding; inside one wrap
   the gap above is what separates them, so neither adds any of its own. */
.tq-menuev__menu, .tq-menuev__events { position: relative; }

/* The event card was built for a white ground and is cream, which on teal is
   the same relationship the reference has: a light card on a dark band. */
.tq-menuev .tq-feat { box-shadow: 0 18px 40px rgba(0,0,0,0.28); }
/* The dated list under it: its hairlines were drawn for a light ground. */
.tq-menuev .tq-evlist { border-top-color: rgba(255,255,255,0.22); }
.tq-menuev .tq-evrow  { border-bottom-color: rgba(255,255,255,0.22); }
.tq-menuev .tq-evrow__title { color: var(--tmt-cream); }
.tq-menuev .tq-evrow__meta  { color: rgba(255,255,255,0.72); }
.tq-menuev .tq-evrow__foot  { color: rgba(255,255,255,0.55); }
.tq-menuev .tq-evrow__when  { color: var(--tmt-yellow); }

/* ---- footer ------------------------------------------------------------- */
.tq-foot { background: var(--tmt-cream-deep); padding: 0 0 clamp(24px, 3vw, 36px); }

/* 1. promo banner */
.tq-foot__promo {
  position: relative;
  display: grid; grid-template-columns: 1fr; align-items: center;
  gap: clamp(24px, 3vw, 40px);
  margin: clamp(-40px, -4vw, -28px) 0 clamp(44px, 5vw, 68px);
  padding: clamp(28px, 3.4vw, 46px);
  background: var(--tmt-red);
  border-radius: var(--tq-r-card);
  box-shadow: 0 18px 44px rgba(0,0,0,0.22);
  overflow: hidden;
}
.tq-foot__promo-info { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tq-foot__promo-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-inria); font-size: 12.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tmt-yellow);
}
.tq-foot__promo-eyebrow img { width: 34px; height: auto; display: block; }
.tq-foot__promo-title {
  margin: 0; max-width: 22ch;
  font-family: var(--tq-display);
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.04;
  text-transform: uppercase; color: var(--tmt-white);
}
.tq-foot__promo-imgs { position: relative; min-height: 190px; }
.tq-foot__promo-img {
  position: absolute; width: 58%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--tq-r-media);
  border: 4px solid var(--tmt-cream);
  box-shadow: 0 12px 26px rgba(0,0,0,0.3);
}
.tq-foot__promo-img.is-1 { top: 0;   left: 2%;  transform: rotate(-5deg); }
.tq-foot__promo-img.is-2 { top: 28%; right: 2%; transform: rotate(4deg); }

/* 2. three columns */
.tq-foot__main {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 48px);
  padding-bottom: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid rgba(0,0,0,0.14);
}
.tq-foot__col { display: flex; flex-direction: column; gap: 12px; }
.tq-foot__logo { width: min(210px, 62%); height: auto; }
.tq-foot__h {
  font-family: var(--tq-display); font-weight: 400;
  font-size: 17px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--tmt-red);
}
.tq-foot__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tq-foot__menu a {
  font-family: var(--font-inria); font-size: 15px;
  color: var(--tmt-ink); text-decoration: none;
  transition: color 180ms var(--tq-ease);
}
.tq-foot__menu a:hover, .tq-foot__menu a:focus-visible { color: var(--tmt-red); text-decoration: underline; }
.tq-foot__menu--small a { font-size: 14px; color: var(--tmt-charcoal); }
.tq-foot__open { margin: 0; font-family: var(--font-inria); font-size: 14px; color: var(--tmt-teal-ink); }
.tq-foot__hours { border-collapse: collapse; font-family: var(--font-inria); font-size: 14px; }
.tq-foot__hours th, .tq-foot__hours td { text-align: left; padding: 2px 14px 2px 0; font-weight: 400; color: var(--tmt-ink); }
.tq-foot__social { display: flex; gap: 10px; }
.tq-foot__soc {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--tmt-ink); color: var(--tmt-cream);
  transition: background 180ms var(--tq-ease), transform 180ms var(--tq-ease);
}
.tq-foot__soc:hover, .tq-foot__soc:focus-visible { background: var(--tmt-red); transform: translateY(-2px); }
.tq-foot__addr {
  margin: 0; font-style: normal;
  font-family: var(--font-inria); font-size: 15px; line-height: 1.55; color: var(--tmt-ink);
}
.tq-foot__addr a { color: var(--tmt-red); text-decoration: none; }
.tq-foot__addr a:hover { text-decoration: underline; }

/* 3. subscribe row — not in the reference, see the note in tm_taq_footer() */
.tq-foot__sub { padding: clamp(18px, 2.4vw, 28px) 0 0; }

/* 4. copyright row */
.tq-foot__copy {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 20px; padding-top: clamp(18px, 2.4vw, 26px);
}
.tq-foot__copy p { margin: 0; font-family: var(--font-inria); font-size: 13px; color: var(--tmt-charcoal); }
.tq-foot__copy a { color: var(--tmt-charcoal); text-decoration: none; }
.tq-foot__copy a:hover { color: var(--tmt-red); text-decoration: underline; }

@media (min-width: 768px) {
  .tq-foot__promo { grid-template-columns: 1.15fr 1fr; }
  .tq-foot__main  { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ---- floating order button ---------------------------------------------- */
/* A <details>, so open/closed, Esc and the keyboard are the browser's. The
   marker is removed on both selectors because Safari still uses the old
   -webkit pseudo-element and ignores `display` on the standard one. */
.tq-fab { position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: 90; }
.tq-fab summary::-webkit-details-marker { display: none; }
.tq-fab summary::marker { content: ''; }
.tq-fab__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  background: var(--tmt-red); color: var(--tmt-white);
  font-family: var(--tq-display); font-size: 16px;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; list-style: none;
  box-shadow: 0 10px 26px rgba(0,0,0,0.32);
  transition: background 200ms var(--tq-ease), transform 200ms var(--tq-ease);
}
.tq-fab__btn:hover { background: var(--tmt-red-deep); transform: translateY(-2px); }
.tq-fab[open] .tq-fab__btn { background: var(--tmt-ink); }
/* The label and the close cross swap places rather than the button changing
   size — a control that resizes under the pointer is a control you miss. */
.tq-fab__x { display: none; }
.tq-fab[open] .tq-fab__label { display: none; }
.tq-fab[open] .tq-fab__x { display: inline-flex; }
.tq-fab__sheet {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(300px, calc(100vw - 32px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--tmt-cream);
  border-radius: var(--tq-r-card);
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
}
.tq-fab__opt {
  display: flex; flex-direction: column; gap: 2px;
  padding: 15px 18px; text-decoration: none;
  transition: background 160ms var(--tq-ease);
}
.tq-fab__opt + .tq-fab__opt { border-top: 1px solid rgba(0,0,0,0.12); }
.tq-fab__opt:hover, .tq-fab__opt:focus-visible { background: var(--tmt-white); }
.tq-fab__opt strong {
  font-family: var(--tq-display); font-weight: 400; font-size: 17px;
  text-transform: uppercase; color: var(--tmt-ink);
}
.tq-fab__opt small { font-family: var(--font-inria); font-size: 13px; color: var(--tmt-charcoal); }

@media (prefers-reduced-motion: reduce) {
  .tq-fab__btn, .tq-foot__soc, .tq-foot__menu a { transition-duration: 1ms; }
}

/* ---- menu rows: the hover shot gets its own lane ------------------------ */
/* First pass pinned the stage absolutely over the right half of the list, the
   way the reference floats it. On this page it landed straight on top of the
   row subtitles and the arrows: "Mexican street style" over a plate of nachos
   is unreadable, and no scrim fixes it because the photo changes per row and
   the text is small. So the photo stops overlapping anything - the band splits
   into a rows column and a media column, and the two never share space.
   Below 1024px there is no room for a second column and no hover to trigger it
   anyway, so the stage stays hidden there (rule in part 1). */
@media (min-width: 1024px) {
  .tq-mlist {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 28%, 340px);
    align-items: center;
    gap: clamp(28px, 3.5vw, 56px);
  }
  .tq-mlist__stage--dead {
    position: relative; inset: auto; transform: none;
    width: 100%; aspect-ratio: 4 / 5;
    grid-column: 2; grid-row: 1; align-self: center;
  }
  /* Both must name their ROW as well as their column. The stage comes first in
     the DOM, so with only a column named it took row 1 and auto-placement -
     which never moves the cursor backwards - pushed the rows down into row 2,
     leaving a column of dead teal beside the photograph. */
  .tq-mlist__rows { grid-column: 1; grid-row: 1; }
  /* The rows keep their three-column shape inside the narrower lane. */
  .tq-mrow { grid-template-columns: minmax(0, 1fr) minmax(0, 18ch) auto; }
}
/* Nothing hovered yet: an empty frame beside the list reads as a broken image,
   so the stage carries the ground until a row raises a plate into it. */
.tq-mlist__stage--dead { background: rgba(0, 0, 0, 0.14); }

/* With the media column taking a third of the band, the rows lane is narrower
   than it was when the type scale was set, and the longest category ("Mama's
   Especiales") broke to two lines while the other four stayed on one - which
   makes that row twice the height of its neighbours and breaks the rhythm the
   list is for. The step comes down only at this breakpoint, where the lane
   exists; the full-width scale is unchanged below it. */
@media (min-width: 1024px) {
  .tq-mrow__text { font-size: clamp(26px, 3.1vw, 42px); }
  .tq-mrow { grid-template-columns: minmax(0, 1fr) minmax(0, 15ch) auto; }
}

/* ---- "La casa" media cluster -------------------------------------------- */
/* One large slot with two small ones pinned to opposite corners, overlapping
   it. The smalls are positioned against the BIG slot rather than the cluster
   box so they stay on its corners whatever the copy column does to the row
   height. Each slot is a fixed aspect ratio with the media covering it, so a
   portrait clip and a landscape photo drop into the same frame without one of
   them dictating the layout. */
.tq-stmt--split .tq-stmt__inner {
  display: grid; grid-template-columns: 1fr; align-items: center;
  gap: clamp(48px, 6vw, 84px); text-align: left;
}
.tq-stmt--split .tq-stmt__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.tq-stmt--split .tq-stmt__big { max-width: 16ch; }
.tq-stmt--split .tq-stmt__lead,
.tq-stmt--split .tq-stmt__sub { max-width: 52ch; }

.tq-casa { position: relative; padding: clamp(26px, 3vw, 44px) 0; }
.tq-casa__slot {
  position: relative; overflow: hidden;
  border-radius: var(--tq-r-card);
  background: rgba(0,0,0,0.08);
  box-shadow: 0 14px 34px rgba(0,0,0,0.2);
}
.tq-casa__media { width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-casa__slot--big { aspect-ratio: 4 / 5; width: 100%; }
.tq-casa__slot--a, .tq-casa__slot--b {
  position: absolute; width: 42%; aspect-ratio: 1 / 1;
  border: 5px solid var(--tmt-white);
  box-shadow: 0 12px 26px rgba(0,0,0,0.26);
}
/* On the big slot's corners, pulled outward so they read as pinned to it. */
.tq-casa__slot--a { top: 4%;    right: -9%; transform: rotate(3deg); }
.tq-casa__slot--b { bottom: 4%; left: -9%;  transform: rotate(-4deg); }

/* With only the small slots filled and no big one, the absolute positioning
   has nothing to hang off and they would collapse onto each other — so in that
   case they go back into the flow side by side. */
.tq-casa:not(:has(.tq-casa__slot--big)) { display: flex; gap: 16px; }
.tq-casa:not(:has(.tq-casa__slot--big)) .tq-casa__slot--a,
.tq-casa:not(:has(.tq-casa__slot--big)) .tq-casa__slot--b {
  position: static; width: 50%; transform: none;
}

@media (min-width: 900px) {
  .tq-stmt--split .tq-stmt__inner { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  /* The cluster's corner slots hang outside its box; the band clips nothing,
     but the wrap's gutter has to be wide enough that they do not touch the
     viewport edge on the way out. */
  .tq-casa { margin-left: clamp(10px, 1.4vw, 22px); }
}
/* Under the split breakpoint the two small slots would cover most of a
   narrow big slot, so they shrink and tuck in rather than hanging out. */
@media (max-width: 899px) {
  .tq-casa { max-width: 460px; margin-inline: auto; }
  .tq-casa__slot--a { right: -4%; width: 36%; }
  .tq-casa__slot--b { left: -4%;  width: 36%; }
  .tq-stmt--split .tq-stmt__inner { text-align: center; }
  .tq-stmt--split .tq-stmt__copy { align-items: center; }
  .tq-stmt--split .tq-stmt__big { max-width: 20ch; }
}

/* ===========================================================================
   MENU ROWS — corrected against the reference, 2026-09-09
   ---------------------------------------------------------------------------
   Two screenshots of lostontos.be settled how this band actually behaves, and
   both earlier passes here had it wrong. At REST a row is only the category
   word. On HOVER four things happen at once:

     the word turns red;  a "/" and the sub-line fade in beside it;
     an arrow slides in at the far right;  and a tall portrait photograph
     appears, vertically centred ON THE HOVERED ROW, at a fixed position
     partway across the column — overlapping the rows above and below.

   The photo is ONE element that JS moves and re-sources per row, rather than
   one <img> per category stacked in a frame. It sits behind the row text
   (z-index), and the sub sits to its left while the arrow sits to its right,
   so nothing it overlaps is small type — which is what made the first attempt
   here unreadable.

   The `.tq-mlist__stage--dead` rules above are the retired first version, left
   renamed rather than deleted so the two earlier passes still read as history.
   ======================================================================== */
.tq-mlist { position: relative; margin-top: clamp(22px, 2.6vw, 34px); }

.tq-mlist__frame {
  position: absolute; z-index: 0; pointer-events: none;
  left: 52%; top: 0;
  width: clamp(170px, 23%, 250px); aspect-ratio: 3 / 4.4;
  overflow: hidden;
  opacity: 0; transform: translateY(-50%) scale(1.04);
  transition: opacity 300ms var(--tq-ease), transform 480ms var(--tq-ease), top 380ms var(--tq-ease);
}
.tq-mlist.is-on .tq-mlist__frame { opacity: 1; transform: translateY(-50%) scale(1); }
.tq-mlist__shot { width: 100%; height: 100%; object-fit: cover; display: block; }

.tq-mlist__rows { position: relative; z-index: 1; }

.tq-mrow {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center; gap: 0 14px;
  padding: clamp(14px, 1.9vw, 24px) 0;
  border-top: 1px solid rgba(255,255,255,0.16);
  text-decoration: none; color: var(--tmt-cream);
}
.tq-mrow:last-child { border-bottom: 1px solid rgba(255,255,255,0.16); }

.tq-mrow__text {
  font-family: var(--tq-display);
  font-size: clamp(26px, 3.2vw, 46px); line-height: 1.02;
  text-transform: uppercase;
  transition: color 220ms var(--tq-ease);
}
/* Separator, sub and arrow are the hover reveal. They keep their grid cells at
   rest so nothing shifts when they arrive - only opacity and a small offset
   animate, never layout. */
.tq-mrow__sep, .tq-mrow__sub, .tq-mrow__arrow {
  opacity: 0;
  transition: opacity 260ms var(--tq-ease), transform 380ms var(--tq-ease);
}
.tq-mrow__sep {
  font-family: var(--font-inria); font-size: 20px;
  color: rgba(255,255,255,0.4); transform: translateX(-8px);
}
.tq-mrow__sub {
  font-family: var(--font-inria); font-style: italic;
  font-size: clamp(14px, 1.2vw, 17px); color: var(--tmt-white);
  transform: translateX(-10px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tq-mrow__arrow {
  display: flex; align-items: center; justify-self: end;
  color: var(--tmt-cream); transform: translateX(40px);
}
.tq-mrow:hover .tq-mrow__text,
.tq-mrow:focus-visible .tq-mrow__text { color: var(--tmt-red); }
.tq-mrow:hover .tq-mrow__sep,  .tq-mrow:focus-visible .tq-mrow__sep,
.tq-mrow:hover .tq-mrow__sub,  .tq-mrow:focus-visible .tq-mrow__sub,
.tq-mrow:hover .tq-mrow__arrow,.tq-mrow:focus-visible .tq-mrow__arrow {
  opacity: 1; transform: translateX(0);
}

/* No pointer, no reveal to trigger and no room for the photo: the frame goes
   and the sub-line becomes permanent, because on a phone it is the only thing
   telling the reader what the category is. */
@media (hover: none), (max-width: 767px) {
  .tq-mlist__frame { display: none; }
  .tq-mrow { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .tq-mrow__sep { display: none; }
  .tq-mrow__sub {
    grid-column: 1; opacity: 1; transform: none;
    font-size: 13.5px; color: rgba(255,255,255,0.7); white-space: normal;
  }
  .tq-mrow__text { grid-column: 1; grid-row: 1; }
  .tq-mrow__arrow { grid-column: 2; grid-row: 1 / span 2; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tq-mlist__frame, .tq-mrow__sep, .tq-mrow__sub, .tq-mrow__arrow, .tq-mrow__text {
    transition-duration: 1ms;
  }
}

/* ===========================================================================
   BAND SHAPES — corrected against the full-page reference, 2026-09-09
   ---------------------------------------------------------------------------
   Two more things the screenshot settled:

     menu + events   are SIDE BY SIDE, menu ~60% and Events ~35%. They had been
                     stacked, which put Events back to reading as its own band -
                     the exact thing fusing them was meant to stop.
     rewards         is TWO COLUMNS, a photograph beside the words on the band's
                     own ground. It had been a full-bleed photo with the words
                     over it, which is a different band entirely and made the
                     copy fight the picture.
   ======================================================================== */

/* ---- menu + events, two columns ----------------------------------------- */
.tq-menuev__inner {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 76px);
  align-items: start;
}
.tq-menuev .tq-h2 { margin-bottom: clamp(10px, 1.4vw, 18px); }
.tq-menu__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }

/* The event card is vertical: cover, then the words. */
.tq-feat {
  display: block;
  background: rgba(255,255,255,0.06);
  border-radius: var(--tq-r-card);
  padding: clamp(14px, 1.6vw, 20px);
  box-shadow: none;
}
.tq-feat__cover { position: relative; aspect-ratio: 4 / 3; border-radius: var(--tq-r-media); overflow: hidden; }
.tq-feat__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-feat__date {
  position: absolute; top: 10px; left: 10px; margin: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 7px 11px; border-radius: var(--tq-r-btn);
  background: var(--tmt-red); color: var(--tmt-white);
  font-family: var(--tq-display); text-transform: uppercase; line-height: 1;
}
.tq-feat__mon { font-size: 11px; letter-spacing: 0.06em; }
.tq-feat__day { font-size: 24px; }
.tq-feat__info {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: clamp(16px, 2vw, 22px) clamp(6px, 1.2vw, 14px) clamp(6px, 1vw, 10px);
  text-align: center;
}
.tq-feat__title {
  font-family: var(--tq-display); font-weight: 400;
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.08;
  text-transform: uppercase; color: var(--tmt-yellow);
}
.tq-feat__text {
  margin: 0; font-family: var(--font-inria);
  font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.82);
}
.tq-feat__info .tq-btn { margin-top: 4px; }

@media (min-width: 900px) {
  .tq-menuev__inner { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
}

/* ---- rewards, two columns ----------------------------------------------- */
.tq-rw {
  position: relative; isolation: auto;
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--tmt-ink);
}
.tq-rw__inner {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.tq-rw__media { border-radius: var(--tq-r-card); overflow: hidden; aspect-ratio: 4 / 3; }
.tq-rw__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-rw__panel { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.tq-rw__title {
  margin: 0; font-family: var(--tq-display);
  font-size: clamp(32px, 4.6vw, 60px); line-height: 0.98;
  text-transform: uppercase; color: var(--tmt-red);
}
.tq-rw__title span { display: block; color: var(--tmt-yellow); }
.tq-rw__text {
  margin: 0; max-width: 40ch;
  font-family: var(--font-inria); font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6; color: rgba(255,255,255,0.86);
}
@media (min-width: 900px) {
  .tq-rw__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* ---- resets for the two retired menu-row passes ------------------------- */
/* Append-only works until a later pass needs a DIFFERENT grid from an earlier
   one. Two rules from the first two passes were still winning here and both
   broke the corrected row:
     .tq-mlist got `display:grid` with a media column, so the rows were laid out
       in a ~360px lane and every category word wrapped to two lines;
     .tq-mrow got `grid-template-areas: 'text sub arrow'`, which outranks the
       new column list and put the arrow in the middle of the row.
   Named properties have to be given back their initial values explicitly -
   a later `grid-template-columns` does not clear an earlier `-areas`. */
.tq-mlist {
  display: block;
  grid-template-columns: none;
  gap: 0;
}
.tq-mrow { grid-template-areas: none; }
.tq-mrow__text, .tq-mrow__sub, .tq-mrow__arrow { grid-area: auto; }
.tq-mrow__text { overflow: visible; }
.tq-mrow__sub  { text-align: left; }
/* The arrow was a bordered circle in the first pass; the reference's is a bare
   glyph sitting at the end of the rule. */
.tq-mrow__arrow {
  width: auto; height: auto; aspect-ratio: auto;
  border: 0; border-radius: 0; background: none;
}
.tq-mrow:hover .tq-mrow__arrow, .tq-mrow:focus-visible .tq-mrow__arrow {
  background: none; color: var(--tmt-red); border-color: transparent; transform: translateX(0);
}

/* ===========================================================================
   SECTION HEADS, SPECIALS MARQUEE, REWARDS — 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
     · section titles go up a step across the board — at the old scale they sat
       under the band they were meant to open rather than heading it
     · specials: the heading takes its own left column and the cards run down
       the right on an infinite scroll
     · reviews: centred head, unlike the other bands
     · rewards: back to a full-bleed photograph with the words over it
   ======================================================================== */

/* ---- bigger section titles ---------------------------------------------- */
.tq-h2 { font-size: var(--tq-lock-title); line-height: 1.0; }
.tq-stmt__big { font-size: clamp(38px, 6vw, 74px); }
.tq-accent--lg { font-size: clamp(19px, 2vw, 26px); }

/* ---- specials: head left, cards right ----------------------------------- */
.tq-specials { overflow: hidden; }
.tq-specials__inner {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 44px); align-items: start;
}
.tq-specials__head { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) {
  .tq-specials__inner { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); align-items: center; }
  /* The head is sticky so it stays level with the cards while a tall band
     scrolls past, the way a column heading should behave. */
  .tq-specials__head { position: sticky; top: 110px; }
}

/* The marquee. The track holds the set TWICE and slides exactly -50%, so the
   second copy lands where the first began — that is what makes it seamless and
   why the duration must not be tied to the viewport. It bleeds past the wrap on
   the right so cards run off the edge rather than stopping at a margin. */
/* No full-bleed here. `margin-right: calc(50% - 50vw)` bleeds an element that
   spans the WRAP; this one sits in a grid column, where 50% is half the column
   and the calc resolves to a ~440px negative margin that pushed the page 183px
   wider than the viewport and produced a horizontal scrollbar. The marquee
   fills its column instead and the mask fades both ends, which reads as cards
   running off the edge without anything overflowing the page. */
.tq-marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 70px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 70px), transparent);
}
.tq-marquee__track {
  display: flex; width: max-content;
  animation: tq-marquee 46s linear infinite;
}
.tq-marquee__set { display: flex; gap: clamp(14px, 1.8vw, 22px); padding-right: clamp(14px, 1.8vw, 22px); }
.tq-marquee:hover .tq-marquee__track,
.tq-marquee:focus-within .tq-marquee__track { animation-play-state: paused; }
@keyframes tq-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tq-marquee .tq-spec { width: clamp(230px, 24vw, 290px); flex: 0 0 auto; }

/* Reduced motion, or no JS-free way to pause: stop the animation and hand the
   reader a normal scroller instead of a moving thing they cannot catch. */
@media (prefers-reduced-motion: reduce) {
  .tq-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .tq-marquee__track { animation: none; }
  .tq-marquee__set:nth-child(2) { display: none; }
}

/* ---- reviews: centred head ---------------------------------------------- */
.tq-revs__head { align-items: center; text-align: center; }

/* ---- rewards: full-bleed photograph ------------------------------------- */
.tq-rw {
  position: relative; isolation: isolate;
  padding: clamp(72px, 9vw, 124px) 0;
  background: var(--tmt-ink);
}
.tq-rw__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tq-rw__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(0,0,0,0.82), rgba(0,0,0,0.5) 58%, rgba(0,0,0,0.34));
}
.tq-rw__inner { display: block; }
.tq-rw__panel { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 44rem; }
.tq-rw__title { font-size: clamp(34px, 5.4vw, 72px); }

/* ---- "La casa": the cluster always stands, filled or not ---------------- */
/* The band is media-left / words-right, so the left column has to hold its
   shape before anything is uploaded - otherwise the first load is a centred
   one-column band that turns into a two-column one later. An empty slot is a
   branded frame, not a grey box. */
.tq-casa__slot.is-empty {
  display: grid; place-items: center;
  background: rgba(0,0,0,0.07);
  border: 2px dashed rgba(0,0,0,0.16);
  box-shadow: none;
}
.tq-casa__ph {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px; text-align: center;
}
.tq-casa__ph img { width: clamp(34px, 22%, 54px); height: auto; opacity: 0.5; }
.tq-casa__ph span {
  font-family: var(--font-inria); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--tmt-stone);
}
.tq-casa__slot--a.is-empty, .tq-casa__slot--b.is-empty { border-color: rgba(0,0,0,0.14); }
/* The two small frames keep their white mount even when empty, so the corner
   pinning still reads. */
.tq-casa__slot--a.is-empty, .tq-casa__slot--b.is-empty { border: 5px solid var(--tmt-white); }
.tq-casa__slot--a.is-empty .tq-casa__ph, .tq-casa__slot--b.is-empty .tq-casa__ph { gap: 4px; }
.tq-casa__slot--a.is-empty span, .tq-casa__slot--b.is-empty span { font-size: 10.5px; }

/* Balance: the words column gets the room it needs beside a portrait cluster. */
@media (min-width: 900px) {
  .tq-stmt--split .tq-stmt__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* ===========================================================================
   EL MENÚ index, EVENTS carousel, header + buttons — 2026-09-09 (Santi)
   ======================================================================== */

/* ---- header: solid white, always ---------------------------------------- */
/* It was transparent over the hero and only went opaque past 40px of scroll
   (the .tq-head--small class home-taq.js toggles). Solid from the top now, so
   both rules below have to state it - the scrolled one still shrinks the logo
   and tightens the padding, it just no longer changes the ground. */
.tq-head, .tq-head--small { background: var(--tmt-white); }
@supports (backdrop-filter: blur(6px)) {
  .tq-head { background: var(--tmt-white); backdrop-filter: none; }
}
/* The nav sat in white over the photograph; on a white bar it has to be ink in
   BOTH states, not only the un-scrolled one. */
.tq-head .tq-head__nav > a, .tq-head .tq-more__btn,
.tq-head--small .tq-head__nav > a, .tq-head--small .tq-more__btn { color: var(--tmt-ink); }

/* ---- buttons in the display face ---------------------------------------- */
/* Rauda Slab has one weight, so the 600 the buttons carried would be
   synthesised into a fake bold — it is neutralised here rather than left to
   the browser to fake. Letter-spacing opens the caps up a little; at this size
   Rauda's caps set tight. */
.tq-btn, .tm-sub-form button, .tq-fab__btn {
  font-family: var(--font-rauda-solid);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ---- El Menú: numbered index ------------------------------------------- */
/* A running number down the left of the rows. It is decoration, not content —
   the categories are not ranked and not ordered by anything a reader needs —
   so it is aria-hidden in the markup and reads as a rule the eye follows down
   the column rather than as a list position. */
.tq-mrow { grid-template-columns: auto auto auto minmax(0, 1fr) auto; }
.tq-mrow__n {
  font-family: var(--font-inria);
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.4);
  align-self: center;
  padding-right: clamp(6px, 1vw, 14px);
  transition: color 220ms var(--tq-ease);
}
.tq-mrow:hover .tq-mrow__n, .tq-mrow:focus-visible .tq-mrow__n { color: var(--tmt-yellow); }
@media (hover: none), (max-width: 767px) {
  .tq-mrow { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tq-mrow__n { grid-row: 1 / span 2; }
  .tq-mrow__text { grid-column: 2; }
  .tq-mrow__sub  { grid-column: 2; }
  .tq-mrow__arrow{ grid-column: 3; }
}

/* ---- Events: vertical infinite carousel --------------------------------- */
/* Vertical because the column is ~a third of the band and the cards are
   portrait: across, it would show one card and hide four. The set is printed
   twice and the track moves -50%, so the second copy lands where the first
   began and the loop has no seam. Height is capped so the roll shows about two
   and a half cards — enough that the movement reads as a queue rather than as
   one card twitching. */
.tq-evroll {
  position: relative; overflow: hidden;
  height: clamp(420px, 56vh, 620px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.tq-evroll__track { display: flex; flex-direction: column; animation: tq-evroll 38s linear infinite; }
.tq-evroll__set { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); padding-bottom: clamp(14px, 1.8vw, 20px); }
.tq-evroll:hover .tq-evroll__track,
.tq-evroll:focus-within .tq-evroll__track { animation-play-state: paused; }
@keyframes tq-evroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.tq-evroll__cta { margin-top: clamp(16px, 2vw, 24px); }

/* The card loses its own button inside the roll — one CTA serves the band. */
.tq-evroll .tq-feat__info { gap: 6px; padding-bottom: clamp(10px, 1.4vw, 14px); }
.tq-evroll .tq-feat__cover { aspect-ratio: 16 / 10; }
.tq-evroll .tq-feat__meta {
  margin: 0; font-family: var(--font-inria); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.66);
}

@media (prefers-reduced-motion: reduce) {
  .tq-evroll { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
  .tq-evroll__track { animation: none; }
  .tq-evroll__set:nth-child(2) { display: none; }
}

/* ===========================================================================
   HERO VIDEO · CURSOR-FOLLOWING MENU SHOT · HORIZONTAL EVENTS — 2026-09-09
   ======================================================================== */

/* ---- hero video --------------------------------------------------------- */
/* Same box as the still it replaces. object-fit:cover because the file is a
   fixed aspect and the band is not, and a letterboxed hero is worse than a
   cropped one. */
.tq-hero__bg--vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---- the menu shot now follows the pointer ------------------------------ */
/* JS writes the transform every frame, so this must NOT set one of its own -
   the old rule centred it with translateY(-50%) and would fight the script.
   Only the entry fade is left here. */
.tq-mlist__frame {
  left: 0; top: 0;
  width: clamp(180px, 19vw, 260px); aspect-ratio: 3 / 4;
  border: 6px solid var(--tmt-white);
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.42);
  opacity: 0;
  transition: opacity 240ms var(--tq-ease);
  transform: translate3d(0,0,0) translate(-50%,-50%);
  will-change: transform;
}
.tq-mlist.is-on .tq-mlist__frame { opacity: 1; }
/* The rows sit above the photo, so a word is never read through a picture. */
.tq-mlist__rows { position: relative; z-index: 2; }
.tq-mlist__frame { z-index: 1; }

/* A pointer that can hover is the whole premise; without one there is nothing
   to follow, so the frame goes and the sub-line becomes permanent (part 1). */
@media (hover: none) { .tq-mlist__frame { display: none; } }
@media (prefers-reduced-motion: reduce) { .tq-mlist__frame { transition-duration: 1ms; } }

/* ---- events: horizontal, bleeding to the viewport edge ------------------ */
/* A sideways carousel needs width and this column is a third of the band, so
   the roll runs out of the column to the right edge of the screen. The bleed is
   measured from the WRAP (its right edge is this column's right edge), not with
   `calc(50% - 50vw)` — 50% here is half the column, which is the mistake that
   pushed the page 183px wide earlier in the day. .tq-menuev clips it. */
.tq-menuev { overflow: hidden; }
.tq-evroll {
  height: auto;
  margin-right: calc(-1 * ((100vw - min(var(--tq-wrap), 100vw - 2 * var(--tq-gutter))) / 2 + var(--tq-gutter)));
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 90px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 90px), transparent);
}
.tq-evroll__track { flex-direction: row; width: max-content; animation: tq-evroll-x 44s linear infinite; }
.tq-evroll__set {
  flex-direction: row;
  gap: clamp(14px, 1.8vw, 20px);
  padding: 0 clamp(14px, 1.8vw, 20px) 0 0;
}
.tq-evroll .tq-feat { width: clamp(240px, 22vw, 300px); flex: 0 0 auto; }
@keyframes tq-evroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .tq-evroll { overflow-x: auto; overflow-y: hidden; }
  .tq-evroll__track { animation: none; }
}

/* ---- the band CTAs sit centred under their columns ---------------------- */
/* El Menú's button was hard against the left under the rows and Events' under
   the roll; centred, each reads as belonging to the column above it rather
   than to the band's left edge. */
.tq-menu__cta, .tq-evroll__cta { justify-content: center; display: flex; }

/* ===========================================================================
   EVENTS — featured card + a bare list, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   The infinite carousel is retired. One event gets the full vertical card the
   reference uses; the rest are a date and a name and nothing more, so there is
   exactly one thing to read in this column and the others are a queue.
   The .tq-evroll rules above are dead — nothing emits that markup now.
   ======================================================================== */
.tq-evroll, .tq-evroll__track, .tq-evroll__set { display: none; }

/* The card, as in the reference: cover, title, one line, one button. */
.tq-menuev .tq-feat {
  display: block;
  background: rgba(255,255,255,0.07);
  border-radius: var(--tq-r-card);
  padding: clamp(14px, 1.6vw, 20px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.26);
}
.tq-menuev .tq-feat__cover { aspect-ratio: 4 / 3; border-radius: var(--tq-r-media); overflow: hidden; position: relative; }
.tq-menuev .tq-feat__info {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: clamp(16px, 2vw, 22px) clamp(6px, 1.2vw, 14px) clamp(8px, 1.2vw, 12px);
  text-align: center;
}
.tq-menuev .tq-feat__title {
  font-family: var(--tq-display); font-weight: 400;
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.08;
  text-transform: uppercase; color: var(--tmt-yellow);
}
.tq-menuev .tq-feat__text {
  margin: 0; font-family: var(--font-inria);
  font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.82);
}

/* The queue underneath. A hairline per row, a date, a name. Nothing else. */
.tq-evnext__head {
  margin: clamp(22px, 2.8vw, 32px) 0 10px;
  font-family: var(--font-inria); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tmt-yellow);
}
.tq-evnext { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.2); }
.tq-evnext li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.2);
}
.tq-evnext__when {
  flex: 0 0 auto; min-width: 4.4em;
  font-family: var(--tq-display); font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--tmt-yellow);
}
.tq-evnext__name {
  font-family: var(--font-inria); font-size: 14.5px; line-height: 1.35;
  color: rgba(255,255,255,0.86);
}

/* ===========================================================================
   HOMEPAGE GROUNDS — patterns on the flat bands, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   Three of the six bands already carried a pattern (statement: monogram,
   specials: sunburst, rewards: a photograph). Three were flat colour. Two of
   those three get one; the third stays flat ON PURPOSE.

     2 statement   white + monogram        unchanged
     3 menu+events TEAL + bottle texture   NEW
     4 specials    yellow + sunburst       unchanged
     5 reviews     cream + monogram        NEW, very light
     6 rewards     photograph              unchanged
       footer      cream, FLAT             deliberately left alone

   The footer stays flat because it sits under the rewards photograph and holds
   four columns of small type, hours and a form — a texture behind that is
   noise, and it is the one place on the page where nothing should compete with
   the reading.

   Each pattern goes on the band and a wash of the band's own colour goes over
   it, so the texture reads at the edges and the type still sits on flat
   colour. Painting the pattern at full strength behind display type is what
   made the menu-page panels need the same treatment.
   ======================================================================== */

/* ---- 3. menu + events: teal with the bottle texture --------------------- */
.tq-menuev {
  background: var(--tmt-teal-deep) url('taq/fondo_tequila.webp') center / cover;
  position: relative; isolation: isolate;
}
.tq-menuev::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--tmt-teal-deep); opacity: 0.82;
}

/* ---- 5. reviews: cream with the monogram, barely there ------------------ */
/* Lighter than the statement band's wash of the same pattern: the review cards
   are white and sit directly on it, so the ground has to stay behind them
   rather than pattern the gaps between them. */
.tq-revs {
  background: var(--tmt-cream-deep) url('taq/fondo_tequilamama.webp') center / cover;
  position: relative; isolation: isolate;
}
.tq-revs::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--tmt-cream-deep); opacity: 0.88;
}

/* Both bands hold positioned children (the menu's hover frame, the rails), so
   they need their own stacking context above the wash. */
.tq-menuev__inner, .tq-revs .tq-wrap { position: relative; z-index: 1; }

/* ---- live music slide --------------------------------------------------- */
/* Yellow, where the event card above it is the band's own teal, so the two read
   as different KINDS of thing: one dated notice, one standing weekly programme.
   Ink on yellow measures 10.9:1 — the same pairing the buttons use, and the
   reason white is never put on this ground. */
.tq-live {
  margin-top: clamp(24px, 3vw, 34px);
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--tq-r-card);
  background: var(--tmt-yellow);
  color: var(--tmt-ink);
  box-shadow: 0 14px 32px rgba(0,0,0,0.24);
}
.tq-live__eyebrow {
  margin: 0 0 6px; font-family: var(--font-inria); font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tmt-red-ink);
}
.tq-live__h {
  margin: 0; font-family: var(--tq-display); font-weight: 400;
  font-size: clamp(21px, 2.2vw, 28px); line-height: 1.05;
  text-transform: uppercase; color: var(--tmt-ink);
}
.tq-live__when {
  margin: 5px 0 0; font-family: var(--tq-display);
  font-size: 14px; letter-spacing: 0.03em; color: var(--tmt-red-ink);
}
.tq-live__text {
  margin: 8px 0 0; font-family: var(--font-inria);
  font-size: 14px; line-height: 1.5; color: var(--tmt-charcoal);
}
.tq-live__list {
  list-style: none; margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid rgba(0,0,0,0.22);
}
.tq-live__list li {
  display: grid; grid-template-columns: 4.4em minmax(0, 1fr) auto;
  align-items: baseline; gap: 4px 10px; padding: 6px 0;
}
.tq-live__d { font-family: var(--tq-display); font-size: 12.5px; text-transform: uppercase; color: var(--tmt-red-ink); }
.tq-live__n { font-family: var(--font-inria); font-size: 14px; color: var(--tmt-ink); }
.tq-live__t { font-family: var(--font-inria); font-size: 12px; color: var(--tmt-charcoal); white-space: nowrap; }
@media (max-width: 420px) {
  .tq-live__list li { grid-template-columns: 4.4em minmax(0, 1fr); }
  .tq-live__t { grid-column: 2; }
}

/* ---- events: one card, one queue ---------------------------------------- */
/* The live-music slide is gone — music nights are events like any other and go
   through the same card and the same queue (Santi, 2026-09-09). The .tq-live
   rules above are dead; nothing emits that markup now. */
.tq-live { display: none; }

/* On the card: which kind of night it is, above the title. */
.tq-feat__kind {
  margin: 0; font-family: var(--font-inria); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tmt-yellow);
}
.tq-feat__time {
  margin: 0; font-family: var(--tq-display);
  font-size: 14px; letter-spacing: 0.03em; color: var(--tmt-yellow);
}

/* In the queue: a small tag, because "DJ Manny" on its own says nothing about
   what it is. Small enough that the queue is still a date and a name. */
.tq-evnext__live {
  display: inline-block; margin-left: 7px; vertical-align: 1px;
  padding: 2px 7px; border-radius: 999px;
  background: var(--tmt-yellow); color: var(--tmt-ink);
  font-family: var(--font-inria); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ===========================================================================
   THE WEEK — a bento of photographs, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   After the Baires Grill reference: centred head, one button, a small eyebrow,
   then tiles of uneven size with the name burned into each. Replaces the
   infinite marquee — the point of this band is that there is a special for
   every day, and six sliding past one at a time never said that.

   PLACEMENT is explicit per tile rather than an auto-flowing masonry. Six tiles
   in a 4×2 grid: one tall on the left, two wide, three square. Auto-flow would
   re-pack them the moment the count changed, and the shape IS the design here.
   Add a seventh special and it lands in a new row at default size, which is
   ugly but never broken — better than the whole mosaic re-dealing itself.
   ======================================================================== */
.tq-specials {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--tmt-yellow) url('taq/fondo_amarillento.webp') center / cover;
}
.tq-specials__head { text-align: center; max-width: 62ch; margin: 0 auto clamp(26px, 3.2vw, 40px); }
.tq-specials__head .tq-h2 { color: var(--tmt-red-ink); }
.tq-specials__lede {
  margin: 12px auto 0; max-width: 54ch;
  font-family: var(--font-inria); font-size: clamp(15px, 1.4vw, 17.5px);
  line-height: 1.6; color: var(--tmt-charcoal);
}
.tq-specials__cta { margin-top: clamp(16px, 2vw, 22px); display: flex; justify-content: center; }
.tq-specials__eyebrow {
  margin: clamp(22px, 2.8vw, 32px) 0 0;
  font-family: var(--font-inria); font-size: var(--tq-lock-eyebrow);
  letter-spacing: var(--tq-lock-eyebrow-ls); text-transform: uppercase; color: var(--tmt-red-ink);
}

.tq-bento { display: grid; grid-template-columns: 1fr; gap: clamp(10px, 1.2vw, 16px); }

.tq-tile {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--tq-r-card);
  min-height: 220px;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}
.tq-tile__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 700ms var(--tq-ease);
}
.tq-tile:hover .tq-tile__img { transform: scale(1.06); }
/* Two stops, weighted to the foot: the name sits in the dark end and the photo
   stays a photograph through the middle. It deepens on hover to carry the
   description that arrives with it. */
.tq-tile__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.45) 34%, rgba(0,0,0,0.08) 68%);
  transition: background 320ms var(--tq-ease);
}
.tq-tile:hover .tq-tile__scrim {
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0.4) 100%);
}
.tq-tile__day {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--tmt-red); color: var(--tmt-white);
  font-family: var(--font-inria); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.tq-tile__body { padding: clamp(14px, 1.6vw, 20px); }
.tq-tile__name {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-family: var(--tq-display); font-size: clamp(19px, 2vw, 26px);
  line-height: 1.06; text-transform: uppercase; color: var(--tmt-white);
}
.tq-tile__price { font-size: 0.62em; color: var(--tmt-yellow); }
/* The description is the hover. grid-template-rows 0fr -> 1fr animates a height
   the content decides for itself; `max-height` would need a magic number that
   is wrong for the one tile whose text runs long. */
.tq-tile__text {
  margin: 0; display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 380ms var(--tq-ease), opacity 300ms var(--tq-ease), margin 380ms var(--tq-ease);
  font-family: var(--font-inria); font-size: 14px; line-height: 1.5;
  color: rgba(255,255,255,0.9);
}
.tq-tile__text > * { min-height: 0; }
.tq-tile:hover .tq-tile__text, .tq-tile:focus-within .tq-tile__text {
  grid-template-rows: 1fr; opacity: 1; margin-top: 8px;
}
/* grid-template-rows animation needs the text in a child box to collapse. */
.tq-tile__text { overflow: hidden; }

@media (min-width: 760px) {
  .tq-bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, 1fr); }
  .tq-tile--1 { grid-column: 1; grid-row: 1 / span 2; }
  .tq-tile--2 { grid-column: 2 / span 2; grid-row: 1; }
  .tq-tile--3 { grid-column: 4; grid-row: 1; }
  .tq-tile--4 { grid-column: 2; grid-row: 2; }
  .tq-tile--5 { grid-column: 3; grid-row: 2; }
  .tq-tile--6 { grid-column: 4; grid-row: 2; }
}
/* No pointer, no hover: the description would never be reachable, so it is
   simply always open. Same call as the menu rows' sub-lines. */
@media (hover: none) {
  .tq-tile__text { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .tq-tile__img, .tq-tile__scrim, .tq-tile__text { transition-duration: 1ms; }
}

/* ---- two faults in the bento pass, fixed -------------------------------- */
/* 1. The head still carried `position: sticky; top: 110px` from the pass where
      it was a left-hand column beside a marquee. Centred at the top of the band
      that offset read as 110px of dead yellow above the heading. */
.tq-specials__head {
  position: static; top: auto;
  display: block;
}

/* 2. The primary button is YELLOW since the button pass, and this band is
      yellow — the CTA was yellow-on-yellow and effectively invisible. On this
      one ground it goes red with white on it (5.9:1); ink-on-yellow, which the
      button uses elsewhere, would have kept it flat against the band. */
.tq-specials__cta .tq-btn--primary {
  background: var(--tmt-red);
  color: var(--tmt-white);
  border-color: var(--tmt-red);
}
.tq-specials__cta .tq-btn--primary:hover,
.tq-specials__cta .tq-btn--primary:focus-visible {
  background: var(--tmt-red-deep); border-color: var(--tmt-red-deep); color: var(--tmt-white);
}

/* ===========================================================================
   SOCIALS — the closing band, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   After the Rreal Tacos reference: badge, two-line head, an ornamented rule,
   one line, the buttons, then three portrait photographs tilted out of true
   with the middle one taller and lifted.

   Ground: TEAL DEEP with the talavera tile. It lands between the rewards
   photograph and the cream footer, so it needs to be dark enough to separate
   from the footer and flat enough to separate from the photo. Teal repeats from
   the menu band but is nowhere near it, and the two carry different textures —
   the menu has the bottle line-work, this has the tile.
   ======================================================================== */
.tq-social {
  position: relative; isolation: isolate;
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 110px);
  background: var(--tmt-teal-deep) url('taq/fondo_talavera.webp') center / cover;
}
.tq-social::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--tmt-teal-deep); opacity: 0.86;
}
.tq-social__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tq-social__badge { width: clamp(58px, 6vw, 76px); height: auto; }

/* Two lines, two treatments: the first in the script the brand uses for warmth,
   the second in spaced display caps. */
.tq-social__h { margin: 14px 0 0; display: grid; gap: 2px; }
.tq-social__h span {
  font-family: var(--font-script, var(--tq-display));
  font-size: clamp(30px, 4.6vw, 56px); line-height: 1;
  color: var(--tmt-yellow);
}
.tq-social__h em {
  font-style: normal; font-family: var(--tq-display);
  font-size: clamp(22px, 3vw, 38px); line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tmt-white);
}

/* Rule with a diamond through the middle. */
.tq-social__rule { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; }
.tq-social__rule i { display: block; width: clamp(48px, 8vw, 92px); height: 1px; background: rgba(255,255,255,0.45); }
.tq-social__rule b {
  display: block; width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--tmt-yellow);
}

.tq-social__lede {
  margin: 16px 0 0; max-width: 46ch;
  font-family: var(--font-inria); font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6; color: rgba(255,255,255,0.86);
}

.tq-social__links { display: flex; gap: 12px; margin: 22px 0 0; }
.tq-social__btn {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--tmt-red); color: var(--tmt-white);
  transition: background 200ms var(--tq-ease), transform 200ms var(--tq-ease);
}
.tq-social__btn:hover, .tq-social__btn:focus-visible {
  background: var(--tmt-yellow); color: var(--tmt-ink); transform: translateY(-3px);
}

/* Three portraits. The middle one is taller and sits higher, which is what
   makes the row read as pinned-up snapshots rather than a gallery strip. */
.tq-social__shots {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center; gap: clamp(10px, 1.6vw, 22px);
  width: 100%; max-width: 900px; margin: clamp(34px, 4.5vw, 54px) auto 0;
}
.tq-social__shot {
  margin: 0; overflow: hidden;
  border-radius: 10px;
  background: var(--tmt-white);
  box-shadow: 0 16px 34px rgba(0,0,0,0.32);
  aspect-ratio: 3 / 4;
  transition: transform 320ms var(--tq-ease);
}
.tq-social__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-social__shot--1 { transform: rotate(-2.5deg); }
.tq-social__shot--2 { aspect-ratio: 3 / 4.5; transform: translateY(-18px) rotate(1deg); z-index: 1; }
.tq-social__shot--3 { transform: rotate(2.5deg); }
.tq-social__shot:hover { transform: rotate(0) translateY(-6px) scale(1.02); }
.tq-social__shot--2:hover { transform: translateY(-26px) rotate(0) scale(1.02); }

@media (max-width: 560px) {
  /* Three portraits across a phone are thumbnails. Two, and the tilt goes —
     at this width the overlap reads as a mistake rather than as a stack. */
  .tq-social__shots { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
  .tq-social__shot--3 { display: none; }
  .tq-social__shot--1, .tq-social__shot--2 { transform: none; aspect-ratio: 3 / 4; }
}
@media (prefers-reduced-motion: reduce) { .tq-social__shot, .tq-social__btn { transition-duration: 1ms; } }

/* ===========================================================================
   ANNOUNCEMENT TICKER + header social button — 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   From the Rreal Tacos header: a red band of running text above the nav, items
   divided by rules, with a pause control at the end.

   It sits in NORMAL FLOW rather than being fixed. Fixed would have meant
   re-deriving every top offset on the site — the interior heroes all clear the
   header with `calc(80px + …)` — whereas in flow the whole page simply starts
   38px lower and those sums stay correct. The header then only has to drop to
   top:0 once it shrinks, by which point the ticker has scrolled away anyway.
   ======================================================================== */
:root { --tq-tick-h: 38px; }

.tq-tick {
  position: relative; z-index: 62;
  display: flex; align-items: stretch;
  height: var(--tq-tick-h);
  background: var(--tmt-red); color: var(--tmt-white);
}
.tq-tick__view { flex: 1; overflow: hidden; display: flex; align-items: center; }
.tq-tick__track { display: flex; width: max-content; animation: tq-tick 38s linear infinite; }
.tq-tick__set { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.tq-tick__set li {
  display: flex; align-items: center; white-space: nowrap;
  padding: 0 clamp(16px, 2.2vw, 30px);
  font-family: var(--font-inria); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
/* The divider is a border on the item, not a character, so it lands between
   every pair including across the seam where the two sets meet. */
.tq-tick__set li + li, .tq-tick__set + .tq-tick__set li:first-child {
  border-left: 1px solid rgba(255,255,255,0.42);
}
@keyframes tq-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Paused by the button, and while the pointer is over the band. */
.tq-tick.is-paused .tq-tick__track,
.tq-tick:hover .tq-tick__track { animation-play-state: paused; }

.tq-tick__btn {
  flex: 0 0 auto; width: 38px; border: 0; cursor: pointer;
  border-left: 1px solid rgba(255,255,255,0.42);
  background: var(--tmt-red); color: var(--tmt-white);
  display: grid; place-items: center;
  transition: background 180ms var(--tq-ease);
}
.tq-tick__btn:hover, .tq-tick__btn:focus-visible { background: var(--tmt-red-deep); }
.tq-tick__play { display: none; }
.tq-tick.is-paused .tq-tick__pause { display: none; }
.tq-tick.is-paused .tq-tick__play  { display: block; }

/* The header hangs below the ticker, then takes the top once it shrinks. */
.tq-head { top: var(--tq-tick-h); }
.tq-head--small { top: 0; }

/* Moving text that starts on its own is exactly what this preference is for:
   stop it dead and hand back a scroller the reader drives. */
@media (prefers-reduced-motion: reduce) {
  .tq-tick__view { overflow-x: auto; }
  .tq-tick__track { animation: none; }
  .tq-tick__set:nth-child(2) { display: none; }
}

/* ---- the circular social button beside the CTA -------------------------- */
.tq-head__soc {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--tmt-red); color: var(--tmt-red);
  transition: background 180ms var(--tq-ease), color 180ms var(--tq-ease);
}
.tq-head__soc:hover, .tq-head__soc:focus-visible { background: var(--tmt-red); color: var(--tmt-white); }
/* On a phone the row is logo + CTA + burger already; the circle is the one
   thing there that the drawer and the footer both duplicate. */
@media (max-width: 720px) { .tq-head__soc { display: none; } }

/* ===========================================================================
   MOJITOS PASS — 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   Four things from that reference: the menu band's rows-beside-a-photo-panel,
   a "what's happening" rail, a catering teaser with a photo collage, and the
   tiled seam between bands.

   The menu's photo stopped following the cursor. With a fixed home the row can
   keep its sub-line visible at rest — the cursor version had to hide it so the
   picture never landed on small type.

   BAND RHYTHM, re-dealt (supersedes every earlier list in this file):

     1 hero        video
     2 statement   WHITE + monogram
       seam        tiled diamonds
     3 menu        TEAL DEEP + bottle texture
     4 events      CREAM DEEP
     5 the week    YELLOW + sunburst
     6 catering    WHITE + monogram
     7 reviews     TEAL DEEP + talavera
     8 rewards     PHOTOGRAPH
     9 socials     RED + talavera
       footer      CREAM DEEP

   Teal repeats at 3 and 7 and white at 2 and 6, never adjacent, and each pair
   carries a different texture. Socials moved teal -> red so it does not touch
   the reviews band's teal through the photograph.
   ======================================================================== */

/* ---- seam --------------------------------------------------------------- */
/* Drawn, not shipped: a repeating diamond is cheaper as two gradients than as
   an image request, and it recolours with whatever it is set against. */
.tq-seam {
  height: 22px;
  background-color: var(--tmt-cream-deep);
  background-image:
    linear-gradient(135deg, var(--tq-teal) 25%, transparent 25%),
    linear-gradient(225deg, var(--tq-teal) 25%, transparent 25%);
  background-size: 22px 22px;
  background-position: 0 0;
}
.tq-seam--red { background-image:
    linear-gradient(135deg, var(--tmt-red) 25%, transparent 25%),
    linear-gradient(225deg, var(--tmt-red) 25%, transparent 25%); }

/* ---- 3. menu: head, rows, photo panel ----------------------------------- */
.tq-menu {
  position: relative; isolation: isolate;
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--tq-teal) url('taq/fondo_tequila.webp') center / cover;
}
.tq-menu::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--tq-teal); opacity: 0.84;
}
.tq-menu__head { text-align: center; max-width: 60ch; margin: 0 auto clamp(30px, 4vw, 48px); }
.tq-menu__head .tq-h2 { color: var(--tmt-white); }
.tq-menu__lede {
  margin: 14px auto 0; max-width: 50ch;
  font-family: var(--font-inria); font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6; color: rgba(255,255,255,0.82);
}
.tq-menu__cta { margin-top: clamp(16px, 2vw, 22px); display: flex; justify-content: center; }
/* Eyebrow with a rule running out of both sides of it. */
.tq-menu__eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin: clamp(26px, 3.2vw, 38px) 0 0;
  font-family: var(--font-inria); font-size: var(--tq-lock-eyebrow);
  letter-spacing: var(--tq-lock-eyebrow-ls); text-transform: uppercase; color: var(--tmt-yellow);
}
.tq-menu__eyebrow::before, .tq-menu__eyebrow::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.28);
}

.tq-pick { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
@media (min-width: 900px) { .tq-pick { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }

.tq-prow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 0 clamp(12px, 1.8vw, 22px);
  padding: clamp(12px, 1.7vw, 20px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  text-decoration: none; color: var(--tmt-cream);
}
.tq-prow:first-child { border-top: 1px solid rgba(255,255,255,0.18); }
.tq-prow__n {
  font-family: var(--tq-display); font-size: clamp(15px, 1.4vw, 19px);
  color: rgba(255,255,255,0.38); transition: color 200ms var(--tq-ease);
}
.tq-prow__txt { display: grid; gap: 2px; min-width: 0; }
.tq-prow__name {
  font-family: var(--tq-display); font-size: clamp(18px, 2vw, 26px);
  line-height: 1.06; text-transform: uppercase; color: var(--tmt-white);
  transition: color 200ms var(--tq-ease);
}
.tq-prow__sub {
  font-family: var(--font-inria); font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.tq-prow__go {
  display: grid; place-items: center;
  width: clamp(30px, 3vw, 36px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.34); color: var(--tmt-cream);
  transition: background 200ms var(--tq-ease), color 200ms var(--tq-ease),
              border-color 200ms var(--tq-ease), transform 200ms var(--tq-ease);
}
/* Hover AND the .is-on the script sets, so the row the panel is showing looks
   chosen even when the pointer has moved on. */
.tq-prow:hover .tq-prow__name, .tq-prow.is-on .tq-prow__name,
.tq-prow:focus-visible .tq-prow__name { color: var(--tmt-yellow); }
.tq-prow:hover .tq-prow__n, .tq-prow.is-on .tq-prow__n { color: var(--tmt-yellow); }
.tq-prow:hover .tq-prow__go, .tq-prow.is-on .tq-prow__go, .tq-prow:focus-visible .tq-prow__go {
  background: var(--tmt-yellow); color: var(--tmt-ink);
  border-color: var(--tmt-yellow); transform: translateX(3px);
}

.tq-pick__panel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--tq-r-card); aspect-ratio: 4 / 5;
  box-shadow: 0 20px 44px rgba(0,0,0,0.34);
}
.tq-pick__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: opacity 260ms var(--tq-ease), transform 700ms var(--tq-ease);
}
.tq-pick__panel.is-swapping .tq-pick__img { opacity: 0; }
.tq-pick__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.1) 55%);
}
.tq-pick__cap {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  display: flex; align-items: baseline; gap: 10px;
  padding: clamp(14px, 2vw, 22px);
}
.tq-pick__cn { font-family: var(--tq-display); font-size: 13px; color: var(--tmt-yellow); }
.tq-pick__cl {
  font-family: var(--tq-display); font-size: clamp(18px, 2vw, 24px);
  text-transform: uppercase; color: var(--tmt-white);
}
/* No pointer, no swap to see: the panel is one static photo and the rows carry
   the whole list, which they already do at every width. */
@media (max-width: 899px) { .tq-pick__panel { aspect-ratio: 16 / 10; } }

/* ---- 4. what's happening ------------------------------------------------ */
.tq-happening { padding: clamp(56px, 7vw, 96px) 0; background: var(--tmt-cream-deep); }
.tq-happening__head { text-align: center; max-width: 58ch; margin: 0 auto clamp(28px, 3.5vw, 42px); }
.tq-happening__head .tq-h2 { display: block; }
.tq-happening__orn {
  display: inline-block; width: 14px; height: 14px; margin: 0 12px;
  vertical-align: 0.15em; transform: rotate(45deg);
  background: var(--tmt-yellow); border: 2px solid var(--tmt-red);
}
.tq-happening__lede {
  margin: 12px auto 0; max-width: 48ch;
  font-family: var(--font-inria); font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6; color: var(--tmt-charcoal);
}
.tq-happening__cta { margin-top: clamp(16px, 2vw, 22px); display: flex; justify-content: center; }
.tq-hap {
  display: flex; flex-direction: column; height: 100%;
  background: var(--tmt-white); border-radius: var(--tq-r-card); overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,0.1);
}
.tq-hap__media { position: relative; aspect-ratio: 16 / 10; }
.tq-hap__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-hap__tag {
  position: absolute; top: 10px; left: 10px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--tmt-yellow); color: var(--tmt-ink);
  font-family: var(--font-inria); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.tq-hap__body { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 20px; flex: 1; }
.tq-hap__title {
  margin: 0; font-family: var(--tq-display); font-size: 19px;
  line-height: 1.1; text-transform: uppercase; color: var(--tmt-red);
}
.tq-hap__text { margin: 0; flex: 1; font-family: var(--font-inria); font-size: 14px; line-height: 1.5; color: var(--tmt-charcoal); }
.tq-hap__when {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  margin: 4px 0 0; padding: 6px 12px; border-radius: 999px;
  background: var(--tmt-cream-deep); color: var(--tmt-teal-ink);
  font-family: var(--font-inria); font-size: 12.5px;
}

/* ---- 6. catering teaser ------------------------------------------------- */
.tq-catease {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--tmt-white) url('taq/fondo_tequilamama.webp') center / cover;
}
.tq-catease__inner { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .tq-catease__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.tq-catease__rule { display: block; width: 84px; height: 3px; background: var(--tmt-red); margin: 0 0 14px; }
.tq-catease__copy .tq-h2 + .tq-catease__rule { margin: 14px 0 0; }
.tq-catease__text {
  margin: 18px 0 0; max-width: 46ch;
  font-family: var(--font-inria); font-size: clamp(15px, 1.4vw, 16.5px);
  line-height: 1.6; color: var(--tmt-charcoal);
}
.tq-catease__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tq-pill {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.2); background: var(--tmt-cream);
  font-family: var(--font-inria); font-size: 12.5px; color: var(--tmt-charcoal);
}
.tq-catease__cta { margin-top: 22px; }
.tq-catease__shots {
  display: grid; gap: clamp(8px, 1.2vw, 14px);
  grid-template-columns: 1.15fr 1fr; grid-template-rows: repeat(2, 1fr);
}
.tq-catease__shot { margin: 0; overflow: hidden; border-radius: var(--tq-r-card); box-shadow: 0 12px 28px rgba(0,0,0,0.14); }
.tq-catease__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-catease__shot--1 { grid-row: 1 / span 2; }

/* ---- 7. reviews, as the Mojitos band ------------------------------------ */
.tq-revs {
  position: relative; isolation: isolate;
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--tq-teal) url('taq/fondo_talavera.webp') center / cover;
}
.tq-revs::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--tq-teal); opacity: 0.88;
}
.tq-revs .tq-wrap { position: relative; z-index: 1; }
.tq-revs__head { text-align: center; max-width: 58ch; margin: 0 auto clamp(28px, 3.5vw, 44px); }
.tq-revs__head .tq-h2 { color: var(--tmt-white); }
.tq-revs__star {
  display: block; width: 22px; height: 22px; margin: 0 auto 14px;
  background: var(--tmt-yellow);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.tq-revs__lede {
  margin: 12px auto 0; max-width: 46ch;
  font-family: var(--font-inria); font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6; color: rgba(255,255,255,0.84);
}
.tq-revs__cta { margin-top: clamp(16px, 2vw, 22px); display: flex; justify-content: center; }

.tq-revroll { overflow: visible; }
.tq-revroll .tq-rail__track { align-items: center; padding: 18px 0; }
.tq-revcard {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: clamp(22px, 2.6vw, 32px) clamp(18px, 2.2vw, 26px);
  background: var(--tmt-cream); border-radius: var(--tq-r-card);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  text-align: center; height: 100%;
  transition: transform 340ms var(--tq-ease), box-shadow 340ms var(--tq-ease), background 340ms var(--tq-ease);
}
/* The centre card of the three, raised. Which one that IS depends on the rail's
   position, so the script marks it — CSS has no way to know. */
.tq-rail__item.is-mid .tq-revcard {
  transform: translateY(-14px) scale(1.04);
  box-shadow: 0 22px 46px rgba(0,0,0,0.34);
  background: var(--tmt-white);
}
.tq-revcard__quo {
  font-family: var(--tq-display); font-size: 44px; line-height: 0.5;
  color: var(--tmt-yellow);
}
.tq-revcard__stars { margin: 0; font-size: 15px; letter-spacing: 0.1em; color: var(--tmt-yellow-deep); }
.tq-revcard__quote { margin: 0; flex: 1; }
.tq-revcard__quote p {
  margin: 0; font-family: var(--font-inria);
  font-size: 15px; line-height: 1.6; color: var(--tmt-ink);
}
.tq-revcard__av {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--tmt-red); color: var(--tmt-white);
  font-family: var(--tq-display); font-size: 18px; line-height: 1;
}
.tq-revcard__by {
  font-family: var(--tq-display); font-style: normal;
  font-size: 16px; text-transform: uppercase; color: var(--tmt-red);
}
.tq-revcard__src {
  font-family: var(--font-inria); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tmt-stone);
}

/* ---- 9. socials moves teal -> red --------------------------------------- */
/* Reviews took the teal-and-talavera treatment, and these two would otherwise
   have been the same band twice with only a photograph between them. */
.tq-social { background: var(--tmt-red) url('taq/fondo_talavera.webp') center / cover; }
.tq-social::before { background: var(--tmt-red); opacity: 0.84; }
.tq-social__h span { color: var(--tmt-yellow); }
.tq-social__btn { background: var(--tmt-ink); }
.tq-social__btn:hover, .tq-social__btn:focus-visible { background: var(--tmt-yellow); color: var(--tmt-ink); }

/* The reviews rail needed `overflow: visible` so the raised centre card's lift
   and shadow are not clipped — but visible on BOTH axes let the track spill and
   put a 223px horizontal scrollbar on the page. `clip` on x with `visible` on y
   is the pair that does what was actually wanted; `hidden` cannot do it, because
   hidden on one axis forces the other into a scroll container. */
.tq-revroll { overflow: visible; overflow-x: clip; }

/* ---- More: the icon panel ----------------------------------------------- */
.tq-more__panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  width: min(680px, calc(100vw - 32px));
  padding: clamp(16px, 2vw, 24px);
  background: var(--tmt-cream); border-radius: var(--tq-r-card);
  box-shadow: 0 22px 54px rgba(0,0,0,0.26);
  z-index: 70;
}
.tq-more__grid { display: grid; grid-template-columns: 1fr; gap: 4px 18px; }
@media (min-width: 620px) { .tq-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tq-mitem {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  align-items: start; padding: 11px 12px; border-radius: 12px;
  text-decoration: none; transition: background 160ms var(--tq-ease);
}
.tq-mitem:hover, .tq-mitem:focus-visible { background: var(--tmt-white); }
.tq-mitem__ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: color-mix(in oklab, var(--tmt-teal) 16%, transparent);
  color: var(--tmt-teal-ink);
  transition: background 160ms var(--tq-ease), color 160ms var(--tq-ease);
}
.tq-mitem:hover .tq-mitem__ico, .tq-mitem:focus-visible .tq-mitem__ico {
  background: var(--tmt-red); color: var(--tmt-white);
}
.tq-mitem__txt { display: grid; gap: 2px; }
.tq-mitem__t {
  font-family: var(--tq-display); font-size: 16px;
  text-transform: uppercase; color: var(--tmt-red);
}
.tq-mitem__d { font-family: var(--font-inria); font-size: 12.5px; line-height: 1.45; color: var(--tmt-charcoal); }

/* ---- the gallery strip -------------------------------------------------- */
.tq-gal { overflow: hidden; background: var(--tmt-ink); }
.tq-gal__track { display: flex; width: max-content; animation: tq-gal 52s linear infinite; }
.tq-gal__set { display: flex; }
.tq-gal__cell {
  margin: 0; flex: 0 0 auto;
  width: clamp(180px, 19vw, 280px); aspect-ratio: 4 / 5;
  overflow: hidden;
}
.tq-gal__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-gal:hover .tq-gal__track { animation-play-state: paused; }
@keyframes tq-gal { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tq-gal { overflow-x: auto; }
  .tq-gal__track { animation: none; }
  .tq-gal__set:nth-child(2) { display: none; }
}

/* ===========================================================================
   BUTTONS — one system, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   Rounded rectangles, never pills. Two rest states and one hover state:

     on a dark or photographic ground   YELLOW with ink on it
     on a YELLOW ground                 WHITE with ink on it
     hover / focus, everywhere          RED with white on it

   Yellow is the default because most grounds on this site are dark or
   photographic. The only ground it cannot sit on is yellow itself — that is the
   invisible-CTA bug from the specials band — so those bands flip to white. Ink
   on both measures over 10:1; white on red is 5.9:1.

   This replaces the earlier ghost/primary split, where ghost was a transparent
   button with a white border built for a dark band and unreadable anywhere else.
   ======================================================================== */
.tq-btn,
.tq-btn--primary,
.tq-btn--ghost {
  border-radius: var(--tq-r-btn);
  background: var(--tmt-yellow);
  color: var(--tmt-ink);
  border: 2px solid var(--tmt-yellow);
  transform: none;
}
.tq-btn:hover, .tq-btn:focus-visible,
.tq-btn--primary:hover, .tq-btn--primary:focus-visible,
.tq-btn--ghost:hover, .tq-btn--ghost:focus-visible {
  background: var(--tmt-red);
  border-color: var(--tmt-red);
  color: var(--tmt-white);
  transform: none;
}
.tq-btn:active, .tq-btn--primary:active, .tq-btn--ghost:active { transform: scale(0.98); }

/* Ghost keeps its role as the SECOND button in a pair — same shape, outlined
   rather than filled, so a pair does not read as two equal asks. */
.tq-btn--ghost { background: transparent; color: var(--tmt-yellow); border-color: var(--tmt-yellow); }

/* The yellow grounds. Anything else stays yellow. */
.tq-specials .tq-btn, .tq-specials .tq-btn--primary,
.tq-live .tq-btn, .tq-foot__sub button {
  background: var(--tmt-white); border-color: var(--tmt-white); color: var(--tmt-ink);
}
.tq-specials .tq-btn--ghost { background: transparent; color: var(--tmt-ink); border-color: var(--tmt-ink); }
.tq-specials .tq-btn:hover, .tq-specials .tq-btn:focus-visible,
.tq-specials .tq-btn--primary:hover, .tq-specials .tq-btn--primary:focus-visible,
.tq-foot__sub button:hover {
  background: var(--tmt-red); border-color: var(--tmt-red); color: var(--tmt-white);
}

/* The floating order button is a button too: rectangle, yellow, red on hover. */
.tq-fab__btn {
  border-radius: var(--tq-r-btn);
  background: var(--tmt-yellow); color: var(--tmt-ink);
}
.tq-fab__btn:hover { background: var(--tmt-red); color: var(--tmt-white); transform: none; }
.tq-fab[open] .tq-fab__btn { background: var(--tmt-red); color: var(--tmt-white); }

/* The ticker is unhooked; its rules are dead. */
.tq-tick { display: none; }
.tq-head, .tq-head--small { top: 0; }

/* ===========================================================================
   DENSITY + COLOUR PASS — 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   The page had grown to ~8,900px, and roughly 1,700 of that was band padding
   alone: nine bands each clamping to 96px top AND bottom. Nothing was
   overlapping — every section is in normal flow and the page has no horizontal
   overflow — it was simply too airy to read as one page.

   Padding comes down to a 72px ceiling, and the two loudest offenders are
   trimmed harder:

     socials  1014px for a badge, a headline and three photographs. The ground
              also went to RED-DEEP: full-strength red over a field that size
              fought the red used for every heading and button on the page,
              rather than reading as a ground behind them.
     events   1217px, mostly because each card carried a 16:10 photo above a
              body that already had a title, copy and a time chip.

   No band changed which colour it is — only how much of it there is.
   ======================================================================== */
.tq-stmt, .tq-menu, .tq-happening, .tq-specials,
.tq-catease, .tq-revs, .tq-rw {
  padding-top: var(--tq-pad-section);
  padding-bottom: var(--tq-pad-section);
}

/* ---- socials: smaller, and calmer red ----------------------------------- */
.tq-social {
  padding: clamp(40px, 4.6vw, 64px) 0 clamp(44px, 5vw, 70px);
  background: var(--tmt-red-deep) url('taq/fondo_talavera.webp') center / cover;
}
.tq-social::before { background: var(--tmt-red-deep); opacity: 0.86; }
.tq-social__badge { width: clamp(46px, 4.4vw, 58px); }
.tq-social__h { margin-top: 10px; }
.tq-social__h span { font-size: var(--tq-lock-script); }
.tq-social__h em { font-size: clamp(18px, 2.4vw, 30px); }
.tq-social__rule { margin-top: 12px; }
.tq-social__lede { margin-top: 12px; font-size: clamp(14px, 1.3vw, 16px); }
.tq-social__links { margin-top: 16px; }
.tq-social__btn { width: 40px; height: 40px; border-radius: 10px; }
/* The photographs were the bulk of the height: three portraits at 3/4 of a
   900px row is ~390px before the lift. Squarer and narrower halves it. */
.tq-social__shots { max-width: 720px; margin-top: clamp(24px, 3vw, 34px); gap: clamp(8px, 1.2vw, 16px); }
.tq-social__shot { aspect-ratio: 1 / 1; }
.tq-social__shot--2 { aspect-ratio: 1 / 1.15; transform: translateY(-12px) rotate(1deg); }
.tq-social__shot--2:hover { transform: translateY(-18px) rotate(0) scale(1.02); }

/* ---- events cards: shorter ---------------------------------------------- */
.tq-hap__media { aspect-ratio: 16 / 11; }
.tq-hap__body { padding: 14px 16px 16px; gap: 6px; }
.tq-hap__title { font-size: 17px; }
.tq-hap__text { font-size: 13.5px; }
.tq-happening__head { margin-bottom: clamp(22px, 2.6vw, 32px); }

/* ---- menu band: the tallest of them all --------------------------------- */
.tq-menu__head { margin-bottom: clamp(24px, 3vw, 36px); }
.tq-menu__eyebrow { margin-top: clamp(20px, 2.4vw, 28px); }
.tq-prow { padding: clamp(10px, 1.4vw, 16px) 0; }
.tq-pick__panel { aspect-ratio: 1 / 1; }

/* ---- the gallery is a seam, not a band ---------------------------------- */
.tq-gal__cell { width: clamp(120px, 12vw, 170px); }

/* ---- two faults from the density pass ----------------------------------- */
/* 1. The menu panel read as a black box. Its scrim was a full-height gradient
      topping out at 80% black — fine over a bright plate, but the default
      category is a dark drink shot and the two stacked into an unreadable
      rectangle. The scrim now only does the job it exists for: carrying the
      caption, in the bottom third, and nothing above that. */
.tq-pick__scrim {
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.34) 22%, rgba(0,0,0,0) 46%);
}
/* 4:5 suits plate photography better than the square, and it matches the height
   of the rows beside it more closely. */
.tq-pick__panel { aspect-ratio: 4 / 5; }
@media (max-width: 899px) { .tq-pick__panel { aspect-ratio: 16 / 10; } }

/* 2. "Catering that tastes like Mama cooked it" wrapped to FOUR lines in its
      column at the display size — the heading is shorter now, and the band
      caps the scale so a longer one cannot do it again. */
.tq-catease .tq-h2 { font-size: var(--tq-lock-title-sm); }

/* ===========================================================================
   FLUID-INTERFACE PASS — 2026-09-09
   ---------------------------------------------------------------------------
   Four gaps found auditing the site against Apple's fluid-interface and
   typography guidance. Not a rewrite — this site has no drag gestures, so
   springs and velocity handoff have nothing to attach to. These are the parts
   that DO apply.
   ======================================================================== */

/* ---- 1. Response: the press must be instant ----------------------------- */
/* Every button carried one 200ms transition covering background AND transform,
   so the pressed state — the one piece of feedback that has to feel immediate —
   arrived a fifth of a second late. Colour can take its time; the press cannot.
   Feedback is on :active, which fires on pointer-DOWN, not on release. */
.tq-btn, .tq-btn--primary, .tq-btn--ghost, .tq-fab__btn {
  transition: background-color 200ms var(--tq-ease),
              border-color 200ms var(--tq-ease),
              color 200ms var(--tq-ease),
              transform 90ms ease-out;
}
.tq-btn:active, .tq-btn--primary:active, .tq-btn--ghost:active, .tq-fab__btn:active {
  transform: scale(0.97);
}
/* The same instant press on the other things that are really buttons. */
.tq-mitem:active, .tq-social__btn:active, .tq-arrow:active,
.tq-menufilter__pills button:active, .tq-menufilter__chips button:active {
  transform: scale(0.97);
  transition: transform 90ms ease-out;
}

/* ---- 2. Anchored origins: surfaces grow from what opened them ----------- */
/* Both overlays appeared at full size with no origin, so neither had any
   spatial relationship to the control that summoned it. Each now scales out of
   its own trigger — the More panel from the top centre, under the More button;
   the order sheet from its bottom-right corner, where the button sits.
   Blur and scale animate together so the surface reads as arriving material
   rather than as opacity being turned up (§12, "materialize, don't just fade"). */
.tq-more__panel {
  transform-origin: top center;
  animation: tq-materialize 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tq-fab__sheet {
  transform-origin: bottom right;
  animation: tq-materialize 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tq-materialize {
  from { opacity: 0; transform: scale(0.92); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}

/* ---- 3. Typography: tracking is size-specific --------------------------- */
/* Rauda Slab set at 30–74px with tracking at 0 reads loose — letters drift
   apart as display type grows. Large headings tighten; the small uppercase
   labels already open up (0.1–0.22em), which is the correct opposite move and
   is left alone. */
.tq-h2, .tq-stmt__big, .tq-menupage__title, .tq-cater__title,
.tq-about__title, .tq-rw__title, .tq-social__h em {
  letter-spacing: -0.015em;
}
/* Above ~48px it wants a touch more. */
@media (min-width: 900px) {
  .tq-stmt__big, .tq-about__title, .tq-rw__title { letter-spacing: -0.022em; }
}

/* ---- 4. The other two accessibility signals ---------------------------- */
/* prefers-reduced-motion was already handled in thirteen places. These two
   were handled nowhere. */
@media (prefers-reduced-transparency: reduce) {
  /* Every translucent surface goes solid; the blur that made them read as
     material is exactly what this preference is asking to remove. */
  .tq-more__panel, .tq-fab__sheet { background: var(--tmt-white); animation: none; }
  .tq-menuev::before, .tq-revs::before, .tq-social::before,
  .tq-menu::before, .tq-story::before { opacity: 1; }
  .tq-tile__scrim { background: rgba(0,0,0,0.72); }
}
@media (prefers-contrast: more) {
  /* Near-solid grounds with a defined border, and hairlines that actually
     read — the 0.18 alpha rules on the dark bands sit under any contrast
     floor worth the name. */
  .tq-more__panel, .tq-fab__sheet { background: var(--tmt-white); border: 2px solid var(--tmt-ink); }
  .tq-prow { border-bottom-color: rgba(255,255,255,0.55); }
  .tq-prow:first-child { border-top-color: rgba(255,255,255,0.55); }
  .tq-evnext li { border-bottom-color: rgba(255,255,255,0.55); }
  .tq-prow__sub { color: rgba(255,255,255,0.85); }
  .tq-menu__lede, .tq-revs__lede, .tq-social__lede { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .tq-more__panel, .tq-fab__sheet { animation-duration: 1ms; }
}

/* ---- socials: calmer ground, visible buttons, a stated edge ------------- */
/* Full-strength red over a band this size was hard to sit with, and the dark
   social buttons on it measured badly. The band goes to the warm cream paper —
   the frames and the script headline carry the colour now instead of the ground
   shouting underneath them. */
.tq-social {
  background: var(--tmt-cream) url('taq/fondo_talavera.webp') center / cover;
  padding-bottom: clamp(56px, 6.5vw, 88px);
}
.tq-social::before { background: var(--tmt-cream); opacity: 0.9; }
.tq-social__h span { color: var(--tmt-red); }
.tq-social__h em   { color: var(--tmt-ink); }
.tq-social__rule i { background: rgba(0,0,0,0.25); }
.tq-social__lede   { color: var(--tmt-charcoal); }
.tq-social__badge  { filter: none; }
/* Red on cream, white glyph — 5.9:1, where the ink-on-red pairing before was
   the two darkest things on the page sitting on each other. */
.tq-social__btn {
  background: var(--tmt-red); color: var(--tmt-white);
  box-shadow: 0 4px 12px rgba(0,0,0,0.16);
}
.tq-social__btn:hover, .tq-social__btn:focus-visible {
  background: var(--tmt-ink); color: var(--tmt-yellow); transform: translateY(-3px);
}
/* The frames hold video now, so they need the same box an <img> had. */
.tq-social__media { width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-social__shot { background: var(--tmt-white); border: 5px solid var(--tmt-white); }

/* The footer opens straight onto its columns now that the subscribe strip has
   gone, so it needs its own top padding — the strip had been providing it. */
.tq-foot { padding-top: clamp(40px, 5vw, 68px); }
.tq-foot__sub { display: none; }

/* ===========================================================================
   SOCIALS WHITE, FOOTER BLACK — 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   The band goes flat white — no tile, no wash — so the three frames and the
   script headline are the only colour in it. The footer takes ink beneath, and
   the red seam between them states the edge.

   Every colour in the footer had been chosen for a cream ground and has to be
   re-picked, not just inverted: red on ink measures 4.0:1, under the 4.5 floor,
   so links and the phone go YELLOW (10.4:1 on ink) and red is kept for the
   headings alone, where it sits large enough to pass as non-body text.
   ======================================================================== */
.tq-social {
  background: var(--tmt-white);
  padding-bottom: clamp(52px, 6vw, 78px);
}
.tq-social::before { display: none; }
.tq-social__h span { color: var(--tmt-red); }
.tq-social__h em   { color: var(--tmt-ink); }
.tq-social__rule i { background: rgba(0,0,0,0.2); }
.tq-social__lede   { color: var(--tmt-charcoal); }
.tq-social__shot   { border-color: var(--tmt-white); box-shadow: 0 14px 30px rgba(0,0,0,0.2); }

/* ---- the footer, on ink ------------------------------------------------- */
.tq-foot { background: var(--tmt-ink); color: var(--tmt-cream); }
.tq-foot__h { color: var(--tmt-yellow); }
.tq-foot__menu a { color: rgba(255,255,255,0.82); }
.tq-foot__menu a:hover, .tq-foot__menu a:focus-visible { color: var(--tmt-yellow); text-decoration: underline; }
.tq-foot__menu--small a { color: rgba(255,255,255,0.62); }
.tq-foot__open { color: var(--tmt-yellow); }
.tq-foot__hours th, .tq-foot__hours td { color: rgba(255,255,255,0.82); }
.tq-foot__addr { color: rgba(255,255,255,0.82); }
/* Red on ink is 4.0:1 — under the floor for something this small. */
.tq-foot__addr a { color: var(--tmt-yellow); }
.tq-foot__soc { background: var(--tmt-red); color: var(--tmt-white); }
.tq-foot__soc:hover, .tq-foot__soc:focus-visible { background: var(--tmt-yellow); color: var(--tmt-ink); }
.tq-foot__main { border-bottom-color: rgba(255,255,255,0.16); }
.tq-foot__copy p, .tq-foot__copy a { color: rgba(255,255,255,0.5); }
.tq-foot__copy a:hover { color: var(--tmt-yellow); }
/* The wordmark is red script with a yellow rule — it holds on ink as it is, but
   the drop-shadow it carried for a light ground has to go or it muddies. */
.tq-foot__logo { filter: none; }

/* The hours table arrives with INLINE colours from tm_hour_rows() — charcoal
   text, a red-ink highlight for today and a hairline mixed from --tmt-ink —
   all correct for the cream ground it was written for, and all invisible on
   ink. That same function renders the contact page on cream, so it cannot be
   changed at source; it is overridden here, scoped to the footer.

   Today's row is found with :has() on the inline font-weight the function
   writes, since the markup carries no class to hook. */
.tq-foot__hours th, .tq-foot__hours td {
  color: rgba(255,255,255,0.8) !important;
  border-bottom-color: rgba(255,255,255,0.14) !important;
}
.tq-foot__hours tr:has(th[style*="font-weight:700"]) th,
.tq-foot__hours tr:has(th[style*="font-weight:700"]) td {
  color: var(--tmt-yellow) !important;
}
/* tm_open_line() is plain text, but the rule above must not out-specify it. */
.tq-foot__open { color: var(--tmt-yellow) !important; }

/* ===========================================================================
   FOOTER — white, and three faults fixed, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   The ink treatment is reverted and the red diamond seam is gone. With the
   socials band and the footer both white there is nothing left to separate
   them, so the footer states its own top edge with a hairline — the job the
   seam was doing, without the triangles.

   Three things that were actually broken, all measured:

   1. THE CREDIT LINE WAS UNREADABLE. "Design & build: Starlight Media" ended at
      x=1286 and the floating order button starts at x=1278 — the button sat on
      top of it on every page, at every width where both show. The button now
      gets out of the way once the footer is on screen (home-taq.js): the footer
      carries ordering links of its own, so nothing is lost by hiding it there.
   2. THE BRAND COLUMN HAD NO HEADING while the other two did. It has one now.
   3. THE COLUMNS WERE LOPSIDED — 427 / 305 / 305 for a column holding a logo
      and six short links, so it ran a third empty while the other two were
      tight. Evened out.
   ======================================================================== */
.tq-foot {
  background: var(--tmt-cream-deep);
  color: var(--tmt-ink);
  border-top: 1px solid rgba(0,0,0,0.12);
  padding-top: clamp(40px, 5vw, 68px);
}
.tq-foot__h { color: var(--tmt-red); }
.tq-foot__menu a { color: var(--tmt-ink); }
.tq-foot__menu a:hover, .tq-foot__menu a:focus-visible { color: var(--tmt-red); text-decoration: underline; }
.tq-foot__menu--small a { color: var(--tmt-charcoal); }
.tq-foot__open { color: var(--tmt-teal-ink) !important; }
.tq-foot__hours th, .tq-foot__hours td {
  color: var(--tmt-ink) !important;
  border-bottom-color: rgba(0,0,0,0.12) !important;
}
.tq-foot__hours tr:has(th[style*="font-weight:700"]) th,
.tq-foot__hours tr:has(th[style*="font-weight:700"]) td { color: var(--tmt-red) !important; }
.tq-foot__addr { color: var(--tmt-ink); }
.tq-foot__addr a { color: var(--tmt-red); }
.tq-foot__soc { background: var(--tmt-ink); color: var(--tmt-cream); }
.tq-foot__soc:hover, .tq-foot__soc:focus-visible { background: var(--tmt-red); color: var(--tmt-white); }
.tq-foot__main { border-bottom-color: rgba(0,0,0,0.14); }
.tq-foot__copy p, .tq-foot__copy a { color: var(--tmt-charcoal); }
.tq-foot__copy a:hover { color: var(--tmt-red); }

/* Even columns; the brand one no longer runs a third empty. */
@media (min-width: 768px) {
  .tq-foot__main { grid-template-columns: 1.1fr 1fr 1fr; }
}
.tq-foot__about .tq-foot__h { margin-top: 4px; }

/* The button is hidden over the footer, so the credit line can have the corner
   back — but keep a little clearance for the moment before the observer fires. */
.tq-foot__copy { padding-bottom: 8px; }

/* The floating button stepping aside over the footer. Translated rather than
   hidden, so it slides out and back instead of blinking. */
.tq-fab { transition: transform 280ms var(--tq-ease), opacity 220ms var(--tq-ease); }
.tq-fab.is-away { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tq-fab { transition-duration: 1ms; } }

/* ===========================================================================
   CLOSING PROMO + a symmetry pass — 2026-09-09 (Santi)
   ======================================================================== */

/* ---- the closing panel -------------------------------------------------- */
.tq-promo { background: var(--tmt-cream-deep); padding: clamp(36px, 4.4vw, 60px) 0 clamp(44px, 5vw, 68px); }
.tq-promo__panel {
  position: relative;
  display: grid; grid-template-columns: 1fr; align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(26px, 3.4vw, 44px);
  background: var(--tmt-teal-deep);
  border-radius: var(--tq-r-card);
  /* NOT overflow:hidden — the photographs are supposed to break the corner,
     and clipping them here is what would turn the effect into a plain inset. */
  overflow: visible;
}
.tq-promo__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-family: var(--font-inria); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tmt-yellow);
}
.tq-promo__eyebrow img { width: 26px; height: auto; display: block; }
.tq-promo__h {
  margin: 0; max-width: 18ch;
  font-family: var(--tq-display); font-size: clamp(26px, 3.6vw, 46px);
  line-height: 1.02; letter-spacing: -0.015em;
  text-transform: uppercase; color: var(--tmt-red);
}
.tq-promo__cta { margin-top: clamp(18px, 2.2vw, 26px); }
.tq-promo__shots { position: relative; min-height: 180px; }
.tq-promo__shot {
  position: absolute; width: 56%; aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: 6px;
  border: 5px solid var(--tmt-cream);
  box-shadow: 0 16px 34px rgba(0,0,0,0.34);
}
.tq-promo__shot--1 { top: -34%; left: 4%;  transform: rotate(-5deg); }
.tq-promo__shot--2 { top: -6%;  right: 2%; transform: rotate(4deg); }
@media (min-width: 820px) {
  .tq-promo__panel { grid-template-columns: 1.15fr 1fr; }
  .tq-promo__shots { min-height: 230px; }
}
@media (max-width: 819px) {
  /* Breaking out of the corner needs a corner to break out of; stacked, the
     photographs sit inside the panel instead. */
  .tq-promo__shots { min-height: 210px; }
  .tq-promo__shot--1 { top: 0; }
  .tq-promo__shot--2 { top: 14%; }
}

/* ---- symmetry ----------------------------------------------------------- */
/* Section heads were a mix: some centred, some left, some centred with a
   left-aligned lede under them. They all centre now, with the same measure and
   the same rhythm above and below, so the bands stack as one page rather than
   as a run of separately-designed blocks. */
.tq-menu__head, .tq-happening__head, .tq-specials__head,
.tq-revs__head, .tq-social__inner, .tq-cater__head {
  text-align: center; margin-left: auto; margin-right: auto;
}
.tq-menu__lede, .tq-happening__lede, .tq-specials__lede,
.tq-revs__lede, .tq-social__lede {
  margin-left: auto; margin-right: auto; text-align: center;
}
/* Every band's head sits the same distance off its content. */
.tq-menu__head, .tq-happening__head, .tq-specials__head, .tq-revs__head {
  margin-bottom: clamp(26px, 3.2vw, 40px);
}
/* The one band that stays two-column keeps its copy left — centred text beside
   a photo collage reads as a caption for it. */
.tq-catease__copy { text-align: left; }

/* ===========================================================================
   ACCESSIBILITY + CONSISTENCY PASS — 2026-09-09
   ---------------------------------------------------------------------------
   Measured, not guessed. Every ratio below was computed against the actual
   composited background, with the WCAG threshold that applies at that text's
   real size and weight (3:1 for large text, 4.5:1 otherwise).

   WHAT ACTUALLY FAILED:

     promo headline        1.17:1  ← severe. Chile red on teal-deep. My own
                                     regression from the closing-panel band.
     menu row sub-line     2.54:1  white at 55% on teal
     menu row number       3.11:1  white at 38% on teal
     event card title      4.09:1  chile red at 17px on white
     menu card dish name   ~3.9:1  chile red at 15–17px on white (menu page)

   WHAT DID NOT FAIL, despite being flagged:
     red section headings  3.54:1 at 56px — large text, threshold is 3:1. Pass.
     menu row NAME         3.11:1 at 26px — large text. Pass.
     event copy, catering copy, review quotes, footer links, socials lede —
     all 12:1 or better.

   The specials tile copy measures 1.47:1 only because the checker resolves the
   tile's background to a colour; the text actually sits on a photograph under a
   0.86-black gradient. Left alone — the scrim is the mechanism there.
   ======================================================================== */

/* ---- the severe one: red on teal ---------------------------------------- */
/* Chile red on teal-deep is 1.17:1 — very nearly invisible, and the headline
   is the whole point of that panel. Cream carries it at 9.4:1 and the red moves
   to the eyebrow, where it sits on the same ground but is not load-bearing. */
.tq-promo__h { color: var(--tmt-cream); }
.tq-promo__eyebrow { color: var(--tmt-yellow); }

/* ---- the teal menu rows ------------------------------------------------- */
/* 0.55 -> 0.82 alpha takes the sub-line from 2.54:1 to about 5.6:1, and the
   number from 3.11 to 4.6. Both are small text, so 4.5 is the bar. */
.tq-prow__sub { color: rgba(255,255,255,0.82); }
.tq-prow__n   { color: rgba(255,255,255,0.6); }
.tq-prow:hover .tq-prow__n, .tq-prow.is-on .tq-prow__n { color: var(--tmt-yellow); }

/* ---- small red text on white ------------------------------------------- */
/* Chile red is a 3.9:1 colour on white — fine for a 56px heading, not for a
   17px card title. These take --tmt-red-ink (#8E0F14), the token that exists
   precisely for red text at body sizes: 8.2:1. The brand red stays on the big
   headings, where it passes and where it belongs. */
.tq-hap__title { color: var(--tmt-red-ink); }
.tq-evnext__when { color: var(--tmt-yellow); }

/* ---- tap targets -------------------------------------------------------- */
/* The social buttons were 38–40px. 44×44 is the floor for a touch target; the
   icon inside stays the size it was, the hit area grows around it. */
.tq-social__btn, .tq-foot__soc { width: 44px; height: 44px; }
.tq-foot__soc { border-radius: 50%; }

/* ---- button system: two sizes, not three -------------------------------- */
/* Buttons were running at 15px, 18px and 22px with heights of 40 and 50. Two
   sizes now: the default, and the small one the header uses. The hero pair was
   already identical — 50px tall, 12/32 padding, 18px — so nothing there moved. */
.tq-btn { font-size: 18px; padding: 12px 32px; }
.tq-btn--sm { font-size: 15px; padding: 9px 20px; }
.tq-bar__cta, .tq-fab__btn, .tm-sub-form button { font-size: 16px; padding: 12px 24px; }

/* ---- the cramped rail --------------------------------------------------- */
/* Cards sat 10px apart, so at three-up they nearly touched. */
.tq-happening .tq-rail__item, .tq-revroll .tq-rail__item { padding: 0 clamp(8px, 1vw, 14px); }

/* ---- the menu band's ground was the real problem ------------------------ */
/* Nudging alphas was treating the symptom. Teal-deep (#147E8B) is light enough
   that PURE WHITE on it only reaches 4.79:1 — so every dimmed variant beneath
   it (the sub-line, the index number) was mathematically unable to pass 4.5 no
   matter what alpha it was given.
   The band takes teal-INK (#0C5A64) instead, where white reaches 7.95:1. That
   one change clears the sub-line (~6.5), the number (~4.8) and leaves headroom
   for the yellow active state, without dimming or enlarging anything. */
.tq-menu { background-color: var(--tq-teal); }
.tq-menu::before { background: var(--tq-teal); }
.tq-prow__sub { color: rgba(255,255,255,0.85); }
.tq-prow__n   { color: rgba(255,255,255,0.65); }
.tq-prow, .tq-prow:last-child { border-color: rgba(255,255,255,0.2); }

/* The other two bands on teal-deep hold their own — their text is either large
   or on a card — but the events queue sits directly on the ground, so it moves
   with the band it lives in. */
.tq-evnext__name { color: rgba(255,255,255,0.9); }

/* ---- the last two inconsistencies -------------------------------------- */
/* The 22px button is the mobile drawer's CTA — invisible on desktop, which is
   why it survived the earlier sweep. */
.tq-drawer__cta { font-size: 18px !important; padding: 12px 32px !important; }
/* The header's social circle was the one tap target still under 44px. */
.tq-head__soc { width: 44px; height: 44px; }

/* ===========================================================================
   BRAND COLOUR ALIGNMENT — 2026-09-09
   ---------------------------------------------------------------------------
   Audited every token against the brand manual. Four already matched EXACTLY,
   which is the evidence that tokens.css was built from this same document:

     Chile         #F61E25  ==  --tmt-red          exact
     Sol Profundo  #E3A600  ==  --tmt-yellow-deep  exact
     Carbón        #211D1A  ==  --tmt-ink          exact
     Éxito/Mora/Talavera     within 1–3 hex digits — now aligned exactly

   TEXT TO CARBÓN. Body copy was running on --tmt-charcoal (#3A3430), a shade
   that is NOT in the manual — an invented intermediate. The manual's neutral is
   Carbón, so the body sizes take it: 15.9:1 on white against charcoal's 11.1:1.
   The lighter greys stay ONLY on fine print (mods, captions, the food-safety
   notice), where they are carrying hierarchy rather than standing in for a
   brand colour.
   ======================================================================== */
.tq-menu__lede, .tq-happening__lede, .tq-specials__lede, .tq-revs__lede,
.tq-social__lede, .tq-catease__text, .tq-stmt__lead, .tq-cater__sub,
.tq-hap__text, .tq-revcard__quote p, .tq-adds__blurb, .tq-bar__blurb {
  color: var(--tmt-ink);
}

/* The footer socials stayed at 38px because an older `.tq-foot__social a`
   descendant selector (0,1,1) outranks `.tq-foot__soc` (0,1,0) no matter how
   far down the file the class rule sits — order never beats specificity. */
.tq-foot__social a, .tq-foot__social a.tq-foot__soc { width: 44px; height: 44px; }

/* ===========================================================================
   BRAND BRIEF — the parts that are safe to apply, 2026-09-09
   ---------------------------------------------------------------------------
   CREMA WAS GENUINELY WRONG and is fixed at the token: the manual calls it a
   warm white and tokens.css had it as #FFFFFF, flat. It is #F2EDE4 now.
   --tmt-white stays pure white, so anything that needed true white still has it.

   Spacing, touch targets and the card hierarchy below all come straight from
   the brief. What is NOT here — the pink "Amarillo Sol", the Agua shift, the
   red/outline button scheme and the four replacement typefaces — is explained
   in the reply; applying any of them would have broken something.
   ======================================================================== */

/* ---- touch targets to 48px, per the brief ------------------------------- */
.tq-social__btn, .tq-foot__social a, .tq-foot__social a.tq-foot__soc, .tq-head__soc {
  width: 48px; height: 48px;
}
.tq-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.tq-btn--sm { min-height: 40px; }

/* ---- card gaps: 24 desktop / 16 mobile --------------------------------- */
.tq-bento, .tq-mcards, .tq-bars, .tq-revlist { gap: 16px; }
@media (min-width: 768px) {
  .tq-bento, .tq-mcards, .tq-bars, .tq-revlist { gap: 24px; }
  .tq-happening .tq-rail__item, .tq-revroll .tq-rail__item { padding: 0 12px; }
}

/* ---- body line-height 1.6 ---------------------------------------------- */
/* Applied to body copy only. The brief also asks for 1.3 on headlines — NOT
   applied: the display faces here run 0.98–1.06 by design, and 1.3 on a 56px
   Rauda Slab headline opens gaps a display cut is drawn to close. */
.tq-menu__lede, .tq-happening__lede, .tq-specials__lede, .tq-revs__lede,
.tq-social__lede, .tq-catease__text, .tq-stmt__lead, .tq-hap__text,
.tq-revcard__quote p, .tq-bar__blurb { line-height: 1.6; }

/* ===========================================================================
   THE CLOSING PANEL, BRIDGED — 2026-09-09 (Santi)
   It used to sit in a cream band of its own between the teal socials band and
   the footer, with the footer's hairline ruled under it: three stacked blocks,
   and the panel read as a divider rather than as the end of the page.
   Now the panel is lifted OUT of its own band so its top edge — and the
   photographs that break its corner — rise into the socials band above, while
   the cream ground it stands on runs uninterrupted into the footer below. One
   continuous close, instead of a block wedged between two others.
   ======================================================================== */

/* SUPERSEDED 2026-09-10 — the lift, and the deep socials padding that made
   room for it, are gone with .tq-promo itself. The negative margin here was
   exactly the fault Santi called out on the replacement card: pulling a panel
   up across a colour boundary puts the seam THROUGH it, and a card the
   background changes colour behind stops reading as a contained object. The
   Rewards card sits wholly inside one ground instead — see .tq-rwc. */

/* Homepage only. The hairline is what made the panel a separate block; on
   interior pages it still does useful work, separating page content from the
   footer where there is no panel to bridge them. */
body.home .tq-foot { border-top: 0; padding-top: clamp(20px, 2.6vw, 34px); }

/* ===========================================================================
   THE WHOLE WEEK — legibility pass, 2026-09-10 (Santi)
   ---------------------------------------------------------------------------
   Two complaints, and they pull against each other: the names were hard to
   read, AND the photographs were hard to see. The old tile answered both with
   one control — a scrim over the WHOLE frame — so darkening it enough for the
   text is exactly what made the food murky. "Wine Wednesday" was the proof:
   white caps and a yellow price landing on a bright pour, on the tallest part
   of the photo, with the scrim at 0.45 there.

   So the two jobs get separated. The photo goes almost clear; the words get
   their own near-opaque plate at the foot of the tile, which is the only place
   that is darkened at all. Text contrast goes UP (white on ~0.94 of #18100c is
   15:1, and the yellow price 11:1) while the picture gets BRIGHTER.
   ======================================================================== */

/* The photo, unveiled. What is left is a short top-down wash so the day pill
   has something to sit on, and a whisper at the foot that stops the plate's
   own top edge reading as a hard line across the picture. */
.tq-tile__scrim {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.10) 16%, rgba(0,0,0,0) 30%),
    linear-gradient(to top, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 46%);
}
/* Hover no longer has to carry the description's legibility — the plate does —
   so it lifts the photo instead of burying it. */
.tq-tile:hover .tq-tile__scrim {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.10) 16%, rgba(0,0,0,0) 30%),
    linear-gradient(to top, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 52%);
}

/* The plate. Solid enough at the baseline to be a surface rather than a haze,
   fading out over its top third so it is not a rectangle stuck on a photo. */
.tq-tile__body {
  position: relative;
  padding: clamp(30px, 3.4vw, 44px) clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 18px);
  background: linear-gradient(to top,
              rgba(24,16,12,0.95) 0%,
              rgba(24,16,12,0.90) 46%,
              rgba(24,16,12,0.62) 74%,
              rgba(24,16,12,0) 100%);
}
/* Belt and braces: on the one or two frames whose foot is very light (the
   lunch plate, the wine pour) a shadow keeps the caps crisp even before the
   plate's alpha is counted. */
.tq-tile__name { text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.tq-tile__price {
  color: var(--tmt-yellow);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.tq-tile__text { color: rgba(255,255,255,0.94); }

/* The description was hover-only, which on a desktop meant the thing that
   explains the offer was invisible until someone happened to point at it —
   six tiles that each read as a name and a number. Now it is always there,
   two lines of it, and hover opens the rest. The grid-rows trick that used to
   animate it open is gone: it fought line-clamp, and a clamp that can be
   released is the simpler mechanism. */
.tq-tile__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; opacity: 1; margin-top: 7px;
  transition: -webkit-line-clamp 0s, opacity 300ms var(--tq-ease);
}
.tq-tile:hover .tq-tile__text, .tq-tile:focus-within .tq-tile__text {
  -webkit-line-clamp: 6; margin-top: 7px;
}
@media (hover: none) { .tq-tile__text { -webkit-line-clamp: 3; margin-top: 7px; } }

/* The day pill was translucent-free but small, and it sat on whatever the
   photo's top-left corner happened to be. A ring gives it an edge against a
   busy frame; the wash above does the rest. */
.tq-tile__day {
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.22) inset;
  font-weight: 700;
}

/* Room. The tiles were 200px rows carrying a pill, a name, a price and now two
   lines of description — the photograph was getting whatever was left, which
   on the small tiles was almost nothing. 260 gives the picture back the top
   half of its own tile. */
.tq-tile { min-height: 260px; }
@media (min-width: 760px) {
  .tq-bento { grid-auto-rows: minmax(252px, 1fr); }
}
/* On the yellow ground the tiles had no edge of their own; a white hairline
   separates them from it and from each other. */
.tq-tile {
  box-shadow: 0 10px 26px rgba(0,0,0,0.24), 0 0 0 1px rgba(255,255,255,0.5);
}

@media (prefers-contrast: more) {
  .tq-tile__body { background: rgba(18,12,9,0.96); }
  .tq-tile__text { color: #fff; }
}

/* The reduced-transparency rule for these tiles was set further up the file
   and this block now sits after it, so it has to be restated or the
   preference silently stops applying. Same value, and the plate goes solid
   with it — translucency is the whole thing being asked for here. */
@media (prefers-reduced-transparency: reduce) {
  .tq-tile__scrim { background: rgba(0,0,0,0.55); }
  .tq-tile:hover .tq-tile__scrim { background: rgba(0,0,0,0.6); }
  .tq-tile__body { background: #180f0b; }
}

/* ===========================================================================
   FOLLOW THE NOISE — patterned ground, three video frames, 2026-09-10 (Santi)
   ---------------------------------------------------------------------------
   The band had gone flat white on 2026-09-09, which fixed the contrast but
   left the largest block on the page with nothing in it: a heading, three
   buttons and three photographs floating on paper. The talavera tile comes
   back, drained to white — the pattern is legible as texture and measures as
   white, so every contrast decision from the flat-white pass still holds.

   And the frames hold CLIPS now, not stills. The centre one is a 9:16
   vertical and noticeably bigger; the outer two are 4:5 and sit lower. That
   is the shape social video actually is, and it is what the frames should be
   asking the client to hand over.
   ======================================================================== */
.tq-social {
  background: var(--tmt-white) url('taq/fondo_talavera_white.webp') 0 0 / clamp(140px, 15vw, 210px) auto repeat;
}
/* The tile is warm; a white wash at the top and bottom edges keeps the band
   from butting hard onto the section above and the footer below. */
.tq-social::before {
  content: ''; display: block; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom,
              rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.30) 22%,
              rgba(255,255,255,0.30) 74%, rgba(255,255,255,0.92) 100%);
}

/* ---- the three frames -------------------------------------------------- */
/* Not a 3-up grid any more: the centre column is wider AND taller, so the
   outer two have to be allowed to be smaller rather than stretched to match.
   align-items:center hangs all three off a shared middle line. */
.tq-social__shots {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr) minmax(0, 0.86fr);
  align-items: center;
  max-width: 760px;
  gap: clamp(12px, 1.8vw, 24px);
}
.tq-social__shot {
  aspect-ratio: 4 / 5;
  border: 6px solid var(--tmt-white);
  border-radius: 14px;
  background: var(--tmt-cream);
  box-shadow: 0 16px 36px rgba(0,0,0,0.18);
}
/* The centre frame: vertical video, and it breaks the row's height on purpose
   so the eye lands on it first. */
.tq-social__shot--2 {
  aspect-ratio: 9 / 16;
  transform: translateY(-10px) rotate(0.6deg);
  z-index: 1;
  box-shadow: 0 24px 52px rgba(0,0,0,0.26);
}
.tq-social__shot--1 { transform: translateY(14px) rotate(-2deg); }
.tq-social__shot--3 { transform: translateY(14px) rotate(2deg); }
.tq-social__shot--1:hover { transform: translateY(6px) rotate(0) scale(1.03); }
.tq-social__shot--3:hover { transform: translateY(6px) rotate(0) scale(1.03); }
.tq-social__shot--2:hover { transform: translateY(-18px) rotate(0) scale(1.03); }

/* ---- the placeholder that stands in for a clip ------------------------- */
/* Reads as a frame waiting for footage, not as a broken image: the badge, a
   play button, and one line of type. Teal ground because the two live colours
   on this band are red (the buttons) and ink (the headline) and a third of
   either would make the frames compete with them. */
/* Teal, with the tile showing through it rather than sitting on top of it.
   The first attempt layered the YELLOW talavera over a teal ground, and the
   tile is opaque — the teal never showed and three mustard rectangles landed
   in the middle of a white band. The white tile multiplied into the teal is
   the same pattern reading as a shade of the ground, which is what was
   wanted: pattern, not a second colour. */
.tq-social__ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; height: 100%;
  background: url('taq/fondo_talavera_white.webp') center / 170px auto repeat,
              linear-gradient(160deg, #1d6b74 0%, #14545c 100%);
  background-blend-mode: multiply, normal;
  color: rgba(255,255,255,0.92);
  text-align: center; padding: 12px;
}
.tq-social__ph-play {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 2px solid rgba(255,255,255,0.7);
  color: var(--tmt-white);
  padding-left: 3px;                      /* optical: the triangle sits right */
  transition: background 220ms var(--tq-ease), transform 220ms var(--tq-ease);
}
.tq-social__shot:hover .tq-social__ph-play {
  background: var(--tmt-yellow); border-color: var(--tmt-yellow);
  color: var(--tmt-ink); transform: scale(1.08);
}
.tq-social__ph-label {
  font-family: var(--font-inria); font-size: clamp(11px, 1.05vw, 12.5px);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.88);
}
/* The centre frame is the big one — its furniture scales with it. */
.tq-social__shot--2 .tq-social__ph-play { width: 58px; height: 58px; }

@media (max-width: 560px) {
  /* Two frames across a phone, and the tilt goes. The centre vertical keeps
     its shape and its lead; frame 3 drops rather than shrinking all three to
     thumbnails, which is the call the old three-across rule already made. */
  .tq-social__shots {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    max-width: 400px;
  }
  .tq-social__shot--3 { display: none; }
  .tq-social__shot--1 { transform: none; aspect-ratio: 4 / 5; }
  .tq-social__shot--2 { transform: none; aspect-ratio: 9 / 16; }
  .tq-social__ph-label { letter-spacing: 0.1em; }
}
@media (prefers-reduced-motion: reduce) {
  .tq-social__shot, .tq-social__ph-play { transition-duration: 1ms; }
}
@media (prefers-reduced-transparency: reduce) {
  .tq-social::before { background: rgba(255,255,255,0.86); }
  .tq-social__ph { background: #14545c; background-blend-mode: normal; }
}

/* ===========================================================================
   CLOSING PANEL -> REWARDS, with the tile inside it — 2026-09-10 (Santi)
   ---------------------------------------------------------------------------
   The panel keeps its teal, and the talavera comes INSIDE it: the same white
   tile the socials frames use, multiplied into the ground so it reads as a
   shade of the teal rather than as a second colour. (The yellow tile was tried
   on the socials placeholders the same day and is opaque — it covers whatever
   it is laid over. White + multiply is the working recipe.)

   Every contrast decision on this panel is unchanged, because the base colour
   is unchanged: the tile only darkens, and only by the tile's own ~8%.
   ======================================================================== */
/* Two tiles exist and they are not interchangeable. `_white` is the one for
   WHITE grounds — its motif is ~93% luminance, so multiplied into a colour it
   darkens by about 7% and all but disappears (tried here first, and the panel
   came back looking flat). `_mask` is the same artwork at ~78%, cut for exactly
   this job: laid over a colour it reads as pattern without becoming a second
   colour. Use _white on paper, _mask on ink. */
.tq-promo__panel {
  background: url('taq/fondo_talavera_mask.webp') center / clamp(150px, 17vw, 240px) auto repeat,
              linear-gradient(150deg, #1d6b74 0%, var(--tmt-teal-deep) 62%, #10454c 100%);
  background-blend-mode: multiply, normal;
  isolation: isolate;
}
/* No wash under the copy. One was tried — a radial behind the text column —
   and at any strength that helped the headline it also drew its own rounded
   rectangle across the panel, which read as a box someone forgot to remove.
   The headline is cream on teal at 9.4:1 with or without it, and the tile only
   moves the ground by a fifth of a step. */

/* The line under the headline. It did not exist while this was the ordering
   ask — that panel was an eyebrow, a headline and a button — and it carries
   the only sentence about the programme, so it gets real measure. */
.tq-promo__text {
  margin: 12px 0 0; max-width: 34ch;
  font-family: var(--font-inria); font-size: clamp(14.5px, 1.35vw, 16.5px);
  line-height: 1.6; color: rgba(255,255,255,0.9);
}

@media (prefers-reduced-transparency: reduce) {
  .tq-promo__panel { background: var(--tmt-teal-deep); background-blend-mode: normal; }
}
@media (prefers-contrast: more) {
  /* Flat ground at this preference: a pattern behind text is the first thing
     "more contrast" is asking to lose. */
  .tq-promo__panel { background: #0e4249; background-blend-mode: normal; }
  .tq-promo__text { color: #fff; }
}

/* ===========================================================================
   EVENTS BAND — the talavera ground too, 2026-09-10 (Santi)
   ---------------------------------------------------------------------------
   Same recipe as the menu pages and the socials band: the WHITE tile
   multiplied into the ground the band already had. Multiplied, so
   --tmt-cream-deep stays the base and the motif is that cream one step
   warmer — nothing on this band was re-measured, because nothing moved.

   Use `_white` here and not `_mask`: this is a paper ground. `_mask` is cut
   for dark grounds and on cream it would read as a printed pattern rather
   than as texture. The two tiles are not interchangeable — see the note on
   .tq-promo__panel.

   Band rhythm is unchanged: this stays the quiet cream step between the menu
   band above it and the yellow bento below.
   ======================================================================== */
.tq-happening {
  position: relative; isolation: isolate;
  background: url('taq/fondo_talavera_white.webp') 0 0 / clamp(140px, 15vw, 210px) auto repeat,
              var(--tmt-cream-deep);
  background-blend-mode: multiply, normal;
}
/* The head — title, lede and the reserve button — sits straight on the ground
   with no card under it, so the pattern is washed back there and left alone
   in the gutters around the rail, which is where it does its work. */
.tq-happening::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(240,238,236,0.9) 0%, rgba(240,238,236,0.9) 26%,
              rgba(240,238,236,0.2) 46%, rgba(240,238,236,0.2) 84%,
              rgba(240,238,236,0.86) 100%);
}
.tq-happening > * { position: relative; z-index: 1; }

@media (prefers-reduced-transparency: reduce) {
  .tq-happening { background: var(--tmt-cream-deep); background-blend-mode: normal; }
  .tq-happening::before { display: none; }
}

/* ===========================================================================
   THE "MORE" PANEL — the tile, faintly, 2026-09-10 (Santi)
   ---------------------------------------------------------------------------
   Same talavera, deliberately weaker than the bands ("more transparent").
   A dropdown is ~680x200 with six links in it, so the motif that reads as
   texture across a whole band reads as noise behind a short list; at this
   size it has to be felt rather than seen.

   Done with a pseudo-element and an opacity rather than background-blend-mode,
   which is what the bands use: blend gives one fixed strength (the tile's own
   contrast) and here the strength is the whole point, so it needs a dial.
   `_mask` is the tile — the deeper of the two — turned down to a fifth, which
   lands just under where the bands sit.

   overflow:hidden so the tile takes the panel's corner radius. Nothing in
   this panel breaks out of it; the FAB sheet, which does, is left alone.
   ======================================================================== */
.tq-more__panel { position: absolute; isolation: isolate; overflow: hidden; }
.tq-more__panel::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('taq/fondo_talavera_mask.webp') center / 130px auto repeat;
  opacity: 0.2;
}
.tq-more__grid { position: relative; z-index: 1; }

/* Both preferences want the pattern gone from behind a list of links. */
@media (prefers-reduced-transparency: reduce) { .tq-more__panel::before { display: none; } }
@media (prefers-contrast: more)                { .tq-more__panel::before { display: none; } }

/* ===========================================================================
   REWARDS CARD — Santi's container spec, 2026-09-10
   ---------------------------------------------------------------------------
   AESTHETIC KEPT, LAYOUT REPLACED. The teal ground, the talavera multiplied
   into it, the display headline and the yellow button are the panel's own
   look, unchanged. What changed is structure, to the spec:

     - an INSET CARD in the shared content column (.tq-wrap), so its left and
       right edges line up with every other block on the page rather than
       running full-bleed;
     - rounded on all four sides;
     - NORMAL DOCUMENT FLOW. Nothing absolutely positioned, nothing
       overlapping, just the next item in the stack. That is what retired the
       two tilted plates that used to break out of the top-right corner — a
       corner break-out is by definition an overlap, and the spec rules it out;
     - a single centred column: headline, subcopy, control, all on one axis;
     - a generous margin above, about equal to the card's own top padding;
     - and BALANCED internal padding. The reference runs deeper at the bottom
       than the top and Santi flagged that as the thing that makes it feel
       unbalanced, so top and bottom match here.

   THE GOTCHA, avoided: no background transition crosses the card. .tq-rwc
   owns one continuous ground from edge to edge and the footer's begins below
   it, so the card is never half on one colour and half on another. This was
   the original fault — a negative margin pulled the old panel up across the
   band boundary and the colour changed behind the button.
   ======================================================================== */
.tq-rwc {
  background: var(--tmt-cream-deep);
  padding-bottom: clamp(34px, 4.4vw, 60px);
}
.tq-rwc__card {
  /* margin ≈ the card's own top padding, per the spec */
  margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(48px, 6vw, 72px) clamp(20px, 3vw, 40px);   /* top == bottom */
  border-radius: var(--tq-r-card);
  text-align: center;
  background: url('taq/fondo_talavera_mask.webp') center / clamp(150px, 17vw, 240px) auto repeat,
              linear-gradient(150deg, var(--tq-teal) 0%, var(--tq-teal-dark) 100%);
  background-blend-mode: multiply, normal;
  box-shadow: 0 22px 52px rgba(0,0,0,0.24);
}
.tq-rwc__h {
  margin: 0 auto; max-width: 20ch;
  font-family: var(--tq-display);
  font-size: clamp(26px, 3.6vw, 46px); line-height: 1.02;
  letter-spacing: -0.015em; text-transform: uppercase;
  color: var(--tmt-cream);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.tq-rwc__sub {
  margin: 12px auto 0; max-width: 46ch;
  font-family: var(--font-inria); font-size: clamp(14.5px, 1.35vw, 16.5px);
  line-height: 1.6; color: rgba(255,255,255,0.9);
}
/* The spec's .form-row: centred as a group, horizontal inside, aligned on the
   controls' baseline. It carries one control today (see the note in
   inc/rewards.php on why there is no input) and is built as the row rather
   than as a bare button so adding a field beside it is a markup change only. */
.tq-rwc__row {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; align-items: flex-end;
  margin-top: clamp(24px, 3vw, 36px);
}
.tq-rwc__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 34px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--tq-display); font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--tmt-yellow); color: var(--tmt-ink);
  box-shadow: 0 8px 22px rgba(0,0,0,0.26);
  transition: background 200ms var(--tq-ease), transform 200ms var(--tq-ease);
}
.tq-rwc__btn:hover, .tq-rwc__btn:focus-visible {
  background: var(--tmt-yellow-light); transform: translateY(-2px);
}
.tq-rwc__btn:focus-visible { outline: 3px solid var(--tmt-white); outline-offset: 3px; }

/* The card's band supplies the space above the footer, so the hairline that
   used to separate page content from it is redundant on every page now. */
body .tq-foot { border-top: 0; }

@media (prefers-reduced-motion: reduce) { .tq-rwc__btn { transition-duration: 1ms; } }
@media (prefers-reduced-transparency: reduce) {
  .tq-rwc__card { background: var(--tq-teal); background-blend-mode: normal; }
}
@media (prefers-contrast: more) {
  .tq-rwc__card { background: var(--tq-teal-dark); background-blend-mode: normal; }
  .tq-rwc__sub  { color: #fff; }
}

/* ---- the sign-up dialog ------------------------------------------------- */
/* Toast's own page, inside a dialog, so nobody leaves the site to join and
   this theme never handles a phone number. The iframe gets its src on open —
   loading it up front would pull Toast and its reCAPTCHA on every page of the
   site for the majority who never press the button. */
.tq-rwd[hidden] { display: none !important; }
.tq-rwd {
  position: fixed; inset: 0; z-index: 600;
  display: grid; place-items: center;
  padding: clamp(10px, 3vw, 34px);
}
.tq-rwd__scrim { position: absolute; inset: 0; background: rgba(12,32,35,0.72); }
.tq-rwd__box {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: min(560px, 100%); height: min(760px, 92vh);
  background: var(--tmt-white); border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.tq-rwd__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px 11px 16px;
  background: var(--tmt-teal-deep); color: var(--tmt-white);
}
.tq-rwd__title {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--tq-display); font-size: 15px;
  letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Never remove this. If Toast ever refuses to be framed, it is the only way
   out of the dialog that still completes a sign-up. */
.tq-rwd__out {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-family: var(--font-inria); font-size: 12px; color: var(--tmt-yellow);
  text-decoration: underline; text-underline-offset: 2px;
}
.tq-rwd__out:hover { color: var(--tmt-white); }
.tq-rwd__x {
  flex: 0 0 auto; width: 32px; height: 32px; cursor: pointer;
  font-size: 24px; line-height: 1;
  background: rgba(255,255,255,0.14); color: var(--tmt-white);
  border: 0; border-radius: 8px;
}
.tq-rwd__x:hover { background: rgba(255,255,255,0.28); }
.tq-rwd__body { position: relative; flex: 1 1 auto; min-height: 0; background: var(--tmt-white); }
.tq-rwd__wait {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center; padding: 24px; text-align: center;
  font-family: var(--font-inria); font-size: 14px; color: var(--tmt-stone);
}
.tq-rwd__wait[hidden] { display: none; }
.tq-rwd__wait a { color: var(--tmt-teal-deep); text-decoration: underline; }
.tq-rwd__frame { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 560px) {
  .tq-rwd { padding: 0; }
  .tq-rwd__box { width: 100%; height: 100%; border-radius: 0; }
  .tq-rwd__title { font-size: 13px; }
}

/* ===========================================================================
   REFACTOR SLOTS — 2026-09-11
   ---------------------------------------------------------------------------
   This stylesheet is edited by APPENDING: each pass adds a dated block at the
   end, and the cascade resolves it. That works until two passes land on the
   same end-of-file, at which point every block shares a diff boundary with the
   next one — and `git revert` on any but the last cannot find its context, so
   taking one pass back out conflicts on changes that have nothing to do with
   it.

   So each pass gets a reserved slot, in cascade order. The markers are stable
   text that no pass edits, which is what lets any single pass be reverted on
   its own. Leave them in place; fill the slot that belongs to the pass.
   ======================================================================== */

/* ==== SLOT: background rhythm ============================================ */
/* ===========================================================================
   BACKGROUND RHYTHM — 2026-09-11
   ---------------------------------------------------------------------------
   The page alternated ground at nine of its ten joins, and three of the
   "different" grounds were off-whites a few points apart: #FFFFFF (statement,
   catering, socials), #F0EEEC (events, rewards, footer) and #F2EDE4 (the body,
   showing through a gap). Alternating that often is not rhythm, it is a stripe;
   and alternating between two near-identical creams reads as a rendering fault,
   which is exactly the report that started this.

   FIVE DECISIONS, in the order of the brief:

   1. ONE CREAM, and the join that breaks the stripe is EVENTS + SPECIALS.
      They are the natural pair — "What's happening this week" and "Every day
      has a reason" are the same content answered twice — so they now run as
      one continuous cream field instead of cream-then-yellow. That removes an
      alternation at the loudest point on the page and lets the two bands read
      as one chapter about the week. They stay TELLABLE apart by texture, not
      by ground: events carries the white talavera, specials the mask tile.

   2. THE YELLOW, TONED DOWN. --tq-yellow is no longer a flood. It survives as
      a ~9% wash in the middle of the specials band (and on the day pills, the
      eyebrow and every button, untouched), so the band still reads as the warm
      one without being the first thing the eye lands on. It is not the primary
      conversion and it was out-shouting the bands that are.

   3. THE FOOTER gets the cream and the talavera. It was #F0EEEC flat — the
      coolest, greyest value on the page, and the only large block with no
      texture at all, which is why it read as a different site.

   4. THE ZIGZAG SEAM IS REMOVED from the homepage (the call, in
      front-page.php; the function and the About page's red one are untouched).
      It appeared exactly once in ten joins, which makes it read as a leftover
      rather than a device. The honest alternatives were to repeat it at every
      ground change or to drop it, and repeating it would have re-striped the
      page in the same pass that de-stripes it — nine zigzags where the whole
      point is fewer hard edges. The join it was marking, statement -> teal
      menu, is a full ground change and states itself.

   5. THE SOCIALS / REWARDS SEAM, fixed at the root: see the note there.

   THE MECHANISM, and why it is the same everywhere. Every light band ends on
   EXACTLY var(--tq-cream), whatever its pattern is doing in the middle: the
   top background layer is a cream gradient that is opaque at 0% and 100% and
   drops back in between. So a light band can carry any texture and still butt
   onto its neighbour with no line, by construction rather than by luck. The
   patterns are opaque files, so they have to be washed rather than tinted —
   multiplying them into the cream lands each band on a different value and
   puts the seam straight back.
   ======================================================================== */

/* ---- statement + catering teaser --------------------------------------- */
.tq-stmt, .tq-catease {
  background:
    linear-gradient(to bottom, var(--tq-cream) 0%, rgba(242,237,228,0.55) 14%,
                    rgba(242,237,228,0.55) 86%, var(--tq-cream) 100%),
    url('taq/fondo_tequilamama.webp') center / cover,
    var(--tq-cream);
}

/* ---- events: same tile, the one cream ---------------------------------- */
.tq-happening {
  background: url('taq/fondo_talavera_white.webp') 0 0 / clamp(140px, 15vw, 210px) auto repeat,
              var(--tq-cream);
  background-blend-mode: multiply, normal;
}
.tq-happening::before {
  background: linear-gradient(to bottom,
              var(--tq-cream) 0%, rgba(242,237,228,0.90) 26%,
              rgba(242,237,228,0.20) 46%, rgba(242,237,228,0.20) 84%,
              var(--tq-cream) 100%);
}

/* ---- specials: shares the events ground, keeps a whisper of the yellow -- */
.tq-specials {
  background:
    linear-gradient(to bottom, var(--tq-cream) 0%, rgba(242,237,228,0.58) 16%,
                    rgba(242,237,228,0.58) 84%, var(--tq-cream) 100%),
    linear-gradient(rgba(253,202,10,0.22), rgba(253,202,10,0.22)),
    url('taq/fondo_talavera_mask.webp') 0 0 / clamp(140px, 15vw, 210px) auto repeat,
    var(--tq-cream);
}
/* The band's primary button was white-on-yellow, and the rule that made it so
   is headed "The yellow grounds" — it existed BECAUSE the ground was yellow.
   With the ground cream, white on cream is the worst pairing on the page, so
   the band drops out of that rule and its button takes the same yellow the
   other cream bands use. The button itself, its copy and its position are
   untouched; only the override that the old ground required is gone.
   The GHOST rule stays: ink on cream beats the yellow-on-cream default. */
.tq-specials .tq-btn, .tq-specials .tq-btn--primary {
  background: var(--tmt-yellow); border-color: var(--tmt-yellow); color: var(--tmt-ink);
}

/* The heading and eyebrow were --tmt-red-ink (#8E0F14), and that value was
   chosen FOR THE YELLOW GROUND: full-strength red on saturated yellow vibrates,
   so the band took the darkest red in the palette instead. Moving the ground to
   cream carried the contrast decision over but not the colour one, and left the
   only red on the page that does not match its neighbours — statement, events,
   catering and the socials script are all --tmt-red, and next to them #8E0F14
   on cream reads brown. It joins them.

   Contrast: #F61E25 on this band measures 3.22:1, against 3.11:1 for the same
   red on the events band beside it — large-text territory (the heading is 56px
   display caps, the eyebrow is tracked caps), and the same footing every other
   cream band on this page already stands on. Red-ink measured higher, but being
   the one heading in a different hue is the more visible fault. */
.tq-specials .tq-h2,
.tq-specials .tq-h2--red,
.tq-specials__head .tq-h2 { color: var(--tq-red); }
/* The eyebrow does NOT follow it, and the reason is size, not taste. It is
   12px/400 tracked caps — SMALL text, so it owes 4.5:1, where the 56px heading
   above it owes 3:1. On this ground --tq-red measures 3.22 and would fail;
   red-deep measures 4.62 and passes. Red-ink would have measured 7.42 but is
   the brown that started this. So: same family, one step down, still reads red
   beside the heading. */
.tq-specials__eyebrow { color: var(--tmt-red-deep); }

/* ---- socials: the one cream, and room under the tallest frame ----------- */
/* Measured against the CENTRE frame, which is the 9:16 vertical and is lifted
   10px clear of the row the other two hang off: it ended 58px above the seam
   at 1440 and its shadow (0 24px 52px) crossed it by 18px into the band below.
   The floor is raised harder than the ceiling because the shadow does not
   shrink with the viewport. */
.tq-social {
  background-color: var(--tq-cream);
  padding-bottom: clamp(104px, 10vw, 144px);
}
.tq-social::before {
  background: linear-gradient(to bottom,
              var(--tq-cream) 0%, rgba(242,237,228,0.30) 22%,
              rgba(242,237,228,0.30) 74%, var(--tq-cream) 100%);
}

/* ---- the rewards banner ------------------------------------------------- */
/* The band had padding-top:0 and the card inside it had margin-top:96px, so
   the card's margin COLLAPSED out through the band and moved the whole band
   down — leaving 96px of page ground above a band meant to start at the seam,
   which is the "flat beige stretch" in the report. The space moves onto the
   band, where it cannot collapse out, and matches below. The card's own 72/72
   padding was already symmetric and is untouched, as are its radius, its
   gutters and the .tq-wrap column it is inset in. */
.tq-rwc {
  background: var(--tq-cream);
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.tq-rwc__card { margin-top: 0; }

/* ---- the footer: cream, and the talavera ------------------------------- */
.tq-foot {
  background:
    linear-gradient(to bottom, var(--tq-cream) 0%, rgba(242,237,228,0.62) 14%,
                    rgba(242,237,228,0.62) 100%),
    url('taq/fondo_talavera_white.webp') 0 0 / clamp(140px, 15vw, 210px) auto repeat,
    var(--tq-cream);
}

/* ---- the accessibility fallbacks, moved onto the same cream ------------- */
@media (prefers-reduced-transparency: reduce) {
  .tq-happening, .tq-specials, .tq-social, .tq-stmt, .tq-catease, .tq-foot {
    background: var(--tq-cream); background-blend-mode: normal;
  }
  .tq-social::before { background: rgba(242,237,228,0.86); }
}
@media (prefers-contrast: more) {
  .tq-happening, .tq-specials, .tq-social, .tq-stmt, .tq-catease, .tq-foot {
    background: var(--tq-cream); background-blend-mode: normal;
  }
}
/* ==== /SLOT: background rhythm =========================================== */

/* ==== SLOT: components =================================================== */
/* ===========================================================================
   COMPONENTS — 2026-09-11
   ======================================================================== */

/* ---- 1. the specials bento becomes a grid ------------------------------- */
/* It was a 4-column bento with two hand-placed exceptions: tile 1 spanned two
   rows and tile 2 spanned two columns, so the six tiles rendered at FOUR
   different ratios — 0.49, 2.13 and 1.02 four times — and row one read as
   three cards against row two's four. Six equal squares in three columns is
   the shape six items actually are, and one ratio means the photographs are
   all cropped the same way instead of one being a portrait and one a panorama.
   The hand placements go with it; the tiles now fall in source order, which is
   Monday to Saturday, and the grid no longer has to be re-authored when a day
   is added or dropped. */
.tq-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .tq-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .tq-bento { grid-template-columns: minmax(0, 1fr); } }
/* aspect-ratio decides the height now, so the auto-row floors that used to
   have to guess it are dropped rather than fighting it. */
@media (min-width: 760px) { .tq-bento { grid-auto-rows: auto; } }
.tq-tile {
  aspect-ratio: 1 / 1;
  min-height: 0;                       /* the 260px floor fought the ratio */
  grid-column: auto; grid-row: auto;   /* clears --1 .. --6 placements */
}
/* The body is in flow at the foot of the tile and its description opens on
   hover, so a tile has to be allowed to outgrow the square rather than clip
   the text on the one day whose copy runs long. */
.tq-tile { height: auto; min-height: 0; }
@supports (aspect-ratio: 1) { .tq-tile { min-height: 0; } }

/* ---- 2. the text plate, deepened --------------------------------------- */
/* A plate already existed — it was added 2026-09-10 to separate the words from
   the photograph — so this is NOT a second scrim on top of it. The fault left
   in it was at the TOP: the plate carries 30-44px of padding above the name,
   which put the name in the stretch where the gradient had fallen to ~0.56,
   while the description below sat on 0.90+. White display caps on 0.56 over a
   bright plate photo measure about 3.1:1 — passing only because the type is
   large. The ramp now reaches 0.88 by the time it is under the name, and the
   plate is a little taller so the ramp has room to do it gently. */
.tq-tile__body {
  background: linear-gradient(to top,
              rgba(24,16,12,0.96) 0%,
              rgba(24,16,12,0.94) 52%,
              rgba(24,16,12,0.88) 76%,
              rgba(24,16,12,0.46) 90%,
              rgba(24,16,12,0) 100%);
}

/* ---- 3. reviews: cards on one height ------------------------------------ */
/* The rail track is flex with align-items:center, so each card was as tall as
   its own quote and they hung off a shared middle line — the longest quote
   made the centre card visibly taller than its neighbours. Stretching the
   items and letting the card fill one gives every card the tallest card's
   height. Scoped to .tq-revroll: the events rail above uses the same .tq-rail
   and its cards are meant to size to their own content. */
.tq-revroll .tq-rail__track { align-items: stretch; }
.tq-revroll .tq-rail__item  { align-items: stretch; }
.tq-revroll .tq-revcard     { height: 100%; }

/* ---- 4. one measure, and headings and body on one axis ------------------ */
:root { --tq-measure: 68ch; }   /* widened from the 62ch phase 2 defined */

/* Six sections carried six measures — 465, 479, 500, 521, 579 and 603px — so
   no two bands set their copy to the same width, and every one of them was
   narrower than the heading above it. The measure moves onto the HEAD block,
   which is what both the heading and the lede are centred inside, so the two
   share one axis by construction instead of being tuned to each other. */
.tq-menu__head, .tq-happening__head, .tq-specials__head, .tq-revs__head {
  max-width: var(--tq-measure);
}
.tq-menu__lede, .tq-happening__lede, .tq-specials__lede,
.tq-revs__lede, .tq-social__lede {
  max-width: 100%;
}
/* The two left-aligned bands sit in a split grid, so their copy is bounded by
   its own column first — min() keeps the measure from pushing past it. */
.tq-stmt__lead, .tq-catease__text { max-width: min(var(--tq-measure), 100%); }
.tq-social__inner { max-width: var(--tq-measure); margin-inline: auto; }

/* The rail's centre card is emphasised with translateY(-14px) scale(1.04) —
   the Mojitos band's lifted card. With the card heights now equal, the SCALE
   was the only thing still making the middle one taller (298px rendering at
   310px), which is the fault reported. The lift, the deeper shadow and the
   white ground stay and carry the emphasis on their own: a translate moves a
   card without resizing it, a scale cannot. */
.tq-rail__item.is-mid .tq-revcard { transform: translateY(-14px); }

/* The socials head is a centred flex column, so its children shrink to their
   own content and max-width:100% resolves to "as wide as the text happens to
   be" — 456px against the 667px every other band now shares. Stated outright
   so this lede sits on the same axis as the rest. */
.tq-social__lede { max-width: var(--tq-measure); width: 100%; }
/* ==== /SLOT: components ================================================== */

/* ==== SLOT: hero ========================================================= */
/* ===========================================================================
   HERO — 2026-09-11
   ---------------------------------------------------------------------------
   The hero was ALREADY height:100dvh — but capped at max-height:900px, and the
   cap is the whole bug. On a 900px-tall window the two agree and the band
   looks full; on anything taller the hero stops at 900 while the viewport
   keeps going, so the first thing under it is showing before the reader has
   finished looking at it. On a 1440x1080 display that is 180px of the next
   band already on screen. The cap goes; min-height:600px stays, which is what
   protects short and landscape viewports.

   And the lockup was 240 / 300 / 360px at three breakpoints — 360px is a
   quarter of a 1440px screen, which is a logo placed on a photograph rather
   than a lockup that opens a page. One clamp replaces the three steps and
   takes it to 520px at the top end (+44%), while holding 300px at tablet
   where it already worked and lifting mobile from 240 to 280.

   The CTA row is untouched — same buttons, same copy, same order.
   ======================================================================== */
.tq-hero {
  height: 100dvh;
  max-height: none;
}
/* Fallback for engines without dvh: vh is close enough and the cap is what
   mattered. Declared after, so dvh wins wherever it is understood. */
@supports not (height: 100dvh) { .tq-hero { height: 100vh; } }

.tq-hero__logo { width: clamp(280px, 36vw, 520px); }
/* The gap was a flat 30px under a 240px mark; it has to grow with the lockup
   or the buttons crowd it at the top end. */
.tq-hero__inner { gap: clamp(26px, 3vw, 44px); }
/* ==== /SLOT: hero ======================================================== */

/* ==== SLOT: rewards banner seam ========================================== */
/* ===========================================================================
   REWARDS BANNER — the seam runs THROUGH it, 2026-09-11 (Santi)
   ---------------------------------------------------------------------------
   After the Eclipse di Luna newsletter block: the banner straddles the join
   between the page and the footer, top half on the page cream, bottom half on
   the footer's ground, with the seam on the banner's own vertical midpoint
   (~51% on the reference).

   This REVERSES the phase 3 decision for this one band, deliberately. Phase 3
   put the banner wholly inside one ground because a seam THROUGH a card is
   what makes a card stop reading as a contained object — which was the right
   call when the seam was accidental. An intentional straddle is a different
   thing: the seam is centred on the card rather than wandering across it, and
   it is the composition the reference is built on.

   NOT done with negative margins. The band paints its own two-tone ground and
   stays in normal flow, so nothing is pulled across a boundary and no stacking
   context has to be unpicked. That was the original fault on this card in the
   first place — see the note on .tq-rwc__card.

   WHY THE SECTION PADDING MUST STAY EQUAL. Band height = padTop + cardH +
   padBottom. With padTop == padBottom, the band's 50% line is exactly
   padTop + cardH/2 — the card's own midpoint — for ANY card height. So the
   seam tracks the card through every reflow without a single media query, and
   the card's INTERNAL padding can be weighted however the design wants
   without moving it. Change the two paddings independently and the seam
   slides off the card; that is the one thing not to do here.

   TEXTURE. The talavera runs through the band as well as the footer, at the
   same 0.62 wash, so the only thing that changes at the seam is the colour.
   Without it the band would be flat against a patterned footer and the
   TEXTURE onset at the footer's top edge would read louder than the 2-point
   colour step the seam is actually made of.

   HONEST NOTE ON THE CONTRAST. --tq-foot-bg is #F0EEEC against the page's
   #F2EDE4 — a 2-point step, chosen deliberately (2026-09-11). It is a far
   quieter seam than the reference's, and at some viewports it will read as a
   faint edge rather than a two-tone block. The geometry below is exact and
   independent of the colours, so giving the footer a stronger ground later is
   a one-token change to --tq-foot-bg and nothing else moves.
   ======================================================================== */
/* The footer ground, and the only thing that decides whether the seam above is
   VISIBLE. #F0EEEC was tried first and measured a sum-delta of 11 against the
   page cream — a correct two-tone straddle made of two colours the eye reads
   as one. This is the same warm cream family, taken deep enough to actually
   register: sum-delta 80, so the two halves of the banner read as two grounds
   while the footer stays cream-and-patterned rather than going dark, which is
   what the footer pass asked for. Dial it here and nothing else moves — the
   seam geometry is colour-independent. */
:root { --tq-foot-bg: #DCD3C4; }

.tq-rwc {
  /* The spec's gradient in the theme's own values — one hard stop at 50% — with
     the talavera carried across it, because "bottom half on the FOOTER
     background" has to mean what this footer's background actually is, and
     this footer is a tile over --tq-foot-bg, not a flat fill. The same is true
     of the page above: the socials band is a tile over --tq-cream.

     Tried flat first, exactly as written in the brief, and measured it: the
     seam came out stronger (sumD 80 vs 49) but the tile then had to START at
     the footer's top edge, which put a SECOND line across the page 313px below
     the first, at sumD 33. One clean seam beats a stronger seam plus a spurious
     edge. Still only this section's background — nothing else is touched. */
  background:
    linear-gradient(to bottom, rgba(242,237,228,0.62) 0 50%,
                               rgba(220,211,196,0.62) 50% 100%),
    url('taq/fondo_talavera_white.webp') 0 0 / clamp(140px, 15vw, 210px) auto repeat,
    linear-gradient(to bottom, var(--tq-cream) 0 50%, var(--tq-foot-bg) 50% 100%);
  padding-block: 96px;   /* EQUAL top and bottom — this is what centres the seam */
}

/* The band above now supplies the footer's top space, so the footer's own top
   padding would double it. Scoped with ~ rather than + because the Toast
   dialog is a sibling between the two in the DOM — and scoped at all because
   tm_rewards_card() returns '' when the rewards URL is cleared, and a footer
   with no band above it still needs its own padding.
   The second selector is not redundant: body.home sets its own footer padding
   at (0,2,1) and would out-specify a bare .tq-rwc ~ .tq-foot no matter where
   this block sits in the file. Measured 34px still applied before this. */
.tq-rwc ~ .tq-foot,
body.home .tq-rwc ~ .tq-foot { padding-top: 0; }

/* The footer takes the same ground and the same wash as the band's lower half,
   with no top ramp of its own — a ramp there would put a light lip back at the
   footer's top edge, which is the seam this whole pass is trying to keep to
   one place. */
/* Darkening the ground took the footer headings under the floor: --tmt-red is
   17px/700 here, so it owes 4.5:1 and measured 2.76 on #DCD3C4. red-deep only
   reaches 3.96. red-ink clears it at 6.35 and is the value the footer already
   used when it last sat on a darker ground. Nothing else in the footer moved —
   links 11.3:1, small links 8.3:1, the open line 5.2:1, hours 11.3:1. */
.tq-foot__h { color: var(--tmt-red-ink); }

.tq-foot {
  background:
    linear-gradient(rgba(220,211,196,0.62), rgba(220,211,196,0.62)),
    url('taq/fondo_talavera_white.webp') 0 0 / clamp(140px, 15vw, 210px) auto repeat,
    var(--tq-foot-bg);
}

@media (prefers-reduced-transparency: reduce) {
  .tq-rwc {
    background: linear-gradient(to bottom, var(--tq-cream) 0 50%, var(--tq-foot-bg) 50% 100%);
  }
  .tq-foot { background: var(--tq-foot-bg); }
}
@media (prefers-contrast: more) {
  .tq-rwc {
    background: linear-gradient(to bottom, var(--tq-cream) 0 50%, var(--tq-foot-bg) 50% 100%);
  }
  .tq-foot { background: var(--tq-foot-bg); }
}
/* ==== /SLOT: rewards banner seam ========================================= */

/* ==== SLOT: specials description ========================================= */
/* ===========================================================================
   SPECIALS TILES — the description is hover-only again, 2026-09-11 (Santi)
   ---------------------------------------------------------------------------
   Reversing a deliberate call, so the reasoning it reverses is worth keeping:
   on 2026-09-10 the description was changed FROM hover-only TO always-visible
   (two lines, clamp released on hover) because "the thing that explains the
   offer was invisible until someone happened to point at it". That trade is
   being taken the other way now — the tiles read as a name and a price, and
   the description is the reward for pointing at one.

   WHY NOT JUST opacity:0. The old grid-template-rows 0fr -> 1fr trick is gone
   (the 09-10 pass removed it because it fought line-clamp) and it would not
   work anyway: .tq-tile__text is a <p> holding a bare text node, and that
   technique needs the content inside a child box it can collapse. Hiding with
   opacity alone leaves the text OCCUPYING ITS HEIGHT — invisible, but still
   pushing the name up inside a tile that is now a fixed 1:1 square.

   So it collapses on max-height, and the magic number the old comment warned
   about is bounded here: -webkit-line-clamp caps the open state at 6 lines,
   and 6 x 1.5em at 14px is 126px, so 10em clears it with room and cannot be
   wrong for a long description the way an unbounded one could.

   TOUCH IS EXEMPT, and not as an oversight. With no hover there is no way to
   reach the description at all, which is the fault the 09-10 pass was fixing.
   Wrapped in (hover: hover) so pointer devices get the hover-only behaviour
   asked for and touch keeps the 3-line clamp it has now. */
@media (hover: hover) {
  .tq-tile__text {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    -webkit-line-clamp: 6;
    transition: max-height 380ms var(--tq-ease),
                opacity 300ms var(--tq-ease),
                margin-top 380ms var(--tq-ease);
  }
  .tq-tile:hover .tq-tile__text,
  .tq-tile:focus-within .tq-tile__text {
    opacity: 1;
    max-height: 10em;
    margin-top: 7px;
  }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .tq-tile__text { transition-duration: 1ms; }
}
/* ==== /SLOT: specials description ======================================== */