/* =========================================================
   V3 — Baltimore Blend Battle. Hybrid structure: the home
   page is the pitch; /compete, /champions, /watch and
   /partners carry the detail. Section 1 is V2's component
   set, unchanged. Section 2 is what V3 adds.
   ========================================================= */

/* ---------------------------------------------------------
   1. From V2 — event, qualifier and founder furniture
   --------------------------------------------------------- */

/* the three audience paths, straight off the hero */
/* Seams: the container carries top and left, each cell carries
   right and bottom, so a shared edge is 1px whichever way the
   grid wraps. V2 collapsed it with `a + a { border-left: 0 }`
   plus a media query, which doubles the seam at any width
   where the grid sits at two columns. */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0;
  border-top: 1px solid #111; border-left: 1px solid #111; }
.paths a { display: block; padding: clamp(22px,2.6vw,30px); background: #fff;
  border: 1px solid #111; border-width: 0 1px 1px 0;
  text-decoration: none; transition: background .18s var(--ease); }
.paths a:hover { background: #f4f4f4; text-decoration: none; }
.paths b { display: block; font-size: clamp(19px,2vw,23px); font-weight: 700; letter-spacing: -.02em; color: #000; }
.paths span { display: block; margin-top: 6px; font-size: 15px; color: #6b6b6b; }
.paths em { display: block; margin-top: 12px; font-style: normal; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #e2231a; }

/* event facts: a flat data strip, not cards */
.facts { border-top: 2px solid #000; margin: 0 0 clamp(24px,3vw,34px); }
.facts > div { border-bottom: 1px solid #111; padding: 15px 0;
  display: grid; grid-template-columns: 190px 1fr; gap: 0 24px; }
.facts dt { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6b6b6b; }
.facts dd { margin: 0; font-size: 17px; color: #1a1a1a; }
.facts dd b { color: #000; font-weight: 700; }
.facts dd .tba { color: #a5a5a5; font-style: italic; }
@media (max-width: 620px) { .facts > div { grid-template-columns: 1fr; gap: 4px; } }

/* countdown */
.cd { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 clamp(20px,3vw,30px); border: 1px solid #111; }
.cd div { flex: 1 1 0; min-width: 86px; padding: 14px 10px; text-align: left; }
.cd div + div { border-left: 1px solid #111; }
.cd b { display: block; font-size: clamp(26px,3.4vw,40px); font-weight: 900; letter-spacing: -.04em;
  line-height: 1; color: #000; font-variant-numeric: tabular-nums; }
.cd span { display: block; margin-top: 7px; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: #6b6b6b; }

/* qualifier rounds */
.quals { list-style: none; margin: 0; padding: 0; border-top: 2px solid #000; }
.quals li { border-bottom: 1px solid #111; padding: 18px 0;
  display: grid; grid-template-columns: 54px 1fr auto; gap: 0 20px; align-items: center; }
.quals i { font-style: normal; font-weight: 900; font-size: 13px; color: #e2231a; }
.quals b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: #000; }
.quals span { display: block; font-size: 14px; color: #6b6b6b; margin-top: 2px; }
.quals .st { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid #111; padding: 4px 10px; white-space: nowrap; }
.quals .st--open { background: #e2231a; border-color: #e2231a; color: #fff; }
@media (max-width: 620px) {
  .quals li { grid-template-columns: 40px 1fr; }
  .quals .st { grid-column: 2; justify-self: start; margin-top: 8px; }
}

/* bracket */
.bracket { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%),1fr)); gap: 0;
  margin-top: 10px; border-top: 1px solid #111; border-left: 1px solid #111; }
.bracket div { border: 1px solid #111; border-width: 0 1px 1px 0; padding: 18px; }
.bracket b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #e2231a; margin-bottom: 6px; }
.bracket p { margin: 0; font-size: 15px; color: #1a1a1a; }

/* title sponsor */
.title-sponsor { display: grid; grid-template-columns: 260px 1fr; gap: clamp(22px,3vw,40px);
  align-items: center; border: 1px solid #111; border-left: 6px solid #e2231a;
  padding: clamp(24px,3vw,36px); margin-bottom: clamp(22px,3vw,32px); background: #fff; }
.title-sponsor img { width: 100%; max-width: 220px; height: auto; filter: invert(1) grayscale(1) contrast(1.15); }
.title-sponsor .eyebrow { margin-bottom: 6px; }
.title-sponsor h3 { margin: 0 0 6px; font-size: clamp(21px,2.2vw,26px); font-weight: 700;
  letter-spacing: -.02em; color: #000; }
.title-sponsor p { margin: 0; color: #1a1a1a; max-width: 56ch; }
@media (max-width: 760px) { .title-sponsor { grid-template-columns: 1fr; } }

.logos-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #000; margin: 0 0 12px; padding-top: 12px; border-top: 2px solid #000; }

/* founder */
.founder { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,4vw,60px); align-items: center; }
.founder__body p { max-width: 56ch; }
.founder__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } }

/* ---- the pages, switched in place -----------------------
   Every URL serves all six pages and shows one. Without this
   the whole site renders as one 91,000px scroll. The rule
   lived only in the artifact's review layer until now, which
   is why the site shipped stacked.
   --------------------------------------------------------- */
.pg { display: none; }
.pg.is-on { display: block; }

/* ---------------------------------------------------------
   2. New in V3 — page headers, numbered process lists,
   judging criteria, callouts, partnership tiers. Press rules
   only: white, 1px #111 hairlines, one accent, zero radius.
   Seams: wherever boxes meet, the shared edge stays 1px.
   --------------------------------------------------------- */

/* ---- nav: mark the page you're on ----------------------
   The current tab takes the accent, the same red the buttons
   use. Exactly one link carries aria-current, set from
   data-navitem rather than data-nav -- Contact and the CTA
   both route into other pages and would otherwise light up
   alongside the tab they point at. ----------------------- */
.v-press .nav__links a[aria-current="page"] { color: #e2231a; font-weight: 700; }
.v-press .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.v-press .nav__cta[aria-current="page"] { color: #fff !important; }

/* ---- page header (sub-pages) --------------------------- */
/* top padding clears the fixed nav, which is transparent until scroll */
.phead { padding: clamp(112px,14vw,164px) 0 clamp(36px,4.6vw,58px);
  border-bottom: 1px solid #111; background: #fff; }
.crumb { margin: 0 0 clamp(14px,2vw,20px); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #6b6b6b; }
.crumb a { color: #6b6b6b; text-decoration: none; }
.crumb a:hover { color: #e2231a; }
.crumb span { margin: 0 8px; color: #9a9a9a; }
.phead__h1 { margin: 0 0 clamp(14px,1.8vw,20px); font-size: clamp(34px,6vw,70px);
  font-weight: 900; letter-spacing: -.045em; line-height: .98; color: #000; }
.phead__lede { margin: 0 0 clamp(22px,3vw,32px); max-width: 60ch;
  font-size: clamp(16px,1.6vw,19px); line-height: 1.55; color: #4a4a4a; }

/* ---- a tighter intro, for use under an h3 -------------- */
.section__intro--tight { margin-bottom: clamp(14px,1.8vw,20px); }

/* ---- numbered process list ----------------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: 2px solid #000; }
.steps li { counter-increment: step; border-bottom: 1px solid #111; padding: clamp(18px,2.2vw,24px) 0;
  display: grid; grid-template-columns: 54px 1fr; gap: 0 20px; }
.steps li::before { content: counter(step, decimal-leading-zero);
  font-size: 13px; font-weight: 900; color: #e2231a; line-height: 1.6; }
/* ::before is a grid item too, so the row is counter / heading /
   body across a two-column track: without these the paragraph
   wraps back into the 54px counter column. */
.steps b { grid-column: 2; display: block; font-size: clamp(17px,1.8vw,20px); font-weight: 700;
  letter-spacing: -.02em; color: #000; }
.steps p { grid-column: 2; margin: 6px 0 0; max-width: 62ch; font-size: 16px; color: #4a4a4a; }
@media (max-width: 560px) {
  .steps li { grid-template-columns: 1fr; gap: 6px; }
  .steps li::before { line-height: 1; }
  .steps b, .steps p { grid-column: auto; }
}

/* ---- judging criteria ---------------------------------- */
.criteria { list-style: none; margin: 0 0 clamp(26px,3.4vw,40px); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 0; border-top: 1px solid #111; border-left: 1px solid #111; }
.criteria li { background: #fff; border: 1px solid #111; border-width: 0 1px 1px 0;
  padding: clamp(16px,2vw,22px); display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; }
.criteria i { font-style: normal; font-weight: 900; font-size: 13px; color: #e2231a; }
.criteria b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #000; }
.criteria span { display: block; margin-top: 4px; font-size: 14px; color: #6b6b6b; }

/* ---- callout ------------------------------------------- */
.callout { margin-top: clamp(26px,3.4vw,40px); background: #fff;
  border: 1px solid #111; border-left: 6px solid #e2231a; padding: clamp(22px,3vw,34px); }
.callout .eyebrow { margin-bottom: 8px; }
.callout h3 { margin: 0 0 10px; font-size: clamp(20px,2.2vw,26px); font-weight: 700;
  letter-spacing: -.025em; color: #000; }
.callout p { margin: 0 0 16px; max-width: 62ch; font-size: 16px; color: #4a4a4a; }
.callout .btn { margin: 0; }

/* ---- partnership tiers --------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0; border-top: 1px solid #111; border-left: 1px solid #111; }
.tier { background: #fff; border: 1px solid #111; border-width: 0 1px 1px 0;
  padding: clamp(22px,2.6vw,30px); display: flex; flex-direction: column; }
.tier--1 { border-top: 6px solid #e2231a; }
.tier__rank { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #6b6b6b; }
.tier h3 { margin: 0 0 14px; font-size: clamp(24px,2.6vw,32px); font-weight: 900;
  letter-spacing: -.035em; color: #000; }
.tier__logo { display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  padding-bottom: 16px; border-bottom: 1px solid #e3e3e3;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6b6b6b; }
.tier__swatch { display: block; background: #111; flex: 0 0 auto; }
.tier__swatch--lg { width: 64px; height: 18px; }
.tier__swatch--md { width: 44px; height: 13px; }
.tier__swatch--sm { width: 28px; height: 9px; }
.tier ul { margin: 0 0 18px; padding: 0; list-style: none; }
.tier li { position: relative; padding: 0 0 8px 16px; font-size: 15px; color: #4a4a4a; }
.tier li::before { content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 1px; background: #e2231a; }
.tier__status { margin: auto 0 0; padding-top: 14px; border-top: 1px solid #e3e3e3;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #e2231a; }
.tier__status--taken { color: #767676; }

/* ---- a card that carries a prohibition ----------------- */
.v-press .card--warn { border-left: 4px solid #e2231a; }

/* ---- a partner with no logo file yet ------------------- */
.v-press .logos li.logos__name { display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #111; border-width: 0 1px 1px 0;
  min-height: 92px; padding: 18px; }
.v-press .logos li.logos__name span { font-size: 15px; font-weight: 700;
  letter-spacing: -.01em; text-align: center; color: #000; }

/* ---- a note on .section--dark / .section--ink ----------
   Press paints every section white, so the V1/V2 markup's
   --dark and --ink modifiers are semantic only here. V3 does
   NOT restyle their contents for a dark canvas: an earlier
   pass did, and .criteria went black-on-white while .facts
   went white-on-white. Rhythm comes from hairlines. ------ */

/* ---- selects, which Press had no reason to style yet --- */
.field select {
  font: inherit; font-size: 16px; padding: 12px 40px 12px 14px; color: #000;
  background-color: #fff; border: 1px solid #111; border-radius: 0; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23111' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field select:focus { outline: none; border-color: #e2231a; box-shadow: 0 0 0 2px rgba(226,35,26,.2); }
.field select[aria-invalid="true"] { border-color: #7a1f00; background-color: #ffece6; }
.section--orange .field select { border-color: #fff; }

/* ---- registration form grid ----------------------------
   minmax(0,1fr) rather than 1fr: a <select> contributes its
   longest option as min-content, which pushes a plain 1fr
   track wider than the page on a phone. ------------------ */
.form--register { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form--register .field:nth-child(1) { grid-column: auto; }
.form--register .field--wide { grid-column: 1 / -1; }
.field { min-width: 0; }
.field select { width: 100%; min-width: 0; }
@media (max-width: 620px) { .form--register { grid-template-columns: minmax(0, 1fr); } }

/* ---- a one-field inline form (ticket alerts) ----------- */
.form--inline { max-width: 460px; }
.form--inline .field { margin-bottom: 14px; }

/* ---- fineprint that sits on the accent ----------------- */
.v-press .fineprint--ink { color: rgba(255,255,255,.8); }
.v-press .fineprint--ink a { color: #fff; }

/* ---- the BBB 10 field, back on /champions --------------
   styles.css hides #contestants site-wide for V1. V3 gives
   it a page of its own, so it comes back here. ----------- */
#contestants { display: block; }

/* ---- .cards, now that a grid can wrap ------------------
   Press collapsed the card seam with `.card + .card
   { border-left: 0 }`, which is right for one row and wrong
   the moment the grid wraps: /compete runs six cards, so
   row 1's bottom border meets row 2's top border and paints
   2px. Same fix as everywhere else — the container carries
   top and left, each card carries right and bottom, so every
   shared edge is 1px whichever way the grid wraps. -------- */
.v-press .cards { gap: 0; border-top: 1px solid #111; border-left: 1px solid #111; }
.v-press .cards .card,
.v-press .cards .card + .card { border: 1px solid #111; border-width: 0 1px 1px 0; }
@media (max-width: 830px) {
  .v-press .cards .card + .card { border-width: 0 1px 1px 0; }
}

/* ---- legibility of the muted greys ---------------------
   V3 leans on "to be announced" far more than V1 did -- a
   date, a judging panel, a price. At #a5a5a5 that is 2.5:1
   on white, which is fine for decoration and not fine for
   information people are meant to read. #767676 is 4.6:1
   and still reads as secondary. ------------------------- */
.tba, .facts dd .tba { color: #767676; }

/* The coverage kind labels were coloured for V1's dark
   canvas (green / blue) and land at ~2:1 on Press's white.
   One muted grey for all three, the way every other label
   on the page is set; the word carries the distinction. -- */
.v-press .cov__kind { color: #6b6b6b; }

/* ---- a row of buttons inside a section -----------------
   V2 reused .hero__actions for these, which carries the
   hero's own justification (centre in the base sheet,
   flush-right in Press) and the hero's entrance animation.
   In a left-aligned editorial page both read as a bug, so
   V3 gives body button rows a class of their own. ------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(24px,3vw,36px); justify-content: flex-start; }
.phead .btn-row { margin-top: 0; }

/* ---- primary button, inverted on hover -----------------
   The base sheet only nudges the fill to a darker orange,
   which barely registers on a white page. V3 flips the
   button instead: black fill, with the stroke and the
   label both in the brand orange. ---------------------- */
.v-press .btn--orange {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.v-press .btn--orange:hover,
.v-press .btn--orange:focus-visible {
  background: #000; border-color: #e2231a; color: #e2231a;
}
/* The base sheet pins the nav CTA's colour with !important,
   so the one in the header needs the same weight to follow
   the rule above. */
.v-press .nav__cta:hover,
.v-press .nav__cta:focus-visible { color: #e2231a !important; }

/* ---- hero subtitle, trimmed ----------------------------
   "Eight DJs / DJ Bizzon defends" is hidden rather than cut
   out, the same way the Contestants section is: the words
   stay in the markup, so bringing them back is deleting
   this one rule. ---------------------------------------- */
.hero__venue-extra { display: none; }

/* ---- the wordmark, one weight --------------------------
   The base sheet sets "Blend Battle" as a 10px tracked-out
   uppercase label under a 15px black "Baltimore". V3 sets
   both lines in the same face, weight, size and tracking,
   so it reads as one two-line wordmark. Red stays: that is
   the colour, not the font. ----------------------------- */
.v-press .nav__brand em {
  font-size: 15px; font-weight: 900; letter-spacing: -.01em;
  text-transform: none; margin-top: 2px;
  color: #000;                 /* one wordmark, one colour */
}

/* ---- sponsor film tooltips -----------------------------
   A card that appears over the logo wall on hover. Press
   furniture: white, 1px #111, zero radius, one accent. The
   badge marks the cells that have a film, so the feature is
   findable without hovering and usable on a touch screen,
   where the logo link still has to work. ---------------- */
.v-press .logos li.has-film { position: relative; }

.spv-badge {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: #fff; border: 1px solid #111; border-radius: 0;
  transition: background .15s var(--ease);
}
.spv-badge span {
  width: 0; height: 0; margin-left: 2px;
  border-left: 8px solid #111;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.spv-badge:hover, .logos li.has-film:hover .spv-badge { background: #e2231a; border-color: #e2231a; }
.spv-badge:hover span, .logos li.has-film:hover .spv-badge span { border-left-color: #fff; }
.spv-badge:focus-visible { outline: 2px solid #e2231a; outline-offset: 2px; }

.spv {
  position: fixed; z-index: 2147482000;
  width: min(380px, calc(100vw - 24px));
  background: #fff; border: 1px solid #111; border-radius: 0;
  font: 400 14px/1.5 "Inter", ui-sans-serif, system-ui, sans-serif;
  color: #1a1a1a;
}
.spv[hidden] { display: none !important; }
.spv__stage { position: relative; aspect-ratio: 16 / 9; background: #000;
  border-bottom: 1px solid #111; overflow: hidden; }
.spv__stage img, .spv__stage iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0; display: block;
  /* the one place Press lets a photograph keep its colour:
     it is someone else's film, not our photography */
  filter: none;
}
.spv__play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(0,0,0,.34); border: 0; border-radius: 0; cursor: pointer;
  font: 700 12px/1 "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  transition: background .18s var(--ease);
}
.spv__play:hover { background: rgba(0,0,0,.5); }
.spv__tri { width: 0; height: 0; border-left: 15px solid #e2231a;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.spv__play:hover .spv__tri { border-left-color: #fff; }
.spv.is-playing .spv__stage { background: #000; }

.spv__meta { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; }
.spv__title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: #000; }
.spv__channel { font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #6b6b6b; }
.spv__out { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #e2231a; text-decoration: none; align-self: flex-start; }
.spv__out:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .spv-badge, .spv__play { transition: none; }
}

/* ---- every button in caps ------------------------------
   .btn already sets uppercase, but .nav__links a is a more
   specific selector and was resetting it, so the one button
   in the nav was the only sentence-case button on the site. */
.v-press .nav__links a.nav__cta { text-transform: uppercase; }

/* ---- gallery: stop cropping the photographs -------------
   The base sheet pinned every frame to aspect-ratio 3/4 and
   object-fit: cover, so a landscape shot lost both its
   sides. The BBB 10 set is 34 landscape and 24 portrait, so
   a single fixed ratio has to crop most of it.

   A filmstrip instead: every photo is the same HEIGHT and
   its width follows its own ratio, which is the one way to
   line up mixed orientations without cutting anything. ---- */
.v-press .gallery__track li { flex: 0 0 auto; }
.v-press .gallery__track button { width: auto; overflow: visible; }
.v-press .gallery__track img {
  height: clamp(230px, 32vw, 400px);
  width: auto; max-width: none;
  aspect-ratio: auto;
  object-fit: contain;
  background: #f4f4f4;
  border: 1px solid #111;
}

/* ---- the mix player (layout B) --------------------------
   Two blocks pushed together: the controls, then the name.
   The module is as tall as one control cell is wide, and the
   left block keeps its right border while the right block
   drops its left -- so the join is ONE hairline, not two
   borders stacked. Press furniture throughout.
   --------------------------------------------------------- */
.mix {
  --h: 42px;
  position: fixed; z-index: 900;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: stretch;
  font: 400 13px/1 "Inter", ui-sans-serif, system-ui, sans-serif;
  max-width: calc(100vw - 32px);
}
.mix__box {
  display: flex; align-items: stretch; height: var(--h);
  background: #fff; border: 1px solid #111; min-width: 0;
}
.mix__box + .mix__box { border-left: 0; }     /* the single seam */

.mix__btn {
  width: var(--h); flex: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 0; border-radius: 0; color: #111;
  transition: background .15s var(--ease);
}
.mix__btn + .mix__btn { border-left: 1px solid #d8d8d8; }
.mix__btn:hover { background: #e2231a; color: #fff; }
.mix__btn:focus-visible { outline: 2px solid #e2231a; outline-offset: -4px; }
.mix__btn[disabled] { opacity: .35; cursor: default; }
.mix__btn[disabled]:hover { background: #fff; color: #111; }
.mix__btn svg { display: block; fill: currentColor; }

/* one button, two glyphs */
.mix__play .i-pause, .mix.is-playing .mix__play .i-play { display: none; }
.mix.is-playing .mix__play .i-pause { display: block; }

.mix__meta {
  display: flex; align-items: center; padding: 0 16px; min-width: 0;
  white-space: nowrap; overflow: hidden;
}
.mix__meta b { font-size: 14px; font-weight: 700; letter-spacing: -.012em; color: #000; }
.mix__sub { font-weight: 600; color: #6b6b6b; margin-left: .4em; }

@media (max-width: 560px) {
  .mix { --h: 38px; }
  .mix__meta { padding: 0 12px; }
  .mix__sub { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mix__btn { transition: none; } }

/* ---- the waveform as the transport ---------------------
   Only the bottom strip takes the pointer; the bar is 170px
   tall and fixed over every page, so making all of it
   clickable would swallow footer clicks. -------------- */
.wavebar__grab {
  position: absolute; left: 0; right: 0; bottom: 0; height: 52px;
  pointer-events: auto; cursor: grab; touch-action: none;
}
.wavebar:not(.is-transport) .wavebar__grab { pointer-events: none; cursor: default; }
.wavebar.is-scrub .wavebar__grab { cursor: grabbing; }
.wavebar__grab:focus-visible { outline: 2px solid #e2231a; outline-offset: -3px; }

.wavebar__head {
  position: absolute; left: 50%; bottom: 0; width: 1px; height: 52px;
  background: #e2231a; pointer-events: none;
  opacity: 0; transition: opacity .15s var(--ease);
}
.wavebar__time {
  position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%);
  padding: 4px 8px; background: #fff; border: 1px solid #111;
  font: 700 11px/1 "Inter", ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums; color: #000; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .15s var(--ease);
}
.wavebar.is-near .wavebar__head, .wavebar.is-scrub .wavebar__head,
.wavebar.is-near .wavebar__time, .wavebar.is-scrub .wavebar__time { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .wavebar__head, .wavebar__time { transition: none; }
}

/* =========================================================
   THE REEL
   A full-bleed cutting sequence. Two transition types, named
   after what the battle does: a BLEND, where the outgoing and
   incoming frames overlap and cross, and a CUT, where the new
   frame wipes in hard behind a single red frame of flash.
   Photographs stay black and white, as everywhere else; the
   red is the only colour and it only ever marks an edit.
   ========================================================= */
.rl-wrap { padding: 0; background: #000; }
.rl {
  position: relative; width: 100%;
  height: calc(100svh - 74px); min-height: 460px; max-height: 960px;
  overflow: hidden; background: #000; isolation: isolate;
  touch-action: pan-y;
}

/* ---- frames ---- */
.rl__stage { position: absolute; inset: 0; }
.rl__slide {
  position: absolute; inset: 0; margin: 0; opacity: 0; z-index: 1;
  clip-path: inset(0 0 0 0);
}
.rl__slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.14) brightness(.92);
  transform: scale(1.06);
}
.rl__slide.is-on { opacity: 1; z-index: 2; }
.rl__slide.is-out { opacity: 0; z-index: 3; transition: opacity .62s cubic-bezier(.4,0,.2,1); }

/* a BLEND: both frames alive at once, the new one easing up through
   the old the way two records cross */
.rl__slide.is-on[data-cut="blend"] { animation: rl-blend .72s cubic-bezier(.22,.9,.3,1) both; }
.rl__slide.is-on[data-cut="blend"] img { animation: rl-push 7.4s linear both; }
@keyframes rl-blend { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }

/* a CUT: the frame arrives already there, revealed by a hard edge */
.rl__slide.is-on[data-cut="cut"] { animation: rl-cut .46s cubic-bezier(.76,0,.24,1) both; }
.rl__slide.is-on[data-cut="cut"] img { animation: rl-push 7.4s linear both; }
@keyframes rl-cut {
  from { opacity: 1; clip-path: inset(0 0 0 100%); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
.rl.is-back .rl__slide.is-on[data-cut="cut"] { animation-name: rl-cut-back; }
@keyframes rl-cut-back {
  from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* the slow push across the frame while it holds */
@keyframes rl-push {
  from { transform: scale(1.02) translate3d(0,0,0); }
  to   { transform: scale(1.12) translate3d(-1.6%, -1.2%, 0); }
}
.rl__slide:nth-child(even).is-on img { animation-name: rl-push-alt; }
@keyframes rl-push-alt {
  from { transform: scale(1.12) translate3d(1.4%, 1%, 0); }
  to   { transform: scale(1.02) translate3d(0,0,0); }
}

/* ---- the single red frame on a cut ---- */
.rl__flash {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: #e2231a; opacity: 0; mix-blend-mode: screen;
}
.rl.is-flash .rl__flash { animation: rl-flash .3s steps(1,end) both; }
@keyframes rl-flash { 0% { opacity: .85; } 34% { opacity: .12; } 100% { opacity: 0; } }

/* ---- texture: scanline + vignette, very quiet ---- */
.rl__grain {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0,0,0,.72) 100%);
}

/* ---- caption ---- */
.rl__slide figcaption {
  position: absolute; left: clamp(18px, 4vw, 56px); z-index: 4;
  bottom: clamp(168px, 23vh, 260px);
  display: flex; flex-direction: column; color: #fff;
  text-shadow: 0 2px 26px rgba(0,0,0,.6);
}
.rl__l1, .rl__l2 { display: block; opacity: 0; transform: translateY(.44em); }
.rl__slide.is-on .rl__l1 { animation: rl-rise .66s cubic-bezier(.2,.9,.3,1) .13s both; }
.rl__slide.is-on .rl__l2 { animation: rl-rise .66s cubic-bezier(.2,.9,.3,1) .23s both; }
@keyframes rl-rise { to { opacity: 1; transform: none; } }
.rl__l1 { font-size: clamp(34px, 7.4vw, 92px); font-weight: 900; letter-spacing: -.05em;
          line-height: .9; }
.rl__l2 { font-size: clamp(11px, 1.3vw, 14px); font-weight: 700; letter-spacing: .22em;
          text-transform: uppercase; color: #e2231a; margin-top: clamp(8px, 1.4vh, 16px); }

/* ---- HUD ---- */
.rl__hud {
  position: absolute; z-index: 7;
  left: clamp(18px, 4vw, 56px); right: clamp(18px, 4vw, 56px);
  bottom: clamp(96px, 13vh, 150px);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 26px);
}
.rl__count { margin: 0; flex: none; display: flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums; color: #fff; }
.rl__count b { font-size: clamp(17px, 2vw, 23px); font-weight: 900; letter-spacing: -.03em; }
.rl__count span { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.5); }

.rl__bar { flex: 1; display: flex; gap: 3px; min-width: 0; }
.rl__seg { flex: 1; height: 22px; padding: 0; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; }
.rl__seg i { display: block; width: 100%; height: 2px; background: rgba(255,255,255,.28); position: relative; }
.rl__seg i::after { content: ""; position: absolute; inset: 0 100% 0 0; background: #e2231a; }
.rl__seg.is-done i::after { inset: 0; }
.rl__seg.is-live i::after { animation: rl-fill var(--hold, 4.6s) linear both; }
@keyframes rl-fill { from { inset: 0 100% 0 0; } to { inset: 0 0 0 0; } }
.rl__seg:hover i { background: rgba(255,255,255,.6); }
.rl__seg:focus-visible { outline: 2px solid #e2231a; outline-offset: 2px; }

.rl__keys { flex: none; display: flex; align-items: stretch; border: 1px solid rgba(255,255,255,.5); }
.rl__key { width: 38px; height: 34px; padding: 0; cursor: pointer; background: transparent;
  border: 0; color: #fff; font-size: 17px; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center; transition: background .15s var(--ease); }
.rl__key + .rl__key { border-left: 1px solid rgba(255,255,255,.3); }
.rl__key:hover { background: #e2231a; }
.rl__key:focus-visible { outline: 2px solid #e2231a; outline-offset: -4px; }
.rl__pp { width: 9px; height: 11px; background: linear-gradient(to right, #fff 0 3px, transparent 3px 6px, #fff 6px 9px); }
.rl.is-held .rl__pp { width: 0; height: 0; background: none; margin-left: 2px;
  border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

.rl__credit {
  position: absolute; z-index: 7; left: clamp(18px, 4vw, 56px);
  bottom: clamp(62px, 8.5vh, 104px); margin: 0;
  font-size: 11px; letter-spacing: .04em; color: rgba(255,255,255,.52);
}
.rl__credit b { color: rgba(255,255,255,.86); }
.rl__hint { color: rgba(255,255,255,.4); }

/* click zones, invisible */
.rl__zone { position: absolute; top: 0; bottom: 0; width: 26%; z-index: 6; cursor: pointer;
  background: none; border: 0; }
.rl__zone--l { left: 0; } .rl__zone--r { right: 0; }
.rl__zone:focus-visible { outline: 2px solid #e2231a; outline-offset: -6px; }

@media (max-width: 700px) {
  .rl { height: calc(100svh - 64px); }
  .rl__hint { display: none; }
  .rl__slide figcaption { bottom: clamp(140px, 24vh, 200px); }
}
@media (prefers-reduced-motion: reduce) {
  .rl__slide.is-on[data-cut="blend"], .rl__slide.is-on[data-cut="cut"],
  .rl__slide.is-on img, .rl__slide.is-on .rl__l1, .rl__slide.is-on .rl__l2,
  .rl__seg.is-live i::after { animation: none !important; }
  .rl__slide.is-on .rl__l1, .rl__slide.is-on .rl__l2 { opacity: 1; transform: none; }
  .rl.is-flash .rl__flash { animation: none; }
  .rl__slide img { transform: none; }
}

/* ---- the reel takes the whole screen -------------------
   No site header, no footer: the frames run edge to edge.
   :has() carries it at parse time so there is no flash of
   chrome before the script runs, and the body attribute is
   the fallback for anything that does not support it. ---- */
body:has(#pg-reel.is-on) .nav,
body:has(#pg-reel.is-on) .footer,
body[data-page="reel"] .nav,
body[data-page="reel"] .footer { display: none; }

body:has(#pg-reel.is-on) .rl,
body[data-page="reel"] .rl { height: 100svh; max-height: none; }

/* the way out, since the nav is gone */
.rl__out {
  position: absolute; z-index: 8;
  top: clamp(14px, 2.4vh, 26px); right: clamp(14px, 3vw, 34px);
  width: 40px; height: 40px; display: inline-flex; align-items: center;
  justify-content: center; text-decoration: none;
  color: #fff; font-size: 21px; line-height: 1;
  border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.25);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.rl__out:hover { background: #e2231a; border-color: #e2231a; color: #fff; }
.rl__out:focus-visible { outline: 2px solid #e2231a; outline-offset: 3px; }

/* ---- the founder portrait, framed taller ---------------
   Tim's note on the artifact: "can you at least make me
   taller". The file is 1:1.5; a 1:1.66 frame with cover
   trims the sides rather than the top or bottom, so he
   stays full-length and the frame itself elongates. ------ */
#founder .roster img {
  aspect-ratio: 1 / 1.66;
  object-fit: cover;
  object-position: 50% 50%;
  height: auto;
}