/* ---- the brand's own display face ----
   Self-hosted from the client's existing site, where it is declared as
   "creole fried font" (Humanist 521 Ultra Bold). It is what every headline on
   the live site is set in, so the rebuild uses it rather than approximating the
   brand with Poppins. Served as the TTF the client already deploys; a woff2
   would be roughly half the weight if fonttools becomes available. */
@font-face {
  font-family: "Creole Brand";
  src: url("/assets/fonts/creole-brand.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

/*
  Creole Fried: site foundation.
  Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.

  Composed from the warm-consumer motif: cream surfaces, deep warm ink, generous
  whitespace, rounded geometry. The motif's terracotta and teal accents are
  re-themed to the brand's own palette, read off the existing site rather than
  invented: red #e02b20 and amber #ffb703. The #2ea3f2 that dominates the old
  stylesheet is Divi's factory blue, not a brand colour, so it is not carried
  over.
*/

:root {
  --cream:      #fbf5ea;
  --cream-2:    #f3e9d7;
  --surface:    #ffffff;
  --ink:        #1a120c;
  --ink-soft:   rgba(26, 18, 12, .72);
  --muted:      #6d6154;
  --line:       rgba(26, 18, 12, .12);

  --red:        #e02b20;
  --red-deep:   #a11a12;
  --amber:      #ffb703;
  --amber-deep: #c98600;
  --char:       #14100c;

  --brand:   "Creole Brand", "Poppins", Impact, sans-serif;
  --display: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ease:    cubic-bezier(.22, .61, .36, 1);

  --container: 1180px;
  --radius:    16px;
  --radius-lg: 28px;
  --shadow:    0 1px 2px rgba(26,18,12,.05), 0 12px 34px rgba(26,18,12,.10);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--cream); color: var(--ink);
  /* The full-bleed rails use calc(50% - 50vw), and in engines where 100vw
     includes the scrollbar that bleed lands a few pixels past the viewport,
     opening a sliver of horizontal scroll (5px, WebKit). `clip` swallows it
     without creating a scroll container, so position: sticky keeps working -
     which overflow-x: hidden here would have broken. */
  overflow-x: clip;
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-deep); }

h1, h2, h3 { font-family: var(--brand); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 .5em; }
h4 { font-family: var(--display); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .4em; }
h1 { font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; }

.wrap { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 9vw, 7rem) 0; }
.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red); margin: 0 0 .9rem;
}
.lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--ink-soft); max-width: 46ch; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .95rem 1.7rem; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--display); font-weight: 700; font-size: 1rem; text-decoration: none;
  cursor: pointer; transition: transform .18s var(--ease), background .18s var(--ease);
}
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-deep); transform: translateY(-2px); }
.btn--ghost { border-color: currentColor; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.btn--amber { background: var(--amber); color: var(--char); }
.btn--amber:hover { background: var(--amber-deep); transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* ---- header ---- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  /* Was a translucent panel with a 10px backdrop blur. The blur made the bar
     washed out over the hero, and a backdrop-filter on a sticky element is
     re-rasterised on every scroll frame, which was a real part of the
     stutter. Solid colour reads better and costs nothing. */
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(26,18,12,.06);
}
.site-head__in { display: flex; align-items: center; gap: 1.5rem; padding: .7rem 0; }
.site-head__logo img { height: 46px; width: auto; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  color: var(--ink); text-decoration: none; padding: .35rem 0; position: relative;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--red); transition: right .25s var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current]::after { right: 0; }
.site-head__cta { margin-left: 1rem; }
.nav-toggle { display: none; }

@media (max-width: 62rem) {
  .site-nav, .site-head__cta { display: none; }
  .nav-toggle {
    display: inline-flex; margin-left: auto; padding: .6rem .9rem; cursor: pointer;
    background: var(--ink); color: var(--cream); border: 0; border-radius: 999px;
    font-family: var(--display); font-weight: 700;
  }
  .site-head.is-open .site-nav {
    display: block; position: absolute; inset: 100% 0 auto; padding: 1rem 1.25rem 1.5rem;
    background: var(--cream); border-bottom: 1px solid var(--line);
  }
  .site-head.is-open .site-nav ul { flex-direction: column; gap: .35rem; }
  .site-head.is-open .site-nav a { display: block; padding: .7rem 0; font-size: 1.1rem; }
}

/* ---- hero ---- */
.hero { position: relative; background: var(--char); color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  /* Weighted to the left, where the headline sits, and clearing to near
     nothing on the right so the food is actually visible. A flat 94%-to-30%
     wash over the whole frame was what made the hero read as a black box. */
  background:
    linear-gradient(100deg, rgba(16,12,9,.88) 0%, rgba(16,12,9,.62) 38%, rgba(16,12,9,.12) 72%, rgba(16,12,9,.04) 100%),
    linear-gradient(to top, rgba(16,12,9,.55) 0%, rgba(16,12,9,0) 45%);
}
.hero__in { position: relative; padding: clamp(4.5rem, 13vw, 9rem) 0 clamp(3.5rem, 8vw, 6rem); }
.hero h1 { color: #fff; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--amber); }
.hero__lede { color: rgba(255,255,255,.84); font-size: clamp(1.05rem, 1.8vw, 1.35rem); max-width: 46ch; margin: 0 0 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero .btn--ghost { color: #fff; }
.hero .btn--ghost:hover { background: #fff; color: var(--char); }

/* ---- stat strip ---- */
.stats { background: var(--red); color: #fff; }
.stats__in { display: grid; gap: 1.5rem; padding: clamp(2rem,4vw,3rem) 0; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.stat__n { font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1; }
.stat__l { font-size: .9rem; opacity: .9; margin-top: .35rem; }

/* ---- feature rows ---- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip .split__media { order: -1; }
}
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }


/* ---- callout ---- */
.callout { background: var(--char); color: #fff; border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.5rem); }
.callout h2 { color: #fff; }
.callout p { color: rgba(255,255,255,.8); }


/* ---- scroll reveal ---- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--cream); padding: .8rem 1.2rem;
}
.skip:focus { left: 0; }

/* ---- forms ---- */
.cf-form__row { margin-bottom: 1.1rem; }
.cf-form label {
  display: block; margin-bottom: .35rem;
  font-family: var(--display); font-weight: 600; font-size: .92rem;
}
.cf-form label span { color: var(--red); }
.cf-form input, .cf-form textarea, .cf-form select {
  width: 100%; padding: .85rem 1rem; font: inherit; color: var(--ink);
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
}
.cf-form input:focus-visible, .cf-form textarea:focus-visible, .cf-form select:focus-visible {
  outline: 3px solid var(--amber); outline-offset: 2px; border-color: var(--red);
}
.cf-form input:user-invalid, .cf-form textarea:user-invalid { border-color: var(--red); }
.cf-form textarea { resize: vertical; }
.form-status { margin: .9rem 0 0; font-weight: 600; }


/* ============================================================================
   MOTION
   ========================================================================= */


/* Hero art drifts against the scroll. Driven by a CSS variable the script
   sets, so with no script the image simply sits still and correct. */
.hero__media img { transform: translate3d(0, calc(var(--par, 0) * 1px), 0) scale(1.08); will-change: transform; }

/* Cards lift and warm on approach. */
.tilt { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tilt:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(26,18,12,.16); }

/* A running strip of the things people actually say about the food. */
.marquee {
  overflow: hidden; padding: 1.1rem 0; background: var(--char); color: #fff;
  border-block: 1px solid rgba(255,255,255,.1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; gap: 3rem; width: max-content;
  animation: marquee 48s linear infinite;
  will-change: transform;
}
/* An off-screen animation still costs compositing every frame. */
.marquee { content-visibility: auto; contain-intrinsic-size: auto 4rem; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--brand); font-size: clamp(1rem, 2vw, 1.35rem);
  white-space: nowrap; display: flex; align-items: center; gap: 3rem;
}
.marquee__item::after { content: "★"; color: var(--amber); font-size: .8em; }
@keyframes marquee { to { transform: translateX(-50%); } }



@media (prefers-reduced-motion: reduce) {
  .hero__media img { transform: scale(1.02) !important; }
  .marquee__track { animation: none; }
  .tilt { transition: none; }
}

/* The hero headline is set in the brand face at full display scale. */
.hero__title { font-size: clamp(3rem, 9vw, 7rem); line-height: .94; margin-bottom: .35em; }
.hero__lede { font-family: var(--brand); font-size: clamp(1.2rem, 2.6vw, 1.9rem); color: var(--amber); }

/* ============================================================================
   EDITORIAL — the About copy
   Long-form prose set as prose, not chopped into a grid of equal boxes. The
   heading sticks alongside while the text runs, which is what gives a wall of
   company copy somewhere to breathe.
   ========================================================================= */
.editorial { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 62rem) {
  .editorial { grid-template-columns: minmax(16rem, 22rem) 1fr; align-items: start; }
  .editorial__head { position: sticky; top: 7rem; }
}
.editorial__head h2 { margin-bottom: .6rem; }
.editorial__body { max-width: 62ch; }
.editorial__body p { margin: 0 0 1.35em; font-size: clamp(1.02rem, 1.35vw, 1.14rem); line-height: 1.72; }
/* The opening line carries the section, but it is still something a person has
   to read: the brand face is an ultra-bold display cut and a full paragraph set
   in it is work. Size and weight do the leading here, the readable sans does
   the reading. */
.editorial__body p:first-of-type {
  font-family: var(--sans);
  font-size: clamp(1.18rem, 1.9vw, 1.42rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 1.15em;
}
.editorial__rule { height: 1px; background: var(--line); margin: 2.25rem 0; }

/* ============================================================================
   RAIL — a draggable horizontal track, used for the team and the reviews
   ========================================================================= */
.rail { position: relative; }
.rail__head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.rail__nav { display: flex; gap: .6rem; }
.rail__btn {
  width: 3rem; height: 3rem; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.rail__btn:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #fff; }
.rail__btn:disabled { opacity: .35; cursor: default; }
.rail__btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

.rail__track {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; scrollbar-width: none;
  /* bleed to the viewport edge so the track reads as continuing off-screen */
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.25rem, calc(50vw - var(--container) / 2));
  /* Mandatory snapping aligns each card to the scrollport's start edge, which
     ignores padding and pulls the first card flush against the viewport.
     scroll-padding moves the snap line itself, so the gutter survives. */
  scroll-padding-inline: max(1.25rem, calc(50vw - var(--container) / 2));
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; flex: 0 0 auto; }
.rail.is-dragging .rail__track { scroll-snap-type: none; cursor: grabbing; }

/* A flex row stretches its items to the height of the tallest by default, so a
   two-line review was given the height of the longest one in the set and its
   attribution pushed to the bottom of all that empty card. Reviews now size to
   their own content. The team rail keeps the stretch: those cards carry a
   portrait each and read better as an even row. */
#rail-reviews .rail__track { align-items: flex-start; }

/* ---- team ---- */
.member { width: min(78vw, 20rem); }
.member__shot {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5; margin-bottom: 1.1rem; background: var(--cream-2);
}
.member__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.member:hover .member__shot img { transform: scale(1.05); }
/* The role sat almost on the baseline of the name. The display face has
   tight metrics, so a nominal gap reads as none at all. */
.member h3 { margin-bottom: .45rem; font-size: clamp(1.4rem, 2vw, 1.75rem); }
.member__role {
  color: var(--red); font-weight: 700; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .1em; margin: 0 0 .75rem;
}
.member p { color: var(--muted); font-size: .95rem; line-height: 1.6; margin: 0 0 .6em; }

/* ---- reviews ---- */
.review {
  width: min(80vw, 25rem); min-height: 13rem;
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 1.75rem 2rem; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .85rem;
}
.review__mark { font-family: var(--brand); font-size: 2.6rem; line-height: .7; color: var(--amber); margin-bottom: -.2rem; }
.review p { margin: 0; font-size: 1.08rem; line-height: 1.6; }
.review cite {
  font-style: normal; font-family: var(--display); font-weight: 700;
  font-size: .9rem; color: var(--muted); margin-top: .25rem; padding-top: 0;
}

/* ============================================================================
   GSAP-driven entrances. The elements are fully visible in CSS; the script only
   ever moves them. If it never runs, the page is simply static and complete.
   ========================================================================= */
.will-rise { will-change: transform, opacity; }

/* ============================================================================
   WEBGL HERO
   The canvas sits over the photograph. The photograph stays in the document and
   is only faded out once .has-gl confirms a frame was actually drawn, so a
   device without WebGL, a lost context or a failed module leaves the image
   exactly where it is.
   ========================================================================= */
.hero__gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .9s var(--ease); pointer-events: none;
}
/* Full strength: this canvas is drawing the photograph, so anything less
   than 1 was simply fading the hero image out. */
.hero.has-gl .hero__gl { opacity: 1; }
.hero.has-gl .hero__media img { opacity: 0; transition: opacity .9s var(--ease); }

/* ---- word-split headlines ----
   The wrapper is only ever added by script. Untouched markup renders as a
   normal heading, which is what a crawler and a no-JS visitor get. */
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word > span { display: inline-block; will-change: transform; }

/* ---- condensed masthead ---- */
.site-head { transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); }
.site-head.is-stuck {
  background: var(--cream);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(26,18,12,.06);
}
.site-head.is-stuck .site-head__in { padding: .35rem 0; }
.site-head.is-stuck .site-head__logo img { height: 38px; transition: height .35s var(--ease); }
.site-head__logo img { transition: height .35s var(--ease); }

/* Buttons are translated by the magnetic handler, so they must not also carry a
   transform of their own or the two fight. */
.btn:hover, .rail__btn:hover:not(:disabled) { transform: none; }

/* ---- footer ----
   Columns are auto-fit but each has a real minimum, so a short column cannot
   stretch to fill a track and leave a hole beside it. The brand block leads at
   a wider measure; the link columns sit tight together after it. */
.site-foot { background: var(--char); color: rgba(255,255,255,.72); padding: clamp(3rem,6vw,4.5rem) 0 1.75rem; }
.site-foot a { color: rgba(255,255,255,.72); text-decoration: none; transition: color .2s var(--ease); }
.site-foot a:hover { color: #fff; }
/* Explicit tracks. The previous rule was
     grid-template-columns: 1.4fr repeat(auto-fit, minmax(9rem, 1fr));
   which is invalid: an auto-fit repeat cannot sit in the same track list as a
   flexible `fr` track. The browser threw the whole declaration away and fell
   back to a single column, which is why every block stacked down the left and
   two thirds of the footer was empty. */
.site-foot__grid {
  display: grid; gap: 2rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr 1fr; align-items: start;
}
@media (min-width: 52rem) {
  .site-foot__grid { grid-template-columns: 2fr 1fr 1fr; }
}
.site-foot__brand img { height: 62px; width: auto; margin-bottom: 1rem; }
.site-foot__tel { margin: 0; font-family: var(--brand); font-size: 1.35rem; }
.site-foot__tel a { color: var(--amber); }
.site-foot__tel a:hover { color: #fff; }
.site-foot__col h4 {
  color: #fff; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 .9rem; font-family: var(--display);
}
.site-foot__col ul { list-style: none; margin: 0; padding: 0; }
.site-foot__col li { margin-bottom: .5rem; font-size: .95rem; }
.site-foot__base {
  margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.13);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .82rem; color: rgba(255,255,255,.5);
}
.site-foot__base p { margin: 0; }

/* While the team rail is driven by the page scroll, its own snapping and its
   arrow buttons would both fight the scrub, so they stand down. */
.rail.is-hijacked .rail__track { scroll-snap-type: none; overflow-x: hidden; }
.rail.is-hijacked .rail__nav { display: none; }



/* ============================================================================
   OPENING + 3D BAND
   The opening is clipped to nothing by default: it only covers the page once
   the head script has put .intro-running on <html>. Any failure in that script
   means the class is never added and nothing is ever hidden.
   ========================================================================= */
.intro {
  position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(120% 90% at 50% 45%, #241a12 0%, var(--char) 62%);
  /* Safe default: invisible and inert. visibility, not just opacity, so an
     un-armed overlay cannot sit over the page swallowing clicks. */
  opacity: 0; visibility: hidden; pointer-events: none;
}
html.intro-running .intro { opacity: 1; visibility: visible; pointer-events: auto; }
html.intro-running, html.intro-running body { overflow: hidden; }

/* The page itself is the panel's colour while the opening runs. Even in the
   frames before the overlay is parsed and composited there is nothing bright
   underneath to flash, which is what made the site appear for an instant and
   then get covered. */
html.intro-running { background: #14100c; }
html.intro-running body { background: #14100c; }

/* The opening's own contents arrive rather than appearing: the stage and the
   mark both fade up once the scene has a frame to show. */
.intro__stage, .intro__mark { opacity: 0; transition: opacity .55s var(--ease); }
.intro.is-ready .intro__stage, .intro.is-ready .intro__mark { opacity: 1; }

.intro__stage { position: absolute; inset: 0; }
.intro__mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(46vw, 280px); height: auto; z-index: 2;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.6));
}

@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } }


/* ---- cutouts behind the reviews ----
   The point is layering: the pieces sit in the same band as the cards and are
   partly covered by them, which is what gives the row depth. Big, soft, and
   low-contrast enough that the quotes stay the thing you read. */
.rail__bed { position: absolute; inset: -6% 0 -6%; pointer-events: none; z-index: 0; overflow: hidden; }
.rail__bed-piece {
  position: absolute; width: auto; opacity: .5;
  filter: drop-shadow(0 20px 40px rgba(26,18,12,.22));
}
/* Rotation lives in a custom property so the scroll offset can be folded into
   the same transform. Writing the offset straight to `transform` would drop the
   rotation, and a CSS transform would in turn override anything GSAP wrote:
   composing them here keeps both. */
.rail__bed-piece {
  transform: translate3d(0, var(--py, 0px), 0) rotate(var(--rot, 0deg));
  will-change: transform;
}
.rail__bed-piece--a { left: -4%;  top: 18%;  height: 62%; --rot: -9deg; }
.rail__bed-piece--b { left: 41%;  top: -6%;  height: 48%; --rot: 13deg; }
.rail__bed-piece--c { right: -5%; bottom: 2%; height: 66%; --rot: 6deg; }

/* The cards must sit over them, and stay opaque so the quotes read cleanly. */
#rail-reviews { position: relative; }
#rail-reviews .rail__track, #rail-reviews .rail__head { position: relative; z-index: 1; }

@media (max-width: 62rem) {
  .rail__bed-piece--b { display: none; }
  .rail__bed-piece { opacity: .3; }
}


/* ---- mosaic ----
   Five frames on an asymmetric grid: one tall, one wide, three square-ish. The
   irregularity is the point; an even row of five would read as a stock strip. */
.mosaic {
  display: grid; gap: clamp(.6rem, 1.2vw, 1rem);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 42vw;
}
@media (min-width: 56rem) {
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 15rem; }
  .mosaic__cell--tall { grid-row: span 2; }
  .mosaic__cell--wide { grid-column: span 2; }
}
.mosaic__cell {
  margin: 0; overflow: hidden; border-radius: var(--radius);
  background: var(--cream-2);
}
.mosaic__cell img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.mosaic__cell:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .mosaic__cell img { transition: none; } }

/* ---- footer, corporate register ---- */
.site-foot__col h4 { color: rgba(255,255,255,.5); }
.site-foot__col li { margin-bottom: .55rem; }
.site-foot__base { color: rgba(255,255,255,.4); font-size: .8rem; }

/* The trade marks. Knockouts on the panel itself, spaced generously and
   normalised to one optical height, so they read as a quiet row rather than a
   sponsor board. Each keeps its own aspect: only the height is shared. */
.site-foot__orgs {
  list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: clamp(1.75rem, 3vw, 2.25rem) 0 0;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.site-foot__orgs img {
  display: block; height: 26px; width: auto;
  opacity: .38; transition: opacity .25s var(--ease);
}
.site-foot__orgs li:hover img { opacity: .9; }
@media (max-width: 40rem) {
  .site-foot__orgs { gap: 1.75rem 2.25rem; justify-content: flex-start; }
  .site-foot__orgs img { height: 20px; }
}

/* A single frame beside the About copy, rather than a wall of thumbnails. */
.editorial__figure { margin: 1.75rem 0 0; border-radius: var(--radius); overflow: hidden; }
.editorial__figure img { width: 100%; height: auto; display: block; }
@media (max-width: 62rem) { .editorial__figure { max-width: 20rem; } }

/* One full-bleed plate between sections. */
.plate { position: relative; margin: 0; height: clamp(16rem, 32vw, 26rem); overflow: hidden; }
.plate img {
  width: 100%; height: 130%; object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0); will-change: transform;
}

/* ---- footer, tightened ----
   The block was 761px tall for three links and a phone number. Padding and the
   gaps between rows come down; the marks get the size they need to be legible
   rather than being shrunk to a uniform token height. */
.site-foot { padding: clamp(2.5rem, 4.5vw, 3.5rem) 0 1.5rem; }
.site-foot__brand img { height: 56px; margin-bottom: .85rem; }
.site-foot__tel { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.site-foot__col h4 { margin-bottom: .75rem; }
.site-foot__col li { margin-bottom: .4rem; }

.site-foot__orgs {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  /* Equal GAPS, not equal cells. Four equal grid tracks with each mark centred
     inside its own track looks even on paper and wrong on screen: the marks are
     different widths, so the space between them varies with every pairing. The
     narrow LOMA parked at the right of its track left a hole after PCMA roughly
     three times the gap after NACS.

     space-between distributes the leftover space evenly between the marks
     themselves, which is what the eye actually reads as even. Mobile switches
     to a grid below, where wrapping matters more than rhythm. */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-foot__orgs li {
  /* never shrink below the artwork: this is what collapsed the marks to zero
     width at 360px the first time round */
  flex: 0 0 auto;
  display: flex; align-items: center;
  height: 58px; 
}
/* Each mark sits in a box of the same height and is centred in it, so their
   centre lines agree no matter how different the artwork is. Only the cap
   inside that box varies, tuned per logo for optical weight: NACS is a fat
   wordmark that carries at a smaller size, MPMCSA has a line of small print
   under it and needs the room. Setting a single height on the images instead
   left them agreeing mathematically and disagreeing to the eye. */
.site-foot__orgs li {
  display: flex; align-items: center; justify-content: flex-start;
  height: 58px;
}
.site-foot__orgs img {
  height: auto; width: auto;
  max-height: 100%; max-width: 100%;
  object-fit: contain;
}
.site-foot__orgs img[alt="NACS"]   { max-height: 39px; }
.site-foot__orgs img[alt="MPMCSA"] { max-height: 57px; }
.site-foot__orgs img[alt="PCMA"]   { max-height: 44px; }
.site-foot__orgs img[alt="LOMA"]   { max-height: 52px; }
.site-foot__base { margin-top: clamp(1.5rem, 3vw, 2rem); padding-top: 1.1rem; }

/* ---- footer on small screens ----
   Two columns for the marks rather than four squeezed into 360px, and the
   brand block spans the full width above the link columns. */
@media (max-width: 40rem) {
  .site-foot__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
  .site-foot__brand { grid-column: 1 / -1; }
  .site-foot__brand img { height: 48px; }

  /* Small screens wrap to a two-up grid: four marks in a row at 360px is what
     collapsed them before. Rhythm matters less here than fitting. */
  .site-foot__orgs {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1rem; justify-content: stretch;
  }
  .site-foot__orgs li { height: 46px; justify-content: center; }
  .site-foot__orgs img { max-height: 34px; }
  .site-foot__orgs img[alt="MPMCSA"] { max-height: 46px; }
  .site-foot__orgs img[alt="LOMA"]   { max-height: 42px; }
  .site-foot__orgs img[alt="PCMA"]   { max-height: 38px; }

  .site-foot__base { flex-direction: column; gap: .4rem; }
}

/* ---- menu boards ---- */
.menu-boards { display: grid; gap: clamp(1rem, 2.5vw, 2rem); grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 52rem) { .menu-boards { grid-template-columns: 1fr 1fr; } }
.menu-board { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
.menu-board img { width: 100%; height: auto; display: block; transition: transform .6s var(--ease); }
.menu-board a:hover img { transform: scale(1.02); }
.menu-actions { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* ---- news list ---- */
.news { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.news__item {
  display: grid; gap: 1.25rem; align-items: start;
  padding-bottom: clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid var(--line);
}
@media (min-width: 46rem) { .news__item { grid-template-columns: 15rem 1fr; gap: 2rem; } }
.news__item:last-child { border-bottom: 0; }
.news__shot { border-radius: var(--radius); overflow: hidden; background: var(--cream-2); }
.news__shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 8/5; }
.news__date { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: .5rem; }
.news__title { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: .5rem; }
.news__body p { margin: 0; color: var(--muted); }
.recipe__body { white-space: pre-line; }

/* An article with no image must not be dealt into the image column: the body
   would land in the 15rem track and set itself in a gutter while the rest of
   the row sat empty. */
.news__item--noimg { grid-template-columns: 1fr !important; }
.news__item--noimg .news__body { max-width: 62ch; }

/* ============================================================================
   REVIEW TOASTS (desktop)
   The rail section is visible by default; html.has-toasts is only ever added
   by toasts.js in the same breath as starting the notes, so a script failure
   leaves the reviews where they were. Hidden means visually hidden: the
   section stays in the document for crawlers and screen readers.
   ========================================================================= */
@media (min-width: 62rem) {
  html.has-toasts #reviews {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    padding: 0; margin: 0;
  }
}

.cf-toasts {
  position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 80;
  pointer-events: none;
}
.cf-toast {
  pointer-events: auto;
  width: min(22rem, calc(100vw - 3rem));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(26,18,12,.10), 0 24px 60px rgba(26,18,12,.22);
  padding: 1.05rem 1.2rem 1.1rem;
  position: relative;
}
.cf-toast__close {
  position: absolute; top: .4rem; right: .55rem;
  border: 0; background: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--muted); padding: .25rem;
}
.cf-toast__close:hover { color: var(--ink); }
.cf-toast__stars { color: var(--amber); font-size: .85rem; letter-spacing: .12em; margin-bottom: .45rem; }
.cf-toast__stars span { display: inline-block; }

.cf-toast__text { position: relative; margin: 0 0 .55rem; font-size: .96rem; line-height: 1.55; }
.cf-toast__ghost { visibility: hidden; }                 /* sizes the card up front */
.cf-toast__typed { position: absolute; inset: 0; }
.cf-toast__caret {
  display: inline-block; width: 2px; height: 1em;
  background: var(--red); vertical-align: text-bottom; margin-left: 1px;
  animation: cf-caret .8s steps(1) infinite;
}
.cf-toast.is-signed .cf-toast__caret { display: none; }  /* pen down */
@keyframes cf-caret { 50% { opacity: 0; } }

.cf-toast__name {
  display: block; font-style: normal; font-family: var(--display);
  font-weight: 700; font-size: .85rem; color: var(--muted);
}

/* A page whose visual lead is not the document's h1 still needs a real h1. */
.h1--quiet { font-size: clamp(2rem, 4.6vw, 3.4rem); }

/* ---- nav submenu ----
   CSS-only: hover or keyboard focus anywhere in the item opens it, so it works
   for tab users without a line of script. The parent stays a real link. */
.site-nav li { position: relative; }
.site-nav__caret { font-size: .6em; margin-left: .3em; vertical-align: middle; opacity: .55; }
.site-nav__sub {
  position: absolute; top: 100%; left: -0.9rem; min-width: 11rem;
  margin: 0; padding: .5rem 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.site-nav .has-sub:hover .site-nav__sub,
.site-nav .has-sub:focus-within .site-nav__sub {
  opacity: 1; visibility: visible; transform: none;
}
.site-nav__sub a { display: block; padding: .5rem 1rem; }
.site-nav__sub a::after { display: none; }   /* no underline sweep inside the panel */
.site-nav__sub a:hover { background: var(--cream); }

@media (max-width: 62rem) {
  /* in the mobile panel the submenu is simply an indented row */
  /* .site-nav ul { padding: 0 } outranks a bare class, so the indent has to
     match its specificity or it silently loses. */
  .site-nav ul.site-nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; background: none; padding: 0 0 0 1.1rem; min-width: 0;
  }
  .site-nav__caret { display: none; }
  .site-nav__sub a { padding: .5rem 0; font-size: 1rem; }
}


/* the facebook slot stacks the plugin over its always-present fallback link */
.social__fb { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

/* ---- facebook brand card ----
   The guaranteed layer under the plugin: what a login-walled visitor sees. */
.fb-card {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1rem 1.5rem 1rem 1rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.fb-card:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(26,18,12,.14); }
.fb-card__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.fb-card__body { display: flex; flex-direction: column; gap: .15rem; }
.fb-card__body strong { font-family: var(--display); font-size: 1.1rem; color: var(--ink); }
.fb-card__body span { color: var(--muted); font-size: .9rem; }


/* ============================================================================
   SOCIAL BAND
   Header row with the handle and profile links; the two embeds side by side on
   an aligned grid. Heights are reserved per column before the third-party
   content arrives and released after, so nothing jumps.
   ========================================================================= */
.social-band { background: var(--cream-2); }
.social-band__head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.social-band__head h2 { margin-bottom: 0; }
.social-band__links { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.social-band__links a {
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--amber);
  padding-bottom: .15rem;
}
.social-band__links a:hover { color: var(--red-deep); border-color: var(--red); }

.social-band__grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 56rem) { .social-band__grid { grid-template-columns: 1fr 1fr; } }

.social-band__label {
  margin: 0 0 .75rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.social-band__slot { min-height: 24rem; display: flex; flex-direction: column; align-items: stretch; }
.social-band__col.is-loaded .social-band__slot { min-height: 0; }
.social-band__slot iframe { border-radius: var(--radius); }
.tiktok-embed, .instagram-media { border-radius: var(--radius); overflow: hidden; }

/* ============================================================================
   DISHES
   The plates are cutouts, so they float straight on the cream with a soft
   ground shadow instead of sitting in cards. Uncaptioned until the client
   supplies the dish names.
   ========================================================================= */
.dishes__head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.dishes__head h2 { margin-bottom: 0; }
.dishes__grid {
  display: grid; gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 56rem) { .dishes__grid { grid-template-columns: repeat(3, 1fr); } }
.dish { margin: 0; display: grid; place-items: center; }
.dish img {
  width: 100%; max-width: 22rem; height: auto;
  filter: drop-shadow(0 22px 28px rgba(26,18,12,.18));
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.dish:hover img {
  transform: translateY(-8px) rotate(1.2deg) scale(1.03);
  filter: drop-shadow(0 34px 42px rgba(26,18,12,.24));
}
@media (prefers-reduced-motion: reduce) { .dish img { transition: none; } }

/* ============================================================================
   MENU BOARD PAGE
   The boards' own design language: chalkboard dark, yellow display headings,
   red rules, dotted leaders. Everything is fully visible with no script; the
   animation layer only ever moves what is already rendered.
   ========================================================================= */
.page-menu main { background: #17130f; color: #f4efe6; }
.mb-eyebrow { color: var(--amber); }

.mb-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.mb-hero__in {
  display: grid; gap: 1.5rem 2.5rem; align-items: center;
  grid-template-columns: auto 1fr auto;
}
@media (max-width: 56rem) { .mb-hero__in { grid-template-columns: 1fr; } }
.mb-hero h1 { color: #fff; margin: 0; }
.mb-hero__badge { width: clamp(9rem, 14vw, 13rem); height: auto; filter: drop-shadow(0 12px 26px rgba(0,0,0,.5)); }

.mb-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(23,19,15,.94); backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.mb-nav__list {
  position: relative; display: flex; gap: .35rem;
  list-style: none; margin: 0; padding: .55rem 0; overflow-x: auto; scrollbar-width: none;
}
.mb-nav__list::-webkit-scrollbar { display: none; }
.mb-nav__list a {
  position: relative; z-index: 1; display: block;
  padding: .5rem 1.05rem; border-radius: 999px;
  font-family: var(--display); font-weight: 700; font-size: .92rem;
  color: rgba(255,255,255,.75); text-decoration: none; white-space: nowrap;
  transition: color .2s var(--ease);
}
.mb-nav__list a.is-active { color: var(--char); }
.mb-nav__pill {
  position: absolute; top: .55rem; left: 0; height: calc(100% - 1.1rem);
  width: 0; border-radius: 999px; background: var(--amber);
  z-index: 0;
}

.mb-board { position: relative; }
.mb-section { position: relative; padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.mb-section:nth-child(even) { background: rgba(255,255,255,.025); }
.mb-section__head { position: relative; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); max-width: 46rem; }
.mb-section h2 { color: #f2e11c; margin-bottom: .35rem; }
.mb-section__sub {
  margin: 0 0 .75rem; font-family: var(--display); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #fff; font-size: .95rem;
}
.mb-rule {
  display: block; height: 5px; border-radius: 3px; background: var(--red);
  transform-origin: left center;
}

.mb-garnish {
  position: absolute; right: -3%; top: 8%;
  width: clamp(11rem, 22vw, 20rem); height: auto; opacity: .92;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.5));
  transform: translate3d(0, var(--py, 0px), 0) rotate(6deg);
  pointer-events: none;
}
@media (max-width: 62rem) { .mb-garnish { display: none; } }

/* ---- item lists ---- */
.mb-items { list-style: none; margin: 0; padding: 0; max-width: 46rem; display: grid; gap: 1.35rem; }
.mb-item__row { display: flex; align-items: baseline; gap: .8rem; }
.mb-item__name {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: #fff; letter-spacing: .01em; text-transform: uppercase;
}
.mb-item__lead { flex: 1; border-bottom: 3px dotted rgba(255,255,255,.35); transform-origin: left center; }
.mb-price { font-family: var(--brand); font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: #fff; white-space: nowrap; }
.mb-price--sm { font-size: clamp(1rem, 1.4vw, 1.2rem); }
.mb-item__desc { margin: .25rem 0 0; color: rgba(244,239,230,.72); font-size: .95rem; }
.mb-item__variants { margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; }
.mb-variant em { font-style: normal; font-family: var(--display); font-weight: 700; color: #f2e11c; font-size: .9rem; text-transform: uppercase; margin-right: .35rem; }
.mb-item__deal {
  margin: .35rem 0 0; font-family: var(--display); font-weight: 700; font-size: .85rem;
  letter-spacing: .05em; text-transform: uppercase; color: #f2e11c;
}

/* ---- the chicken table ---- */
.mb-tablewrap { max-width: 46rem; overflow-x: auto; }
.mb-table { width: 100%; border-collapse: collapse; }
.mb-table th, .mb-table td { padding: .7rem .9rem; text-align: left; }
.mb-table thead th {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: .9rem; color: #f2e11c;
  border-bottom: 3px solid var(--red);
}
.mb-table tbody th {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  color: #f2e11c; font-size: clamp(1rem, 1.5vw, 1.2rem);
}
.mb-table tbody tr { border-bottom: 1px dotted rgba(255,255,255,.18); }
.mb-na { color: rgba(255,255,255,.3); }
.mb-note {
  margin: .9rem 0 0; font-family: var(--display); font-weight: 700; font-size: .85rem;
  letter-spacing: .05em; text-transform: uppercase; color: #f2e11c; max-width: 46rem;
}

.mb-tagline {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  font-family: var(--brand); font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--red); letter-spacing: .01em;
}

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

/* ============================================================================
   MENU FX LAYER
   Overlays and idle states for menu-fx.js. All decoration: pointer-events
   none, aria-hidden, and inert without the script.
   ========================================================================= */
.mbfx-embers {
  position: fixed; inset: 0; z-index: 5;
  pointer-events: none;
}
.mbfx-light {
  /* Unitless on purpose: the script writes plain numbers and the gradient
     multiplies by 1px. A vw default here made GSAP adopt vw as the unit, and
     calc(300vw * 1px) is invalid - the light silently died. */
  --mx: 720; --my: 400;
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(34rem 34rem at calc(var(--mx) * 1px) calc(var(--my) * 1px),
              rgba(255, 183, 3, 0.075), transparent 70%);
  mix-blend-mode: screen;
}
/* the overlays belong to the dark board only */
body:not(.page-menu) .mbfx-embers, body:not(.page-menu) .mbfx-light { display: none; }

.mb-nav__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--red), var(--amber));
  transform-origin: left center; transform: scaleX(0);
}

/* the badge hangs on a nail: slow sway at rest, extra roll from scroll */
.mb-hero__badge { --roll: 0; transform-origin: 50% 12%; }
.mb-hero__badge.is-idle {
  animation: mbfx-sway 6.5s ease-in-out infinite;
}
@keyframes mbfx-sway {
  0%, 100% { rotate: calc(var(--roll) * 1deg - 2.5deg); }
  50%      { rotate: calc(var(--roll) * 1deg + 2.5deg); }
}

/* garnish plates breathe on top of their scroll drift */
.mb-garnish.is-idle { animation: mbfx-bob 7s ease-in-out infinite alternate; }
@keyframes mbfx-bob {
  from { transform: translate3d(0, calc(var(--py, 0px) - 7px), 0) rotate(5deg); }
  to   { transform: translate3d(0, calc(var(--py, 0px) + 7px), 0) rotate(7.5deg); }
}

/* (the flame strip is gone: the fire moved into the footer as the grill) */

/* micro-interactions at rest: rows respond to the hand */
.mb-item__row { transition: transform .25s var(--ease); }
.mb-item:hover .mb-item__row { transform: translateX(6px); }
.mb-item:hover .mb-item__lead { border-bottom-color: rgba(255, 183, 3, .75); }
.mb-item:hover .mb-item__row .mb-price { color: var(--amber); }
.mb-item__lead, .mb-item__row .mb-price { transition: border-color .25s var(--ease), color .25s var(--ease); }
.mb-table tbody tr { transition: background .2s var(--ease); }
.mb-table tbody tr:hover { background: rgba(255, 183, 3, .07); }

@media (prefers-reduced-motion: reduce) {
  .mb-hero__badge.is-idle, .mb-garnish.is-idle { animation: none; }
}


/* ============================================================================
   THE THEATRE
   Desktop rendering of /menu: the client's three menu boards rebuilt as
   layered stages. A shared chalk backdrop covers the viewport, art planes
   sit on a 1900x1339 stage scaled to fit, and the photo columns bleed off
   the viewport edges exactly as they bleed off the printed boards.
   Activated by html.fx-theatre (set inline on menu.php, watchdogged); the
   vertical board below remains the accessible rendering.
   ========================================================================= */
.mb-theatre { display: none; }
html.fx-theatre .mb-theatre { display: block; --ts: .68; }
html.fx-theatre .mb-board {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* no pinning: each board is one tall screen that scrolls past naturally;
   the pinned version parked the page at every act and felt like scroll-jack */
.act { position: relative; height: 115vh; }
.act__pin {
  position: absolute; inset: 0; overflow: hidden;
  background: #17130f;
}
.act__chalk {
  position: absolute; inset: -4%;
  background: url("/assets/img/menu/theatre/chalk.jpg") center / cover no-repeat;
  will-change: transform;
}
.act__stage {
  position: absolute; left: 50%; top: calc(50% + var(--mast, 0px) / 2);
  width: 1900px; height: 1339px;
  --tx: 0px; --ty: 0px;
  transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(var(--ts, .68));
  will-change: transform;
}
.act__marker { position: absolute; left: 0; width: 1px; height: 1px; }

.tp { position: absolute; height: auto; will-change: transform, opacity; }

/* photo columns and the logo bleed off the viewport, not the stage */
.act__bleed { position: absolute; width: calc(var(--bw) * var(--ts, .68) * 1px); will-change: transform, opacity; }
.act__bleed img { display: block; width: 100%; height: auto; }
.act__bleed--r  { right: 0; top: calc(50% + var(--mast, 0px) / 2); transform: translateY(-50%); }
.act__bleed--l  { left: 0; top: calc(50% + var(--mast, 0px) / 2); transform: translateY(-50%); }
.act__bleed--tl { left: 0; top: var(--mast, 0px); }
.act__twinkle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.act__twinkle circle { fill: #fff; opacity: 0; }

/* ---- live board type: heavy, tight, uppercase, like the printed boards ---- */
.mb-theatre { font-family: var(--display); text-transform: uppercase; color: #fff; }
.t-dots {
  flex: 1; height: 14px; transform-origin: left center;
  background-image: radial-gradient(circle at 2px 2px, #fff 1.7px, transparent 2px);
  background-size: 12px 12px; background-repeat: repeat-x; background-position: 0 100%;
}

/* act 1 rows (coordinates from the breakfast board) */
.t1-row { position: absolute; left: 69px; width: 1050px; height: 100px; }
.t1-row__title { font-weight: 900; font-size: 33px; line-height: 1; white-space: nowrap; }
.t1-row__dline { position: absolute; top: 39px; left: 0; right: 170px; display: flex; align-items: flex-end; gap: 12px; }
.t1-row__desc { font-weight: 900; font-size: 22px; line-height: 1; white-space: nowrap; }
.t1-row__price { position: absolute; top: 16px; right: 0; font-weight: 900; font-size: 50px; line-height: 1; }
.t1-row__sub { position: absolute; top: 70px; right: 170px; font-weight: 900; font-size: 21px; line-height: 1; color: #f2e11c; }
.t1-srow { position: absolute; left: 70px; width: 562px; height: 40px; display: flex; align-items: flex-end; gap: 12px; }
.t1-srow__title { font-weight: 900; font-size: 19px; line-height: 1; white-space: nowrap; }
.t1-srow .t-dots { margin-right: 78px; height: 12px;
  background-image: radial-gradient(circle at 2px 2px, #fff 1.5px, transparent 1.9px);
  background-size: 11px 11px; }
.t1-srow__price { position: absolute; right: 0; bottom: -6px; font-weight: 900; font-size: 25px; line-height: 1; }

/* act 2: the chicken table lands beside the combo chips baked into the card */
.t2-col { position: absolute; transform: translateX(-50%); font-weight: 900; font-size: 26px; line-height: 1; color: #f2e11c; white-space: nowrap; }
.t2-pc { position: absolute; font-weight: 900; font-size: 30px; line-height: 1; color: #f2e11c; }
.t2-price { position: absolute; font-weight: 900; font-size: 30px; line-height: 1; }
.t2-lrow { position: absolute; left: 85px; width: 641px; display: flex; align-items: flex-end; gap: 12px; }
.t2-lrow__title { font-weight: 900; font-size: 23px; line-height: 1; white-space: nowrap; }
.t2-lrow .t-dots { height: 12px; margin-bottom: 3px; }
.t2-lrow__price { font-weight: 900; font-size: 29px; line-height: 1; }

/* act 3: extras, two columns */
.t3-rule { position: absolute; height: 13px; background: #e2231a; transform-origin: left center; }
.t3-item { position: absolute; width: 500px; }
.t3-item__name { font-weight: 900; font-size: 31px; line-height: 1.12; white-space: nowrap; }
.t3-item[style*="width"] .t3-item__name { white-space: normal; }
.t3-item__vars { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 40px; align-items: baseline; }
.t3-var { white-space: nowrap; }
.t3-var em { font-style: normal; font-weight: 900; font-size: 25px; color: #f2e11c; }
.t3-var b { font-weight: 900; font-size: 30px; }
.t3-dots { display: inline-block; width: 52px; height: 11px; margin: 0 8px;
  background-image: radial-gradient(circle at 2px 2px, #fff 1.5px, transparent 1.9px);
  background-size: 11px 11px; background-repeat: repeat-x; background-position: 0 100%; }
.t3-item__deal { margin-top: 8px; font-weight: 900; font-size: 20px; color: #e2231a; }
.t3-item__deal { text-shadow: 0 0 14px rgba(0,0,0,.6); }
.t3-item--inline { display: flex; align-items: baseline; }
.t3-item--inline .t3-dots { flex: 1; width: auto; }
.t3-item__price { font-weight: 900; font-size: 30px; }
.t3-tag { position: absolute; left: 1360px; top: 1000px; width: 450px; text-align: right; line-height: 1; }
.t3-tag span { display: block; }
.t3-tag__a { font-weight: 900; font-size: 31px; color: #f2e11c; }
.t3-tag__a b { color: #e2231a; font-size: 44px; }
.t3-tag__b { font-weight: 900; font-size: 78px; color: #e2231a; margin-top: 4px; letter-spacing: .01em; }
.t3-tag__c { font-weight: 900; font-size: 26px; color: #f2e11c; margin-top: 6px; }
/* (the board's white flame edge was cut: it duplicated the footer grill) */

@media (prefers-reduced-motion: reduce) {
  .mb-theatre { display: none !important; }
}


/* ============================================================================
   THE GRILL
   On the menu page the footer is a charcoal grill: a canvas coal bed burns
   behind the content and flames lick up through a grate at the very bottom
   edge of the page. Reduced motion gets a still, glowing bed.
   ========================================================================= */
.grill {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(230px, 30vh, 320px);
  background: linear-gradient(180deg, #17130f 0%, #0a0806 70%);
}
.grill-fire {
  position: absolute; left: 0; bottom: 16px; width: 100%; height: 270px;
  display: block; pointer-events: none; z-index: 1;
  mix-blend-mode: screen;          /* the flames sit into the band colour */
}
.grill-grate {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(90deg, #2a231b 0 9px, #060403 9px 16px);
  box-shadow:
    inset 0 2px 0 rgba(255, 190, 110, .22),
    inset 0 -6px 10px rgba(0, 0, 0, .9),
    0 -14px 26px rgba(255, 77, 6, .20);
}
.grill-grate::after {              /* front rail */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  background: linear-gradient(180deg, #3a3025, #0a0705);
}
@media (max-width: 720px) {
  .grill { height: 200px; }
  .grill-fire { height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .grill-fire { mix-blend-mode: normal; }
}


/* ============================================================================
   BOARD ARTWORK
   The vertical board (phones, no-JS, reduced motion, crawlers) dressed in
   the menu boards' own art: word-art headings, the chick on the rules,
   photo banners, the pile, the taglines. Real headings stay in the DOM.
   ========================================================================= */
.mb-banner {
  margin: 0 0 clamp(1.25rem, 4vw, 2rem); border-radius: 12px; overflow: hidden;
}
.mb-banner img {
  /* natural aspect: these crops carry speech-bubble text baked into the
     artwork, and any object-fit cropping slices it at some screen width */
  display: block; width: 100%; height: auto;
}
.mb-arthead { display: block; width: 72vw; height: auto; }
.mb-artrule { display: flex; align-items: flex-end; gap: 2px; margin-top: .6rem; }
.mb-artrule__bar {
  flex: 1; height: 8px; margin-bottom: 4px; background: #e02b20; border-radius: 2px;
}
.mb-artrule-img { display: block; width: min(100%, 420px); height: auto; margin-top: .5rem; }
.mb-chickie { width: 30px; height: auto; transform-origin: 50% 100%; }
.mb-chickie { animation: mb-peck 5.5s ease-in-out infinite; }
@keyframes mb-peck {
  0%, 62%, 100% { transform: none; }
  68% { transform: rotate(-6deg) translateY(-3px); }
  74% { transform: rotate(4deg); }
  80% { transform: rotate(-3deg) translateY(-2px); }
  86% { transform: none; }
}
.mb-decor {
  display: flex; align-items: flex-end; justify-content: center; gap: 1.5rem;
  margin-top: clamp(1.5rem, 5vw, 2.5rem);
}
.mb-decor img { height: auto; }
.mb-pilewrap { position: relative; margin-top: clamp(1.5rem, 5vw, 2.5rem); }
.mb-pile { display: block; width: min(100%, 560px); height: auto; margin: 0 auto; }
.mb-tasteart {
  position: absolute; right: 4%; bottom: 6%;
  width: clamp(180px, 40%, 260px); height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
}
@media (prefers-reduced-motion: reduce) {
  .mb-chickie { animation: none; }
}


/* ============================================================================
   PARTNERS PAGE
   ========================================================================= */
.cf-form__split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 40rem) { .cf-form__split { grid-template-columns: 1fr; } }

.plinks { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 46rem) { .plinks { grid-template-columns: 1fr; } }
.plink {
  position: relative; display: block; padding: 1.6rem 3.4rem 1.6rem 1.6rem;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
  text-decoration: none; color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.plink:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.10); }
.plink h3 { margin: 0 0 .35rem; }
.plink p { margin: 0; color: rgba(0,0,0,.62); font-size: .95rem; line-height: 1.55; }
.plink__go {
  position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%);
  font-size: 1.35rem; color: var(--red); transition: transform .25s var(--ease);
}
.plink:hover .plink__go { transform: translateY(-50%) translateX(4px); }


/* the brand line under the footer mark */
.site-foot__tagline {
  margin: .9rem 0 0; font-family: var(--display); font-weight: 600;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.cf-locator__lede { margin: .5rem 0 0; color: rgba(32,21,3,.65); max-width: 46ch; }


.mb-hero__lede { margin: .5rem 0 0; color: rgba(255,255,255,.72); font-size: 1.05rem; }


/* ============================================================================
   B2C HOMEPAGE SECTIONS
   The brand band, the Mild vs Hot 'N Spicy chooser, the stop band, and the
   badge in the hero. All content is visible without any script; the floats
   are CSS keyframes that reduced motion turns off.
   ========================================================================= */

/* the starburst hangs in the hero */
.hero__badge {
  position: absolute; z-index: 3;
  right: clamp(1rem, 6vw, 6rem); top: clamp(4.5rem, 12vh, 8rem);
  width: clamp(150px, 17vw, 260px); height: auto;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.45));
  transform-origin: 50% 8%;
  animation: cf-sway 7s ease-in-out infinite;
}
@keyframes cf-sway {
  0%, 100% { transform: rotate(-2.2deg); }
  50%      { transform: rotate(2.2deg); }
}
@media (max-width: 52rem) { .hero__badge { display: none; } }

/* Bold. Golden. Creole. */
.brand-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: #17130f url("/assets/img/menu/theatre/chalk.jpg") center / cover no-repeat;
  padding: clamp(4rem, 10vw, 7.5rem) 0;
}
.brand-band::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(10, 8, 6, .45);
}
.brand-band__in { position: relative; z-index: 2; text-align: center; }
.brand-band__w {
  display: inline-block; font-family: var(--brand); line-height: .95;
  font-size: clamp(3rem, 8.5vw, 6.8rem); letter-spacing: -.01em;
  margin: 0 .18em;
}
.brand-band__w--gold  { color: #f2e11c; transform: rotate(-1.6deg); }
.brand-band__w--cream { color: var(--cream, #f5ede1); }
.brand-band__w--red   { color: #e02b20; transform: rotate(1.4deg); }
.brand-band__line {
  margin: 1.4rem 0 0; color: rgba(255,255,255,.75);
  font-family: var(--display); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; font-size: clamp(.78rem, 1.4vw, .95rem);
}
.brand-band__pc {
  position: absolute; z-index: 1; height: auto; pointer-events: none;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.5));
  animation: cf-float 9s ease-in-out infinite;
}
.brand-band__pc--a { width: clamp(130px, 17vw, 250px); left: -3%; top: 8%; transform: rotate(-14deg); }
.brand-band__pc--b { width: clamp(120px, 15vw, 220px); right: -2%; top: 16%; transform: rotate(18deg); animation-delay: -3s; }
.brand-band__pc--c { width: clamp(110px, 13vw, 200px); right: 12%; bottom: -12%; transform: rotate(-8deg); animation-delay: -6s; }
@keyframes cf-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}

/* the chooser */
.mood__head { margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.mood { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (max-width: 52rem) { .mood { grid-template-columns: 1fr; } }
.mood__card {
  position: relative; overflow: hidden; border-radius: 18px;
  min-height: clamp(300px, 34vw, 420px);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; justify-content: flex-start;
}
.mood__card--mild { background: #e8920a; color: #201503; }
.mood__card--hot  { background: #2a1210; color: #fff; }
.mood__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.mood__card:hover .mood__bg { transform: scale(1.045); }
.mood__card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.mood__card--mild::after {
  background: linear-gradient(100deg, rgba(240,160,20,.94) 0%, rgba(240,160,20,.62) 42%, rgba(240,160,20,0) 72%);
}
.mood__card--hot .mood__bg { object-position: 62% 42%; }
.mood__card--hot::after {
  background: linear-gradient(100deg, rgba(30,8,6,.92) 0%, rgba(30,8,6,.55) 42%, rgba(30,8,6,0) 72%);
}
.mood__copy { position: relative; z-index: 2; max-width: 58%; }
.mood__card h3 {
  font-family: var(--brand); font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: .95; margin: 0 0 .5rem;
}
.mood__card--hot h3 { color: #f2e11c; }
.mood__card p { margin: 0; font-size: clamp(.95rem, 1.6vw, 1.08rem); line-height: 1.5; }
.mood__card--mild p { color: rgba(32,21,3,.82); }
.mood__card--hot p { color: rgba(255,255,255,.85); }
.mood__after {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem, 3.5vw, 2.75rem);
  align-items: center; margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
@media (max-width: 52rem) { .mood__after { grid-template-columns: 1fr; } }
.mood__after img { width: 100%; height: auto; border-radius: 14px; }
.mood__note { margin: 0; max-width: 58ch; }

/* the stop band */
.stop-band {
  position: relative; overflow: hidden;
  background: #17130f url("/assets/img/menu/theatre/chalk.jpg") center / cover no-repeat;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
}
.stop-band::before { content: ""; position: absolute; inset: 0; background: rgba(10,8,6,.5); }
.stop-band__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 56rem) { .stop-band__grid { grid-template-columns: 1fr; } }
.stop-band__in { position: relative; z-index: 2; }
.stop-band__photo { margin: 0; transform: rotate(2.4deg); }
.stop-band__photo img {
  width: 100%; height: auto; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.stop-band h2 { color: #fff; font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: .5em; }
.stop-band__line { color: rgba(255,255,255,.75); max-width: 52ch; margin: 0; }
.stop-band__rule { max-width: 420px; margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .hero__badge, .brand-band__pc { animation: none; }
}


/* ============================================================================
   DAILY DEALS
   The six deal badges (client artwork). Today's badge leads with a ribbon;
   the coin version rolls in from the edge of the homepage and menu page.
   ========================================================================= */
.deals-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start;
}
@media (max-width: 60rem) { .deals-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 38rem) { .deals-grid { grid-template-columns: 1fr; } }
.deal-card {
  position: relative; margin: 0; text-align: center;
  transition: transform .3s var(--ease);
}
.deal-card:nth-child(odd)  { rotate: -1.6deg; }
.deal-card:nth-child(even) { rotate: 1.4deg; }
.deal-card:hover { transform: translateY(-6px) scale(1.03); }
.deal-card img {
  width: 100%; max-width: 360px; height: auto;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.18));
}
.deal-card__day {
  display: block; margin-top: .7rem;
  font-family: var(--display); font-weight: 800; font-size: .95rem;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(32,21,3,.6);
}
.deal-card--today img { filter: drop-shadow(0 18px 40px rgba(224,43,32,.35)); }
.deal-card--today .deal-card__day { color: var(--red, #e02b20); }
.deal-card__ribbon {
  position: absolute; z-index: 2; top: 6%; left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  background: #201503; color: #f2e11c;
  font-family: var(--display); font-weight: 800; font-size: .85rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .35rem .9rem; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.deals-note { margin-top: clamp(1.75rem, 4vw, 2.5rem); color: rgba(32,21,3,.65); }

/* the coin: today's deal rolls in from the right edge and settles */
.deal-peek {
  position: fixed; right: 18px; bottom: 20px; z-index: 55;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
}
.deal-peek__coin {
  display: block; width: clamp(104px, 12vw, 150px); height: auto;
  border-radius: 50%;
  animation: deal-roll 1.7s cubic-bezier(.23, 1.1, .32, 1) 1.4s both;
  transition: transform .3s var(--ease);
}
.deal-peek__coin img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.35));
  /* every few seconds the coin gives a little ring-ring to catch the eye */
  animation: deal-nudge 7s ease-in-out 4.2s infinite;
  transform-origin: 50% 60%;
}
@keyframes deal-nudge {
  0%, 82%, 100% { transform: none; }
  84% { transform: rotate(7deg) scale(1.03); }
  87% { transform: rotate(-6deg); }
  90% { transform: rotate(4deg) scale(1.02); }
  93% { transform: rotate(-2deg); }
  96% { transform: none; }
}
.deal-peek__coin:hover { transform: scale(1.07) rotate(4deg); }
@keyframes deal-roll {
  0%   { transform: translateX(220%) rotate(-660deg); }
  70%  { transform: translateX(-5%) rotate(14deg); }
  85%  { transform: translateX(2%) rotate(-6deg); }
  100% { transform: none; }
}
.deal-peek__tag {
  order: -1;
  background: var(--red, #e02b20); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .8rem; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0,0,0,.3);
  animation: deal-tag .5s ease .1s both;
  animation-delay: 2.6s;
}
@keyframes deal-tag {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.deal-peek__close {
  position: absolute; top: 14px; right: -6px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%; border: 0;
  background: #201503; color: #fff; font-size: 15px; line-height: 1;
  cursor: pointer; opacity: 0;
  animation: deal-tag .4s ease 3s both;
}
/* phones get a compact coin: no tag pill, smaller face, tighter corner */
@media (max-width: 40rem) {
  .deal-peek { right: 12px; bottom: 14px; gap: .3rem; }
  .deal-peek__coin { width: 92px; }
  .deal-peek__tag { display: none; }
  .deal-peek__close { top: -4px; right: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .deal-peek__coin, .deal-peek__coin img, .deal-peek__tag, .deal-peek__close,
  .deal-card--today img { animation: none; opacity: 1; }
}

/* today's badge on the deals page nudges too */
.deal-card--today img { animation: deal-nudge 8s ease-in-out 3s infinite; transform-origin: 50% 55%; }

/* footer social icons */
.site-foot__social {
  display: flex; gap: 1rem; list-style: none; margin: 1.1rem 0 0; padding: 0;
}
.site-foot__social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.site-foot__social a:hover { background: var(--red, #e02b20); color: #fff; transform: translateY(-3px); }

/* facebook + instagram share the latest-news band */
.social-latest { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 52rem) { .social-latest { grid-template-columns: 1fr; } }


/* the social band as our own cards (fed by scripts/social-fetch.php) */
.social-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
@media (max-width: 62rem) { .social-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .social-cards { grid-template-columns: 1fr; } }
.social-card {
  position: relative; display: block; overflow: hidden; border-radius: 14px;
  aspect-ratio: 4 / 5; background: #111;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.social-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.social-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.social-card:hover img { transform: scale(1.05); }
.social-card__badge {
  position: absolute; top: .7rem; left: .7rem;
  background: rgba(0,0,0,.72); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 999px;
}
.social-card__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0,0,0,.55);
}
.social-card__play::after {
  content: ""; position: absolute; left: 55%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.social-card__title {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .8rem .7rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
  color: #fff; font-size: .82rem; line-height: 1.35;
}

/* the same lock at the html level: a transformed or animated element that
   pokes past the edge must never make the page pannable sideways */
html { overflow-x: clip; }

/* the homepage band, single Instagram embed centered */
.social-band__solo { max-width: 540px; margin: 0 auto; }