/* ============================================================
   Borderlands — components (generic + podcast-specific)
   ============================================================ */

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 247, 241, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nav--solid { border-bottom-color: var(--hairline); box-shadow: var(--shadow-sm); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav__logo { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--ink); }
.nav__logo span { color: var(--accent-text); }
.nav__links { display: flex; align-items: center; gap: var(--space-8); }
.nav__link { font-size: 0.98rem; font-weight: 500; color: var(--body); transition: color 0.18s; }
.nav__link:hover, .nav__link--active { color: var(--accent-text); }
.nav__cta { margin-left: var(--space-2); }
.nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--ink); }

.nav__overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--color-navy-950);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.nav__overlay.is-open { opacity: 1; pointer-events: auto; }
.nav__overlay a { color: #fff; font-size: 1.6rem; font-weight: 700; }
.nav__overlay a:hover { color: var(--color-gold-400); }
.nav__close { position: absolute; top: 22px; right: 24px; background: none; border: 0; color: #fff; cursor: pointer; padding: 8px; }

@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
}

/* ---------- Homepage hero (dark) ---------- */
.hero {
  background: radial-gradient(120% 120% at 50% 0%, var(--color-navy-800) 0%, var(--color-navy-950) 70%);
  color: #fff;
  padding: var(--space-24) 0 var(--space-20);
  text-align: center;
}
.hero h1 { color: #fff; max-width: 16ch; margin: 0 auto; }
.hero h1 em { color: var(--color-gold-400); font-style: normal; }
.hero__lead { color: var(--color-navy-100); font-size: 1.25rem; max-width: 60ch; margin: var(--space-6) auto 0; }

/* ---------- Platform pills ---------- */
.platforms { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-8); }
.platform {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: inherit; font-size: 0.92rem; font-weight: 600; color: #fff;
  padding: 0.6rem 1.05rem; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  cursor: pointer; transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.platform:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); transform: translateY(-2px); }
.platform svg { width: 18px; height: 18px; flex-shrink: 0; }
/* light variant for warm sections */
.platforms--light .platform { color: var(--ink); background: #fff; border-color: var(--hairline); }
.platforms--light .platform:hover { border-color: var(--accent); }

/* ---------- Inner-page hero (warm band) ---------- */
.phero { background: var(--bg-alt); border-bottom: 1px solid var(--hairline); padding: var(--space-12) 0 var(--space-12); }
.phero__breadcrumb { font-size: 0.9rem; color: var(--muted); margin-bottom: var(--space-5); display: flex; align-items: center; gap: 0.5rem; }
.phero__breadcrumb a { color: var(--muted); display: inline-flex; align-items: center; gap: 0.4rem; }
.phero__breadcrumb a:hover { color: var(--accent-text); }
.phero h1 { max-width: 22ch; }
.phero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-5); color: var(--muted); font-size: 0.98rem; }
.phero__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-warm-200); }
.phero__meta strong { color: var(--accent-text); font-weight: 600; }
.phero .lead { margin-top: var(--space-5); max-width: 64ch; }
.phero .lead a { color: var(--accent-text); text-decoration: underline; }
.phero__updated { color: var(--muted); font-size: 0.9rem; margin-top: var(--space-3); }

/* ---------- Share button ---------- */
.share-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: inherit; font-size: 0.92rem; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-full);
  padding: 0.45rem 0.95rem; cursor: pointer; transition: border-color 0.18s, color 0.18s;
}
.share-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.share-btn svg { width: 15px; height: 15px; }

/* ---------- Episode grid + cards ---------- */
.ep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .ep-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ep-grid { grid-template-columns: 1fr; } }

.ep-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ep-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-warm-200); }
.ep-card .thumb { aspect-ratio: 16/9; width: 100%; object-fit: cover; background: var(--color-navy-900); }
.ep-card .body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.ep-meta { font-size: 0.82rem; font-weight: 600; color: var(--accent-text); letter-spacing: 0.01em; margin-bottom: var(--space-2); }
.ep-card h3 { font-size: 1.2rem; line-height: 1.25; color: var(--ink); }
.ep-card p { font-size: 0.95rem; color: var(--muted); margin-top: var(--space-3); flex: 1; }
.ep-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--space-4); }
.ep-tag { font-size: 0.72rem; font-weight: 600; color: var(--body); background: var(--bg-alt); border: 1px solid var(--hairline); border-radius: var(--radius-full); padding: 0.2rem 0.6rem; }
.ep-card .more { margin-top: var(--space-4); font-size: 0.92rem; font-weight: 600; color: var(--accent-text); }

/* ---------- Episode two-column layout ---------- */
.ep-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-12); align-items: start; }
@media (max-width: 900px) { .ep-layout { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ---------- Media / audio ---------- */
.media-video { aspect-ratio: 16/9; width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: #000; box-shadow: var(--shadow-md); }
.media-video iframe { width: 100%; height: 100%; border: 0; }
.audio-player { margin-top: var(--space-6); }
.audio-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: var(--space-3); }

/* ---------- Speakers ---------- */
.speakers-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.speaker-chip { display: inline-flex; align-items: center; gap: 0.6rem; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-full); padding: 0.4rem 0.9rem 0.4rem 0.4rem; }
.speaker-chip img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.speaker-chip span { font-size: 0.92rem; font-weight: 600; color: var(--ink); }

/* ---------- Takeaways ---------- */
.takeaways { margin-top: var(--space-12); }
.takeaways h2 { margin-bottom: var(--space-6); }
.takeaways-list { display: flex; flex-direction: column; gap: var(--space-4); }
.takeaway-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.tk-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--color-gold-100); color: var(--accent-text); font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; }
.takeaway-item span:last-child { color: var(--body); line-height: 1.65; }

/* ---------- Key quotes ---------- */
.key-quotes { margin-top: var(--space-12); }
.key-quotes h2 { margin-bottom: var(--space-6); }
.quote-card { border-left: 3px solid var(--accent); border-radius: 0; padding: var(--space-2) 0 var(--space-2) var(--space-6); margin-bottom: var(--space-6); }
.quote-card blockquote { font-size: 1.18rem; line-height: 1.55; color: var(--ink); font-weight: 500; }
.quote-attr { display: flex; align-items: center; gap: 0.55rem; margin-top: var(--space-3); }
.quote-attr img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.quote-attr span { font-size: 0.9rem; font-weight: 600; color: var(--muted); }

/* ---------- Sidebar (chapters + download) ---------- */
.ep-sidebar { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: 88px; }
@media (max-width: 900px) { .ep-sidebar { position: static; } }
.sidebar-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-6); }
.sidebar-card h3 { font-size: 1.05rem; margin-bottom: var(--space-4); }
.chapter-list { display: flex; flex-direction: column; max-height: 460px; overflow-y: auto; }
.chapter-item { display: flex; gap: var(--space-3); align-items: baseline; padding: 0.5rem 0; border-top: 1px solid var(--hairline); cursor: pointer; transition: background 0.15s; }
.chapter-item:first-child { border-top: 0; }
.chapter-item:hover { background: var(--bg-alt); }
.chapter-time { flex-shrink: 0; font-size: 0.82rem; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; min-width: 42px; }
.chapter-title { font-size: 0.9rem; color: var(--body); line-height: 1.4; }

/* ---------- Download card (seal-style) ---------- */
.download-card { background: var(--color-gold-100); border: 1px solid #EAD9A6; border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; }
.download-card .dl-icon { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--accent-text); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); }
.download-card h3 { font-size: 1.1rem; margin-bottom: var(--space-2); }
.download-card p { font-size: 0.9rem; color: var(--body); }
.dl-btn { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: var(--space-4); background: var(--color-navy-900); color: #fff; font-weight: 600; font-size: 0.95rem; padding: 0.7rem 1.2rem; border-radius: var(--radius-md); transition: background 0.18s, transform 0.18s; }
.dl-btn:hover { background: var(--color-navy-800); transform: translateY(-2px); }
.dl-free { margin-top: var(--space-3); font-size: 0.78rem; color: var(--muted); }

/* ---------- Subscribe bar (platform pills, light) ---------- */
.subscribe-bar { margin-top: var(--space-16); padding: var(--space-8); background: var(--bg-alt); border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.subscribe-bar h3 { font-size: 1.2rem; margin-bottom: var(--space-5); }
.sub-platform-list { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.sub-platform-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-full); padding: 0.55rem 1rem; transition: border-color 0.18s, transform 0.18s; }
.sub-platform-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.sub-platform-item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Subscribe form ---------- */
.subscribe { background: var(--color-navy-900); color: #fff; }
.subscribe .inner { max-width: 560px; margin: 0 auto; text-align: center; padding: var(--space-20) 24px; }
.subscribe h2 { color: #fff; }
.subscribe .sub { color: var(--color-navy-100); margin: var(--space-3) 0 var(--space-8); }
.form-input { width: 100%; font-family: inherit; font-size: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--color-navy-700); background: var(--color-navy-950); color: #fff; margin-bottom: var(--space-3); }
.form-input::placeholder { color: var(--color-navy-300); }
.form-input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.consent-label { display: flex; gap: 0.6rem; align-items: flex-start; text-align: left; font-size: 0.85rem; color: var(--color-navy-100); margin-bottom: var(--space-5); }
.consent-label a { color: var(--color-gold-400); text-decoration: underline; }
.subscribe .btn-primary { width: 100%; background: var(--accent); color: var(--color-navy-950); border: 0; font-family: inherit; font-weight: 700; font-size: 1.02rem; padding: 0.9rem; border-radius: var(--radius-md); cursor: pointer; transition: background 0.18s; }
.subscribe .btn-primary:hover { background: var(--accent-hover); }
.subscribe .btn-primary:disabled { opacity: 0.6; cursor: default; }
.form-msg { margin-top: var(--space-3); font-size: 0.9rem; min-height: 1.2em; }

/* ---------- Donate bar ---------- */
.donate-bar { background: var(--color-gold-100); border-top: 1px solid #EAD9A6; border-bottom: 1px solid #EAD9A6; }
.donate-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-8) 0; flex-wrap: wrap; }
.donate-bar strong { display: block; font-size: 1.15rem; color: var(--ink); font-weight: 800; }
.donate-bar span { font-size: 0.92rem; color: var(--body); }
.btn-donate { display: inline-flex; align-items: center; background: var(--color-navy-900); color: #fff; font-weight: 700; padding: 0.8rem 1.6rem; border-radius: var(--radius-md); transition: background 0.18s, transform 0.18s; }
.btn-donate:hover { background: var(--color-navy-800); transform: translateY(-2px); }

/* ---------- People / speakers ---------- */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .people { grid-template-columns: 1fr; } }
.person { display: block; text-align: left; }
.person__photo { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-lg); background: var(--bg-alt); border: 1px solid var(--hairline); }
.person__name { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-top: var(--space-4); }
.person__role { font-size: 0.85rem; font-weight: 600; color: var(--accent-text); margin-top: 0.15rem; }
.person__bio { font-size: 0.9rem; color: var(--muted); margin-top: var(--space-2); line-height: 1.5; }
a.person:hover .person__name { color: var(--accent-text); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 1.1rem; font-weight: 700; color: var(--ink); text-align: left; padding: var(--space-5) 0; }
.faq-q svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent-text); transition: transform 0.2s ease; }
.faq-q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; color: var(--body); line-height: 1.7; transition: max-height 0.25s ease, padding 0.25s ease; }
.faq-a.open { max-height: 400px; padding-bottom: var(--space-5); }

/* ---------- Prose (about / privacy) ---------- */
.prose { max-width: 68ch; }
.prose--center { margin-left: auto; margin-right: auto; }
.prose h2 { margin: var(--space-10) 0 var(--space-4); }
.prose h3 { margin: var(--space-8) 0 var(--space-3); }
.prose p { margin-bottom: var(--space-4); line-height: 1.75; }
.prose ul { margin: 0 0 var(--space-4) var(--space-5); }
.prose ul li { list-style: disc; margin-bottom: var(--space-2); }
.prose a { color: var(--accent-text); text-decoration: underline; }
.prose blockquote { border-left: 3px solid var(--accent); padding-left: var(--space-5); margin: var(--space-6) 0; font-size: 1.25rem; color: var(--ink); font-weight: 500; }

/* ---------- CTA band ---------- */
.cta { background: var(--bg-alt); text-align: center; }
.cta__inner { max-width: 640px; margin: 0 auto; }
.cta p { font-size: 1.15rem; color: var(--muted); margin: var(--space-3) 0 var(--space-8); }
.cta__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ---------- View count (episode meta) ---------- */
.view-count { display: inline-flex; align-items: center; gap: 0.4rem; }
.view-count svg { width: 15px; height: 15px; }

/* ---------- Transcript ---------- */
.transcript-container { margin-top: var(--space-12); background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
.transcript-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 1.1rem; font-weight: 700; color: var(--ink); text-align: left; padding: var(--space-5) var(--space-6); }
.transcript-toggle svg { width: 20px; height: 20px; color: var(--accent-text); transition: transform 0.2s ease; flex-shrink: 0; }
.transcript-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.transcript-body { display: none; padding: 0 var(--space-6); }
.transcript-body.open { display: block; padding-bottom: var(--space-4); border-top: 1px solid var(--hairline); }
.transcript-entry { display: flex; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--hairline); }
.transcript-entry:last-child { border-bottom: 0; }
.transcript-entry img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.transcript-speaker { font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.transcript-time { margin-left: 0.6rem; font-size: 0.8rem; font-weight: 600; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.transcript-text { margin-top: 0.35rem; color: var(--body); line-height: 1.7; font-size: 0.95rem; }

/* ---------- About page ---------- */
.about-band { padding: var(--space-20) 0; }
.about-band--alt { background: var(--bg-alt); }
.about-band h2 { margin-bottom: var(--space-3); }
.about-band-sub { color: var(--muted); font-size: 1.1rem; max-width: 72ch; margin-bottom: var(--space-8); }
.about-band-sub a { color: var(--accent-text); text-decoration: underline; }
.about-mission-text { max-width: 68ch; }
.about-mission-text p { margin-bottom: var(--space-4); line-height: 1.75; font-size: 1.05rem; }
.about-mission-text a { color: var(--accent-text); text-decoration: underline; }

.about-hosts { display: grid; gap: var(--space-6); }
.about-host-card { display: flex; gap: var(--space-5); background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-6); }
@media (max-width: 560px) { .about-host-card { flex-direction: column; } }
.about-host-card img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.about-host-card h3 { font-size: 1.2rem; }
.about-host-role { color: var(--accent-text); font-weight: 600; font-size: 0.9rem; margin: 0.15rem 0 var(--space-3); }
.about-host-card p { color: var(--body); line-height: 1.7; font-size: 0.96rem; }
.about-host-card a { color: var(--accent-text); text-decoration: underline; }

.credibility-grid, .program-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .credibility-grid, .program-grid { grid-template-columns: 1fr; } }
.credibility-card { background: var(--color-gold-100); border: 1px solid #EAD9A6; border-radius: var(--radius-lg); padding: var(--space-6); }
.credibility-card p { font-size: 1.08rem; color: var(--ink); font-weight: 500; line-height: 1.5; }
.credibility-card cite { display: block; margin-top: var(--space-4); font-style: normal; font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.credibility-card cite strong { color: var(--ink); }
.credibility-card a { color: var(--accent-text); text-decoration: underline; }

.resource-cards { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 520px); }
.resource-card, .program-card { display: block; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-6); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.resource-card:hover, .program-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-warm-200); }
.resource-icon, .program-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-gold-100); color: var(--accent-text); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.resource-card h3, .program-card h3 { font-size: 1.15rem; }
.resource-card p, .program-card p { color: var(--muted); font-size: 0.95rem; margin-top: var(--space-2); line-height: 1.6; }
.resource-card .more { display: inline-block; margin-top: var(--space-3); color: var(--accent-text); font-weight: 600; font-size: 0.92rem; }

/* ---------- Footer ---------- */
.footer { background: var(--color-navy-950); color: var(--color-navy-100); padding: var(--space-16) 0 var(--space-8); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); } }
.footer__brand-name { font-weight: 800; font-size: 1.1rem; color: #fff; }
.footer__brand-name span { color: var(--color-gold-400); }
.footer__tag { margin-top: var(--space-3); font-size: 0.92rem; color: var(--color-navy-300); max-width: 32ch; }
.footer h4 { color: #fff; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-4); }
.footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__links a { color: var(--color-navy-100); font-size: 0.95rem; transition: color 0.18s; }
.footer__links a:hover { color: var(--color-gold-400); }
.footer__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--color-navy-800); font-size: 0.85rem; color: var(--color-navy-300); }
.footer__bar a { color: var(--color-navy-100); }
.footer__bar a:hover { color: var(--color-gold-400); }