/* ============================================================
   Ricky Bobby — race-livery design system
   Palette: red, white and blue; black as the highlight (Bob 2026-10-07: no green)
   Type: Racing Sans One (display) / Barlow (body) / Barlow Condensed (labels)
   ============================================================ */

:root {
  --racing-red: #b91f32;
  --racing-blue: #173f78;
  --racing-green: #1A1B1E; /* retired: green removed 2026-10-07, now black */
  --red-deep: #941829;
  --red-glint: #c62f42;
  --red-light: #f5dfe2;
  --blue-light: #e0e7f1;
  --primary-action: var(--racing-red);
  --accent: var(--racing-red);
  --focus: var(--racing-green);
  --asphalt: #1a1b1e;
  --asphalt-soft: #242629;
  --paper: #f2f4f3;
  --white: #ffffff;
  --blue-tint: var(--blue-light);
  --link-deep: var(--racing-blue);
  --action: var(--primary-action);
  --action-hover: var(--red-deep);
  --ink: #1a1b1e;
  --ink-soft: #4b4f53;
  --display: "Racing Sans One", sans-serif;
  --body: "Rubik", sans-serif;
  --label: "Barlow Condensed", sans-serif;
  --stripe-angle: -12deg;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--link-deep); }

:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}

/* ---------- layout: centered 1400px column ---------- */

.container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
}

/* ---------- shared bits ---------- */

.eyebrow {
  font-family: var(--label);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: 0.75rem;
}

h1, h2, h3 { line-height: 1.05; }

h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.section {
  padding: clamp(4rem, 9vw, 7.5rem) clamp(1.25rem, 4vw, 3rem);
}

.section-light { background: var(--paper); color: var(--ink); }
.section-dark  { background: var(--asphalt); color: var(--paper); }
.section-dark .eyebrow { color: var(--blue-tint); }

.section-head { margin-bottom: 3rem; }

.section-lede {
  margin-top: 1.25rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.section-dark .section-lede { color: #b9bec2; }

/* buttons */
.btn {
  display: inline-block;
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.9rem;
  border: 3px solid var(--asphalt);
  cursor: pointer;
  transform: skewX(-8deg);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn > * { transform: skewX(8deg); }

.btn-solid {
  background: var(--action);
  border-color: var(--action);
  color: var(--white);
}
.btn-solid:hover { background: var(--action-hover); border-color: var(--action-hover); }

.btn-line {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.btn-line:hover { background: var(--blue-tint); color: var(--ink); border-color: var(--blue-tint); }

.btn-sm { padding: 0.5rem 1.2rem; font-size: 0.9rem; }

/* roundel — the 512 race number */
.roundel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--asphalt);
  color: var(--asphalt);
  font-family: var(--display);
  line-height: 1;
}

.roundel-sm {
  width: 2.2rem;
  height: 2.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  border-width: 2px;
}

.roundel-hero {
  width: clamp(3.5rem, 7vw, 5.5rem);
  height: clamp(3.5rem, 7vw, 5.5rem);
  font-size: clamp(1.05rem, 2.1vw, 1.65rem);
  letter-spacing: 0.03em;
  border-width: 4px;
  box-shadow: 6px 6px 0 var(--action);
}

/* checkered strip */
.checker {
  height: 26px;
  background:
    repeating-conic-gradient(var(--asphalt) 0% 25%, var(--white) 0% 50%)
    0 0 / 26px 26px;
}

/* diagonal stripe divider between sections */
.stripe-divider {
  height: 18px;
  background: repeating-linear-gradient(
    -55deg,
    var(--blue-tint) 0 28px,
    var(--white) 28px 40px,
    var(--action) 40px 68px,
    var(--white) 68px 80px
  );
}

/* ---------- ticker marquee ---------- */

.ticker {
  background: var(--asphalt);
  color: var(--paper);
  overflow: hidden;
  border-top: 3px solid var(--action);
  border-bottom: 3px solid var(--action);
}

.ticker-blue {
  background: var(--blue-tint);
  color: var(--ink);
  border-color: var(--asphalt);
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  padding: 0.6rem 0;
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: ticker-scroll 95s linear infinite; }
  .ticker-blue .ticker-track { animation-duration: 55s; }
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- CTA banners ---------- */

.cta-banner {
  background: var(--action);
  color: var(--white);
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3rem);
  border-top: 3px solid var(--asphalt);
  border-bottom: 3px solid var(--asphalt);
}

.cta-banner-blue {
  background: var(--blue-tint);
  color: var(--ink);
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cta-line {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  text-transform: uppercase;
  line-height: 1.1;
  transform: skewX(-6deg);
}

.btn-invert {
  background: var(--asphalt);
  border-color: var(--asphalt);
  color: var(--white);
}

.btn-invert:hover {
  background: var(--white);
  border-color: var(--asphalt);
  color: var(--ink);
}

/* ---------- hero badge sticker ---------- */

.hero-badge {
  position: absolute;
  top: clamp(1rem, 4vw, 3rem);
  right: clamp(1.25rem, 5vw, 4rem);
  transform: rotate(7deg);
  background: var(--white);
  border: 3px dashed var(--action);
  color: var(--ink);
  font-family: var(--label);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.5vw, 1.05rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.35;
  padding: 0.7rem 1.1rem;
  box-shadow: 5px 5px 0 rgba(26, 27, 30, 0.25);
  z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-badge { animation: badge-drop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both; }
  @keyframes badge-drop {
    from { opacity: 0; transform: rotate(14deg) translateY(-16px) scale(1.08); }
    to   { opacity: 1; transform: rotate(7deg) translateY(0) scale(1); }
  }
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* positioning context for the mobile panel, which hangs off the bar */
  isolation: isolate;
  padding: 0.75rem clamp(1.25rem, 4vw, 3rem);
  background: var(--paper);
  border-bottom: 3px solid var(--asphalt);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}

.nav-brand-name {
  font-family: var(--display);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nav-links { display: flex; align-items: center; }

/* The row moved onto .nav-list when the first section item gained a dropdown: the item
   needs to be a positioning context for its menu, which a bare <a> cannot be. */
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.8rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- section dropdowns (Band, DJ, Karaoke) -------------------------------
   One per built section, generated by gen_nav_sections in build.py (Bob,
   2026-10-05). No JavaScript, on purpose. Opens on :hover for pointers and
   :focus-within for keyboards. Touch devices have no hover, so each item
   behaves as a plain link to its section hub (/band/, /dj/, /karaoke/), which
   carries the same list as a subnav. That fallback is the design, not a gap.

   The menu is hidden with visibility + opacity rather than display:none so it
   can transition and so focus can reach it. */
.nav-has-menu { position: relative; }

.nav-menu {
  position: absolute;
  top: 100%;
  left: -0.9rem;
  min-width: 15rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--paper);
  border: 3px solid var(--asphalt);
  border-top-width: 0;
  box-shadow: 0 12px 24px rgba(26, 27, 30, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

.nav-has-menu:hover > .nav-menu,
.nav-has-menu:focus-within > .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu li { display: block; }

.nav-menu a {
  display: block;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.nav-menu a:hover,
.nav-menu a:focus-visible { background: var(--asphalt); color: var(--paper) !important; }

.nav-list > .nav-has-menu > a[aria-current="true"],
.nav-menu a[aria-current="page"] { color: var(--action-hover); }

/* Coarse pointers get no hover, so never leave a menu stuck open mid-tap. */
@media (pointer: coarse) {
  .nav-menu { display: none; }
}

.nav-links a {
  font-family: var(--label);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.nav-links a:hover { color: var(--action); }

.nav-cta {
  background: var(--asphalt);
  color: var(--paper) !important;
  padding: 0 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;          /* same height as the header chat button (Bob, 2026-09-30) */
  box-sizing: border-box;
}
.nav-cta:hover { background: var(--action); color: var(--white) !important; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: var(--paper);
  min-height: min(88vh, 780px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.hero-stripes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* feathered fade: stripes dissolve as they approach the text side */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.14) 42%, black 78%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.14) 42%, black 78%);
}

/* The livery in motion: an endless diagonal field of racing stripes.
   Pattern is 460px wide (blue 130 / gap 26 / orange 52 / gap 18 / dark 16 / clear 218),
   scrolled one full pattern-width per loop for a seamless cycle. */
.stripe-field {
  position: absolute;
  top: -25%;
  right: -12%;
  width: 75%;
  height: 150%;
  transform: rotate(var(--stripe-angle));
  transform-origin: center;
  background: repeating-linear-gradient(
    90deg,
    var(--blue-tint) 0 130px,
    transparent 130px 156px,
    var(--action) 156px 208px,
    transparent 208px 226px,
    var(--asphalt) 226px 242px,
    transparent 242px 460px
  );
  opacity: 0.9;
}

@media (prefers-reduced-motion: no-preference) {
  .stripe-field { animation: stripes-race 6s linear infinite; }
}

@keyframes stripes-race {
  from { background-position-x: 0; }
  to   { background-position-x: -460px; }
}

/* speed-line accents: quick streaks whipping across the hero */
.speed-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, black 72%);
  mask-image: linear-gradient(90deg, transparent 40%, black 72%);
}

.speed-line {
  position: absolute;
  height: 3px;
  width: 22vw;
  transform: skewX(-30deg);
  background: linear-gradient(90deg, transparent, var(--action), transparent);
  opacity: 0;
  filter: blur(1.5px);
}

.sl-1 { top: 8%; }
.sl-2 { top: 17%; background: linear-gradient(90deg, transparent, var(--link-deep), transparent); }
.sl-3 { top: 27%; height: 2px; background: linear-gradient(90deg, transparent, var(--asphalt), transparent); }
.sl-4 { top: 38%; height: 4px; width: 28vw; }
.sl-5 { top: 47%; height: 2px; width: 16vw; background: linear-gradient(90deg, transparent, var(--link-deep), transparent); }
.sl-6 { top: 58%; width: 24vw; background: linear-gradient(90deg, transparent, var(--asphalt), transparent); }
.sl-7 { top: 68%; height: 4px; width: 30vw; background: linear-gradient(90deg, transparent, var(--link-deep), transparent); }
.sl-8 { top: 78%; height: 2px; width: 15vw; }
.sl-9 { top: 88%; width: 26vw; background: linear-gradient(90deg, transparent, var(--asphalt), transparent); }
.sl-10 { top: 12%; height: 6px; width: 34vw; filter: blur(4px); }
.sl-11 { top: 32%; height: 5px; width: 30vw; filter: blur(3.5px); background: linear-gradient(90deg, transparent, var(--link-deep), transparent); }
.sl-12 { top: 52%; height: 7px; width: 36vw; filter: blur(5px); background: linear-gradient(90deg, transparent, var(--asphalt), transparent); }
.sl-13 { top: 72%; height: 5px; width: 28vw; filter: blur(4px); }
.sl-14 { top: 93%; height: 6px; width: 32vw; filter: blur(4.5px); background: linear-gradient(90deg, transparent, var(--link-deep), transparent); }

@media (prefers-reduced-motion: no-preference) {
  .sl-1 { animation: whoosh 3.2s linear infinite 0.6s; }
  .sl-2 { animation: whoosh 4.1s linear infinite 1.8s; }
  .sl-3 { animation: whoosh 5.3s linear infinite 3.1s; }
  .sl-4 { animation: whoosh 2.7s linear infinite 0.2s; }
  .sl-5 { animation: whoosh 4.6s linear infinite 2.4s; }
  .sl-6 { animation: whoosh 3.6s linear infinite 1.1s; }
  .sl-7 { animation: whoosh 2.9s linear infinite 3.7s; }
  .sl-8 { animation: whoosh 5.0s linear infinite 0.9s; }
  .sl-9 { animation: whoosh 3.9s linear infinite 2.0s; }
  .sl-10 { animation: whoosh 2.4s linear infinite 1.5s; }
  .sl-11 { animation: whoosh 3.3s linear infinite 0.4s; }
  .sl-12 { animation: whoosh 2.8s linear infinite 2.9s; }
  .sl-13 { animation: whoosh 3.1s linear infinite 1.3s; }
  .sl-14 { animation: whoosh 2.6s linear infinite 0.1s; }
}

@keyframes whoosh {
  0%   { left: -25vw; opacity: 0; }
  6%   { opacity: 0.85; }
  22%  { opacity: 0.85; }
  30%  { left: 110vw; opacity: 0; }
  100% { left: 110vw; opacity: 0; }
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3rem);
}

.wordmark {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(3.4rem, 11vw, 8.5rem);
  letter-spacing: 0.01em;
  color: var(--asphalt);
  margin: 0.5rem 0 1rem;
}

.wordmark-line { display: block; }

.wordmark-line-2 {
  color: var(--action);
  -webkit-text-stroke: 0;
}

/* "Music" gets its own row: a skewed asphalt plate + the 512 roundel */
.wordmark-band-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: clamp(0.6rem, 1.5vw, 1rem);
}

.band-plate {
  display: inline-block;
  background: var(--asphalt);
  color: var(--paper);
  font-size: clamp(1.7rem, 5.5vw, 4.2rem);
  letter-spacing: 0.14em;
  padding: 0.1em 0.55em 0.12em;
  transform: skewX(-8deg);
  box-shadow: 6px 6px 0 var(--blue-tint);
}

.hero-tagline {
  font-family: var(--label);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}

.hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--ink-soft);
  margin-bottom: 2.25rem;
}

.hero-ctas { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* hero load animation */
@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * { animation: rise-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .hero-inner > .wordmark   { animation-delay: 0.1s; }
  .hero-inner > .hero-sub   { animation-delay: 0.28s; }
  .hero-inner > .hero-ctas  { animation-delay: 0.36s; }

  /* tagline: sit for ~10s, race off to the right, re-enter from the far left,
     park in the same spot, repeat forever */
  .hero-inner > .hero-tagline {
    animation:
      rise-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.22s both,
      tagline-race 5s linear 2s infinite;
  }
}

@keyframes tagline-race {
  0%, 75%  { transform: translateX(0) skewX(0); }
  78%      { transform: translateX(16vw) skewX(-16deg); }
  85%      { transform: translateX(135vw) skewX(-16deg); }
  85.1%    { transform: translateX(-135vw) skewX(-16deg); }
  92%      { transform: translateX(-12vw) skewX(-16deg); }
  95%, 100% { transform: translateX(0) skewX(0); }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* wordmark chrome glint: a shine band sweeps the letters on a loop */
@media (prefers-reduced-motion: no-preference) {
  .wordmark-line {
    background-image: linear-gradient(
      105deg,
      var(--asphalt) 0%, var(--asphalt) 42%,
      #6d7480 50%,
      var(--asphalt) 58%, var(--asphalt) 100%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: glint 5.5s ease-in-out infinite;
  }

  .wordmark-line-2 {
    background-image: linear-gradient(
      105deg,
      var(--action) 0%, var(--action) 42%,
      var(--red-glint) 50%,
      var(--action) 58%, var(--action) 100%
    );
    animation-delay: 0.35s;
  }
}

@keyframes glint {
  0%   { background-position: 100% 0; }
  35%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}

/* wordmark drumroll: RICKY, BOBBY, MUSIC pop in fast succession — one-two-three —
   then a beat of rest, then again. Each pop is a spring: fast up, overshoot
   under, settle. The ATX roundel stays still. */
@media (prefers-reduced-motion: no-preference) {
  .wordmark-line {
    transform-origin: left center;
    animation:
      glint 5.5s ease-in-out infinite,
      word-pop 3.6s linear infinite;
  }

  .wordmark-line-2 {
    animation:
      glint 5.5s ease-in-out 0.35s infinite,
      word-pop 3.6s linear 0.3s infinite;
  }

  .band-plate { animation: plate-pop 3.6s linear 0.6s infinite; }
}

@keyframes word-pop {
  0%   { transform: scale(1); }
  5%   { transform: scale(1.45); }
  9%   { transform: scale(0.90); }
  12%  { transform: scale(1.10); }
  15%, 100% { transform: scale(1); }
}

@keyframes plate-pop {
  0%   { transform: skewX(-8deg) scale(1); }
  5%   { transform: skewX(-8deg) scale(1.54); }
  9%   { transform: skewX(-8deg) scale(0.88); }
  12%  { transform: skewX(-8deg) scale(1.12); }
  15%, 100% { transform: skewX(-8deg) scale(1); }
}

/* hero checker strip: the flag never stops waving past */
.hero .checker {
  position: relative;
  z-index: 4;   /* rides on top of the stripe field and speed lines */
}

@media (prefers-reduced-motion: no-preference) {
  .hero .checker,
  .footer .checker { animation: checker-roll 1.5s linear infinite; }
}

@keyframes checker-roll {
  from { background-position: 0 0; }
  to   { background-position: 52px 0; }
}

/* ---------- band story: magazine spread ---------- */

/* sits below the band cards; sibling margins collapse, so this top margin is
   what actually creates the gap under the card row (max of the two, not the sum) */
.band-story {
  columns: 2;
  column-gap: clamp(2.5rem, 5vw, 4.5rem);
  column-rule: 1px solid #d8dedd;
  margin-top: clamp(3rem, 6vw, 5rem);
  margin-bottom: 1rem;
}

/* full-width closer under the columns, above the band cards */
.band-outro {
  color: var(--ink-soft);
  font-size: 1.08rem;
  border-top: 1px solid #d8dedd;
  padding-top: 1.5rem;
  margin-bottom: 0;
}

/* let paragraphs flow across the column break so both columns balance.
   avoid-column kept whole paragraphs together and left one column short. */
.band-story p {
  color: var(--ink-soft);
  font-size: 1.08rem;
  margin-bottom: 1.25rem;
  orphans: 2;
  widows: 2;
}

/* /about/ runs the band story on a dark section, and the two rules above set a
   light-background body colour. #4b4f53 on #1a1b1e is about 1.9:1, well under
   the 4.5:1 minimum for body text, which is why the copy read as unreadable
   grey-on-black. Same override pattern .faq-item and .service-step already use,
   and the same value. The hairlines get the dark-section treatment too: at
   #d8dedd they were louder than the paragraphs they separated. */
.section-dark .band-story p,
.section-dark .band-outro { color: #c6cacd; }
.section-dark .band-story { column-rule-color: #34383c; }
.section-dark .band-outro { border-top-color: #34383c; }

/* racing drop cap on the opening paragraph */
.band-story > p:first-of-type::first-letter {
  font-family: var(--display);
  font-size: 3.4em;
  line-height: 0.82;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--action);
}

/* pull quote breaks the columns full width, livery style */
.pull-quote {
  column-span: all;
  margin: 1.5rem 0 2rem;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem);
  border-top: 4px solid var(--asphalt);
  border-bottom: 4px solid var(--asphalt);
  background:
    linear-gradient(90deg, var(--action) 0 8px, var(--blue-tint) 8px 14px, transparent 14px);
  background-repeat: no-repeat;
}

.pull-quote p {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  transform: skewX(-6deg);
  padding-left: clamp(0.75rem, 2vw, 1.5rem);
}

.pull-quote em { color: var(--action); font-style: italic; }

/* Same dark-section problem as .band-story, and worse: on /about/ the quote
   text was var(--ink) on var(--asphalt), so only the orange <em> was visible
   and the rest of the line rendered black on black. The 4px rules were
   var(--asphalt) and disappeared for the same reason. Do not rely on the
   .band-story override to cure this by specificity; the quote has to work
   wherever it is used. */
.section-dark .pull-quote p { color: var(--paper); }
.section-dark .pull-quote {
  border-top-color: var(--paper);
  border-bottom-color: var(--paper);
}

@media (max-width: 900px) {
  .band-story { columns: 1; column-rule: none; }
}

/* ---------- band cards ---------- */

/* three members: one column on mobile, a clean 3-up on desktop.
   auto-fit would strand the third card on its own row at mid widths.
   Sits directly under the hero, above the band story, so it carries the
   bottom margin that .band-outro used to. */
.band-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

@media (min-width: 940px) {
  .band-grid { grid-template-columns: repeat(3, 1fr); }
}

.driver-card {
  background: var(--white);
  color: var(--ink);   /* the cards sit on the dark About section since 2026-09-30 */
  border: 3px solid var(--asphalt);
  box-shadow: 8px 8px 0 var(--blue-tint);
}

.driver-photo {
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(-55deg, #e4e8e7 0 22px, #d8dedd 22px 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 3px solid var(--asphalt);
  position: relative;
}

.driver-photo::after {
  content: attr(data-initials);
  font-family: var(--display);
  font-size: 3rem;
  color: var(--ink-soft);
  opacity: 0.5;
}

.driver-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.driver-plate { padding: 1.5rem 1.75rem 1.75rem; }

.driver-plate h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.6rem;
  text-transform: uppercase;
}

.driver-role {
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--action);
  margin: 0.25rem 0 0.9rem;
}

.driver-bio { color: var(--ink-soft); }

/* ---------- setlist ---------- */

/* Each genre uses its full row; song columns balance within the genre. */
.setlist-grid { display:block; }

.setlist-heading {
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-tint);
  border-bottom: 2px solid var(--blue-tint);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.setlist-col ul { list-style: none; }

.setlist-col li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--asphalt-soft);
  font-weight: 600;
  font-size: 1.05rem;
}

.setlist-col li .artist {
  font-family: var(--label);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #9aa0a5;
  text-align: right;
  white-space: nowrap;
  margin-left: auto;
}

/* on one column the longest credit ("Rihanna, Kanye West & Paul McCartney")
   plus its title is wider than the phone, and nowrap turned that into
   sideways scroll on the whole page. let it wrap at that width only. */
@media (max-width: 560px) {
  .setlist-col li .artist { white-space: normal; }
}

.setlist-col li .time {
  font-family: var(--label);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--blue-tint);
  white-space: nowrap;
  min-width: 2.9rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.set-total {
  display: block;
  font-family: var(--label);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  color: var(--action);
  margin-top: 0.35rem;
}

.setlist-note {
  margin-top: 2.5rem;
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
}

/* ---------- shows ---------- */

.show-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.25rem 0;
  border-bottom: 2px solid var(--asphalt);
}

.show-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.5rem;
  font-family: var(--display);
  text-transform: uppercase;
}

.show-month { font-size: 1rem; color: var(--action); }
.show-day   { font-size: 2rem; }

.show-venue { flex: 1; }
.show-venue h3 { font-family: var(--label); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.04em; }
.show-venue p { color: var(--ink-soft); }

.shows-empty {
  border: 3px dashed var(--asphalt);
  padding: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 1.1rem;
}

/* ---------- video ---------- */

.video-wrap {
  position: relative;
  max-width: 62rem;
  margin-inline: auto;
}

.video-plate {
  position: absolute;
  /* Sits on the frame's top edge rather than over the picture, so it no
     longer covers the title YouTube draws inside a real embed. */
  bottom: calc(100% - 0.5rem);
  left: clamp(0.5rem, 3vw, 2rem);
  z-index: 3;
  background: var(--action);
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35em 0.9em;
  transform: skewX(-8deg) rotate(-2deg);
  box-shadow: 5px 5px 0 var(--asphalt);
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--asphalt);
  border: 4px solid var(--asphalt);
  box-shadow: 12px 12px 0 var(--blue-tint);
  overflow: hidden;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* placeholder state until the first video lands */
.video-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(-55deg, #232528 0 26px, #1a1b1e 26px 52px);
}

.video-ph-inner {
  text-align: center;
  color: var(--paper);
  padding: 1.5rem;
}

.play-roundel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(4.5rem, 9vw, 6.5rem);
  height: clamp(4.5rem, 9vw, 6.5rem);
  border-radius: 50%;
  background: var(--white);
  border: 4px solid var(--asphalt);
  box-shadow: 6px 6px 0 var(--action);
  margin-bottom: 1.25rem;
}

.play-roundel::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.1rem 0 1.1rem 1.9rem;
  border-color: transparent transparent transparent var(--action);
  margin-left: 0.35rem;
}

@media (prefers-reduced-motion: no-preference) {
  .play-roundel { animation: word-pop 3.6s linear 1.8s infinite; }
}

.video-ph-title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.video-ph-sub {
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: #b9bec2;
  margin-top: 0.5rem;
}

/* ---------- gallery ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.gallery-tile {
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(-55deg, #2a2c30 0 22px, #232528 22px 44px);
  border: 2px solid #3a3d42;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.gallery-tile::after {
  content: attr(data-label);
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: #6a6f75;
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;   /* keep heads in frame on the tall promo stills */
  position: absolute;
  inset: 0;
}

.gallery-tile:has(img)::after { content: none; }

a.gallery-tile {
  display: block;
  overflow: hidden;
  cursor: zoom-in;
}

a.gallery-tile img { transition: transform 0.25s ease, filter 0.25s ease; }

a.gallery-tile:hover img,
a.gallery-tile:focus-visible img {
  transform: scale(1.04);
  filter: brightness(1.08);
}

/* ---------- lightbox ---------- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(16, 17, 19, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb[hidden] { display: none; }

.lb-img {
  max-width: min(94vw, 1400px);
  max-height: 86vh;
  object-fit: contain;
  border: 3px solid var(--white);
  box-shadow: 10px 10px 0 rgba(185, 31, 50, 0.55);
  user-select: none;
  -webkit-user-drag: none;
}

.lb-close,
.lb-nav {
  position: fixed;
  z-index: 101;
  background: transparent;
  border: none;
  color: var(--paper);
  font-family: var(--body);
  cursor: pointer;
  line-height: 1;
  padding: 0.5rem 1rem;
}

.lb-close {
  top: 0.5rem;
  right: 0.75rem;
  font-size: 3rem;
}

.lb-nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 4rem;
  padding: 1.5rem 1rem;
}

.lb-prev { left: 0.25rem; }
.lb-next { right: 0.25rem; }

.lb-close:hover, .lb-nav:hover { color: var(--action); }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 3px solid var(--action); }

.lb-count {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--paper);
  font-size: 0.95rem;
}

@media (prefers-reduced-motion: no-preference) {
  .lb { animation: lb-fade 0.18s ease; }
  @keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
  a.gallery-tile img { will-change: transform; }
}

@media (max-width: 760px) {
  .lb-img {
    max-width: 100vw;
    max-height: 80vh;
    border-width: 2px;
    box-shadow: none;
  }
  .lb-nav { font-size: 3rem; padding: 1.25rem 0.9rem; background: rgba(16,17,19,0.35); }
  .lb-close { font-size: 2.6rem; padding: 0.75rem 1.1rem; }
}

/* ---------- booking ---------- */

.book-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.book-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.book-form input,
.book-form select,
.book-form textarea {
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--asphalt);
  background: var(--white);
  color: var(--ink);
}

/* selects keep their own arrow but must match the inputs otherwise */
.book-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--asphalt) 50%),
                    linear-gradient(135deg, var(--asphalt) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.book-form input:focus,
.book-form select:focus,
.book-form textarea:focus {
  outline: 3px solid var(--blue-tint);
  outline-offset: 0;
}

.book-form .btn { align-self: flex-start; margin-top: 0.5rem; }

.book-alt { font-family: var(--body); font-size: 1rem; text-transform: none; letter-spacing: normal; color: var(--ink-soft); }

/* ---------- genre chips ---------- */

.genre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.chip {
  display: inline-block;
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border: 2px solid var(--blue-tint);
  color: var(--blue-tint);
  transform: skewX(-8deg);
}

.chip-alt {
  border-color: var(--action);
  color: var(--action);
}

/* ---------- FAQ ---------- */

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem 3rem;
}

/* Base colours are the LIGHT-section ones so this grid is safe to reuse on any
   background; the dark-section palette is the override. It is used on /faq/
   (dark), /press-kit/ (light) and /contact/ (light). */
.faq-item h3 {
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--action-hover);
  margin-bottom: 0.6rem;
}

.faq-item p { color: var(--ink-soft); }

.section-dark .faq-item h3 { color: var(--blue-tint); }
.section-dark .faq-item p { color: #c6cacd; }

/* ---------- form status + honeypot ---------- */

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-status {
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1rem;
  min-height: 1.4em;
}

.form-status.is-ok  { color: var(--racing-green); }
.form-status.is-err { color: var(--action-hover); }

.book-form button[disabled] { opacity: 0.6; cursor: wait; }

/* ---------- press kit ---------- */

.section-blue {
  background: var(--blue-tint);
  color: var(--ink);
  border-top: 3px solid var(--asphalt);
  border-bottom: 3px solid var(--asphalt);
}

.section-blue .eyebrow { color: var(--action-hover); }
.section-blue .section-lede { color: #22333b; }

.press-inner {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  flex-wrap: wrap;
}

.press-thumb {
  display: block;
  flex: 0 0 auto;
  width: clamp(200px, 24vw, 300px);
  transform: rotate(-3.5deg);
  border: 4px solid var(--asphalt);
  box-shadow: 12px 12px 0 var(--action), 24px 24px 0 rgba(26, 27, 30, 0.18);
  background: var(--white);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.press-thumb img { display: block; width: 100%; }

.press-thumb:hover,
.press-thumb:focus-visible {
  transform: rotate(-1deg) scale(1.03);
  box-shadow: 14px 14px 0 var(--action), 26px 26px 0 rgba(26, 27, 30, 0.2);
}

.press-copy { flex: 1; min-width: 280px; }
.press-copy .section-lede { max-width: 100%; margin-bottom: 1.75rem; }
.press-copy .eyebrow { margin-bottom: 0.5rem; }
.press-copy h2 { margin-bottom: 0.25rem; }

.btn-big {
  font-size: 1.25rem;
  padding: 1.1rem 2.4rem;
  box-shadow: 6px 6px 0 var(--white);
}

@media (max-width: 760px) {
  .press-inner { justify-content: center; text-align: left; }
  .press-thumb { width: min(70vw, 260px); }
}

/* ---------- login page ---------- */

.login-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.login-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 8vw, 6rem) 1.25rem;
  background:
    repeating-linear-gradient(-12deg, transparent 0 180px, rgba(23, 63, 120, 0.12) 180px 230px, transparent 230px 260px, rgba(185, 31, 50, 0.10) 260px 290px, transparent 290px 460px),
    var(--paper);
}

.login-card {
  width: 100%;
  max-width: 26rem;
  background: var(--white);
  border: 3px solid var(--asphalt);
  box-shadow: 10px 10px 0 var(--blue-tint);
  padding: 2.25rem 2rem 2rem;
  position: relative;
}

.login-roundel {
  position: absolute;
  top: -1.6rem;
  right: 1.5rem;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1rem;
  border-width: 3px;
  box-shadow: 4px 4px 0 var(--action);
}

.login-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 2.2rem;
  margin-bottom: 0.35rem;
}

.login-sub { color: var(--ink-soft); margin-bottom: 1.5rem; }

.login-card form { display: flex; flex-direction: column; gap: 1.1rem; }

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.login-card input {
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--asphalt);
  background: var(--white);
  color: var(--ink);
}

.login-card input:focus { outline: 3px solid var(--blue-tint); outline-offset: 0; }

.login-card .btn { align-self: flex-start; margin-top: 0.25rem; }

.login-help {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #d8dedd;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- footer ---------- */

.footer { background: var(--asphalt); color: var(--paper); }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1400px;
  margin-inline: auto;
  padding: 2rem clamp(1.25rem, 4vw, 3rem);
  font-size: 0.95rem;
  color: #b9bec2;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--paper);
}

/* full page set: primary nav stays short, this carries everything */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 4rem);
  max-width: 1400px;
  margin-inline: auto;
  padding: 3rem clamp(1.25rem, 4vw, 3rem) 0.5rem;
}

.footer-head {
  font-family: var(--label);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: 0.9rem;
}

.footer-col ul { list-style: none; }
.footer-col .footer-head a { color: inherit; border-bottom: 0; font-size: inherit; }
.footer-col .footer-head a:hover, .footer-col .footer-head a:focus-visible { color: var(--paper); }
.footer-col li + li { margin-top: 0.55rem; }

.footer-col a {
  color: #b9bec2;
  text-decoration: none;
  font-size: 0.98rem;
  border-bottom: 2px solid transparent;
}
.footer-col a:hover,
.footer-col a:focus-visible { color: var(--paper); border-bottom-color: var(--action); }

.footer-nav + .footer-inner {
  border-top: 1px solid #34383c;
  max-width: 1400px;
  margin-top: 1.5rem;
}

/* ---------- responsive ---------- */

/* ---- mobile nav -----------------------------------------------------------
   Five primary links plus a CTA stop fitting beside the wordmark around 900px.
   They used to wrap into a centred pile: 138px of sticky chrome on a 390px
   phone, 16% of the viewport, with the services dropdown a dead tap because touch has
   no hover.

   EVERY COLLAPSED RULE IS GATED BEHIND .nav-js, which main.js puts on <html>.
   Without JavaScript none of this applies and the nav falls back to the wrap
   below, which is complete and usable. A hamburger that cannot open is worse
   than a nav that is merely tall. */

.nav-toggle {
  display: none;
  width: 44px;                   /* 44px is the accessible touch-target floor */
  height: 44px;
  padding: 0;
  border: 3px solid var(--asphalt);
  background: var(--paper);
  cursor: pointer;
  position: relative;
}

/* three bars from one element: the middle is the box, the outer two are
   pseudo-elements, so the X animation has nothing extra to hide */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 3px;
  background: var(--asphalt);
  transform: translateX(-50%);
}
.nav-toggle-bars { top: 50%; margin-top: -1.5px; }
.nav-toggle-bars::before { content: ""; top: -7px; }
.nav-toggle-bars::after  { content: ""; top:  7px; }

@media (prefers-reduced-motion: no-preference) {
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after { transition: transform 0.18s ease, opacity 0.18s ease; }
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: 0; transform: translateX(-50%) rotate(-45deg); }

@media (max-width: 900px) {
  /* the no-JS fallback: the old wrap, unchanged */
  .nav-inner { flex-wrap: wrap; justify-content: center; }
  .nav-list { flex-wrap: wrap; justify-content: center; row-gap: 0.4rem; }

  .nav-js .nav-inner { flex-wrap: nowrap; justify-content: space-between; }
  .nav-js .nav-toggle { display: block; }

  /* the panel. max-height rather than display:none so it can animate and so
     the links stay reachable to assistive tech while closed. */
  .nav-js .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    background: var(--paper);
    border-bottom: 3px solid var(--asphalt);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
  }
  .nav-js .nav-links.is-open {
    /* dvh so the panel is not hidden behind mobile browser chrome. The vh line
       is the fallback for anything without dvh support. */
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    visibility: visible;
  }
  @media (prefers-reduced-motion: no-preference) {
    .nav-js .nav-links { transition: max-height 0.25s ease, visibility 0.25s; }
  }

  .nav-js .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem clamp(1.25rem, 4vw, 3rem) 1.25rem;
  }
  .nav-js .nav-list > li { border-top: 1px solid var(--asphalt-soft); }
  .nav-js .nav-list > li:first-child { border-top: 0; }
  .nav-js .nav-links a {
    display: block;
    padding: 0.95rem 0;          /* comfortable row height, not a hairline */
    font-size: 1.05rem;
  }
  .nav-js .nav-cta {
    margin-top: 0.9rem;
    text-align: center;
    padding: 1rem 2rem !important;
  }

  /* Each section dropdown becomes a disclosure instead of a hover menu */
  .nav-js .nav-has-menu { display: flex; flex-wrap: wrap; align-items: center; }
  .nav-js .nav-has-menu > a { flex: 1; }
  .nav-js .nav-submenu-toggle {
    display: block;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
  }
  .nav-js .nav-submenu-toggle::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    margin: -7px 0 0 -5px;
    border-right: 3px solid var(--asphalt);
    border-bottom: 3px solid var(--asphalt);
    transform: rotate(45deg);
  }
  .nav-js .nav-submenu-toggle[aria-expanded="true"]::before {
    margin-top: -3px;
    transform: rotate(225deg);
  }
  .nav-js .nav-menu {
    position: static;
    flex-basis: 100%;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    min-width: 0;
    padding: 0 0 0.5rem 1rem;
  }
  .nav-js .nav-has-menu.is-open > .nav-menu { display: block; }
  /* hover must not open it on a touch panel */
  .nav-js .nav-has-menu:hover > .nav-menu,
  .nav-js .nav-has-menu:focus-within > .nav-menu { display: none; }
  .nav-js .nav-has-menu.is-open:hover > .nav-menu,
  .nav-js .nav-has-menu.is-open:focus-within > .nav-menu { display: block; }
  .nav-js .nav-menu a { padding: 0.75rem 0; font-size: 1rem; }
}

@media (max-width: 760px) {
  .form-row { grid-template-columns: 1fr; }
  .roundel-hero { box-shadow: 4px 4px 0 var(--action); }
  .wordmark-band-row { gap: 1rem; }
  .band-plate { box-shadow: 4px 4px 0 var(--blue-tint); }
  .shows-empty { padding: 1.5rem; justify-content: center; text-align: center; }
  .hero { min-height: 70vh; }
  .hero-ctas .btn { width: 100%; text-align: center; }
  .show-row { flex-wrap: wrap; gap: 1rem; }
  .footer-inner { justify-content: center; text-align: center; }
}

/* comfortable touch targets on any touch device */
@media (pointer: coarse) {
  .nav-links a { padding: 0.35rem 0.2rem; }
  .btn { padding: 1rem 2rem; }
}

/* ---------- subpages ---------- */

/* h1 on a subpage takes the h2 display treatment; the wordmark h1 is home-only */
h1.page-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.crumbs {
  font-family: var(--label);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: var(--ink-soft);
}
.section-dark .crumbs { color: #b9bec2; }
.crumbs a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--action); }
.crumbs a:hover { color: var(--action); }

/* home setlist teaser: set shape without duplicating the song list */
.set-blurb { color: #b9bec2; font-size: 1rem; margin-top: 0.9rem; }
.setlist-cta { margin-top: 2.5rem; }

.setlist-notes { margin-top: 3.5rem; margin-bottom: 0; }
.setlist-notes h2.stacked-q { margin-top: 2.5rem; }

/* ---------- chat ----------
   Geometry, breakpoints and stacking ported from the Trinzik site's chat
   (ChatLauncher.tsx): mobile is a near-full-height sheet inset 12px with a
   64px top gap, and from 640px up it becomes a 380x560 popover anchored above
   the launcher bubble. Colours and type are this site's tokens, not Trinzik's.
   The mobile visualViewport pinning that makes this survive the iOS keyboard
   lives in js/chat.js. */

.chat-root {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
}

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

/* ---- launcher bubble ---- */

.chat-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 5.5rem;   /* bigger, Bob 2026-09-30 */
  height: 5.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--action);
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(185, 31, 50, 0.35);
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.chat-bubble:hover { background: var(--action-hover); transform: scale(1.05); }
.chat-bubble:active { transform: scale(0.95); }

.chat-bubble-label {
  font-family: var(--label);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: none;   /* reads "Chat", Bob 2026-09-30 */
  line-height: 1;
}
.chat-bubble svg { width: 40px; height: 40px; }

.chat-root.is-open .chat-bubble { opacity: 0; pointer-events: none; transform: scale(0.6); }

/* ---- panel ---- */

.chat-panel {
  position: fixed;
  inset-inline: 0.75rem;
  top: 4rem;
  bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 3px solid var(--asphalt);
  box-shadow: 0 24px 60px rgba(26, 27, 30, 0.35);
  transform-origin: bottom right;
  animation: chat-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-panel[hidden] { display: none; }

@keyframes chat-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 640px) {
  .chat-panel {
    position: fixed;          /* opens under the header icon now, not the corner */
    inset: auto;
    right: max(1.25rem, env(safe-area-inset-right));
    top: 5rem;
    width: 380px;
    height: 560px;
    max-height: calc(100vh - 6rem);
  }
}

/* ---- console header ---- */

.chat-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--asphalt);
  border-bottom: 3px solid var(--action);
}

.chat-status { display: inline-flex; align-items: center; gap: 0.6rem; }

.chat-status-text {
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
}

.chat-blip {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--action);
  animation: chat-blip 2.4s ease-in-out infinite;
}
@keyframes chat-blip {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 31, 50, 0.7); }
  50%      { box-shadow: 0 0 0 6px rgba(185, 31, 50, 0); }
}

.chat-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem; height: 1.9rem;
  border: 0;
  background: transparent;
  color: #b9bec2;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.chat-close:hover { background: rgba(242, 244, 243, 0.12); color: var(--paper); }

/* ---- transcript ---- */

.chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-greeting {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}

.chat-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chat-chip {
  font-family: var(--body);
  font-size: 0.85rem;
  padding: 0.4rem 0.85rem;
  border: 2px solid #d7dbd9;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.chat-chip:hover { border-color: var(--action); color: var(--action-hover); }

.chat-msg-user {
  align-self: flex-end;
  max-width: 85%;
  padding: 0.65rem 0.9rem;
  background: var(--asphalt);
  color: var(--paper);
  font-size: 0.95rem;
  line-height: 1.55;
  border-radius: 14px 14px 4px 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-msg-bot {
  border-left: 3px solid var(--action);
  padding-left: 0.8rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.chat-msg-bot p { margin-bottom: 0.6rem; }
.chat-msg-bot p:last-child { margin-bottom: 0; }
.chat-msg-bot ul { margin: 0.4rem 0 0.6rem 1.1rem; }
.chat-msg-bot li { margin-bottom: 0.25rem; }
.chat-msg-bot a { color: var(--link-deep); }
.chat-msg-bot strong { font-weight: 600; }

.chat-typing { display: flex; gap: 0.35rem; padding-left: 0.8rem; }
.chat-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--action);
  animation: chat-pulse 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.chat-error {
  font-size: 0.88rem;
  color: var(--action-hover);
  padding-left: 0.8rem;
}

.chat-booked {
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--action-hover);
  padding-left: 0.8rem;
}

/* ---- input ---- */

.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.75rem;
  border-top: 2px solid #d7dbd9;
  background: var(--paper);
}

.chat-input {
  flex: 1;
  resize: none;
  min-height: 2.6rem;
  max-height: 7rem;
  padding: 0.6rem 0.75rem;
  font-family: var(--body);
  /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus */
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--white);
  border: 2px solid #d7dbd9;
}
.chat-input:focus { outline: none; border-color: var(--action); }

.chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.6rem; height: 2.6rem;
  border: 0;
  border-radius: 50%;
  background: var(--action);
  color: var(--white);
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.chat-send:hover:not(:disabled) { background: var(--action-hover); }
.chat-send:disabled { opacity: 0.3; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .chat-panel { animation: none; }
  .chat-bubble { transition: opacity 0.2s ease; }
  .chat-bubble:hover, .chat-bubble:active { transform: none; }
  .chat-blip, .chat-typing span { animation: none; }
}

/* ---------- service arc ----------
   Ordered list: the numbers carry the real event sequence (ceremony ->
   cocktail -> dinner -> MC -> dance -> production), not decoration. */

.service-arc {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2.5rem 3rem;
  counter-reset: none;
}

.service-step {
  position: relative;
  padding-top: 0.4rem;
  border-top: 3px solid var(--asphalt);
}

.service-num {
  display: block;
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--action);
  margin-bottom: 0.5rem;
}

.service-step h3 {
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.service-step p { color: var(--ink-soft); font-size: 1rem; }

.section-dark .service-step { border-top-color: var(--action); }
.section-dark .service-step h3 { color: var(--paper); }
.section-dark .service-step p { color: #b9bec2; }

/* ---------- testimonial carousel ----------
   Renders nothing until real quotes are added to the partial. The [data-empty]
   attribute is removed by js/main.js only when slides exist. */

.quote-carousel[data-empty] { display: none; }

.quote-carousel {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
}

.quote-track { position: relative; min-height: 12rem; }

.quote-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  text-align: center;
}
.quote-slide.is-active { opacity: 1; visibility: visible; position: relative; }

.quote-slide p {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 1.25rem;
}
.quote-slide p::before { content: "\201C"; }
.quote-slide p::after  { content: "\201D"; }

.quote-slide cite {
  display: block;
  font-family: var(--label);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--action);
}

.quote-dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 2rem; }

.quote-dot {
  width: 12px; height: 12px;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.quote-dot:hover { opacity: 0.8; }
.quote-dot[aria-selected="true"] { background: var(--action); border-color: var(--action); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .quote-slide { transition: none; }
}

/* ---------- proof strip ----------
   Verifiable figures, static so all are visible and liftable at once.
   `.guide-stats` is the same component under the name guides use for it, so a
   stat row inside an article and the homepage proof strip can never drift. */

.proof-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
/* The proof slot holds only the quote carousel. While that is empty the section
   would still paint a blank dark band, so hide the whole section with it. */
.proof-section:has(> .container > .quote-carousel[data-empty]:only-child) { display: none; }

.proof-strip,
.guide-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.5rem 2rem;
}

.proof-item { text-align: center; }

.proof-num {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 1;
  color: var(--action);
  display: block;
  margin-bottom: 0.6rem;
}

.proof-plus { font-size: 0.55em; vertical-align: super; margin-left: 0.05em; }

.proof-item dd {
  font-family: var(--label);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  color: #b9bec2;
  max-width: 15rem;
  margin-inline: auto;
}

.section-light .proof-item dd { color: var(--ink-soft); }

/* A stat row inside an article body sits on paper, whatever section wraps it. */
.guide-body .proof-item dd { color: var(--ink-soft); }
.guide-stats { margin: 2.5rem 0 3rem; }

/* Guide figures are usually money, times or percentages rather than the
   homepage's single digits, so the display size steps down to fit them. The
   track minimum drops too: a stat row sits inside the 46rem article measure
   rather than the full container, and at 180px a four-stat row wrapped 3 + 1
   and stranded the last figure on its own line. */
.guide-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.guide-stats .proof-num { font-size: clamp(2.2rem, 5vw, 3.4rem); }


/* ==========================================================================
   GUIDES
   Components for /guides/. One article per URL, single column, built to be
   lifted by an AI platform as much as read by a person. The house livery
   still applies: hard rules, no soft shadows, orange and blue as the only
   accents. See .planning/content/GUIDES-STRATEGY.md section 5 for which
   component maps to which part of the article pattern.
   ========================================================================== */

/* ---------- article body ----------
   A measured single column. Long-form prose gets its own reading width
   rather than the 1400px site container, which is far too wide for text. */

/* Full width of the container, not a narrow measure. Bob 2026-07-27: a capped
   column left the right third of the page empty and that reads as wasted space.
   Long lines are the trade, so the type steps up with the viewport and the
   line-height opens up to keep the return sweep findable. */
.guide-body {
  width: 100%;
  font-size: clamp(1.08rem, 0.95rem + 0.35vw, 1.3rem);
  line-height: 1.8;
}

.guide-body > p { margin-bottom: 1.4rem; }

.guide-body h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 3rem 0 1.1rem;
  padding-top: 1.4rem;
  border-top: 3px solid var(--asphalt);
}

.guide-body h3 {
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--action-hover);
  margin: 2rem 0 0.7rem;
}

.guide-body ul,
.guide-body ol { margin: 0 0 1.4rem 1.4rem; }

.guide-body li { margin-bottom: 0.6rem; }

.guide-body a {
  color: var(--link-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--blue-tint);
}
.guide-body a:hover { color: var(--action-hover); border-bottom-color: var(--action); }

.guide-body strong { font-weight: 700; color: var(--ink); }

/* dark-section overrides, so an article is safe on either background */
.section-dark .guide-body { color: #c6cacd; }
.section-dark .guide-body h2 { color: var(--paper); border-top-color: var(--blue-tint); }
.section-dark .guide-body h3 { color: var(--blue-tint); }
.section-dark .guide-body strong { color: var(--paper); }
.section-dark .guide-body a { color: var(--blue-tint); }

/* ---------- article tables ----------
   Wrapped in .guide-table so a wide table scrolls inside its own box instead
   of pushing the page sideways. The wrapper is the scroller, the table is not,
   which is what keeps the body from ever scrolling horizontally on a phone. */

.guide-table {
  overflow-x: auto;
  margin: 2rem 0 2.5rem;
  border: 3px solid var(--asphalt);
  background: var(--white);
}

.guide-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  min-width: 34rem;
}

.guide-table th {
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  background: var(--asphalt);
  color: var(--paper);
  padding: 0.75rem 1rem;
  vertical-align: bottom;
}

.guide-table td {
  padding: 0.75rem 1rem;
  border-top: 1px solid #d8dedd;
  color: var(--ink-soft);
  line-height: 1.55;
  vertical-align: top;
}

.guide-table tr td:first-child {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.guide-table tbody tr:nth-child(even) td { background: #f7f9f8; }

.section-dark .guide-table { border-color: var(--blue-tint); background: var(--asphalt-soft); }
.section-dark .guide-table th { background: var(--blue-tint); color: var(--ink); }
.section-dark .guide-table td { color: #c6cacd; border-top-color: #34383c; }
.section-dark .guide-table tr td:first-child { color: var(--paper); }
.section-dark .guide-table tbody tr:nth-child(even) td { background: #2b2e31; }

/* ---------- byline and updated date ----------
   Byline is the band, never a person, and there is only ever an Updated date.
   Kept in one element so the visible line and the Article schema stay a
   single, obvious paired edit. */

.guide-meta {
  font-family: var(--label);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.guide-meta .guide-byline { color: var(--action-hover); }
.section-dark .guide-meta { color: #b9bec2; }
.section-dark .guide-meta .guide-byline { color: var(--action); }

/* ---------- TL;DR card ----------
   Conclusions, not a description of the article. Deliberately UNLABELED: no
   "TL;DR" or "In this article" text renders, because the card exists to be
   the first thing a platform extracts, and a label is not part of the
   answer. Three to five bullets, under 100 words total. */

.guide-tldr {
  background: var(--white);
  border: 3px solid var(--asphalt);
  border-left-width: 10px;
  border-left-color: var(--action);
  padding: clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 2rem);
  margin: 0 0 2.5rem;
}

.guide-tldr ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guide-tldr li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.55;
}
.guide-tldr li:last-child { margin-bottom: 0; }

.guide-tldr li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.85rem;
  height: 4px;
  background: var(--link-deep);
}

/* ---------- key callout ----------
   Exactly one per guide, placed after the hook. This is the single sentence
   we want an AI platform to lift, so it stays plain readable prose: no
   display face, no uppercase, no skew. It must survive being quoted with no
   surrounding context, which means it names its own subject. */

.guide-key {
  background: var(--asphalt);
  color: var(--paper);
  border-left: 10px solid var(--blue-tint);
  padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.25rem, 3vw, 2rem);
  margin: 2.5rem 0;
}

.guide-key p {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  font-weight: 500;
}

.section-dark .guide-key {
  background: var(--asphalt-soft);
  border-left-color: var(--action);
}

/* ---------- two-column contrast ----------
   Paired or opposing options, one per column. Collapses to a single column
   on narrow screens, where the columns simply read in order. */

.guide-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2.5rem 0;
}

@media (min-width: 700px) {
  .guide-cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

.guide-col {
  background: var(--white);
  border: 3px solid var(--asphalt);
  border-top-width: 10px;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}

.guide-col:nth-child(odd) { border-top-color: var(--action); }
.guide-col:nth-child(even) { border-top-color: var(--link-deep); }

.guide-col h3 {
  margin-top: 0;
  margin-bottom: 0.7rem;
  color: var(--ink);
}

.guide-col p,
.guide-col li { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.guide-col > :last-child { margin-bottom: 0; }

/* ---------- citations ----------
   Every source here was fetched and quote-verified at write time. Numbered in
   the display face so the list reads as evidence rather than as a footer. */

.guide-citations {
  list-style: none;
  counter-reset: cite;
  margin: 0;
  padding: 0;
}

.guide-citations li {
  counter-increment: cite;
  position: relative;
  padding-left: 3.2rem;
  margin-bottom: 1.1rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.guide-citations li::before {
  content: counter(cite);
  position: absolute;
  left: 0;
  top: -0.1em;
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--action);
}

.guide-citations cite {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}

.guide-citations a {
  color: var(--link-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--blue-tint);
  overflow-wrap: anywhere;
}
.guide-citations a:hover { color: var(--action-hover); border-bottom-color: var(--action); }

.section-dark .guide-citations li { color: #b9bec2; }
.section-dark .guide-citations cite { color: var(--paper); }
.section-dark .guide-citations a { color: var(--blue-tint); }

/* ---------- index listing ----------
   Rows of text, blog-archive style, not a card grid. Bob 2026-07-27. A list
   of ten things wants to read as a list: one per line, scanned top to bottom,
   with the titles all starting at the same left edge. Cards made the eye
   travel in a grid and gave equal visual weight to a two-word cluster and a
   ten-guide one. */

.guide-rows,
.service-rows {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  border-top: 3px solid var(--asphalt);
}

.guide-rows li,
.service-rows li { border-bottom: 1px solid #d8dedd; }

.guide-row,
.service-row {
  display: block;
  position: relative;
  padding: 1.35rem 0 1.35rem 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.15s ease;
}

/* A racing stripe that slides in on hover. The row itself stays flat, so a
   long list does not shimmer as the pointer crosses it. */
.guide-row::before,
.service-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  bottom: 1.35rem;
  width: 5px;
  background: var(--action);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.guide-row:hover,
.guide-row:focus-visible,
.service-row:hover,
.service-row:focus-visible { padding-left: 1.1rem; }

.guide-row:hover::before,
.guide-row:focus-visible::before,
.service-row:hover::before,
.service-row:focus-visible::before { opacity: 1; }

/* Restated because .guide-body h3 would otherwise make every title orange,
   which turns the whole index into one accent colour. */
.guide-row h3,
.service-row h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.35rem;
}

.guide-row:hover h3,
.guide-row:focus-visible h3,
.service-row:hover h3,
.service-row:focus-visible h3 { color: var(--action-hover); }

/* No measure cap here. One-line blurbs at a 62ch cap were breaking two words
   onto a second line on wide screens, which looks like a mistake in a list
   where every other row is one line. */
.guide-row p,
.service-row p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

.section-dark .guide-rows,
.section-dark .service-rows { border-top-color: var(--blue-tint); }
.section-dark .guide-rows li,
.section-dark .service-rows li { border-bottom-color: #34383c; }
.section-dark .guide-row h3 { color: var(--paper); }
.section-dark .guide-row:hover h3 { color: var(--action); }
.section-dark .guide-row p,
.section-dark .service-row p { color: #b9bec2; }

@media (prefers-reduced-motion: reduce) {
  .guide-row { transition: none; }
  .guide-row:hover,
  .guide-row:focus-visible { padding-left: 0; }
  .guide-row::before { transition: none; }
}

/* ---- services subnav -------------------------------------------------------
   Bob 2026-07-28 asked for a real subnav across the event-services section
   rather than links buried in body copy; since 2026-10-05 every section
   (/band/, /dj/, /karaoke/) gets one. Generated from PAGE_ORDER by
   gen_service_subnav in build.py, so it cannot point at a page that does not
   exist. The class name is historical.

   Horizontal scroll rather than wrap: the label set grows as event types are
   added, and a nav that reflows to three ragged lines on a phone reads as
   broken. The current page is a span, not a link, so it never links to
   itself. */

.services-subnav {
  margin: 0 0 2.25rem;
  border-bottom: 3px solid var(--asphalt);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.services-subnav::-webkit-scrollbar { display: none; }

.services-subnav ul {
  display: flex;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.services-subnav a,
.services-subnav-here {
  display: block;
  padding: 0.7rem 0.95rem;
  font-family: var(--display-alt, var(--display));
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
}

.services-subnav a { color: var(--ink-soft); transition: color 0.15s ease, border-color 0.15s ease; }
.services-subnav a:hover,
.services-subnav a:focus-visible { color: var(--action-hover); border-bottom-color: var(--action); }
.services-subnav-here { color: var(--ink); border-bottom-color: var(--action); }

.section-dark .services-subnav { border-bottom-color: var(--blue-tint); }
.section-dark .services-subnav a { color: #b9bec2; }
.section-dark .services-subnav a:hover,
.section-dark .services-subnav a:focus-visible { color: var(--paper); }
.section-dark .services-subnav-here { color: var(--paper); }

/* A screen-reader-only caption. The 510-row song table needs a caption to be
   navigable without sight, and it would be redundant on screen under a heading
   that already says the same thing. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The full shared-song table runs to 510 rows. Capped and scrolled so it does
   not bury the rest of the guide under three metres of table, with the header
   pinned so the Lists column still means something 400 rows down. */
.guide-table-tall {
  max-height: 32rem;
  overflow-y: auto;
  border: 3px solid var(--asphalt);
}

.guide-table-tall table { margin: 0; }

.guide-table-tall thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--asphalt);
  color: var(--paper);
}

/* Provenance line under a table of somebody else's numbers. Small and quiet,
   but it ships on the page rather than living only in a source comment: every
   figure on the cost guide belongs to a named publisher and the reader should
   be able to see that without reading the citations. */
.guide-note {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #d8dedd;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ===========================================================================
   2026-08-03: fixes from the live-site review.

   Each block says which finding it closes so none of it looks arbitrary later.
   =========================================================================== */

/* ---- section submenu toggles (one per dropdown) ----------------------------
   FINDING: the desktop toggle measured about 4x4 CSS pixels and was near
   impossible to hit.

   CAUSE: js/main.js builds the button for the mobile disclosure panel, but the
   only rule that sized it (44x44) lived inside the mobile media query. On
   desktop the button still rendered, unstyled, collapsing to its 10px ::before
   arrow with no box around it.

   FIX: the button does not belong on desktop at all. The dropdown already
   opens on :hover for pointers and :focus-within for keyboards, and coarse
   pointers fall back to the plain link to each section hub. So it is hidden by
   default and only the mobile panel turns it on, one per dropdown, where it
   keeps the 44x44 target. */
.nav-submenu-toggle { display: none; }

/* ---- floating chat bubble --------------------------------------------------
   FINDING: the 72px bubble overlapped the homepage booking CTA and the booking
   form fields at 390px, and intruded over the venue/city field on desktop.

   FIX: respect the safe-area inset, and on narrow screens shrink it and tuck it
   into the corner so it clears form controls. .chat-root also drops its
   z-index below a focused field's outline so it can never hide a validation
   message. */
.chat-root {
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
}

@media (max-width: 640px) {
  .chat-root {
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
  .chat-bubble { width: 4.25rem; height: 4.25rem; }
  .chat-bubble svg { width: 32px; height: 32px; }
  /* the form is the conversion path; the bubble is not allowed to sit on it */
  .book-form { padding-bottom: 4.5rem; }
}

/* ---- booking form: required marks, hints and inline errors ------------------
   FINDING: required fields had no visible indicator, and validation relied on
   transient native bubbles with no persistent inline text, no aria-invalid and
   no error summary. */
.form-legend {
  font-size: 0.9rem;
  color: var(--ink-soft, #6b7176);
  margin-bottom: 1rem;
}

.req-mark {
  color: var(--action);
  font-weight: 700;
  margin-left: 0.15rem;
}

.field-hint {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft, #6b7176);
  margin-top: 0.3rem;
  font-weight: 400;
}

.field-err {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--racing-red);
  margin-top: 0.35rem;
}

.field-err[hidden] { display: none; }

.book-form .is-invalid {
  border-color: var(--racing-red) !important;
  background: var(--red-light);
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.25rem 0 1rem;
  font-weight: 600;
  cursor: pointer;
}

.form-check input {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  accent-color: var(--action);
}

.form-privacy {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft, #6b7176);
  margin-top: 0.9rem;
}

.form-privacy a { color: inherit; text-decoration: underline; }
.form-privacy a:hover { color: var(--action); }

.form-errsum {
  margin-top: 0.9rem;
  padding: 0.7rem 0.9rem;
  border-left: 4px solid var(--racing-red);
  background: var(--red-light);
  color: var(--racing-red);
  font-weight: 600;
}

.form-errsum[hidden] { display: none; }

/* ---- chat: automation disclosure ------------------------------------------
   FINDING: the panel said "Online", which reads as a human, and disclosed
   nothing about automation, retention or the handoff to a person. */
.chat-privacy {
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0.75;
  margin-top: 0.6rem;
}

.chat-privacy a { color: inherit; text-decoration: underline; }

/* ---- venue and client strip ------------------------------------------------
   Same empty-by-default contract as .quote-carousel: renders nothing at all
   until real, permitted names are added to the partial. */
.venue-strip[data-empty] { display: none; }

.venue-strip { margin-top: 3rem; text-align: center; }

.venue-strip-head {
  font-family: var(--label);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-tint);
  margin-bottom: 1.2rem;
}

.venue-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 2rem;
  list-style: none;
  padding: 0;
}

.venue-item {
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---- hero badge on mobile --------------------------------------------------
   FINDING: the "Now booking 2026 dates" sticker crowded the eyebrow text and
   made the opening proposition look truncated at 390px.

   FIX: below 640px it stops being an absolutely positioned sticker and becomes
   its own row above the wordmark, which is what it was competing with. */
@media (max-width: 640px) {
  .hero-badge {
    position: static;
    display: inline-block;
    margin: 0 0 1rem;
    transform: rotate(-2deg);
  }
}

/* ---- setlist rows ----------------------------------------------------------
   FINDING: long titles and credits overflowed their narrow columns and clipped,
   worst around "FourFiveSeconds" by Rihanna, Kanye West & Paul McCartney.

   CAUSE: .artist was nowrap at every width except under 560px, but the grid
   packs columns from 260px, so a two- or three-column layout on a laptop hit
   the same overflow the phone did. A flex item also refuses to shrink below its
   content width without min-width: 0.

   FIX: let the credit wrap at every width and let both parts shrink. */
.setlist-col li { flex-wrap: wrap; min-width: 0; }
.setlist-col li .song { min-width: 0; overflow-wrap: anywhere; }

.setlist-col li .artist {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ---- guide rows are links, so they should look like links ------------------
   FINDING: whole guide rows were clickable but looked like ordinary heading
   and body text, with no affordance and weak focus state. */
.guide-row p::after,
.service-row p::after {
  content: " Read guide \2192";
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
  white-space: nowrap;
}

.service-row p::after { content: " Read more \2192"; }

/* The stripe already moves on hover; the focus ring has to be visible on its
   own for anyone arriving by keyboard rather than pointer. */
.guide-row:focus-visible,
.service-row:focus-visible {
  outline: 3px solid var(--blue-tint);
  outline-offset: 3px;
}

/* ---- lightbox caption ------------------------------------------------------
   FINDING: the lightbox had sound modal semantics and alt text but no visible
   caption describing the photo. */
.lb-caption {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--paper, #f2f4f3);
  opacity: 0.85;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

.lb-caption:empty { display: none; }

/* Production-status chip on the video placeholder. Replaces the play roundel,
   which read as a control and was not one. */
.video-ph-status {
  display: inline-block;
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--asphalt);
  background: var(--blue-tint);
  padding: 0.3rem 0.8rem;
  margin-bottom: 0.9rem;
}

.video-ph-sub a { color: inherit; text-decoration: underline; }

/* ---- booking form layout corrections --------------------------------------
   .book-form label is `display: flex; flex-direction: column`, which turns any
   child element into its own row. Three consequences had to be handled rather
   than fought:
     - the required asterisk dropped onto a line of its own, so label text and
       mark are now wrapped together in one .label-text flex item;
     - the "date is not set yet" checkbox row inherited the column direction
       and stacked the box above its own text;
     - hints and errors inherited the label's uppercase letterspaced styling,
       which made a sentence unreadable. */
.label-text { display: block; }

.book-form .form-check {
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
}

.book-form .field-hint,
.book-form .field-err,
.book-form .form-legend,
.book-form .form-privacy,
.book-form .form-errsum {
  font-family: var(--body);
  text-transform: none;
  letter-spacing: normal;
}

/* A single-field row must not be forced into a half-width grid column. */
.form-row.form-row-one { grid-template-columns: 1fr; }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}

/* The launcher steps aside while a booking form or CTA banner is on screen.
   See the IntersectionObserver in js/chat.js for why this exists. Kept as
   opacity + pointer-events rather than display:none so it fades rather than
   popping, and so the panel is unaffected when it is open. */
.chat-root.is-yielding .chat-bubble {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.7);
}

@media (prefers-reduced-motion: reduce) {
  .chat-root.is-yielding .chat-bubble { transform: none; }
}

/* ---------- hero split: copy left, promo video right (2026-09-30) ----------
   Copy one third, video two thirds inside the existing hero-inner width. The "Now booking"
   sticker moves onto the video's top corner. Stacks below 900px. */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 2fr;   /* copy one third, video two thirds */
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero-split .wordmark { font-size: clamp(2.8rem, 4.9vw, 5.2rem); }
.hero-split .band-plate { font-size: clamp(1.5rem, 2.9vw, 2.9rem); }
.hero-video { position: relative; min-width: 0; z-index: 3; }
.hero-video .hero-badge { top: -2.2rem; right: -0.75rem; z-index: 4; }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-video { margin-top: 2.5rem; }
  .hero-video .hero-badge { top: -1.9rem; right: 0.5rem; }
}

/* ---------- chat launcher in the header (2026-09-30) ----------
   Replaces the floating corner bubble. Sits just left of the menu on desktop
   and beside the hamburger on phones. */
.chat-bubble { display: none !important; }
.nav-chat {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; flex: none;
  width: 56px; height: 56px;           /* icon plus the word, still a touch target */
  margin-left: auto;
  margin-right: clamp(0.75rem, 2vw, 1.75rem);   /* breathing room before the menu */
  border: 0; border-radius: 0;          /* square, like the hamburger (Bob) */
  background: var(--action); color: var(--white); cursor: pointer;
  box-shadow: 3px 3px 0 var(--asphalt);
  transition: background 0.2s ease, transform 0.2s ease;
}
.nav-chat:hover { background: var(--action-hover); }
.nav-chat:focus-visible { outline: 3px solid var(--blue-tint); outline-offset: 3px; }
.nav-chat[aria-expanded="true"] { background: var(--asphalt); }
.nav-chat svg { width: 22px; height: 22px; }
.nav-chat-label {
  font-family: var(--label); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.04em; line-height: 1;
}
@media (max-width: 640px) {
  .nav-chat { width: 52px; height: 52px; margin-right: 0.75rem; }
  .nav-toggle { width: 52px; height: 52px; }   /* same size as the chat button (Bob) */
  .nav-chat svg { width: 20px; height: 20px; }
}
.nav-inner > .nav-links { margin-left: 0; }
.chat-panel { transform-origin: top right; }

/* Race program, October 2026. Shared roles and composition rules. */
@font-face {
  font-family: "Barlow Fallback"; src: local("Arial"); size-adjust: 94%;
  ascent-override: 103%; descent-override: 22%; line-gap-override: 0%;
}
:root {
  --body: "Barlow", "Barlow Fallback", Arial, sans-serif;
  --label: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --display: "Racing Sans One", "Arial Black", sans-serif;
  --surface: #fff; --surface-muted: #e6eceb; --rule: #b4bdbf;
  --link: var(--racing-blue); --accent-text: var(--racing-red);
  --link-deep: var(--racing-blue); --action-hover: var(--red-deep);
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem;
  --space-4: 2rem; --space-6: 3rem; --space-8: 4rem;
  --gutter: clamp(1rem, 4vw, 3.5rem); --content-width: 1328px;
  --type-small: .875rem; --type-body: 1.125rem;
  --type-card: clamp(1.65rem, 2.2vw, 2.1rem);
  --type-section: clamp(1.9rem, 3.4vw, 3.2rem);
  --type-title: clamp(2.7rem, 5.4vw, 5.2rem);
  --radius-card: 3px; --radius-control: 2px;
  --shadow-print: 6px 6px 0 var(--blue-tint);
  --motion-fast: 160ms; --motion-ease: cubic-bezier(.2,.7,.2,1);
}
body { font-size: var(--type-body); overflow-x: clip; }
main { counter-reset: program; }
.container, .nav-inner { max-width: var(--content-width); margin-inline: auto; }
.section { padding: clamp(2.75rem, 5vw, 5rem) var(--gutter); }
.section-light { background-image: radial-gradient(#1a1b1e0b .6px, transparent .6px); background-size: 5px 5px; }
.section-dark { --link: var(--blue-tint); --accent-text: var(--blue-tint); }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 5px; }
.section-dark :focus-visible, .footer :focus-visible { outline-color: var(--blue-tint); }
h2 { font-size: var(--type-section); letter-spacing: -.025em; text-transform: none; }
h1.page-title { font-size: var(--type-title); letter-spacing: -.025em; line-height: 1.02; text-transform: none; }
h1,h2,h3 { text-wrap: balance; overflow-wrap: break-word; }
.eyebrow { color: var(--accent-text); font-size: 1rem; letter-spacing: .13em; }
.section-lede { font-size: clamp(1.125rem, 1.35vw, 1.35rem); line-height: 1.65; }
.btn { border-radius: var(--radius-control); transform: none; letter-spacing: .055em; border-width: 2px; min-height: 48px; }
.btn-solid { color: var(--ink); border-color: var(--asphalt); box-shadow: 4px 4px 0 var(--asphalt); }
.btn-solid:hover { color: var(--paper); }
.btn-line { border-width: 2px; }
.cta-banner { color: var(--ink); padding: var(--space-8) var(--gutter); background-image: repeating-linear-gradient(-55deg,transparent 0 220px,#1a1b1e09 220px 280px); }
.cta-line { transform: none; max-width: 28ch; }
.nav { padding-inline: var(--gutter); border-bottom-width: 2px; }
.nav-chat { background: var(--action); color: var(--ink); box-shadow: none; border: 2px solid var(--ink); }
.nav-chat:hover,.nav-chat[aria-expanded="true"] { color: var(--white); }
.nav-list { gap: clamp(.75rem,1.6vw,1.5rem); }
.nav-cta { background: var(--action); border: 2px solid var(--ink); color: var(--ink) !important; }
.nav-cta:hover { background: var(--asphalt); color: var(--white) !important; }
.nav-links a:hover { color: var(--accent-text); }
.hero-inner { max-width: calc(var(--content-width) + 2 * var(--gutter)); padding-inline: var(--gutter); padding-block: 3.5rem; }
.hero-split { grid-template-columns: minmax(0, .85fr) minmax(0,1.15fr); gap: 4rem; }
.hero-split .wordmark { font-size: clamp(4rem,6.8vw,6.8rem); line-height: .9; margin-block: 1.5rem; }
.hero-split .band-plate { font-size: clamp(2rem,3vw,3rem); }
.hero-tagline { font-size: 1.4rem; line-height: 1.3; }
.hero-sub { font-size: 1.125rem; line-height: 1.65; }
.hero-ctas { gap: 1rem; }
.hero-video .video-frame { box-shadow: 10px 10px 0 var(--action), 20px 20px 0 var(--asphalt); }
.hero-badge { border-style: solid; border-radius: 3px; letter-spacing: .06em; }
.hero .checker { height: 16px; background-size: 16px 16px; }
/* The existing stripe, speed-line, wordmark and glint animations remain intact. */
.program-opener { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: clamp(2rem,4vw,4rem); align-items: center; padding-bottom: 3rem; border-bottom: 2px solid currentColor; margin-bottom: 3rem; }
.opener-copy { min-width: 0; }
.opener-copy > p:last-child { margin-top: 1.5rem; }
.opener-copy > p > a:has(strong) { display: inline-block; padding: .6rem 1rem; background: var(--action); color: var(--ink); border: 2px solid var(--ink); text-decoration: none; font-family: var(--label); font-size: 1.25rem; }
.program-cover { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16/10; width: 100%; background: var(--blue-tint); border-radius: var(--radius-card); color: var(--asphalt); }
.program-cover::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(#1a1b1e26 .7px,transparent .7px) 0 0/4px 4px; }
.program-cover::after { content:""; position:absolute; left:0; right:0; bottom:0; height:12px; background: repeating-conic-gradient(var(--paper) 0 25%,var(--asphalt) 0 50%) 0 0/24px 24px; }
.program-cover img { width: 100%; height:100%; object-fit:cover; object-position: center 15%; }
.cover-number { position:absolute; left:7%; top:4%; z-index:1; font-family:var(--display); font-size:clamp(6rem,13vw,13rem); line-height:1; letter-spacing:-.08em; }
.cover-disc { position:absolute; width:48%; aspect-ratio:1; border:2px solid currentColor; border-radius:50%; right:-9%; bottom:-20%; box-shadow:0 0 0 12px #f2f4f380,0 0 0 14px currentColor,0 0 0 30px #f2f4f350; }
.cover-stripes { position:absolute; top:-40%; right:22%; width:18%; height:200%; transform:rotate(32deg); background:linear-gradient(90deg,var(--action) 0 58%,var(--paper) 58% 68%,var(--asphalt) 68% 88%,var(--paper) 88% 100%); }
.has-photo .cover-stripes { right:4%; width:6%; opacity:.9; }
.tone-1 { background:var(--action); }
.tone-1 .cover-stripes { background:linear-gradient(90deg,var(--blue-tint) 0 58%,var(--paper) 58% 68%,var(--asphalt) 68% 88%,var(--paper) 88% 100%); }
.tone-2 { background:var(--paper); }
.section-number { display:block; font-family:var(--display); font-size:clamp(3rem,6vw,6rem); line-height:1; color:var(--accent-text); letter-spacing:-.06em; }
.numbered-opener { display:grid; grid-template-columns: 100px minmax(0,1fr); gap:2rem; border-top:2px solid currentColor; padding-top:1.75rem; }
.section-heading-copy { min-width:0; }
.section-heading-copy > ul { margin-top:2rem; }
.section-heading-copy > ul, .chapter-copy > ul:not([class]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 2rem; list-style:none; margin-left:0; }
.section-heading-copy > ul > li, .chapter-copy > ul:not([class]) > li { border-top:2px solid var(--blue-tint); padding:1rem 0; }
.section-heading-copy > ul strong, .chapter-copy > ul strong { display:block; }
.program-chapter { min-width:0; margin:3.5rem 0; border-top:1px solid var(--rule); padding-top:2rem; }
.feature-chapter { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(2rem,4vw,4rem); }
.chapter-heading { min-width:0; }
.guide-body .chapter-heading h2, .chapter-heading h2 { border:0; padding:0; margin:.75rem 0 0; font-size:var(--type-section); text-transform:none; }
.chapter-heading .section-number { font-size:3.5rem; }
.chapter-copy { min-width:0; }
.chapter-copy > p { margin:0 0 1.25rem; }
.chapter-copy > :last-child { margin-bottom:0; }
.guide-body { font-size:var(--type-body); line-height:1.75; }
.chapter-wide { display:block; }
.chapter-wide .chapter-heading { display:flex; gap:1.5rem; align-items:start; margin-bottom:2rem; }
.chapter-wide .chapter-heading h2 { margin:0; }
.service-rows { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; border:0; margin:2.5rem 0; }
.service-rows > li { display:flex; min-width:0; border:0; }
.service-row { width:100%; display:flex; flex-direction:column; padding:0 0 1.5rem; color:var(--ink); background:var(--white); border:1px solid var(--rule); border-bottom:5px solid var(--action); border-radius:var(--radius-card); overflow:hidden; }
.service-row .program-cover { border-radius:0; aspect-ratio:16/10; margin-bottom:1.5rem; }
.service-row h3, .service-row p { padding-inline:1.5rem; }
.service-row h3 { font-family:var(--label); font-size:var(--type-card); font-weight:700; text-transform:none; margin:0 0 .75rem; }
.service-row p { font-size:1.0625rem; line-height:1.6; }
.service-row::before { display:none; }
.service-row:hover,.service-row:focus-visible { padding-left:0; border-color:var(--asphalt); }
.service-row h3 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em; }
.section-dark .service-row h3 { color:var(--ink); }
.section-dark .service-row p { color:var(--ink-soft); }
.service-row p::after { color:var(--accent-text); display:block; margin-top:1rem; }
.service-row .cover-number { font-size:7rem; }
.service-rows > li:only-child { grid-column:1/-1; }
.service-rows > li:only-child .service-row { display:grid; grid-template-columns:1fr 1fr; }
.service-rows > li:only-child .program-cover { grid-row:span 2; margin:0; }
/* Profile cards take their visual language from a printed driver credential. */
.band-grid { gap:1.5rem; }
.driver-card { border-width:1px; box-shadow:none; border-radius:var(--radius-card); overflow:hidden; }
.driver-photo { aspect-ratio:4/3; border-bottom:8px solid var(--action); }
.driver-photo::after { display:none; }
.driver-plate { padding:1.5rem; }
.driver-plate h3 { font-family:var(--label); font-size:2.1rem; font-weight:700; text-transform:none; }
.driver-role { display:inline-block; border:1px solid var(--ink); padding:.15rem .6rem; background:var(--blue-tint); color:var(--ink); margin:.75rem 0 1rem; font-size:.9rem; }
.driver-bio { font-size:1.0625rem; line-height:1.65; }
.driver-bio a { color:var(--link); }
/* Open FAQ answers, never hidden behind an accordion. */
.faq-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 3rem; margin-top:1.5rem; }
.faq-item { border-top:2px solid var(--blue-tint); padding:1.5rem 0 2rem; min-width:0; }
.faq-item h3,.guide-body .faq-item h3 { font-family:var(--label); font-size:1.65rem; font-weight:700; text-transform:none; letter-spacing:0; line-height:1.2; margin:0 0 .8rem; color:var(--ink); }
.section-dark .faq-item h3 { color:var(--paper); }
.faq-item p { font-size:1.125rem; line-height:1.7; }
.guide-tldr { background:var(--blue-tint); color:var(--ink); border:0; border-left:8px solid var(--action); box-shadow:var(--shadow-print); padding:1.5rem 2rem; }
.guide-tldr ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 2rem; }
.guide-tldr li { margin:0; }
.guide-key { border:2px solid var(--asphalt); border-left:8px solid var(--action); background:var(--paper); padding:2rem; margin:2.5rem 0; }
.guide-key p { color:var(--ink); font-size:1.35rem; font-weight:600; line-height:1.5; }
.guide-stats { background:var(--blue-tint); color:var(--ink); padding:2rem; gap:2rem; }
.guide-stats .proof-num { color:var(--ink); font-size:clamp(2.7rem,4vw,4rem); }
.guide-stats .proof-item dd { color:var(--ink); }
.guide-table { border-width:1px; border-top:5px solid var(--action); border-radius:var(--radius-card); }
.guide-table th { padding:1rem; font-size:1rem; }
.guide-table td { padding:1rem; font-variant-numeric:tabular-nums; }
.guide-table tbody tr:nth-child(even) td { background:var(--blue-light); }
.guide-table tr td:first-child { white-space:normal; }
.guide-table:focus-visible { outline:3px solid var(--link); }
.guide-cols { gap:1.5rem; }
.guide-col { border-top:5px solid var(--action); background:var(--surface); padding:1.5rem; }
.section-dark .guide-col { background:var(--asphalt-soft); }
/* Blog archive: one lead story, then chronological rows, filterable by category. */
.page-blog .program-opener { margin-bottom:2rem; }
.page-blog .guide-body > p { max-width:none; }
.blog-index { margin:3rem 0; }
.blog-filters { display:flex; flex-wrap:wrap; gap:.6rem; padding:1.5rem 0; border-block:1px solid var(--rule); margin-bottom:2rem; }
.blog-filters a { display:flex; align-items:center; min-height:44px; border:1px solid var(--asphalt); color:var(--ink); padding:.45rem .9rem; font-family:var(--label); font-weight:600; font-size:1.1rem; background:var(--paper); text-decoration:none; }
.blog-filters a[aria-current="true"] { background:var(--asphalt); color:var(--paper); }
.post-grid, .guide-body .post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem 1.5rem; list-style:none; padding:0; margin:0; }
.post-card { min-width:0; display:flex; border:1px solid var(--rule); background:var(--white); border-radius:var(--radius-card); overflow:hidden; }
.post-link, .guide-body .post-link { display:flex; flex-direction:column; width:100%; color:var(--ink); text-decoration:none; border:0; }
.post-link:hover, .guide-body .post-link:hover { color:var(--ink); }
.post-link:focus-visible { outline-offset:-5px; }
.post-link:hover h3 { color:var(--accent-text); text-decoration-thickness:2px; }
.post-card-copy { padding:1.5rem; display:flex; flex:1; flex-direction:column; align-items:start; }
.post-category { font-family:var(--label); font-size:1rem; font-weight:600; color:var(--accent-text); margin-bottom:.8rem; }
.post-card h3, .guide-body .post-card h3 { color:var(--ink); font-family:var(--label); font-size:var(--type-card); font-weight:700; text-transform:none; letter-spacing:-.01em; line-height:1.15; margin:0 0 1rem; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em; }
.post-card p { font-size:1.0625rem; line-height:1.6; margin:0 0 1.5rem; color:var(--ink-soft); }
.post-details { display:flex; flex-wrap:wrap; gap:.4rem 1rem; justify-content:space-between; width:100%; margin-top:auto; padding-top:1rem; border-top:1px solid var(--rule); color:var(--ink-soft); font-family:var(--label); font-size:1rem; }
.post-card .cover-number { font-size:7.5rem; }
.post-featured { grid-column:1/-1; background:var(--asphalt); }
.post-featured .post-link { display:grid; grid-template-columns:1.1fr 1fr; }
.post-featured .program-cover { height:100%; min-height:340px; aspect-ratio:auto; }
.post-featured .cover-number { font-size:clamp(9rem,15vw,15rem); }
.post-featured .post-card-copy { padding:clamp(1.5rem,3vw,3rem); }
.post-featured h3, .guide-body .post-featured h3 { color:var(--paper); font-size:clamp(2rem,3.2vw,3.5rem); }
.post-featured p,.post-featured .post-details { color:#d0d6d8; }
.post-featured .post-category { color:var(--blue-tint); }
.post-featured .post-link:hover h3 { color:var(--blue-tint); }
.decal { display:inline-block; background:var(--blue-tint); color:var(--ink); font-family:var(--label); font-size:1rem; font-weight:700; border:1px solid var(--ink); padding:.25rem .75rem; border-radius:2px; margin-bottom:1rem; }
.post-featured .decal { background:var(--action); }
.post-card[hidden] { display:none; }
/* Article typography and navigation are separate columns, not unused margins. */
.page-post .program-opener { grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); }
.page-post .page-title { font-size:clamp(2.5rem,4.2vw,4.4rem); }
.post-header-meta { display:flex; align-items:center; gap:1rem; font-family:var(--label); font-size:1.125rem; margin-top:1rem; }
.post-header-meta .decal { margin:0; }
.guide-meta { margin-top:1.5rem; margin-bottom:0; text-transform:none; font-size:1.1rem; letter-spacing:.015em; }
.article-layout { display:grid; grid-template-columns:minmax(200px,.7fr) minmax(0,2fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.article-toc { position:sticky; top:110px; max-height:calc(100vh - 140px); overflow-y:auto; border-top:6px solid var(--action); font-family:var(--label); font-size:1.125rem; line-height:1.25; }
.article-toc ol { list-style:none; margin:0; padding:0; }
.article-toc li { border-bottom:1px solid var(--rule); }
.article-toc a { display:block; padding:.85rem 0; color:var(--ink); text-decoration:none; }
.article-toc a:hover { text-decoration:underline; }
.page-post .guide-body { font-size:1.1875rem; line-height:1.8; }
.article-chapter .chapter-heading { display:flex; gap:1.25rem; align-items:baseline; margin-bottom:1.5rem; }
.article-chapter .chapter-heading h2 { font-family:var(--label); font-size:clamp(1.9rem,2.8vw,2.75rem); font-weight:700; margin:0; }
.article-chapter .section-number { font-size:2.25rem; flex:none; }
.article-chapter .chapter-copy > ul:not([class]) { display:block; list-style:disc; margin-left:1.4rem; }
.article-chapter .chapter-copy > ul:not([class]) > li { border:0; padding:0; margin-bottom:.8rem; }
.article-chapter .chapter-copy > ul strong { display:inline; }
.page-post .guide-tldr ul { display:block; }
.page-post .guide-tldr li + li { margin-top:.8rem; }
.page-post .guide-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
.guide-citations { border-top:1px solid var(--rule); padding-top:1.5rem; }
.guide-citations li { padding-block:.5rem; font-size:1rem; }
.guide-citations li::before { color:var(--accent-text); top:.4rem; }
.related-posts { margin-top:4rem; border-top:6px solid var(--asphalt); padding-top:2rem; }
.related-posts > h2 { margin-bottom:2rem; }
/* Utilities retain their distinct jobs: song ledger, booking form and press assets. */
.page-setlist .setlist-col { background:var(--asphalt-soft); padding:1.5rem; border-top:5px solid var(--blue-tint); }
.page-setlist .setlist-heading { font-size:1.4rem; margin-bottom:.5rem; }
.page-setlist .setlist-col li { border-bottom-color:#555b60; }
.page-contact #book > .container { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:2rem 4rem; align-items:start; }
.page-contact #book .crumbs { grid-column:1/-1; margin:0; }
.page-contact #book .program-opener { display:block; border:0; padding:0; margin:0; }
.page-contact #book .program-cover { margin-top:2rem; aspect-ratio:16/8; }
.book-form { background:var(--white); color:var(--ink); padding:2rem; border-top:8px solid var(--action); box-shadow:var(--shadow-print); border-radius:var(--radius-card); }
.book-form a,.book-form .book-alt { color:var(--link); }
.book-form .btn { max-width:100%; }
.book-form input,.book-form select,.book-form textarea { border-width:1px; border-radius:var(--radius-control); min-width:0; }
.form-row { min-width:0; }
.form-row > * { min-width:0; }
.page-privacy .program-opener { grid-template-columns:1.4fr .6fr; }
.page-privacy .program-cover { aspect-ratio:2/1; }
.page-privacy .guide-body { max-width:900px; margin-inline:auto; }
.page-press-kit .press-thumb { box-shadow:8px 8px 0 var(--action); }
.footer-head { color:var(--blue-tint); }
.footer-inner,.footer-nav { max-width:calc(var(--content-width) + 2 * var(--gutter)); padding-inline:var(--gutter); }
.section-blue .eyebrow { color:var(--ink); }
.section-dark .guide-byline { color:var(--blue-tint); }
.req-mark { color:var(--accent-text); }
[id] { scroll-margin-top:115px; }
@media(min-width:1000px) {
  .section-heading-copy:has(> .section-lede) { display:grid; grid-template-columns:1fr 1fr; gap:0 3rem; }
  .section-heading-copy > .eyebrow { grid-column:1/-1; }
  .section-heading-copy > .section-lede { margin:0; }
  .section-heading-copy > ul, .section-heading-copy > p:not(.eyebrow):not(.section-lede) { grid-column:1/-1; }
  .service-rows:has(> li:nth-child(5):last-child) { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .service-rows:has(> li:nth-child(5):last-child) > li { grid-column:span 2; }
  .service-rows:has(> li:nth-child(5):last-child) > li:nth-child(n+4) { grid-column:span 3; }
}
@media(max-width:1100px) and (min-width:901px) {
  .nav-brand-name { font-size:1rem; }
  .nav-brand { gap:.4rem; }
  .nav-list { gap:.65rem; }
  .nav-links a { font-size:.9rem; letter-spacing:0; }
  .nav-chat { margin-right:.5rem; }
}
@media(max-width:999px) {
  .service-rows, .post-grid, .guide-body .post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-layout { grid-template-columns:1fr; }
  .article-toc { position:static; max-height:none; }
  .article-toc ol { display:grid; grid-template-columns:1fr 1fr; column-gap:2rem; }
  .page-contact #book > .container { grid-template-columns:1fr; }
  .page-contact #book .program-opener { display:grid; }
}
@media(max-width:900px) {
  .hero-split { grid-template-columns:1fr; gap:1.5rem; }
  .hero-split .wordmark { font-size:clamp(4rem,13vw,6.8rem); }
  .hero-video { margin:2rem 1rem 1rem 0; }
  .program-opener,.page-post .program-opener { grid-template-columns:1fr; }
  .program-opener > .program-cover { max-height:340px; aspect-ratio:2/1; }
  .feature-chapter { grid-template-columns:1fr; gap:1.5rem; }
  .numbered-opener { grid-template-columns:65px minmax(0,1fr); gap:1.25rem; }
  .section-number { font-size:4rem; }
  .nav-js .nav-submenu-toggle { display:block; }
}
@media(max-width:600px) {
  :root { --gutter:1rem; }
  .section { padding-block:2.75rem; }
  .nav { padding-block:.65rem; }
  .nav-inner { gap:.5rem; }
  .nav-brand { gap:.35rem; }
  .nav-brand-name { font-size:1.05rem; letter-spacing:0; }
  .roundel-sm { width:1.9rem; height:1.9rem; font-size:.65rem; flex:none; }
  .nav-chat { margin:0 0 0 auto; width:44px; height:44px; }
  .nav-toggle { width:44px; height:44px; flex:none; }
  .hero-inner { padding-block:2rem; }
  .hero-split .wordmark { font-size:4.3rem; }
  .hero-ctas { padding-inline:2px; }
  .hero-video .hero-badge { font-size:.9rem; margin-bottom:1.5rem; }
  .hero-video .video-frame { box-shadow:6px 6px 0 var(--action),12px 12px 0 var(--asphalt); }
  .program-opener { gap:2rem; padding-bottom:2rem; margin-bottom:2rem; }
  .numbered-opener { display:block; }
  .numbered-opener .section-number { margin-bottom:1rem; font-size:3rem; }
  .service-rows,.post-grid,.guide-body .post-grid,.faq-grid { grid-template-columns:1fr; }
  .post-featured .post-link { display:flex; }
  .post-featured .program-cover { min-height:0; aspect-ratio:16/10; }
  .service-rows > li:only-child .service-row { display:flex; }
  .service-rows > li:only-child .program-cover { margin-bottom:1.5rem; }
  .program-chapter { margin-block:2.5rem; padding-top:1.5rem; }
  .chapter-wide .chapter-heading { display:block; }
  .chapter-wide .section-number { margin-bottom:1rem; }
  .section-heading-copy > ul,.chapter-copy > ul:not([class]),.guide-tldr ul { grid-template-columns:1fr; }
  .guide-tldr,.guide-key { padding:1.25rem; box-shadow:none; }
  .guide-cols { grid-template-columns:1fr; }
  .guide-stats { padding:1.5rem 1rem; }
  .article-toc ol { grid-template-columns:1fr; }
  .article-chapter .chapter-heading { gap:.8rem; align-items:start; }
  .article-chapter .section-number { font-size:1.8rem; }
  .post-card-copy { padding:1.25rem; }
  .post-header-meta { flex-wrap:wrap; }
  .book-form { padding:1.25rem; box-shadow:none; }
  .page-contact #book .program-opener,.page-privacy .program-opener { display:block; }
  .page-privacy .program-cover { margin-top:1.5rem; }
  .setlist-grid { grid-template-columns:minmax(0,1fr); }
  .setlist-col li { font-size:1rem; }
  .cta-banner { padding:2.5rem var(--gutter); }
  .cta-line { max-width:none; }
  .footer-nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1rem; }
  .footer-col a { font-size:1rem; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}
/* Local light surfaces keep light-surface roles even inside a dark section. */
.service-row,.driver-card,.post-card,.book-form { --link:var(--racing-blue); --accent-text:var(--racing-red); }
.post-featured { --accent-text:var(--blue-tint); }
.driver-bio a { color:var(--link); }
.guide-stats .proof-item dd { color:var(--ink); max-width:none; }
.section-dark .guide-col h3 { color:var(--blue-tint); }
.section-dark .guide-col p,.section-dark .guide-col li { color:#c6cacd; }
.post-link h3 { transition:color var(--motion-fast) var(--motion-ease); }
.related-posts .post-grid:has(> li:nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); }
.related-posts .post-grid:has(> li:only-child) { grid-template-columns:1fr; }
.related-posts .post-grid:has(> li:only-child) .post-link { display:grid; grid-template-columns:1fr 1fr; }
/* Smaller overshoot preserves the approved pop without collisions. */
@keyframes word-pop {
  0% { transform:scale(1); }
  5% { transform:scale(1.075); }
  9% { transform:scale(.98); }
  12% { transform:scale(1.02); }
  15%,100% { transform:scale(1); }
}
@keyframes plate-pop {
  0% { transform:skewX(-8deg) scale(1); }
  5% { transform:skewX(-8deg) scale(1.075); }
  9% { transform:skewX(-8deg) scale(.98); }
  12% { transform:skewX(-8deg) scale(1.02); }
  15%,100% { transform:skewX(-8deg) scale(1); }
}
@media(max-width:600px) {
  .related-posts .post-grid:has(> li:nth-child(2):last-child),
  .related-posts .post-grid:has(> li:only-child) .post-link { display:grid; grid-template-columns:1fr; }
}
.article-layout { grid-template-columns:minmax(220px,1fr) minmax(0,760px); }
@media(max-width:999px) { .article-layout { grid-template-columns:1fr; } }
/* Fact lists and booking calls carry the same inset livery used on the cards. */
.feature-chapter:last-child .chapter-copy:has(a[href="/contact/#book"]) { background:var(--blue-tint); color:var(--ink); border-left:6px solid var(--action); padding:1.5rem; }
.feature-chapter:last-child .chapter-copy:has(a[href="/contact/#book"]) a { color:var(--racing-blue); }
.feature-chapter:last-child .chapter-copy:has(a[href="/contact/#book"]) strong { color:var(--ink); }
.guide-body .chapter-copy > ol:not([class]) { list-style:none; counter-reset:step; margin-left:0; }
.chapter-copy > ol:not([class]) > li { counter-increment:step; padding:.8rem 0 .8rem 3rem; border-bottom:1px solid var(--rule); position:relative; }
.chapter-copy > ol:not([class]) > li::before { content:counter(step,decimal-leading-zero); font-family:var(--display); font-size:1.35rem; color:var(--accent-text); position:absolute; left:0; top:.7rem; }
/* A quiet but visible focus treatment also works on livery and light insets. */
.program-cover + .post-card-copy { --link:var(--racing-blue); }
.btn:focus-visible,.blog-filters a:focus-visible { outline-color:var(--asphalt); box-shadow:0 0 0 7px var(--paper); }
.section-dark .btn:focus-visible { outline-color:var(--paper); box-shadow:0 0 0 7px var(--asphalt); }
.feature-photo { margin-top:1.75rem; border-bottom:8px solid var(--action); overflow:hidden; aspect-ratio:4/3; border-radius:var(--radius-card); }
.feature-photo img { width:100%; height:100%; object-fit:cover; object-position:center 12%; }
.guide-body .guide-tldr a,.guide-body .guide-key a,.guide-body .guide-stats a { color:var(--ink); text-decoration:underline; }
.section-blue a:not(.btn) { color:var(--ink); }
.feature-chapter:last-child .chapter-copy:has(a[href="/contact/#book"]) a { color:var(--ink); text-decoration:underline; }
/* Archive headers share the illustrated opener used on interior pages. */
.page-blog .program-opener { border-bottom:0; padding-bottom:0; margin-bottom:1.25rem; }
.page-blog .page-title { font-size:clamp(2.7rem,5.4vw,5.2rem); }
.page-blog .blog-index { margin-top:1.5rem; }
.section-dark .guide-body .guide-key strong,.section-dark .guide-body .guide-tldr strong { color:var(--ink); }
/* A steady dark edge keeps the original orange chrome glint legible. */
.wordmark-line-2 { -webkit-text-stroke:.5px var(--asphalt); }
.nav-chat:focus-visible,.service-row:focus-visible { outline-color:var(--ink); }
.section-dark .service-row:focus-visible,.post-featured .post-link:focus-visible { outline-color:var(--blue-tint); }
.motion-toggle { width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; flex:none; align-self:center; border:2px solid var(--asphalt); border-radius:var(--radius-control); background:var(--paper); color:var(--ink); cursor:pointer; }
.motion-toggle[hidden] { display:none; }
.motion-toggle svg { fill:currentColor; }
.motion-toggle .motion-play { display:none; }
.motion-toggle[aria-pressed="true"] .motion-pause { display:none; }
.motion-toggle[aria-pressed="true"] .motion-play { display:block; }
.hero:not(.motion-ready) * { animation:none !important; }
.hero.motion-paused * { animation-play-state:paused !important; }
.hero .hero-copy,.hero .hero-video { animation:none; }
.ticker-track,.footer .checker { animation:none; }
@media(prefers-reduced-motion:reduce) { .motion-toggle { display:none; } }

/* 2026-10-07: suit colors and content-driven layouts, across every route. */
:root { --surface: var(--white); --surface-muted: #e7e9e6; --rule: #727a7d; --link: var(--racing-blue); --accent-text: var(--racing-red); }
.btn-solid,.nav-chat,.opener-copy > p > a:has(strong),.post-featured .decal { color:var(--white); }
.nav-cta { color:var(--white) !important; }
.btn-solid:hover { background:var(--action-hover); }
.cta-banner { background-color:var(--racing-red); color:var(--white); }
.hero-badge { background:var(--racing-green); color:var(--white); }
.hero-badge strong,.hero-badge span { color:inherit; }
.stripe-field { background:repeating-linear-gradient(90deg,var(--racing-blue) 0 130px,transparent 130px 156px,var(--racing-red) 156px 208px,transparent 208px 226px,var(--racing-green) 226px 242px,transparent 242px 460px); }
.stripe-divider { background:repeating-linear-gradient(var(--stripe-angle),var(--racing-blue) 0 28px,var(--paper) 28px 40px,var(--racing-red) 40px 68px,var(--paper) 68px 80px,var(--asphalt) 80px 100px,var(--racing-green) 100px 104px,var(--paper) 104px 120px); }
.program-cover { background:var(--racing-blue); color:var(--white); }
.cover-stripes { background:linear-gradient(90deg,var(--racing-red) 0 38%,var(--white) 38% 48%,var(--asphalt) 48% 74%,var(--racing-green) 74% 78%,var(--white) 78% 88%,var(--asphalt) 88%); }
.tone-1 { background:var(--racing-red); }
.tone-2 { background:var(--white); color:var(--asphalt); }
.tone-3 { background:var(--asphalt); }
.tone-4 { background:var(--blue-light); color:var(--racing-blue); }
.tone-5 { background:var(--paper); color:var(--asphalt); }
.tone-6 { background:var(--red-light); color:var(--racing-red); }
.tone-1 .cover-stripes { background:linear-gradient(90deg,var(--racing-blue) 0 48%,var(--white) 48% 58%,var(--asphalt) 58% 84%,var(--racing-green) 84% 88%,var(--white) 88%); }
.footer-head,.section-dark .eyebrow,.section-dark .section-number { color:var(--blue-light); }
.section-dark .pull-quote em,.section-dark .service-step-num,.section-dark .crumbs a:hover { color:var(--white); }
.section-blue { background:var(--blue-light); }
.driver-role,.decal { background:var(--blue-light); color:var(--racing-blue); }
.guide-tldr,.guide-stats { background:var(--blue-light); }
.book-form input,.book-form select,.book-form textarea { border-color:var(--rule); }
:focus-visible { outline-color:var(--focus); }
.section-dark :focus-visible,.footer :focus-visible { outline-color:var(--white); }
/* Heading is always above copy. Only the copy determines a paired photo's height. */
.feature-chapter { display:block; }
.feature-chapter .chapter-heading { display:flex; align-items:baseline; gap:1.25rem; margin-bottom:1.5rem; }
.feature-chapter .chapter-heading h2 { margin:0; }
.feature-chapter .section-number { flex:none; }
.chapter-with-photo { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:1.5rem 2rem; }
.chapter-with-photo .chapter-heading { grid-column:1/-1; margin:0; }
.chapter-with-photo .feature-photo { position:relative; min-height:0; margin:0; aspect-ratio:auto; }
.chapter-with-photo .feature-photo img { position:absolute; inset:0; }
.chapter-short { display:flex; flex-direction:column; }
.chapter-short .feature-photo { height: min(28vh,260px); flex:none; }
/* Covers stretch to the opener's real text instead of making the text cell tall. */
.program-opener { align-items:stretch; }
.program-opener > .program-cover { aspect-ratio:auto; min-height:0; }
.program-opener > .program-cover img { position:absolute; inset:0; }
.section-heading-copy:has(> .section-lede) { display:block; }
.section-heading-copy > .section-lede { margin-top:1rem; }
/* Wrap grows each final row to use its available width, including filtered results. */
.service-rows,.post-grid,.guide-body .post-grid { display:flex; flex-wrap:wrap; gap:1.5rem; }
.service-rows > li,.post-grid > .post-card { flex:1 1 360px; min-width:0; }
.post-grid > .post-featured { flex-basis:100%; }
.service-row .program-cover,.post-card .program-cover { max-height:260px; }
.post-featured .program-cover { min-height:0; max-height:none; position:relative; }
.post-featured .program-cover img { position:absolute; inset:0; }
.service-rows > li:only-child .service-row { display:flex; }
.service-rows > li:only-child .program-cover { margin-bottom:1.5rem; }
.related-posts .post-grid:has(> li:only-child) .post-link { display:flex; }
.related-posts .post-grid:has(> li:only-child) .program-cover { aspect-ratio:4/1; }
.section-heading-copy > ul,.chapter-copy > ul:not([class]),.guide-tldr ul { display:flex; flex-wrap:wrap; }
.section-heading-copy > ul > li,.chapter-copy > ul:not([class]) > li,.guide-tldr ul > li { flex:1 1 360px; }
.article-chapter .chapter-copy > ul:not([class]),.page-post .guide-tldr ul { display:block; }
.faq-grid { display:block; }
.faq-item { padding:1.25rem 0; }
/* A top contents band avoids an empty sidebar alongside long articles. */
.article-layout { display:block; }
.article-toc { position:static; max-height:none; margin-bottom:2rem; }
.article-toc ol { display:flex; flex-wrap:wrap; gap:0 2rem; }
.article-toc li { flex:1 1 300px; }
.page-post .guide-body,.page-privacy .guide-body { max-width:none; }
.page-contact #book > .container { display:block; }
.page-contact #book .crumbs { margin-bottom:1.5rem; }
.page-contact #book .program-opener { display:grid; margin-bottom:2rem; }
.page-contact #book .program-cover { margin:0; aspect-ratio:auto; }
.page-contact .book-form { max-width:none; }
.hero { min-height:0; }
@media(max-width:900px) {
  .chapter-with-photo { display:flex; flex-direction:column; }
  .chapter-with-photo .feature-photo { height:min(28vh,260px); flex:none; }
  .program-opener > .program-cover,.page-contact #book .program-cover { height:min(28vh,260px); aspect-ratio:auto; }
  .page-contact #book .program-opener { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .feature-chapter .chapter-heading { gap:.75rem; }
  .feature-chapter .section-number { font-size:2rem; }
  .post-featured .program-cover { height:220px; flex:none; }
  .article-toc ol { display:block; }
  .service-rows > li,.post-grid > .post-card { flex-basis:100%; }
}

/* Balanced companion cards and song columns also work without JavaScript. */
.guide-cols { display:flex; flex-wrap:wrap; gap:1.5rem; }
.guide-col { flex:1 1 280px; min-width:0; }
.setlist-grid { display:block; }
.setlist-col { margin-bottom:1.5rem; }
.setlist-col ul { columns:2; column-gap:2rem; }
.setlist-col li { break-inside:avoid; }
.chip { color:var(--racing-blue); border-color:currentColor; }
.chip-alt { color:var(--racing-red); }
.section-dark .chip { color:var(--blue-light); }
.section-dark .chip-alt { color:var(--blue-light); }
.book-form input:focus,.book-form select:focus,.book-form textarea:focus { outline:3px solid var(--focus); outline-offset:2px; }
.section-dark .book-form :focus-visible { outline-color:var(--focus); }
.sl-5,.sl-7,.sl-14 { background:linear-gradient(90deg,transparent,var(--racing-green),transparent); }
.cta-banner-blue { background-color:var(--racing-blue); color:var(--white); }
.section-dark .guide-row:hover h3,.section-dark .guide-citations a:hover { color:var(--white); }
@media(max-width:600px) {
  .setlist-col ul { columns:1; }
  .guide-col { flex-basis:100%; }
}
.section-dark .set-total,.section-dark .setlist-note { color:var(--blue-light); }
.section-dark .guide-meta .guide-byline { color:var(--blue-light); }
/* Seven category identities share the same tested ink and tint pairs. */
[data-category="weddings"],.blog-filters a[data-filter="weddings"] { --category-ink:var(--racing-blue); --category-surface:var(--blue-light); }
[data-category="party-planning"],.blog-filters a[data-filter="party-planning"] { --category-ink:var(--racing-red); --category-surface:var(--red-light); }
[data-category="songs-and-playlists"],.blog-filters a[data-filter="songs-and-playlists"] { --category-ink:var(--asphalt); --category-surface:var(--blue-light); }
[data-category="karaoke-and-dj"],.blog-filters a[data-filter="karaoke-and-dj"] { --category-ink:var(--asphalt); --category-surface:var(--paper); }
[data-category="austin-guides"],.blog-filters a[data-filter="austin-guides"] { --category-ink:var(--racing-blue); --category-surface:var(--white); }
[data-category="hiring-live-music"],.blog-filters a[data-filter="hiring-live-music"] { --category-ink:var(--asphalt); --category-surface:var(--white); }
[data-category="production-and-logistics"],.blog-filters a[data-filter="production-and-logistics"] { --category-ink:var(--racing-red); --category-surface:var(--white); }
.blog-filters a[data-filter] { color:var(--category-ink,var(--ink)); background:var(--category-surface,var(--paper)); border-color:currentColor; }
.blog-filters a[data-filter][aria-current="true"] { background:var(--category-ink,var(--asphalt)); color:var(--white); }
.post-card[data-category] .post-category { color:var(--category-ink); }
.post-featured[data-category] .post-category { color:var(--white); }

/* Approved band photographs, 2026-10-07. Text sets split-row height. */
.performance-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; margin:1.5rem 0; overflow:hidden; }
.performance-strip > div { min-width:0; aspect-ratio:4/3; overflow:hidden; }
.performance-strip img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 15%; }
main > .performance-strip { margin:0; background:var(--asphalt); }
.faq-grid > .performance-strip { grid-column:1/-1; }
@media (max-width:700px) {
  .performance-strip { gap:4px; }
  .performance-strip > div { aspect-ratio:3/4; }
}

/* 2026-10-07: full-width content, compact lists, and paired utility answers. */
.program-opener .page-title,.press-copy .page-title { max-width:none; }
.program-opener:not(:has(> .program-cover)) { grid-template-columns:1fr; }
.numbered-opener .section-heading-copy { min-width:0; }
.guide-body,.chapter-copy,.guide-table { width:100%; max-width:none; }
/* Short entries flow down balanced columns, keeping their reading order. */
.chapter-copy > .compact-list { columns:2; column-gap:2.5rem; }
.chapter-copy > .compact-list > li { break-inside:avoid; }
.article-chapter .chapter-copy > ul.compact-list { display:block; }
/* Unequal comparisons cannot leave a short card next to a tall empty panel. */
.guide-cols { display:block; }
.guide-col + .guide-col { margin-top:1.5rem; }
.faq-item:has(> h3[data-layout="faq-compact"]) { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:.75rem 2rem; }
.faq-item:has(> h3[data-layout="faq-compact"]) > h3 { margin:0; }
.faq-item:has(> h3[data-layout="faq-compact"]) > :not(h3) { grid-column:2; }
.book-form .form-offering { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 2rem; }
.book-form .form-offering > #offering-label { flex:1 1 220px; }
.book-form .form-offering > .form-check { flex:1 1 130px; margin:0; }
.press-inner { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:center; }
.press-thumb { width:100%; max-width:none; transform:none; }
.press-copy { min-width:0; }
@media(min-width:901px) {
  .press-copy { grid-column:1; grid-row:1; }
  .press-thumb { grid-column:2; grid-row:1; }
}
/* Light cards inside dark sections need a dark, contrasting focus outline. */
.section-dark .service-row:focus-visible,
.section-dark .driver-card :focus-visible,
.section-dark .post-card:not(.post-featured) :focus-visible,
.section-dark .book-form :focus-visible { outline-color:var(--focus); }
@media(max-width:900px) {
  .page-privacy .program-opener,.press-inner { grid-template-columns:1fr; }
  .press-thumb { width:min(100%,360px); margin-inline:auto; }
}
@media(max-width:700px) {
  .chapter-copy > .compact-list { columns:1; }
  .faq-item:has(> h3[data-layout="faq-compact"]) { display:block; }
  .faq-item:has(> h3[data-layout="faq-compact"]) > h3 { margin-bottom:.8rem; }
}

/* 2026-10-07: stage-light heroes. Scoped away from the approved homepage. */
.stage-hero {
  --link:#fff;
  --accent-text:#fff;
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(24px,3vw,40px);
  margin:0 0 32px;
  padding:48px 24px 24px;
  background:#101114;
  color:#fff;
  border-top:6px solid #b91f32;
  border-bottom:6px solid #173f78;
  overflow:hidden;
}
.stage-hero::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:4px;
  background:linear-gradient(90deg,#fff 0 12%,#173f78 12% 47%,#fff 47% 49%,#b91f32 49% 96%,#1a1b1e 96%);
  pointer-events:none;
}
.stage-lights { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.stage-lights::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 75% 90%,#173f7866,transparent 70%),repeating-conic-gradient(#ffffff0a 0% 25%,transparent 0% 50%) 0 0/32px 32px;
}
.stage-lights i {
  position:absolute;
  top:-50%; left:45%; width:35%; height:200%;
  transform-origin:50% 0;
  background:linear-gradient(90deg,transparent,#b91f3299 45%,#b91f32bb 50%,transparent);
  transform:rotate(28deg);
  opacity:.6;
  animation:stage-beam-red 16s ease-in-out infinite alternate;
  will-change:transform,opacity;
}
.stage-lights i:nth-child(2) {
  left:70%; width:42%;
  background:linear-gradient(90deg,transparent,#326bcc99 45%,#326bcccc 50%,transparent);
  animation-name:stage-beam-blue;
  animation-duration:19s;
  transform:rotate(-32deg);
}
.stage-lights i:nth-child(3) {
  left:60%; width:15%;
  background:linear-gradient(90deg,transparent,#ffffff66 50%,transparent);
  animation-name:stage-beam-white;
  animation-duration:23s;
  transform:rotate(8deg);
  opacity:.35;
}
@keyframes stage-beam-red {
  from { transform:rotate(28deg) translateX(-10%); opacity:.45; }
  to { transform:rotate(-18deg) translateX(10%); opacity:.8; }
}
@keyframes stage-beam-blue {
  from { transform:rotate(-32deg) translateX(8%); opacity:.8; }
  to { transform:rotate(15deg) translateX(-8%); opacity:.5; }
}
@keyframes stage-beam-white {
  from { transform:rotate(8deg); opacity:.25; }
  to { transform:rotate(-26deg); opacity:.45; }
}
/* Opaque ink under every word makes contrast independent of the light sweep. */
.stage-hero .stage-copy {
  min-width:0;
  padding:16px;
  background:#101114;
  color:#fff;
  border-left:3px solid #b91f32;
}
.stage-hero .page-title {
  margin:0 0 20px;
  max-width:none;
  color:#fff;
  font-size:clamp(2rem,3.8vw,3.75rem);
  line-height:1.04;
  overflow-wrap:break-word;
}
.stage-hero .section-lede { max-width:none; color:#e5e9ef; font-size:clamp(1.125rem,1.3vw,1.25rem); line-height:1.5; }
.stage-hero .eyebrow { color:#fff; }
.stage-hero .stage-copy > :last-child { margin-bottom:0; }
.stage-hero .stage-copy > p:last-child:not(.section-lede) { margin-top:24px; }
.stage-hero .stage-copy a:not(.btn) { color:#fff; text-decoration:underline; text-underline-offset:.2em; }
.stage-hero .stage-copy > p > a:has(strong) {
  display:inline-block; padding:12px 16px; background:#b91f32; color:#fff;
  font-family:var(--label); border:2px solid #fff;
}
.stage-hero .stage-copy .btn { background:#fff; color:#101114; border-color:#fff; white-space:normal; }
.stage-hero .stage-copy a:hover { text-decoration-thickness:3px; }
.stage-hero .stage-copy a:focus-visible { outline:3px solid #fff; outline-offset:4px; }
/* The registered ratio belongs to the frame; no text-height or crop rules apply. */
.stage-hero > .stage-photo {
  position:relative; min-width:0; width:100%; height:auto; align-self:center;
  box-sizing:content-box; padding:0; margin:0; background:#101114;
  border:0; outline:1px solid #ffffff66; outline-offset:6px;
  box-shadow:10px 12px 0 #173f78;
}
.stage-hero > .stage-photo img {
  display:block; position:static; width:100%; height:100%; max-height:none;
  object-fit:contain; border:0; border-radius:0;
}
.stage-motion {
  position:absolute; top:4px; right:8px;
  display:grid; place-items:center; width:40px; height:40px;
  background:#101114; color:#fff; cursor:pointer;
}
.stage-motion input {
  appearance:none; position:absolute; inset:0; width:100%; height:100%;
  margin:0; border:1px solid #fff; border-radius:2px; cursor:pointer;
  background:transparent;
}
.stage-motion input:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.stage-motion svg { fill:currentColor; pointer-events:none; }
.stage-motion .stage-play { display:none; }
.stage-motion:has(input:checked) .stage-play { display:block; }
.stage-motion:has(input:checked) .stage-pause { display:none; }
.stage-hero:has(.stage-motion input:checked) .stage-lights i { animation-play-state:paused; }
.stage-download { margin:24px 0 0; }
.stage-download .press-thumb { display:block; width:min(100%,240px); margin:0; }
@media(max-width:900px) {
  .stage-hero { grid-template-columns:minmax(0,1fr); gap:24px; padding:48px 16px 24px; }
  .stage-hero .stage-copy { padding:0 0 0 12px; }
  .stage-hero .page-title { font-size:clamp(2rem,6vw,3.5rem); }
  .stage-hero > .stage-photo { box-shadow:6px 8px 0 #173f78; outline-offset:3px; }
}
@media(max-width:600px) {
  /* Cancel the parent's fluid gutter, then keep exactly 16px on phones. */
  .stage-hero { margin-inline:calc(-1 * var(--gutter)); padding-inline:16px; }
}
@media(prefers-reduced-motion:reduce) {
  .stage-hero .stage-lights i { animation:none !important; will-change:auto; }
  .stage-motion { display:none; }
}
.stage-number { position:absolute; top:8px; left:24px; color:#fff; background:#101114; padding:0 6px; font:1.25rem var(--label); }

/* 08-01: whole photographs, viewport-wide breaks, and the booking film. */
main { container-type:inline-size; }
.full-bleed {
  width:100vw;
  max-width:none;
  margin-inline:calc(50% - 50vw);
}
@supports (width:100cqw) {
  .full-bleed { width:100cqw; margin-inline:calc(50% - 50cqw); }
}
/* Copy flows beside the photo, then below it when it needs more room. */
.program-chapter.chapter-with-photo { display:flow-root; }
.chapter-with-photo .chapter-heading { margin-bottom:1.5rem; }
.feature-photo,
.chapter-with-photo .feature-photo,
.driver-photo,
.performance-strip > div,
body main .program-cover.has-photo.whole-band-photo {
  display:block;
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:3/2;
  padding:0;
  border:0;
  border-radius:0;
  align-self:start;
  background:var(--asphalt);
}
.chapter-with-photo .feature-photo {
  float:left;
  width:42%;
  max-width:440px;
  margin:0 2rem 1rem 0;
}
.chapter-with-photo.chapter-short .feature-photo { width:26%; max-width:200px; }
.chapter-with-photo .chapter-copy > .compact-list { columns:1; }
.feature-photo img,
.chapter-with-photo .feature-photo img,
.driver-photo img,
.performance-strip img,
body main .program-cover.has-photo.whole-band-photo img {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:contain;
  border-radius:0;
}
/* Decorative cover stripes must not conceal any of a performance photograph. */
.program-cover.whole-band-photo::before,
.program-cover.whole-band-photo::after,
.program-cover.whole-band-photo .cover-stripes { display:none; }
.performance-strip.full-bleed {
  grid-template-columns:repeat(var(--photo-columns,3),minmax(0,1fr));
  gap:2px;
  margin-block:2rem;
  background:var(--asphalt);
}
main > .performance-strip.full-bleed { margin-block:0; }
.video-ribbon {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  height:min(60vh,520px);
  min-height:240px;
  margin-block:2rem;
  padding:32px 16px;
  background:var(--asphalt);
  color:var(--white);
  overflow:hidden;
}
main > .video-ribbon { margin-block:0; }
.video-ribbon > .ribbon-poster,
.video-ribbon > video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  z-index:-2;
}
.video-ribbon::before {
  content:"";
  position:absolute;
  inset:0;
  background:rgb(26 27 30 / 65%);
  z-index:-1;
}
.ribbon-copy { width:100%; text-align:center; }
.ribbon-copy .cta-inner { display:flex; flex-direction:column; gap:24px; }
.ribbon-copy .cta-line { margin:0; color:var(--white); }
.ribbon-copy p { margin:0; }
.ribbon-copy a[href="/contact/#book"] {
  display:inline-block;
  max-width:100%;
  padding:16px 24px;
  border:2px solid var(--white);
  border-radius:var(--radius-card);
  background:var(--racing-red);
  color:var(--white);
  font-family:var(--label);
  font-weight:700;
  line-height:1.3;
  white-space:normal;
  text-decoration:none;
}
.ribbon-copy a[href="/contact/#book"]:hover { background:var(--racing-blue); }
.ribbon-copy a[href="/contact/#book"] strong { color:inherit; }
.video-ribbon :focus-visible { outline:3px solid var(--white); outline-offset:5px; }
.ribbon-motion {
  position:absolute;
  right:16px;
  bottom:16px;
  width:44px;
  height:44px;
  border:1px solid var(--white);
  background:var(--asphalt);
  color:var(--white);
  cursor:pointer;
}
.ribbon-motion svg { fill:currentColor; vertical-align:middle; }
.ribbon-motion .ribbon-play,
.ribbon-motion[aria-pressed="true"] .ribbon-pause { display:none; }
.ribbon-motion[aria-pressed="true"] .ribbon-play { display:block; margin:auto; }
@media(max-width:900px) {
  .chapter-with-photo .feature-photo,
  .chapter-with-photo.chapter-short .feature-photo {
    float:none;
    width:min(88%,320px);
    max-width:none;
    margin:0 auto 1.25rem;
  }
  .chapter-with-photo.chapter-short .feature-photo { width:min(72%,220px); }
}
@media(max-width:600px) {
  .performance-strip { grid-template-columns:1fr; }
  .performance-strip.full-bleed { grid-template-columns:1fr; }
  .performance-strip > div { width:min(88%,360px); justify-self:center; }
}
@media(prefers-reduced-motion:reduce) {
  .video-ribbon > video,
  .ribbon-motion { display:none; }
}

/* 2026-10-07: the poster still painted over the playing loop; hide it once the video is in the ribbon (reduced motion removes the video, so the poster returns). */
.video-ribbon > video ~ .ribbon-poster { display:none; }
/* 2026-10-07: the long booking email pushed phones 33px sideways; let addresses wrap. */
a[href^="mailto:"] { overflow-wrap:anywhere; }
/* 2026-10-07: a full-bleed ribbon inside an off-center wrapper overhung by 3px on /services/. */
main { overflow-x:clip; }

/* 2026-10-07 (Bob): page-top stage runs the full browser width, and the faint grid becomes a
   real checkered flag: a waving black-and-white flag band down the left, fading into the stage. */
.stage-hero {
  width:100vw; max-width:none;
  margin-inline:calc(50% - 50vw);
  padding-inline:max(24px, calc((100vw - 1200px) / 2));
}
@supports (width:100cqw) { main .stage-hero { width:100cqw; margin-inline:calc(50% - 50cqw); padding-inline:max(24px, calc((100cqw - 1200px) / 2)); } }
.stage-lights::before {
  background:radial-gradient(ellipse at 75% 90%,#173f7866,transparent 70%);
}
.stage-lights::after {
  content:"";
  position:absolute;
  inset:-10% auto -10% -4%;
  width:52%;
  background:repeating-conic-gradient(#f2f2f2 0% 25%,#101114 0% 50%) 0 0/44px 44px;
  opacity:.22;
  transform:skewY(-6deg);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 25%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0%,#000 25%,transparent 100%);
  animation:flag-wave 6s ease-in-out infinite alternate;
}
@keyframes flag-wave {
  from { transform:skewY(-6deg) translateY(0); }
  to { transform:skewY(-3deg) translateY(-22px); }
}
@media(max-width:600px) {
  .stage-hero { padding-inline:16px; }
  .stage-lights::after { width:100%; background-size:32px 32px; opacity:.16; }
}
@media(prefers-reduced-motion:reduce) { .stage-lights::after { animation:none; } }
.stage-hero:has(.stage-motion input:checked) .stage-lights::after { animation-play-state:paused; }
/* 2026-10-07 (Bob): inner-page stage uses the home hero animation (racing stripes + speed lines)
   instead of the stage beams and checkered flag. Behind the copy, inside the dark stage. */
.stage-hero > .stage-anim { z-index:-1; }
.stage-hero > .hero-stripes { opacity:.85; }
.stage-hero .speed-line { opacity:0; }
.stage-hero .sl-3,.stage-hero .sl-6,.stage-hero .sl-9,.stage-hero .sl-12 { background:linear-gradient(90deg,transparent,#ffffffcc,transparent); }
.stage-hero:has(.stage-motion input:checked) .stripe-field,
.stage-hero:has(.stage-motion input:checked) .speed-line { animation-play-state:paused; }

/* Numbered headings: full container width, checkered flag instead of the number (Bob 2026-10-08) */
.chapter-heading h2,.section-heading-copy h2 { flex:1 1 auto; min-width:0; max-width:none; text-wrap:pretty; }
.section-number { font-size:0 !important; line-height:0; color:transparent; width:clamp(2.75rem,4vw,3.75rem); aspect-ratio:1; flex:none; background:url(/images/icons/checkered-flag.svg) center/contain no-repeat; align-self:center; }
.section-dark .section-number { background-image:url(/images/icons/checkered-flag-light.svg); }
.numbered-opener { grid-template-columns:clamp(2.75rem,4vw,3.75rem) minmax(0,1fr); }
.article-chapter .section-number,.feature-chapter .section-number { width:2.75rem; }
@media(max-width:700px){ .section-number,.article-chapter .section-number,.feature-chapter .section-number { width:2.25rem; } }
.section-number { width:clamp(2.5rem,4.2vw,4rem) !important; align-self:start; margin-top:.1em; }
/* Services hub: the four offering cards run in one row (Bob 2026-10-08: no dead space beside them) */
@media(min-width:1000px){ .page-services .chapter-copy > .service-rows > li { flex:1 1 0; } }

/* Chat sits in the main nav between Blog and Book the Band; phones keep it beside the hamburger (Bob 2026-10-08) */
.nav-chat-mobile { display:none; }
.nav-chat-item { display:flex; align-items:center; }
.nav-chat-item .nav-chat { margin:0; width:48px; height:48px; }
@media (max-width:900px) {
  .nav-js .nav-chat-mobile { display:inline-flex; }
  .nav-js .nav-chat-item { display:none; }
}

/* Desktop dropdown: black panel, white text, red hover (Bob 2026-10-08) */
@media (min-width: 901px) {
  .nav-menu { background:#111214; border-color:#111214; }
  .nav-menu a { color:#fff !important; }
  .nav-menu a:hover, .nav-menu a:focus-visible { background:var(--action); color:#fff !important; }
  .nav-menu a[aria-current="page"] { color:#fff !important; box-shadow:inset 4px 0 0 var(--action); }
}

/* Palette (Bob 2026-10-08): red, white and blue lead; black only as a highlight.
   Dark panels move from near-black to deep racing navy. Titles are blue on light
   backgrounds and white on dark ones; body text is black on light, white on dark. */
:root { --asphalt:#0f2747; --asphalt-soft:#16335c; --navy:#0f2747; }
body { color:var(--ink); }
h1, h2, h3, .page-title { color:var(--racing-blue); }
.section-dark, .stage-hero, .footer, .video-ribbon, .cta-banner { color:#fff; }
.section-dark :is(h1,h2,h3,.page-title),
.stage-hero :is(h1,h2,h3,.page-title),
.footer :is(h1,h2,h3), .video-ribbon :is(h1,h2,h3), .cta-banner :is(h1,h2,h3),
.hero :is(h1,h2,h3) { color:#fff; }
.section-dark :is(p,li), .stage-hero :is(p,li) { color:#fff; }
.section-dark .driver-plate :is(h3), .section-dark .service-row :is(h3),
.section-dark .post-card :is(h3) { color:var(--racing-blue); }
.section-dark .driver-plate :is(p,li), .section-dark .service-row :is(p,li),
.section-dark .post-card :is(p,li) { color:var(--ink); }
/* Mix black in as a full-width background (Bob 2026-10-08): page headers, the home
   "What You Get" band and the footer go black; other dark bands stay navy. */
.stage-hero, .footer, #band.section-dark { background-color:#111214; }
.driver-plate h3, .section-dark .driver-plate h3 { color:var(--racing-red) !important; }
/* Chat and Book the Band share one height in the main nav (Bob 2026-10-08) */
@media (min-width: 901px) {
  .nav-chat-item .nav-chat { width:56px; height:56px; }
  .nav-list > li > .nav-cta { height:56px; display:inline-flex; align-items:center; box-sizing:border-box; }
}
/* Hero content runs edge to edge with the page column (Bob 2026-10-08) */
.stage-hero { padding-inline:max(var(--gutter), calc((100vw - var(--content-width)) / 2)); }
@supports (width:100cqw) { main .stage-hero { padding-inline:max(var(--gutter), calc((100cqw - var(--content-width)) / 2)); } }
.stage-hero .stage-copy { padding:8px 0 8px 24px; }
@media(max-width:600px) { .stage-hero, main .stage-hero { padding-inline:16px; } }
/* Hero crossfade layers (Bob 2026-10-08) */
.stage-hero > .stage-photo { overflow:hidden; }
.stage-hero > .stage-photo img { transition:opacity .8s ease; }
.stage-hero > .stage-photo img.stage-photo-next { position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.stage-hero > .stage-photo img:not(.is-on) { opacity:0; }
.stage-hero > .stage-photo img.is-on { opacity:1; }
/* Header wordmark: RICKY BOBBY MUSIC, as large as the row allows (Bob 2026-10-08).
   It shrinks with the window so the menu never touches it; phones use the hamburger. */
.nav-brand-name { font-size:clamp(1.15rem, 2.1vw, 2.1rem); white-space:nowrap; }
.nav-brand .roundel-sm { width:clamp(2.2rem,3.3vw,3.4rem); height:clamp(2.2rem,3.3vw,3.4rem); font-size:clamp(.7rem,.95vw,1rem); flex:none; }
@media(max-width:1100px) and (min-width:901px) { .nav-brand-name { font-size:clamp(1rem,1.75vw,1.3rem); } }
@media(max-width:900px) { .nav-brand-name { font-size:clamp(1.15rem,4.6vw,1.9rem); } }
@media(max-width:600px) { .nav-brand-name { font-size:clamp(1rem,5.2vw,1.4rem); letter-spacing:0; } }
@media(max-width:1100px) and (min-width:901px) { .nav-brand-name { font-size:2.05vw; } }
@media(max-width:380px) { .nav-brand-name { font-size:4.6vw; } .nav-brand .roundel-sm { width:1.7rem; height:1.7rem; font-size:.6rem; } }
/* Wordmark: Ricky Bobby in red, Music in blue, tagline in black italic beneath (Bob 2026-10-08) */
.nav-brand-stack { display:flex; flex-direction:column; line-height:1; gap:.3em; }
.nav-brand-name { line-height:1; }
.nav-brand-name .brand-red { color:var(--racing-red); }
.nav-brand-name .brand-blue { color:var(--racing-blue); }
.nav-brand-tag { font-family:var(--label); font-style:italic; font-weight:600; color:#111214;
  font-size:clamp(.62rem, .82vw, .95rem); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
@media(max-width:1100px) and (min-width:901px) { .nav-brand-tag { font-size:.8vw; } }
@media(max-width:900px) { .nav-brand-tag { font-size:clamp(.55rem, 1.9vw, .8rem); } }
@media(max-width:380px) { .nav-brand-tag { font-size:2.1vw; letter-spacing:0; } }
/* One size drives both lines so the tagline runs the width of the wordmark */
.nav-brand-stack { --brand-fs:clamp(1.15rem, 2.1vw, 2.1rem); }
@media(max-width:1100px) and (min-width:901px) { .nav-brand-stack { --brand-fs:2.05vw; } }
@media(max-width:900px) { .nav-brand-stack { --brand-fs:clamp(1.15rem,4.6vw,1.9rem); } }
@media(max-width:600px) { .nav-brand-stack { --brand-fs:clamp(1rem,5.2vw,1.4rem); } }
@media(max-width:380px) { .nav-brand-stack { --brand-fs:4.6vw; } }
.nav-brand-stack .nav-brand-name { font-size:var(--brand-fs) !important; }
.nav-brand-stack .nav-brand-tag { font-size:calc(var(--brand-fs) * .47) !important; letter-spacing:.03em; }
/* Header backdrop (Bob 2026-10-08): white-to-silver gradient, a checkered flag that
   fades in from the left behind the wordmark and from the right behind the menu,
   kept faint so every word stays readable, and a red-white-blue racing stripe at the bottom. */
.nav { background:linear-gradient(180deg,#ffffff 0%,#eef1f4 100%); border-bottom:0; }
.nav::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-conic-gradient(#111214 0% 25%, transparent 0% 50%) 0 0 / 24px 24px;
  opacity:.14;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 28%,transparent 62%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0%,transparent 28%,transparent 62%,#000 100%);
}
.nav::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px; z-index:-1;
  background:linear-gradient(180deg,var(--racing-red) 0 33%,#fff 33% 66%,var(--racing-blue) 66% 100%);
}
/* Desktop main nav (Bob 2026-10-08): each text item is a 56px box, the same height as
   Chat and Book the Band; hovering outlines it, and its menu drops from the box's bottom edge. */
@media (min-width: 901px) {
  .nav-list > li:not(.nav-chat-item) > a:not(.nav-cta) {
    display:inline-flex; align-items:center; height:56px; box-sizing:border-box;
    padding:0 .7rem; border:2px solid transparent; transition:border-color .15s ease;
  }
  .nav-list > li:not(.nav-chat-item) > a:not(.nav-cta):hover,
  .nav-list > li:not(.nav-chat-item) > a:not(.nav-cta):focus-visible,
  .nav-has-menu:hover > a, .nav-has-menu:focus-within > a { border-color:var(--ink); }
  .nav-list { gap:clamp(.1rem,.6vw,.6rem); }
  .nav-has-menu > .nav-menu { top:100%; left:0; margin-top:0; }
}
/* Waving black-and-white checkered flag behind the header (Bob 2026-10-08).
   The flag shows at full strength through a see-through background; soft white glows
   sit only behind the wordmark and the menu so every word keeps strong contrast. */
.nav { background:#fff; }
.nav::before {
  inset:0; opacity:1; z-index:-2;
  background:
    repeating-linear-gradient(100deg, rgba(0,0,0,0) 0 70px, rgba(0,0,0,.28) 140px, rgba(0,0,0,0) 210px, rgba(255,255,255,.35) 280px, rgba(0,0,0,0) 350px),
    repeating-conic-gradient(#111214 0% 25%, #ffffff 0% 50%) 0 0 / 28px 28px;
  -webkit-mask-image:none; mask-image:none;
  clip-path:inset(0);
  animation:nav-flag-ripple 6s linear infinite, nav-flag-wave 3s ease-in-out infinite alternate;
}
@keyframes nav-flag-ripple { from { background-position:0 0, 0 0; } to { background-position:350px 0, 28px 0; } }
@keyframes nav-flag-wave { from { transform:skewY(-.8deg) scaleY(1.06); } to { transform:skewY(.8deg) scaleY(1.06); } }
.nav-brand, .nav-links { position:relative; }
.nav-brand::before, .nav-links::before {
  content:""; position:absolute; z-index:-1; pointer-events:none; inset:-14px -28px;
  background:radial-gradient(closest-side, rgba(255,255,255,.97) 70%, rgba(255,255,255,0) 100%);
}
.nav-links::before { inset:-14px -30px; background:radial-gradient(closest-side, rgba(255,255,255,.97) 78%, rgba(255,255,255,0) 100%); }
@media (max-width:900px) { .nav-links::before { display:none; } }
@media (prefers-reduced-motion: reduce) { .nav::before { animation:none; } }
.nav::before { inset:0 0 6px 0; transform:none; animation:nav-flag-ripple 6s linear infinite, nav-flag-bob 1.6s ease-in-out infinite alternate; }
@keyframes nav-flag-bob { from { background-size:350px 100%, 28px 28px; } to { background-size:350px 100%, 28px 31px; } }
@media (prefers-reduced-motion: reduce) { .nav::before { animation:none; } }
@media (max-width:600px) { .nav-brand::before { inset:-12px -12px; } }
.nav-brand::before, .nav-links::before { background:rgba(255,255,255,.96) !important; border-radius:40px; filter:blur(10px); }
.nav-brand::before { inset:-8px -20px; }
.nav-links::before { inset:-4px -18px; }
@media (max-width:600px) { .nav-brand::before { inset:-6px -10px -6px -6px; filter:blur(7px); } }
.nav-brand::before { inset:-8px -20px 2px; }
.nav-links::before { inset:0 -18px 6px; }
@media (max-width:600px) { .nav-brand::before { inset:-6px -10px 2px -6px; } }
/* The event ticker scrolls (Bob 2026-10-08); still for reduced-motion visitors. */
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation:ticker-scroll 40s linear infinite !important; }
  .ticker:hover .ticker-track { animation-play-state:paused !important; }
}
/* Header (Bob 2026-10-08): mostly white; the waving checkered flag shows only at the
   far left and right edges and fades to white toward the middle. */
.nav { background:#fff; }
.nav::before {
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.6) 3%,transparent 9%,transparent 91%,rgba(0,0,0,.6) 97%,#000 100%) !important;
          mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.6) 3%,transparent 9%,transparent 91%,rgba(0,0,0,.6) 97%,#000 100%) !important;
}
.nav-brand::before, .nav-links::before { content:none !important; }
@media (max-width:600px) {
  .nav::before {
    -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 5%,transparent 95%,#000 100%) !important;
            mask-image:linear-gradient(90deg,#000 0%,transparent 5%,transparent 95%,#000 100%) !important;
  }
}
.nav { --flag-edge:max(calc(var(--gutter) - 6px), calc((100% - var(--content-width)) / 2 - 10px)); }
.nav::before {
  -webkit-mask-image:linear-gradient(90deg,#000 0,transparent var(--flag-edge),transparent calc(100% - var(--flag-edge)),#000 100%) !important;
          mask-image:linear-gradient(90deg,#000 0,transparent var(--flag-edge),transparent calc(100% - var(--flag-edge)),#000 100%) !important;
}
/* Hard edge: flag outside the page column, solid white inside it (Bob 2026-10-08). */
.nav { --flag-edge:max(var(--gutter), calc((100% - var(--content-width)) / 2)); }
.nav::before {
  -webkit-mask-image:linear-gradient(90deg,#000 var(--flag-edge),transparent var(--flag-edge),transparent calc(100% - var(--flag-edge)),#000 calc(100% - var(--flag-edge))) !important;
          mask-image:linear-gradient(90deg,#000 var(--flag-edge),transparent var(--flag-edge),transparent calc(100% - var(--flag-edge)),#000 calc(100% - var(--flag-edge))) !important;
}
@media (max-width:600px) { .nav::before { -webkit-mask-image:linear-gradient(90deg,#000 var(--flag-edge),transparent var(--flag-edge),transparent calc(100% - var(--flag-edge)),#000 calc(100% - var(--flag-edge))) !important; mask-image:linear-gradient(90deg,#000 var(--flag-edge),transparent var(--flag-edge),transparent calc(100% - var(--flag-edge)),#000 calc(100% - var(--flag-edge))) !important; } }
.nav { --flag-edge:max(calc(var(--gutter) - 20px), calc((100% - var(--content-width)) / 2 - 24px)); }
@media (max-width:600px) { .nav { --flag-edge:8px; } }
/* Blue header (Bob 2026-10-08): racing blue panel over the page column, waving flag
   beyond it. Text and controls recolored for contrast on blue. */
.nav { background:var(--racing-blue); }
.nav-brand-name .brand-red { color:#fff; }
.nav-brand-name .brand-blue { color:#ff5a6a; }
.nav-brand-tag { color:#dfe7f3; }
.nav-brand-name, .nav-brand-tag { text-shadow:none; }
.nav-toggle { background:var(--racing-blue); border-color:#fff; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { background:#fff !important; }
.nav-chat, .nav-cta { border-color:#fff !important; color:#fff !important; }
.nav-cta:hover { background:#fff !important; color:var(--racing-blue) !important; }
.nav::after { background:linear-gradient(180deg,var(--racing-red) 0 33%,#fff 33% 66%,#111214 66% 100%); }
@media (min-width:901px) {
  .nav-list > li:not(.nav-chat-item) > a:not(.nav-cta) { color:#fff !important; text-shadow:none; }
  .nav-list > li > a[aria-current="true"]:not(.nav-cta), .nav-list > li > a[aria-current="page"]:not(.nav-cta) { color:#ff8f9a !important; }
  .nav-list > li:not(.nav-chat-item) > a:not(.nav-cta):hover,
  .nav-list > li:not(.nav-chat-item) > a:not(.nav-cta):focus-visible,
  .nav-has-menu:hover > a, .nav-has-menu:focus-within > a { border-color:#fff; }
}
/* Breadcrumb spacing: 40px above and 40px below on every page (Bob 2026-10-08) */
main > section:first-child:has(> .container > .crumbs) { padding-top:40px; }
.crumbs { margin-top:0 !important; margin-bottom:40px !important; }
/* Blue header panel lines up exactly with the page column; its content sits inside it. */
.nav { --flag-edge:max(var(--gutter), calc((100% - var(--content-width)) / 2)); }
.nav-inner { padding-inline:clamp(10px, 1.4vw, 22px); box-sizing:border-box; }
@media (max-width:600px) { .nav { --flag-edge:var(--gutter); } .nav-inner { padding-inline:8px; } }
/* Breadcrumb starts where the header text starts (Bob 2026-10-08) */
.crumbs { padding-inline-start:clamp(10px, 1.4vw, 22px); }
@media (max-width:600px) { .crumbs { padding-inline-start:8px; } }
/* Home banner: "All jacked up on Mountain Dew and ready to party." (Bob 2026-10-08) */
.dew-banner { position:relative; width:100vw; margin-inline:calc(50% - 50vw); background:var(--racing-red);
  padding:clamp(28px,4.5vw,64px) var(--gutter); text-align:center; overflow:hidden; isolation:isolate; }
.dew-banner::before, .dew-banner::after { content:""; position:absolute; left:0; right:0; height:14px;
  background:repeating-conic-gradient(#111214 0% 25%, #fff 0% 50%) 0 0 / 14px 14px; }
.dew-banner::before { top:0; } .dew-banner::after { bottom:0; }
.dew-line { margin:0 auto; max-width:1100px; font-family:var(--display); font-style:italic; color:#fff;
  font-size:clamp(1.9rem,5.2vw,4.6rem); line-height:1.02; letter-spacing:-.01em; text-transform:uppercase;
  text-shadow:4px 4px 0 var(--racing-blue); text-wrap:balance; transform:skewX(-6deg); }
.dew-sub { margin:.9rem 0 0; font-family:var(--label); font-weight:700; font-style:italic; color:#fff;
  font-size:clamp(1.1rem,2vw,1.7rem); letter-spacing:.08em; text-transform:uppercase; }
/* Small option callout (Bob 2026-10-09): the karaoke-for-first-set option */
.option-callout { margin:1.5rem 0 2rem; padding:1rem 1.25rem; border-left:6px solid var(--racing-red); background:rgba(255,255,255,.08); }
.section-light .option-callout, .guide-body:not(.section-dark *) .option-callout { background:#fff; }
.option-callout p { margin:0; }
.option-callout strong { color:var(--racing-red); text-transform:uppercase; letter-spacing:.04em; font-family:var(--label); }
.section-dark .option-callout strong { color:#ff8f9a; }
.chapter-copy .option-callout { clear:both; }
.chapter-with-photo:has(.option-callout) .option-callout { grid-column:1/-1; }
/* Home: Review the Band (Bob 2026-10-11) */
.review-band { background:var(--racing-blue); color:#fff; padding:clamp(40px,6vw,72px) 0; border-top:6px solid var(--racing-red); border-bottom:6px solid var(--racing-red); }
.review-inner { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,64px); align-items:center; }
.review-band h2 { color:#fff; margin:0 0 .75rem; }
.review-band p { color:#fff; max-width:52ch; margin:0 0 1.5rem; font-size:1.15rem; }
.review-btn { background:var(--racing-red); color:#fff !important; border:2px solid #fff; }
.review-btn:hover { background:#fff; color:var(--racing-blue) !important; }
.review-qr { display:flex; flex-direction:column; align-items:center; gap:.6rem; text-decoration:none; color:#fff; font-family:var(--label); text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; }
.review-qr img { width:clamp(150px,16vw,210px); height:auto; background:#fff; padding:12px; image-rendering:pixelated; box-shadow:8px 8px 0 #111214; }
@media(max-width:700px){ .review-inner { grid-template-columns:1fr; text-align:center; } .review-band p { margin-inline:auto; } }
@media(max-width:700px){ .review-band .review-inner { padding-inline:var(--gutter); box-sizing:border-box; } }
/* Header (Bob 2026-10-12): no checkered flag; a solid racing-blue gradient edge to edge. */
.nav::before { content:none !important; animation:none !important; }
.nav { background:linear-gradient(115deg,#0d2a55 0%,var(--racing-blue) 45%,#2457a3 100%); }
.nav-toggle { background:transparent; }
/* Home: first Google review, right under the hero (Bob 2026-10-12) */
.fan-review { position:relative; overflow:hidden; isolation:isolate; background:var(--paper);
  padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,104px); }
.fan-review-stripes { position:absolute; inset:-20% -10%; z-index:-1; transform:skewY(var(--stripe-angle));
  background:linear-gradient(180deg, transparent 0 38%, var(--racing-red) 38% 50%, #fff 50% 54%, var(--racing-blue) 54% 70%, transparent 70%); }
.fan-review-inner { display:flex; flex-direction:column; align-items:center; }
.fan-review-title { margin:0 0 clamp(20px,3vw,36px); font-family:var(--display); font-style:italic; text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.8rem); line-height:1; color:var(--racing-blue); text-align:center;
  letter-spacing:.01em; word-spacing:.12em; text-shadow:4px 4px 0 var(--racing-red); transform:skewX(-6deg); text-wrap:balance; }
.fan-card { position:relative; margin:0; width:min(100%,1040px); display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(24px,4vw,56px); align-items:center; background:#fff; border:4px solid #111214;
  padding:clamp(24px,4vw,52px); box-shadow:12px 12px 0 #111214; transform:rotate(-1.2deg); }
.fan-card::before { content:""; position:absolute; top:0; left:0; right:0; height:14px;
  background:repeating-conic-gradient(#111214 0% 25%, #fff 0% 50%) 0 0 / 14px 14px; }
.fan-card::after { content:"\201C"; position:absolute; right:clamp(12px,3vw,40px); top:clamp(-38px,-3vw,-20px);
  font-family:var(--display); font-size:clamp(7rem,14vw,12rem); line-height:1; color:var(--racing-red);
  text-shadow:5px 5px 0 #111214; pointer-events:none; }
.fan-photo { position:relative; width:clamp(150px,22vw,260px); }
.fan-photo img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:50%;
  border:6px solid var(--racing-blue); box-shadow:0 0 0 6px #fff, 0 0 0 10px var(--racing-red); }
.fan-stars { margin:0 0 .6rem; display:flex; gap:.25rem; font-size:clamp(1.8rem,3vw,2.5rem); line-height:1; color:var(--racing-red); }
.fan-stars span { display:inline-block; text-shadow:2px 2px 0 #111214; }
.fan-quote { margin:0; padding:0; border:0; }
.fan-quote p { margin:0; font-family:var(--body); font-weight:500; font-size:clamp(1.1rem,1.7vw,1.45rem); line-height:1.5; color:var(--ink); }
.fan-cite { margin-top:1.2rem; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem;
  font-family:var(--label); text-transform:uppercase; letter-spacing:.06em; }
.fan-name { background:var(--racing-blue); color:#fff; padding:.25rem .8rem; font-weight:700; font-size:1.15rem; transform:skewX(-10deg); }
.fan-event { color:var(--ink-soft); font-weight:600; font-size:1rem; }
.fan-source { color:var(--racing-red); font-weight:700; font-size:1rem; }
@media (prefers-reduced-motion:no-preference) {
  .fan-card { animation:fan-slide .7s cubic-bezier(.2,.9,.3,1.2) both; animation-timeline:view(); animation-range:entry 0% entry 60%; }
  .fan-stars span { animation:fan-star .5s ease-out both; animation-timeline:view(); animation-range:entry 10% entry 70%; }
  .fan-stars span:nth-child(2) { animation-delay:.08s; } .fan-stars span:nth-child(3) { animation-delay:.16s; }
  .fan-stars span:nth-child(4) { animation-delay:.24s; } .fan-stars span:nth-child(5) { animation-delay:.32s; }
  @keyframes fan-slide { from { opacity:0; transform:translateX(-12vw) rotate(-4deg); } to { opacity:1; transform:rotate(-1.2deg); } }
  @keyframes fan-star { from { opacity:0; transform:scale(.2) rotate(-90deg); } to { opacity:1; transform:none; } }
}
@media (max-width:700px) {
  .fan-review-inner { padding-inline:var(--gutter); box-sizing:border-box; }
  .fan-card { grid-template-columns:1fr; justify-items:center; text-align:center; transform:rotate(-.6deg); box-shadow:7px 7px 0 #111214; }
  .fan-card::after { font-size:6rem; top:-16px; right:10px; }
  .fan-review-title { line-height:1.12; text-shadow:3px 3px 0 var(--racing-red); }
  .fan-stars, .fan-cite { justify-content:center; }
}
/* Homepage promo: thumbnail linking to the watch page (Bob 2026-10-12) */
.video-thumb { display:block; }
.video-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.video-thumb:hover img, .video-thumb:focus-visible img { transform:scale(1.03); }
.video-play { position:absolute; left:50%; top:50%; width:clamp(64px,8vw,92px); aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--racing-red); border:4px solid #fff; box-shadow:5px 5px 0 #111214; }
.video-play::after { content:""; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%);
  border-style:solid; border-width:14px 0 14px 24px; border-color:transparent transparent transparent #fff; }
.video-thumb:hover .video-play { background:var(--red-deep); }
/* Watch page */
.watch .container { max-width:1100px; }
.watch-title { margin:0 0 1.25rem; color:#fff; }
.watch-frame { box-shadow:10px 10px 0 var(--action), 20px 20px 0 #111214; }
.watch-desc { margin:2rem 0 0; color:#fff; font-size:1.15rem; max-width:60ch; }
@media (max-width:700px) { .watch-frame { box-shadow:6px 6px 0 var(--action), 12px 12px 0 #111214; } }
/* Media index (Bob 2026-10-12) */
.media-item { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.media-item .video-frame { box-shadow:10px 10px 0 var(--action), 20px 20px 0 #111214; }
.media-copy .page-title { margin:0 0 1rem; color:#fff; }
.media-name { margin:0 0 .5rem; font-size:1.4rem; }
.media-name a { color:#fff; }
.media-copy p { color:#fff; font-size:1.1rem; margin:0 0 1.5rem; }
@media (max-width:800px) { .media-item { grid-template-columns:1fr; } .media-item .video-frame { box-shadow:6px 6px 0 var(--action), 12px 12px 0 #111214; } }