/* ==========================================================================
   LOTERÍA — Asbury Park's Cantina
   Design language: the lotería deck. Sections are numbered cards, photos are
   matted prints, papel picado strings the seams, and the palette is pulled
   from the room itself — turquoise picnic tables, red umbrellas, marigold,
   bougainvillea pink, and the purple of the printed menu.
   Type: Ultra (slab display — card lettering) + Archivo (everything else).
   ========================================================================== */

:root {
  /* paper + ink */
  --paper: #FAF3E3;
  --paper-deep: #F3E7CE;
  --card: #FFF9EC;
  --ink: #2A1E1A;
  --ink-soft: #5C4A42;

  /* the deck */
  --red: #D93A2B;
  --red-deep: #A82A1F;
  --pink: #E84F8A;
  --marigold: #F5A623;
  --yellow: #FFD23F;
  --teal: #1FA8A0;
  --teal-deep: #0E7C76;
  --teal-card: #7FCCC4; /* mid tint of --teal — dark enough to separate from --paper-deep,
                           light enough to keep the black sirena silhouette crisp */
  --green: #3E9B4F;
  --purple: #7B4FA6;

  /* night — the bar after dark */
  --night: #221237;
  --night-2: #2E1A47;
  --night-ink: #F6EDDD;

  --font-display: "Ultra", "Georgia", serif;
  --font-body: "Archivo", "Helvetica Neue", sans-serif;

  --shadow-card: 5px 6px 0 rgba(42, 30, 26, 0.85);
  --shadow-card-sm: 3px 4px 0 rgba(42, 30, 26, 0.85);
  --header-h: 74px;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
/* Every <img> carries its intrinsic width/height so the browser can reserve the
   box before the bytes arrive (see tools/img-dims.mjs). Those attributes are
   presentational hints that map to the CSS *height* property — so without this
   line, an image whose width is clamped by max-width keeps its full attribute
   height and stretches. This only reaches images no component rule has sized;
   any `.thing img { height: … }` still wins on specificity. */
img { height: auto; }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

address { font-style: normal; }

.container {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

::selection { background: var(--yellow); color: var(--ink); }

/* ---------- Type helpers ---------- */

.headline {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
}
.headline em { font-style: normal; color: var(--red); }
.section-night .headline, .patio-band .headline, .party-card .headline { color: var(--night-ink); }
.section-night .headline em, .patio-band .headline em, .party-card .headline em { color: var(--yellow); }

/* NB: no overflow:hidden here — it sheared Ultra's descenders (y/g/p)
   at the 1.12 line-height, and nothing animates inside the line boxes. */
.headline .ln { display: block; }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.eyebrow-light { color: rgba(246, 237, 221, 0.75); }

.card-no {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--red);
  border: 1.5px solid currentColor;
  border-radius: 6px;
  padding: 3px 8px 2px;
  background: var(--card);
}
.eyebrow-light .card-no { background: transparent; color: var(--yellow); }

.lead {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 16px 0 0;
}
.section-night .lead, .patio-band .lead, .party-card .party-lead { color: rgba(246, 237, 221, 0.85); }

/* ---------- Buttons & links ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  padding: 13px 22px; border-radius: 999px;
  border: 2px solid var(--ink);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.2s, color 0.2s;
}
.btn .arrow { transition: transform 0.25s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-solid {
  background: var(--red); border-color: var(--red-deep); color: #fff;
  box-shadow: var(--shadow-card-sm);
}
.btn-solid:hover { transform: translate(-1px, -2px); box-shadow: 5px 7px 0 rgba(42, 30, 26, 0.85); }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.btn-light {
  background: var(--card); color: var(--ink); border-color: var(--ink);
  box-shadow: var(--shadow-card-sm);
}
.btn-light:hover { transform: translate(-1px, -2px); box-shadow: 5px 7px 0 rgba(42, 30, 26, 0.85); }

.btn-lg { padding: 16px 28px; font-size: 0.92rem; }

.section-night .btn-ghost, .patio-band .btn-ghost { color: var(--night-ink); border-color: var(--night-ink); }
.section-night .btn-ghost:hover { background: var(--night-ink); color: var(--night); }

.text-link {
  font-weight: 700; font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--marigold);
  padding-bottom: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.text-link:hover { color: var(--red); border-color: var(--red); }
.text-link-light { color: var(--night-ink); }
.text-link-light:hover { color: var(--yellow); border-color: var(--yellow); }

/* ---------- Header ---------- */

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background 0.35s, box-shadow 0.35s, transform 0.35s;
}
.header-inner {
  width: min(1320px, calc(100% - 40px));
  margin-inline: auto;
  height: var(--header-h);
  display: flex; align-items: center; gap: 26px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }

/* Layered Bungee Shade wordmark — client spec: #ff3131 face, #800000 outline.
   Three stacked copies of the same glyphs: maroon silhouette (thick stroke),
   warm-white inline (thin stroke), red face on top. */
.wm {
  position: relative; display: inline-block; z-index: 0;
  font-family: "Bungee Shade", "Ultra", serif; font-weight: 400;
  color: #ff3131; line-height: 1.06; letter-spacing: 0.01em;
}
.wm::before, .wm::after {
  content: attr(data-text); position: absolute; inset: 0;
  line-height: 1.06; letter-spacing: 0.01em;
}
.wm::before { -webkit-text-stroke: 0.115em #800000; color: #800000; z-index: -2; }
.wm::after { -webkit-text-stroke: 0.042em #FFF6EA; color: #FFF6EA; z-index: -1; }
.wm-header { font-size: 1.32rem; }
.wm-hero { font-size: clamp(3rem, 9.4vw, 6.2rem); }
.wm-footer { font-size: clamp(2.2rem, 6.5vw, 4rem); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

.primary-nav { display: flex; gap: 22px; margin-left: 8px; }
.primary-nav a {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  padding: 6px 2px; position: relative;
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2.5px; background: var(--red);
  transition: right 0.25s var(--ease-out);
}
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { right: 0; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header-actions .btn { padding: 10px 18px; font-size: 0.78rem; }

/* over the hero: light text, transparent bg */
.site-header.over-hero:not(.scrolled) { background: transparent; }
.site-header.over-hero:not(.scrolled) .primary-nav a,
.site-header.over-hero:not(.scrolled) .btn-ghost { color: #fff; }
.site-header.over-hero:not(.scrolled) .btn-ghost { border-color: rgba(255,255,255,0.85); }
.site-header.over-hero:not(.scrolled) .btn-ghost:hover { background: #fff; color: var(--ink); }
.site-header.over-hero:not(.scrolled) .wm-header { filter: drop-shadow(0 1px 6px rgba(0,0,0,0.35)); }

.site-header.scrolled, .site-header:not(.over-hero) {
  background: rgba(250, 243, 227, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(42, 30, 26, 0.14);
}

.nav-burger {
  display: none;
  width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  position: relative; z-index: 130;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: ""; display: block; position: absolute; left: 10px; right: 10px;
  height: 2.5px; background: var(--ink); border-radius: 2px;
  transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out), opacity 0.2s;
}
.site-header.over-hero:not(.scrolled) .nav-burger span,
.site-header.over-hero:not(.scrolled) .nav-burger span::before,
.site-header.over-hero:not(.scrolled) .nav-burger span::after { background: #fff; }
.nav-burger span { top: 21px; }
.nav-burger span::before { top: -8px; left: 0; right: 0; }
.nav-burger span::after { top: 8px; left: 0; right: 0; }
body.menu-open .nav-burger span { background: var(--paper) !important; transform: rotate(45deg); }
body.menu-open .nav-burger span::before { top: 0; transform: rotate(90deg); background: var(--paper) !important; }
body.menu-open .nav-burger span::after { top: 0; opacity: 0; }

/* ---------- Mobile overlay — the nav, dealt as a hand of cards ---------- */

.menu-overlay {
  position: fixed; inset: 0; z-index: 120;
  background:
    radial-gradient(120% 85% at 50% -5%, #3d2360, var(--night) 68%);
  color: var(--night-ink);
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + 58px) 26px 26px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}
body.menu-open .menu-overlay { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }

/* keep the header (brand + X) above the overlay — the way out is always visible */
body.menu-open .site-header {
  z-index: 140;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}
body.menu-open .header-actions .btn { opacity: 0; pointer-events: none; }
body.menu-open .nav-burger {
  background: var(--card);
  border-radius: 50%;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.45);
}
body.menu-open .nav-burger span { background: var(--ink) !important; transform: rotate(45deg); }
body.menu-open .nav-burger span::before { top: 0; transform: rotate(90deg); background: var(--ink) !important; }
body.menu-open .nav-burger span::after { top: 0; opacity: 0; }

/* papel picado strung under the header */
.mo-picado {
  position: absolute; top: calc(var(--header-h) - 10px); left: 0; right: 0;
  height: 52px;
  background-image: url("../assets/picado.svg");
  background-repeat: repeat-x;
  background-size: auto 100%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.menu-overlay .ghost-word {
  position: fixed; bottom: 4%; right: -6%;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 18vw, 9rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(246, 237, 221, 0.12);
  pointer-events: none; user-select: none;
  transform: rotate(-4deg);
}

.mo-inner {
  width: min(430px, 100%);
  margin: auto;
  display: flex; flex-direction: column;
  position: relative; z-index: 2;
}

.mo-nav { display: flex; flex-direction: column; gap: 11px; }

/* each link is a dealt card */
.mo-card {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  background: var(--card); color: var(--ink);
  text-decoration: none;
  border: 2px solid var(--ink); border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.5);
}
.mo-card::after {
  content: ""; position: absolute; inset: 4px;
  border: 1.5px solid rgba(217, 58, 43, 0.35); border-radius: 8px;
  pointer-events: none;
}
.mo-card:nth-child(odd) { --r: -0.9deg; }
.mo-card:nth-child(even) { --r: 0.8deg; }
.mo-card b {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 4.6vw, 1.3rem); letter-spacing: 0.01em;
}
.mo-no {
  flex: 0 0 auto;
  font-family: var(--font-display); font-size: 0.66rem;
  color: var(--red);
  border: 1.5px solid currentColor; border-radius: 6px;
  padding: 3px 7px 2px;
}
.mo-arrow { margin-left: auto; color: var(--red); font-weight: 700; }
.mo-card:active { transform: rotate(var(--r, 0deg)) scale(0.98); }

/* the card you're holding — the page you're on */
.mo-card[aria-current="page"] { background: var(--red); border-color: var(--red-deep); color: #fff; }
.mo-card[aria-current="page"]::after { border-color: rgba(255, 255, 255, 0.4); }
.mo-card[aria-current="page"] .mo-no { color: var(--yellow); }
.mo-card[aria-current="page"] .mo-arrow { color: var(--yellow); }

/* deal-in: cards rise and settle into their tilt, one after another */
.mo-card, .mo-secondary, .mo-foot {
  opacity: 0; transform: translateY(26px) rotate(0deg);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  transition-delay: 0s;
}
body.menu-open .mo-card, body.menu-open .mo-secondary, body.menu-open .mo-foot {
  opacity: 1; transform: translateY(0) rotate(var(--r, 0deg));
  transition-delay: calc(0.1s + var(--i, 0) * 0.05s);
}
@media (prefers-reduced-motion: reduce) {
  .mo-card, .mo-secondary, .mo-foot { transition: opacity 0.3s; transform: none !important; }
}

.mo-secondary {
  margin-top: 20px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center;
}
.mo-secondary a {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(246, 237, 221, 0.7); text-decoration: none;
}
.mo-secondary a:hover { color: var(--yellow); }

.mo-foot {
  margin-top: 18px; padding-top: 16px;
  border-top: 2px dashed rgba(246, 237, 221, 0.2);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.mo-foot .open-chip { background: rgba(0, 0, 0, 0.3); }
.mo-foot address { font-size: 0.88rem; color: rgba(246, 237, 221, 0.7); }
.mo-foot a { color: inherit; }
.mo-foot a:hover { color: var(--yellow); }

/* short phones — tighten the hand so the whole deal fits */
@media (max-height: 720px) {
  .menu-overlay { padding-top: calc(var(--header-h) + 44px); }
  .mo-picado { height: 44px; }
  .mo-nav { gap: 8px; }
  .mo-card { padding: 9px 14px; }
  .mo-card b { font-size: 1.08rem; }
  .mo-secondary { margin-top: 14px; }
  .mo-foot { margin-top: 12px; padding-top: 12px; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  color: #fff;
}
.hero-media, .hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(58% 46% at 50% 44%, rgba(20, 8, 12, 0.34), transparent 100%),
    linear-gradient(to bottom, rgba(20, 8, 12, 0.42), rgba(20, 8, 12, 0.18) 30%, rgba(20, 8, 12, 0.14) 55%, rgba(28, 10, 16, 0.62));
}
.hero-content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 120px 24px 130px;
  max-width: 860px;
}
.hero-eyebrow {
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  margin: 0 0 22px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.hero-title { margin: 0 0 20px; }
.hero-title .wm { filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.45)); }
.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.6;
  max-width: 46ch; margin: 0 auto 30px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-meta {
  margin-top: 34px;
  display: flex; gap: 10px 26px; justify-content: center; align-items: center; flex-wrap: wrap;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.hero-meta a { text-decoration: none; }
.hero-meta a:hover, .meta-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.open-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px; padding: 6px 14px;
  backdrop-filter: blur(4px);
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.open-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #58d68d; }
.open-chip.closed .dot { background: var(--marigold); }

/* hero entrance */
[data-stagger] {
  opacity: 0; transform: translateY(18px);
  animation: rise 0.9s var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0) * 1s);
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Papel picado ---------- */

.picado {
  position: absolute; left: 0; right: 0; bottom: -2px; z-index: 3;
  height: clamp(54px, 7vw, 82px);
  background-image: url("../assets/picado.svg");
  background-repeat: repeat-x;
  background-size: auto 100%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.28));
  pointer-events: none;
}
.picado-static { position: static; height: clamp(48px, 6vw, 72px); filter: drop-shadow(0 3px 4px rgba(42, 30, 26, 0.18)); }

/* ---------- Marquee ---------- */

.marquee {
  background: var(--ink); color: var(--paper);
  overflow: hidden; padding: 12px 0;
  border-top: 3px solid var(--ink);
}
.marquee-track {
  display: flex; gap: 48px; width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-track span {
  font-size: 0.84rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  white-space: nowrap;
}
.marquee-track i { font-style: normal; color: var(--marigold); margin: 0 10px; }
@keyframes marquee { to { transform: translateX(calc(-50% - 24px)); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Sections ---------- */

.section { position: relative; padding: clamp(70px, 9vw, 120px) 0; }
.section-tint { background: var(--paper-deep); }
.section-night { background: var(--night); color: var(--night-ink); }
.section-night { background-image: radial-gradient(1200px 500px at 85% -10%, rgba(123, 79, 166, 0.35), transparent 65%); }

.has-ghost { overflow: hidden; }
.ghost-word {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(5rem, 13vw, 11rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(42, 30, 26, 0.1);
  pointer-events: none; user-select: none;
  white-space: nowrap;
  transform: rotate(-3deg);
}
.ghost-light { -webkit-text-stroke-color: rgba(246, 237, 221, 0.1); }

.section-head { max-width: 720px; margin: 0 auto 44px; }
.section-head.centered { text-align: center; }
.section-head.centered .eyebrow { justify-content: center; }
.section-head .lead { margin-inline: auto; }

.section-close {
  display: flex; align-items: center; gap: 18px;
  margin-top: clamp(46px, 6vw, 70px);
  color: var(--red);
}
.section-close i { flex: 1; border-top: 2px dashed rgba(42, 30, 26, 0.25); }
.section-close span { font-size: 1.1rem; }

/* reveal-on-scroll */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1s);
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-stagger] { animation: none; opacity: 1; transform: none; }
}

/* ---------- Nº 1 · La Cantina ---------- */

.intro-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(34px, 5vw, 70px);
  align-items: center;
}
.intro-copy .chip-row { margin-top: 24px; }

.chip-row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.chip-row li {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 7px 14px;
  background: var(--card);
  box-shadow: 2px 3px 0 rgba(42, 30, 26, 0.55);
}

.intro-ctas { margin-top: 30px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* matted prints — the collage */
.print {
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  padding: 10px 10px 8px;
  box-shadow: var(--shadow-card);
}
.print img, .print video { border-radius: 5px; width: 100%; height: 100%; object-fit: cover; }
.print figcaption {
  padding: 8px 4px 2px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

.intro-collage {
  position: relative; margin: 0;
  /* room for the tucked print and the stamp — proportional, so the
     composition holds at every viewport width */
  padding: 30px 12px 96px 0;
}
.print-main { transform: rotate(-1.2deg); }
.print-main figcaption { justify-content: flex-end; text-align: right; }
.print-main img { aspect-ratio: 4 / 2.9; }
/* desktop: the two hanging prints overlap the main mat — their captions carry the words */
@media (min-width: 761px) { .print-main figcaption { display: none; } }
.print-tuck {
  position: absolute; width: 42%; left: -5%; bottom: 20px;
  transform: rotate(2.4deg); z-index: 2;
}
.print-tuck img, .print-tuck video { aspect-ratio: 4 / 3; height: auto; }
.print-hang {
  position: absolute; width: 31%; right: 3%; bottom: 20px;
  transform: rotate(-2.6deg); z-index: 2;
}
.print-hang img { aspect-ratio: 4 / 3; height: auto; }
.print-hang:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 7px 9px 0 rgba(42, 30, 26, 0.85); }

/* collage life — prints straighten and lift, like the dealt cards */
.intro-collage .print { transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
.print-main:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 7px 9px 0 rgba(42, 30, 26, 0.85); }
.print-tuck:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 7px 9px 0 rgba(42, 30, 26, 0.85); }

/* the mascot — kiss-cut sticker. Desktop: fills the paper gap between the two
   hanging prints. Mobile (≤760): drops to the section's closing line instead. */
/* desktop: no closing rule — the collage and the tint seam below already end the
   section; the line only exists on mobile, where it anchors the mascot */
.close-mascot-row { display: none; position: relative; }
.close-mascot { display: none; }
.collage-art {
  position: absolute; left: 35%; bottom: 4px; z-index: 3;
  width: 33%; height: auto;
  transform: rotate(5deg);
  filter: drop-shadow(3px 4px 0 rgba(42, 30, 26, 0.3));
  transition: transform 0.45s var(--ease-out);
}
.collage-art:hover { transform: rotate(1deg) scale(1.04); }

/* settle-in after the collage reveals */
.intro-collage.in .print-tuck { animation: deal-photo 0.7s var(--ease-out) backwards 0.3s; }
.intro-collage.in .print-hang { animation: deal-photo 0.7s var(--ease-out) backwards 0.42s; }
.intro-collage.in .collage-art { animation: deal-photo 0.7s var(--ease-out) backwards 0.56s; }
@media (prefers-reduced-motion: reduce) {
  .intro-collage.in .print-tuck, .intro-collage.in .print-hang, .intro-collage.in .collage-art { animation: none; }
}

.collage-stamp {
  position: absolute; right: -10px; top: -4px; z-index: 3;
  width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: var(--marigold);
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-card-sm);
  font-family: var(--font-display);
  font-size: 0.94rem; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase;
  transform: rotate(9deg);
}
.collage-stamp i {
  display: block; font-style: normal;
  font-family: var(--font-body); font-weight: 700; font-size: 0.55rem; letter-spacing: 0.24em;
  margin-top: 4px;
}

/* ---------- Nº 2 · El Taco ---------- */

.dish-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.dish-card, .dish-tile {
  position: relative;
  text-decoration: none; color: inherit;
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  padding: 10px;
  box-shadow: var(--shadow-card-sm);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  display: flex; flex-direction: column;
}
/* the deck's inner rule — every dish is a dealt card */
.dish-card::after, .dish-tile::after {
  content: ""; position: absolute; inset: 5px;
  border: 1.5px solid rgba(217, 58, 43, 0.4); border-radius: 8px;
  pointer-events: none;
}
.dish-card:hover, .dish-tile:hover { transform: translate(-2px, -4px); box-shadow: 7px 9px 0 rgba(42, 30, 26, 0.85); }

.dish-card.feature { grid-column: span 6; grid-row: span 2; }
.dish-card:not(.feature) { grid-column: span 3; }
.dish-tile { grid-column: span 3; }

.dish-media { display: block; overflow: hidden; border-radius: 6px; flex: 1; min-height: 0; }
.dish-media img, .dish-media video {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.4;
  transition: transform 0.7s var(--ease-out);
}
.dish-card.feature .dish-media img, .dish-card.feature .dish-media video { aspect-ratio: auto; height: 100%; }
.dish-card:hover .dish-media img, .dish-card:hover .dish-media video { transform: scale(1.04); }

.dish-caption { padding: 12px 10px 8px; text-align: center; }
.dish-caption b {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: 1.06rem; letter-spacing: 0.03em; text-transform: uppercase;
}
.dish-caption > span { display: block; font-size: 0.84rem; color: var(--ink-soft); margin-top: 3px; }
.dish-caption .go, .dish-tile .go {
  margin-top: 8px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red);
}

/* The wildcard — the one face-up card in a row of photographs. Follows the deck's own
   card grammar (cf. .gc-tilt): cream face, red inner rule, mark top-left, figure over a
   sunburst, label below. Figure-on-top/caption-below matches its .dish-card siblings, so
   the copy always sits on cream and never over the art. */
/* The tile itself is now just the perspective shell — the card surface (fill, border,
   inner rule, shadow) moved onto the two faces so the whole card turns, not its contents. */
.dish-tile {
  background: none; border: 0; box-shadow: none; padding: 0;
  perspective: 1100px;
}
.dish-tile:hover { box-shadow: none; }
.dish-tile::after { content: none; }

.dt-flip {
  position: relative; flex: 1 1 auto; display: flex;
  transform-style: preserve-3d;
  transition: transform 0.68s cubic-bezier(0.4, 0.05, 0.2, 1);
}
.dt-face {
  flex: 1 1 auto;
  display: flex; flex-direction: column; text-align: center;
  border: 2.5px solid var(--ink); border-radius: 12px;
  box-shadow: var(--shadow-card-sm);
  padding: 10px; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
/* the deck's inner rule, per face now that the tile no longer draws one */
.dt-face::after {
  content: ""; position: absolute; inset: 5px;
  border: 1.5px solid rgba(168, 42, 31, 0.5); border-radius: 8px;
  pointer-events: none;
}
/* front stays in flow so it sets the card's height — the back can then be absolute
   without the tile collapsing when it's alone in a grid row (mobile) */
.dt-front {
  position: relative;
  background: var(--teal-card); color: var(--ink);
}
.dt-back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  background: var(--teal-deep); color: var(--card);
  align-items: center; justify-content: center; gap: 14px;
}
.dt-back::after { border-color: rgba(255, 249, 236, 0.3); }
.dt-back-line {
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.45vw, 1.4rem);
  line-height: 1.3; letter-spacing: 0.03em; text-transform: uppercase;
}
.dt-back-arrow { font-size: 1.6rem; line-height: 1; color: var(--yellow); }

/* On the mid teal no red reaches AA for small text, so all copy goes to --ink; the red
   survives as graphics only (the ✶ and the inner rule), where the 3:1 bar applies.
   The link still reads as a link via its uppercase/tracked/bold treatment, not colour. */
.dish-tile .dish-caption > span { color: var(--ink); }
.dish-tile .dish-caption .go { color: var(--ink); }

/* Only pointer devices that can actually hover get the flip — and only there does the
   front hand its CTA over to the back. Touch users keep the CTA on the face they can see. */
@media (hover: hover) and (pointer: fine) {
  .dish-tile .dish-caption .go { display: none; }
  .dish-tile:hover .dt-flip,
  .dish-tile:focus-visible .dt-flip { transform: rotateY(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dt-flip { transition: none; }
}
/* sits where .gc-no puts the card's number; a star rather than a digit because this
   card is the wildcard, not a numbered draw */
.dish-tile-no {
  position: absolute; top: 12px; left: 14px; z-index: 2;
  font-family: var(--font-display); font-size: 1.4rem; line-height: 1;
  color: var(--red-deep);
}
/* the figure — sunburst + ground shadow, same grammar as the gift card's .gc-fig */
.dish-tile-fig {
  position: relative; flex: 1; min-height: 0;
  display: grid; place-items: center;
  margin: 10px 6px 0;
  background: radial-gradient(38% 5% at 50% 90%, rgba(42, 30, 26, 0.18), transparent 72%);
}
.dish-tile-fig::before {
  content: ""; position: absolute; inset: -4%;
  /* cream rather than the gift card's marigold — amber over teal mixes toward olive */
  background: repeating-conic-gradient(from 4deg at 50% 48%,
    rgba(255, 249, 236, 0.5) 0deg 7deg, rgba(255, 249, 236, 0) 7deg 16deg);
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 48%, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 80%);
  mask-image: radial-gradient(circle closest-side at 50% 48%, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 80%);
  pointer-events: none;
}
/* transparent silhouette, so the sunburst reads through the figure rather than behind a plate */
.dish-tile-fig img {
  position: relative;
  width: 100%; height: 100%; max-height: 210px;
  object-fit: contain;
}

.aside-note {
  margin: 26px auto 0; text-align: center;
  font-size: 0.95rem; color: var(--ink-soft);
}
.aside-note b { color: var(--red); }

.menu-cta-row { margin-top: 30px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ---------- Nº 3 · La Margarita ---------- */

.bar-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5.4fr) minmax(0, 2.6fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
}
.print-live {
  margin: 0; transform: rotate(-1.8deg);
  box-shadow: var(--shadow-card), 0 0 70px rgba(245, 166, 35, 0.22);
}
.print-live video { aspect-ratio: 9 / 15; }
.print-live figcaption { color: var(--ink-soft); }

.cine-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.bar-board { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; }
.bar-board li { border-bottom: 2px dashed rgba(246, 237, 221, 0.22); padding-bottom: 14px; }
.bar-board b {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: 1.05rem; letter-spacing: 0.02em; color: var(--night-ink);
}
.bar-board span { font-size: 0.9rem; color: rgba(246, 237, 221, 0.7); }
.bar-ctas { margin-top: 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.bar-side { display: grid; gap: 18px; }
.bar-side img {
  border-radius: 10px; border: 2.5px solid rgba(246, 237, 221, 0.2);
  aspect-ratio: 3 / 3.6; object-fit: cover;
}
.bar-side img:first-child { transform: rotate(1.6deg); }
.bar-side img:last-child { transform: rotate(-1.8deg); }

/* ---------- Nº 4 · La Semana ---------- */

/* The week dealt as four lotería poster-cards. Everything a guest needs is
   printed on the face — the day as a ticket header, the art on its sunburst,
   the promo name in display caps, the one-line deal under a short red rule.
   Hover = the card is picked up off the table: JS-damped 3D tilt toward the
   cursor (.wk-tilt), the die-cut art lifts in real depth, the sunburst spins,
   and a paper sheen follows the pointer. All info stays printed on the face. */
.week-hand {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  align-items: stretch;
  margin-top: 8px;
  max-width: 940px; margin-inline: auto;
}
/* shell: resting tilt + arc + deal-in + lift live here; perspective for the 3D child */
.week-card {
  position: relative;
  perspective: 950px;
  /* --tilt/--arc are inline; --tilt-m/--arc-f let media queries win over them */
  transform: rotate(var(--tilt-m, var(--tilt, 0deg))) translateY(calc(var(--arc, 0px) * var(--arc-f, 1)));
  transition: transform 0.35s var(--ease-out);
}
.week-card:hover {
  transform: rotate(0deg) translateY(calc(var(--arc, 0px) * var(--arc-f, 1) - 10px));
  z-index: 2;
}
/* deal-in: the hand settles once the section reveals */
.week-hand.in .week-card {
  animation: deal-photo 0.8s var(--ease-out) backwards;
  animation-delay: calc(0.2s + var(--i, 0) * 0.12s);
}
/* the card itself — JS drives rotateX/rotateY on this layer */
.wk-tilt {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "day" "fig" "nm" "deal";
  padding: 13px 12px 15px;
  background: #FAEFD9;
  border: 2.5px solid var(--ink); border-radius: 12px;
  box-shadow: var(--shadow-card);
  transform-style: preserve-3d;
  transition: box-shadow 0.35s var(--ease-out);
}
.week-card:hover .wk-tilt { box-shadow: 10px 13px 0 rgba(42, 30, 26, 0.85); }
.wk-tilt::before {
  content: ""; position: absolute; inset: 6px; z-index: 2;
  border: 1.5px solid rgba(217, 58, 43, 0.5); border-radius: 7px;
  pointer-events: none;
}

/* the ticket header — the day is what people plan by, so it reads first */
.wk-day {
  grid-area: day;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 2px 2px 0;
  font-weight: 800; font-size: 0.67rem; line-height: 1;
  letter-spacing: 0.17em; text-transform: uppercase; white-space: nowrap;
  color: var(--red);
  transition: transform 0.4s var(--ease-out);
}
.wk-day::before, .wk-day::after { content: ""; height: 1.5px; flex: 1; background: rgba(217, 58, 43, 0.4); }

/* the figure — poster sunburst + ground shadow so it sits, not floats */
.wk-fig {
  grid-area: fig; position: relative;
  align-self: center; justify-self: center;
  width: 74%; aspect-ratio: 1;
  margin: 8px 0 4px;
  background: radial-gradient(50% 7% at 50% 88%, rgba(42, 30, 26, 0.15), transparent 72%);
}
.wk-fig::before {
  content: ""; position: absolute; inset: -19%;
  background: repeating-conic-gradient(from 4deg at 50% 50%,
    rgba(245, 166, 35, 0.19) 0deg 7deg, rgba(245, 166, 35, 0) 7deg 16deg);
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 80%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 80%);
  pointer-events: none;
}
/* the rays wake up and turn while the card is held */
@keyframes wk-spin { to { transform: rotate(360deg); } }
.week-card:hover .wk-fig::before { animation: wk-spin 26s linear infinite; }
.wk-art {
  position: relative; display: block; width: 100%; height: auto;
  transition: transform 0.45s var(--ease-out);
}
/* depth: the die-cut figure lifts off the paper; type floats just above it.
   Desktop 4-up only — on the horizontal tickets the 3D read is wrong. */
@media (min-width: 981px) {
  .week-card:hover .wk-art { transform: translateZ(46px); }
  .week-card:hover .wk-day { transform: translateZ(16px); }
  .week-card:hover .wk-nm { transform: translateZ(26px); }
  .week-card:hover .wk-deal { transform: translateZ(16px); }
}

.wk-nm {
  grid-area: nm;
  margin: 0 2px;
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 1.25vw, 1.08rem);
  line-height: 1.12; letter-spacing: 0.02em;
  text-transform: uppercase; text-align: center;
  color: var(--ink);
  transition: transform 0.4s var(--ease-out);
}
/* the deal line — on the card, in plain sight */
.wk-deal {
  grid-area: deal; position: relative;
  margin: 8px 4px 0; padding-top: 8px;
  text-align: center;
  font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft);
  transition: transform 0.4s var(--ease-out);
}
.wk-deal::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 34px; height: 2px; transform: translateX(-50%);
  background: rgba(217, 58, 43, 0.4);
  transition: width 0.35s var(--ease-out);
}
.week-card:hover .wk-deal::before { width: 50px; }

/* the wild card — Cantina Hour floats, so it gets the butter ground */
.wk-wild .wk-tilt { background: #FBE5A9; }
.wk-wild .wk-tilt::before { border-color: rgba(168, 42, 31, 0.55); }
.wk-wild .wk-fig::before {
  background: repeating-conic-gradient(from 4deg at 50% 50%,
    rgba(217, 58, 43, 0.13) 0deg 7deg, rgba(217, 58, 43, 0) 7deg 16deg);
}

@media (prefers-reduced-motion: reduce) {
  .week-hand.in .week-card { animation: none; }
  .week-card:hover .wk-fig::before { animation: none; }
  .week-card:hover .wk-art, .week-card:hover .wk-day,
  .week-card:hover .wk-nm, .week-card:hover .wk-deal { transform: none; }
}

.week-foot { margin-top: 30px; text-align: center; }
.week-foot p { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 14px; }

/* ---------- Nº 5 · El Patio — a postcard, mailed live ---------- */

.patio-band { position: relative; overflow: hidden; color: var(--night-ink); }
.patio-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 42%;
}
/* dusk scrim — the night palette, not neutral black, so the golden hour
   and the window neon stay warm on the right */
.patio-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(26, 12, 44, 0.82), rgba(30, 15, 50, 0.48) 52%,
    rgba(34, 18, 55, 0.1) 82%, rgba(34, 18, 55, 0));
}
/* depth: JS drives translate on [data-plx]; the video gets overscan ONLY
   when the parallax is live (html.plx) so the verified crop is untouched
   for reduced-motion / no-JS */
.plx .patio-video { top: -48px; bottom: -48px; height: calc(100% + 96px); }
.patio-inner { position: relative; z-index: 2; padding: clamp(74px, 9vw, 122px) 0; }
.patio-copy { max-width: 560px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); }
/* the band is the page's one cinematic breath — type steps up a size */
.patio-band .headline { font-size: clamp(2.3rem, 4.8vw, 3.8rem); }
.patio-copy .lead { color: rgba(246, 237, 221, 0.9); max-width: 44ch; }
.patio-details {
  margin: 28px 0 0;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  line-height: 2.3;
  color: rgba(246, 237, 221, 0.88);
}
.patio-details span { white-space: nowrap; }
.patio-details i { font-style: normal; color: var(--yellow); margin: 0 9px 0 3px; font-size: 0.68rem; }

/* ---------- the patio pups ----------
   A dealt hand, not a pile of shapes: this reuses .party-hand / .party-photo-card
   wholesale (fan angles, inner rule, name plate, Nº badge, hover straighten), so the
   patio regulars are dealt exactly the way La Fiesta's nights are. One repeated shape
   is what gives the group a rhythm — three different silhouettes just read as noise. */
.patio-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.98fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
.patio-copy { grid-column: 1; }
.patio-pups { position: relative; grid-column: 2; }
/* These names are longer than La Fiesta's ("El Perro" vs "¡Salud!"), so the hand is
   dealt looser — at the inherited overlap the middle card sits on its neighbours' plates. */
.patio-pups .pc-left  { --tx: 2%; --ty: 4%; }
.patio-pups .pc-mid   { margin-inline: 0; }
.patio-pups .pc-right { --tx: -2%; --ty: 5%; }
/* seats the hand on the footage — the band's own scrim is clear on this side, so
   without a pool of shadow the cards float on whatever the video happens to show */
.patio-pups::before {
  content: ""; position: absolute; z-index: 0;
  inset: -14% -8%;
  background: radial-gradient(52% 50% at 50% 52%, rgba(20, 9, 36, 0.5), rgba(20, 9, 36, 0) 72%);
  pointer-events: none;
}
.patio-pups .party-photo-card { z-index: 1; }
/* no name plate under these, so the frame sits evenly instead of 8px/8px/2px */
.patio-pups .party-photo-card { padding: 8px; }
/* No hover lift on the regulars. The trail draws once and the hand is left as a
   finished snapshot — riffling it on mouseover undoes that. La Fiesta's hand uses
   the same component and keeps its hover. */
.patio-pups .party-photo-card:hover {
  transform: rotate(var(--r, 0deg)) translate(var(--tx, 0%), var(--ty, 0%));
  box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.42);
  z-index: 1;
}

/* ---- the trail ----
   A paw is a good solid mark; it was only a bad photo mask. Cream on the band's
   bright, unscrimmed side needs the shadow to hold its edge. */
.paw-def { position: absolute; width: 0; height: 0; }
.paw-trail {
  position: absolute; inset: 0 -6% -18% -8%;
  z-index: 0; pointer-events: none;
}
.paw {
  position: absolute;
  left: var(--x); top: var(--y);
  width: clamp(17px, 1.5vw, 23px); aspect-ratio: 1;
  fill: var(--card);
  opacity: 0.88;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  filter: drop-shadow(1px 2px 2px rgba(20, 9, 36, 0.65));
}

/* Default is the finished state — everything visible. The sequencer opts in by
   adding .seq, so no-JS visitors get all three dogs rather than an empty band. */
.patio-pups.seq .paw,
.patio-pups.seq .party-photo-card { opacity: 0; }
.patio-pups.seq .paw {
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.55);
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}
.patio-pups.seq .party-photo-card {
  transform: rotate(var(--r, 0deg)) translate(var(--tx, 0%), calc(var(--ty, 0%) + 26px));
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.patio-pups.seq .paw.step {
  opacity: 0.88;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
}
.patio-pups.seq .party-photo-card.dealt {
  opacity: 1;
  transform: rotate(var(--r, 0deg)) translate(var(--tx, 0%), var(--ty, 0%));
}

/* ---------- Nº 6 · La Fiesta ---------- */

.party-card {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-card);
  background: var(--night);
  background-image:
    radial-gradient(1000px 520px at 82% 118%, rgba(123, 79, 166, 0.55), transparent 65%),
    radial-gradient(720px 420px at -6% -24%, rgba(232, 79, 138, 0.28), transparent 60%);
  color: var(--night-ink);
}
/* the deck's inner rule — this card is dealt too */
.party-card::before {
  content: ""; position: absolute; inset: 8px; z-index: 4;
  border: 1.5px solid rgba(246, 237, 221, 0.18); border-radius: 10px;
  pointer-events: none;
}
/* papel picado strung inside the top edge */
.party-picado {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; /* above the inner rule (::before z4) so the border line passes behind the papel picado */
  height: clamp(38px, 4.4vw, 52px);
  /* clip our own top corners — Safari doesn't clip filtered layers to the card's border-radius */
  border-radius: 13px 13px 0 0;
  background-image: url("../assets/picado.svg");
  background-repeat: round; /* whole flags only — no mid-flag cut at the card's rounded corners */
  background-size: auto 100%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}
.party-ghost { left: -2%; bottom: 1.5%; font-size: clamp(4.2rem, 8vw, 7.6rem); }
.party-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4.6fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
  padding: clamp(64px, 7vw, 96px) clamp(28px, 5vw, 72px) clamp(46px, 5.5vw, 76px);
}
.party-content { max-width: 560px; }

/* the hand — real nights here, dealt as photo cards */
.party-hand { display: flex; align-items: center; justify-content: center; }
.party-photo-card {
  position: relative; margin: 0; width: 36%;
  background: var(--card);
  border: 2.5px solid var(--ink); border-radius: 12px;
  padding: 8px 8px 2px;
  box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.42);
  transform: rotate(var(--r, 0deg)) translate(var(--tx, 0%), var(--ty, 0%));
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.party-photo-card::after {
  content: ""; position: absolute; inset: 4px;
  border: 1.5px solid rgba(217, 58, 43, 0.4); border-radius: 8px;
  pointer-events: none;
}
.party-photo-card img, .party-photo-card video {
  width: 100%; height: auto; border-radius: 6px; object-fit: cover; aspect-ratio: 3 / 4;
}
.pc-mid img, .pc-mid video { aspect-ratio: 2 / 3; }
.party-photo-card figcaption {
  padding: 8px 4px 6px; text-align: center;
  font-family: var(--font-display);
  font-size: clamp(0.64rem, 0.86vw, 0.84rem);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pc-no {
  position: absolute; top: 12px; left: -9px; z-index: 2;
  font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.05em;
  color: var(--red);
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 6px;
  padding: 2px 7px 1px;
  transform: rotate(-6deg);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
}
.pc-left  { --r: -7deg;  --tx: 8%;  --ty: 5%; z-index: 1; }
.pc-mid   { --r: 1.6deg; width: 40%; margin-inline: -2.5%; z-index: 3; }
.pc-right { --r: 7deg;   --tx: -8%; --ty: 7%; z-index: 2; }
.party-photo-card:hover {
  transform: rotate(0deg) translate(var(--tx, 0%), calc(var(--ty, 0%) - 3%));
  z-index: 5;
  box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.46);
}
/* deal-in: the hand rises and settles once the card reveals */
.party-card.in .party-photo-card {
  animation: deal-photo 0.8s var(--ease-out) backwards;
  animation-delay: calc(0.25s + var(--i, 0) * 0.13s);
}
@keyframes deal-photo {
  from { opacity: 0; transform: translateY(46px) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .party-card.in .party-photo-card { animation: none; }
}
@media (max-width: 1060px) {
  .party-grid { grid-template-columns: 1fr; gap: 44px; padding-top: clamp(72px, 11vw, 90px); }
  .party-content { max-width: 620px; }
  .party-hand { width: 100%; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .party-photo-card { width: 40%; padding: 6px 6px 1px; }
  .pc-mid { width: 45%; margin-inline: -3.5%; }
  .party-photo-card figcaption { font-size: 0.6rem; letter-spacing: 0.04em; gap: 5px; }
  .pc-no { font-size: 0.54rem; padding: 2px 6px 1px; top: 8px; left: -7px; }
}
.party-lead { font-size: 1.05rem; line-height: 1.7; margin: 16px 0 0; color: rgba(246, 237, 221, 0.85); }
.party-ctas { margin-top: 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.party-phone {
  font-weight: 700; font-size: 0.88rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--night-ink); text-decoration: none;
  border-bottom: 2px solid var(--yellow); padding-bottom: 2px;
}
.party-phone:hover { color: var(--yellow); }
.party-note { margin-top: 20px; font-size: 0.86rem; color: rgba(246, 237, 221, 0.75); }
.party-note a { color: var(--yellow); }

/* ---------- Nº 7 · El Regalo — the deck's best draw ----------
   Two backs still on the table, the gift dealt face-up on top. The whole
   fan deals in on reveal and drifts on scroll; on desktop, hover picks the
   card up off the paper (same weighted tilt as La Semana — no sheen, all
   info stays on the face). */

.gift-band { background: var(--paper); }
.gift-ghost { right: 2%; bottom: 3%; font-size: clamp(4.6rem, 9vw, 8.4rem); }
.gift-inner {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
.gift-details {
  margin: 22px 0 0;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  line-height: 2.3;
  color: var(--ink-soft);
}
.gift-details span { white-space: nowrap; }
.gift-details i { font-style: normal; color: var(--red); margin: 0 9px 0 3px; font-size: 0.68rem; }
.gift-links { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; }

/* the fan — backs positioned with insets only (they run deal-photo, and
   translate offsets in the base transform would jump mid-keyframe) */
.gift-fan { position: relative; width: min(345px, 96%); margin-inline: auto; }
.gc-back {
  position: absolute; top: 3%;
  width: 72%; aspect-ratio: 480 / 676;
  background: var(--teal) url("../assets/cards/back.webp") center / cover no-repeat;
  border: 2.5px solid var(--ink); border-radius: 12px;
  box-shadow: var(--shadow-card-sm);
}
.gc-b1 { left: 23%; top: 1%; transform: rotate(11deg); }
.gc-b2 { left: 8%; top: 10%; transform: rotate(-9deg); }

/* shell: resting tilt + hover straighten + deal-in; perspective for the 3D child */
.gift-card-art {
  position: relative;
  width: 78%; margin: 0 auto;
  perspective: 900px;
  transform: rotate(-3deg);
  transition: transform 0.35s var(--ease-out);
}
.gift-card-art:hover { transform: rotate(0deg) translateY(-8px); z-index: 2; }

/* the card itself — JS drives rotateX/rotateY on this layer */
.gc-tilt {
  position: relative;
  aspect-ratio: 5 / 7;
  display: flex; flex-direction: column;
  padding: 14px 12px 16px;
  background: var(--card);
  border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: var(--shadow-card);
  transform-style: preserve-3d;
  transition: box-shadow 0.35s var(--ease-out);
}
.gift-card-art:hover .gc-tilt { box-shadow: 9px 12px 0 rgba(42, 30, 26, 0.85); }
.gc-tilt::before {
  content: ""; position: absolute; inset: 9px;
  border: 2px solid rgba(217, 58, 43, 0.55); border-radius: 8px;
  pointer-events: none;
}
.gc-no {
  position: absolute; top: 14px; left: 18px;
  font-family: var(--font-display); font-size: 1.05rem; line-height: 1; color: var(--red);
  transition: transform 0.4s var(--ease-out);
}
/* the figure — sunburst + ground shadow, same grammar as La Semana */
.gc-fig {
  position: relative; flex: 1;
  display: grid; place-items: center;
  margin: 10px 8px 2px;
  background: radial-gradient(40% 5% at 50% 77%, rgba(42, 30, 26, 0.17), transparent 72%);
}
.gc-fig::before {
  content: ""; position: absolute; inset: -8%;
  background: repeating-conic-gradient(from 4deg at 50% 46%,
    rgba(245, 166, 35, 0.20) 0deg 7deg, rgba(245, 166, 35, 0) 7deg 16deg);
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 46%, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 80%);
  mask-image: radial-gradient(circle closest-side at 50% 46%, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 80%);
  pointer-events: none;
}
.gift-card-art:hover .gc-fig::before { animation: wk-spin 26s linear infinite; }
.gc-fig svg { position: relative; width: 88%; height: auto; transition: transform 0.45s var(--ease-out); }
.gc-name {
  display: flex; align-items: center; gap: 11px;
  margin: 6px 20px 2px;
  font-family: var(--font-display); font-size: 1.28rem; line-height: 1; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
  transition: transform 0.4s var(--ease-out);
}
.gc-name::before, .gc-name::after { content: ""; height: 2px; flex: 1; background: rgba(217, 58, 43, 0.4); }

/* depth: the gift lifts off the paper; type floats just above it (fine pointers only) */
@media (hover: hover) and (pointer: fine) {
  .gift-card-art:hover .gc-fig svg { transform: translateZ(42px); }
  .gift-card-art:hover .gc-name { transform: translateZ(20px); }
  .gift-card-art:hover .gc-no { transform: translateZ(14px); }
}

/* deal-in: backs first, then the draw */
.gift-inner.in .gc-b2 { animation: deal-photo 0.7s var(--ease-out) backwards 0.15s; }
.gift-inner.in .gc-b1 { animation: deal-photo 0.7s var(--ease-out) backwards 0.28s; }
.gift-inner.in .gift-card-art { animation: deal-photo 0.85s var(--ease-out) backwards 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .gift-inner.in .gc-b1, .gift-inner.in .gc-b2, .gift-inner.in .gift-card-art { animation: none; }
  .gift-card-art:hover .gc-fig::before { animation: none; }
  .gift-card-art:hover .gc-fig svg, .gift-card-art:hover .gc-name,
  .gift-card-art:hover .gc-no { transform: none; }
}

/* ---------- Signup band — deliberately quiet ---------- */

.signup-band { background: var(--paper-deep); border-top: 2px solid rgba(42, 30, 26, 0.12); }
.signup-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 34px 0;
}
.signup-inner h3 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 4px; }
.signup-inner p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.signup-inner .btn { padding: 11px 20px; font-size: 0.8rem; }

/* ---------- Footer ---------- */

.site-footer { background: var(--night); color: var(--night-ink); }
.footer-scene { position: relative; height: clamp(230px, 30vw, 360px); overflow: hidden; }
.footer-scene img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.footer-scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(34, 18, 55, 0.25), rgba(34, 18, 55, 0.05) 45%, var(--night));
}
.footer-wordmark {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 2; white-space: nowrap;
}
.footer-wordmark .wm { filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5)); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(24px, 3.5vw, 48px);
  padding: clamp(40px, 5vw, 64px) 0 30px;
}
.footer-brand p { margin: 0 0 18px; font-size: 0.95rem; line-height: 1.65; color: rgba(246, 237, 221, 0.8); }
.social-row { display: flex; gap: 12px; }
.social-row a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1.5px solid rgba(246, 237, 221, 0.4); border-radius: 50%;
  transition: background 0.2s, border-color 0.2s;
}
.social-row svg { width: 18px; height: 18px; fill: var(--night-ink); }
.social-row a:hover { background: var(--red); border-color: var(--red); }

.footer-col h2 {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--marigold); margin-bottom: 14px;
}
.footer-col address, .footer-col ul { font-size: 0.92rem; line-height: 1.85; color: rgba(246, 237, 221, 0.85); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a { color: inherit; text-decoration: none; }
.footer-col a:hover { color: var(--yellow); }
.footer-addr { text-decoration: underline; text-underline-offset: 3px; }

.map-embed iframe {
  width: 100%; height: 100%; min-height: 210px; border: 0; border-radius: 10px;
  filter: saturate(0.85);
}

/* The Complex AP — the three rooms, dealt as a hand of cards */
.complex-row {
  border-top: 1px solid rgba(246, 237, 221, 0.16);
  padding: 36px 0 42px;
  text-align: center;
}
.complex-label {
  display: block; margin-bottom: 26px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(246, 237, 221, 0.55);
}
.complex-logos { display: flex; align-items: stretch; justify-content: center; gap: 20px; flex-wrap: wrap; }
.complex-logos a {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 13.5rem; max-width: 100%; min-height: 6.4rem; padding: 16px 20px;
  background: var(--card);
  border: 2.5px solid var(--ink); border-radius: 12px;
  box-shadow: var(--shadow-card-sm);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
/* the deck's inner rule — same as every dealt card on the site */
.complex-logos a::after {
  content: ""; position: absolute; inset: 5px;
  border: 1.5px solid rgba(217, 58, 43, 0.35); border-radius: 8px;
  pointer-events: none;
}
.complex-logos a:nth-child(1) { transform: rotate(-1.6deg); }
.complex-logos a:nth-child(2) { transform: rotate(1.1deg); }
.complex-logos a:nth-child(3) { transform: rotate(-0.7deg); }
.complex-logos a:hover { transform: translate(-2px, -4px) rotate(0deg); box-shadow: 7px 9px 0 rgba(0, 0, 0, 0.5); }
.complex-logos a.current::before {
  content: "Estás aquí";
  position: absolute; top: -11px; right: 12px; z-index: 1;
  background: var(--yellow); color: var(--ink);
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 10px 3px; border-radius: 999px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(42, 30, 26, 0.85);
  transform: rotate(2.5deg);
}
.complex-logos img { max-height: 44px; width: auto; object-fit: contain; }
.complex-logos img[alt="Capitoline"] { max-height: 66px; }
.complex-logos img[alt="Lotería"] { max-height: 40px; }
/* Bond St.'s art is near-white — set it on a night panel inside the card */
.complex-logos .dark-chip img {
  background: var(--night);
  padding: 12px 16px; border-radius: 6px;
  max-height: 64px; /* 40px art + padding (border-box) */
}

.footer-bottom {
  border-top: 1px solid rgba(246, 237, 221, 0.16);
  padding: 20px 0 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.8rem; color: rgba(246, 237, 221, 0.6);
}
.footer-bottom a { color: inherit; }
.ff-credit:hover { color: var(--yellow); }

.deck-btn {
  position: relative;
  width: 54px; height: 62px;
  background: transparent; border: 0; cursor: pointer; padding: 0;
  opacity: 0.92;
  transition: opacity 0.2s;
}
.deck-btn:hover, .deck-btn:focus-visible { opacity: 1; }
/* candle-glow halo behind the pair */
.deck-btn::after {
  content: ""; position: absolute; inset: -10px;
  background: radial-gradient(closest-side, rgba(255, 210, 63, 0.3), transparent 72%);
  opacity: 0; transition: opacity 0.35s;
  pointer-events: none;
}
.deck-btn:hover::after, .deck-btn:focus-visible::after { opacity: 1; }

/* two mermaid card backs, fanned */
.dk-card {
  position: absolute; left: 50%; top: 50%;
  width: 34px; height: 47px;
  margin: -23.5px 0 0 -17px;
  border-radius: 3.5px;
  border: 1.5px solid var(--ink);
  background: var(--teal-deep) url("../assets/cards/back.webp") center / cover no-repeat;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s var(--ease-out);
}
.dk-under { transform: rotate(-9deg) translate(-2px, 1px); }
.dk-top { transform: rotate(5deg); animation: dk-riffle 22s ease-in-out infinite; }

.deck-btn:hover .dk-under, .deck-btn:focus-visible .dk-under {
  transform: rotate(-22deg) translate(-9px, 1px);
}
.deck-btn:hover .dk-top, .deck-btn:focus-visible .dk-top {
  transform: rotate(15deg) translate(6px, -4px) scale(1.06);
  animation: none;
}

/* the deck riffles once in a while — motion invites */
@keyframes dk-riffle {
  0%, 96%, 100% { transform: rotate(5deg); }
  97.5% { transform: rotate(12deg) translate(3px, -2px); }
  99% { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .dk-top { animation: none; } }

/* ---------- ¡Lotería! — the easter egg ----------
   Night falls, a lamp pools on the table, papel picado sways overhead.
   The tabla is dealt from the cantor's pile; beans mark your luck.
   DOM is built by js/loteria.js — only .deck-btn lives in the page. */

.lt {
  position: fixed; inset: 0; z-index: 300;
  background:
    radial-gradient(120% 90% at 50% 30%, #3a2158 0%, #241340 55%, #170c28 100%);
  color: var(--night-ink);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.lt.lt-open { opacity: 1; }
.lt[hidden] { display: none; }

.lt-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(56% 42% at 50% 44%, rgba(245, 166, 35, 0.17), transparent 70%);
}

.lt-picado {
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(44px, 7vh, 72px);
  background: url("../assets/picado.svg") repeat-x top center / auto 100%;
  transform-origin: top center;
  animation: lt-sway 6.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes lt-sway {
  from { transform: rotate(-0.5deg) translateY(-2px); }
  to { transform: rotate(0.5deg) translateY(0); }
}

.lt-close {
  position: absolute; top: clamp(58px, 9vh, 92px); right: clamp(14px, 2vw, 26px); z-index: 6;
  width: 46px; height: 46px;
  background: rgba(23, 12, 40, 0.85);
  border: 2px solid rgba(246, 237, 221, 0.55); border-radius: 50%;
  color: var(--night-ink);
  font-size: 1.7rem; line-height: 1; cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.lt-close:hover { border-color: var(--yellow); color: var(--yellow); transform: rotate(90deg); }

/* ----- scene layout ----- */

.lt-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 2.6vh, 30px);
  padding: clamp(52px, 8vh, 84px) 20px 22px;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.lt-scene-out { opacity: 0; transform: translateY(-14px) scale(0.98); pointer-events: none; }

.lt-head { text-align: center; }
.lt-callout {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2rem);
  margin: 0; letter-spacing: 0.03em;
  color: var(--yellow);
  min-height: 1.25em;
}
.lt-verso {
  margin: 4px 0 0; font-style: italic;
  font-size: clamp(0.82rem, 1.6vw, 0.98rem);
  color: rgba(246, 237, 221, 0.72);
  min-height: 1.4em;
}

.lt-stage {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(30px, 5vw, 76px);
}

/* card sizing: width-capped on phones, height-capped on short screens */
.lt {
  --cell: min(24vw, 12vh, 150px); /* fallback for browsers without dvh */
  --cell: min(24vw, 12dvh, 150px);
  --callw: calc(var(--cell) * 1.18);
}

/* ----- the card (shared: call, tabla, spread) ----- */

.lt-card {
  width: 100%; height: 100%;
  background: #FAEFD9; /* matches the painted sheet's ground exactly */
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  position: relative;
  display: block;
  color: var(--ink);
  overflow: hidden;
}
.lt-card::before {
  content: ""; position: absolute; inset: 5px;
  border: 1.5px solid rgba(217, 58, 43, 0.5); border-radius: 6px;
  pointer-events: none;
}
/* fixed art zone — identical on every card, immune to name wrapping */
.lt-card svg, .lt-card .art {
  position: absolute; top: 13%; left: 50%;
  width: 72%; height: auto;
  transform: translateX(-50%);
  display: block;
}
.lt-card .no {
  position: absolute; top: 6px; left: 10px;
  font-family: var(--font-display); font-size: clamp(0.6rem, 1.2vw, 0.8rem);
  color: var(--red);
}
.lt-card .nm {
  position: absolute; left: 7%; right: 7%; bottom: 8.5%;
  font-family: var(--font-display);
  font-size: clamp(0.52rem, 1.05vw, 0.78rem);
  text-transform: uppercase; letter-spacing: 0.02em; text-align: center;
  line-height: 1.08;
}

/* card back — teal stripes + ring, same motif as the menu's full-deck tile */
.lt-back, .lt-spreadback {
  background: var(--teal-deep)
    repeating-linear-gradient(45deg, rgba(255, 249, 236, 0.16) 0 9px, transparent 9px 18px);
  background-image: url("../assets/cards/back.webp"),
    repeating-linear-gradient(45deg, rgba(255, 249, 236, 0.16) 0 9px, transparent 9px 18px);
  background-size: cover, auto;
  background-position: center;
  border: 2.5px solid var(--ink); border-radius: 10px;
}

/* ----- the cantor ----- */

.lt-cantor {
  display: grid;
  grid-template-areas: "pile call" "fan fan";
  align-items: center; justify-items: center;
  gap: 14px 18px;
}
.lt-pile {
  grid-area: pile; position: relative;
  width: calc(var(--callw) * 0.74); aspect-ratio: 5 / 7;
}
.lt-pile .lt-back { position: absolute; inset: 0; }
.lt-pile .lt-back:nth-child(1) { transform: rotate(-5deg); }
.lt-pile .lt-back:nth-child(2) { transform: rotate(2.5deg); }
.lt-pile .lt-back-top { transform: rotate(-1deg); }

.lt-call {
  grid-area: call; position: relative;
  width: var(--callw); aspect-ratio: 5 / 7;
  perspective: 750px;
}
/* empty slot outline — the call lands here */
.lt-call::before {
  content: ""; position: absolute; inset: 0;
  border: 1.5px dashed rgba(246, 237, 221, 0.3); border-radius: 10px;
}
.lt-call .lt-card { position: absolute; inset: 0; width: 100%; height: 100%; }
.lt-call .lt-card { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); }
.lt-flipin { animation: lt-flip 0.55s var(--ease-out); transform-origin: left center; }
@keyframes lt-flip {
  from { transform: rotateY(-95deg) translateX(-10%); opacity: 0; }
  45% { opacity: 1; }
  to { transform: rotateY(0) translateX(0); }
}
.lt-noflip { animation: lt-fadein 0.35s ease; }
@keyframes lt-fadein { from { opacity: 0; } }

.lt-fan {
  grid-area: fan;
  display: flex; gap: 6px; justify-content: center;
  min-height: calc(var(--callw) * 0.34 * 1.4);
}
.lt-fancard {
  position: relative; display: block;
  width: calc(var(--callw) * 0.34); aspect-ratio: 5 / 7;
  background: #FAEFD9; border: 1.5px solid var(--ink); border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  animation: lt-fadein 0.3s ease;
}
.lt-fancard svg, .lt-fancard .art {
  position: absolute; top: 50%; left: 50%;
  width: 78%; transform: translate(-50%, -50%);
}
.lt-fancard .no, .lt-fancard .nm { display: none; }
.lt-fancard:nth-child(2) { opacity: 0.8; }
.lt-fancard:nth-child(3) { opacity: 0.6; }
.lt-fancard:nth-child(4) { opacity: 0.45; }
.lt-fancard:nth-child(5) { opacity: 0.3; }

/* ----- the tabla ----- */

.lt-tabla {
  display: grid;
  grid-template-columns: repeat(3, var(--cell));
  gap: clamp(8px, 1.4vh, 14px);
}
.lt-cell {
  position: relative;
  width: var(--cell); aspect-ratio: 5 / 7;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  transform: rotate(var(--r, 0deg));
  transition: transform 0.62s var(--ease-out), opacity 0.5s ease;
  -webkit-tap-highlight-color: transparent;
}
.lt-cell:active { transform: rotate(var(--r, 0deg)) scale(0.95); transition-duration: 0.12s; }
.lt-cell .lt-cardface {
  position: absolute; inset: 0; display: block;
}
.lt-cell .lt-cardface > * { pointer-events: none; }
.lt-cardface {
  /* the card itself */
  background: #FAEFD9;
  border: 2.5px solid var(--ink); border-radius: 10px;
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.lt-cardface::before {
  content: ""; position: absolute; inset: 5px;
  border: 1.5px solid rgba(217, 58, 43, 0.5); border-radius: 6px;
  pointer-events: none;
}
.lt-cardface svg, .lt-cardface .art {
  position: absolute; top: 13%; left: 50%;
  width: 72%; height: auto;
  transform: translateX(-50%);
  display: block;
}
.lt-cardface .no {
  position: absolute; top: 6px; left: 10px;
  font-family: var(--font-display); font-size: clamp(0.6rem, 1.2vw, 0.8rem);
  color: var(--red);
}
.lt-cardface .nm {
  position: absolute; left: 7%; right: 7%; bottom: 8.5%;
  font-family: var(--font-display);
  font-size: clamp(0.52rem, 1.05vw, 0.78rem);
  text-transform: uppercase; letter-spacing: 0.02em; text-align: center;
  line-height: 1.08;
}

.lt-hint .lt-cardface { animation: lt-hint 1.4s ease-in-out infinite; }
@keyframes lt-hint {
  0%, 100% { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 0 2.5px rgba(255, 210, 63, 0.55); }
  50% { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 14px 3.5px rgba(255, 210, 63, 0.4); }
}

.lt-nope { animation: lt-nope 0.32s ease; }
@keyframes lt-nope {
  25% { transform: rotate(calc(var(--r, 0deg) - 2.4deg)); }
  75% { transform: rotate(calc(var(--r, 0deg) + 2.4deg)); }
}

.lt-wincell { z-index: 2; }
.lt-wincell .lt-cardface {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--yellow), 0 0 26px rgba(255, 210, 63, 0.55);
}

/* the bean */
.lt-beanspot { position: absolute; inset: 0; pointer-events: none; border-radius: 7px; }
/* marked = subtle tint overlay (NOT filter: brightness — filters make Safari
   re-rasterize the layer every time a flip animation starts = subtle flash) */
.lt-marked .lt-beanspot { background: rgba(42, 30, 26, 0.05); }
.lt-bean {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--cell) * 0.4); height: calc(var(--cell) * 0.32);
  margin: calc(var(--cell) * -0.16) 0 0 calc(var(--cell) * -0.2);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 35'%3E%3Cellipse cx='22' cy='30' rx='17' ry='3.6' fill='%23000' opacity='0.25'/%3E%3Cellipse cx='22' cy='15' rx='20' ry='13' fill='%23543424'/%3E%3Cellipse cx='21.3' cy='14.2' rx='18.4' ry='11.6' fill='%23815539'/%3E%3Cpath d='M10 10 Q15.5 5.5 23 6.5' stroke='%23a97c55' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='29' cy='10.5' r='1.4' fill='%23543424'/%3E%3Ccircle cx='31.5' cy='17' r='1.1' fill='%23543424'/%3E%3Ccircle cx='14' cy='19' r='1.2' fill='%23543424'/%3E%3Ccircle cx='23' cy='22' r='1' fill='%23543424'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translate(var(--bx, 0), var(--by, 0)) rotate(var(--br, 0deg));
  animation: lt-bean-drop 0.42s var(--ease-out);
}
@keyframes lt-bean-drop {
  0% { transform: translate(var(--bx, 0), calc(var(--by, 0) - 52px)) rotate(var(--br, 0deg)) scale(1.8); opacity: 0; }
  55% { opacity: 1; transform: translate(var(--bx, 0), var(--by, 0)) rotate(var(--br, 0deg)) scale(0.92); }
  75% { transform: translate(var(--bx, 0), calc(var(--by, 0) - 4px)) rotate(var(--br, 0deg)) scale(1.04); }
  100% { transform: translate(var(--bx, 0), var(--by, 0)) rotate(var(--br, 0deg)) scale(1); }
}

/* ----- ¡LOTERÍA! ----- */

.lt-shout {
  position: absolute; left: 50%; top: 50%; z-index: 8;
  transform: translate(-50%, -50%) rotate(-2.5deg);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.5vw, 3.2rem);
  color: #fff; background: var(--red);
  border: 3px solid var(--ink); border-radius: 16px;
  padding: clamp(12px, 2.4vh, 22px) clamp(28px, 5vw, 54px);
  cursor: pointer; letter-spacing: 0.02em;
  box-shadow: 8px 10px 0 rgba(23, 12, 40, 0.75), 0 0 60px rgba(255, 210, 63, 0.35);
  animation: lt-shout-pulse 0.95s ease-in-out infinite;
}
@keyframes lt-shout-pulse {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2.5deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(-1.4deg) scale(1.06); }
}
.lt-shout.lt-slammed {
  animation: none;
  transform: translate(-50%, -50%) rotate(-2.5deg) scale(0.88);
  transition: transform 0.16s ease, opacity 0.5s ease 0.25s;
  opacity: 0;
}

.lt-flash::after {
  content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 50%, rgba(255, 210, 63, 0.55), rgba(255, 210, 63, 0) 75%);
  animation: lt-flash 0.75s ease-out forwards;
}
@keyframes lt-flash { from { opacity: 1; } to { opacity: 0; } }

/* ----- the finale ----- */

.lt-fin {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(10px, 1.8vh, 18px);
  padding: clamp(56px, 9vh, 90px) 24px 30px;
  text-align: center;
}
.lt-fin[hidden] { display: none; }

.lt-fin-eyebrow, .lt-fortune, .lt-pitch, .lt-ctas, .lt-fin-links {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s var(--ease-out);
}
.lt-done .lt-fin-eyebrow { opacity: 1; transform: none; transition-delay: 0.9s; }
.lt-done .lt-fortune { opacity: 1; transform: none; transition-delay: 1.05s; }
.lt-done .lt-pitch { opacity: 1; transform: none; transition-delay: 1.3s; }
.lt-done .lt-ctas { opacity: 1; transform: none; transition-delay: 1.55s; }
.lt-done .lt-fin-links { opacity: 0.75; transform: none; transition-delay: 1.9s; }

.lt-fin-eyebrow {
  margin: 0;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--marigold);
}

.lt-spread { display: flex; justify-content: center; }
.lt-spreadcard {
  width: min(26vw, 15vh, 168px); width: min(26vw, 15dvh, 168px);
  height: auto; aspect-ratio: 5 / 7;
  margin: 0 -7px;
  transform: rotate(var(--r, 0deg));
  transition: transform 0.7s var(--ease-out);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  position: relative;
}
.lt-spreadcard:nth-child(2) { z-index: 2; }

.lt-fortune {
  margin: 0; max-width: 52ch;
  font-size: clamp(0.95rem, 2vw, 1.12rem);
  color: rgba(246, 237, 221, 0.9);
}
.lt-fortune strong { color: var(--yellow); font-weight: 700; }

.lt-pitch {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  color: var(--night-ink);
}

.lt-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.lt-fin-links { display: flex; gap: 26px; justify-content: center; }
.lt-again, .lt-exit {
  background: transparent; border: 0; cursor: pointer;
  color: var(--night-ink); font-family: var(--font-body);
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px;
}
.lt-again:hover, .lt-exit:hover { opacity: 1 !important; color: var(--yellow); }

/* promo line — dormant until the client approves the offer */
.lt-promo {
  margin: 0; font-size: 0.9rem; color: rgba(246, 237, 221, 0.85);
}
.lt-promo strong {
  color: var(--yellow); letter-spacing: 0.08em;
  border: 1.5px dashed rgba(255, 210, 63, 0.6); border-radius: 6px;
  padding: 2px 8px;
}

/* ----- papel picado confetti ----- */

.lt-confetti {
  position: absolute; top: -22px; z-index: 6;
  width: 14px; height: 11px;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 84% 100%, 67% 62%, 50% 100%, 33% 62%, 16% 100%, 0 62%);
  animation: lt-confetti-fall linear forwards;
  pointer-events: none;
}
@keyframes lt-confetti-fall {
  to { transform: translate(var(--drift, 0), 112vh) rotate(var(--spin, 540deg)); }
}

/* ----- small screens ----- */

@media (max-width: 740px) {
  .lt { --cell: min(24vw, 11.5vh, 150px); --cell: min(24vw, 11.5dvh, 150px); }
  .lt-stage { flex-direction: column; gap: clamp(12px, 2.4vh, 22px); }
  .lt-cantor {
    grid-template-areas: "pile call fan";
    grid-template-columns: auto auto 1fr;
    gap: 0 14px; align-items: center;
  }
  .lt-pile { width: calc(var(--callw) * 0.52); }
  .lt-call { width: calc(var(--callw) * 0.78); }
  .lt-fan {
    flex-wrap: nowrap; justify-content: flex-start;
    min-height: calc(var(--callw) * 0.2 * 1.4);
  }
  .lt-fancard { width: calc(var(--callw) * 0.2); }
  .lt-scene { padding-top: clamp(46px, 7vh, 64px); }
  /* reserve two verso lines — 1-vs-2-line text must not re-center the board */
  .lt-verso { min-height: 2.9em; }
  .lt-picado { height: clamp(36px, 5.5vh, 54px); }
}

/* ----- reduced motion ----- */

@media (prefers-reduced-motion: reduce) {
  .lt, .lt-scene, .lt-cell, .lt-spreadcard,
  .lt-fin-eyebrow, .lt-fortune, .lt-pitch, .lt-ctas, .lt-fin-links { transition-duration: 0.01s; }
  .lt-picado, .lt-shout, .lt-hint .lt-cardface { animation: none; }
  .lt-flipin, .lt-bean, .lt-nope, .lt-flash::after { animation-duration: 0.01s; }
  .lt-done .lt-fin-eyebrow, .lt-done .lt-fortune, .lt-done .lt-pitch,
  .lt-done .lt-ctas, .lt-done .lt-fin-links { transition-delay: 0s; }
}

/* ---------- Interior pages ---------- */

.page-hero {
  position: relative;
  background: var(--night);
  color: var(--night-ink);
  padding: calc(var(--header-h) + clamp(48px, 7vw, 90px)) 0 clamp(40px, 5vw, 64px);
  overflow: hidden;
}
.page-hero .eyebrow { color: rgba(246, 237, 221, 0.7); }
.page-hero .headline { color: var(--night-ink); }
.page-hero .headline em { color: var(--yellow); }
.page-hero .lead { color: rgba(246, 237, 221, 0.82); }
.page-hero .ghost-word { -webkit-text-stroke-color: rgba(246, 237, 221, 0.1); }

.page-hero-media {
  position: absolute; inset: 0;
}
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.36; }
.page-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(34, 18, 55, 0.55), rgba(34, 18, 55, 0.85));
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .btn-ghost { color: var(--night-ink); border-color: rgba(246, 237, 221, 0.8); }
.page-hero .btn-ghost:hover { background: var(--night-ink); color: var(--night); }

/* Menu page only: the food shot is the sell — let it read through the night wash */
body[data-page="menu"] .page-hero-media img { opacity: 0.55; }
body[data-page="menu"] .page-hero-media::after {
  background: linear-gradient(to bottom, rgba(34, 18, 55, 0.42), rgba(34, 18, 55, 0.85));
}

/* ---------- Menu page ---------- */

.menu-nav {
  position: sticky; top: var(--header-h); z-index: 60;
  background: rgba(250, 243, 227, 0.95); backdrop-filter: blur(8px);
  border-bottom: 2px solid rgba(42, 30, 26, 0.14);
}
.menu-nav-track {
  display: flex; gap: 6px; overflow-x: auto; padding: 10px 0;
  scrollbar-width: none;
}
.menu-nav-track::-webkit-scrollbar { display: none; }
.menu-nav a {
  flex: 0 0 auto;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft);
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid transparent;
}
.menu-nav a:hover { color: var(--ink); }
.menu-nav a.active { color: var(--red); border-color: var(--red); background: var(--card); }

.menu-section { padding: clamp(46px, 6vw, 74px) 0 10px; scroll-margin-top: calc(var(--header-h) + 66px); }
.menu-section:last-of-type { padding-bottom: clamp(56px, 7vw, 90px); }

.menu-section-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.menu-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: var(--purple);
  letter-spacing: 0.02em;
}
.menu-section-head .ms-note { font-size: 0.9rem; color: var(--red-deep); font-weight: 600; }

.menu-cols { columns: 2; column-gap: clamp(30px, 5vw, 64px); margin-top: 18px; }
.menu-item { break-inside: avoid; padding: 13px 0; }

.mi-line {
  display: flex; align-items: baseline; gap: 8px;
}
.mi-name { font-weight: 800; font-size: 0.98rem; letter-spacing: 0.04em; text-transform: uppercase; }
.mi-dots { flex: 1; border-bottom: 2px dotted rgba(42, 30, 26, 0.35); transform: translateY(-4px); }
.mi-price { font-weight: 800; color: var(--red); font-size: 0.98rem; white-space: nowrap; }
.mi-desc { margin: 4px 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); }
.mi-add { margin: 4px 0 0; font-size: 0.8rem; font-weight: 600; color: var(--red-deep); }
.mi-tags { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 2px; }
.mi-tag {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1.2px solid var(--green); color: var(--green);
  padding: 1px 5px; border-radius: 4px;
}

.menu-legend {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--ink-soft);
  padding: 18px 0 0; margin-top: 8px;
  border-top: 2px dashed rgba(42, 30, 26, 0.2);
}

/* ---------- On Draught ----------
   The rotating tap list, called out inside La Barra. Butter ground so it lifts off the
   cream page — the wildcard treatment borrowed from La Semana's Cantina Hour card
   (cf. .wk-wild), plus the deck's red inner rule. A QR code in the room points at
   #draught, so this block owns its own scroll-margin: .menu-section's (above) doesn't
   apply to a nested element, and without it the sticky nav covers the heading on jump. */
.draught {
  position: relative;
  margin-top: clamp(34px, 4vw, 48px);
  padding: clamp(24px, 3.2vw, 40px) clamp(20px, 3vw, 36px) clamp(20px, 2.6vw, 30px);
  background: #FBE5A9;
  border: 2.5px solid var(--ink); border-radius: 14px;
  box-shadow: var(--shadow-card);
  scroll-margin-top: calc(var(--header-h) + 66px);
}
.draught::after {
  content: ""; position: absolute; inset: 6px;
  border: 1.5px solid rgba(217, 58, 43, 0.5); border-radius: 9px;
  pointer-events: none;
}
/* title between two red hairlines, as on .wk-day and .gc-name */
.draught-head {
  display: flex; align-items: center; gap: 14px;
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink);
}
.draught-head::before, .draught-head::after {
  content: ""; height: 2px; flex: 1; background: rgba(217, 58, 43, 0.4);
}
.draught-group {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding-bottom: 5px;
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--red-deep);
  border-bottom: 2px dashed rgba(42, 30, 26, 0.25);
}
/* the items are plain .menu-item/.mi-* — only the leader needs to read on butter */
.draught .menu-cols { margin-top: 6px; }
.draught .mi-dots { border-bottom-color: rgba(42, 30, 26, 0.3); }

.menu-banner {
  margin-top: clamp(40px, 5vw, 60px);
  border-radius: 14px; overflow: hidden; position: relative;
  border: 2.5px solid var(--ink); box-shadow: var(--shadow-card);
}
.menu-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 75%; }
.menu-banner-inner {
  position: relative; z-index: 2;
  background: linear-gradient(to right, rgba(34, 18, 55, 0.88), rgba(34, 18, 55, 0.35));
  color: var(--night-ink);
  padding: clamp(30px, 4.5vw, 54px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.menu-banner-inner h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin-bottom: 6px; }
.menu-banner-inner p { margin: 0; font-size: 0.95rem; color: rgba(246, 237, 221, 0.85); }

/* ---------- Forms (contact / employment / party) ---------- */

.split-grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(34px, 5vw, 70px);
  align-items: start;
  padding: clamp(50px, 7vw, 90px) 0;
}

.info-card {
  background: var(--card);
  border: 2.5px solid var(--ink); border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 28px;
  position: sticky; top: calc(var(--header-h) + 24px);
}
.info-card h2 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 12px; }
.info-card address { font-size: 0.95rem; line-height: 1.9; color: var(--ink-soft); }
.info-card a { color: var(--ink); }
.info-card a:hover { color: var(--red); }
.info-card hr { border: 0; border-top: 2px dashed rgba(42, 30, 26, 0.2); margin: 18px 0; }
.info-hours { display: grid; grid-template-columns: auto 1fr; gap: 2px 20px; font-size: 0.92rem; }
.info-hours dt { font-weight: 700; }
.info-hours dd { margin: 0; text-align: right; color: var(--ink-soft); }

.form-shell { display: block; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink); border-radius: 10px;
  padding: 12px 14px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--red); box-shadow: 3px 4px 0 rgba(217, 58, 43, 0.35);
}
/* Invalid fields. Focus already borrows --red, and a focus ring by definition goes
   away when focus does — so errors take the deeper --red-deep plus a standing offset
   shadow, which still reads once the cursor has moved three fields down. */
.form-field.is-bad input,
.form-field.is-bad select,
.form-field.is-bad textarea {
  border-color: var(--red-deep);
  box-shadow: 3px 4px 0 rgba(168, 42, 31, 0.28);
}
.form-err {
  display: none;
  font-size: 0.82rem; font-weight: 600; line-height: 1.35;
  color: var(--red-deep);
}
.form-field.is-bad .form-err { display: block; }

.form-actions { margin-top: 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-note { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }
.form-note a { color: var(--red); }
.form-status { margin-top: 14px; font-weight: 600; color: var(--teal-deep); }
.form-status.is-bad { color: var(--red-deep); }

/* ---------- Responsive ---------- */

@media (max-width: 1060px) {
  .primary-nav { display: none; }
  .nav-burger { display: block; }
  .header-actions .btn-ghost { display: none; }

  .dish-card.feature { grid-column: span 12; }
  .dish-card:not(.feature) { grid-column: span 6; }
  .dish-tile { grid-column: span 6; }
  .dish-card.feature .dish-media img, .dish-card.feature .dish-media video { aspect-ratio: 16 / 10; }

  /* not enough width for copy and pups side by side — stack them */
  .patio-inner { grid-template-columns: 1fr; }
  .patio-copy, .patio-pups { grid-column: 1; }
  .patio-pups { max-width: 460px; margin: 8px auto 0; }
  /* The trail runs here too — --x/--y are percentages of the trail box, so the whole
     route rescales itself. At this cap the prints sit ~32px apart at their 17px floor,
     and the ~43px overhang stays inside the band's 74px bottom padding. */

  .bar-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .bar-side { display: none; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-map { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  /* Fuller scrims on mobile — copy spans the bright end of the desktop gradients */
  .patio-overlay { background: linear-gradient(to bottom, rgba(26, 12, 44, 0.74), rgba(28, 14, 46, 0.6)); }

  /* the hand drops below the copy and shrinks — the band shouldn't become all dog on a phone */
  .patio-pups { max-width: 400px; margin: 0 auto; }

  .intro-grid { grid-template-columns: 1fr; }
  .intro-collage { margin-top: 10px; padding: 20px 0 200px 0; }
  .print-tuck { left: 0; bottom: 0; width: 44%; }
  .print-hang { right: 0; bottom: 0; width: 44%; }
  .print-hang figcaption { justify-content: flex-end; text-align: right; }
  /* mobile: mascot leaves the collage and anchors the closing line */
  .collage-art { display: none; }
  .close-mascot-row { display: flex; gap: 126px; }
  .close-mascot {
    display: block;
    position: absolute; left: 50%; top: 50%;
    width: 74px; height: auto;
    transform: translate(-50%, -62%) rotate(6deg);
    filter: drop-shadow(3px 4px 0 rgba(42, 30, 26, 0.3));
  }
  .collage-stamp { right: -4px; top: -14px; width: 92px; height: 92px; font-size: 0.84rem; }

  .bar-grid { grid-template-columns: 1fr; }
  .print-live { max-width: 340px; margin-inline: auto; }

  .gift-inner { grid-template-columns: 1fr; gap: 36px; }
  .gift-visual { order: -1; }
  .gift-fan { width: min(250px, 72%); }
  .gc-name { font-size: 1.12rem; }

  .split-grid { grid-template-columns: 1fr; }
  .info-card { position: static; }
  .form-grid { grid-template-columns: 1fr; }

  .menu-cols { columns: 1; }

  .hero-meta { gap: 8px 16px; font-size: 0.82rem; }

  .footer-brand { grid-column: 1 / -1; }
  .footer-nav { grid-column: 1 / -1; }
  .footer-nav ul { columns: 2; column-gap: 24px; }
  .complex-row { justify-content: center; text-align: center; }
  .footer-bottom { justify-content: center; text-align: center; }

  /* Phone hero: nudge the crop right so the foreground diner at the picnic
     table sits just out of frame — keeps the dog, the doorway, and the second
     umbrella. object-position is proportional, so it reads cleanest at true
     phone widths; desktop/tablet (>760px) keep the default centered crop. */
  .hero-media video { object-position: 67% 50%; }
}

@media (max-width: 980px) {
  /* below the 4-up hand, each special becomes a horizontal ticket — art left,
     words right. Two columns down to phone width, then one. No shrunken
     portrait cards, no oversized 2-up spread. */
  .week-hand { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; gap: 16px 18px; }
  .week-card { --arc-f: 0; }
  .wk-tilt {
    grid-template-columns: 90px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "fig day" "fig nm" "fig deal";
    column-gap: 16px;
    align-content: center;
    padding: 12px 14px;
  }
  .week-card:hover { transform: rotate(0deg) translateY(-4px); }
  .week-card:nth-child(1) { --tilt-m: -0.8deg; }
  .week-card:nth-child(2) { --tilt-m: 0.6deg; }
  .week-card:nth-child(3) { --tilt-m: -0.6deg; }
  .week-card:nth-child(4) { --tilt-m: 0.8deg; }
  .wk-fig { width: 100%; margin: 0; align-self: center; }
  .wk-day { justify-content: flex-start; margin: 0; font-size: 0.62rem; }
  .wk-day::before { display: none; }
  .wk-nm { text-align: left; margin: 5px 0 0; font-size: 0.94rem; }
  .wk-deal { text-align: left; margin: 5px 0 0; padding-top: 0; font-size: 0.78rem; }
  .wk-deal::before { display: none; }
}

@media (max-width: 720px) {
  /* two ticket columns need ~330px each; below that, stack them */
  .week-hand { grid-template-columns: 1fr; max-width: 440px; gap: 13px; }
}

@media (max-width: 560px) {
  .dish-card:not(.feature), .dish-tile { grid-column: span 12; }
  .header-actions .btn-solid { padding: 9px 14px; font-size: 0.72rem; }
}

/* ---------- 404 — a card that isn't in the deck ---------- */
.nf-hero { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; text-align: center; padding: clamp(60px, 10vw, 120px) 0; }
.nf-card {
  width: clamp(120px, 16vw, 168px); aspect-ratio: 480 / 676; margin: 0 auto 30px;
  border-radius: 10px; border: 2.5px solid var(--ink); box-shadow: var(--shadow-card);
  background: var(--teal) url("../assets/cards/back.webp") center / cover no-repeat;
  transform: rotate(-4deg);
}
.nf-hero .headline { color: var(--night-ink); }
.nf-hero .headline em { color: var(--yellow); }
.nf-hero .lead { color: rgba(246, 237, 221, 0.85); max-width: 460px; margin-inline: auto; }
.nf-ctas { margin-top: 28px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   "The Deal" — first-visit loader (index only · markup + script live in
   index.html so the veil is up before first paint). Once per session; any
   input skips; reduced-motion never sees it. The hand is drawn at random
   in JS; La Sirena always wins.
   Timeline: deck settles pre-play · deal 0.08/0.30/0.52 (varied durations) ·
   winner off the deck back-up @0.80, holds · pick-up flip @1.70 (lift → turn
   → slap) · win call: burst @2.24, stamp @2.36 (card jolts on impact),
   confetti @2.56 (three pieces rest on the table) · wordmark @2.70 ·
   rays @2.84 · sub @3.02 · lift at play+4.0s (JS), stage + ghost lag the
   curtain.
   ========================================================================== */

    .deal-veil {
      position: fixed; inset: 0; z-index: 200;
      background:
        radial-gradient(120% 90% at 50% 38%, rgba(255, 252, 244, 0.9), rgba(255, 252, 244, 0) 62%),
        var(--paper);
      display: grid; place-items: center;
      cursor: pointer;
      overflow: hidden;
    }
    /* picado curtain hem — trails below the veil as it lifts */
    .deal-veil::after {
      content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 46px;
      background: url("../assets/picado.svg") repeat-x;
      background-size: auto 100%;
    }
    .deal-veil.lift { transform: translateY(-104%); transition: transform 0.55s cubic-bezier(0.6, 0, 0.3, 1); }
    /* the curtain has weight: contents lag it slightly on the way up */
    .deal-veil.lift .dv-stage {
      transform: translateY(calc(3.5vh + 6vh));
      transition: transform 0.55s cubic-bezier(0.6, 0, 0.3, 1);
    }
    .deal-veil.lift .dv-ghost {
      translate: 0 9vh;
      transition: translate 0.55s cubic-bezier(0.6, 0, 0.3, 1);
    }

    /* the brand mermaid, ghosted behind the table like the window neon —
       iconography, not text: the animation already asks for enough reading */
    .dv-ghost {
      position: absolute; left: 50%; top: 10%;
      height: clamp(320px, 56vh, 540px); width: auto;
      transform: translateX(-50%) rotate(-3.5deg) translateY(16px);
      pointer-events: none; user-select: none;
      opacity: 0;
    }
    .deal-veil.play .dv-ghost {
      animation: dv-ghost-in 1.8s var(--ease-out) 0.25s forwards,
                 dv-ghost-drift 12s ease-in-out 2.1s infinite alternate;
    }
    @keyframes dv-ghost-in { to { opacity: 0.08; transform: translateX(-50%) rotate(-3.5deg) translateY(0); } }
    /* barely-there drift (rotate property — no transform conflict) keeps the held frame alive */
    @keyframes dv-ghost-drift { from { rotate: 0.45deg; } to { rotate: -0.45deg; } }

    .dv-stage { position: relative; width: min(760px, 88vw); height: 380px; transform: translateY(3.5vh); }

    /* --- the deck --------------------------------------------------------
       Visible the moment the veil is (NOT gated on .play) — it fills the
       decode/font wait, and gives every dealt card a source. Top card
       flicks as each card leaves. */
    .dv-deck {
      /* tucked at the table's corner, clear of c1's caption; DOM-first so
         dealt cards pass OVER the deck (dealt off the top, not from under) */
      position: absolute; left: -4%; bottom: -70px;
      width: 96px; aspect-ratio: 480 / 676;
      transform: rotate(-7deg);
      opacity: 0; scale: 0.94;
      animation: dv-deck-in 0.32s var(--ease-out) forwards;
    }
    @keyframes dv-deck-in { to { opacity: 1; scale: 1; } }
    .dv-deck img {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      border-radius: 8px; border: 2px solid var(--ink);
      box-shadow: var(--shadow-card-sm);
    }
    .dv-deck img:nth-child(1) { transform: translate(4px, 5px) rotate(2.2deg); }
    .dv-deck img:nth-child(2) { transform: translate(1px, 2px) rotate(-1.4deg); }
    .deal-veil.play .dv-deck img:nth-child(3) { animation: dv-flick 1.9s linear; }
    @keyframes dv-flick {
      0%, 4%   { transform: none; }
      7%       { transform: rotate(-5deg) translateY(-4px); }
      10%, 15% { transform: none; }
      18%      { transform: rotate(-5deg) translateY(-4px); }
      21%, 27% { transform: none; }
      30%      { transform: rotate(-5deg) translateY(-4px); }
      33%, 41% { transform: none; }
      45%      { transform: rotate(-6deg) translateY(-5px); }
      49%, 100% { transform: none; }
    }

    /* --- deal physics ---------------------------------------------------
       Three nested layers per card:
       .dv-card     final slot (position + resting tilt), never animates
       .dv-arc      sweeps in around a pivot 1300px below — the dealer's arm
       .dv-cardface the card itself: scales down + soft airborne shadow in
                    flight, lands at full size with the deck's hard shadow */
    .dv-card {
      position: absolute; left: 50%; top: 50%; margin: 0;
      width: 148px;
      transform: translate(calc(-50% + var(--rx)), calc(-50% + var(--ry))) rotate(var(--rr));
    }
    .dv-arc { transform-origin: 50% 1300px; transform: rotate(var(--sweep)); }
    .dv-cardface {
      background: var(--card);
      border: 2.5px solid var(--ink); border-radius: 9px;
      padding: 7px 7px 3px;
      position: relative;
      opacity: 0;
      box-shadow: var(--shadow-card-sm);
    }
    .dv-cardface::after {
      content: ""; position: absolute; inset: 3.5px;
      border: 1.5px solid rgba(217, 58, 43, 0.4); border-radius: 6px;
      pointer-events: none;
    }
    .dv-cardface img { display: block; width: 100%; height: auto; border-radius: 4px; }
    .dv-cardface figcaption {
      padding: 4px 0 3px; text-align: center;
      font-family: var(--font-display);
      font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--ink);
      white-space: nowrap; overflow: hidden;
    }
    /* the fan — spaced so every card's name reads */
    .dv-c1 { --rx: -252px; --ry: 14px;  --rr: -10deg;  --sweep: -17deg; }
    .dv-c2 { --rx: -124px; --ry: -10px; --rr: -4deg;   --sweep: -14deg; }
    .dv-c3 { --rx: -2px;   --ry: -20px; --rr: 1.5deg;  --sweep: -11deg; }
    .deal-veil.play .dv-arc { animation: dv-sweep 0.72s cubic-bezier(0.22, 1.14, 0.36, 1) forwards; }
    .deal-veil.play .dv-cardface { animation: dv-touchdown 0.72s cubic-bezier(0.3, 1, 0.4, 1) forwards; }
    .deal-veil.play .dv-c1 .dv-arc, .deal-veil.play .dv-c1 .dv-cardface { animation-delay: 0.08s; }
    .deal-veil.play .dv-c2 .dv-arc, .deal-veil.play .dv-c2 .dv-cardface { animation-delay: 0.30s; }
    .deal-veil.play .dv-c3 .dv-arc, .deal-veil.play .dv-c3 .dv-cardface { animation-delay: 0.52s; }
    /* human dealer: each throw a touch different */
    .deal-veil.play .dv-c2 .dv-arc, .deal-veil.play .dv-c2 .dv-cardface { animation-duration: 0.68s; }
    .deal-veil.play .dv-c3 .dv-arc, .deal-veil.play .dv-c3 .dv-cardface { animation-duration: 0.76s; }
    @keyframes dv-sweep { to { transform: rotate(0deg); } }
    @keyframes dv-touchdown {
      0%   { opacity: 0; transform: scale(0.8) rotate(9deg);
             box-shadow: 0 26px 30px -6px rgba(42, 30, 26, 0.28); }
      14%  { opacity: 1; }
      70%  { transform: scale(1.035) rotate(-1deg);
             box-shadow: 0 10px 14px -4px rgba(42, 30, 26, 0.32); }
      100% { opacity: 1; transform: scale(1) rotate(0deg);
             box-shadow: var(--shadow-card-sm); }
    }

    /* --- the winning card -----------------------------------------------
       Arcs in showing the deck's back, holds a beat — then flips. */
    .dv-flipwrap {
      position: absolute; left: 50%; top: 50%; z-index: 2;
      width: 190px; aspect-ratio: 5 / 6.6;
      transform: translate(calc(-50% + 168px), -46%) rotate(7deg);
    }
    .dv-flipwrap > .dv-arc {
      position: absolute; inset: 0;
      --sweep: -9deg;
      perspective: 950px;
      opacity: 0;
    }
    .deal-veil.play .dv-flipwrap > .dv-arc {
      animation: dv-sweep 0.68s cubic-bezier(0.22, 1.1, 0.36, 1) 0.80s forwards,
                 dv-appear 0.14s linear 0.80s forwards,
                 dv-pickup 0.74s cubic-bezier(0.3, 0.9, 0.4, 1) 1.66s;
    }
    /* the pick-up: press down, lift off the table, turn at the apex, slap
       down. scale/translate PROPERTIES compose with dv-sweep's transform —
       and scale deliberately rides the arc's far-below transform-origin, so
       a few percent of scale reads as a real lift toward the viewer. */
    @keyframes dv-pickup {
      0%   { scale: 1;     translate: 0 0; }
      10%  { scale: 0.997; translate: 0 1.5px; }
      44%  { scale: 1.055; translate: 0 -5px; }
      74%  { scale: 1.008; translate: 0 0; }
      84%  { scale: 0.996; translate: 0 1.5px; }
      100% { scale: 1;     translate: 0 0; }
    }
    @keyframes dv-appear { to { opacity: 1; } }
    .dv-flip {
      position: absolute; inset: 0;
      transform-style: preserve-3d;
      transform: rotateY(180deg);
    }
    /* the turn, staged like a hand doing it:
       peek (a tease at the corner during the hold) → slow peel off the
       table → whip through the apex with a slight lean-back → one damped
       settle timed to the slap, with a last degree of roll as the card
       beds in. dv-carry (translate/rotate properties — they compose with
       the keyframed transform) drifts the card toward the table's center
       and twists it a hair: the flip axis stops being a machine pivot.
       Per-segment timing functions — no spring bezier stacked on keyframe
       overshoot. */
    .deal-veil.play .dv-flip {
      animation: dv-peek 0.34s ease-in-out 1.24s,
                 dv-flip 0.72s linear 1.68s forwards,
                 dv-carry 0.74s cubic-bezier(0.3, 0.9, 0.4, 1) 1.66s;
    }
    @keyframes dv-peek {
      0%   { transform: rotateY(180deg); }
      45%  { transform: rotateY(167deg) rotateX(2deg); }
      78%  { transform: rotateY(181.5deg); }
      100% { transform: rotateY(180deg); }
    }
    @keyframes dv-flip {
      0%   { transform: rotateY(180deg) rotateX(0deg);
             animation-timing-function: cubic-bezier(0.55, 0, 0.84, 0.5); }
      46%  { transform: rotateY(84deg) rotateX(7deg) rotateZ(0.5deg);
             animation-timing-function: cubic-bezier(0.12, 0.55, 0.3, 1); }
      86%  { transform: rotateY(-5deg) rotateX(1deg) rotateZ(-0.7deg);
             animation-timing-function: cubic-bezier(0.35, 0, 0.5, 1); }
      100% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
    }
    @keyframes dv-carry {
      0%   { translate: 0 0;       rotate: 0deg; }
      44%  { translate: -15px 0;   rotate: -2.2deg; }
      74%  { translate: 2px 0;     rotate: 0.7deg; }
      100% { translate: 0 0;       rotate: 0deg; }
    }
    .dv-face {
      position: absolute; inset: 0; backface-visibility: hidden;
      border: 2.5px solid var(--ink); border-radius: 10px;
      box-shadow: var(--shadow-card);
    }
    /* contact shadow on the faces hands off to the cast shadow the moment
       the card leaves the table, and snaps back on the slap */
    .deal-veil.play .dv-face { animation: dv-air 0.74s cubic-bezier(0.3, 0.9, 0.4, 1) 1.66s; }
    @keyframes dv-air {
      0%       { box-shadow: var(--shadow-card); }
      16%      { box-shadow: 0 10px 14px -8px rgba(42, 30, 26, 0); }
      82%      { box-shadow: 0 10px 14px -8px rgba(42, 30, 26, 0); }
      88%, 100% { box-shadow: var(--shadow-card); }
    }
    /* the card's cast shadow — a separate element that stays ON THE TABLE
       (outside .dv-arc, so the pickup's scale-lift can't drag it upward).
       It tightens under the press, then spreads, fades, and — the tell —
       NARROWS while the card is edge-on, snapping dark and sharp again at
       the slap. The old box-shadow rotated with the faces and vanished
       exactly when the card was airborne. */
    .dv-cast {
      position: absolute; left: 2%; right: 2%; bottom: -8px;
      height: 26px; border-radius: 50%;
      background: radial-gradient(50% 50% at 50% 50%, rgba(42, 30, 26, 0.4), rgba(42, 30, 26, 0.18) 48%, rgba(42, 30, 26, 0) 72%);
      opacity: 0;
      pointer-events: none;
    }
    .deal-veil.play .dv-cast { animation: dv-cast 0.74s cubic-bezier(0.3, 0.9, 0.4, 1) 1.66s; }
    @keyframes dv-cast {
      0%   { opacity: 0;    transform: scale(1, 1); }
      12%  { opacity: 0.5;  transform: scale(1.02, 0.92); }
      44%  { opacity: 0.22; transform: translate(-9px, 7px) scale(0.42, 1.1); }
      70%  { opacity: 0.34; transform: translate(0, 2px) scale(0.96, 1); }
      84%  { opacity: 0.55; transform: scale(1.02, 0.94); }
      100% { opacity: 0;    transform: scale(1, 1); }
    }
    /* paper has thickness: two edge slabs close the slab the faces bound —
       at the apex the card reads as card stock, not a projected plane */
    .dv-edge {
      position: absolute; top: 9px; bottom: 9px; width: 3.2px;
      background: linear-gradient(to bottom, #EDE3CA, #D8CCAC);
      transform: rotateY(90deg);
    }
    .dv-edge-l { left: -1.6px; }
    .dv-edge-r { right: -1.6px; }
    .dv-back {
      transform: rotateY(180deg) translateZ(1.6px);
      background: url("../assets/cards/back.webp") center / cover;
      border-radius: 10px;
    }
    .dv-front {
      transform: translateZ(1.6px);
      background: var(--card);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px; padding: 9px 9px 7px;
    }
    /* light response: the fixed overhead light shades whichever face is
       steep — the back darkens as it peels, the front is born shaded and
       brightens as it lands flat. Opacity only, timed to the flip segments. */
    .dv-front::before, .dv-back::before {
      content: ""; position: absolute; inset: 0; z-index: 2;
      border-radius: 7px; background: #1c1512;
      opacity: 0; pointer-events: none;
    }
    .deal-veil.play .dv-back::before { animation: dv-shade-back 0.72s linear 1.68s; }
    @keyframes dv-shade-back {
      0%   { opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 0.84, 0.5); }
      46%, 100% { opacity: 0.17; }
    }
    .deal-veil.play .dv-front::before { animation: dv-shade-front 0.72s linear 1.68s; }
    @keyframes dv-shade-front {
      0%, 46% { opacity: 0.24;
             animation-timing-function: cubic-bezier(0.12, 0.55, 0.3, 1); }
      86%  { opacity: 0.03; }
      100% { opacity: 0; }
    }
    .dv-front::after {
      content: ""; position: absolute; inset: 4px;
      border: 1.5px solid rgba(217, 58, 43, 0.4); border-radius: 7px;
      pointer-events: none;
    }
    .dv-front img { display: block; width: 100%; height: auto; border-radius: 5px; }
    .dv-wm { font-size: 1.22rem; }

    /* the call — ¡Lotería! stamped onto the winner as the flip lands */
    .dv-stamp {
      position: absolute; left: 50%; top: 40%; z-index: 3;
      font-family: var(--font-display); font-size: 1.34rem; line-height: 1;
      color: var(--red); white-space: nowrap;
      padding: 7px 12px 6px;
      border: 3.5px solid var(--red); border-radius: 8px;
      background: rgba(255, 249, 236, 0.82);
      box-shadow: 0 2px 10px rgba(42, 30, 26, 0.18);
      opacity: 0;
      transform: translate(-50%, -50%) rotate(-3deg) scale(2.3);
    }
    .deal-veil.play .dv-stamp { animation: dv-stamp-in 0.34s cubic-bezier(0.2, 1.4, 0.4, 1) 2.36s forwards; }
    /* the table feels the slap — the nearest card nudges */
    .deal-veil.play .dv-c3 { animation: dv-tableshake 0.26s ease-out 2.26s; }
    @keyframes dv-tableshake {
      0%   { translate: 0 0; }
      40%  { translate: 0 2px; }
      75%  { translate: 0 -0.5px; }
      100% { translate: 0 0; }
    }

    /* the card feels the stamp land */
    .deal-veil.play .dv-flipwrap { animation: dv-jolt 0.3s ease-out 2.52s; }
    @keyframes dv-jolt {
      0%   { translate: 0 0; }
      35%  { translate: 0 3px; }
      70%  { translate: 0 -1px; }
      100% { translate: 0 0; }
    }
    @keyframes dv-stamp-in {
      0%   { opacity: 0;    transform: translate(-50%, -50%) rotate(-3deg) scale(2.3); }
      55%  { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(0.94); }
      100% { opacity: 0.97; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
    }

    /* the win — sunburst pops behind the card as the flip crosses flat */
    .dv-burst {
      position: absolute; inset: -70%; z-index: -1;
      background:
        repeating-conic-gradient(from 4deg at 50% 50%,
          rgba(245, 166, 35, 0.5) 0deg 6deg, rgba(245, 166, 35, 0) 6deg 15deg),
        repeating-conic-gradient(from 11deg at 50% 50%,
          rgba(232, 79, 138, 0.26) 0deg 5deg, rgba(232, 79, 138, 0) 5deg 15deg);
      -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 78%);
      mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 78%);
      opacity: 0; transform: scale(0.5) rotate(-18deg);
      pointer-events: none;
    }
    .deal-veil.play .dv-burst { animation: dv-burst-pop 0.6s cubic-bezier(0.2, 1.1, 0.4, 1) 2.24s forwards; }
    @keyframes dv-burst-pop { to { opacity: 1; transform: scale(1) rotate(0deg); } }

    /* papel-picado confetti, tossed off the winning card */
    .dv-confetti { position: absolute; left: 50%; top: 30%; z-index: 4; pointer-events: none; }
    .dv-confetti i {
      position: absolute; width: 9px; height: 13px; border-radius: 1.5px;
      opacity: 0;
    }
    .dv-confetti i:nth-child(6n + 1) { background: var(--pink); }
    .dv-confetti i:nth-child(6n + 2) { background: var(--teal); }
    .dv-confetti i:nth-child(6n + 3) { background: var(--yellow); }
    .dv-confetti i:nth-child(6n + 4) { background: var(--red); }
    .dv-confetti i:nth-child(6n + 5) { background: var(--marigold); }
    .dv-confetti i:nth-child(6n + 6) { background: var(--purple); }
    /* per-piece size (--cs), fall duration (--cdur), and flutter sway (--sw):
       heavy pieces drop fast, light ones float — per-segment timing does
       launch-burst → apex hang → accelerating zigzag fall */
    .deal-veil.play .dv-confetti i {
      animation: dv-conf var(--cdur, 1.15s) linear calc(2.56s + var(--cd)) forwards;
    }
    /* four pieces land on the table and rest there through the hold */
    .dv-confetti i:nth-child(2),
    .dv-confetti i:nth-child(6),
    .dv-confetti i:nth-child(9),
    .dv-confetti i:nth-child(13) { animation-name: dv-conf-rest; }
    @keyframes dv-conf {
      0%   { opacity: 0; transform: translate(calc(var(--cx) * 0.12), calc(var(--cy) * 0.12))
                         rotate(0deg) scale(0.4);
             animation-timing-function: cubic-bezier(0.12, 0.8, 0.32, 1); }
      8%   { opacity: 1; }
      44%  { opacity: 1; transform: translate(var(--cx), var(--cy)) rotate(var(--cr))
                         rotateX(150deg) scale(var(--cs));
             animation-timing-function: cubic-bezier(0.55, 0, 0.7, 0.5); }
      72%  { transform: translate(calc(var(--cx) * 1.22 + var(--sw)), calc(var(--cy) * 0.55 + 60px))
             rotate(calc(var(--cr) * 1.35)) rotateX(330deg) scale(var(--cs));
             animation-timing-function: cubic-bezier(0.3, 0.2, 0.6, 0.8); }
      100% { opacity: 0; transform: translate(calc(var(--cx) * 1.32 - var(--sw) * 0.6), calc(var(--cy) * 0.1 + 175px))
             rotate(calc(var(--cr) * 1.7)) rotateX(560deg) scale(calc(var(--cs) * 0.92)); }
    }
    @keyframes dv-conf-rest {
      0%   { opacity: 0; transform: translate(calc(var(--cx) * 0.12), calc(var(--cy) * 0.12))
                         rotate(0deg) scale(0.4);
             animation-timing-function: cubic-bezier(0.12, 0.8, 0.32, 1); }
      8%   { opacity: 1; }
      46%  { opacity: 1; transform: translate(var(--cx), var(--cy)) rotate(var(--cr))
                         rotateX(150deg) scale(var(--cs));
             animation-timing-function: cubic-bezier(0.55, 0, 0.72, 0.6); }
      76%  { transform: translate(calc(var(--cx) * 1.24 + var(--sw)), 52px)
             rotate(calc(var(--cr) * 1.3)) rotateX(300deg) scale(var(--cs));
             animation-timing-function: cubic-bezier(0.25, 0.4, 0.5, 1); }
      100% { opacity: 1; transform: translate(calc(var(--cx) * 1.3), 88px)
             rotate(calc(var(--cr) * 1.4)) rotateX(360deg) scale(calc(var(--cs) * 0.95)); }
    }

    /* the sign-off — the real wordmark settles in over slow-turning rays,
       "Asbury Park's Cantina" follows. Transform/opacity/filter only —
       no animated letter-spacing (it reflows every frame and reads clunky). */
    .dv-tag {
      position: absolute; left: 50%; bottom: -128px;
      transform: translateX(-50%);
      margin: 0; white-space: nowrap; text-align: center;
    }
    .dv-tagwm {
      display: inline-block; font-size: 2.4rem;
      opacity: 0; transform: translateY(22px) scale(0.93); filter: blur(10px);
    }
    .deal-veil.play .dv-tagwm { animation: dv-wm-in 1.05s cubic-bezier(0.19, 1, 0.22, 1) 2.70s forwards; }
    @keyframes dv-wm-in { to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
    .dv-tag i {
      display: block; margin-top: 8px; font-style: normal;
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
      color: var(--ink-soft);
      opacity: 0; transform: translateY(12px);
    }
    .deal-veil.play .dv-tag i { animation: dv-sub-in 0.7s var(--ease-out) 3.02s forwards; }
    @keyframes dv-sub-in { to { opacity: 1; transform: translateY(0); } }
    /* the semana rays, waking up behind the wordmark and slowly turning */
    .dv-tagburst {
      position: absolute; z-index: -1; left: 50%; top: 40%;
      width: min(380px, 92vw); aspect-ratio: 1 / 1;
      transform: translate(-50%, -50%);
      background: repeating-conic-gradient(from 4deg at 50% 50%,
        rgba(245, 166, 35, 0.4) 0deg 7deg, rgba(245, 166, 35, 0) 7deg 16deg);
      -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 78%);
      mask-image: radial-gradient(circle closest-side at 50% 50%, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 78%);
      opacity: 0; pointer-events: none;
    }
    .deal-veil.play .dv-tagburst {
      animation: dv-tburst-in 0.8s ease 2.84s forwards,
                 dv-tburst-spin 18s linear 2.84s infinite;
    }
    @keyframes dv-tburst-in { to { opacity: 1; } }
    @keyframes dv-tburst-spin {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* hold the hero's entrance until the curtain starts to rise */
    body.dealing [data-stagger] { animation-play-state: paused; }

    @media (max-width: 560px) {
      .dv-stage { height: 300px; transform: none; }
      .dv-card { width: 96px; }
      .dv-c1 { --rx: -124px; --ry: 12px; }
      .dv-c2 { --rx: -46px;  --ry: -6px; }
      .dv-c3 { --rx: 30px;   --ry: 18px; }
      .dv-flipwrap { width: 120px; transform: translate(calc(-50% + 110px), -56%) rotate(7deg); }
      .dv-cardface figcaption { font-size: 0.42rem; }
      .dv-stamp { font-size: 0.9rem; border-width: 3px; padding: 5px 8px 4px; }
      .dv-confetti i { width: 7px; height: 10px; }
      .dv-tag { bottom: -104px; }
      .dv-tagwm { font-size: 1.5rem; }
      .dv-wm { font-size: 0.8rem; }
      .dv-ghost { top: 5%; height: clamp(260px, 44vh, 380px); }
      .dv-deck { width: 64px; left: -2%; bottom: -46px; }
      @keyframes dv-pickup {
        0%   { scale: 1;     translate: 0 0; }
        10%  { scale: 0.997; translate: 0 1px; }
        44%  { scale: 1.04;  translate: 0 -4px; }
        74%  { scale: 1.006; translate: 0 0; }
        84%  { scale: 0.997; translate: 0 1px; }
        100% { scale: 1;     translate: 0 0; }
      }
      /* smaller card, shorter carry */
      @keyframes dv-carry {
        0%   { translate: 0 0;      rotate: 0deg; }
        44%  { translate: -9px 0;   rotate: -2.2deg; }
        74%  { translate: 1.5px 0;  rotate: 0.7deg; }
        100% { translate: 0 0;      rotate: 0deg; }
      }
      .deal-veil.lift .dv-stage { transform: translateY(6vh); }
    }