/* Member Spotlight components: hub cards + article pages. Generated pages link this with ?v=. */
:root { --ease-out: cubic-bezier(0.32, 0.72, 0, 1); --label: #8A5300; }

/* ─── Shared: episode meta + buttons ─── */
.ep-meta {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--label);
}
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  padding: 12px 14px 12px 26px; transition: background .5s var(--ease-out), color .5s var(--ease-out), transform .3s var(--ease-out);
}
.btn-primary { background: #fff; color: #8B0000; }
.btn-primary:hover { background: #FDF3DC; }
.btn-ghost { border: 1px solid rgba(255,255,255,0.45); color: #fff; }
.btn-ghost:hover { border-color: #E8A020; color: #F0BC50; }
.btn-primary:active, .btn-ghost:active { transform: scale(0.98); }
.btn-primary .ico, .btn-ghost .ico {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(139,0,0,0.08); transition: transform .5s var(--ease-out);
}
.btn-ghost .ico { background: rgba(255,255,255,0.12); }
.btn-primary:hover .ico, .btn-ghost:hover .ico { transform: translate(3px, -1px); }
.ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ─── HUB ─── */
.ep-featured {
  display: grid; grid-template-columns: 7fr 5fr; gap: 0; background: var(--charcoal);
  margin-bottom: 3.5rem; position: relative; outline: 1px solid rgba(232,160,32,0.25); outline-offset: 8px;
}
.ep-featured .ep-thumb { aspect-ratio: 16/9; overflow: hidden; }
.ep-featured .ep-body { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.ep-featured .ep-meta { color: #E8A020; }
.ep-featured h3 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; color: #fff; margin: .75rem 0 1rem; }
.ep-featured p { color: rgba(255,255,255,0.78); line-height: 1.7; margin-bottom: 1.5rem; }
.ep-featured .ep-more { color: #F0BC50; }

.ep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 2.5rem; }
.ep-card { position: relative; display: flex; flex-direction: column; }
.ep-thumb { position: relative; display: block; overflow: hidden; background: #1A1A1A; aspect-ratio: 16/9; }
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease-out), opacity .6s var(--ease-out); }
.ep-card:hover .ep-thumb img, .ep-featured:hover .ep-thumb img { transform: scale(1.04); opacity: .85; }
.ep-thumb .ep-runtime {
  position: absolute; right: 10px; bottom: 10px; background: rgba(10,0,0,0.85); color: #fff;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .08em; padding: 3px 8px;
}
.ep-thumb .ep-play {
  position: absolute; left: 14px; bottom: 14px; width: 44px; height: 44px; background: #E8A020;
  display: flex; align-items: center; justify-content: center; transition: transform .5s var(--ease-out);
}
.ep-thumb .ep-play svg { width: 16px; height: 16px; fill: #4A0000; margin-left: 3px; }
.ep-card:hover .ep-play, .ep-featured:hover .ep-play { transform: scale(1.08); }
.ep-card .ep-body { padding-top: 1.1rem; }
.ep-card h3 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.35rem; line-height: 1.25; margin: .45rem 0 .55rem; color: var(--charcoal); }
.ep-card p { color: #4A4A4A; line-height: 1.65; font-size: 1rem; }
.ep-link { color: inherit; text-decoration: none; }
.ep-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.ep-link:hover { text-decoration: underline; text-decoration-color: #E8A020; text-underline-offset: 4px; }
.ep-more {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: #8B0000; margin-top: .75rem; display: inline-block;
}

.ep-shorts { margin-top: 4.5rem; padding-top: 3rem; border-top: 1px solid var(--border); display: grid; grid-template-columns: 4fr 8fr; gap: 2.5rem; align-items: center; }
.ep-shorts h3 { font-family: 'Playfair Display', serif; font-size: 1.35rem; line-height: 1.25; margin: .45rem 0 .55rem; }
.ep-shorts p { color: #4A4A4A; line-height: 1.65; }
.ep-shorts .ep-card .ep-body { padding-top: 0; }

.channel-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
  color: #8B0000; text-decoration: none; border-bottom: 1px solid #8B0000;
}
.channel-link:hover { color: #6B0000; border-color: #E8A020; }
.channel-link svg { width: 18px; height: 18px; fill: currentColor; }

/* ─── ARTICLE ─── */
.article-hero { background: var(--crimson-deeper); position: relative; overflow: hidden; padding: calc(68px + 3.5rem) 0 9rem; }
.article-hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #E8A020; }
.article-hero .container { position: relative; z-index: 2; max-width: 1040px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 2rem; }
.crumbs li { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.crumbs li + li::before { content: '/'; margin-right: 10px; color: rgba(232,160,32,0.7); }
.crumbs a { color: #F0BC50; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.article-hero .ep-meta { color: #E8A020; display: block; margin-bottom: 1.25rem; }
.article-hero h1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.06; color: #fff; max-width: 920px; margin-bottom: 1.5rem; }
.article-hero .dek { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.82); max-width: 760px; }

.player-wrap { max-width: 1040px; margin: -6.5rem auto 0; padding: 0 2rem; position: relative; z-index: 3; }
.player-frame { background: rgba(232,160,32,0.18); padding: 8px; }
.player { position: relative; aspect-ratio: 16/9; background: #0D0000; overflow: hidden; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-btn { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: #0D0000; display: block; }
.player-btn img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .82; transition: opacity .6s var(--ease-out), transform 1s var(--ease-out); }
.player-btn:hover img { opacity: .65; transform: scale(1.02); }
.player-btn .play {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%);
  background: #E8A020; display: flex; align-items: center; justify-content: center; transition: transform .5s var(--ease-out), background .4s var(--ease-out);
}
.player-btn:hover .play { transform: translate(-50%, -50%) scale(1.08); background: #F0BC50; }
.player-btn .play svg { width: 30px; height: 30px; fill: #4A0000; margin-left: 5px; }
.player-btn .play-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.25rem; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); color: #fff;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
}
.player-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; padding-top: .9rem; font-size: .95rem; color: #4A4A4A; }
.player-caption > a { color: #8B0000; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.player-caption span a { color: #8B0000; text-underline-offset: 3px; }
.player-caption > span { display: inline-flex; align-items: center; min-height: 44px; flex-wrap: wrap; gap: 0 .3em; }

.article-wrap { max-width: 1040px; margin: 0 auto; padding: 4rem 2rem 6rem; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 4.5rem; align-items: start; }
.article-body { max-width: 680px; font-size: 1.13rem; line-height: 1.85; color: #262626; }
.article-body p { margin-bottom: 1.4rem; }
.article-body .lede { font-size: 1.3rem; line-height: 1.7; color: #1A1A1A; }
.article-body .lede::first-letter { font-family: 'Playfair Display', serif; font-weight: 900; float: left; font-size: 4.2rem; line-height: .9; padding: 6px 10px 0 0; color: #8B0000; }
.article-body h2 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.7rem; line-height: 1.2; margin: 2.8rem 0 1rem; color: #1A1A1A; }
.article-body a { color: #8B0000; }
.article-body .note { font-size: .95rem; color: #555; border-left: 3px solid #E5E0D8; padding-left: 1rem; margin-top: 2.5rem; }

.takeaways { margin-top: 3.5rem; background: #FDF3DC; padding: 2.25rem 2.25rem 1.75rem; position: relative; }
.takeaways::before { content: ''; position: absolute; left: 0; top: 0; width: 64px; height: 4px; background: #8B0000; }
.takeaways h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; margin: 0 0 1.25rem; }
.takeaways ol { list-style: none; counter-reset: tk; }
.takeaways li { counter-increment: tk; position: relative; padding-left: 3rem; margin-bottom: 1.1rem; line-height: 1.65; font-size: 1.05rem; }
.takeaways li::before { content: counter(tk, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .05em; color: #8B0000; }

.about-box { position: sticky; top: 92px; background: #fff; border-top: 4px solid #E8A020; box-shadow: 0 24px 50px -30px rgba(74,0,0,0.35); padding: 1.75rem; }
.about-box .ep-meta { display: block; margin-bottom: .5rem; }
.about-box h2 { font-family: 'Playfair Display', serif; font-size: 1.45rem; line-height: 1.2; margin-bottom: .75rem; }
.about-box p { font-size: .98rem; line-height: 1.65; color: #4A4A4A; margin-bottom: 1rem; }
.about-box dl { margin: 0 0 1rem; }
.about-box dt { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #5A554E; margin-top: .6rem; }
.about-box dd { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.about-box dd a { color: #8B0000; display: inline-block; padding: 10px 0; min-height: 44px; }
.about-box .dir-link { display: inline-flex; align-items: center; min-height: 44px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #8B0000; border-top: 1px solid #E5E0D8; padding-top: .5rem; width: 100%; text-decoration: none; }
.about-box .dir-link:hover { color: #6B0000; text-decoration: underline; }

.spot-cta { background: #8B0000; padding: 5.5rem 0; position: relative; overflow: hidden; }
.spot-cta .container { position: relative; z-index: 2; max-width: 1040px; }
.spot-cta .eyebrow { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #F0BC50; margin-bottom: .9rem; }
.spot-cta h2 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.12; color: #fff; margin-bottom: 1rem; max-width: 720px; }
.spot-cta p { color: rgba(255,255,255,0.85); line-height: 1.8; max-width: 640px; margin-bottom: 2rem; font-size: 1.05rem; }
.spot-cta .actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.ep-nav { background: #FAF8F4; border-top: 1px solid #E5E0D8; }
.ep-nav .container { max-width: 1040px; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-top: 3rem; padding-bottom: 3rem; }
.ep-nav h2 { grid-column: 1 / -1; font-family: 'Playfair Display', serif; font-size: 1.5rem; }
.ep-nav a { display: block; text-decoration: none; color: #1A1A1A; padding: 1.25rem 0; border-top: 2px solid #1A1A1A; min-height: 44px; transition: border-color .4s var(--ease-out); }
.ep-nav a:hover { border-color: #8B0000; }
.ep-nav a:hover .t { color: #8B0000; }
.ep-nav .dir { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #8A5300; display: block; margin-bottom: .4rem; }
.ep-nav .t { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.ep-nav .next { text-align: right; }

/* Entry reveal (progressive: content is visible without JS) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1024px) {
  .article-wrap { grid-template-columns: 1fr; gap: 3rem; }
  .about-box { position: static; max-width: 680px; }
}
@media (max-width: 768px) {
  .ep-featured { grid-template-columns: 1fr; outline-offset: 4px; }
  .ep-featured .ep-body { padding: 1.5rem; }
  .ep-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ep-shorts { grid-template-columns: 1fr; gap: 1.25rem; }
  .article-hero { padding: calc(68px + 2rem) 0 6.5rem; }
  .player-wrap { margin-top: -4.5rem; padding: 0 1rem; }
  .player-frame { padding: 5px; }
  .player-btn .play { width: 64px; height: 64px; }
  .article-wrap { padding: 3rem 1rem 4rem; }
  .article-body { font-size: 1.06rem; }
  .article-body .lede { font-size: 1.15rem; }
  .takeaways { padding: 1.75rem 1.25rem 1.25rem; }
  .takeaways li { padding-left: 2.4rem; }
  .ep-nav .container { grid-template-columns: 1fr; }
  .ep-nav .next { text-align: left; }
  .spot-cta { padding: 4rem 0; }
}
.ep-shorts { position: relative; }
.ep-featured .ep-latest { margin-top: .4rem; color: #F0BC50; }