/* ============================================================
   Ricky Bobby — race-livery design system
   Palette: Gulf-livery powder blue + race orange on cool white
   Type: Racing Sans One (display) / Barlow (body) / Barlow Condensed (labels)
   ============================================================ */

:root {
  --asphalt: #1a1b1e;
  --asphalt-soft: #242629;
  --paper: #f2f4f3;
  --white: #ffffff;
  --blue: #7cc5dc;
  --blue-deep: #2e9bbf;
  --orange: #f25c19;
  --orange-deep: #d44a0e;
  --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(--blue-deep); }

:focus-visible {
  outline: 3px solid var(--orange);
  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(--orange);
  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); }

.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(--orange);
  border-color: var(--orange);
  color: var(--white);
}
.btn-solid:hover { background: var(--orange-deep); border-color: var(--orange-deep); }

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

.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(--orange);
}

/* 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) 0 28px,
    var(--white) 28px 40px,
    var(--orange) 40px 68px,
    var(--white) 68px 80px
  );
}

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

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

.ticker-blue {
  background: var(--blue);
  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(--orange);
  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);
  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(--orange);
  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;
  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 Event Services 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;
}

/* ---- Event Services dropdown ----------------------------------------------
   No JavaScript, on purpose. Opens on :hover for pointers and :focus-within
   for keyboards. Touch devices have no hover, so the item behaves as a plain
   link to /services/, 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(--orange-deep); }

/* 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(--orange); }

.nav-cta {
  background: var(--asphalt);
  color: var(--paper) !important;
  padding: 0.45rem 1.1rem;
}
.nav-cta:hover { background: var(--orange); 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) 0 130px,
    transparent 130px 156px,
    var(--orange) 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(--orange), transparent);
  opacity: 0;
  filter: blur(1.5px);
}

.sl-1 { top: 8%; }
.sl-2 { top: 17%; background: linear-gradient(90deg, transparent, var(--blue-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(--blue-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(--blue-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(--blue-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(--blue-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(--orange);
  -webkit-text-stroke: 0;
}

/* "Band" 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);
}

.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(--orange) 0%, var(--orange) 42%,
      #ffb27d 50%,
      var(--orange) 58%, var(--orange) 100%
    );
    animation-delay: 0.35s;
  }
}

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

/* wordmark drumroll: RIKKI, BOBBY, BAND 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(--orange);
}

/* 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(--orange) 0 8px, var(--blue) 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(--orange); 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);
  border: 3px solid var(--asphalt);
  box-shadow: 8px 8px 0 var(--blue);
}

.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(--orange);
  margin: 0.25rem 0 0.9rem;
}

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

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

/* genre cards run from 2 to 17 songs. plain grid rows lock every card in a row
   to the tallest, which strands most of a column. `grid-template-rows: masonry`
   is not shippable yet, so masonry() in main.js measures each card and sets
   --span in 8px row units; `dense` then backfills the short cards into the
   gaps. without JS this stays the row grid below, which is correct, just tall. */
.setlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
  /* cards must sit at their content height, not stretch to the row. the
     measuring pass in main.js reads these boxes and would otherwise record
     every card in a row as tall as the tallest one. */
  align-items: start;
}

.setlist-grid.is-masonry {
  grid-auto-flow: row dense;
  grid-auto-rows: 8px;
  row-gap: 0;
}

.setlist-grid.is-masonry .setlist-col { grid-row: span var(--span, 40); }

.setlist-heading {
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
  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);
  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(--orange);
  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(--orange);
}

/* ---------- 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(--orange); }
.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;
  top: -1.1rem;
  left: clamp(0.5rem, 3vw, 2rem);
  z-index: 3;
  background: var(--orange);
  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);
  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(--orange);
  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(--orange);
  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;
  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(242, 92, 25, 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(--orange); }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 3px solid var(--orange); }

.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 textarea {
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--asphalt);
  background: var(--white);
  color: var(--ink);
}

.book-form input:focus,
.book-form textarea:focus {
  outline: 3px solid var(--blue);
  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);
  color: var(--blue);
  transform: skewX(-8deg);
}

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

/* ---------- 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(--orange-deep);
  margin-bottom: 0.6rem;
}

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

.section-dark .faq-item h3 { color: var(--blue); }
.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: #1d7a3e; }
.form-status.is-err { color: var(--orange-deep); }

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

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

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

.section-blue .eyebrow { color: var(--orange-deep); }
.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(--orange), 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(--orange), 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(124, 197, 220, 0.12) 180px 230px, transparent 230px 260px, rgba(242, 92, 25, 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);
  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(--orange);
}

.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); 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(auto-fit, minmax(190px, 1fr));
  gap: 2rem clamp(2rem, 6vw, 5rem);
  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(--orange);
  margin-bottom: 0.9rem;
}

.footer-col ul { list-style: none; }
.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(--orange); }

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

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

/* Nav wraps earlier than everything else. Adding Guides made it five primary
   links plus the CTA, which stops fitting beside the wordmark somewhere around
   900px, well above the 760px breakpoint the rest of the site uses. */
@media (max-width: 900px) {
  .nav-inner { flex-wrap: wrap; justify-content: center; }
  .nav-list { flex-wrap: wrap; justify-content: center; row-gap: 0.4rem; }
}

@media (max-width: 760px) {
  .form-row { grid-template-columns: 1fr; }
  .roundel-hero { box-shadow: 4px 4px 0 var(--orange); }
  .wordmark-band-row { gap: 1rem; }
  .band-plate { box-shadow: 4px 4px 0 var(--blue); }
  .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(--orange); }
.crumbs a:hover { color: var(--orange); }

/* 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: 4.5rem;
  height: 4.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(242, 92, 25, 0.35);
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.chat-bubble:hover { background: var(--orange-deep); transform: scale(1.05); }
.chat-bubble:active { transform: scale(0.95); }

.chat-bubble-label {
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

.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: absolute;
    inset: auto;
    right: 0;
    bottom: 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(--orange);
}

.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(--orange);
  animation: chat-blip 2.4s ease-in-out infinite;
}
@keyframes chat-blip {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 92, 25, 0.7); }
  50%      { box-shadow: 0 0 0 6px rgba(242, 92, 25, 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(--orange); color: var(--orange-deep); }

.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(--orange);
  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(--blue-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(--orange);
  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(--orange-deep);
  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(--orange-deep);
  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(--orange); }

.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(--orange);
  color: var(--white);
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.chat-send:hover:not(:disabled) { background: var(--orange-deep); }
.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(--orange);
  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(--orange); }
.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(--orange);
}

.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(--orange); border-color: var(--orange); 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); }

.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(--orange);
  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(--orange-deep);
  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(--blue-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--blue);
}
.guide-body a:hover { color: var(--orange-deep); border-bottom-color: var(--orange); }

.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); }
.section-dark .guide-body h3 { color: var(--blue); }
.section-dark .guide-body strong { color: var(--paper); }
.section-dark .guide-body a { color: var(--blue); }

/* ---------- 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); background: var(--asphalt-soft); }
.section-dark .guide-table th { background: var(--blue); 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(--orange-deep); }
.section-dark .guide-meta { color: #b9bec2; }
.section-dark .guide-meta .guide-byline { color: var(--orange); }

/* ---------- 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(--orange);
  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(--blue-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);
  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(--orange);
}

/* ---------- 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(--orange); }
.guide-col:nth-child(even) { border-top-color: var(--blue-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(--orange);
}

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

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

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

/* ---------- 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(--orange);
  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(--orange-deep); }

/* 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); }
.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(--orange); }
.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. Generated from PAGE_ORDER by
   gen_service_subnav in build.py, so it cannot point at a page that does not
   exist.

   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(--orange-deep); border-bottom-color: var(--orange); }
.services-subnav-here { color: var(--ink); border-bottom-color: var(--orange); }

.section-dark .services-subnav { border-bottom-color: var(--blue); }
.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);
}