:root { color-scheme: light; }
body { background: #f7f6f2; color: #172b44; }
.cast-hero { position: relative; isolation: isolate; overflow: hidden; background: #071a35; color: #f9f1df; border-bottom: 4px solid #b6894d; }
.cast-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #071a35 8%, #071a35ed 25%, #071a35b0 41%, #071a351a 72%); }
.hero-layout { min-height: clamp(450px, 37vw, 600px); display: flex; align-items: center; padding-block: clamp(48px, 6vw, 90px); }
.hero-copy { max-width: 560px; }
.eyebrow { color: #dbba7b; font: 700 .73rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.hero-copy h1 { margin: 14px 0 20px; font: normal clamp(3.8rem, 6vw, 6rem)/.95 var(--serif); letter-spacing: -.045em; }
.standfirst { max-width: 34ch; font: 1.23rem/1.55 var(--serif); color: #f1ead9; }
.browse-link { display: inline-flex; align-items: center; gap: 24px; margin-top: 30px; padding: 12px 17px; color: #071a35; background: var(--brass); font: 700 .93rem/1.4 var(--sans); text-decoration: none; }
.browse-link:hover { background: #f4d998; }
.hero-portrait { position: absolute; z-index: -2; top: 0; right: 0; width: 78%; height: 100%; object-fit: cover; object-position: center; }
.directory { padding-block: clamp(40px, 5vw, 72px) 90px; }
.directory-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.directory-head h2 { font: normal clamp(2.45rem, 4vw, 3.6rem)/1.1 var(--serif); letter-spacing: -.04em; }
.directory-head p { color: #55667a; font-size: .9rem; }
.filters { display: none; flex-wrap: wrap; gap: .5rem; margin: 22px 0 34px; }
body.has-js .filters { display: flex; }
.filters button { border: 1px solid #b8ad98; padding: .63rem 1rem; background: transparent; color: #203650; cursor: pointer; font: 600 .9rem/1.3 var(--sans); }
.filters button:hover, .filters .is-selected { background: #113e92; border-color: #113e92; color: #fff9e9; }
.filters button:focus-visible { outline: 3px solid #986529; outline-offset: 3px; }
.cast-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 32px); }
.cast-card { min-width: 0; background: #fffaf0; border: 1px solid #dbd0bd; box-shadow: 0 4px 16px #33291b0b; }
.cast-card[hidden] { display: none; }
.portrait-link { position: relative; display: block; overflow: hidden; background: #725541; }
.portrait-link img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.portrait-link:hover img { transform: scale(1.035); }
.portrait-link span { position: absolute; right: 12px; bottom: 12px; padding: .4rem .65rem; background: #071a35e8; color: #fffaf0; font: 600 .8rem/1.3 var(--sans); }
.portrait-link:focus-visible { outline: 3px solid #a36d2b; outline-offset: 3px; }
.card-copy { padding: 19px 20px 16px; }
.card-copy h3 { margin-bottom: 5px; font: normal clamp(1.45rem, 2.2vw, 1.8rem)/1.15 var(--serif); }
.card-copy > p { color: #41566f; font-size: .98rem; }
.card-copy small { display: block; margin-top: 12px; color: #75552d; font: 700 .7rem/1.3 var(--sans); letter-spacing: .11em; text-transform: uppercase; }
.card-copy details { margin-top: 15px; padding-top: 12px; border-top: 1px solid #ded5c5; font: .9rem/1.5 var(--sans); }
.card-copy summary { color: #203650; font-weight: 650; cursor: pointer; }
.card-copy details p { margin-top: 8px; color: #455a70; }
.character-song { margin-top: 15px; padding-top: 12px; border-top: 1px solid #ded5c5; }
.character-song p { margin: 0 0 8px; font: 700 .9rem/1.4 var(--sans); }
.character-song audio { display: block; width: 100%; min-width: 0; height: 40px; }
.cast-dialog { width: min(760px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: clamp(24px, 4vw, 40px) 0 0; overflow: auto; border: 1px solid #bb975a; background: #fffaf0; color: #172b44; box-shadow: 0 1.5rem 4rem #000a; }
.cast-dialog::backdrop { background: #07111fdc; }
.cast-dialog img { display: block; width: auto; max-width: 100%; max-height: min(66dvh, 1000px); margin: 0 auto; background: #755841; }
.cast-dialog div { padding: 20px 24px 24px; }
.cast-dialog h2 { margin: 4px 0; font: normal 2rem/1.1 var(--serif); }
.cast-dialog .eyebrow { color: #72512e; }
.cast-dialog #dialog-summary { margin-top: 12px; max-width: 52ch; }
.dialog-close { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); z-index: 2; width: 2.5rem; height: 2.5rem; border: 1px solid #dcc49a; border-radius: 50%; background: #071a35; color: white; cursor: pointer; font-size: 1.7rem; line-height: 1; }
@media (max-width: 850px) { .cast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cast-hero::before { display: none; } .hero-layout { min-height: 0; flex-direction: column; align-items: stretch; gap: 28px; padding-block: 38px; } .hero-portrait { position: static; width: 100%; height: auto; } }
@media (max-width: 600px) { .hero-copy h1 { font-size: clamp(3.4rem, 13vw, 4.8rem); } .directory { padding-block: 38px 60px; } .cast-grid { gap: 12px; } .card-copy { padding: 14px 13px; } .card-copy h3 { font-size: 1.3rem; } .portrait-link span { font-size: .72rem; right: 6px; bottom: 6px; } }
@media (max-width: 370px) { .cast-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .portrait-link img { transition: none; } }