/* ============================================================
   FMC — ARIZONA EDITION · override layer
   Loads LAST on every page; wins by cascade order alone.
   Do not add !important. Do not bump specificity.
   ============================================================ */

/* ---- 0 · ARIZONA CONSTANTS ------------------------------- */
:root {
  --az-red:        #BF0A30;
  --az-gold:       #FCA434;
  --az-blue:       #002868;
  --az-blue-lift:  #1E4CA1;
  --az-copper:     #CE5C17;
  --az-gold-light: #F2E0A8;
  --az-gold-tame:  #EAD199;
  --az-gold-deep:  #E6AD3F;
  --az-gold-dark:  #D99E2B;
  --az-wine:       #821234;
  --vinyl:         #26262B;
  --film-grey-1:   #3A3A41;
  --film-grey-2:   #2C2C33;
  --grad-az:       linear-gradient(135deg, #BF0A30 0%, #711140 52%, #002868 100%);
  --grad-bottom:   linear-gradient(90deg,  #8F0824 0%, #3A1140 48%, #0E2148 100%);
}

/* ---- 1 · THE BADGE — official 2026 logo ------------------- */
.fmc-badge {
  display: inline-block;
  background: url("../img/fmc-badge-sm.png") center / contain no-repeat;
  flex: none;
}
.fmc-badge--mini  { width: 46px; height: 37px; }
/* hero h1 spacing for the badge — lives HERE, not inline (wins over
   sb-home's 0.15em/0.3em by cascade order, same specificity) */
.hero__title { margin-block: 0.2em 0.35em; }
.fmc-badge--title {
  display: block;
  width: clamp(250px, 34vw, 420px);
  aspect-ratio: 908 / 716;
  filter: drop-shadow(0 14px 26px rgba(18, 35, 75, 0.32));
}
@media (prefers-reduced-motion: no-preference) {
  /* powered-sign entrance: disc-in, then the marquee-bulb flicker the
     old F·M·C letters used — warms up irregular, ends fully on. */
  .fmc-badge--title {
    animation:
      home-disc-in 0.9s var(--ease-out) both,
      home-bulb-flicker 0.9s steps(1, end) 1.30s 1 both;
  }
}
.sb-static .fmc-badge--title { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ---- 2 · GOLD SURFACES — every cream background melts gold - */
body          { background: var(--az-gold-tame); }
.site-header  { background: linear-gradient(180deg, #F6E8BE 0%, #F2E0A8 100%); }
.hero         { background: linear-gradient(180deg, #F2E0A8 0%, #EAD199 45%, #E6AD3F 100%); }
.band--cream  { background: linear-gradient(180deg, #E6AD3F 0%, #EAD199 40%, #EAD199 60%, #E6AD3F 100%); }
.band--cream-2{ background: linear-gradient(180deg, #EAD199 0%, #E6AD3F 100%); }
.stage--cream { background: linear-gradient(180deg, #E6AD3F 0%, #F0C468 100%); }
.stage--amber { background: linear-gradient(180deg, var(--c-peach-2) 0%, #D99E2B 100%); }
/* ---- melt pass (Jude 07-27): same-family boundaries merge, never step.
   rooms-hero now LANDS on deep gold so the mustard band below can melt
   out of it; the mustard band rises to bright gold and falls back to
   deep gold (edges merge both ways, inset strip-shadows off); join's
   offer band starts on the hero's end color instead of stepping down. */
.rooms-hero   { background: linear-gradient(180deg, #F2E0A8 25%, #E6AD3F 100%); }
.band--mustard {
  background: linear-gradient(180deg, #E6AD3F 0%, #FCA434 24%, #FCA434 76%, #E6AD3F 100%);
  box-shadow: none;
}
.jn-offer     { background: linear-gradient(180deg, #E6AD3F 0%, #EAD199 38%, #E6AD3F 100%); }
/* kill the inter-band + room hairlines: on the old cream design a 2px navy
   rule separated stacked bands; on gold-on-gold melts it reads as a seam
   line. Harmless to drop on the dark clean-cuts too (a melt or an obvious
   cut both look better without it). Geometry only; selectors untouched. */
.band + .band { border-top-width: 0; }
.room         { border-block-width: 0; }
.rooms-hero   { border-bottom-width: 0; }
.sb-nav .site-nav { background: linear-gradient(180deg, #F0DDAB 0%, #EAD199 140%); }
/* cards, plates and tiles STAY cream (var(--paper)) — do not recolor them. */

/* ---- 3 · SIGNATURE GRADIENTS — rationed to the big moments - */
.band--cocoa {
  background: linear-gradient(180deg, #091430 0%, #0E2148 16%, #3A1140 52%, #8F0824 100%);
}
.marquee                { background: var(--grad-bottom); border-block: 0; }
/* mid-page gold tickers (events + join) — the grad-bottom belongs ONLY to
   the bottom block. .marquee--mustard stays an Arizona-gold strip with navy
   type (7.7:1) and keeps its hairline edges for a crisp cut between gold
   bands. (Jude 07-27: its navy text was vanishing into the dark gradient.) */
.marquee--mustard {
  background: var(--music);
  color: var(--ink);
  border-block: 2px solid var(--hair);
}
.band--avocado          { background: var(--grad-bottom); box-shadow: none; }
/* ^ every .band--avocado in the site is a bottom CTA (index/rooms/events/
   join) — unifying them on grad-bottom makes CTA→footer seamless on all
   four pages, one continuous bottom block exactly like the homepage. */
.site-footer            { background: var(--grad-bottom); }
.tile--host             { background: linear-gradient(160deg, #8F0824 0%, #3A1140 45%, #0E2148 100%); }
.stage__wash--dusk {
  background: linear-gradient(180deg,
    var(--c-orange-ink) 0%, var(--c-cocoa-2) 42%, var(--c-cocoa-2) 58%,
    #5C1030 82%, #821234 100%);
}
.act--studio, .act--stage { background: #821234; }   /* subpixel seam guard */
/* same guard for the film act — both its edges sit on deep gold (the crafts
   band ends there, the studio starts there), so a half-pixel crack at either
   boundary shows deep gold instead of the body's lighter gold. Only visible
   once the act flows (< 1024px); harmless behind a pinned stage. */
.act--film { background: var(--c-peach-2); }
/* under 1024px the acts flow instead of pinning (sb-home FLOW TIER), so
   each act's own bottom edge is on screen and has to be the next act's
   exact start colour. The wine close above only lands against a comedy
   act whose navy hasn't come up yet; flowing, that navy is already full
   (sb-home holds it there), so the dusk wash ends on the same navy.
   Cascade order alone — no !important, no added specificity. */
@media (max-width: 1023px) {
  .stage__wash--dusk {
    background: linear-gradient(180deg,
      var(--c-orange-ink) 0%, var(--c-cocoa-2) 42%, var(--c-cocoa-2) 58%,
      #0D1B3D 100%);
  }
}

/* ---- 4 · FILM = GREY, like real film stock ---------------- */
.plate-dark   { background: linear-gradient(180deg, #3A3A41 0%, #2C2C33 100%); }
.reel         { background: #28282D; }
.frame        { background: #3B3B42; border-color: rgba(240, 240, 244, 0.28); color: #F0F0F4; }
.frame--accent{ color: var(--az-gold); }
.reel__perfs  { color: rgba(240, 240, 244, 0.7); }

/* ---- 5 · RECORDS = GREY VINYL, everywhere ----------------- */
.rt-logo__disc {
  background:
    radial-gradient(circle at 50% 50%,
      var(--ink) 0 0.32em, var(--paper) 0.32em 2.15em,
      var(--c-orange-ink) 2.15em calc(2.15em + 2px),
      transparent calc(2.15em + 2px)),
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 0.58em, rgba(243, 231, 206, 0.17) 0.58em calc(0.58em + 2px)),
    #26262B;
}
.platter__disc {
  background:
    radial-gradient(circle closest-side,
      #1B1B1F 0 4%, var(--music) 4% 27%,
      var(--c-mustard-ink) 27% calc(27% + 2px),
      transparent calc(27% + 2px)),
    repeating-radial-gradient(circle closest-side,
      transparent 0 5px, rgba(243, 231, 206, 0.16) 5px 7px),
    #26262B;
}
.btn--disc {
  background:
    repeating-radial-gradient(circle closest-side,
      transparent 0 5px, rgba(240, 224, 190, 0.12) 5px 6px),
    #26262B;
}
.btn--record::before {
  background:
    radial-gradient(circle closest-side, #1B1B1F 0 8%, transparent 8.5%),
    radial-gradient(circle closest-side,
      var(--music) 0 34%, var(--c-mustard-ink) 34% calc(34% + 1px),
      transparent calc(34% + 1px)),
    repeating-radial-gradient(circle closest-side,
      transparent 0 2.6px, rgba(240, 224, 190, 0.14) 2.6px 3.6px),
    #26262B;
}
.btn--vinyl {
  background:
    radial-gradient(circle closest-side,
      var(--vin-label) 0 30%, var(--c-mustard-ink) 30% calc(30% + 1px),
      transparent calc(30% + 1px)),
    repeating-radial-gradient(circle closest-side,
      transparent 0 3px, rgba(243, 231, 206, 0.16) 3px 4.4px),
    #26262B;
}

/* ---- 6 · TICKETS — every ticket is the same gold ---------- */
.act-stub--film,
.act-stub--music,
.act-stub--comedy {
  --stub-plate: var(--music);
  --stub-ink:   var(--ink);
  --stub-edge:  var(--ink);
}
.rt-logo__fmc b { font-weight: 400; font-family: inherit; }
.rt-logo__fmc .tk-f { color: var(--az-red); }
.rt-logo__fmc .tk-m { color: var(--az-gold); -webkit-text-stroke: 1.1px #26262B; paint-order: stroke fill; }
.rt-logo__fmc .tk-c { color: var(--az-blue); }

/* ---- 7 · NEUTRAL FURNITURE — no brand color on small marks - */
.kicker::before { background: var(--ink); }
.band--cocoa .kicker::before, .band--avocado .kicker::before,
.band--film .kicker::before,  .cta-band .kicker::before { background: var(--paper); }
.kicker--dark::before  { background: var(--paper); }
.kicker--music::before { background: var(--ink); }
.band--mustard .kicker::before { background: var(--ink); }
.beat::before { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(18, 35, 75, 0.3); }
.act--stage   { --beat-dot: var(--paper); }
.craft--music .craft__glyph {
  color: var(--music) !important;
  -webkit-text-stroke: 1.5px var(--az-copper);
  paint-order: stroke fill;
}
/* list markers are single neutral dots — no brand-colored dashes, no
   "double bar" stacking with the separator rules (Jude 07-27).
   Geometry only; the selectors and their --tick vars stay untouched. */
.ev-promise::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: 0.08em;
  background: var(--film-grey-1);
}
.mcard__item::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  top: 0.42em;
  background: var(--film-grey-1);
}

/* ---- 8 · SUNSET RING — red, gold, blue + vinyl grey ------- */
/* Jude's call (07-27): the dark-mustard band (#D99E2B) read
   greenish in the ring — swapped for the film-stock grey, which
   also ties the ring to the records-are-grey rule. Ring only;
   #D99E2B stays where it lives elsewhere (amber stage, melts). */
.sunset-ring {
  background: radial-gradient(circle at 50% 50%,
    var(--c-mustard) 0 12%,   transparent 12% 20%,
    #BF0A30          20% 28%, transparent 28% 36%,
    var(--c-mustard) 36% 44%, transparent 44% 52%,
    var(--film-grey-1) 52% 60%, transparent 60% 68%,
    #1E4CA1          68% 74%, transparent 74%);
}
.sunset-ring--soft { opacity: 0.85; }

/* ---- 9 · ARIZONA MOTION — additive, gated, transform/opacity only ----
   (a) The badge powers on like a marquee sign: home-disc-in entrance,
       then the same home-bulb-flicker warm-up the old F·M·C letters
       had (see §1 above — timing mirrors the old F letter's beat).
   (b) Records spin slowly. The hero Record & Ticket disc already
       turns (sb-spin 24s, sb-core) — a soft specular sheen on its
       ::after finally makes the turn visible. The studio platter
       keeps its scroll-scrubbed rotation untouched; its sheen glides
       on its own clock so the record feels alive between scrolls.
       Disc CTAs get the same light. Every pseudo-element used here
       was unused (or content:none) in the production sheets. */
.rt-logo__disc::after,
.platter__disc::after,
.btn--disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(from 8deg,
    transparent 0deg 14deg,   rgba(243, 231, 206, 0.11) 42deg,
    transparent 70deg 192deg, rgba(243, 231, 206, 0.07) 222deg,
    transparent 252deg 360deg);
}
.platter__disc { position: relative; }  /* anchor for the sheen — layout-inert */
@media (prefers-reduced-motion: no-preference) {
  .platter__disc::after { animation: sb-spin 18s linear infinite; }
  .btn--disc::after     { animation: sb-spin 22s linear infinite; }
}
.sb-static .platter__disc::after,
.sb-static .btn--disc::after { animation: none !important; }

/* (c) the hero ticket keeps a slow idle sway after its entrance — the
   record spins, the ticket breathes; "from" matches the entrance's rest
   pose exactly so nothing jumps. (.sb-static kill-switch already covers
   .hero__logo .rt-logo__ticket in sb-home.) */
@keyframes az-ticket-sway {
  from { transform: translateY(-50%) rotate(-9deg); }
  to   { transform: translateY(-51.5%) rotate(-7.9deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__logo .rt-logo__ticket {
    animation:
      home-ticket-in 0.8s var(--ease-out) 0.5s both,
      az-ticket-sway 6.5s var(--ease-inout) 3.4s infinite alternate;
  }
}
/* (d) the header badge gives a little tip of the hat on hover */
.site-header__brand .fmc-badge--mini { transition: transform 0.35s var(--ease-out); }
.site-header__brand:hover .fmc-badge--mini,
.site-header__brand:focus-visible .fmc-badge--mini { transform: scale(1.08) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) {
  .site-header__brand .fmc-badge--mini { transition: none; }
}