/* =============================================================================
   live.bnkops.com
   Palette and type are the bnkops house set from vault/bnkops/brand.md, which is
   authoritative. Do NOT borrow the AFL yellow set: brand.md is explicit that the
   Fight Back palette "is AFL's, borrowed for their work, and is not a bnkops asset."
   Colour literals belong in this block and nowhere else in the file.
   ============================================================================= */
:root {
  --void:       #0D0616;   /* page ground */
  --deep:       #150A26;   /* mid vignette */
  --surface:    #1E1035;   /* raised surfaces */
  --purple:     #7C3AED;   /* signature accent, rules, glow */
  --purple-lit: #A78BFA;   /* the mark, tagline */
  --text:       #EDE8F7;   /* body */
  --muted:      #9C8FBA;   /* secondary */

  /* Derived, so a re-theme is the block above and nothing else. */
  --line:  color-mix(in srgb, var(--purple-lit) 22%, transparent);
  --scrim: color-mix(in srgb, var(--void) 72%, transparent);

  /* System stack only. brand.md: "no webfont, no CDN ... A site whose pitch is a
     corporate-free self-hosted stack should not be loading assets from a
     corporate CDN." That argument applies to this page more than to most. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--deep), transparent 70%),
    var(--void);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  /* One side gutter, set once, with padding-block so the sides are never zeroed. */
  padding-inline: 20px;
  padding-block: 32px 48px;
}

.wrap { max-width: 1120px; margin: 0 auto; }

/* ---- Masthead ---- */
header { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.mark { width: 34px; height: 34px; color: var(--purple-lit); flex: none; }
.mark svg { width: 100%; height: 100%; display: block; }
.wordmark {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}
.wordmark span { color: var(--purple-lit); }

/* ---- Status line ---- */
.statusrow { display: flex; align-items: center; margin-bottom: 18px; }
.status {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 2px;
  color: var(--muted);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.status[data-state="live"] { color: var(--text); border-color: var(--purple); }
.status[data-state="live"] .dot { background: var(--purple-lit); animation: pulse 2s ease-in-out infinite; }
.status[data-state="error"] .dot { background: var(--purple); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
/* Motion is near-invisible by house rule; respect a user who wants none. */
@media (prefers-reduced-motion: reduce) { .dot { animation: none !important; } }

/* ---- Player: VERTICAL ----
   The stream is shot vertical (9:16), so the stage is too. Two constraints fight
   here and both matter: a 9:16 box wants to be tall, and a desktop viewport is
   wide and short. Sizing off the VIEWPORT HEIGHT rather than the container width
   is what keeps the whole frame on screen without scrolling — width follows from
   the aspect ratio. `min()` then stops it growing past a sensible width on a very
   tall window. To go back to landscape this is the one block to change. */
.stage {
  position: relative;
  aspect-ratio: 9 / 16;
  height: min(68vh, 760px);
  max-width: 100%;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
/* `contain`, never `cover`: a viewer must never lose the edges of a vertical
   frame to a crop. Letterboxing on an unexpected aspect ratio is the correct
   failure — it is visible and it loses nothing. */
video {
  width: 100%; height: 100%; display: block;
  background: #000;
  object-fit: contain;
}

/* The offline card. Most of the time this is what the page IS, so it gets the
   same care as the player rather than being an afterthought error state. */
.offline {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  background: var(--surface);
}
.offline h2 {
  margin: 0; font-family: var(--font-mono); font-weight: 500;
  font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--purple-lit);
}
.offline p { margin: 0; max-width: 46ch; color: var(--muted); font-size: 0.95rem; }
[hidden] { display: none !important; }

/* ---- Body copy ---- */
.lede { margin: 26px 0 0; max-width: 62ch; color: var(--muted); }
.lede strong { color: var(--text); font-weight: 600; }
footer {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--muted);
}
footer a { color: var(--purple-lit); text-decoration: none; }
footer a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .wordmark { font-size: 0.8rem; letter-spacing: 0.14em; }
  body { padding-block: 22px 34px; }
}


/* ---- Archive: past broadcasts, newest first ---- */
.archive { margin-top: 40px; }
.archive__head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.archive__head h2 {
  margin: 0; font-family: var(--font-mono); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--purple-lit);
}
.archive__count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }

/* A list, not a grid. The ask was "blog style": one entry per row, newest first,
   timestamp leading. A poster grid would bury the dates, which are the index. */
.entry {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  width: 100%; text-align: left;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  color: inherit; font: inherit; cursor: pointer;
}
.entry:hover .entry__title { color: var(--purple-lit); }
.entry:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
/* Thumbnails are vertical too, matching the source material. */
.entry__thumb {
  flex: none; width: 54px; aspect-ratio: 9 / 16;
  object-fit: cover; border-radius: 2px;
  background: var(--surface); border: 1px solid var(--line);
}
.entry__meta { min-width: 0; }
.entry__title { margin: 0 0 3px; font-size: 0.98rem; color: var(--text); font-weight: 600; }
.entry__sub {
  margin: 0; font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; color: var(--muted);
}
.entry[aria-current="true"] .entry__title { color: var(--purple-lit); }
.archive__empty { padding: 18px 0; color: var(--muted); font-size: 0.95rem; }

/* When an archived broadcast is playing, say so plainly — otherwise a viewer
   cannot tell a recording from the live feed. */
.status[data-state="archive"] { color: var(--text); border-color: var(--line); }
.status[data-state="archive"] .dot { background: var(--muted); animation: none; }
.backlive {
  margin-left: 10px; font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: none; border: 1px solid var(--purple); color: var(--purple-lit);
  padding: 4px 9px; border-radius: 2px; cursor: pointer;
}
.backlive:hover { background: color-mix(in srgb, var(--purple) 18%, transparent); }


/* ---- Two-column layout, and why it exists ----
   A 9:16 player fills about a quarter of a desktop viewport's width, so a
   single-column page leaves the entire right side empty and pushes the archive
   below the fold. Vertical content wants a side-by-side layout for exactly the
   reason landscape content does not. Below 900px the columns stack and the
   player leads, which is the right order on a phone — where the viewport is
   itself vertical and the player already fits. */
.layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 34px; align-items: start; }
.col-player { min-width: 0; }
.layout .archive { margin-top: 0; }
.layout .lede { max-width: 42ch; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; gap: 0; }
  .layout .archive { margin-top: 34px; }
  .stage { height: min(62vh, 640px); }
  .layout .lede { max-width: 62ch; }
}
/* DO NOT MERGE THIS INTO THE OTHER (max-width: 560px) BLOCK HIGHER UP.
   It has to stay AFTER the 900px block. At <=560px both queries match, and with
   equal specificity the later rule wins — so this `height: auto` is what stops
   the 900px block's `height: min(62vh, 640px)` from applying. Moved earlier, the
   player shrinks to a height cap on exactly the devices vertical video is for. */
@media (max-width: 560px) {
  /* On a phone the viewport is already 9:16-ish: let the player use the full
     column width rather than a height cap that would leave it small. */
  .stage { height: auto; width: 100%; }
}