/* Portrait index: a quiet archive that opens into individual stories. */
.character-gallery{--portrait-bg:#d9e6e9;--portrait-panel:#eef4f4;--portrait-ink:#294554;--portrait-muted:#6e8189;--portrait-line:#81969944;padding:88px 7% 74px;background:#edf4f6;overflow:hidden}
[data-realm="other"] .character-gallery{--portrait-bg:#26343e;--portrait-panel:#15222d;--portrait-ink:#e1e8e9;--portrait-muted:#9eafb8;--portrait-line:#8a9da944;background:#0f1823}
.character-gallery .section-heading{margin-bottom:45px}.character-gallery .section-heading h2{font-size:30px}
.character-browser{display:grid;grid-template-columns:minmax(200px,.65fr) minmax(0,2fr);gap:45px;min-height:530px;align-items:stretch}
.character-introduction{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:25px 0;color:var(--portrait-ink)}
.character-introduction[hidden],.character-detail[hidden]{display:none}
.character-sigil{position:absolute;font-family:Georgia,serif;right:10%;top:10%;font-size:180px;color:var(--portrait-ink);opacity:.045;pointer-events:none}
.character-introduction .eyebrow{font-size:8px;letter-spacing:2.2px;color:var(--portrait-muted)}
.character-introduction h3{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.8;letter-spacing:3px;margin:25px 0 20px}
.character-introduction>p:not(.eyebrow){font-size:11px;line-height:2.2;color:var(--portrait-muted)}
.character-total{margin-top:45px;padding-top:18px;border-top:1px solid var(--portrait-line);width:100%;font-size:9px;color:var(--portrait-muted)}
.character-browse-hint{display:flex;align-items:center;gap:30px;font-size:10px;letter-spacing:2px;margin-top:20px;color:var(--portrait-muted)}
.character-rail{min-width:0;display:flex;flex-direction:column;justify-content:center}
.character-gallery .character-select{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#a59577 transparent;border:0;margin:0;padding:12px 3px 20px;min-width:0}
.portrait-item{flex:0 0 230px;scroll-snap-align:start;min-width:0}
.character-gallery .character-select .portrait-card{display:block;position:relative;width:100%;height:445px;padding:0;overflow:hidden;border:1px solid var(--portrait-line);background:radial-gradient(ellipse at 50% 38%,#ffffff77,transparent 65%),var(--portrait-bg);text-align:left;color:var(--portrait-ink);transition:transform .4s,border-color .3s,background-color .3s}
.portrait-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,#172a3b33 68%,#172a3be8);pointer-events:none}
.portrait-card img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform .6s;filter:saturate(.85)}
.character-gallery .portrait-card:hover,.character-gallery .portrait-card:focus-visible{transform:translateY(-7px);border-color:#a78c62}
.portrait-card:hover img,.portrait-card:focus-visible img{transform:scale(1.04)}
.character-gallery .portrait-card:focus-visible{outline:2px solid #a78c62;outline-offset:3px}
.character-gallery .portrait-card[aria-pressed="true"]{border-color:#b39767;box-shadow:inset 0 0 0 1px #b39767}
.portrait-card-number{position:absolute;z-index:1;left:17px;top:17px;font-size:8px;letter-spacing:2px;color:var(--portrait-muted)}
.portrait-card-caption{position:absolute;z-index:2;left:21px;bottom:24px;right:21px;color:#f1eee7}
.character-gallery .character-select .portrait-card-caption small{display:block;margin:0 0 9px;font-size:9px;letter-spacing:3px;color:#dbcaad}
.portrait-card-caption b{display:block;font-family:var(--serif);font-weight:400;font-size:27px;letter-spacing:5px;line-height:1.4}
.portrait-card-caption>span{display:flex;justify-content:space-between;border-top:1px solid #e1ddd455;padding-top:12px;margin-top:17px;font-size:8px;letter-spacing:2px;color:#d8e0e3}.portrait-card-caption i{font-size:15px;font-style:normal}
.character-rail-controls{display:flex;justify-content:space-between;align-items:center;padding:8px 0 0;color:var(--portrait-muted)}.character-rail-controls>.mono{font-size:8px;letter-spacing:2px}
.character-rail-controls>div{display:flex;gap:10px}.character-rail-controls button,.character-detail-controls button{height:35px;width:45px;border:1px solid var(--portrait-line);color:var(--portrait-ink);font-size:16px}.character-rail-controls button:hover,.character-detail-controls button:hover{border-color:#aa8c62;background:#aa8c6214}
.character-browser.is-detail{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:35px}
.character-detail{position:relative;min-width:0;scroll-margin-top:100px;background:linear-gradient(135deg,#ffffff18,transparent),var(--portrait-panel);border:1px solid var(--portrait-line);padding:22px 25px 14px;animation:character-enter .45s ease both}
.character-back{position:relative;z-index:2;font-size:9px;letter-spacing:1.5px;color:var(--portrait-muted);padding:3px 0 12px;border-bottom:1px solid var(--portrait-line)}
.character-detail .character-stage{display:block;position:relative;min-height:415px;isolation:isolate}
.character-detail .character-portrait{position:absolute;inset:0 -25px 0 25%;min-height:0;mask-image:linear-gradient(90deg,transparent,#000 33%),linear-gradient(0deg,transparent,#000 13%);mask-composite:intersect;background-size:contain;background-repeat:no-repeat;opacity:.85;z-index:-1}
.character-detail .character-profile{position:relative;max-width:78%;padding:26px 0 15px;z-index:1}
.character-detail .character-profile .eyebrow{font-size:9px;color:var(--portrait-muted);letter-spacing:1px}
.character-detail .character-profile h3{font-size:42px;letter-spacing:5px;color:var(--portrait-ink);line-height:1.4;margin-top:14px;outline:none;text-shadow:0 1px 25px var(--portrait-panel)}
.character-detail .character-epithet{font-size:17px;letter-spacing:5px;margin:8px 0 20px}.character-detail .profile-rule{width:45px}
.character-detail .character-bio{font-size:12px;line-height:2.15;margin-top:18px;max-width:300px;color:var(--portrait-muted);text-shadow:0 0 15px var(--portrait-panel)}
.character-detail .character-stats{font-size:10px;gap:15px;flex-wrap:wrap;margin:19px 0}.character-detail .character-stats dd{color:var(--portrait-ink)}
.character-detail .character-profile .outline{margin-top:4px;font-size:9px;min-height:36px;padding:0 15px;gap:18px;background:var(--portrait-panel)}
.character-detail-controls{display:flex;align-items:center;justify-content:flex-end;gap:15px;border-top:1px solid var(--portrait-line);padding-top:14px}.character-detail-controls .mono{font-size:8px;color:var(--portrait-muted)}
.is-detail .portrait-item{flex-basis:195px}.is-detail .portrait-card{height:420px!important}
@keyframes character-enter{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@media(min-width:1600px){.portrait-item{flex-basis:270px}.character-gallery .character-select .portrait-card{height:500px}.character-detail .character-stage{min-height:480px}.character-detail .character-profile{padding-top:40px}.character-detail .character-profile h3{font-size:50px}}
@media(max-width:1100px){.character-browser{gap:25px;grid-template-columns:minmax(180px,.6fr) minmax(0,1.4fr)}.character-browser.is-detail{grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:22px}.portrait-item{flex-basis:205px}.character-gallery .character-select .portrait-card{height:420px}.character-detail{padding:20px}.character-detail .character-profile{max-width:90%}.character-detail .character-profile h3{font-size:36px}.character-detail .character-portrait{opacity:.5}.character-introduction h3{font-size:23px}}
@media(max-width:760px){.character-gallery{padding:65px 6% 50px}.character-gallery .section-heading h2{font-size:25px}.character-gallery .section-heading{margin-bottom:20px}.character-browser,.character-browser.is-detail{display:flex;flex-direction:column;gap:22px;min-height:0}.character-introduction{padding:0}.character-introduction h3{font-size:24px;line-height:1.6;margin:12px 0}.character-introduction h3 br{display:none}.character-introduction>p:not(.eyebrow),.character-sigil,.character-browse-hint{display:none}.character-total{width:auto;margin:8px 0 0;padding-top:0;border:0}.portrait-item{flex-basis:205px}.character-gallery .character-select .portrait-card{height:375px}.character-detail .character-stage{min-height:385px}.character-detail .character-profile{max-width:78%;padding-top:24px}.character-detail .character-profile h3{font-size:36px}.character-detail .character-portrait{inset:0 -20px 0 20%;opacity:.65}.character-detail .character-bio{font-size:11px;max-width:285px}.is-detail .portrait-item{flex-basis:160px}.is-detail .portrait-card{height:270px!important}.is-detail .portrait-card-caption b{font-size:23px}.is-detail .portrait-card-caption>span{display:none}.is-detail .portrait-card-caption{left:16px;right:16px;bottom:19px}.character-rail-controls{padding-top:0}}
@media(prefers-reduced-motion:reduce){.character-detail,.portrait-card,.portrait-card img{animation:none!important;transition:none!important}}
.character-detail .character-stage{display:grid;grid-template-columns:1.05fr 1fr;gap:15px;align-items:stretch;min-height:415px}
.character-detail .character-profile{grid-column:1;grid-row:1;max-width:none;padding-right:0}
.character-detail .character-portrait{position:relative;grid-column:2;grid-row:1;inset:auto;margin-right:-25px;min-height:415px;z-index:0;opacity:1;background-size:cover;mask-image:linear-gradient(0deg,transparent,#000 12%);mask-composite:add}
@media(max-width:1100px){.character-detail .character-stage{grid-template-columns:1.1fr 1fr;gap:10px}.character-detail .character-portrait{margin-right:-20px;background-position:center!important}}
@media(max-width:760px){.character-detail .character-stage{display:flex;flex-direction:column;gap:0;min-height:0}.character-detail .character-portrait{order:0;height:310px;min-height:310px;margin:15px -20px 0;background-size:contain;background-position:center!important}.character-detail .character-profile{order:1;max-width:none;padding:5px 0 22px}.character-detail .character-bio{max-width:none;font-size:12px}.character-detail .character-profile h3{font-size:36px}}

/* The same portraits travel from the gallery into a compact vertical index. */
.character-gallery{--character-ease:cubic-bezier(.65,0,.35,1)}
.character-gallery .character-select{scroll-snap-type:none}
.character-browser{min-height:570px}
.character-detail{animation:none}
.character-gallery .portrait-card,.portrait-card img{transition-timing-function:var(--character-ease)}
.character-browser.is-detail{display:grid;grid-template-columns:minmax(0,1fr) 98px;gap:28px;align-items:stretch}
.is-detail .character-detail{min-height:570px}
.is-detail .character-detail .character-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:35px;min-height:435px}
.is-detail .character-detail .character-profile{max-width:430px;padding-top:30px}
.is-detail .character-detail .character-portrait{min-height:435px;background-size:contain;background-position:center bottom!important;mask-image:linear-gradient(0deg,transparent,#000 12%)}
.is-detail .character-detail .character-bio{max-width:395px}
.is-detail .character-rail{width:98px;justify-content:flex-start;align-self:start}
.character-gallery .is-detail .character-select{flex-direction:column;gap:16px;width:98px;height:510px;max-height:510px;padding:26px 5px;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-type:none;scroll-padding-block:26px;scrollbar-width:none;mask-image:linear-gradient(0deg,transparent,#000 26px,#000 calc(100% - 26px),transparent)}
.is-detail .character-select::-webkit-scrollbar{display:none}
.is-detail .portrait-item{flex:0 0 88px;width:88px;height:88px}
.character-gallery .is-detail .portrait-card{width:88px;height:88px!important;border-radius:2px}
.is-detail .portrait-card img{object-fit:cover;object-position:center 19%;filter:saturate(.72);transition:filter .3s var(--character-ease),transform .45s var(--character-ease)}
.is-detail .portrait-card[aria-pressed="true"]{border-color:#ad8b52;box-shadow:inset 0 0 0 2px #ad8b52}
.is-detail .portrait-card[aria-pressed="true"] img,.is-detail .portrait-card:hover img{filter:saturate(1)}
.character-gallery .is-detail .portrait-card:hover,.character-gallery .is-detail .portrait-card:focus-visible{transform:scale(1.025)}
.is-detail .portrait-card:after{background:linear-gradient(0deg,#172a3b22,transparent 60%)}
.is-detail .portrait-card-caption,.is-detail .portrait-card-number{display:none}
.is-detail .character-rail-controls{justify-content:center;margin-top:12px;padding:0}
.is-detail .character-rail-controls>.mono{display:none}
.is-detail .character-rail-controls>div{gap:8px}
.is-detail .character-rail-controls button{width:40px;height:35px;transform:rotate(90deg)}
.portrait-flight{position:fixed;z-index:65;overflow:hidden;border:1px solid;pointer-events:none;box-sizing:border-box;will-change:left,top,width,height}
.portrait-flight img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%}
@media(min-width:1600px){.character-browser.is-detail{grid-template-columns:minmax(0,1fr) 110px;gap:32px}.is-detail .character-rail{width:110px}.character-gallery .is-detail .character-select{width:110px;height:580px;max-height:580px;padding-inline:5px}.is-detail .portrait-item{flex-basis:100px;width:100px;height:100px}.character-gallery .is-detail .portrait-card{width:100px;height:100px!important}.is-detail .character-detail{min-height:640px}.is-detail .character-detail .character-stage,.is-detail .character-detail .character-portrait{min-height:500px}}
@media(max-width:1100px){.character-browser.is-detail{grid-template-columns:minmax(0,1fr) 86px;gap:20px}.is-detail .character-rail{width:86px}.character-gallery .is-detail .character-select{width:86px;padding-inline:5px}.is-detail .portrait-item{flex-basis:76px;width:76px;height:76px}.character-gallery .is-detail .portrait-card{width:76px;height:76px!important}.is-detail .character-rail-controls button{width:34px}.is-detail .character-detail .character-stage{gap:24px}.is-detail .character-detail .character-profile h3{font-size:40px}}
@media(max-width:760px){.character-browser{min-height:0}.character-browser.is-detail{display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:10px;align-items:start}.is-detail .character-detail{min-height:0;padding:18px 15px 14px}.is-detail .character-detail .character-stage{display:flex;flex-direction:column;gap:0;min-height:0}.is-detail .character-detail .character-portrait{min-height:255px;height:255px;margin:12px -15px 0;background-size:contain}.is-detail .character-detail .character-profile{max-width:none;padding-top:6px}.is-detail .character-detail .character-profile h3{font-size:29px;letter-spacing:3px}.is-detail .character-detail .character-bio{font-size:11px;line-height:2.1}.is-detail .character-stats{display:block}.is-detail .character-stats dd{margin-top:8px}.is-detail .character-profile .outline{font-size:8px;padding:0 10px;gap:10px}.is-detail .character-back{font-size:8px;letter-spacing:0}.is-detail .character-rail{position:sticky;top:90px;width:62px}.character-gallery .is-detail .character-select{width:62px;height:min(530px,70svh);max-height:530px;gap:12px;padding:22px 3px;mask-image:linear-gradient(0deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}.is-detail .portrait-item{flex-basis:56px;width:56px;height:56px}.character-gallery .is-detail .portrait-card{width:56px;height:56px!important}.is-detail .character-rail-controls>div{gap:6px}.is-detail .character-rail-controls button{width:27px;height:30px}.is-detail .character-detail-controls{gap:10px;justify-content:space-between}.is-detail .character-detail-controls button{width:36px}.character-gallery .portrait-card:focus-visible{outline-offset:1px}}
@media(prefers-reduced-motion:reduce){.portrait-flight{display:none}.character-gallery *{transition-duration:0s!important;animation-duration:0s!important}}
.is-detail .character-detail .character-portrait{background-size:contain;background-position:var(--detail-position,center center)!important;mask-image:none;opacity:1}
.character-edit{display:block;width:fit-content;margin-top:16px;padding:7px 0;border-bottom:1px solid var(--portrait-line);color:var(--portrait-muted);font-size:10px;letter-spacing:1px}
.character-edit:hover,.character-edit:focus-visible{color:var(--portrait-ink);border-color:#a78c62}

/* The frame holds scrollable text; artwork can rise above its top edge. */
.character-gallery .is-detail .character-detail{height:min(620px,calc(100svh - 210px));min-height:380px;overflow:visible;display:grid;grid-template-rows:32px minmax(0,1fr) 48px;scroll-margin-top:175px;isolation:isolate}
.character-gallery .is-detail .character-back{width:fit-content;align-self:start;z-index:3}
.character-gallery .is-detail .character-stage{display:block;position:static;min-height:0;isolation:auto}
.character-gallery .is-detail .character-profile{position:relative;z-index:2;width:46%;max-width:none;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:#a59577 transparent;padding:24px 18px 22px 0;scrollbar-gutter:stable}
.character-gallery .is-detail .character-bio{max-width:100%;white-space:pre-line;overflow-wrap:anywhere}
.character-gallery .is-detail .character-portrait{position:absolute;z-index:1;inset:-65px 0 46px auto;width:63%;height:auto;min-height:0;margin:0;pointer-events:none;background:none!important;opacity:1;mask-image:linear-gradient(90deg,transparent,#000 13%,#000 90%,transparent),linear-gradient(0deg,transparent,#000 23%,#000);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 90%,transparent),linear-gradient(0deg,transparent,#000 23%,#000);-webkit-mask-composite:source-in}
.character-gallery .is-detail .character-portrait img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center top}
.character-gallery .is-detail .character-detail-controls{position:relative;z-index:3;align-self:end;background:transparent}
@media(max-width:1100px) and (min-width:761px){.character-gallery .is-detail .character-profile{width:48%;padding-right:10px}.character-gallery .is-detail .character-portrait{width:59%;top:-50px}.character-gallery .is-detail .character-profile h3{font-size:34px}}
@media(max-width:760px){.character-gallery .is-detail .character-detail{height:min(760px,calc(100svh - 175px));min-height:430px;grid-template-rows:28px minmax(0,1fr) 44px}.character-gallery .is-detail .character-stage{position:relative}.character-gallery .is-detail .character-portrait{top:-62px;bottom:auto;right:-10px;width:calc(100% + 20px);height:265px}.character-gallery .is-detail .character-profile{position:absolute;top:190px;left:0;right:0;width:100%;height:calc(100% - 190px);padding:10px 6px 18px 0}.character-gallery .is-detail .character-profile h3{margin-top:8px}.character-gallery .is-detail .character-detail-controls{gap:7px}}

.character-gallery .is-detail .character-portrait{grid-area:auto}
.character-gallery .is-detail .character-portrait{display:flex;align-items:flex-start;justify-content:center;mask-image:none;-webkit-mask-image:none}
.character-gallery .is-detail .character-portrait img{width:auto;height:auto;max-width:100%;max-height:100%;mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(180deg,transparent,#000 3%,#000 76%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(180deg,transparent,#000 3%,#000 76%,transparent);-webkit-mask-composite:source-in}
@media(min-width:761px){.character-gallery .is-detail .character-profile{padding-top:18px;padding-bottom:12px}.character-gallery .is-detail .character-select{height:max(330px,min(570px,calc(100svh - 260px)));max-height:none}}
/* Give the standing artwork more presence above and below the frame. */
@media(min-width:1101px){.character-gallery .is-detail .character-portrait{top:-85px;bottom:-125px;right:-75px;width:70%}}
@media(min-width:761px) and (max-width:1100px){.character-gallery .is-detail .character-portrait{top:-70px;bottom:-100px;right:-12px;width:67%}}
.character-gallery .is-detail .character-detail-controls button,.character-gallery .is-detail .character-detail-controls .mono{background:var(--portrait-panel)}
.character-gallery .is-detail .character-detail-controls .mono{padding:8px 5px}

/* Extended biographies remain in the character's existing scrollable text column. */
.character-gallery .character-dossier{margin-top:28px;padding-bottom:24px;overflow-wrap:anywhere}
.character-gallery .character-dossier h4{font-family:var(--serif);font-size:17px;font-weight:400;letter-spacing:2px;color:var(--gold);padding-top:22px;margin:20px 0 16px;border-top:1px solid #a5957740}
.character-gallery .character-dossier p{font-size:12px;line-height:2.15;white-space:pre-line;color:var(--portrait-muted);margin:0 0 16px}
@media(max-width:760px){.character-gallery .character-dossier h4{font-size:15px}.character-gallery .character-dossier p{font-size:12px}}

/* Alaien's other-side illustration fills the scene behind the readable controls. */
.character-backdrop[hidden]{display:none}
.character-gallery.has-immersive-character{position:relative;isolation:isolate}
.has-immersive-character .character-backdrop{position:absolute;inset:20px 2% 0;z-index:1;pointer-events:none;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 87%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 87%,transparent);-webkit-mask-composite:source-in}
.has-immersive-character .character-backdrop img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center}
.has-immersive-character>.section-heading{position:relative;z-index:2}
.has-immersive-character .character-browser{position:relative;z-index:auto}
.character-gallery.has-immersive-character .is-detail .character-detail{isolation:auto;background:linear-gradient(90deg,#15222de8 0%,#15222daa 30%,#15222d30 60%,transparent 100%)}
.character-gallery.has-immersive-character .is-detail .character-portrait{visibility:hidden}
.has-immersive-character .character-profile{text-shadow:0 1px 5px #07111a,0 0 18px #07111a}
.has-immersive-character .character-rail{position:relative;z-index:4}
@media(max-width:760px){.has-immersive-character .character-backdrop{inset:100px 0 40px}.has-immersive-character .character-backdrop img{object-fit:cover;object-position:60% center}.character-gallery.has-immersive-character .is-detail .character-detail{isolation:auto;background:linear-gradient(90deg,#15222ddb,#15222d66)}.has-immersive-character .character-rail{position:sticky}}

/* Frame beneath artwork; copy and interactive controls above artwork. */
.character-gallery.has-immersive-character .is-detail .character-detail-controls{border-top-color:transparent}
.character-gallery.has-immersive-character .is-detail .character-detail::after{content:"";position:absolute;z-index:0;left:25px;right:25px;bottom:62px;border-top:1px solid var(--portrait-line);pointer-events:none}
@media(max-width:760px){.character-gallery.has-immersive-character .is-detail .character-detail::after{left:15px;right:15px;bottom:58px}}