/* Who's Got Bars? — site styles */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #0D0D0D; color: #F0EDE6;
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: #EE4B1F; text-decoration: none; }
a:hover { color: #FF6A42; }
button { font: inherit; }
:focus-visible { outline: 2px solid #EE4B1F; outline-offset: 2px; }

.ab { font-family: "Archivo Black", Impact, "Arial Black", sans-serif; font-weight: 400; }
.sm { font-family: "Space Mono", ui-monospace, Menlo, monospace; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: start; }
.artgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }

.thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #1A1A19; }
.card {
  background: #141413; border: 2px solid #1E1E1E; cursor: pointer; text-align: left;
  transition: border-color 120ms ease, transform 120ms ease; padding: 0; color: inherit;
  display: block; width: 100%;
}
.card:hover { border-color: #EE4B1F; transform: translateY(-2px); }
.chip {
  cursor: pointer; font-family: "Space Mono", ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 13px; border: 1px solid #3A3A38; background: transparent; color: #A5A29B;
  display: inline-block;
}
.chip:hover { color: #F0EDE6; border-color: #6B6862; }
.chip.is-on { background: #EE4B1F; color: #0D0D0D; border-color: #EE4B1F; }
.navbtn {
  background: none; border: none; padding: 0; cursor: pointer; color: #F0EDE6;
  font-family: "Space Mono", ui-monospace, Menlo, monospace; font-size: 11px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.navbtn.is-on, .navbtn.is-on:hover { color: #EE4B1F; }
.tick {
  cursor: pointer; background: none; border: none; padding: 0; display: flex;
  flex-direction: column; align-items: center; flex: 1 1 0;
}
.rowlink {
  cursor: pointer; background: none; border: none; width: 100%; text-align: left;
  display: block; padding: 0; color: inherit;
}
.rowlink:hover .rowname { color: #EE4B1F; }

/* header */
.site-head { position: sticky; top: 0; z-index: 40; background: #0D0D0D; border-bottom: 3px solid #EE4B1F; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 15px; padding-bottom: 15px; }
.navdesk { display: flex; gap: 22px; align-items: center; }
.subdesk { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #3A3A38; color: #F0EDE6; padding: 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.subdesk:hover { color: #F0EDE6; border-color: #EE4B1F; }
.menubtn {
  display: none; background: transparent; border: 1px solid #3A3A38;
  width: 42px; height: 42px; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.menubtn:hover { border-color: #EE4B1F; }
.mobilemenu { display: none; flex-direction: column; border-top: 1px solid #1E1E1E; background: #0D0D0D; }
.mobilemenu a { border-bottom: 1px solid #1E1E1E; padding: 17px 20px; font-size: 13px; }
.mobilemenu .menu-sub { display: flex; align-items: center; gap: 9px; background: #EE4B1F; color: #0D0D0D; padding: 17px 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: none; }
body.menu-open .mobilemenu { display: flex; }
body.menu-open .menubtn .icon-burger { display: none; }
.menubtn .icon-close { display: none; }
body.menu-open .menubtn .icon-close { display: block; }

/* ticker */
.ticker { overflow: hidden; width: 100%; }
.ticker-track { display: flex; width: max-content; animation: wgb-ticker 42s linear infinite; }
.ticker-seq { display: flex; align-items: center; white-space: nowrap; }
@keyframes wgb-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* episode dialog */
.epdlg { position: fixed; inset: 0; z-index: 90; background: rgba(6,6,6,0.9); display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 20px; }
.epdlg.is-open { display: flex; }
.epdlg-box { width: 100%; max-width: 880px; background: #0D0D0D; border: 2px solid #EE4B1F; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .card { transition: none; }
  .card:hover { transform: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 1080px) {
  .g3, .artgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 900px) {
  .navdesk { display: none; }
  .subdesk { display: none; }
  .menubtn { display: flex; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .g3, .g2, .artgrid { grid-template-columns: minmax(0, 1fr); }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}