/* ===========================================================================
   TEQUILA MAMA — "LUNA": everything below the hero, on the ECLIPSE DI LUNA
   reference.  clients/crazycantina/Eclipse-di-Luna-…-in-Atlanta.png
                                                                  2026-09-15
   ---------------------------------------------------------------------------
   Santi, 2026-09-15: "everything apart from the video and the header should
   look like eclipse di luna but with tequila mama style with a more bentobox
   design in mind."

   So the cut is exact. The hero video and the sticky header stay MIDTOWN and
   are still in assets/home-mid.css, which was pruned to those two things the
   same day. Every band under them is this file. Nothing about the copy, the
   band order or the markup changes — this is a restyle in place, the same
   scope the Midtown pass ran under, and it adds no HTML at all.

   WHAT THE REFERENCE IS, as a vocabulary. Eclipse di Luna is an ATLANTA tapas
   room and the page is almost the opposite of what this site was doing:

     1  PAPER IS THE GROUND, not one band in five. The reference runs warm
        stone and cream-with-damask nearly end to end, and gets its colour from
        blocks SITTING ON the paper — one red band, a cocoa card, a maroon
        panel. This site was six saturated full-bleed bands in a row, which is
        why nothing on it could read as a card: there was no ground to sit on.
     2  A TILTED PAPER TAG over every heading, with angled ends, a little
        rotation and a shadow, as if taped to the page.
     3  ORNAMENT IS A HAIRLINE AND A SPARKLE — a thin gold rule and a
        four-pointed star, never a heavy device. (It also uses a crescent moon,
        which is its own logo and is not ours to borrow.)
     4  EVERYTHING IS ROUNDED AND CASTS A SHADOW. Cards at ~14px with a soft
        drop, buttons as full pills.
     5  THE OFFSET DOUBLE LAYER: a coloured card peeking out from behind a
        photograph, down and to the left. It is the reference's one signature
        move and it is the cheapest way to make a flat image read as an object.
     6  PILL BUTTONS: a solid one in the house colour, a dark one beside it.

   THE COLOUR MAPPING, all of it out of the brand tokens — nothing invented:

     reference          role                  here
     warm stone         the ground            --lun-paper  (cream, warmed)
     cream + damask     the second ground     --lun-paper-2 + the talavera tile
     brick red          the one hot band      --tmt-red-ink
     dark cocoa         the floating card     --tmt-teal-ink
     deep maroon        the closing panel     --tmt-red-ink, deepened
     antique gold       hairlines, stars      --tmt-yellow-deep on paper,
                                              --tmt-yellow on the dark grounds
     its crimson pill   the primary action    --tmt-red

   Yellow moves OFF the buttons and onto the ornament, which is where the
   reference keeps its gold. As of 2026-09-15 there is no yellow button left
   anywhere: the header's took the red pill with the rest of `.tq-btn` (it is
   inside the header, but it is not the header's LAYOUT, which is what was out
   of scope), the floating one was brought across by name, and the hero's two
   followed. One button style, whole site.

   BENTO. The reference is not a bento layout — it is stacked full-width rows.
   Santi asked for one, so bento is the thing this file adds ON TOP of the
   reference rather than takes from it, and it goes where the content already
   comes in modules:
     - the WEEK (.tq-bento) becomes a real bento: one big square, one wide,
       two small, two wide, instead of six equal boxes;
     - the CATERING shots become a cluster — one tall, two stacked;
     - the MENU band becomes two blocks on paper rather than one teal field;
     - the SOCIALS and REWARDS bands become cards floating on paper, which is
       what the reference does with its Instagram and newsletter panels.

   TO REVERT: delete the require of inc/luna.php in functions.php. The body
   class and this sheet both stop and the page falls back to home-taq.css plus
   Midtown's hero — but note Midtown's own band rules were DELETED, not
   overridden, so reverting gives the base treatment, not the Midtown one. The
   whole pre-Luna Midtown sheet is assets/home-mid.css.bak-preluna.
   ========================================================================= */

/* ================================================================ 0. tokens */
body.tq-lun {
  /* The two papers. Eclipse alternates a warm stone with a cream damask, which
     is what stops six paper bands in a row from reading as one long band. */
  --lun-paper:    #F4EFE4;
  --lun-paper-2:  #EBE3D3;
  --lun-ink:      var(--tmt-teal-ink);    /* the cocoa: dark cards            */
  --lun-wine:     var(--tmt-red-ink);     /* the brick band                   */
  --lun-red:      var(--tmt-red);         /* the pill                         */
  --lun-gold:     var(--tmt-yellow-deep); /* hairlines + stars ON PAPER       */
  --lun-gold-lt:  var(--tmt-yellow);      /* the same, on a dark ground       */

  --lun-r:        14px;                   /* the card radius                  */
  --lun-r-sm:     8px;                    /* chips, small media               */
  --lun-shadow:   0 16px 38px rgba(33, 29, 26, 0.14),
                  0 3px 10px rgba(33, 29, 26, 0.07);
  --lun-shadow-sm:0 8px 20px rgba(33, 29, 26, 0.11);
  --lun-gap:      clamp(12px, 1.4vw, 20px);   /* the bento gutter             */

  /* The four-pointed star, as one asset. Drawn rather than shipped: it is two
     curves and an <img> request for that is a request wasted. Two colourways
     because it has to sit on paper and on the dark grounds both. */
  --lun-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 0c1.1 7.2 6.8 12.9 14 14-7.2 1.1-12.9 6.8-14 14-1.1-7.2-6.8-12.9-14-14C7.2 12.9 12.9 7.2 14 0z' fill='%23E3A600'/%3E%3C/svg%3E");
  --lun-star-lt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 0c1.1 7.2 6.8 12.9 14 14-7.2 1.1-12.9 6.8-14 14-1.1-7.2-6.8-12.9-14-14C7.2 12.9 12.9 7.2 14 0z' fill='%23FDCA0A'/%3E%3C/svg%3E");
}

/* ================================================================ 1. grounds */
/* Paper, paper, paper, RED, paper, damask, and two cards floating on paper.
   The alternation is what carries the rhythm now that the colour has come off
   the bands — consecutive paper bands take the two different papers, never the
   same one twice running. */
/* THE DAMASK IS `fondo_talavera_white.webp?v=flat`, TILED — not `fondo_tequilamama`,
   which is the first thing the screenshots threw out. That file is a TMTM
   watermark and the bands were painting it `center / cover`, so at 1440 the
   letters came out a foot tall and every paper band read as a monogrammed
   towel. The talavera tile is 464x480, repeats cleanly, and is the closer
   thing to the reference's damask anyway.
   `multiply` is what makes it a texture rather than a covering: the tile's own
   ground is white, so blending it over the paper colour drops the white out
   and leaves only the motif, a shade darker than whatever it lands on. */
body.tq-lun .tq-stmt,
body.tq-lun .tq-catease {
  background: var(--lun-paper);
}
body.tq-lun .tq-menu,
body.tq-lun .tq-social {
  background: url('taq/fondo_talavera_white.webp?v=flat') repeat center / 210px, var(--lun-paper-2);
  background-blend-mode: multiply;
}
body.tq-lun .tq-happening,
body.tq-lun .tq-revs {
  background: url('taq/fondo_talavera_white.webp?v=flat') repeat center / 210px, var(--lun-paper);
  background-blend-mode: multiply;
}
/* THE one hot band. The reference gives its whole page exactly one, and this
   is the band that earns it: six photographs of food with the offer written
   over them wants a ground that says the week is the event. */
body.tq-lun .tq-specials {
  background: var(--lun-wine);
}

/* Type has to re-resolve on the bands that changed ground. The teal bands were
   printing cream headings and the yellow band was printing red ones; on paper
   both are wrong. */
body.tq-lun .tq-menu .tq-h2,
body.tq-lun .tq-menu .tq-h2--red,
body.tq-lun .tq-revs .tq-h2,
body.tq-lun .tq-revs .tq-h2--red,
body.tq-lun .tq-happening .tq-h2,
body.tq-lun .tq-happening .tq-h2--red,
body.tq-lun .tq-stmt .tq-stmt__big { color: var(--lun-wine); }
body.tq-lun .tq-menu .tq-menu__lede,
body.tq-lun .tq-revs .tq-revs__lede,
body.tq-lun .tq-happening .tq-happening__lede,
body.tq-lun .tq-stmt .tq-stmt__lead { color: var(--tmt-charcoal); }
body.tq-lun .tq-stmt .tq-stmt__lead--2 { color: var(--tmt-stone); }
body.tq-lun .tq-specials .tq-h2,
body.tq-lun .tq-specials .tq-h2--red { color: var(--tmt-cream); }
body.tq-lun .tq-specials .tq-specials__lede { color: rgba(255, 255, 255, 0.82); }
/* Set twice on purpose: the base sheet re-declares this one near its end
   (`.tq-specials__eyebrow { color: var(--tmt-red-deep) }`) and at equal
   specificity to the band-scoped form, so the flat selector is the one that
   has to be beaten. Deep red on the brick band is invisible. */
body.tq-lun .tq-specials .tq-specials__eyebrow,
body.tq-lun .tq-specials__eyebrow { color: var(--lun-gold-lt); }
body.tq-lun .tq-menu .tq-menu__eyebrow > span { color: var(--tmt-red-ink); }

/* ============================================================ 2. the tag */
/* The script label becomes the reference's taped-on paper tag: angled ends, a
   degree and a half of rotation, a real shadow. The WORD does not change —
   it is the site's own Spanish and it is set in Yellowtail, which is the one
   place this treatment stays more Tequila Mama than Eclipse. The reference
   sets a sans in there; a script in a paper tag is the same object. */
body.tq-lun .tq-kick {
  display: inline-block;
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  padding: 4px 26px 7px;
  font-family: var(--font-script, cursive);
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lun-wine);
  background: #FFFDF7;
  border-radius: 2px;
  box-shadow: var(--lun-shadow-sm);
  transform: rotate(-1.6deg);
  /* the reference's tags are cut on a slant at both ends */
  clip-path: polygon(3% 0, 100% 4%, 97% 100%, 0 96%);
}
/* On the one hot band the tag keeps its paper and the script takes the band's
   own red, which is the reference's arrangement on its Gift Cards panel. */
body.tq-lun .tq-specials .tq-kick { background: var(--tmt-cream); color: var(--lun-wine); }

/* The tag needs to be centred on the bands whose heads are centred; it is an
   inline-block inside a flex column, so it is the ALIGNMENT that places it and
   the heads already set that. Nothing to do — noted so the next pass does not
   go looking for a margin: auto that is not there. */

/* ============================================ 3. the sparkle and the hairline */
/* Above the tag, a four-pointed star. Under the heading, a hairline — the
   reference's two ornaments, replacing the zigzag rule Midtown drew here. */
body.tq-lun .tq-menu__head::before,
body.tq-lun .tq-happening__head::before,
body.tq-lun .tq-specials__head::before,
body.tq-lun .tq-revs__head::before {
  content: "";
  display: block;
  width: 26px; height: 26px;
  margin: 0 auto 14px;
  background: var(--lun-star) no-repeat center / contain;
}
body.tq-lun .tq-specials__head::before { background-image: var(--lun-star-lt); }

body.tq-lun .tq-menu__head > h2::after,
body.tq-lun .tq-happening__head > h2::after,
body.tq-lun .tq-specials__head > h2::after,
body.tq-lun .tq-revs__head > h2::after,
body.tq-lun .tq-catease__copy > h2::after {
  content: "";
  display: block;
  height: 1px; width: min(280px, 46vw);
  margin: clamp(16px, 2vw, 24px) auto 0;
  background: linear-gradient(to right,
    transparent, var(--lun-gold) 18%, var(--lun-gold) 82%, transparent);
}
/* The catering heading is ranged left, so its rule is too. */
body.tq-lun .tq-catease__copy > h2::after { margin-inline: 0; width: min(220px, 40vw); }
body.tq-lun .tq-specials__head > h2::after {
  background: linear-gradient(to right,
    transparent, var(--lun-gold-lt) 18%, var(--lun-gold-lt) 82%, transparent);
}

/* The ornaments the bands carried before this treatment. The events band's and
   the reviews band's are Midtown-era devices with nothing left to match. */
body.tq-lun .tq-happening__orn,
body.tq-lun .tq-revs__star,
body.tq-lun .tq-catease__rule { display: none; }

/* ======================================================= 4. pills and chips */
/* Full pills. The reference has exactly two: a solid one in the house colour
   and a dark one beside it. */
body.tq-lun .tq-btn {
  border-radius: 999px;
  padding: 14px 30px;
  border: 2px solid transparent;
  font-family: var(--font-inria), sans-serif;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  box-shadow: var(--lun-shadow-sm);
  transition: background 200ms var(--tq-ease), color 200ms var(--tq-ease),
              border-color 200ms var(--tq-ease), transform 200ms var(--tq-ease),
              box-shadow 200ms var(--tq-ease);
}
body.tq-lun .tq-btn:hover,
body.tq-lun .tq-btn:focus-visible { transform: translateY(-2px); box-shadow: var(--lun-shadow); }
body.tq-lun .tq-btn--primary {
  background: var(--lun-red); color: var(--tmt-white); border-color: var(--lun-red);
}
body.tq-lun .tq-btn--primary:hover,
body.tq-lun .tq-btn--primary:focus-visible {
  background: var(--lun-wine); border-color: var(--lun-wine); color: var(--tmt-white);
}
/* The dark pill. On paper it is the ink; on the red band it goes to paper, or
   a dark pill on a dark red ground would be a hole. */
body.tq-lun .tq-btn--ghost {
  background: var(--tmt-ink); color: var(--tmt-cream); border-color: var(--tmt-ink);
}
body.tq-lun .tq-btn--ghost:hover,
body.tq-lun .tq-btn--ghost:focus-visible {
  background: transparent; color: var(--tmt-ink); border-color: var(--tmt-ink);
}
body.tq-lun .tq-specials .tq-btn--ghost,
body.tq-lun .tq-social .tq-btn--ghost {
  background: var(--tmt-cream); color: var(--lun-wine); border-color: var(--tmt-cream);
}
/* THE HERO'S TWO BUTTONS MATCH TOO, from 2026-09-15.
   They were held at the squared Midtown block for one round, on the reading
   that the hero was out of scope. Then Santi asked for the floating button to
   "match the style of every other button in the website", and with that done
   these were the last two that did not — a consistency instruction that stops
   at the one pair of buttons a visitor sees FIRST is not a consistency
   instruction. So they take the pill.
   
   What does change for them is the SECOND button. On paper the ghost is a
   dark ink pill; over footage a dark pill on a dark frame is a hole, and the
   hero's clip is lit dark through most of its cut. So on the hero only, the
   ghost is a white pill — same shape, same type, same size as everywhere else,
   inverted for the ground it is standing on. It is the identical trade the
   reference makes on its own hero.
   
   To put the Midtown block back, this is the block to edit. */
body.tq-lun .tq-hero .tq-btn--ghost {
  background: var(--tmt-white); color: var(--lun-wine); border-color: var(--tmt-white);
}
body.tq-lun .tq-hero .tq-btn--ghost:hover,
body.tq-lun .tq-hero .tq-btn--ghost:focus-visible {
  background: transparent; color: var(--tmt-white); border-color: var(--tmt-white);
}
/* The shadow on the hero pills is deeper than the page's: they are over moving
   video rather than paper, and the page shadow reads as nothing against it. */
body.tq-lun .tq-hero .tq-btn { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42); }

/* ---- the floating order button ------------------------------------------ */
/* Santi, 2026-09-15: "make it match the style of every other button in the
   website". It was the odd one out twice over — the display face at 16px
   where every other button is Inria at 12.5, and the base sheet's yellow
   where every Luna action is the red pill. It is a <summary>, not an <a>, so
   it cannot simply take .tq-btn; the declarations are repeated rather than
   shared, and the block below is deliberately the same list in the same order
   as .tq-btn above so the two can be diffed by eye. */
body.tq-lun .tq-fab__btn {
  border-radius: 999px;
  padding: 14px 30px;
  border: 2px solid var(--lun-red);
  background: var(--lun-red); color: var(--tmt-white);
  font-family: var(--font-inria), sans-serif;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  box-shadow: var(--lun-shadow);
  transition: background 200ms var(--tq-ease), color 200ms var(--tq-ease),
              border-color 200ms var(--tq-ease), transform 200ms var(--tq-ease);
}
body.tq-lun .tq-fab__btn:hover,
body.tq-lun .tq-fab__btn:focus-visible {
  background: var(--lun-wine); border-color: var(--lun-wine); color: var(--tmt-white);
  transform: translateY(-2px);
}
body.tq-lun .tq-fab[open] .tq-fab__btn {
  background: var(--tmt-ink); border-color: var(--tmt-ink); color: var(--tmt-cream);
}
/* The sheet it opens is a card like every other card now. */
body.tq-lun .tq-fab__sheet {
  border-radius: var(--lun-r); box-shadow: var(--lun-shadow); border: 0;
  overflow: hidden;
}
body.tq-lun .tq-fab__opt strong { color: var(--lun-wine); }

/* THE GATE, homepage only: off until the menu band is on screen. The class is
   written by assets/home-mid.js, which owns the homepage's scroll position.
   Note which way round this is — the button is visible by DEFAULT and the
   HOMEPAGE hides it, so every interior page is untouched and a dead script
   leaves the button working rather than leaves it gone. */
body.tq-lun.home .tq-fab {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  pointer-events: none;
  transition: opacity 260ms var(--tq-ease), transform 260ms var(--tq-ease);
}
body.tq-lun.home .tq-fab--on,
body.tq-lun.home .tq-fab[open] {
  opacity: 1; transform: none; pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  body.tq-lun.home .tq-fab { transition: opacity 1ms; transform: none; }
  body.tq-lun .tq-fab__btn { transition: none; }
  body.tq-lun .tq-fab__btn:hover { transform: none; }
}

/* The chips under the catering copy: pale fill, hairline, small radius — the
   reference's Order Online / Entertainment / Deals / Menu row exactly. */
body.tq-lun .tq-pill {
  border-radius: var(--lun-r-sm);
  background: #FFFDF7;
  border: 1px solid rgba(227, 166, 0, 0.55);
  color: var(--tmt-charcoal);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: none;
  box-shadow: none;
}

/* ================================================================= 5. cards */
/* Rounded and shadowed, everywhere. This is the blanket that undoes the
   base sheet's square edges as much as it is a Luna rule. */
body.tq-lun .tq-hap,
body.tq-lun .tq-revcard,
body.tq-lun .tq-tile,
body.tq-lun .tq-pick__panel,
body.tq-lun .tq-catease__shot,
/* The band BEHIND the card, which is a different element and was still on the
   base sheet's cream — a pale stripe running across the middle of the paper. */
body.tq-lun .tq-rwc {
  background: url('taq/fondo_talavera_white.webp?v=flat') repeat center / 210px, var(--lun-paper-2);
  background-blend-mode: multiply;
}
body.tq-lun .tq-rwc__card {
  border: 0;
  border-radius: var(--lun-r);
  overflow: hidden;
  box-shadow: var(--lun-shadow);
}
body.tq-lun .tq-hap__media img,
body.tq-lun .tq-catease__shot img,
body.tq-lun .tq-pick__img { border-radius: 0; }

/* THE OFFSET DOUBLE LAYER — the reference's signature. A block of colour the
   same size as the card, pushed down and left, showing only along two edges.
   Drawn on the card's wrapper rather than the card, because the card itself is
   overflow:hidden and would clip its own shadow layer.
   Only the cards that stand alone get it. Putting it on six bento tiles at
   once would read as a printing fault, not as a device. */
/* First attempt hung the offset block off the SHOTS CONTAINER, which is the
   whole three-photo cluster: 62% of that is most of a column, so what showed
   was a long yellow bar running out from under the bottom of the tall shot —
   a printing fault, which is the one thing this device must never look like.
   It belongs to ONE photograph, and only the two edges it peeks past should
   ever be visible, so it is drawn on the tall shot's own box and inset on the
   other two sides. */
body.tq-lun .tq-catease__shots { position: relative; }
body.tq-lun .tq-catease__shot { position: relative; z-index: 1; }
body.tq-lun .tq-catease__shot--1 { overflow: visible; }
body.tq-lun .tq-catease__shot--1::before {
  content: "";
  position: absolute; z-index: -1;
  /* down and to the LEFT, which is the direction the reference offsets in.
     Peeking right pushed it into the 14px gutter between this shot and the
     two stacked beside it and read as a misprint rather than a layer. */
  inset: 18px 18px -18px -18px;
  border-radius: var(--lun-r);
  background: var(--lun-gold);
}
body.tq-lun .tq-catease__shot--1 img { border-radius: var(--lun-r); }

/* Event cards: paper fill, no keyline, the tag as a soft chip. */
body.tq-lun .tq-hap { background: #FFFDF7; }
body.tq-lun .tq-hap__body { padding: 22px 22px 24px; }
body.tq-lun .tq-hap__title { color: var(--lun-wine); }
body.tq-lun .tq-hap__text { color: var(--tmt-charcoal); }
body.tq-lun .tq-hap__when { color: var(--tmt-stone); }
body.tq-lun .tq-hap__tag {
  border-radius: 999px;
  background: var(--lun-red); color: var(--tmt-white);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: var(--lun-shadow-sm);
}

/* Review cards: the reference's are plain white with gold stars and a small
   italic attribution, on the damask. */
body.tq-lun .tq-revcard {
  background: var(--tmt-white);
  padding: 26px 24px 28px;
}
body.tq-lun .tq-revcard__stars { color: var(--lun-gold); }
body.tq-lun .tq-revcard__quo { color: rgba(227, 166, 0, 0.5); }
body.tq-lun .tq-revcard__quote { color: var(--tmt-charcoal); }
body.tq-lun .tq-revcard__by { color: var(--lun-wine); }
body.tq-lun .tq-revcard__src { color: var(--tmt-stone); font-style: italic; letter-spacing: 0; }
body.tq-lun .tq-revcard__av { background: var(--lun-red); }

/* The rail controls stop being yellow squares. */
body.tq-lun .tq-arrow {
  border-radius: 999px;
  background: var(--tmt-white); color: var(--lun-wine);
  border: 1px solid rgba(227, 166, 0, 0.6);
  box-shadow: var(--lun-shadow-sm);
}
body.tq-lun .tq-arrow:hover { background: var(--lun-red); color: var(--tmt-white); border-color: var(--lun-red); }
body.tq-lun .tq-dots > button { background: rgba(33, 29, 26, 0.22); }
body.tq-lun .tq-dots > button[aria-current="true"],
body.tq-lun .tq-dots > .is-on { background: var(--lun-red); }

/* ================================================================== 6. seams */
/* A hairline pair where one band meets the next, in place of Midtown's torn
   masks. Two rules 3px apart is the reference's own band divider. */
body.tq-lun .tq-menu,
body.tq-lun .tq-happening,
body.tq-lun .tq-specials,
body.tq-lun .tq-catease,
body.tq-lun .tq-revs,
body.tq-lun .tq-social { position: relative; }
body.tq-lun .tq-menu::before,
body.tq-lun .tq-happening::before,
body.tq-lun .tq-specials::before,
body.tq-lun .tq-catease::before,
body.tq-lun .tq-revs::before,
body.tq-lun .tq-social::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(var(--lun-gold) 1px, transparent 1px 2px, var(--lun-gold) 2px);
  opacity: 0.5;
}
body.tq-lun .tq-specials::before { background: linear-gradient(var(--lun-gold-lt) 1px, transparent 1px 2px, var(--lun-gold-lt) 2px); }

/* =========================================================== 7. THE BENTO */
/* Six equal boxes is a grid, not a bento. The week gets a shape: one big
   square carrying Monday, a wide one, two small, and two wide to close.
   Sizes are assigned by the day's own class (.tq-tile--1 … --6, printed in
   inc/taq-sections.php in menu order), so reordering the specials in the
   Customizer reshuffles the bento with them — which is correct: the FIRST
   special is the one worth the big tile, whichever day that is. */
/* THE TILES HAD `aspect-ratio: 1 / 1` and it silently ate the whole shape.
   A tile two columns wide then had to be two columns TALL — 556px square at
   1440 — and the big tile's `grid-row: span 2` bought it nothing, because its
   own ratio had already fixed its height at one row's worth. The grid drew the
   span and the tile refused to fill it, which is the empty quarter the first
   screenshot showed. Rows are given a height here and the ratio is released;
   the tiles are photographs with a caption plate, and a photograph does not
   need to be square to be a photograph. */
@media (min-width: 900px) {
  body.tq-lun .tq-bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(200px, 17vw, 250px);
    gap: var(--lun-gap);
  }
  body.tq-lun .tq-tile { aspect-ratio: auto; min-height: 0; height: auto; }
  body.tq-lun .tq-tile--1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  body.tq-lun .tq-tile--2 { grid-column: 3 / span 2; grid-row: 1; }
  body.tq-lun .tq-tile--3 { grid-column: 3;          grid-row: 2; }
  body.tq-lun .tq-tile--4 { grid-column: 4;          grid-row: 2; }
  body.tq-lun .tq-tile--5 { grid-column: 1 / span 2; grid-row: 3; }
  body.tq-lun .tq-tile--6 { grid-column: 3 / span 2; grid-row: 3; }
}
/* Two columns in the middle, where four is too narrow to show a plate and one
   is a very long page. The big tile keeps its two columns. */
@media (min-width: 640px) and (max-width: 899px) {
  body.tq-lun .tq-bento { grid-template-columns: repeat(2, 1fr); gap: var(--lun-gap); }
  body.tq-lun .tq-tile--1 { grid-column: 1 / span 2; }
}
body.tq-lun .tq-tile { box-shadow: var(--lun-shadow); }
body.tq-lun .tq-tile__day {
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.94); color: var(--lun-wine);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: var(--lun-shadow-sm);
}
body.tq-lun .tq-tile__price {
  border-radius: 999px; background: var(--lun-gold-lt); color: var(--tmt-ink);
  font-weight: 700;
}
/* The big tile has room to say more, so its name goes up a step. Handled by
   the tile's own size rather than by a modifier class, which would have to be
   kept in step with the grid above. */
@media (min-width: 900px) {
  body.tq-lun .tq-tile--1 .tq-tile__name { font-size: clamp(22px, 2.2vw, 30px); }
}

/* =========================================================== 8. band by band */

/* ---- the statement: a dark card on paper, not a teal field --------------- */
/* The reference's About band is paper with the copy ranged left and an image
   card to the right of it. This band has copy and the house seal, so the seal
   takes the card's place and gets a ground of its own to sit on. */
/* THIS BAND HAS NO LAYOUT OF ITS OWN and that is not obvious from the markup.
   It never carries `tq-stmt--split` (the split only appears when a media
   cluster is set), so the two-column arrangement it has had on screen since
   September was MIDTOWN's, in the section that was deleted this morning.
   Deleting it left the band a centred flex column with a 120px seal floating
   at the top of it — which is exactly what the first Luna screenshot showed
   and exactly the kind of thing that only turns up in a picture. Luna has to
   supply the grid itself. */
body.tq-lun .tq-stmt { padding-block: clamp(56px, 7vw, 96px); }
body.tq-lun .tq-stmt__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center; text-align: left;
}
@media (min-width: 900px) {
  body.tq-lun .tq-stmt__inner { grid-template-columns: minmax(0, 1fr) auto; }
}
/* The seal is printed BEFORE the copy, so the two are ordered here rather than
   in the markup — the same call Midtown made, and for the same reason: without
   it the seal takes the 1fr column and the sentence is squeezed into `auto`. */
body.tq-lun .tq-stmt__copy {
  order: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px; text-align: left;
}
body.tq-lun .tq-stmt__seal { order: 2; }

/* The band's own accent line, "y bienvenidos", IS its tag. It is printed after
   the heading and there is no .tq-kick on this band, so rather than add one it
   is lifted above the heading and given the tag treatment — real markup, no
   duplicate word, which is the call Midtown made here too and the only part of
   its statement band worth keeping. */
body.tq-lun .tq-stmt__copy > .tq-accent,
body.tq-lun .tq-stmt__copy > .tq-accent--lg {
  order: -1; margin: 0 0 6px;
  display: inline-block;
  padding: 4px 24px 7px;
  font-family: var(--font-script, cursive);
  font-size: clamp(22px, 2.8vw, 34px); line-height: 1.1;
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--lun-wine);
  background: #FFFDF7;
  border-radius: 2px;
  box-shadow: var(--lun-shadow-sm);
  transform: rotate(-1.6deg);
  clip-path: polygon(3% 0, 100% 4%, 97% 100%, 0 96%);
}
body.tq-lun .tq-stmt__big { max-width: 18ch; }
body.tq-lun .tq-stmt__lead { max-width: 54ch; }
/* The seal on its own dark tile — the reference's About band puts an image
   card exactly here. 42x28 of viewBox needs a width told to it or it collapses
   to the browser's 120px default, which is what the screenshot caught. */
body.tq-lun .tq-stmt__seal {
  width: clamp(150px, 17vw, 230px); height: auto;
  box-sizing: content-box;
  padding: clamp(26px, 3.4vw, 44px);
  background: var(--lun-ink);
  border-radius: var(--lun-r);
  box-shadow: var(--lun-shadow);
}
body.tq-lun .tq-stmt .tq-btn--primary {
  background: var(--lun-red); color: var(--tmt-white); border-color: var(--lun-red);
}

/* ---- the menu: two blocks on paper -------------------------------------- */
/* It was a teal field with the rows written straight onto it. On paper the
   rows need a card of their own or they float, so the band becomes what the
   bento brief asks for: a paper block of rows beside a photo block. */
/* The rows' wrapper is `.tq-pick__rows`. There is no `.tq-menu__left` on this
   page at all — it belongs to an older build of the band and the first pass
   styled it, which is why the first screenshot had the list sitting straight
   on the damask with no card under it. Check the live class list, not the
   stylesheet's memory of it. */
body.tq-lun .tq-pick__rows {
  background: #FFFDF7;
  border-radius: var(--lun-r);
  box-shadow: var(--lun-shadow);
  padding: clamp(10px, 1.4vw, 18px) clamp(14px, 2vw, 24px);
  align-self: start;
}
body.tq-lun .tq-prow {
  border-radius: var(--lun-r-sm);
  padding-inline: 12px;
  transition: background 200ms var(--tq-ease);
}
body.tq-lun .tq-prow__n { color: var(--lun-gold); font-weight: 700; }
body.tq-lun .tq-prow__name { color: var(--lun-wine); }
body.tq-lun .tq-prow__sub { color: var(--tmt-stone); }
body.tq-lun .tq-prow:hover,
body.tq-lun .tq-prow.is-on { background: rgba(227, 166, 0, 0.13); }
/* `.is-on` is on the FIRST row from the server, so whatever it paints is what
   a visitor sees before they touch anything. On the teal band that was yellow
   type; on paper it was yellow type on cream, i.e. the one row you cannot
   read. It takes the same colours as every other row now, and the tint alone
   says which one is showing. */
body.tq-lun .tq-prow.is-on .tq-prow__name { color: var(--lun-wine); }
body.tq-lun .tq-prow.is-on .tq-prow__n { color: var(--lun-red); }
body.tq-lun .tq-prow__go {
  background: var(--lun-red); color: var(--tmt-white); border-color: var(--lun-red);
}
body.tq-lun .tq-prow.is-on .tq-prow__go { background: var(--lun-wine); border-color: var(--lun-wine); color: var(--tmt-white); }
/* The eyebrow's two flanking rules were drawn for white-on-teal. */
body.tq-lun .tq-menu__eyebrow::before,
body.tq-lun .tq-menu__eyebrow::after { background: rgba(227, 166, 0, 0.5); }
body.tq-lun .tq-pick__cap { color: var(--tmt-white); }
body.tq-lun .tq-menu__eyebrow > span { letter-spacing: 0.16em; }

/* ---- the week: the one hot band ----------------------------------------- */
body.tq-lun .tq-specials { padding-block: clamp(56px, 7vw, 96px) clamp(64px, 8vw, 104px); }

/* ---- catering: copy beside a photo cluster ------------------------------ */
body.tq-lun .tq-catease__copy > h2 { color: var(--lun-wine); }
body.tq-lun .tq-catease__text { color: var(--tmt-charcoal); }

/* ---- socials: a dark card floating on paper ----------------------------- */
/* The reference's Instagram band is a cocoa card inset from the page edges
   with the copy on it, not a full-bleed coloured band. */
body.tq-lun .tq-social { padding-block: clamp(48px, 6vw, 80px); }
body.tq-lun .tq-social__inner {
  background: var(--lun-ink);
  border-radius: var(--lun-r);
  box-shadow: var(--lun-shadow);
  padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 56px);
  color: var(--tmt-cream);
}
/* The heading is two elements, not one: a red <span> for the script line and
   an ink <em> for the caps under it, both set for CREAM in the base sheet. On
   the ink card the red barely holds and the ink is invisible, so both move.
   There is no .tq-kick on this band — the script line does that job. */
body.tq-lun .tq-social__h { color: var(--tmt-white); }
body.tq-lun .tq-social__h span { color: var(--lun-gold-lt); }
body.tq-lun .tq-social__h em { color: var(--tmt-white); }
body.tq-lun .tq-social__lede { color: rgba(255, 255, 255, 0.78); }
/* NO filter. `brightness(0) invert(1)` flattened the seal into a white blob —
   it paints every fill white, and this mark is white lettering INSIDE a teal
   cartouche, so the lettering and its frame became one shape. Left alone the
   white reads on the ink card and the teal outline does the framing, which is
   what the mark is for. */
body.tq-lun .tq-social__badge { filter: none; }
body.tq-lun .tq-social__rule {
  display: block; height: 1px; width: min(240px, 44vw); margin-inline: auto;
  background: linear-gradient(to right,
    transparent, var(--lun-gold-lt) 18%, var(--lun-gold-lt) 82%, transparent);
}
body.tq-lun .tq-social__rule > i,
body.tq-lun .tq-social__rule > b { display: none; }
body.tq-lun .tq-social__btn {
  border-radius: 999px;
  background: var(--lun-red); color: var(--tmt-white);
  box-shadow: var(--lun-shadow-sm);
}
body.tq-lun .tq-social__btn:hover { background: var(--tmt-white); color: var(--lun-wine); }

/* ---- rewards: the reference's newsletter panel --------------------------- */
/* Deep maroon, a damask over it, centred serif-scale heading, one pill. This
   band is printed by tm_taq_footer() and so lands on EVERY page — which is
   also true of the reference's newsletter panel. */
body.tq-lun .tq-rwc__card {
  background: var(--lun-wine) url('taq/fondo_talavera_white.webp?v=flat') center / 300px repeat;
  background-blend-mode: soft-light;
  border-radius: var(--lun-r);
  box-shadow: var(--lun-shadow);
}
body.tq-lun .tq-rwc__h { color: var(--tmt-white); }
body.tq-lun .tq-rwc__sub { color: rgba(255, 255, 255, 0.8); }
body.tq-lun .tq-rwc__btn {
  border-radius: 999px;
  background: var(--tmt-cream); color: var(--lun-wine);
  box-shadow: var(--lun-shadow-sm);
}
body.tq-lun .tq-rwc__btn:hover { background: var(--lun-gold-lt); color: var(--tmt-ink); }

/* ---- the footer ---------------------------------------------------------- */
/* Rebuilt on Rreal Tacos one day before this pass, so its LAYOUT is left
   exactly alone — only the ground, the rules and the two round things are
   brought into Luna, which is all it takes for it to stop being the odd band
   out. */
body.tq-lun .tq-foot {
  background: url('taq/fondo_talavera_white.webp?v=flat') repeat center / 210px, var(--lun-paper-2);
  background-blend-mode: multiply;
}
body.tq-lun .tq-foot__h { color: var(--lun-wine); letter-spacing: 0.16em; }
body.tq-lun .tq-foot__rule-r { background: var(--lun-gold); opacity: 0.7; }
body.tq-lun .tq-foot__pill,
body.tq-lun .tq-foot__tile { border-radius: 999px; box-shadow: var(--lun-shadow-sm); }
body.tq-lun .tq-foot__soc-band { border-radius: var(--lun-r); }
body.tq-lun .tq-foot__phone { color: var(--lun-red); }

/* ==================================================== 9. motion + narrow */
@media (max-width: 700px) {
  body.tq-lun .tq-kick { font-size: clamp(20px, 6.6vw, 28px); padding-inline: 20px; }
  body.tq-lun .tq-btn { padding: 13px 24px; font-size: 12px; letter-spacing: 0.12em; }
  body.tq-lun .tq-catease__shots::before { display: none; }
  body.tq-lun .tq-social__inner { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body.tq-lun .tq-btn { transition: none; }
  body.tq-lun .tq-btn:hover, body.tq-lun .tq-btn:focus-visible { transform: none; }
}
/* clip-path with no support would show a plain rectangle, which is the tag
   without its cut ends — a degraded tag, not a broken one. Nothing to guard. */