/* ============================================================
   DJ WIZ HOFFA — V1 SHARED SHELL + SYSTEM
   site.css?v=7 — load AFTER tokens.css.
   Contract: docs/ARCHITECTURE.md. Pages add ONLY layout-specific
   CSS in css/<page>.css. Never restyle the shell per page.

   TOC:
   01 Reset & base            07 Buttons
   02 Typography              08 Section header pattern
   03 Layout & containers     09 Cards (panel / flyer / stat)
   04 Skip link & focus       10 Lazy embed (click-to-load)
   05 Header + nav            11 Video slot (.vslot)
   06 Overlay menu            12 Utilities
                              13 Reduced motion / print
   ============================================================ */

/* ---------- 01 Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  overflow-x: clip; /* house law: clip NOT hidden — keeps position:sticky alive */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }

img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

ul[class], ol[class] { list-style: none; padding: 0; }

hr.rule { border: 0; border-top: 1px solid var(--line); }

::selection { background: var(--crimson); color: var(--ivory); }

/* ---------- 02 Typography ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;              /* Anton ships 400 only */
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: var(--lh-tight);
  color: var(--ivory);
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-title); }
h3 { font-size: var(--fs-h3); }

h4, h5, h6 {
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-h4);
  color: var(--ivory);
}

/* Tighter track than the base 0.01em: at hero scale (up to 10.5rem) Anton wants
   to knit tight for poster density/authority, not spread. Smaller h2/h3 keep 0.01em. */
.hero-title { font-size: var(--fs-hero); letter-spacing: -0.005em; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lead);
  color: var(--ivory-80);
  max-width: 60ch;
}

/* Inline links: ivory text, crimson underline. NEVER crimson body text
   (fails AA on black — see tokens.css contrast law). */
a {
  color: var(--ivory);
  text-decoration-color: var(--crimson-hot);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

a:hover { text-decoration-thickness: 2px; }

strong { color: var(--ivory); font-weight: 600; }

/* ---------- 03 Layout & containers ---------- */
.container {
  width: min(100% - (2 * var(--gutter)), var(--w-max));
  margin-inline: auto;
}

.container--wide   { width: min(100% - (2 * var(--gutter)), var(--w-wide)); }
.container--narrow { width: min(100% - (2 * var(--gutter)), var(--w-narrow)); }

.sect { padding-block: var(--sect-pad); }

.sect--tight { padding-block: calc(var(--sect-pad) * 0.6); }

/* Alternating depth band. --bg-2 against --bg is a 4/255 step (1.03:1) and is
   perceptually invisible on its own, so the band ARRIVES with a thin lift of
   light at its top edge and settles back toward the page ground at its bottom.
   Fixed pixel lengths, not percentages: this is an edge event, so it must read
   the same on an 800px band and a 1900px one.

   Authored as background-color + background-image LONGHANDS on purpose. Page
   sheets load after this one and override .sect--band's background-image to add
   their own wash; with the shorthand that would also reset the band colour to
   transparent and the band would vanish. Longhands degrade gracefully.

   Contrast verified at every position text can occupy: the lightest point a
   section-head eyebrow can reach is 3.5% ivory (a .sect--tight band at 360px),
   where --smoke measures 4.65:1 — AA holds. Cards keep their elevation because
   content starts one --sect-pad below the top edge, where the lift has decayed
   past --panel. */
.sect--band {
  background-color: var(--bg-2);
  background-image:
    linear-gradient(to top,
      color-mix(in srgb, var(--bg) 92%, transparent) 0,
      transparent 140px),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--ivory) 4.5%, transparent) 0,
      transparent 200px);
  border-block: 1px solid var(--line);
}

.grid { display: grid; gap: var(--sp-6); }

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

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

main { display: block; }

/* Page top padding when a page has no full-bleed hero under the header */
.page-top { padding-top: calc(var(--header-h) + var(--sp-7)); }

/* ---------- 04 Skip link & focus ---------- */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--z-skip);
  padding: 0.8rem 1.2rem;
  background: var(--crimson);
  color: var(--ivory);
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  text-decoration: none;
  border-radius: var(--r-sm);
  transform: translateY(-250%);
}

.skip-link:focus-visible { transform: none; }

/* No border-radius here: the outline rounds to each element's own corner
   radius on modern browsers, so the ring hugs the surface instead of
   snapping every focused .btn/.lazy-embed to a fixed 2px corner. */
:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 3px;
}

/* ---------- 05 Header + nav ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.62), rgba(10, 10, 10, 0));
  border-bottom: 1px solid transparent;
  transition:
    background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    backdrop-filter var(--dur-2) var(--ease);
}

.site-header.is-solid {
  background: rgba(10, 10, 10, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}

/* While the overlay menu is open the header sits above it; go clean-dark */
.menu-open .site-header {
  background: rgba(10, 10, 10, 0.96);
  border-bottom-color: var(--line);
}

.header-inner {
  width: min(100% - (2 * var(--gutter)), var(--w-wide));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.logo {
  display: inline-flex;      /* 22px text box -> 44px target. inline-flex keeps the
                                width hugging the wordmark, and .header-inner is
                                already align-items:center so it stays optically set. */
  align-items: center;
  min-height: 44px;
  font-family: var(--font-logo);
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--ivory);
  text-decoration: none;
  white-space: nowrap;
}

.logo .logo-dj {
  color: var(--crimson-text);    /* crimson TEXT token — ~18px caps need AA-normal (contrast law) */
  font-size: 0.72em;
  letter-spacing: 0.12em;
  margin-right: 0.08em;
}

.site-nav { margin-left: auto; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  padding: 0;
}

.site-nav a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.1rem;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-80);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 2px;
  background: var(--crimson-line);   /* hover/current underline reads as light, not a near-black smear */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}

.site-nav a:hover { color: var(--ivory); }

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

.site-nav a[aria-current="page"] { color: var(--ivory); }

/* Adds to .header-inner's 24px gap, so this is 56px of clear air between the
   nav run and the crimson fill — at the old 8px the separation equalled the
   32px inter-nav gap and Book Wiz read as a seventh nav item rather than the
   site's one persistent conversion accent. Below 1220 the max-width block
   overrides this to auto and the hamburger takes over. */
/* nowrap: the 8th nav item (Faces of 518) squeezes this button when space gets
   tight and it broke to two lines. The button never wraps; the nav gap gives way first. */
.header-cta { margin-left: var(--sp-6); white-space: nowrap; }

/* Tighten the nav rhythm in the band where 8 items + the CTA compete for room,
   before the 1220px hamburger takes over. Below 1220 the hamburger owns the
   header; above 1400 the base --sp-6 gap and full CTA margin return. */
@media (min-width: 1220px) and (max-width: 1400px) {
  .site-nav ul { gap: clamp(1rem, 1.8vw, 2rem); }
  .header-cta { margin-left: var(--sp-5); }
}

/* Hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle .bar {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--ivory);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}

.nav-toggle .bar:nth-child(1) { top: 15px; }
.nav-toggle .bar:nth-child(2) { top: 21px; }
.nav-toggle .bar:nth-child(3) { top: 27px; }

.nav-toggle.is-open .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open .bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1219.98px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; order: 6; }
  .header-cta { margin-left: auto; order: 5; }
  /* 44px, not 40px — this is the primary mobile conversion CTA and it was
     under the house floor by explicit override. */
  .header-cta.btn { padding: 0.7rem 1.05rem; font-size: 0.88rem; min-height: 44px; }
}

@media (max-width: 767.98px) {
  :root { --header-h: 4rem; }
  .logo { font-size: 1.4rem; }
}

/* ---------- 06 Overlay menu (<980px) ---------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);          /* below header: logo/CTA/toggle stay usable */
  display: flex;
  flex-direction: column;
  /* Tightened to fit 10 nav items (8 primary + Brand Partnerships + Contact)
     plus the contact foot: at the looser spacing the stack ran ~840px and the
     money links (phone, @wizhoffa, Book Wiz) fell below the fold on a real
     mobile Safari viewport. Shrinking only gaps + top padding here and in
     .menu-overlay nav ul / .menu-foot recovers ~60px so the conversion foot
     clears at rest. No touch-target changes; every link keeps its 44px min. */
  gap: var(--sp-4);
  padding: calc(var(--header-h) + var(--sp-2)) var(--gutter) var(--sp-6);
  background: rgba(10, 10, 10, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;              /* removes from tab order + AT when closed */
  transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  overflow-y: auto;
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Trade list gap for link height: this is the site's ONLY navigation below
   1220px and every link is a protected 44px target. With 10 items the gap
   absorbs the fit cost — tightened to sp-1 (4px) so the whole stack plus the
   contact foot clears the fold; the 44px min-heights are never touched. */
.menu-overlay nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  list-style: none;
  padding: 0;
}

.menu-overlay nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3rem);
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ivory-80);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease), padding-left var(--dur-2) var(--ease);
}

.menu-overlay nav a:hover { color: var(--ivory); }

.menu-overlay nav a[aria-current="page"] {
  color: var(--ivory);
  padding-left: var(--sp-4);
  box-shadow: inset 4px 0 0 var(--crimson-line);   /* "you are here" bar arrives as light */
}

.menu-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
}

.menu-foot a { text-decoration: none; }

/* The phone number — the money link in the mobile menu — was a 24.8px target. */
.menu-foot .menu-contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--smoke);
  font-size: var(--fs-small);
}

@media (min-width: 1220px) {
  .menu-overlay { display: none; }
}

/* ---------- 07 Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 1rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}

/* Shared :focus-visible already paints the ring; no per-button override. */

.btn:active { transform: translateY(1px); }

.btn--sm { min-height: 40px; padding: 0.7rem 1.15rem; font-size: 0.9rem; }
.btn--lg { min-height: 56px; padding: 1.2rem 2.4rem; font-size: 1.05rem; }

.btn-solid {
  background: var(--crimson);
  color: var(--ivory);
}

.btn-solid:hover {
  background: var(--crimson-hot);
  box-shadow: var(--glow-crimson);
  transform: translateY(-1px);   /* rise on hover; :active sinks 1px — 2px tactile travel */
}

.btn-solid:active { background: var(--crimson-deep); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ivory);
}

.btn-ghost:hover {
  border-color: var(--ivory);
  background: color-mix(in srgb, var(--ivory) 6%, transparent);
  transform: translateY(-1px);   /* matches solid: rise on hover, sink on press */
}

/* ---------- 08 Section header pattern ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--smoke);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--crimson-line);   /* lit accent (3.69:1), not the 2.4:1 fill — the tick reads crisp on black */
  flex: none;
}

.eyebrow--center { justify-content: center; }

/* Head-to-content gap breathes in step with --sect-pad instead of a fixed 3rem,
   so section titles don't feel cramped at 1440/1920 where the section runs 8rem. */
.sect-head { margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-8)); }

.sect-head .eyebrow { margin-bottom: var(--sp-4); }

.sect-title { font-size: var(--fs-title); }

.sect-head--center { text-align: center; }
.sect-head--center .eyebrow { justify-content: center; }

.sect-head .sect-lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  color: var(--ivory-80);   /* matches .lead — every lead paragraph shares one presence level */
  max-width: 58ch;
}

.sect-head--center .sect-lead { margin-inline: auto; }

/* ---------- 09 Cards ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.25rem, 3vw, 2rem);
  /* Catch-light on the top edge — on a #0A0A0A ground a drop shadow carries
     no light, so black-glass elevation comes from a hairline of ivory up top. */
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ivory) 5%, transparent);
}

.panel--raise { background: var(--panel-2); }

/* Framed flyer artifact — real booking flyers displayed as archival objects.
   Gold flyer art lives INSIDE the frame; frame chrome stays black/ivory. */
.flyer-card {
  background: var(--flyer-ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  /* Depth shadow + top-edge catch-light so the archival frame reads as glass. */
  box-shadow: var(--shadow-2), inset 0 1px 0 color-mix(in srgb, var(--ivory) 6%, transparent);
}

.flyer-card img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}

.flyer-card .flyer-meta {
  padding-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.flyer-card .flyer-tag {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ivory-60);   /* was --smoke: 13px at 0.22em tracking is below the
                               house floor for smoke-grey (14px+). 5.2:1 -> 7.2:1,
                               zero layout shift. */
}

/* Stat block — Bebas numerals, ivory (crimson numerals fail contrast) */
.stat { display: flex; flex-direction: column; gap: var(--sp-2); }

.stat .stat-num {
  font-family: var(--font-logo);
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--ivory);
}

.stat .stat-label {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--smoke);
}

.stat::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--crimson-line);   /* lit accent tick, matches the eyebrow mark */
  margin-bottom: var(--sp-2);
}

/* ---------- 10 Lazy embed (click-to-load YouTube facade) ---------- */
.lazy-embed {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
}

.lazy-embed img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}

.lazy-embed:hover img { opacity: 1; transform: scale(1.03); }

.lazy-embed .play-glyph {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.62);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.lazy-embed .play-glyph::after {
  content: "";
  margin-left: 6px;
  border-left: 20px solid var(--ivory);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.lazy-embed:hover .play-glyph,
.lazy-embed:focus-visible .play-glyph {
  background: var(--crimson);
  box-shadow: var(--glow-crimson);
  transform: scale(1.06);   /* the affordance blooms with the crimson — it's the thing you click */
}

.lazy-embed .embed-label {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  padding: 0.4rem 0.7rem;
  background: rgba(10, 10, 10, 0.6);
  border-radius: var(--r-xs);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory);
}

.embed-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg);
}

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

/* ---------- 11 Video slot (.vslot) ----------
   Poster <img> is the in-flow base layer and sizes the box; the <video>
   sits above at opacity 0 and only fades in (.is-live, set by site.js)
   once it can actually play. If media/web files are absent or 404,
   nothing breaks — the page ships looking finished on the poster. */
.vslot {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border-radius: var(--r-md);
}

.vslot--bare { border-radius: 0; }

.vslot .vslot-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vslot video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}

.vslot.is-live video { opacity: 1; }

/* Full-bleed variant: parent must be position:relative */
.vslot--fill {
  position: absolute;
  inset: 0;
  border-radius: 0;
  z-index: var(--z-bg);
}

.vslot--fill .vslot-poster { position: absolute; inset: 0; }

/* ---------- 12 Utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.measure { max-width: var(--w-copy); }

.muted { color: var(--smoke); }

.soft { color: var(--ivory-60); }

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

.label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

/* Crimson haze wash — decorative section backdrop, use sparingly */
.haze {
  position: relative;
}

.haze::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  background: radial-gradient(60% 50% at 50% 0%, var(--haze), transparent 70%);
  pointer-events: none;
}

/* ---------- Footer ---------- */
/* Same arrival lift as .sect--band — the footer shares --bg-2 with the bands,
   so against a closing section on --bg it previously had only its 1px hairline
   to separate it. Content starts one --sp-9 (96px) down, where the lift has
   decayed to 1.7% and --smoke still measures 4.81:1. */
.site-footer {
  background-color: var(--bg-2);
  background-image: linear-gradient(to bottom,
    color-mix(in srgb, var(--ivory) 4%, transparent) 0,
    transparent 170px);
  border-top: 1px solid var(--line);
  padding: var(--sp-9) 0 var(--sp-6);
}

.foot-grid {
  display: grid;
  gap: var(--sp-7);
}

@media (min-width: 560px) {
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.foot-brand .logo { font-size: 1.9rem; }

.foot-brand .foot-tag {
  margin-top: var(--sp-4);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-60);
}

.foot-brand .foot-role {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--smoke);
}

.foot-head {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ivory-60);   /* was --smoke: 13px at 0.22em is below the smoke
                               floor. NAVIGATE / CONTACT / FOLLOW & STREAM were
                               the faintest strokes on the site. 5.4:1 -> 7.2:1. */
  margin-bottom: var(--sp-4);
}

/* 17 footer links per page rendered as 16px inline boxes — the 0.65rem gap was
   dead space, so live hit pitch was 16px in a 35px row. Gap becomes padding:
   net pitch 45.6px, footer grows ~10px per row. */
.foot-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.foot-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ivory-80);
  text-decoration: none;
  font-size: var(--fs-small);
}

.foot-list a:hover { color: var(--ivory); text-decoration: underline; }

.foot-legal {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  justify-content: space-between;
  color: var(--smoke);
  font-size: var(--fs-small);
}

/* Agency credit: its own line under the legal pair, so neither existing item
   moves. Small-print links inherit the row's --smoke (contrast = neighbours);
   the underline takes the same ink, so it is the link cue without being an
   accent (a crimson rule here was the only colour in the row and read as an ad).
   Hover follows .foot-list a. Tap target is the .merch-note pattern (44px+
   without shifting layout), padded 0.625rem not 0.85rem so the focus ring
   clears the line above across this row's 12px gap (44.75px box). */
.foot-credit { flex-basis: 100%; }

.foot-legal a {
  color: inherit;
  text-decoration-color: currentColor;
  display: inline-block;
  padding-block: 0.625rem;
  margin-block: -0.625rem;
}

.foot-legal a:hover { color: var(--ivory); }

/* Global motion Pause/Play control (WCAG 2.2.2) — injected by site.js between
   the footer grid and the legal line. Uses the shared .btn btn-ghost btn--sm
   tokens; .btn--sm is a 40px target (2.5.8). No new brand colors. */
.motion-pref { margin-top: var(--sp-7); }

/* ---------- 13 Reduced motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  .vslot video { display: none; } /* site.js also skips playback */
}

/* Session Pause control (WCAG 2.2.2): mirror OS reduced motion for CSS-driven
   motion when the user pauses without an OS setting. JS-driven effects are torn
   down by motion.js and the decorative videos are removed by site.js; this only
   quiets any CSS animation/transition, matching the OS-reduced parity above. */
html.motion-paused *,
html.motion-paused *::before,
html.motion-paused *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

html.motion-paused .vslot video { display: none; }

@media print {
  .site-header, .menu-overlay, .nav-toggle, .skip-link,
  .vslot video, .lazy-embed .play-glyph { display: none !important; }

  body { background: #fff; color: #000; }

  a { color: #000; text-decoration: underline; }

  .site-footer { background: #fff; border-top: 1px solid #000; }
}