/* ==========================================================================
   Reusable pieces: buttons, video surfaces, cards, grids, forms, toast.

   Interaction convention: hover changes the border and nothing else. The
   previous version lifted every card 4px and glowed it red, which is the
   house style of generated landing pages rather than a news site.
   ========================================================================== */

/* ---------- Buttons ---------- */
/* `hidden` is a browser default of display:none, which any class setting a
   display beats on specificity — .btn[hidden] stayed on screen. Nothing in
   this codebase ever wants a hidden element drawn, so it is settled here once.
   This is why equipment managers could still see the Site editor button. */
[hidden]{display:none !important}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  /* Stops iOS grey-flashing the button and delaying the tap by 300ms. */
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  background:var(--accent);color:#fff;padding:12px 20px;
  font-family:var(--font-body);
  font-weight:600;font-size:14px;
  border:1px solid var(--accent);cursor:pointer;border-radius:2px;
  transition:background-color .12s,border-color .12s,color .12s,transform .06s;
}
.btn:hover{background:#b81919;border-color:#b81919}

/* A button that visibly goes down when pressed. On a touch screen this is the
   only confirmation there is that the tap landed, and the checkout button had
   none — it read as unresponsive on a slow connection. */
.btn:active:not(:disabled){transform:translateY(1px);background:#8a1111;border-color:#8a1111}
.btn.ghost:active:not(:disabled){background:rgba(255,255,255,.06)}
.btn:disabled{opacity:.5;cursor:default}

/* While a request is in flight. */
.btn.is-busy{cursor:progress;opacity:.8}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.small{padding:9px 14px;font-size:13px}
.btn.danger{background:var(--danger);border-color:var(--danger)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ---------- Intro video (homepage masthead) ---------- */
.intro-video{
  position:relative;width:100%;height:62vh;min-height:400px;max-height:640px;
  overflow:hidden;background:#000;
}
.intro-video-el{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
.intro-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.30) 50%,rgba(10,10,10,.88) 100%);
}
.intro-content{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter) 44px;
}
.intro-title{margin-bottom:18px;line-height:0}
/* The source artwork had ~56% empty transparent margin baked in, which pushed
   the mark up and right of everything else in the masthead. The asset is now
   cropped to its content, so the image box is the mark itself and it aligns
   with the tagline below without any nudging. */
.intro-logo{
  --logo-w:clamp(300px,44vw,580px);
  /* Space to the left of the text column before the viewport edge: the
     centring slack once the page is wider than --max, plus the gutter. */
  --room:calc(max(0px, (100vw - var(--max)) / 2) + var(--gutter));

  width:var(--logo-w);
  height:auto;

  /* The wordmark sits centred inside artwork wider than the tagline, so
     left-aligning the two boxes leaves "KCBY" hanging right of the text.
     Pulling left fixes that, but the pull is capped at the room available:
     a fixed percentage worked on a wide desktop, where there is centring
     slack to absorb it, and pushed the logo off the screen on a tablet,
     where the page is narrower than --max and there is none. 12px keeps it
     off the very edge. */
  margin-left:calc(-1 * min(var(--logo-w) * 0.11, var(--room) - 12px));

  filter:drop-shadow(0 4px 18px rgba(0,0,0,.5));
}
.intro-sub{
  font-size:clamp(15px,1.6vw,18px);color:#e4e4e4;max-width:600px;
}
.intro-mute{
  position:absolute;bottom:20px;right:20px;z-index:3;
  width:38px;height:38px;border-radius:2px;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.3);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s,border-color .15s;
}
.intro-mute:hover{background:rgba(0,0,0,.85);border-color:#fff}

/* ---------- Hero ----------
   Weighted toward the player and given deep vertical padding so the latest
   show holds the viewport on its own, rather than the next section peeking in
   under it. */
.hero{position:relative;padding:56px var(--gutter) 64px;max-width:var(--max);margin:0 auto}
/* Weighted toward the player so the preview reads larger, without the section
   growing to fill the viewport. */
.hero-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:start}
.hero-title{font-size:clamp(26px,3vw,36px);margin-bottom:16px}
.hero p.lede{font-size:16px;color:var(--ink-body);max-width:520px;margin-bottom:24px;line-height:1.7}

/* ---------- Video surface ---------- */
.video-wrap{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);
}
.video-wrap iframe{width:100%;height:100%;border:0}
.video-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--accent);color:#fff;padding:4px 9px;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- Video modal ---------- */
.video-modal{
  position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.94);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.video-modal .frame{position:relative;width:100%;max-width:1060px;aspect-ratio:16/9}
.video-modal iframe{width:100%;height:100%;border:0}
.video-modal .close{
  position:absolute;top:20px;right:20px;
  background:none;border:1px solid rgba(255,255,255,.5);color:#fff;
  padding:8px 14px;cursor:pointer;font-weight:500;font-size:13px;
}
.video-modal .close:hover{border-color:#fff}

/* ---------- Episode grid ---------- */
.ep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ep-card{
  background:var(--bg-2);border:1px solid var(--line);overflow:hidden;
  transition:border-color .15s;text-align:left;width:100%;font:inherit;color:inherit;
  display:block;
}
.ep-card[data-action]{cursor:pointer}
.ep-card:hover{border-color:var(--line-strong)}
.ep-thumb{
  aspect-ratio:16/9;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#161616;
  background-size:cover;background-position:center;
}
.ep-thumb.has-img{background-color:#000}
.ep-thumb.has-img .ep-num{display:none}
/* Play affordance only on cards that actually play something. */
.ep-card[data-action] .ep-thumb::after{
  content:"";position:absolute;width:52px;height:52px;border-radius:50%;
  background:rgba(0,0,0,.6) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>") center/20px no-repeat;
  border:1px solid rgba(255,255,255,.45);
  transition:background-color .15s;z-index:2;
}
.ep-card[data-action]:hover .ep-thumb::after{background-color:var(--accent);border-color:var(--accent)}
.ep-thumb .ep-num{
  font-family:var(--font-display);font-weight:600;font-size:52px;
  color:rgba(255,255,255,.10);position:absolute;line-height:1;
}
.ep-meta{padding:16px 18px}
.ep-meta .tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);font-weight:600;margin-bottom:6px}
.ep-meta h3{font-family:var(--font-display);font-weight:600;font-size:18px;margin-bottom:5px}
.ep-meta p{font-size:13px;color:var(--ink-dim);line-height:1.55}
.empty-note{color:var(--ink-dim)}

/* ---------- Season tabs ---------- */
.season-tabs{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:36px;
  padding-bottom:20px;border-bottom:1px solid var(--line);
}
.season-tabs button{
  background:transparent;color:var(--ink-dim);border:1px solid var(--line);
  padding:8px 14px;font-family:var(--font-body);font-weight:500;font-size:13px;
  cursor:pointer;border-radius:2px;transition:border-color .15s,color .15s,background-color .15s;
}
.season-tabs button:hover{color:var(--ink);border-color:var(--line-strong)}
.season-tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- Awards ----------
   A flowing list rather than a grid: entries vary from a few words to a full
   line of credits, and a two-column grid left ragged gaps between them. */
.award-year{margin-bottom:40px}
.award-year h3{
  font-family:var(--font-display);font-weight:600;font-size:22px;
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.award-list{list-style:none;margin:0;padding:0}
.award-group{
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);
  margin:22px 0 10px;
}
.award-group:first-child{margin-top:0}
.award{
  padding:10px 0 10px 16px;
  border-left:2px solid var(--line);
  font-size:15px;color:var(--ink-body);line-height:1.6;
  transition:border-color .15s,color .15s;
}
.award:hover{border-left-color:var(--accent);color:var(--ink)}

/* ---------- Staff ---------- */
.staff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.staff-card{
  background:var(--bg-2);border:1px solid var(--line);
  overflow:hidden;transition:border-color .15s;
}
.staff-card:hover{border-color:var(--line-strong)}
.staff-photo{
  aspect-ratio:1;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#161616;
  background-size:cover;background-position:center;
}
.staff-photo .placeholder{
  font-family:var(--font-display);font-weight:600;font-size:34px;
  color:rgba(245,245,245,.18);
}
.staff-photo.has-img .placeholder{display:none}
.staff-info{padding:16px}
.staff-info .role{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);font-weight:600;margin-bottom:5px}
.staff-info h4{font-family:var(--font-display);font-weight:600;font-size:17px}
.staff-info p{font-size:13px;color:var(--ink-dim);margin-top:3px}
.staff-section-title{
  font-family:var(--font-display);font-weight:600;font-size:20px;
  margin:36px 0 18px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.staff-section-title:first-of-type{margin-top:0}


.member-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.member-card{
  background:var(--bg-2);border:1px solid var(--line);
  padding:14px 12px;text-align:center;transition:border-color .15s;
}
.member-card:hover{border-color:var(--line-strong)}
.member-avatar{
  width:40px;height:40px;margin:0 auto 8px;border-radius:50%;
  background:#1e1e1e;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--ink-dim);
}
.member-card h5{font-size:13px;font-weight:500;margin-bottom:2px}
.member-card .yr{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);font-weight:500}

/* ---------- About ---------- */
.prose{max-width:680px}
.prose p{font-size:16px;color:var(--ink-body);line-height:1.75;margin-bottom:20px}
.prose p:last-child{margin-bottom:0}
.mission{
  max-width:680px;margin-top:36px;padding:22px 24px;
  background:var(--bg-2);border-left:2px solid var(--accent);
}
.mission .lab{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:600;margin-bottom:8px;
}
.mission p{font-size:16px;color:var(--ink);line-height:1.7;margin:0}

/* ---------- About: promo video ---------- */
.promo{margin-top:48px;max-width:880px}
.promo-title{
  font-size:20px;margin-bottom:14px;
  padding-bottom:8px;border-bottom:1px solid var(--line);
}
.promo-video{
  display:block;width:100%;aspect-ratio:16/9;
  background:#000;border:1px solid var(--line);
}

/* ---------- Outbound link cards ----------
   Used on the Booster Club page, which points at an organisation that runs its
   own site rather than hosting that content here. */
.link-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:8px}
.link-card{
  display:flex;flex-direction:column;gap:4px;padding:16px 18px;
  background:var(--bg-2);border:1px solid var(--line);
  transition:border-color .15s;
}
.link-card:hover{border-color:var(--accent)}
.link-card .link-title{font-weight:600;font-size:15px}
/* Marks the link as leaving this site, without an icon font. */
.link-card .link-title::after{content:" ↗";color:var(--ink-dim);font-weight:400}
.link-card .link-note{font-size:13px;color:var(--ink-dim);line-height:1.5}

/* ---------- Advertising ---------- */
.ad-intro{max-width:700px;margin-bottom:48px}
.ad-intro p{font-size:16px;color:var(--ink-body);margin-bottom:16px;line-height:1.75}
.ad-section-title{
  font-family:var(--font-display);font-weight:600;font-size:20px;
  margin:40px 0 18px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.director-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.director{
  display:flex;align-items:center;gap:14px;padding:18px;
  background:var(--bg-2);border:1px solid var(--line);transition:border-color .15s;
}
.director:hover{border-color:var(--line-strong)}
.director-mark{
  width:44px;height:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:#1e1e1e;border:1px solid var(--line-strong);
  font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink-dim);
}
.director-info .role{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);font-weight:600;margin-bottom:3px}
.director-info h4{font-family:var(--font-display);font-weight:600;font-size:16px;margin-bottom:2px}
.director-info p{font-size:12px;color:var(--accent-text);word-break:break-all}

.feature-ad{
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;
  margin-bottom:44px;padding-bottom:44px;border-bottom:1px solid var(--line);
}
.feature-ad:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.feature-ad.reverse .feature-video{order:2}
.feature-text h3{font-family:var(--font-display);font-size:22px;font-weight:600;margin-bottom:6px}
.feature-text .sub{font-size:13px;color:var(--ink-dim);margin-bottom:14px}
.feature-text p{font-size:15px;color:var(--ink-body);line-height:1.75}
.tag-pill{
  display:inline-block;padding:4px 10px;margin-bottom:12px;
  border:1px solid var(--line-strong);
  color:var(--ink-dim);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:8px}
.contact-info p{font-size:16px;color:var(--ink-body);margin-bottom:20px;max-width:480px;line-height:1.75}
.contact-block{padding:18px 0;border-bottom:1px solid var(--line)}
.contact-block .lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px;font-weight:600}
.contact-block .val{font-size:17px;line-height:1.5}
.contact-block .val a:hover{color:var(--accent-text)}

/* ---------- Forms ---------- */
form{display:flex;flex-direction:column;gap:16px}
.field label{
  font-size:12px;letter-spacing:.06em;
  color:var(--ink-dim);font-weight:500;margin-bottom:6px;display:block;
}
.field input,.field textarea,.field select{
  width:100%;background:var(--bg-2);border:1px solid var(--line);
  color:var(--ink);padding:11px 13px;font-family:var(--font-body);font-size:14px;
  border-radius:2px;transition:border-color .15s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:130px}
.form-status{font-size:13px;color:var(--ink-dim);min-height:18px}
.form-status.ok{color:#8fd39a}

/* ---------- Toast ---------- */
.saved-toast{
  position:fixed;bottom:20px;right:20px;z-index:1000;
  background:#16321a;border:1px solid #2d6638;color:#9ee5a8;
  padding:11px 16px;font-size:13px;font-weight:500;border-radius:2px;
  transform:translateY(80px);opacity:0;transition:transform .2s,opacity .2s;pointer-events:none;
}
.saved-toast.show{transform:translateY(0);opacity:1}
.saved-toast.error{background:#321a1c;border-color:#663036;color:#f0a8ae}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .intro-video{height:50vh;min-height:320px}
  /* Only the size changes here. The offset rule above is already bounded by
     the room available, so it holds at every width. */
  .intro-logo{--logo-w:min(88vw,400px)}
  .hero{padding:36px var(--gutter-sm) 44px}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero p.lede{max-width:none}
  .ep-grid{grid-template-columns:1fr}
  .member-grid{grid-template-columns:repeat(3,1fr)}
  .staff-grid{grid-template-columns:repeat(2,1fr)}
  .director-grid{grid-template-columns:1fr}
  .link-grid{grid-template-columns:1fr}
  .feature-ad,.feature-ad.reverse{grid-template-columns:1fr;gap:20px}
  .feature-ad.reverse .feature-video{order:0}
  .contact-grid{grid-template-columns:1fr;gap:32px}
}

@media (max-width:480px){
  .staff-grid{grid-template-columns:1fr}
  .member-grid{grid-template-columns:repeat(2,1fr)}
}

/* Only ever seen on a Netlify preview deploy — see ui/preview-banner.js. */
.preview-bar{
  display:block;position:sticky;top:0;z-index:200;
  background:var(--accent-2);color:#1a1a1a;text-decoration:none;
  font-family:var(--font-body);font-size:13px;font-weight:600;
  text-align:center;padding:8px 16px;
}
.preview-bar:hover{text-decoration:underline}


/* ============================= ONE PERSON =============================
   A profile page, reached from a card on the staff page. Built out of the
   same pieces as the rest of the site: the portrait is the staff card's
   photo at a larger size, and the work list borrows the archive's rules
   and uppercase labels rather than introducing a third look. */

/* The cards became links when profiles arrived; they should not look it. */
.staff-card,.member-card{display:block;color:inherit;text-decoration:none}

.person-back{
  display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none;margin-bottom:26px;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s;
}
.person-back:hover{color:var(--ink);border-bottom-color:var(--line-strong)}

.person-head{
  display:grid;grid-template-columns:180px 1fr;gap:30px;align-items:start;
  padding-bottom:30px;border-bottom:1px solid var(--line);
}
.person-photo{
  aspect-ratio:1;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#161616;border:1px solid var(--line);
  background-size:cover;background-position:center;
}
.person-photo .placeholder{
  font-family:var(--font-display);font-weight:600;font-size:52px;
  color:rgba(245,245,245,.18);
}
.person-photo.has-img .placeholder{display:none}

.person-name{font-size:34px;line-height:1.15;font-weight:700}
/* The role sits in the heading the way a byline does, but quieter than the
   name — it is the same sentence, not a second one. */
.person-role{font-weight:500;color:var(--ink-dim)}
.person-year{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-text);font-weight:600;margin-top:10px;
}
.person-bio{font-size:15px;color:var(--ink-body);line-height:1.65;margin-top:14px;max-width:62ch}
.person-links{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.person-links .btn{display:inline-flex;align-items:center;gap:7px;text-decoration:none}

.person-missing{color:var(--ink-dim);font-size:15px}
.person-missing a{color:var(--accent-text)}

/* ---------- Body of work ---------- */
.person-work{margin-top:34px}
.person-work-title{
  font-family:var(--font-display);font-weight:600;font-size:22px;margin-bottom:26px;
}
.work-group{margin-bottom:34px}
.work-kind{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:600;
  padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:4px;
}
.work-list{list-style:none;margin:0;padding:0}
.work-item{padding:16px 0;border-bottom:1px solid var(--line)}
.work-item:last-child{border-bottom:none}
.work-title{font-family:var(--font-display);font-weight:600;font-size:17px}
.work-title a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.work-title a:hover{color:var(--accent-text);border-bottom-color:var(--accent-text)}
/* A segment that never aired is still on the page; the badge is the only
   thing that says so, so it reads as a label rather than an error. */
.work-flag{
  display:inline-block;margin-left:10px;padding:2px 7px;
  font-family:var(--font-body);font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);border:1px solid var(--line-strong);border-radius:2px;
  vertical-align:middle;
}
.work-credits{font-size:13px;color:var(--ink-body);margin-top:5px}
.work-date{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-top:6px}

@media (max-width:760px){
  .person-head{grid-template-columns:1fr;gap:22px}
  .person-photo{max-width:170px}
  .person-name{font-size:27px}
}
.person-empty{margin-top:28px;font-size:14px;color:var(--ink-dim)}