/* ==========================================================================
   billysorrells.com — rebuilt in BET.com's design language
   FORENSIC REBUILD 2026-10-07. The previous pass sampled only a handful of
   hex codes off a bet.com render and centred the design on a lime accent.
   Re-extracting bet.com's real token layer (CSS custom properties in the
   page + /base-*.css) showed that lime is NOT the brand colour — it is ad /
   promo chrome. The actual BET design system is:

     --color-brand-01: #49365E   (purple, primary brand)
     --color-brand-02: #9B81B6   (purple, light)
     --color-brand-03: #2DD6AE   (teal, brand accent)
     --color-ui-04:    #000000 / --color-ui-05: #242424 (near-black canvas)
     --color-ui-01:    #F6F6F6   (light surface)
     --border-radius:  0         (BET is a ZERO-radius system)
     type scale: caption 1.2 / p2 1.4 / p1 1.6 / kilo 2.4 / mega 2.8 / giga 4.2rem
     --header-v2-background: linear-gradient(45deg,
                               var(--color-brand-01) 0%,
                               var(--color-brand-03) 100%)

   So the brand signature is a PURPLE->TEAL gradient on near-black, with
   sharp square corners. This file now carries those real values.
   Mobile-first. No external dependencies. Works from file:// and deployed.
   ========================================================================== */

/* ---------------------------------------------------------------
   1. Design tokens  (WCAG AA checked — see CONTRAST notes in README)
   --------------------------------------------------------------- */
:root {
  /* ---- BET brand, taken verbatim from bet.com's own custom properties ---- */
  --bet-brand-01: #49365E;   /* purple   */
  --bet-brand-02: #9B81B6;   /* purple-l */
  --bet-brand-03: #2DD6AE;   /* teal     */

  /* The real BET header treatment: 45deg purple -> teal. */
  --brand-gradient: linear-gradient(45deg, var(--bet-brand-01) 0%, var(--bet-brand-03) 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(73,54,94,.92) 0%, rgba(45,214,174,.55) 100%);

  /* Accent = BET teal. Teal #2DD6AE on black is ~11:1 (WCAG AAA), and as a
     button fill with near-black ink it clears AA large + normal. */
  --lime: #2DD6AE;
  --lime-deep: #1FB894;
  --lime-ink: #041714;

  /* BET UI darks: ui-04 #000, ui-05 #242424, ui-06 #3B3B3B */
  --black: #000000;
  --ink: #15151A;
  --panel: #242424;
  --panel-2: #2A2A2F;
  --panel-3: #3B3B3B;
  --line: #38383D;

  /* BET text/UI greys */
  --paper: #F6F6F6;
  --white: #FFFFFF;
  --grey: #A1A1A1;
  --grey-2: #8B8B8B;
  --grey-3: #767676;

  /* BET secondary purple */
  --purple: #49365E;
  --purple-light: #9B81B6;

  /* Semantic */
  --bg: var(--black);
  --fg: var(--paper);
  --muted: var(--grey);
  --focus: var(--lime);

  /* Type — BET ships Soehne (licensed). Anton/Outfit are the closest free
     stand-ins: a heavy condensed display + a neutral grotesque for body. */
  --display: "Anton", "Haettenschweiler", "Arial Narrow Bold", "Franklin Gothic Medium", Impact, sans-serif;
  --sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* BET's own type scale, kept at the same sizes so the rhythm matches. */
  --fs-caption: 1.2rem;
  --fs-p2: 1.4rem;
  --fs-p1: 1.6rem;
  --fs-kilo: 2.4rem;
  --fs-mega: 2.8rem;
  --fs-giga: 4.2rem;

  /* Space & shape — BET is --border-radius: 0 */
  --wrap: 1240px;
  --gutter: 20px;
  --radius: 0px;
  --header-h: 60px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* keep anchored sections clear of the sticky header */
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--lime); text-decoration: none; }
a:hover { color: var(--white); }

p { margin: 0 0 1.05em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.05em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

strong, b { font-weight: 600; color: var(--white); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.2rem 0;
}

/* Display typography — BET's huge condensed uppercase */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .92;
  color: var(--white);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.9rem, 12vw, 8rem); }
h2 { font-size: clamp(2.05rem, 7.4vw, 4.4rem); }
h3 { font-size: clamp(1.3rem, 3.6vw, 1.9rem); line-height: 1.02; }
h4 { font-size: 1.05rem; letter-spacing: .06em; line-height: 1.1; }

h2 em, h1 em { font-style: normal; color: var(--lime); }

/* Accessible focus */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--lime); color: var(--lime-ink); }

/* Screen-reader-only */
.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--lime);
  color: var(--lime-ink);
  font-weight: 700;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  padding: 12px 18px;
  transition: top .18s var(--ease);
}
.skip:focus { top: 12px; color: var(--lime-ink); }

/* ---------------------------------------------------------------
   3. Layout helpers
   --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--wide { max-width: 1500px; }
.wrap--flush { padding-left: 0; padding-right: 0; }

.section { padding: clamp(2.9rem, 8vw, 6rem) 0; }
.section--tight { padding-top: 0; }
.section--ink { background: var(--ink); }
.section--panel { background: var(--panel-3); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* BET section head: small lime eyebrow + oversized headline */
.sec-head { margin-bottom: clamp(1.6rem, 4vw, 2.8rem); }
.sec-head p { color: var(--muted); font-size: 1.02rem; }

.kicker {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: .75rem;
}
.kicker--chip {
  background: var(--lime);
  color: var(--lime-ink);
  padding: 6px 11px 5px;
  letter-spacing: .16em;
}
.kicker--purple { color: var(--purple-light); }

.lead { font-size: clamp(1.02rem, 2.4vw, 1.22rem); color: var(--paper); }

/* ---------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 46px;
  padding: 13px 24px;
  border: 2px solid var(--lime);
  border-radius: var(--radius);
  background: var(--lime);
  color: var(--lime-ink);
  font-family: var(--sans);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover, .btn:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--lime-ink);
  transform: translateY(-2px);
}
.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--white);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: transparent;
  border-color: var(--lime);
  color: var(--lime);
}
.btn--ink {
  background: var(--lime-ink);
  border-color: var(--lime-ink);
  color: var(--lime);
}
.btn--ink:hover, .btn--ink:focus-visible {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--white);
}
.btn--sm { min-height: 40px; padding: 10px 16px; font-size: .72rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.link-more:hover { border-color: var(--lime); color: var(--lime); }

/* ---------------------------------------------------------------
   5. Top news ticker (BET-style lime band)
   --------------------------------------------------------------- */
.ticker {
  background: var(--lime);
  color: var(--lime-ink);
  overflow: hidden;
  position: relative;
  z-index: 60;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 42s linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__group {
  display: flex;
  align-items: center;
  flex: none;
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 18px;
  white-space: nowrap;
}
.ticker__item::after {
  content: "";
  width: 6px; height: 6px;
  background: var(--lime-ink);
  border-radius: 50%;
}
.ticker__item:last-child::after { display: none; }
.ticker a { color: var(--lime-ink); font-weight: 700; text-decoration: underline; }
.ticker a:hover { color: var(--purple); }

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

/* ---------------------------------------------------------------
   6. Header / primary nav
   --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.brand {
  font-family: var(--display);
  font-size: 1.32rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  display: inline-flex;
  align-items: baseline;
  padding: 8px 0;
}
.brand:hover { color: var(--white); }
.brand b { color: var(--lime); font-weight: 400; }

.nav { flex: 1 1 auto; min-width: 0; }
.nav__list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}
.nav__list a {
  display: block;
  padding: 10px 9px;
  color: var(--paper);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__list a:hover,
.nav__list a:focus-visible {
  color: var(--lime);
  border-bottom-color: var(--lime);
}

.header-cta { display: none; }

.navtoggle {
  width: 46px;
  height: 46px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
}
.navtoggle__bar {
  width: 20px; height: 2px;
  background: var(--white);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav--open .nav__list {
  display: block;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--ink);
  border-bottom: 2px solid var(--lime);
  padding: 8px var(--gutter) 16px;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.nav--open .nav__list a {
  border-bottom: 1px solid var(--line);
  padding: 14px 2px;
  font-size: .84rem;
}
.nav--open .nav__list a:hover { border-bottom-color: var(--lime); }

@media (min-width: 1080px) {
  :root { --header-h: 68px; }
  .nav__list { display: flex; flex-wrap: wrap; justify-content: center; }
  .navtoggle { display: none; }
  .header-cta { display: inline-flex; }
  .brand { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------
   7. Hero
   --------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--black);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 34%, rgba(0,0,0,.72) 68%, var(--black) 100%),
    linear-gradient(100deg, rgba(21,21,26,.9) 0%, rgba(21,21,26,.2) 60%);
}
.hero__inner {
  position: relative;
  padding: clamp(2.4rem, 11vw, 6.5rem) 0 clamp(2rem, 7vw, 5rem);
  min-height: min(88svh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  align-self: flex-start;
  background: var(--lime);
  color: var(--lime-ink);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 7px 12px 6px;
  margin-bottom: 1.1rem;
}
.hero h1 {
  margin: 0 0 .35em;
  text-shadow: 0 10px 44px rgba(0, 0, 0, .6);
}
.hero h1 span { display: block; }
.hero h1 .hero__accent { color: var(--lime); }
.hero__tag {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.05rem, 3.4vw, 1.7rem);
  letter-spacing: .06em;
  color: var(--paper);
  margin: 0 0 1.5rem;
}
.hero__role {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 .8rem;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.hero__meta li {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .55);
  padding: 7px 11px;
}

/* ---------------------------------------------------------------
   8. Stat band (lime, BET punch)
   --------------------------------------------------------------- */
.stats {
  background: var(--lime);
  color: var(--lime-ink);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(10, 10, 10, .22);
}
.stat {
  background: var(--lime);
  padding: clamp(1.1rem, 4vw, 1.9rem) clamp(.7rem, 3vw, 1.4rem);
  text-align: center;
}
.stat__num {
  font-family: var(--display);
  font-size: clamp(2.1rem, 9vw, 3.6rem);
  line-height: .9;
  color: var(--lime-ink);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: .5rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #1c2400;
}
@media (min-width: 760px) {
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------
   9. Card grids
   --------------------------------------------------------------- */
.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

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

.card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--fg);
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.card:hover, .card:focus-within {
  border-color: var(--lime);
  transform: translateY(-4px);
  background: var(--panel-2);
}
.card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--black);
  overflow: hidden;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }
.card__badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--lime);
  color: var(--lime-ink);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 9px 4px;
}
.card__badge--purple { background: var(--purple); color: var(--white); }
.card__play {
  position: absolute;
  right: 10px; bottom: 10px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: var(--lime);
  color: var(--lime-ink);
  border-radius: 50%;
}
.card__body { padding: 16px 16px 18px; flex: 1 1 auto; display: flex; flex-direction: column; }
.card__title { font-size: 1.14rem; margin: 0 0 .4rem; }
.card__meta {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 .7rem;
}
.card__text { color: var(--muted); font-size: .92rem; margin: 0 0 .9rem; }
.card__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--paper);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .35);
}
.chip:hover, .chip:focus-visible {
  border-color: var(--lime);
  color: var(--lime);
}
.chip--lime { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.chip--lime:hover, .chip--lime:focus-visible { background: var(--white); border-color: var(--white); color: var(--lime-ink); }

/* Whole-card link overlay for grids */
.card--link { position: relative; }
.card__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------
   10. Editorial split (image + copy)
   --------------------------------------------------------------- */
.split { display: grid; gap: clamp(1.4rem, 4vw, 2.8rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr .95fr; }
  .split--reverse .split__media { order: -1; }
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.split__media--wide img { aspect-ratio: 16 / 10; }

.quote {
  margin: 1.6rem 0;
  padding: 1.05rem 0 1.05rem 1.1rem;
  border-left: 4px solid var(--lime);
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.05rem, 3.2vw, 1.5rem);
  line-height: 1.1;
  color: var(--white);
  max-width: 34ch;
}

/* ---------------------------------------------------------------
   11. Video feature strip
   --------------------------------------------------------------- */
.feature-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-media__play {
  position: absolute;
  inset: auto 16px 16px auto;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--lime);
  color: var(--lime-ink);
  border-radius: 50%;
}

/* ---------------------------------------------------------------
   12. Credits list
   --------------------------------------------------------------- */
.credits { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .credits { grid-template-columns: repeat(2, 1fr); column-gap: 28px; } }
@media (min-width: 1180px) { .credits { grid-template-columns: repeat(3, 1fr); } }
.credit {
  display: flex;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
}
.credit__net {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lime);
  flex: 0 0 auto;
}
.credit__main { flex: 1 1 auto; min-width: 0; }
.credit__title {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.06rem;
  color: var(--white);
  line-height: 1.05;
}
.credit__role { display: block; color: var(--muted); font-size: .84rem; }
.credit__year {
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--grey-2);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   13. Timeline
   --------------------------------------------------------------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.15rem;
  border-left: 2px solid var(--line);
}
.timeline li { position: relative; padding: 0 0 1.5rem 0; margin: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1.15rem - 7px);
  top: .55rem;
  width: 12px; height: 12px;
  background: var(--lime);
  border: 2px solid var(--black);
}
.timeline__year {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--lime);
  display: block;
  margin-bottom: .2rem;
}
.timeline__title {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.14rem;
  color: var(--white);
  margin: 0 0 .25rem;
}
.timeline p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---------------------------------------------------------------
   14. Tour / shows
   --------------------------------------------------------------- */
.showlist { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.show {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px;
  margin: 0 0 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--lime);
  border-radius: var(--radius);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.show:hover { background: var(--panel-2); transform: translateX(3px); }
.show__date {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.15rem;
  color: var(--lime);
  line-height: 1;
}
.show__time {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: .3rem;
}
.show__venue { font-family: var(--display); text-transform: uppercase; font-size: 1.12rem; color: var(--white); line-height: 1.06; }
.show__sub { color: var(--muted); font-size: .88rem; }
.show__city {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: .35rem;
}
.show__cta { align-self: start; }

@media (min-width: 760px) {
  .show {
    grid-template-columns: 168px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
  }
  .show__cta { align-self: center; }
}

.residencies { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .residencies { grid-template-columns: repeat(3, 1fr); } }
.res {
  background: var(--ink);
  border: 1px solid var(--line);
  border-top: 3px solid var(--purple-light);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.res__label {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple-light);
  margin-bottom: .5rem;
}
.res__title { font-family: var(--display); text-transform: uppercase; font-size: 1.14rem; color: var(--white); line-height: 1.06; }
.res__sub { color: var(--muted); font-size: .88rem; margin: .4rem 0 .8rem; }
.res__city {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 1rem;
}
.res .btn { margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------------------
   15. Team / representation
   --------------------------------------------------------------- */
.team { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .team { grid-template-columns: repeat(4, 1fr); } }
.member {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.member__initials {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--purple);
  color: var(--white);
  font-family: var(--display);
  font-size: 1.05rem;
  margin-bottom: .8rem;
}
.member__name { font-family: var(--display); text-transform: uppercase; font-size: 1.04rem; color: var(--white); }
.member__role { color: var(--muted); font-size: .82rem; }

/* ---------------------------------------------------------------
   16. Gallery (drag / keyboard scroll)
   --------------------------------------------------------------- */
.gallery-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px var(--gutter) 18px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--lime) var(--panel);
}
.gallery-scroll:active { cursor: grabbing; }
.gallery-scroll::-webkit-scrollbar { height: 8px; }
.gallery-scroll::-webkit-scrollbar-track { background: var(--panel); }
.gallery-scroll::-webkit-scrollbar-thumb { background: var(--lime); }
.gphoto {
  position: relative;
  flex: 0 0 auto;
  width: min(80vw, 360px);
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 900px) { .gphoto { width: 340px; } }
.gphoto img { width: 100%; height: 100%; object-fit: cover; }
.gphoto figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 12px 11px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.88) 62%);
  color: var(--white);
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .86rem;
  letter-spacing: .05em;
}
.gallery-hint {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey);
  margin: .2rem 0 0;
}

/* ---------------------------------------------------------------
   17. Press / network strip
   --------------------------------------------------------------- */
.press-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  align-items: center;
  padding: 6px 0;
}
.press-row span {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(.95rem, 3.2vw, 1.5rem);
  letter-spacing: .04em;
  color: var(--grey-2);
  transition: color .2s var(--ease);
}
.press-row span:hover { color: var(--lime); }

/* ---------------------------------------------------------------
   18. Big CTA band
   --------------------------------------------------------------- */
.cta-band {
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(155, 129, 182, .3) 0%, rgba(73, 54, 94, 0) 58%),
    var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-band h2 { font-size: clamp(2.2rem, 9vw, 5rem); margin-bottom: .4em; }
.cta-band p { color: var(--muted); margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------
   19. Client portals
   --------------------------------------------------------------- */
.clients { background: linear-gradient(180deg, var(--black) 0%, var(--ink) 100%); }
.client-tab {
  display: block;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  color: var(--fg);
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.client-tab::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--line);
  transition: background .25s var(--ease);
}
.client-tab:hover, .client-tab:focus-visible {
  border-color: var(--lime);
  background: var(--panel-2);
  transform: translateY(-5px);
  color: var(--fg);
}
.client-tab:hover::before, .client-tab:focus-visible::before { background: var(--lime); }
.client-tab__status {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lime);
}
.client-tab__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime);
}
.client-tab h3 { margin: 0 0 .3rem; }
.client-tab__type {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey); /* #A1A1A1 on #242424 = 6.0:1, AA for small text */
  margin-bottom: .9rem;
}
.client-tab__cta { color: var(--lime); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* ---------------------------------------------------------------
   20. Mailing list form
   --------------------------------------------------------------- */
.join-grid { display: grid; gap: clamp(1.4rem, 4vw, 2.6rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .join-grid { grid-template-columns: 1fr 1fr; } }
.form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 3.4vw, 1.8rem);
}
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: .4rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--sans);
  font-size: 1rem;
}
.field input::placeholder, .field textarea::placeholder { color: var(--grey-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--lime);
  outline: 2px solid var(--lime);
  outline-offset: 1px;
}
.field__hint { font-size: .76rem; color: var(--muted); margin: .4rem 0 0; }
.form__note { font-size: .78rem; color: var(--muted); margin: .9rem 0 0; }
.form__status {
  margin-top: .9rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--lime);
  min-height: 1.2em;
}

/* ---------------------------------------------------------------
   21. Contact + footer
   --------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(1.4rem, 4vw, 2.6rem); grid-template-columns: 1fr; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1.15fr .85fr; } }
.contact-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--lime);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 3.4vw, 1.7rem);
}
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: 11px 0; border-bottom: 1px solid var(--line); margin: 0; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list a { font-weight: 500; }

.site-footer {
  background: var(--black);
  border-top: 1px solid var(--line);
  padding: clamp(2rem, 6vw, 3.4rem) 0 1.4rem;
}
.footer-grid { display: grid; gap: 1.8rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h4 {
  font-size: .8rem;
  letter-spacing: .18em;
  color: var(--lime);
  margin-bottom: .9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: var(--paper); font-size: .88rem; }
.site-footer a:hover { color: var(--lime); }
.footer-brand {
  font-family: var(--display);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: .05em;
  margin-bottom: .4rem;
}
.footer-brand b { color: var(--lime); font-weight: 400; }
.footer-blurb { color: var(--muted); font-size: .88rem; max-width: 34ch; }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--paper);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-social a:hover { border-color: var(--lime); color: var(--lime); }
.footer-legal {
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  justify-content: space-between;
  color: var(--grey-2);
  font-size: .78rem;
}
.footer-legal p { margin: 0; }

/* ---------------------------------------------------------------
   22. Motion & reveal (progressive enhancement)
   --------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Safety net: if bet.js never runs, the head timer adds .bet-safe and all
   content becomes visible instead of staying at opacity 0. */
.bet-safe .reveal { opacity: 1 !important; transform: none !important; }

/* Sticky-header offset for in-page targets */
[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ticker__track { animation: none; transform: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Print: keep it readable */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .ticker, .gallery-scroll, .form { display: none; }
  .hero__media { display: none; }
  h1, h2, h3, h4, .card__title, .credit__title, .show__venue, .timeline__title { color: #000; }
  .kicker, a { color: #000; }
}

/* ==========================================================================
   13. FORENSIC LAYOUT PASS — 2026-10-07
   Applied after rendering the live page in headless Chrome and inspecting the
   actual pixels. Four defects were visible in the render:
     1. .stats was a full-bleed teal block. BET never floods a whole band with
        brand-03; it uses near-black canvas with the accent as punctuation.
        A full-width teal slab also blows out the page's contrast rhythm.
     2. The brand gradient (BET's actual --header-v2-background treatment,
        purple #49365E -> teal #2DD6AE) was not used anywhere. Without it the
        page read as "black + teal" rather than BET.
     3. .ticker items butted straight against the viewport edge with no
        breathing room, so the marquee looked clipped rather than intentional.
     4. Nothing carried BET's zero-radius, heavy-rule editorial structure
        between sections.
   These overrides are scoped and load last, so they win without editing the
   component rules above (which keeps that code reviewable on its own).
   ========================================================================== */

/* --- 13.1 Brand gradient, used the way BET actually uses it --- */
.site-header {
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.92) 100%),
    var(--brand-gradient);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* A 3px brand rule under the sticky header — BET's editorial separator. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--brand-gradient);
}

.hero__eyebrow {
  background: var(--brand-gradient);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* Section headings get BET's gradient as a short leading rule. */
.sec-head h2::before,
.section > .wrap > h2::before {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 0 0 .9rem;
  background: var(--brand-gradient);
}

/* --- 13.2 Stats: near-black canvas, accent as punctuation (not a slab) --- */
.stats {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats__grid {
  background: var(--line);
  gap: 1px;
}
.stat {
  background: var(--ink);
  position: relative;
}
/* Gradient hairline instead of border-image: border-image cannot resolve a
   gradient reliably across engines, and this keeps the cell square. */
.stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand-gradient);
}
.stat__num { color: var(--lime); }
.stat__label { color: var(--grey); }

/* --- 13.3 Ticker: real breathing room + brand gradient edge --- */
.ticker {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--line);
}
.ticker__item {
  padding: 11px 26px;
  color: var(--paper);
}
.ticker__item::after { background: var(--lime); }
.ticker a { color: var(--lime); }

/* --- 13.4 Hero: lift the headline off the photo with BET's gradient scrim --- */
.hero__media::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.45) 32%, rgba(0,0,0,.72) 66%, var(--black) 100%),
    linear-gradient(100deg, rgba(21,21,26,.92) 0%, rgba(73,54,94,.42) 46%, rgba(45,214,174,.10) 100%);
}

@media (max-width: 759px) {
  /* Phones get the photograph too — a flat black hero loses the subject. */
  .hero__media { display: block; }
  .hero__media img { object-position: 62% 18%; }
}

/* --- 13.5 Hero composition ---
   The source frame is a centred stage shot: the performer sits mid-frame, so
   the headline and the subject fight for the same space and the left third
   (where the type lives) is the busiest part of the picture.
   Fix: bias the photo to the right, then lay a purple brand wash over the left
   third so the type sits on flat tone instead of on top of the subject. BET
   scrims its hero art this way rather than dimming the whole image. */
.hero__media img {
  object-position: 78% 24%;
}
.hero__media::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.80) 88%, var(--black) 100%),
    linear-gradient(92deg,
      rgba(8,6,12,.95) 0%,
      rgba(20,14,30,.88) 26%,
      rgba(73,54,94,.55) 44%,
      rgba(45,214,174,.10) 66%,
      rgba(0,0,0,0) 82%);
}
/* Give the headline a touch more optical weight now that it sits on a wash. */
.hero h1 {
  text-shadow: 0 6px 30px rgba(0,0,0,.85), 0 1px 0 rgba(0,0,0,.6);
}
@media (max-width: 759px) {
  .hero__media img { object-position: 66% 16%; }
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.88) 78%, var(--black) 100%),
      linear-gradient(180deg, rgba(73,54,94,.35) 0%, rgba(0,0,0,0) 60%);
  }
}