/* One header line. The logo is Home; the compact menu contains all library links. */
.top { position: relative; z-index: 10; flex-wrap: nowrap; background: var(--surface); gap: 1.4rem; margin: 0; border-radius: 0; }
.top > .wordmark { flex: 0 0 auto; max-width: min(26vw, 16rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The server's logo in place of its name, or beside it. */
.has-logo:is(.wordmark, .wordmark-sample) { display: flex; align-items: center; gap: .6rem; }
.top > .wordmark.has-logo { display: inline-flex; max-width: min(40vw, 20rem); }
.has-logo:is(.wordmark, .wordmark-sample) > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wordmark-logo { display: block; flex: none; height: 2.4rem; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.auth .wordmark-logo { height: 4.5rem; }
.brand-sample { display: flex; align-items: center; min-height: 4rem; padding: .75rem 1.25rem; background: var(--surface); border-radius: var(--radius-lg); }
.wordmark-sample { font-family: var(--font-display); color: var(--paper); font-weight: 500; font-size: 1.9rem; line-height: 1.2; letter-spacing: -.02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.top .nav { flex: 1 1 auto; min-width: 0; width: auto; order: 0; overflow: hidden; gap: 1rem; }
.top .nav a { font-weight: 400; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.top .nav a[aria-current="page"] { border-color: var(--accent); }
.top .search-form { flex: 0 1 12rem; min-width: 6rem; }
.nav-toggle { display: none; width: 2.6rem; height: 2.6rem; padding: .6rem; flex-shrink: 0; border: 0; }
.nav-toggle span { width: 1.2rem; height: 2px; background: currentColor; position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; width: 100%; height: 2px; background: currentColor; left: 0; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.top.compact-nav .nav-toggle { display: inline-flex; }
.top.compact-nav .nav { display: none; position: absolute; left: var(--gutter); top: calc(100% + .25rem); width: min(24rem, calc(100vw - 2 * var(--gutter))); flex-direction: column; }
.top.compact-nav.nav-open .nav { display: flex; }
.top.compact-nav .nav a { white-space: normal; overflow-wrap: anywhere; }
.top.compact-nav .search-form { flex: 1 1 12rem; }
.account-menu { position: relative; flex: 0 0 auto; }
.account-menu summary { cursor: pointer; list-style: none; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
.account-menu summary::-webkit-details-marker { display: none; }
/* The menu's look is material.css's (Menus); here, where it hangs. */
.account-links { position: absolute; right: 0; }
.account-links [hidden] { display: none; }

/* Full-bleed banner: no spacer, rounded frame or side gutter between it and the header. */
.home-page { padding-top: 0; }
.home-page > .banner { width: 100%; margin: 0 0 1.5rem; border-radius: 0; }
.home-page > .section:first-child, .home-page > .visually-hidden:first-child + .section { padding-top: 1.5rem; }
.home-page > .banner { animation: none !important; }
.home-section { container-type: inline-size; padding-bottom: 2rem; }
.home-section-description { color: var(--muted); margin: -.3rem 0 1.2rem; max-width: 60rem; }
.home-section .row { grid-template-rows: auto; gap: var(--card-gap, 1.4rem); padding: .3rem .2rem .7rem; margin: -.3rem -.2rem 0; scrollbar-width: none; }
.home-section .row::-webkit-scrollbar { display: none; }
.home-section .row.posters { grid-auto-columns: var(--card-size, clamp(8.5rem, 16cqw, 11rem)); }
.home-section .row.wide { grid-auto-columns: var(--card-size-wide, clamp(14rem, 25cqw, 19rem)); }

/* One expanded title and its neighbours remain in the same horizontal row on every screen. */
.row.expanded { --expanded-width: clamp(17rem, calc(var(--expanded-ratio, .49) * 100cqw), calc(34rem * var(--expanded-ratio, .49) / .49)); display: flex; align-items: flex-start; }
.home-expanded-card { flex: 0 0 calc(var(--expanded-width) * .375); min-width: 0; transition: flex-basis .2s ease; }
.home-expanded-card.selected { flex-basis: var(--expanded-width); }
.home-expand-pick { width: 100%; display: block; padding: 0; border: 0; border-radius: var(--radius); color: var(--text); background: transparent; cursor: pointer; }
.home-expand-pick .art { height: calc(var(--expanded-width) * .5625); aspect-ratio: auto; }
.home-expanded-card.selected .home-expand-pick { outline: 1px solid color-mix(in srgb, var(--accent) 65%, var(--line)); outline-offset: 3px; }
.home-expanded-card > h3 { font: 600 .95rem/1.45 var(--font-body); margin: .7rem 0 .2rem; }
.home-expanded-card > p { margin: 0; font-size: .85rem; }
.home-expanded-copy { padding-top: .8rem; }
.home-expanded-copy > .muted { margin: 0; font-size: .85rem; }
.home-expanded-copy h3 { margin: .5rem 0; font-size: 1.5rem; line-height: 1.35; }
.home-expanded-overview { color: var(--muted); font-size: .95rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: .6rem 0 1rem; }
.rail:has(.expanded) .rail-btn { top: calc(clamp(17rem, 49cqw, 34rem) * .28125 - 1.75rem); }
/* The chosen title snaps to the row's left edge with its text, so fade only the right edge. */
.rail:not(.at-end) .row.expanded { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 5rem), transparent); }
.rail.at-end .row.expanded { -webkit-mask-image: none; mask-image: none; }

/* Segmented choices (.segmented) are in material.css. */
.history-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .6rem 0; border-top: 1px solid var(--line); }
@container (max-width: 440px) { .row.expanded { --expanded-width: min(82cqw, 25rem); } .rail:has(.expanded) .rail-btn { top: calc(min(82cqw, 25rem) * .28125 - 1.75rem); } }
@media (max-width: 640px) { .top { gap: .65rem; padding: .8rem var(--gutter); } .top .wordmark { font-size: 1.5rem; } .top .wordmark-logo { height: 2rem; } .account-menu summary { max-width: 5rem; padding: .5rem; } .top.compact-nav .search-form { flex-basis: 5rem; } }
@media (prefers-reduced-motion: reduce) { .home-expanded-card { transition: none; } }