/*  Beyond the 341 — Brand Layer
 *  Loads after Hello Elementor and after Elementor's own frontend CSS.
 *  Every value here is generated from /agent/design-system.json. If you change a
 *  color or a size, change it there first, then mirror it here and in the
 *  Elementor Kit. Three places, one source of truth.
 * ------------------------------------------------------------------------- */

:root {
  /* Ground + ink */
  --bt-navy:        #001732;
  --bt-navy-raised: #0C2244;
  --bt-navy-line:   #1B3557;
  --bt-ivory:       #FAF5F0;
  --bt-cream:       #FCF8F3;
  --bt-sand-line:   #E6DDD1;
  --bt-ink:         #1B2A41;
  --bt-ink-muted:   #6E6459;

  /* Accents */
  --bt-copper:      #E04D28;
  --bt-copper-deep: #B93A18;
  --bt-gold:        #FCC324;
  --bt-teal:        #12897E;

  /* Type */
  --bt-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --bt-body:    "Source Sans 3", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Space */
  --bt-xs: 8px;  --bt-sm: 16px; --bt-md: 24px;
  --bt-lg: 40px; --bt-xl: 64px; --bt-2xl: 96px; --bt-3xl: 128px;
  --bt-container: 1180px;
  --bt-radius: 3px;

  /* Motion */
  --bt-ease: cubic-bezier(.2,.6,.2,1);
  --bt-dur: 180ms;
}

/* ---------- Base ---------------------------------------------------------- */

body {
  background: var(--bt-ivory);
  color: var(--bt-ink);
  font-family: var(--bt-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .bt-display {
  font-family: var(--bt-display);
  color: var(--bt-navy);
  letter-spacing: -.02em;
  font-weight: 600;
}

h1 { font-size: clamp(2.75rem, 5.2vw, 4.25rem); line-height: 1.06; }
h2 { font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.15; }
h3 { font-size: 1.375rem; line-height: 1.25; }
h4 { font-family: var(--bt-body); font-weight: 700; font-size: 1.0625rem; line-height: 1.35; color: var(--bt-navy); }

p { max-width: 68ch; }

a { color: var(--bt-navy); text-decoration-color: var(--bt-copper); text-underline-offset: .18em; }
a:hover { color: var(--bt-copper-deep); }

::selection { background: var(--bt-copper); color: #fff; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--bt-copper);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link — required for keyboard and screen-reader access */
.bt-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--bt-navy); color: var(--bt-ivory);
  padding: 12px 20px; font-weight: 700; text-decoration: none;
}
.bt-skip-link:focus { left: 0; }

/* ---------- Utility ------------------------------------------------------- */

.bt-eyebrow {
  font-family: var(--bt-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bt-copper);
  margin: 0 0 var(--bt-sm);
  display: block;
}
.bt-eyebrow--muted { color: var(--bt-ink-muted); }
.bt-eyebrow--ivory { color: rgba(250,245,240,.6); }

.bt-meta {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bt-ink-muted);
}

.bt-rule { height: 1px; background: var(--bt-sand-line); border: 0; margin: var(--bt-lg) 0; }
.bt-rule--navy { background: var(--bt-navy-line); }

.bt-em { font-style: italic; color: var(--bt-copper); }

.bt-lede { font-size: 1.0625rem; line-height: 1.65; color: var(--bt-ink); }

.bt-section { padding-block: var(--bt-2xl); }
.bt-section--navy { background: var(--bt-navy); color: var(--bt-ivory); }
.bt-section--navy h1,
.bt-section--navy h2,
.bt-section--navy h3 { color: var(--bt-ivory); }

@media (max-width: 1024px) { .bt-section { padding-block: 72px; } }
@media (max-width: 767px)  { .bt-section { padding-block: 56px; } }

/* ---------- Buttons ------------------------------------------------------- */

.bt-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--bt-body); font-size: .9375rem; font-weight: 700;
  line-height: 1; text-decoration: none; border-radius: var(--bt-radius);
  padding: 14px 26px; border: 1px solid transparent; cursor: pointer;
  transition: background var(--bt-dur) var(--bt-ease), color var(--bt-dur) var(--bt-ease);
}
.bt-btn--primary   { background: var(--bt-copper); color: #fff; }
.bt-btn--primary:hover   { background: var(--bt-copper-deep); color: #fff; }
.bt-btn--secondary { background: transparent; color: var(--bt-ink); border-color: var(--bt-ink); font-weight: 600; }
.bt-btn--secondary:hover { background: var(--bt-ink); color: var(--bt-ivory); }
.bt-btn--dark      { background: var(--bt-navy); color: var(--bt-ivory); }
.bt-btn--dark:hover      { background: var(--bt-navy-raised); color: var(--bt-ivory); }

/* ---------- Announcement bar --------------------------------------------- */

.bt-announce {
  background: var(--bt-ivory);
  border-bottom: 1px solid var(--bt-sand-line);
  font-size: .8125rem;
}
.bt-announce__inner {
  max-width: var(--bt-container); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bt-md); padding: 10px var(--bt-md); min-height: 38px;
}
.bt-announce__label {
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-size: .7rem; color: var(--bt-copper);
  display: inline-flex; align-items: center; gap: 8px;
}
.bt-announce__label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bt-copper); flex: none;
}
.bt-announce__text { color: var(--bt-ink-muted); }
.bt-announce__link { color: var(--bt-ink-muted); text-decoration: none; white-space: nowrap; }
.bt-announce__link:hover { color: var(--bt-copper-deep); }
@media (max-width: 900px) { .bt-announce__link, .bt-announce__text { display: none; } }

/* ---------- Episode card -------------------------------------------------- */

.bt-card {
  background: var(--bt-cream);
  border: 1px solid var(--bt-sand-line);
  border-radius: var(--bt-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--bt-dur) var(--bt-ease), transform var(--bt-dur) var(--bt-ease);
}
.bt-card:hover { border-color: var(--bt-navy); transform: translateY(-2px); }
.bt-card__media { position: relative; aspect-ratio: 16/9; background: var(--bt-navy); overflow: hidden; }
.bt-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-card__duration {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,23,50,.85); color: var(--bt-ivory);
  font-size: .6875rem; font-variant-numeric: tabular-nums;
  padding: 3px 7px; border-radius: 2px;
}
.bt-card__body { padding: var(--bt-md); display: flex; flex-direction: column; gap: 8px; }
.bt-card__meta { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bt-copper); font-weight: 700; }
.bt-card__title { font-family: var(--bt-display); font-size: 1.125rem; line-height: 1.3; color: var(--bt-navy); margin: 0; }
.bt-card__title a { text-decoration: none; color: inherit; }
.bt-card__guest { font-size: .875rem; color: var(--bt-ink-muted); margin: 0; }

.bt-grid { display: grid; gap: var(--bt-md); }
.bt-grid--4 { grid-template-columns: repeat(4, 1fr); }
.bt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bt-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) { .bt-grid--4, .bt-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .bt-grid--4, .bt-grid--3, .bt-grid--2 { grid-template-columns: 1fr; } }

/* ---------- Featured episode panel --------------------------------------- */

.bt-featured {
  background: var(--bt-cream);
  border: 1px solid var(--bt-sand-line);
  border-radius: var(--bt-radius);
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr 150px;
  gap: 0;
  overflow: hidden;
}
.bt-featured__media { background: var(--bt-navy); }
.bt-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-featured__body { padding: var(--bt-lg); }
.bt-featured__title { font-size: clamp(1.75rem, 2.4vw, 2.25rem); margin: 0 0 var(--bt-sm); }
.bt-featured__summary { color: var(--bt-ink); margin: 0 0 var(--bt-md); }
.bt-featured__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bt-sm); }
.bt-featured__rail {
  padding: var(--bt-lg) var(--bt-md);
  border-left: 1px solid var(--bt-sand-line);
  display: flex; flex-direction: column; gap: var(--bt-md);
}
.bt-featured__rail dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bt-copper); font-weight: 700; }
.bt-featured__rail dd { margin: 4px 0 0; font-weight: 700; color: var(--bt-navy); font-size: .9375rem; }
@media (max-width: 1024px) {
  .bt-featured { grid-template-columns: 1fr; }
  .bt-featured__rail { border-left: 0; border-top: 1px solid var(--bt-sand-line); flex-direction: row; flex-wrap: wrap; gap: var(--bt-lg); }
}

/* ---------- Pillar row ---------------------------------------------------- */

.bt-pillars { display: grid; grid-template-columns: repeat(5, 1fr); }
.bt-pillar { padding: 0 var(--bt-md); border-left: 1px solid var(--bt-sand-line); }
.bt-pillar:first-child { border-left: 0; padding-left: 0; }
.bt-pillar__icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--bt-ivory);
  margin-bottom: var(--bt-sm); font-size: 20px;
}
.bt-pillar:nth-child(5n+1) .bt-pillar__icon { background: var(--bt-teal); }
.bt-pillar:nth-child(5n+2) .bt-pillar__icon { background: var(--bt-gold); color: var(--bt-navy); }
.bt-pillar:nth-child(5n+3) .bt-pillar__icon { background: var(--bt-copper); }
.bt-pillar:nth-child(5n+4) .bt-pillar__icon { background: var(--bt-teal); }
.bt-pillar:nth-child(5n+5) .bt-pillar__icon { background: var(--bt-gold); color: var(--bt-navy); }
.bt-pillar h4 { margin: 0 0 6px; }
.bt-pillar p { font-size: .875rem; color: var(--bt-ink-muted); margin: 0; }
@media (max-width: 1024px) {
  .bt-pillars { grid-template-columns: repeat(2, 1fr); gap: var(--bt-lg) 0; }
  .bt-pillar:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) { .bt-pillars { grid-template-columns: 1fr; } .bt-pillar { border-left: 0; padding-left: 0; } }

/* ---------- Guest strip --------------------------------------------------- */

.bt-guests { display: flex; flex-wrap: wrap; gap: var(--bt-lg) var(--bt-md); }
.bt-guest { width: 92px; text-align: center; text-decoration: none; }
.bt-guest img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  filter: grayscale(1); transition: filter var(--bt-dur) var(--bt-ease);
  margin: 0 auto 10px; display: block;
}
.bt-guest:hover img { filter: grayscale(0); }
.bt-guest span { font-size: .8125rem; line-height: 1.3; color: var(--bt-ink); display: block; }

/* ---------- Newsletter panel ---------------------------------------------- */

.bt-newsletter { background: var(--bt-navy); color: var(--bt-ivory); padding: var(--bt-xl); }
.bt-newsletter h2 { color: var(--bt-ivory); }
.bt-newsletter p { color: rgba(250,245,240,.78); }
.bt-newsletter form { display: flex; gap: 10px; flex-wrap: wrap; margin: var(--bt-md) 0 10px; }
.bt-newsletter input[type="email"] {
  flex: 1 1 260px; background: var(--bt-ivory); border: 1px solid transparent;
  border-radius: var(--bt-radius); padding: 13px 16px; color: var(--bt-ink);
  font-family: var(--bt-body); font-size: .9375rem;
}
.bt-newsletter input[type="email"]::placeholder { color: var(--bt-ink-muted); }
.bt-newsletter small { color: rgba(250,245,240,.55); font-size: .75rem; }

/* ---------- Episode page -------------------------------------------------- */

.bt-episode__video { aspect-ratio: 16/9; background: var(--bt-navy); border-radius: var(--bt-radius); overflow: hidden; }
.bt-episode__video iframe { width: 100%; height: 100%; border: 0; display: block; }

.bt-takeaways { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bt-sm); counter-reset: bt-take; }
.bt-takeaways li {
  counter-increment: bt-take;
  background: var(--bt-cream); border: 1px solid var(--bt-sand-line);
  border-left: 3px solid var(--bt-copper);
  border-radius: var(--bt-radius); padding: var(--bt-sm) var(--bt-md) var(--bt-sm) 56px;
  position: relative; max-width: 68ch;
}
.bt-takeaways li::before {
  content: counter(bt-take, decimal-leading-zero);
  position: absolute; left: 18px; top: var(--bt-sm);
  font-family: var(--bt-display); font-size: 1.125rem; color: var(--bt-copper);
}

.bt-topics-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.bt-topics-list li { padding-left: 22px; position: relative; color: var(--bt-ink); }
.bt-topics-list li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 10px; height: 1px; background: var(--bt-copper);
}

.bt-chapters { border-top: 1px solid var(--bt-sand-line); }
.bt-chapter {
  display: grid; grid-template-columns: 76px 1fr; gap: var(--bt-sm);
  padding: 12px 0; border-bottom: 1px solid var(--bt-sand-line);
  align-items: baseline;
}
.bt-chapter__time {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: .875rem;
  color: var(--bt-copper); text-decoration: none;
}
.bt-chapter__label { color: var(--bt-ink); }

.bt-transcript {
  background: var(--bt-cream); border: 1px solid var(--bt-sand-line);
  border-radius: var(--bt-radius); padding: var(--bt-md);
}
.bt-transcript summary {
  cursor: pointer; font-weight: 700; color: var(--bt-navy);
  font-family: var(--bt-body); list-style: none;
}
.bt-transcript summary::-webkit-details-marker { display: none; }
.bt-transcript summary::after { content: " ↓"; color: var(--bt-copper); }
.bt-transcript[open] summary::after { content: " ↑"; }
.bt-transcript__body { margin-top: var(--bt-md); max-height: 520px; overflow-y: auto; padding-right: var(--bt-sm); }

.bt-guestbio {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--bt-md);
  background: var(--bt-cream); border: 1px solid var(--bt-sand-line);
  border-radius: var(--bt-radius); padding: var(--bt-md);
}
.bt-guestbio img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
@media (max-width: 560px) { .bt-guestbio { grid-template-columns: 1fr; } }

.bt-share { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bt-share a {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--bt-sand-line); border-radius: 50%;
  color: var(--bt-navy); text-decoration: none;
}
.bt-share a:hover { background: var(--bt-navy); color: var(--bt-ivory); border-color: var(--bt-navy); }

/* ---------- Topic hub ----------------------------------------------------- */

.bt-topic-tile {
  display: block; text-decoration: none;
  background: var(--bt-cream); border: 1px solid var(--bt-sand-line);
  border-radius: var(--bt-radius); padding: var(--bt-md);
  border-top: 3px solid var(--bt-copper);
  transition: transform var(--bt-dur) var(--bt-ease);
}
.bt-topic-tile:hover { transform: translateY(-2px); }
.bt-topic-tile h3 { margin: 0 0 6px; font-size: 1.25rem; }
.bt-topic-tile p { font-size: .875rem; color: var(--bt-ink-muted); margin: 0; }
.bt-topic-tile__count { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bt-copper); font-weight: 700; }

/* ---------- Footer -------------------------------------------------------- */

.bt-footer { background: var(--bt-navy); color: var(--bt-ivory); padding-block: var(--bt-xl) var(--bt-md); }
.bt-footer a { color: rgba(250,245,240,.82); text-decoration: none; }
.bt-footer a:hover { color: var(--bt-ivory); text-decoration: underline; text-decoration-color: var(--bt-copper); }
.bt-footer h5 {
  font-family: var(--bt-body); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(250,245,240,.55);
  margin: 0 0 var(--bt-sm); font-weight: 700;
}
.bt-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .9375rem; }
.bt-footer__legal {
  border-top: 1px solid var(--bt-navy-line); margin-top: var(--bt-lg);
  padding-top: var(--bt-md); display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: var(--bt-sm); font-size: .8125rem; color: rgba(250,245,240,.6);
}

/* ---------- Elementor bridges -------------------------------------------- */
/* Elementor emits its own wrappers. These keep our components intact inside
   containers without fighting Elementor's own spacing controls. */

.elementor-widget-container > .bt-card,
.elementor-widget-container > .bt-featured { height: 100%; }

.bt-e-reset .elementor-widget-container { margin: 0; }

/* ---------- Print --------------------------------------------------------- */

@media print {
  .bt-announce, .bt-footer, .bt-newsletter, .bt-share, .bt-skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .bt-transcript__body { max-height: none; overflow: visible; }
}

/* ---------- Reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .bt-card:hover, .bt-topic-tile:hover { transform: none; }
}