/* Homepage branding and navigation, isolated from transcript page styles. */
header.bf-header{position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(232,230,220,.2);background:#0b0e0df2;color:#e8e6dc;font:16px/1.6 'DM Mono',monospace}
.bf-header .bf-inner{width:min(1240px,calc(100% - 48px));margin:auto;height:92px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.bf-header .bf-brand{font:500 1.45rem 'Oswald',sans-serif;letter-spacing:.16em;color:#e8e6dc;white-space:nowrap;text-decoration:none}
.bf-header .bf-brand-x{display:inline-block;position:relative;color:#e8e6dc;letter-spacing:0;line-height:1;text-align:center;margin:0 .34em}
.bf-header .bf-brand-x::after{content:'';position:absolute;width:1.08em;height:1.08em;border:2px solid #b73831;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg)}
.bf-header nav.bf-navlinks{display:flex;height:auto;min-height:0;gap:clamp(16px,1.8vw,28px);align-items:center;justify-content:initial;text-transform:uppercase;font-size:.72rem;letter-spacing:.13em;line-height:1.6}
.bf-header .bf-navlinks a{color:#e8e6dc;opacity:.72;transition:.2s;text-decoration:none;white-space:nowrap}
.bf-header .bf-navlinks a:hover,.bf-header .bf-navlinks a:focus,.bf-header .bf-navlinks a[aria-current]{opacity:1;color:white}
.bf-header .bf-nav-note{font-size:.68rem;letter-spacing:.2em;color:#d6d7cf;white-space:nowrap}
.bf-header .bf-menu{display:none;border:0;background:none;color:white;font:1.5rem 'DM Mono',monospace;cursor:pointer;padding:8px}
.search-rail{top:92px}
@media(max-width:1460px){.bf-header .bf-nav-note{display:none}}
@media(max-width:1100px){.bf-header nav.bf-navlinks{display:none}.bf-header .bf-menu{display:block}.bf-header nav.bf-navlinks.is-open{display:flex;position:absolute;top:100%;left:14px;right:14px;padding:22px;background:#0b0e0d;flex-direction:column;align-items:flex-start;border:1px solid rgba(232,230,220,.2);max-height:calc(100vh - 100px);overflow:auto}}
@media(max-width:560px){.bf-header .bf-inner{width:calc(100% - 28px);height:72px}.search-rail{top:72px}}

header.bf-header-home{position:absolute;left:0;right:0;background:linear-gradient(#0b0e0de8,transparent)}

/* Shared collection rule: keep final rows centered as cards are added. */
:where(.episode-grid,.season-grid,.seasons:has(>.season),.collection:not(.production-grid),.special-grid,.grid:has(>.card),.comic-grid,.media-grid){
 --card-columns:3;--card-gap:1px;display:flex!important;flex-wrap:wrap;justify-content:center;gap:var(--card-gap)!important;background:transparent!important;border:0!important;
}
:where(.episode-grid,.season-grid,.seasons:has(>.season),.collection:not(.production-grid),.special-grid,.grid:has(>.card),.comic-grid,.media-grid)>*{
 box-sizing:border-box;flex:0 0 calc((100% - (var(--card-columns) - 1)*var(--card-gap))/var(--card-columns));min-width:0;
}
:where(.episode-grid,.season-grid,.seasons:has(>.season),.collection:not(.production-grid),.comic-grid,.grid:has(>.card))>*{border:1px solid var(--line,#343c38)}
.episode-grid{--card-columns:4}.grid:has(>.card),.media-grid{--card-columns:2}.special-grid{--card-gap:15px}.media-grid{--card-gap:18px}.comic-grid{--card-columns:5}
@media(max-width:1160px){.episode-grid{--card-columns:2}}
@media(max-width:1000px){.season-grid{--card-columns:2}}
@media(max-width:900px){.comic-grid{--card-columns:3}}
@media(max-width:800px){.seasons:has(>.season),.collection:not(.production-grid){--card-columns:2}.special-grid{--card-columns:1}}
@media(max-width:760px){.media-grid{--card-columns:1}}
@media(max-width:650px){.episode-grid{--card-columns:1}}
@media(max-width:620px){.season-grid,.seasons:has(>.season),.collection:not(.production-grid),.grid:has(>.card){--card-columns:1}.comic-grid{--card-columns:2}}
/* Script vs. Screen is being rebuilt (November 2026): its nav link carries a Coming soon tag.
   On the desktop bar the tag hangs under the link so the nav gets no wider; in the open phone menu it sits inline. */
.bf-soon{display:inline-block;padding:1px 6px;border:1px solid #b73831;font-size:.62em;letter-spacing:.14em;line-height:1.5;color:#e8e6dc;white-space:nowrap}
.bf-header .bf-navlinks a:has(.bf-soon){position:relative}
.bf-header .bf-navlinks a .bf-soon{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);font-size:.56rem}
@media(max-width:1100px){.bf-header .bf-navlinks a .bf-soon{position:static;transform:none;margin-left:.7em;vertical-align:.1em}}
/* The full nav (ten links and the search button) needs about 1350px at its normal spacing, so
   between the phone menu (1100px and below) and that it tightens instead of running off the
   right edge. Measured November 5, 2026: the homepage overflowed by up to 190px at 1101-1349px. */
@media(min-width:1101px) and (max-width:1359px){.bf-header nav.bf-navlinks{gap:14px;font-size:.68rem;letter-spacing:.1em}}
@media(min-width:1101px) and (max-width:1199px){.bf-header nav.bf-navlinks{gap:12px;font-size:.64rem;letter-spacing:.06em}}