/* CEOasshole — ceoasshole.com
 *
 * Tokens are the Figma `CEOasshole` collection, one dark mode, sampled off the
 * podcast key art. Committed to dark deliberately: the key art is a dark
 * speckled ground and the film it fronts is crushed blacks throughout, so a
 * light mode would fight both. There is no theme pair to add later.
 *
 * Type: Anton for display (the poster weight that matches the graffiti
 * wordmark), Work Sans for body, IBM Plex Mono for metadata and labels.
 */

:root {
  --ink: #0c0b0a;
  --surface: #17150f;
  --line: #2e2a20;
  --cream: #ede7dd;
  --mid: #96907f;
  --gold: #e3a21a;
  --red: #ce2b22;

  --s1: 8px;
  --s2: 14px;
  --s3: 22px;
  --s4: 34px;
  --s5: 56px;
  --s6: 76px;

  --gut: 64px;
  --maxw: 1440px;

  --display: Anton, "Arial Narrow", Impact, sans-serif;
  --body: "Work Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }

/* Any `display` declaration outranks the UA's `[hidden] { display: none }`, so
   a flex/grid container with the attribute set still renders. The footer's
   empty LISTEN column and the film lightbox both rely on `hidden` meaning what
   it says. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* Announced to screen readers, invisible to everyone else. */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--gold); color: var(--ink); font-weight: 600;
  padding: 10px 18px; border-radius: 100px; transition: top .15s;
}
.skip:focus { top: 12px; }

/* --- shared type ------------------------------------------------------ */

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.kicker--mid { color: var(--mid); }

.h-display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 0;
}

.meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--mid);
  margin: 0;
}

.lede { color: var(--mid); margin: 0; }

/* --- buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 16px 28px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:active { transform: translateY(1px); }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #f0b02a; }

.btn--ghost { background: transparent; color: var(--cream); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--mid); }

.btn .tri { width: 11px; height: 12px; flex: none; fill: currentColor; }

/* --- nav -------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 11, 10, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__in {
  height: 76px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
}
.nav__links { display: flex; align-items: center; gap: 36px; }
.nav__links a {
  font-size: 15px; font-weight: 500; color: var(--mid);
  transition: color .16s ease;
}
.nav__links a:hover { color: var(--cream); }
/* `.nav__links a` outranks `.btn--gold`, which left the Subscribe label muted
   grey on gold. Restate it at matching specificity rather than reordering the
   file, so the button keeps its colour wherever it is dropped. */
.nav__links a.btn { padding: 11px 22px; font-size: 14px; }
.nav__links a.btn--gold { color: var(--ink); }
.nav__links a.btn--ghost { color: var(--cream); }

/* The identity mark is the painted wordmark, not type. logo-wordmark.png is cut
   from brand/key-art.png with its black ground keyed to transparency, so it sits
   on the nav and footer grounds with no rectangle behind it.
   Height-driven with width:auto — the source is 457x200 and the intrinsic
   width/height on the img reserves the right box before it loads. */
.logo { display: block; line-height: 0; }
/* 50px in a 76px bar. The mark is ~2.3:1, so height drives width — at 40px it
   was only 91px across and read as a smudge next to the nav links. */
.logo img { height: 50px; width: auto; }
.logo--foot img { height: 64px; }

/* --- hero ------------------------------------------------------------- */

.hero__in {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s4);
  padding-block: 84px 92px;
}

/* The logo IS the hero, so it gets the whole width rather than sharing a row
   with type that repeats what the artwork already says.
   The art's ground is pure black and the page is #0c0b0a — close, but a large
   block of #000 shows its edges. `screen` makes black composite to nothing
   against the backdrop, so the lockup drops onto the page with no rectangle and
   no alpha channel. That keeps the 397KB JPEG instead of the 1.4MB RGBA PNG the
   same effect would otherwise cost. */
.hero__logo {
  width: min(880px, 100%);
  height: auto;
  mix-blend-mode: screen;
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }

/* --- intro film band --------------------------------------------------
 * The only full-bleed block on the page. That is what makes it read as the
 * cold open rather than another content row — the hero CTA points at the film,
 * so the film has to be visible, not just linked. */

.film { position: relative; min-height: 600px; display: grid; overflow: hidden; }
.film__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.film__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(12, 11, 10, .30) 0%,
    rgba(12, 11, 10, .70) 55%,
    rgba(12, 11, 10, .93) 100%);
}
.film__in {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
  padding: 120px var(--gut);
  margin: auto;
}
.film__title {
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1;
  color: var(--cream);
}
.film__title span { display: block; }
.film .lede { font-size: 17px; }

.disc {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  display: grid; place-items: center;
  border: 0; cursor: pointer; padding: 0;
  transition: transform .18s ease, background-color .18s ease;
}
.disc:hover { transform: scale(1.06); background: #f0b02a; }
.disc .tri { width: 26px; height: 29px; fill: currentColor; margin-left: 4px; }

/* --- section furniture ------------------------------------------------ */

.band { border-top: 1px solid var(--line); }
.band__in { padding-block: var(--s6); }
.band--surface { background: var(--surface); border-bottom: 1px solid var(--line); }

.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.sec-head h2 { font-size: 34px; color: var(--cream); }

/* --- first-episode state ---------------------------------------------
 * Renders when EPISODES is empty. The brand still has to look finished with no
 * data behind it, so this is a designed block, not a shrug. */

.first {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  max-width: 720px;
}
.first h2 { font-size: clamp(34px, 4.4vw, 48px); line-height: 1; color: var(--cream); }
.first .lede { font-size: 17px; }

.rule-dashes {
  width: 100%; height: 1px; margin: var(--s4) 0 0;
  background: repeating-linear-gradient(
    to right, var(--line) 0 14px, transparent 14px 26px);
}

/* --- episodes ---------------------------------------------------------
 * Nothing below renders today: EPISODES is empty, so the first-episode state
 * above takes the whole section. It is written anyway because the promise in
 * content.js is that dropping real episodes into the array turns the sections
 * on with no markup or CSS changes — that promise has to already be true. */

.latest__band { border-bottom: 1px solid var(--line); }
.latest {
  display: flex; gap: 48px; align-items: center;
  padding-block: var(--gut);
}
.latest__thumb { flex: none; width: 560px; max-width: 48%; border-radius: 4px; overflow: hidden; }
.latest__thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.latest__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.latest__labels { display: flex; align-items: center; gap: 12px; }
.latest__title { font-size: clamp(28px, 3.4vw, 40px); line-height: .98; color: var(--cream); }

.pill {
  background: var(--red); color: var(--cream);
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em;
  padding: 4px 9px; border-radius: 3px;
}

.ep-list { display: flex; flex-direction: column; }
.ep {
  display: flex; align-items: center; gap: 26px;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
  transition: background-color .16s ease;
}
a.ep:hover { background: rgba(227, 162, 26, .04); }
.ep__thumb { flex: none; width: 168px; border-radius: 3px; overflow: hidden; }
.ep__thumb img { width: 100%; height: 95px; object-fit: cover; }
.ep__thumb--none { height: 95px; background: var(--surface); border: 1px solid var(--line); }
.ep__num { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--gold); margin: 0; }
.ep__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ep__title { font-size: 19px; font-weight: 600; color: var(--cream); margin: 0; }
.ep__blurb { font-size: 15px; line-height: 1.55; }
.ep__meta {
  flex: none; text-align: right;
  display: flex; flex-direction: column; gap: 2px;
  letter-spacing: .08em;
}

@media (max-width: 1080px) {
  .latest { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .latest__thumb { width: 100%; max-width: 100%; }
}
@media (max-width: 720px) {
  .ep { flex-wrap: wrap; gap: 14px; }
  .ep__thumb { width: 116px; }
  .ep__thumb img, .ep__thumb--none { height: 66px; }
  .ep__meta { width: 100%; flex-direction: row; gap: 14px; text-align: left; }
}

/* --- the show --------------------------------------------------------- */

.show__in { display: flex; gap: 72px; align-items: flex-start; padding-block: var(--s6); }
.show__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.show__copy p { line-height: 1.72; }
.show__facts { flex: none; width: 420px; display: flex; flex-direction: column; gap: var(--s2); }

.fact {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 26px;
  display: flex; flex-direction: column; gap: 9px;
}
.fact__label { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .2em; color: var(--gold); }
.fact__value { font-size: 19px; color: var(--cream); }
.fact__value--tba { color: var(--mid); font-style: italic; }

/* --- subscribe -------------------------------------------------------- */

.sub__in {
  padding-block: var(--s6);
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  text-align: center;
}
.sub h2 { font-size: clamp(28px, 4vw, 40px); color: var(--cream); }
.sub .lede { max-width: 620px; }

.form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; padding-top: 10px; }
.form input {
  height: 52px; width: 340px; max-width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0 20px;
  color: var(--cream);
  font-family: var(--body); font-size: 15px;
}
.form input::placeholder { color: var(--mid); }
.form .btn { height: 52px; justify-content: center; min-width: 150px; }

.form__note { font-size: 14px; color: var(--mid); margin: 0; min-height: 1.4em; }
.form__note[data-state='error'] { color: var(--red); }
.form__note[data-state='ok'] { color: var(--gold); }

/* --- footer ----------------------------------------------------------- */

.foot__in {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5) var(--s6); flex-wrap: wrap;
  padding-block: var(--s5);
}
.foot__brand { display: flex; flex-direction: column; gap: var(--s2); }

.foot__col { display: flex; flex-direction: column; gap: 12px; }
.foot__col a, .foot__col span { font-size: 15px; color: var(--mid); }
.foot__col a:hover { color: var(--cream); }
.foot__legal { width: 100%; border-top: 1px solid var(--line); padding-block: var(--s3) var(--s4); }

/* --- lightbox --------------------------------------------------------- */

.lb {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(6, 5, 5, .94);
  display: grid; place-items: center;
  padding: var(--s3);
  border: 0;
}
.lb::backdrop { background: rgba(6, 5, 5, .94); }
.lb[hidden] { display: none; }
.lb__frame { width: min(1200px, 100%); }
.lb video { width: 100%; height: auto; background: #000; border-radius: 3px; }
.lb__close {
  position: absolute; top: 20px; right: 24px;
  background: transparent; border: 1px solid var(--line); color: var(--cream);
  border-radius: 100px; padding: 9px 18px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
}
.lb__close:hover { border-color: var(--mid); }

/* --- responsive -------------------------------------------------------
 * Two breaks, not four. The layout is two columns that become one. */

@media (max-width: 1080px) {
  :root { --gut: 40px; }
  .hero__in { padding-block: 60px 68px; }
  .show__in { flex-direction: column; gap: var(--s4); }
  .show__facts { width: 100%; }
}

@media (max-width: 720px) {
  :root { --gut: 22px; --s6: 56px; }
  body { font-size: 16px; }
  .nav__in { height: 64px; }
  .logo img { height: 38px; }
  .logo--foot img { height: 50px; }
  .nav__links { gap: 20px; }
  .nav__links a { display: none; }
  .nav__links a.nav__keep { display: inline; }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { flex: 1 1 auto; justify-content: center; }
  .film { min-height: 460px; }
  .film__in { padding: 80px var(--gut); }
  .disc { width: 68px; height: 68px; }
  .disc .tri { width: 21px; height: 23px; }
  .sec-head h2 { font-size: 27px; }
  .form input { width: 100%; }
  .form .btn { width: 100%; }
  .foot__in { gap: var(--s4); }
}