/* We Are KMFDM: rebuild of the original title page.
   Values come from capture/styles/*.json; see docs/01-design-spec.md. */

:root {
  color-scheme: dark;
  --bg: #030303;
  --panel: #232323;
  --list-bg: #1b1b1b;
  --list-row-selected: #252525;
  --btn-bg: rgba(255, 255, 255, .05);
  --badge-bg: #404040;
  --overlay: rgba(0, 0, 0, .5);
  --text: #919191;
  --text-strong: #fff;
  --text-heading-2: #d3d3d3;
  --text-byline: #acb1b4;
  --accent: #ac1515;
  --content: 960px;
  --gutter: 15px;
  --font: Arial, system-ui, sans-serif;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.35 var(--font);
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { display: block; max-width: 100%; }
p { margin: 0; }

/* ---------- Announcement bar (new; docs/01 § Announcement bar) ---------- */
.announce {
  position: relative;
  background: var(--panel);
  border-bottom: 1px solid var(--badge-bg);
  padding: 10px calc(var(--gutter) + var(--safe-r)) 10px calc(var(--gutter) + var(--safe-l));
  padding-top: max(10px, env(safe-area-inset-top, 0px));
}
.announce p {
  max-width: var(--content);
  margin: 0 auto;
  text-align: center;
  color: var(--text-heading-2);
  font-size: 14px;
  line-height: 20px;
  text-wrap: pretty;
  padding: 0 36px; /* room for the close button; both sides so the text stays centered */
}
.announce-dismissed .announce { display: none; }
.announce-close {
  position: absolute;
  top: 50%;
  right: calc(6px + var(--safe-r));
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-heading-2);
  font: 24px/1 var(--font);
  cursor: pointer;
}
.announce-close:hover { color: var(--text-strong); }
.announce-close:focus-visible { outline-offset: -4px; } /* keep the ring inside the bar */

/* ---------- Mobile title bar ---------- */
.title-bar { display: none; }

/* ---------- Hero / player ----------
   The header art (1920×660) contains the poster's "WE ARE KMFDM" lettering.
   On the original page (≥ 768 px) the art sits at its natural size, `no-repeat 49.999% 5%`, in a
   .player-wrapper with padding-top 76 / margin-top −60 / padding-bottom 30, so a 960×540
   player covers art (480, 76.7)–(1440, 616.7) and the poster continues the art seamlessly
   (measured: SSIM 0.945 at x 480, y 76–77; ±1 px drops to 0.66).
   We pin the art to the PLAYER box in percentages of it, so the lettering stays locked at
   every width (the original drifts at 568–667 and 768–989 px, where its player shrinks):
     left  −480/960  = −50%       width  1920/960 = 200%
     top   −76/540   = −14.0741%  height 660/540  = 122.2222%
   The original CSS works out to row 76.7, but the art's true registration is row 76.0: the asset
   SSIM peaks there in half-pixel steps, and so do rendered seam tests at 1440 and 800
   (0.940 / 0.944 vs 0.863 / 0.834 at 76.7). At ≥ 990 px this matches the original layout. See docs/01 § Hero geometry. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 16px var(--gutter) 30px; /* original: 76 top − 60 hidden = 16 visible; 30 bottom */
}
.player::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -50%;
  width: 200%;
  top: -14.0741%;
  height: 122.2222%;
  background: url(../img/header-bg.jpg) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
@media (min-width: 1920px) {
  /* Original ≥ 1920: wrapper 1908 wide with a radial vignette and 200 px edge fades over the
     art. Drawn on the original 646 px wrapper box (60 px of it above our visible hero). */
  .hero { width: 1908px; margin: 0 auto; }
  .hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -60px; bottom: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse farthest-corner at center, rgba(3,3,3,0) 0%, rgba(3,3,3,0) 62%, rgba(3,3,3,1) 100%) center center / 100% 200%,
      linear-gradient(to right, rgba(3,3,3,0) 0%, rgba(3,3,3,.15) 27%, rgba(3,3,3,.43) 54%, rgba(3,3,3,.8) 85%, rgba(3,3,3,1) 100%) top right / 200px 100% no-repeat,
      linear-gradient(to right, rgba(3,3,3,1) 0%, rgba(3,3,3,.8) 15%, rgba(3,3,3,.43) 44%, rgba(3,3,3,.15) 73%, rgba(3,3,3,0) 100%) top left / 200px 100% no-repeat;
  }
  .player { z-index: 1; }
}
/* Original small-screen hero: no art and no padding at ≤ 567 and 668–767 (player is the whole
   hero); at 568–667 the player is 57% wide with the art around it (kept aligned here). */
@media (max-width: 767px) {
  .hero { padding: 0; }
  .player { max-width: none; }
}
@media (max-width: 567px), (min-width: 668px) and (max-width: 767px) {
  .player::before { display: none; }
}
@media (min-width: 568px) and (max-width: 667px) {
  .player { width: 57%; margin: 0 auto; }
}
.player {
  position: relative;
  max-width: var(--content);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
/* Video.js skin (docs/03-player.md). Its controls live in shadow DOM; these public custom
   properties are the supported way to theme them. <video-player> is display: contents. */
video-player { display: contents; }
.player__skin {
  display: block; width: 100%; height: 100%; background: #000;
  --media-accent-color: var(--accent);
  --media-accent-text-color: #fff;
  --media-font-family: var(--font);
  --media-border-radius: 0;
  --media-border-color: transparent;
  --media-object-fit: contain;
  --media-object-position: center;
}
/* Before the module upgrades the elements: keep the box black, no unstyled flash. */
.player__skin:not(:defined) { visibility: hidden; }
/* Big center play. Idle (nothing loaded yet, skin controls hidden): the button covers the whole
   player so a click anywhere starts, like Vimeo. Paused: just the pill, so the controls stay usable. */
.player__start {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 72px; height: 48px; margin: -24px 0 0 -36px; padding: 0;
  border: 0; border-radius: 6px; background: none;
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.player[data-state="idle"] .player__start { inset: 0; width: auto; height: auto; margin: 0; border-radius: 0; }
.player__start-pill {
  width: 72px; height: 48px; border-radius: 6px;
  background: rgba(0, 0, 0, .7);
  display: grid; place-items: center;
}
.player__start:hover .player__start-pill { background: var(--accent); }
.player__start svg { width: 22px; height: 22px; fill: currentColor; }
/* Big center play: before the first click (idle) and whenever paused (ready). */
.player:not([data-state="idle"]):not([data-state="ready"]) .player__start { display: none; }
.player[data-scrubbing] .player__start { display: none; }
.player__notice {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center; gap: 6px;
  padding: 24px;
  background: rgba(3, 3, 3, .72);
}
.player__notice[hidden] { display: none; }
.player__notice-title { color: var(--text-strong); font-size: 22px; }
.player__notice-text { color: var(--text-heading-2); font-size: 15px; }
.player__now { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Page grid: main 630 | gutter 30 | side 300 ---------- */
.page {
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 30px calc(var(--gutter) + var(--safe-r)) 60px calc(var(--gutter) + var(--safe-l));
  display: grid;
  grid-template-columns: minmax(0, 630px) 300px;
  column-gap: 30px;
  grid-template-areas:
    "head  side"
    "info  side"
    "desc  side"
    "eps   side"
    "bonus side";
  align-items: start;
}
.head { grid-area: head; }
.info { grid-area: info; }
.desc { grid-area: desc; }
.eps { grid-area: eps; }
.bonus { grid-area: bonus; }
.side { grid-area: side; grid-row: 1 / span 6; }

/* Title block */
.head__title {
  margin: 0 0 6px;
  color: var(--text-strong);
  font-size: 37px; line-height: 44px; font-weight: 400;
}
.badge {
  display: inline-block; vertical-align: 6px;
  margin-left: 8px; padding: 2px 6px;
  border-radius: 3px;
  background: var(--badge-bg); color: var(--text);
  font: italic 700 17px/20px var(--font);
}
.head__byline { color: var(--text-byline); font-size: 15px; line-height: 18.75px; margin-bottom: 32px; }

/* Trailer thumb + meta */
.info { display: flex; gap: 31px; align-items: flex-start; margin-bottom: 21px; }
.trailer-thumb { position: relative; flex: 0 0 162px; height: 91px; background: #000; }
.trailer-thumb img { width: 162px; height: 91px; object-fit: cover; }
.trailer-thumb__txt {
  position: absolute; left: 31px; top: 31px; width: 100px;
  padding: 8px; background: var(--overlay);
  color: #fff; font-size: 14px; line-height: 14px; text-align: center;
}
.trailer-thumb:hover { text-decoration: none; }
.trailer-thumb:hover .trailer-thumb__txt { background: var(--accent); }
.meta { margin: 0; font-size: 14px; line-height: 14px; }
.meta__row { display: flex; gap: 6px; margin-bottom: 11px; }
.meta dt, .meta dd { margin: 0; color: var(--text); }
.meta__row--from { display: none; }

/* Description + track list */
.desc { margin-bottom: 35px; }
.desc__body > p, .tracks { margin: 0 0 10px; font-size: 16px; line-height: 21.6px; }
.desc[data-collapsed="true"] .desc__body {
  max-height: 86px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
          mask-image: linear-gradient(#000 60%, transparent);
}
.desc__more {
  margin-top: 2px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); font: 700 16px/21.6px var(--font);
}
.desc[data-collapsed="false"] .desc__more { display: none; }
.tracks { list-style: none; padding: 0; }
.tracks a { color: var(--text); }
.tracks li { counter-increment: t; }
.tracks li::before { content: counter(t) ". "; }
.tracks a:hover { color: var(--accent); text-decoration: none; }
.tracks__time { color: inherit; }
.tracks a:hover .tracks__time { text-decoration: underline; }

/* Episode table */
.eps { width: 100%; border-collapse: collapse; background: var(--list-bg); margin-bottom: 20px; font-size: 15px; line-height: 19.5px; }
.eps__row { height: 66px; }
.eps__row.is-current { background: var(--list-row-selected); }
.eps td { padding: 10px; vertical-align: middle; }
.eps__count { width: 60px; padding-left: 24px !important; color: var(--text); }
.eps__title { padding-left: 0 !important; }
.eps__duration { width: 104px; text-align: center; }
.eps__watch { width: 120px; }
.eps__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px; border-radius: 3px;
  background: var(--btn-bg); color: #fff;
  font: 700 14px/30px var(--font);
}
.eps__btn svg { width: 16px; height: 16px; fill: #fff; }
.eps__btn:hover { background: var(--accent); text-decoration: none; }

/* Bonus features */
.bonus__title { margin: 0 0 4px; color: var(--text-heading-2); font-size: 22px; line-height: 26px; font-weight: 400; }
.bonus__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 -15px; }
.clip { padding: 15px; min-width: 0; }
.clip__thumb { display: block; aspect-ratio: 16 / 9; background: #000; margin-bottom: 6px; }
.clip__thumb img { width: 100%; height: 100%; object-fit: cover; }
.clip__thumb:hover img { opacity: .85; }
.clip__title { margin-bottom: 5.6px; font-size: 14px; line-height: 19.6px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip__duration { font-size: 13px; line-height: 14.3px; }
.clip.is-current .clip__thumb { outline: 2px solid var(--accent); outline-offset: 0; }

/* Sidebar */
.panel { background: var(--panel); padding: 16px; margin-bottom: 40px; }
.panel__title { margin: 0 0 10px; color: var(--text-strong); font-size: 18px; line-height: 21.4px; font-weight: 400; }
.panel__text { font-size: 16px; line-height: 21.6px; }
.btn-trailer { display: none; }
.poster { width: 300px; height: auto; }

/* ---------- Narrow desktop / tablet ---------- */
@media (max-width: 989px) and (min-width: 768px) {
  .page { grid-template-columns: minmax(0, 1fr) 260px; }
  .poster { width: 100%; margin-left: 0; }
}

/* ---------- Mobile (≤ 767): single column, original mobile order ---------- */
@media (max-width: 767px) {
  .announce p { font-size: 13px; line-height: 19px; padding: 0 36px 0 0; } /* close button only needs the right side */
  .title-bar {
    display: block; height: 44px;
    padding: 14px calc(14px + var(--safe-r)) 14px calc(14px + var(--safe-l));
    text-align: center; color: var(--text);
    font-size: 12.8px; line-height: 12.8px;
  }
  .page {
    padding-top: 15px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "side" "info" "desc" "eps" "bonus";
  }
  .side { grid-row: auto; }
  .head { display: none; }
  .panel { margin-bottom: 15px; }
  .btn-trailer {
    display: block; margin: 0 1px 16px;
    padding: 10px 0; border: 1px solid var(--accent); border-radius: 5px;
    color: var(--accent); text-align: center; font-size: 14px; line-height: 38px;
  }
  .btn-trailer:hover { background: var(--accent); color: #fff; text-decoration: none; }
  .poster { display: none; }
  .info { display: block; margin: 0 0 15px; border-top: 1px solid #333; padding-top: 15px; }
  .trailer-thumb { display: none; }
  .meta__row--from { display: flex; }
  .desc__body > p, .tracks { font-size: 15px; line-height: 20.25px; }
  .eps { margin-left: calc(-1 * (var(--gutter) + var(--safe-l))); width: calc(100% + 2 * var(--gutter) + var(--safe-l) + var(--safe-r)); }
  .eps__count { width: 65px; padding-left: 26px !important; }
  .eps__duration, .eps__watch { display: none; }
  .bonus__title { font-size: 20px; line-height: 23.8px; }
  .bonus__grid { grid-template-columns: minmax(0, 1fr); }
  .clip__title { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}