/* Generated by scripts/build-media-polish.mjs. Edit the source layers, then rebuild. */

/* src/media-editorial.css */
/*
 * Shared editorial refinements for media hubs and detail pages.
 * Loaded by MediaHeader so every episode and guest detail inherits the same
 * visual language without editing dozens of generated/static HTML entries.
 */

.media-site-header .button,
.detail-actions .button,
.focused-result-action .button {
  border-radius: 4px;
  box-shadow: none;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.detail-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(36, 75, 115, .28), transparent 34%),
    linear-gradient(120deg, #030914, #081a30 72%, #0b223d);
}

.detail-hero h1 {
  text-shadow: none;
}

.video-frame {
  border-color: rgba(216, 184, 102, .22);
  box-shadow: 0 18px 48px rgba(3, 12, 28, .2);
}

.guest-monogram,
.guest-monogram-large {
  border-radius: 4px;
  background: #0b1d38;
  box-shadow: none;
}

.related-section h2 {
  border-bottom-color: rgba(216, 184, 102, .16);
}

.related-conversation-card {
  border-color: rgba(189, 150, 63, .24);
  border-radius: 6px;
  background: #fffaf1;
  box-shadow: none;
}

.related-conversation-card::before {
  display: none;
}

.related-conversation-card:hover,
.related-conversation-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(189, 150, 63, .42);
  box-shadow: none;
}

.related-conversation-thumb {
  border-color: rgba(156, 116, 43, .22);
  border-radius: 4px;
  box-shadow: none;
}

.related-conversation-action {
  letter-spacing: .03em;
}

/* Taxonomy chips remain rounded because the shape communicates metadata,
   rather than serving as general-purpose decoration. */
.tag-list li {
  box-shadow: none;
}

@media (max-width: 640px) {
  .related-conversation-card {
    border-radius: 4px;
  }

  .video-frame {
    box-shadow: 0 12px 30px rgba(3, 12, 28, .18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .related-conversation-card:hover,
  .related-conversation-card:focus-visible {
    transform: none;
  }
}

/* src/visual-qa-refinement.css */
/*
 * Recording-led visual QA refinements.
 *
 * This layer is intentionally narrow: it fixes issues observed in desktop and
 * mobile screen recordings without changing content architecture, SEO, data,
 * or publishing behavior.
 */

html,
body {
  background-color: #030914;
}

/* Dense archive surfaces should be immediately readable while scrolling.
   Entrance motion on repeated cards created blank/faded states in recordings. */
.media-card[data-reveal],
.guest-card[data-reveal],
.topic-card[data-reveal],
.media-section-heading[data-reveal],
.guest-results-section [data-reveal],
.related-section [data-reveal],
.topics-cta-inner[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}

.media-card,
.guest-card,
.topic-card,
.related-conversation-card {
  box-shadow: none;
}

/* Media hub mastheads should establish the page without consuming a third of
   a desktop viewport. Detail pages retain their larger title treatment. */
.media-hero:not(.topics-hero) {
  padding-top: 86px;
  padding-bottom: 38px;
}

/* Topic collections should read as an editorial index rather than a grid of
   decorative app cards. */
.topics-hero::before,
.topics-hero::after,
.topics-section::before {
  display: none;
}

.topic-card {
  min-height: 188px;
  border-radius: 4px;
  background: #fffdf8;
  box-shadow: none;
}

.topic-card::before,
.topic-card::after {
  display: none;
}

.topic-card:hover,
.topic-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: none;
}

/* Guest cards keep the useful directory structure while losing the CRM/app
   appearance. */
.guest-card {
  border-radius: 4px;
  background: #fffdf8;
}

.guest-card h3 {
  margin-bottom: 8px;
}

.guest-monogram,
.guest-monogram-large {
  border-radius: 3px;
  box-shadow: none;
}

.guest-detail-intro {
  padding-block: 20px 12px;
  gap: 18px;
}

/* Alphabetical controls stay highly usable without reading as 27 miniature
   app buttons. */
.alphabet-nav {
  gap: 3px;
  border-bottom: 1px solid rgba(20, 35, 58, .1);
}

.alphabet-nav button {
  width: auto;
  min-width: 31px;
  height: 34px;
  padding-inline: 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
}

.alphabet-nav button[aria-pressed="true"] {
  color: var(--navy-900);
  border-color: var(--gold-500);
  background: transparent;
}

.alphabet-nav button:disabled {
  opacity: .24;
}

/* Long episode titles should remain editorial rather than becoming a wall of
   type at the top of a detail page. */
.detail-hero h1 {
  max-width: 900px;
  text-wrap: balance;
}

/* Homepage feature: retain the large editorial moment while removing excess
   vertical weight seen in the Phase 7 desktop recording. */
.watch-section > .shell > .section-heading {
  margin-bottom: clamp(22px, 2vw, 30px);
}

.featured-meta {
  padding-top: clamp(21px, 2.2vw, 30px);
  padding-bottom: clamp(21px, 2.2vw, 30px);
}

.featured-meta h3 {
  max-width: 760px;
  font-size: clamp(1.9rem, 2.65vw, 2.8rem);
  line-height: 1.02;
  text-wrap: balance;
}

/* Candidate Special remains important, but should not visually outweigh the
   show's editorial content. */
.current-special {
  padding-block: clamp(32px, 4vw, 50px);
}

.current-special-copy {
  padding-top: clamp(30px, 3.4vw, 46px);
  padding-bottom: clamp(30px, 3.4vw, 46px);
}

.current-special-copy h2 {
  max-width: 840px;
}

.current-special-lede,
.current-special-broadcast,
.current-special-urgency {
  max-width: 820px;
}

/* Stepping Up is a recurring editorial franchise. Let the names and stories
   read like a curated index rather than another collection of boxed widgets. */
.organization-grid {
  gap: 0 32px;
  border-top: 1px solid rgba(216, 184, 102, .18);
}

.organization-card,
.organization-callout {
  min-height: 0;
  padding: 20px 0 19px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0;
  background: transparent;
}

.organization-card:hover,
.organization-card:focus-within {
  transform: none;
  border-color: rgba(216, 184, 102, .18);
  background: rgba(255, 255, 255, .018);
}

.organization-card h3 {
  margin-top: 7px;
}

.organization-card p {
  margin-top: 8px;
}

.organization-card a {
  margin-top: 13px;
}

/* Partnership options should read like an editorial offering index, not four
   SaaS/service cards. */
.partner-menu {
  grid-template-columns: 1fr;
  gap: 0;
  align-content: start;
  border-top: 1px solid rgba(216, 184, 102, .22);
}

.partner-menu article {
  min-height: 0;
  padding: 19px 0 18px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 15px;
  row-gap: 3px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  border-radius: 0;
  background: transparent;
}

.partner-menu article > span {
  grid-row: 1 / 3;
  align-self: start;
  padding-top: 3px;
  color: var(--gold-400);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.partner-menu strong {
  margin-top: 0;
  font-size: 1.35rem;
  line-height: 1.05;
}

.partner-menu small {
  margin-top: 3px;
  max-width: 520px;
  font-size: .72rem;
  line-height: 1.48;
}

/* Footer remains quiet, but not at the expense of legibility. */
.footer-brand > p {
  font-size: .8rem;
}

.footer-links a {
  font-size: .78rem;
}

.footer-heard small,
.footer-heard a {
  font-size: .72rem;
}

.footer-bottom {
  font-size: .68rem;
}

/* Desktop directory hubs use the same publication-index language as mobile:
   two readable columns, fine rules, and restrained monograms instead of tiles. */
@media (min-width: 760px) {
  .topics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 38px;
    border-top: 1px solid rgba(20, 35, 58, .12);
  }

  .topic-card {
    min-height: 0;
    padding: 25px 2px 23px;
    border: 0;
    border-bottom: 1px solid rgba(20, 35, 58, .12);
    border-radius: 0;
    background: transparent;
  }

  .topic-card:hover,
  .topic-card:focus-visible {
    transform: none;
    background: rgba(255, 255, 255, .24);
  }

  .topic-card h2 {
    font-size: clamp(1.8rem, 2.15vw, 2.35rem);
  }

  .guest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 38px;
    border-top: 1px solid rgba(20, 35, 58, .12);
  }

  .guest-card {
    padding: 23px 2px;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 15px;
    border: 0;
    border-bottom: 1px solid rgba(20, 35, 58, .12);
    border-radius: 0;
    background: transparent;
  }

  .guest-monogram {
    width: 58px;
    height: 58px;
    font-size: 1.08rem;
  }

  .guest-card h3 {
    margin-bottom: 5px;
    font-size: clamp(1.55rem, 1.8vw, 1.9rem);
    line-height: 1.03;
  }
}

/* At full desktop width, Recent Conversations should look intentionally
   curated: four complete cards, no chopped fifth card or visible carousel. */
@media (min-width: 1100px) {
  .episode-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 18px;
    overflow: visible;
    scroll-snap-type: none;
    scrollbar-width: none;
  }

  .episode-rail::-webkit-scrollbar {
    display: none;
  }

  .episode-rail > .episode-card:nth-child(n + 5) {
    display: none;
  }

  .episode-rail .episode-card {
    width: auto;
    min-width: 0;
  }

  /* The artwork and title are enough on a homepage scan. Removing excerpts
     makes four cards feel like editorial recommendations rather than mini pages. */
  .watch-section .episode-rail .episode-body > p {
    display: none;
  }

  .watch-section .episode-rail .episode-body {
    padding: 16px 16px 18px;
  }

  .watch-section .episode-rail .episode-body h3 {
    font-size: 1.28rem;
    line-height: 1.08;
  }
}

@media (max-width: 680px) {
  /* Shorter mobile chrome gives content more room while preserving tap size. */
  .header-inner {
    height: 56px;
  }

  .brand-seal {
    width: 36px;
    height: 36px;
  }

  .menu-button {
    width: 38px;
    height: 38px;
  }

  .primary-nav {
    inset-block-start: 56px;
  }

  html {
    scroll-padding-top: 72px;
  }

  /* topics.css previously reduced this to 42px, which put the first content
     underneath the fixed 60px mobile header. */
  .topics-hero {
    padding-top: 92px;
  }

  .media-hero,
  .detail-hero {
    padding-top: 92px;
  }

  /* On phones, Topics becomes a publication-style vertical index. */
  .topics-grid {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid rgba(20, 35, 58, .12);
  }

  .topic-card {
    min-height: 0;
    padding: 21px 2px 19px;
    border: 0;
    border-bottom: 1px solid rgba(20, 35, 58, .12);
    border-radius: 0;
    background: transparent;
  }

  .topic-card:hover,
  .topic-card:focus-visible {
    transform: none;
    background: rgba(255, 255, 255, .28);
  }

  .topic-card-footer {
    margin-top: 17px;
  }

  /* Preserve alphabetical/search functionality, but present each guest as a
     compact editorial index entry instead of a large profile tile. */
  .guest-grid {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid rgba(20, 35, 58, .12);
  }

  .guest-card {
    padding: 19px 2px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    border: 0;
    border-bottom: 1px solid rgba(20, 35, 58, .12);
    border-radius: 0;
    background: transparent;
  }

  .guest-monogram {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }

  .guest-card h3 {
    margin-bottom: 5px;
    font-size: 1.58rem;
    line-height: 1.04;
  }

  .guest-card p:last-child a {
    font-size: .73rem;
  }

  .guest-detail-intro {
    padding-block: 14px 4px;
    gap: 14px;
  }

  .guest-monogram-large {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
    font-size: 1.45rem;
  }

  .detail-hero h1 {
    font-size: clamp(2.2rem, 10.4vw, 3.15rem);
    line-height: 1.01;
  }

  /* On mobile, keep the recent-conversation rail swipeable and preserve all
     recent items; only full desktop receives the curated four-card view. */
  .episode-rail > .episode-card:nth-child(n + 5) {
    display: block;
  }

  .partner-menu article {
    padding-block: 17px;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 12px;
  }

  .partner-menu strong {
    font-size: 1.24rem;
  }

  .current-special {
    padding-block: 18px 25px;
  }

  .organization-grid {
    gap: 0;
  }

  .organization-card,
  .organization-callout {
    padding-block: 18px;
  }

  .alphabet-nav {
    gap: 1px;
  }

  .alphabet-nav button {
    min-width: 29px;
    padding-inline: 5px;
  }

  .footer-links a {
    font-size: .8rem;
  }

  .footer-bottom {
    font-size: .7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topic-card,
  .guest-card,
  .media-card,
  .related-conversation-card {
    transform: none !important;
    transition: none !important;
  }
}

/* src/mobile-qa-final.css */
/* Final mobile QA fixes observed in the August 9 phone recordings. */

/* Entire archive sections should never fade to blank while the user is already
   scrolling them. Repeated cards are intentionally immediate on media hubs. */
.media-section[data-reveal],
.archive-section[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}

.mobile-listen-live {
  display: none;
}

@media (max-width: 960px) {
  /* Make mobile navigation a true navigation layer instead of a short dropdown
     that can expose footer/content navigation beneath it. */
  .primary-nav {
    inset: 64px 0 0;
    min-height: calc(100dvh - 64px);
    padding: 18px 22px 30px;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #030914;
    border-bottom: 0;
  }

  .primary-nav a {
    padding-block: 15px;
  }

  .primary-nav .mobile-listen-live {
    min-height: 46px;
    margin-top: 18px;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-1000);
    border: 1px solid var(--gold-400);
    border-radius: 4px;
    background: var(--gold-400);
    font-weight: 800;
    letter-spacing: .03em;
  }

  .primary-nav .mobile-listen-live::after {
    display: none;
  }
}

@media (max-width: 680px) {
  .primary-nav {
    inset: 56px 0 0;
    min-height: calc(100dvh - 56px);
  }

  /* Restore the restrained detail-page mobile scale. The visual-QA layer is
     loaded later than detail-page.js and was unintentionally enlarging long
     episode headlines enough to dominate most of the phone viewport. Keep the
     editorial scale, but preserve enough first-screen space for context/video. */
  body[data-detail-type="episode"] .detail-hero h1 {
    font-size: clamp(1.9rem, 9vw, 2.55rem);
    line-height: 1.04;
  }
}

/* src/archive-character.css */
/* Brand character around archive discovery. Intentionally uses the existing
   editorial serif in italic rather than adding a decorative webfont. */

.archive-signature {
  color: var(--navy-900);
  background: var(--ivory-100);
  border-top: 1px solid rgba(20, 35, 58, .08);
  border-bottom: 1px solid rgba(20, 35, 58, .1);
}

/* The Topics breadcrumb sits directly above the masthead. Keep the breadcrumb
   readable, but remove the default anchor underline that reads as a stray rule
   in the otherwise uninterrupted navy hero field. */
.topics-hero .breadcrumbs a {
  text-decoration: none;
}

.archive-signature-inner {
  padding: clamp(30px, 4.5vw, 54px) 0;
  display: grid;
  grid-template-columns: minmax(140px, .32fr) minmax(0, 1.68fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}

.archive-signature-kicker {
  margin: 0;
  color: var(--gold-600);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.archive-signature-quote {
  max-width: 1040px;
  margin: 0;
  color: var(--navy-900);
  font-family: var(--serif);
  font-size: clamp(2.15rem, 3.8vw, 4.05rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.archive-signature-quote span {
  color: var(--gold-600);
  font-size: .68em;
  font-style: normal;
  letter-spacing: -.02em;
}

.archive-signature-quote em {
  font-style: italic;
  font-weight: 400;
}

.guest-directory-discovery {
  max-width: 390px;
  color: var(--muted);
  font-size: .79rem;
  line-height: 1.5;
}

.guest-directory-discovery a {
  color: var(--navy-800);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .archive-signature-inner {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 28px 0 31px;
  }

  .archive-signature-quote {
    font-size: clamp(2rem, 9.8vw, 2.8rem);
    line-height: 1.01;
  }

  .archive-signature-quote span {
    display: block;
    margin-bottom: 4px;
    font-size: .58em;
  }

  .guest-directory-discovery {
    max-width: none;
    margin-top: 8px;
  }
}

/* src/flagship-polish.css */
/* Premium visual rhythm for the existing brand and its integrated library. */
.site-header::after{content:"";height:1px;position:absolute;inset:auto 0 -1px;pointer-events:none;background:linear-gradient(90deg,transparent 3%,rgba(216,184,102,.12) 20%,rgba(216,184,102,.48) 50%,rgba(216,184,102,.12) 80%,transparent 97%)}
.header-inner{height:72px}.brand-copy strong{letter-spacing:.005em}.brand-copy span{color:var(--gold-300);letter-spacing:.16em}.primary-nav{gap:clamp(8px,1vw,16px)}.primary-nav a{letter-spacing:.045em}

/* Homepage: preserve its words and imagery while increasing presence. */
body:has(.hero#home) .hero{min-height:min(900px,calc(100svh - 2px))}
body:has(.hero#home) .hero-grid{min-height:min(900px,calc(100svh - 2px));padding-top:116px;padding-bottom:72px}
body:has(.hero#home) .hero::before{content:"";width:min(780px,55vw);aspect-ratio:1;position:absolute;right:-15%;top:-35%;pointer-events:none;border:1px solid rgba(216,184,102,.08);border-radius:50%;box-shadow:0 0 0 80px rgba(216,184,102,.018),0 0 0 160px rgba(216,184,102,.012)}
body:has(.hero#home) .hero-copy{padding-bottom:12px}body:has(.hero#home) .title-small{margin-bottom:9px}body:has(.hero#home) .title-main{font-size:clamp(5.6rem,8.5vw,8.35rem)}body:has(.hero#home) .title-show{margin-top:13px}
body:has(.hero#home) .hero-line{max-width:680px;font-size:clamp(1.7rem,2.6vw,2.48rem);line-height:1.08}body:has(.hero#home) .hero-intro{max-width:640px;font-size:1rem}body:has(.hero#home) .hero-actions{margin-top:29px}
body:has(.hero#home) .hero-credentials{padding-top:17px;border-top:1px solid rgba(216,184,102,.17)}body:has(.hero#home) .portrait-stage{width:min(100%,500px)}body:has(.hero#home) .portrait-frame{box-shadow:0 36px 90px rgba(0,0,0,.31),0 0 0 1px rgba(216,184,102,.08)}body:has(.hero#home) .portrait-caption{bottom:28px}
.watch-section{position:relative}.watch-section::before{content:"THE ALANA SHOW";position:absolute;right:3vw;top:18px;color:rgba(255,255,255,.018);font:400 clamp(4rem,10vw,10rem)/1 var(--serif);letter-spacing:-.04em;pointer-events:none}.watch-section>.shell{position:relative;z-index:1}

/* Episodes masthead. */
.flagship-archive-hero.media-hero{min-height:510px;padding:132px 0 66px;display:flex;align-items:flex-end;position:relative;overflow:hidden;background:radial-gradient(circle at 82% 20%,rgba(43,91,137,.32),transparent 32%),radial-gradient(circle at 18% 2%,rgba(216,184,102,.08),transparent 28%),linear-gradient(118deg,#020812 0%,#07162a 55%,#0c2745 100%)}
.flagship-archive-hero::before{content:"";width:620px;height:620px;position:absolute;right:-130px;bottom:-390px;border:1px solid rgba(216,184,102,.12);border-radius:50%;box-shadow:0 0 0 54px rgba(216,184,102,.025),0 0 0 108px rgba(216,184,102,.015)}
.flagship-archive-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:78px 78px;mask-image:linear-gradient(90deg,black,transparent 88%)}
.flagship-archive-hero .media-hero-inner{width:100%;max-width:1180px;position:relative;z-index:1;text-align:left}.flagship-archive-hero .breadcrumbs{margin-bottom:46px}.flagship-archive-hero .breadcrumbs ol{justify-content:flex-start}
.flagship-archive-hero h1{max-width:900px;margin-bottom:19px;font-size:clamp(5rem,9vw,8.7rem);font-weight:400;line-height:.82;letter-spacing:-.055em}.flagship-archive-hero p:last-of-type{max-width:720px;margin-inline:0;color:#c9d2dd;font:1.12rem/1.7 var(--serif)}
.archive-credentials{max-width:900px;margin-top:35px;padding-top:20px;display:flex;flex-wrap:wrap;gap:12px 28px;border-top:1px solid rgba(216,184,102,.22);color:#aebccd;font-size:.64rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}.archive-credentials span{display:inline-flex;align-items:baseline;gap:6px}.archive-credentials span::before{content:"";width:4px;height:4px;align-self:center;border-radius:50%;background:var(--gold-400)}.archive-credentials strong{color:var(--gold-300);font:600 1rem var(--serif)}

/* Featured lead story. */
.flagship-archive-hero+.guest-results-section+[data-generic-featured]{padding-block:74px;background:#fffdf8}[data-generic-featured] .media-section-heading{margin-bottom:32px}[data-generic-featured] .featured-conversation{border-color:rgba(156,116,43,.28);box-shadow:0 22px 60px rgba(5,18,38,.1)}[data-generic-featured] .featured-conversation-copy{background:linear-gradient(145deg,#102947,#07162a 72%)}
[data-generic-featured] .featured-conversation-copy::after{content:"";width:260px;height:260px;position:absolute;right:-145px;bottom:-145px;display:block;border:1px solid rgba(216,184,102,.14);border-radius:50%;box-shadow:0 0 0 36px rgba(216,184,102,.03),0 0 0 72px rgba(216,184,102,.018)}

/* Integrated library controls. */
.archive-section{padding-block:86px 104px;background:#f5efe3}.archive-section .media-section-heading{margin-bottom:34px}
.flagship-archive-controls{margin-bottom:0;padding:22px;grid-template-columns:minmax(260px,1.55fr) minmax(170px,.8fr) minmax(150px,.68fr) auto;gap:12px;border:1px solid rgba(20,35,58,.13);background:rgba(255,253,248,.92);box-shadow:0 20px 48px rgba(5,18,38,.075)}
.flagship-archive-controls label>span{color:#72521a;font-size:.61rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.flagship-archive-controls input,.flagship-archive-controls select{min-height:52px;border-color:rgba(20,35,58,.18);background:#fff}.flagship-archive-controls input:focus,.flagship-archive-controls select:focus{border-color:var(--gold-500)}
.archive-control-actions{display:flex;align-items:end;gap:8px}.archive-control-actions .button{min-height:52px}
.saved-filter{min-height:52px;padding:12px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--navy-900);border:1px solid rgba(20,35,58,.2);background:transparent;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.saved-filter span{color:var(--gold-600);font-size:1.05rem}.saved-filter b{min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;color:var(--navy-950);border-radius:999px;background:var(--gold-300);font-size:.62rem}.saved-filter:hover,.saved-filter[aria-pressed="true"]{color:var(--ivory-50);border-color:var(--navy-900);background:var(--navy-900)}.saved-filter[aria-pressed="true"] span{color:var(--gold-300)}
.topic-ribbon{padding:16px 0 14px;display:flex;align-items:center;gap:5px;overflow-x:auto;border-bottom:1px solid rgba(20,35,58,.11);scrollbar-width:thin}.topic-ribbon>span{margin-right:8px;flex:0 0 auto;color:#72521a;font-size:.61rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.topic-ribbon button{padding:7px 10px;flex:0 0 auto;color:var(--navy-700);border:0;border-bottom:2px solid transparent;background:transparent;font-size:.68rem;font-weight:750;cursor:pointer}.topic-ribbon button:hover,.topic-ribbon button[aria-pressed="true"]{color:var(--navy-950);border-bottom-color:var(--gold-500)}.topic-ribbon button:disabled{opacity:.38;cursor:not-allowed}.archive-status{margin:19px 0 22px;color:#4d586b;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* Magazine-like episode cards. */
.flagship-library-grid{counter-reset:flagship-episode;gap:24px}.flagship-library-grid .media-card{counter-increment:flagship-episode;position:relative;display:flex;flex-direction:column;border-color:rgba(20,35,58,.14);background:#fffdf8;box-shadow:0 13px 34px rgba(5,18,38,.055)}.flagship-library-grid .media-card::before{content:counter(flagship-episode,decimal-leading-zero);position:absolute;right:17px;top:15px;z-index:4;color:rgba(255,255,255,.82);font:600 .62rem var(--sans);letter-spacing:.14em;text-shadow:0 1px 8px rgba(0,0,0,.5)}.flagship-library-grid .media-card:hover,.flagship-library-grid .media-card:focus-within{transform:translateY(-3px);border-color:rgba(156,116,43,.4);box-shadow:0 22px 52px rgba(5,18,38,.11)}
.flagship-library-grid .media-card-image::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,9,20,.08),transparent 48%,rgba(3,9,20,.26))}.flagship-library-grid .media-card-body{height:100%;padding:23px 23px 19px;display:flex;flex-direction:column}.flagship-library-grid .media-card-meta{letter-spacing:.08em}.flagship-library-grid .media-card h2{font-size:clamp(1.42rem,2vw,1.72rem);line-height:1.13}.flagship-library-grid .tag-list{margin-top:17px}.flagship-library-grid .tag-list li{padding:3px 8px;border-radius:2px;font-size:.59rem}
.media-card-actions{position:relative;z-index:2;margin-top:auto;padding-top:21px;display:flex;align-items:center;justify-content:flex-end;gap:14px;border-top:1px solid rgba(20,35,58,.1)}.save-conversation{padding:5px 0;display:inline-flex;align-items:center;gap:6px;color:#4f5b6e;border:0;background:transparent;font-size:.65rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.save-conversation span{color:#72521a;font-size:1.05rem;line-height:1}.save-conversation:hover,.save-conversation[aria-pressed="true"]{color:var(--navy-950)}.flagship-library-grid .media-card h2 a::after{content:"";position:absolute;z-index:1;inset:0}.flagship-library-grid .tag-list{position:relative;z-index:2}.flagship-archive-controls :focus-visible,.topic-ribbon button:focus-visible,.flagship-library-grid a:focus-visible,.flagship-library-grid button:focus-visible,.flagship-empty button:focus-visible{outline:3px solid var(--ivory-50);outline-offset:2px;box-shadow:0 0 0 6px var(--navy-950)}.flagship-empty{padding-block:80px}.flagship-empty>span{display:block;margin-bottom:12px;color:var(--gold-500);font-size:2rem}.flagship-empty .button{margin-top:22px}

@media(max-width:1120px){.flagship-archive-controls{grid-template-columns:1.35fr 1fr 1fr}.archive-control-actions{grid-column:1/-1}body:has(.hero#home) .hero-grid{min-height:auto}}
@media(max-width:760px){.header-inner{height:66px}body:has(.hero#home) .hero{min-height:auto}body:has(.hero#home) .hero-grid{min-height:auto;padding-top:98px;padding-bottom:52px}body:has(.hero#home) .title-main{font-size:clamp(4.2rem,20vw,6rem)}body:has(.hero#home) .portrait-stage{width:min(100%,420px)}.flagship-archive-hero.media-hero{min-height:470px;padding:110px 0 48px}.flagship-archive-hero .breadcrumbs{margin-bottom:32px}.flagship-archive-hero h1{font-size:clamp(4.3rem,21vw,6.6rem)}.flagship-archive-hero p:last-of-type{font-size:1rem}.archive-credentials{margin-top:27px;gap:10px 18px}.flagship-archive-controls{padding:17px;grid-template-columns:1fr}.archive-control-actions{grid-column:auto;align-items:stretch}.archive-control-actions>*{flex:1}.archive-section{padding-block:60px 72px}}
@media(max-width:480px){.archive-credentials{display:grid;grid-template-columns:1fr}.archive-control-actions{display:grid;grid-template-columns:1fr 1fr}.flagship-library-grid .media-card-body{padding:21px 19px 18px}.media-card-actions{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.flagship-library-grid .media-card{transition:none}.flagship-library-grid .media-card:hover,.flagship-library-grid .media-card:focus-within{transform:none}}

/* src/newsletter.css */
.newsletter-section {
  padding: 42px 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(216, 184, 102, .12), transparent 28%),
    linear-gradient(180deg, #f8f2e6 0%, #fffdf8 100%);
  border-top: 1px solid rgba(20, 35, 58, .08);
}

.newsletter-panel {
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  align-items: center;
  gap: clamp(28px, 5vw, 68px);
  color: var(--white);
  border: 1px solid rgba(216, 184, 102, .4);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 88% 18%, rgba(36, 75, 115, .42), transparent 36%),
    linear-gradient(125deg, var(--navy-1000), var(--navy-900));
  box-shadow: var(--shadow-md);
}

.newsletter-panel::before {
  content: "";
  width: 240px;
  height: 240px;
  position: absolute;
  right: -105px;
  bottom: -135px;
  border: 1px solid rgba(216, 184, 102, .2);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(216, 184, 102, .025), 0 0 0 54px rgba(216, 184, 102, .018);
  pointer-events: none;
}

.newsletter-copy,
.newsletter-form { position: relative; z-index: 1; }
.newsletter-copy { max-width: 620px; }
.newsletter-copy h2 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(2.35rem, 4.2vw, 4rem);
}
.newsletter-copy > p:not(.eyebrow) {
  max-width: 580px;
  margin-top: 14px;
  color: #c4d0de;
  font-size: .95rem;
}

.newsletter-form {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(10px);
}

.newsletter-fields {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 10px;
}

.newsletter-field {
  display: grid;
  gap: 6px;
}
.newsletter-field span {
  color: #dce4ed;
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .03em;
}
.newsletter-field input {
  width: 100%;
  min-height: 49px;
  padding: 11px 14px;
  color: var(--navy-950);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  background: var(--ivory-50);
  outline: none;
}
.newsletter-field input:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(216,184,102,.18);
}
.newsletter-submit {
  width: 100%;
  margin-top: 10px;
}
.newsletter-submit:disabled { cursor: wait; opacity: .72; transform: none; }
.newsletter-note {
  margin-top: 10px;
  color: #9fadc0;
  font-size: .63rem;
  line-height: 1.45;
}
.newsletter-status {
  min-height: 1.35em;
  margin-top: 8px;
  color: #f1d98d;
  font-size: .72rem;
  font-weight: 700;
}
.newsletter-status.success { color: #c7ecd0; }

.newsletter-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.newsletter-section-compact {
  padding: 30px 0 0;
  background: transparent;
  border-top: 0;
}
.newsletter-section-compact .newsletter-panel {
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: clamp(24px, 4vw, 48px);
  box-shadow: 0 22px 56px rgba(0, 0, 0, .22);
}
.newsletter-section-compact .newsletter-copy h2 {
  font-size: clamp(2rem, 3.3vw, 3.2rem);
}
.newsletter-section-compact .newsletter-copy > p:not(.eyebrow) {
  font-size: .88rem;
}

@media (max-width: 900px) {
  .newsletter-panel,
  .newsletter-section-compact .newsletter-panel { grid-template-columns: 1fr; }
  .newsletter-copy { max-width: 760px; }
}

@media (max-width: 620px) {
  .newsletter-section { padding: 28px 0; }
  .newsletter-section-compact { padding: 24px 0 0; }
  .newsletter-panel { padding: 24px; }
  .newsletter-fields { grid-template-columns: 1fr; }
}

/* src/first-paint-polish.css */
/* The server-delivered archive remains useful without JavaScript and should
   look intentional while the interactive controls finish loading. */
.static-directory-fallback {
  color: var(--ink);
  background: var(--ivory-100);
}

.static-directory-fallback .static-directory-section {
  padding-block: 64px 82px;
  background: var(--ivory-100);
}

.static-directory-fallback .static-directory-heading {
  margin-bottom: 28px;
}

.static-directory-fallback .static-directory-heading h2 {
  font-size: clamp(2.35rem, 4vw, 4rem);
}

.static-directory-fallback .static-directory-list {
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  list-style: none;
  border: 1px solid rgba(20, 35, 58, .12);
  background: rgba(20, 35, 58, .12);
}

.static-directory-fallback .static-directory-list li {
  min-width: 0;
  background: #fffdf8;
}

.static-directory-fallback .static-directory-list a {
  min-height: 118px;
  padding: 22px;
  display: flex;
  align-items: flex-end;
  color: var(--navy-900);
  font-family: var(--serif);
  font-size: clamp(1.22rem, 1.7vw, 1.55rem);
  line-height: 1.16;
  text-decoration: none;
  transition: color .18s ease, background .18s ease;
}

.static-directory-fallback .static-directory-list a:hover,
.static-directory-fallback .static-directory-list a:focus-visible {
  color: #72521a;
  background: #fff;
}

.static-topics-fallback .static-directory-list a {
  min-height: 164px;
  display: grid;
  align-content: end;
  gap: 9px;
}

.static-topics-fallback .static-directory-list strong {
  font-size: 1.35em;
  font-weight: 500;
}

.static-topics-fallback .static-directory-list span {
  color: var(--muted);
  font-family: var(--sans);
  font-size: .72rem;
  line-height: 1.55;
}

.static-featured-loading {
  min-height: 300px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(20, 35, 58, .12);
  background: linear-gradient(120deg, #fffdf8, #f6efe2 52%, #fffdf8);
}

.static-featured-loading::before,
.static-featured-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.static-featured-loading::before {
  width: 58%;
  background: linear-gradient(135deg, #0c2745, #04101f);
}

.static-featured-loading::after {
  left: 64%;
  top: 22%;
  width: 25%;
  height: 12px;
  border-radius: 999px;
  background: rgba(20, 35, 58, .12);
  box-shadow: 0 27px 0 rgba(20, 35, 58, .08), 0 54px 0 rgba(20, 35, 58, .06);
}

@media (max-width: 880px) {
  .static-directory-fallback .static-directory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .static-directory-fallback .static-directory-section {
    padding-block: 44px 62px;
  }

  .static-directory-fallback .static-directory-list {
    grid-template-columns: 1fr;
  }

  .static-directory-fallback .static-directory-list a {
    min-height: 0;
    padding: 18px 17px;
    font-size: 1.32rem;
  }

  .static-featured-loading {
    min-height: 270px;
  }

  .static-featured-loading::before {
    width: 100%;
    height: 58%;
  }

  .static-featured-loading::after {
    left: 9%;
    top: 71%;
    width: 58%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .static-directory-fallback .static-directory-list a {
    transition: none;
  }
}