/* 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 {
  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;
}

/* ---------- 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;
}
.player video { display: block; width: 100%; height: 100%; background: #000; }
.player__start {
  position: absolute; left: 50%; top: 50%;
  width: 72px; height: 48px; margin: -24px 0 0 -36px;
  border: 0; border-radius: 6px;
  background: rgba(0, 0, 0, .7);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.player__start:hover { background: var(--accent); }
.player__start svg { width: 22px; height: 22px; fill: currentColor; }
.player:not([data-state="idle"]) .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; }
  .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; }
}