/* ============================================================
   The Blue Chair — podcast sub-brand
   Layers on styles.css. Every token below is sampled straight
   out of the show's cover art, so the page and the artwork are
   the same object. Scoped to this page only: the rest of the
   site stays the monochrome system it has always been.
   ============================================================ */

:root {
  --bc-black: #0e0e0e;      /* cover background */
  --bc-cream: #f5f2eb;      /* cover wordmark   */
  --bc-blue: #3472af;       /* seat webbing     */
  --bc-blue-lift: #6796c4;  /* back webbing     */
  --bc-blue-pale: #e9f5ff;  /* webbing highlight*/
  --bc-rust: #c84b1b;       /* accent rule      */

  --bc-dim: rgba(245, 242, 235, 0.58);
  --bc-hair: rgba(245, 242, 235, 0.14);
  --bc-panel: #141414;

  --f-wordmark: clamp(3.4rem, 12vw, 9.5rem);
}

/* The display face matches the condensed grotesque on the cover;
   the italic serif carries the tagline exactly as the artwork does.
   Body copy stays Inter so the page still reads as this site. */
.bc {
  background: var(--bc-black);
  color: var(--bc-cream);
}
.bc-display {
  font-family: "Oswald", "Helvetica Neue Condensed", Impact, sans-serif;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 0.86;
  text-transform: uppercase;
}
.bc-serif {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* The rust rule from the cover, reused as the section marker. */
.bc-rule {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--bc-rust);
  border-radius: 2px;
}
.bc-rule--center { margin-inline: auto; }

.bc-eyebrow {
  font-size: clamp(0.72rem, 1vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bc-dim);
}

.bc-section { padding: clamp(4.5rem, 11vw, 9.5rem) 0; position: relative; }
.bc-section--panel { background: var(--bc-panel); }

/* ============================================================
   HERO
   ============================================================ */
.bc-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 52px;
  overflow: hidden;
}
/* A cold pool of light behind the chair, so the cutout sits in
   the frame instead of floating on flat black. */
.bc-hero::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 4%;
  width: min(90vw, 1100px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(52, 114, 175, 0.30) 0%, rgba(52, 114, 175, 0.10) 38%, transparent 68%);
  pointer-events: none;
}
.bc-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(1rem, 4vw, 3.5rem);
}
.bc-hero__copy { max-width: 640px; }
.bc-hero__eyebrow { margin-bottom: 1.4rem; }

.bc-wordmark {
  font-size: var(--f-wordmark);
  color: var(--bc-cream);
  margin-bottom: 1.9rem;
}
.bc-wordmark span { display: block; }
.bc-wordmark .bc-wordmark__the {
  font-size: 0.395em;
  letter-spacing: 0.02em;
  margin-bottom: 0.06em;
}

.bc-hero__tagline {
  font-size: clamp(1.3rem, 2.5vw, 1.95rem);
  color: var(--bc-cream);
  margin-top: 1.5rem;
}
.bc-hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  color: var(--bc-dim);
  max-width: 44ch;
  margin-top: 1.7rem;
}
.bc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.4rem;
}

.bc-hero__chair {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 560px;
  filter: drop-shadow(0 50px 70px rgba(0, 0, 0, 0.75));
  animation: bc-float 9s ease-in-out infinite;
}
@keyframes bc-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .bc-hero__chair { animation: none; }
}

.bc-hero__cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bc-dim);
}
.bc-hero__cue-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--bc-dim), transparent);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.bc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  border: 1px solid transparent;
  border-radius: 980px;
  padding: 0.9em 1.6em;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.bc-btn:active { transform: scale(0.97); }
.bc-btn svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

.bc-btn--primary { background: var(--bc-cream); color: var(--bc-black); }
.bc-btn--primary:hover { background: #fff; }
.bc-btn--ghost { border-color: var(--bc-hair); color: var(--bc-cream); }
.bc-btn--ghost:hover { background: rgba(245, 242, 235, 0.08); border-color: rgba(245, 242, 235, 0.3); }
.bc-btn--blue { background: var(--bc-blue); color: #fff; }
.bc-btn--blue:hover { background: #3d81c4; }

/* ============================================================
   PREMISE
   ============================================================ */
.bc-premise__statement {
  font-size: clamp(1.6rem, 4.2vw, 3rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--bc-cream);
}
.bc-premise__statement + .bc-premise__statement { margin-top: 1.6rem; }
.bc-premise__statement .bc-fade { color: var(--bc-dim); }

.bc-premise__note {
  margin-top: 2.6rem;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.65;
  color: var(--bc-dim);
  max-width: 54ch;
}

/* ============================================================
   PLATFORMS
   ============================================================ */
.bc-platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
}
.bc-platform {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--bc-hair);
  border-radius: 14px;
  background: rgba(245, 242, 235, 0.015);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.bc-platform:hover {
  border-color: rgba(52, 114, 175, 0.75);
  background: rgba(52, 114, 175, 0.10);
  transform: translateY(-3px);
}
.bc-platform svg {
  width: 26px;
  height: 26px;
  fill: var(--bc-cream);
  flex: none;
  transition: fill 0.3s var(--ease);
}
.bc-platform:hover svg { fill: var(--bc-blue-lift); }
.bc-platform__text { display: flex; flex-direction: column; line-height: 1.25; }
.bc-platform__label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bc-dim); }
.bc-platform__name { font-size: 1.02rem; font-weight: 500; color: var(--bc-cream); }

/* A platform with no link yet reads as pending, not broken. */
.bc-platform--soon { opacity: 0.42; pointer-events: none; }
.bc-platform--soon .bc-platform__label { color: var(--bc-rust); }

/* ============================================================
   FEATURED EPISODE
   ============================================================ */
.bc-featured__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* Facade: a poster plus a play button that swaps in the real
   iframe on click, so an embed never costs the page its load. */
.bc-player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--bc-hair);
  cursor: pointer;
  width: 100%;
  padding: 0;
  display: block;
}
.bc-player img { width: 100%; height: 100%; object-fit: cover; }
.bc-player iframe { width: 100%; height: 100%; border: 0; display: block; }
/* No video matched yet: the cover holds the frame but must not
   pretend to be a play target. */
.bc-player--static { cursor: default; }
/* The show cover is square and the frame is 16:9, so letterbox it
   rather than cropping the wordmark off the top and bottom. */
.bc-player--static img { object-fit: contain; background: var(--bc-black); }
.bc-player--static .bc-player__scrim { background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.05) 55%); }

.bc-player__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.12) 55%);
  transition: background 0.35s var(--ease);
}
.bc-player:hover .bc-player__scrim { background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.05) 55%); }
.bc-player__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(245, 242, 235, 0.95);
  color: var(--bc-black);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  padding-left: 5px;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
.bc-player:hover .bc-player__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }

.bc-featured__meta { min-width: 0; }
.bc-featured__num {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  color: var(--bc-blue);
  line-height: 1;
  margin-bottom: 0.7rem;
}
.bc-featured__title {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--bc-cream);
}
.bc-featured__guest {
  margin-top: 0.7rem;
  font-size: 1.05rem;
  color: var(--bc-blue-lift);
}
.bc-featured__copy {
  margin-top: 1.2rem;
  font-size: 1.03rem;
  line-height: 1.65;
  color: var(--bc-dim);
}
.bc-featured__runtime {
  margin-top: 1.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bc-dim);
}
.bc-featured__links { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }

/* ============================================================
   EPISODE GRID
   ============================================================ */
.bc-episodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1.1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.bc-ep {
  display: flex;
  flex-direction: column;
  padding: 1.7rem 1.6rem 1.5rem;
  border: 1px solid var(--bc-hair);
  border-radius: 16px;
  background: rgba(245, 242, 235, 0.02);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease);
}
.bc-ep:hover {
  border-color: rgba(52, 114, 175, 0.6);
  background: rgba(52, 114, 175, 0.07);
  transform: translateY(-4px);
}
.bc-ep__num {
  font-size: 1.7rem;
  color: var(--bc-blue);
  line-height: 1;
  margin-bottom: 0.9rem;
}
.bc-ep__title {
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: var(--bc-cream);
}
.bc-ep__guest { margin-top: 0.45rem; font-size: 0.95rem; color: var(--bc-blue-lift); }
.bc-ep__copy {
  margin-top: 0.9rem;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--bc-dim);
  flex: 1;
}
.bc-ep__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bc-hair);
}
.bc-ep__runtime { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bc-dim); }
.bc-ep__play {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.95rem;
  color: var(--bc-cream);
}
.bc-ep__play::after { content: "›"; font-size: 1.25em; line-height: 0; transition: transform 0.3s var(--ease); }
.bc-ep:hover .bc-ep__play::after { transform: translateX(4px); }

/* ============================================================
   PRE-LAUNCH
   Shown instead of the episode sections while the feed is empty.
   ============================================================ */
.bc-soon {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.bc-soon__art {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--bc-hair);
  box-shadow: 0 40px 70px rgba(0, 0, 0, 0.6);
}
.bc-soon__art img { width: 100%; }
.bc-h2 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--bc-cream);
  margin: 1.3rem 0 1.4rem;
}
.bc-sub {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.65;
  color: var(--bc-dim);
  max-width: 48ch;
}

/* ============================================================
   NOTIFY / SUBSCRIBE
   ============================================================ */
.bc-notify { max-width: 560px; margin-top: 2rem; }
.bc-notify__row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.bc-notify input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  background: rgba(245, 242, 235, 0.05);
  border: 1px solid var(--bc-hair);
  border-radius: 980px;
  padding: 0.95em 1.4em;
  font: inherit;
  font-size: 1rem;
  color: var(--bc-cream);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.bc-notify input[type="email"]::placeholder { color: rgba(245, 242, 235, 0.42); }
.bc-notify input[type="email"]:focus {
  outline: none;
  border-color: var(--bc-blue);
  background: rgba(52, 114, 175, 0.09);
}
.bc-notify__note { margin-top: 0.95rem; font-size: 0.88rem; color: var(--bc-dim); }
.bc-notify__success { margin-top: 0.95rem; font-size: 0.95rem; color: var(--bc-blue-lift); }

/* ============================================================
   GUEST CALL
   ============================================================ */
.bc-guest {
  position: relative;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.6rem, 5vw, 4.5rem);
  border-radius: 22px;
  border: 1px solid var(--bc-hair);
  background:
    radial-gradient(circle at 82% 18%, rgba(52, 114, 175, 0.22), transparent 58%),
    var(--bc-panel);
  overflow: hidden;
}
.bc-guest__inner { position: relative; z-index: 2; max-width: 620px; }
.bc-guest__title {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  color: var(--bc-cream);
  margin: 1.2rem 0 1.3rem;
}
.bc-guest__copy { font-size: clamp(1rem, 1.45vw, 1.12rem); line-height: 1.65; color: var(--bc-dim); }
.bc-guest__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }
/* The chair, ghosted into the corner of the panel. */
.bc-guest__chair {
  position: absolute;
  right: -3%;
  bottom: -14%;
  width: min(42%, 380px);
  opacity: 0.17;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .bc-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .bc-platforms { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .bc-hero__inner { grid-template-columns: 1fr; text-align: left; }
  .bc-hero {
    min-height: auto;
    padding-top: calc(52px + clamp(2.5rem, 9vw, 4rem));
    padding-bottom: clamp(3.5rem, 10vw, 5rem);
  }
  .bc-hero__chair { max-width: 380px; margin-top: 2.8rem; order: 2; }
  .bc-hero__cue { display: none; }
  .bc-featured__grid { grid-template-columns: 1fr; }
  .bc-soon { grid-template-columns: 1fr; }
  .bc-soon__art { max-width: 400px; }
}

@media (max-width: 560px) {
  .bc-hero__actions .bc-btn,
  .bc-guest__actions .bc-btn,
  .bc-featured__links .bc-btn { flex: 1 1 100%; }
  .bc-notify__row .bc-btn { flex: 1 1 100%; }
  .bc-guest__chair { width: 56%; right: -10%; bottom: -8%; opacity: 0.12; }
  .bc-platform { padding: 1rem 1.1rem; }
}