/* ==========================================================================
   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 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  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 .15s,border-color .15s,color .15s;
}
.btn:hover{background:#b81919;border-color:#b81919}
.btn:disabled{opacity:.55;cursor:progress}
.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}
.staff-note{color:var(--ink-dim);font-size:14px;margin-bottom:18px;max-width:660px}

.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}
  .staff-grid{grid-template-columns:repeat(2,1fr)}
  .member-grid{grid-template-columns:repeat(3,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)}
}