.residents-page{--max:1120px;padding-top:64px}
.residents-intro{padding-bottom:48px}
.residents-intro h1{max-width:950px;font-size:clamp(38px,5.8vw,68px);line-height:1.08;text-wrap:balance}
.residents-intro .lead{max-width:740px;margin-bottom:30px}
.resident-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.resident-index a{display:flex;flex-direction:column;gap:6px;padding:17px 20px;border:1px solid var(--line);background:#17352b66;text-decoration:none;font:400 23px Georgia,serif;color:var(--gold-soft);transition:background .15s}
.resident-index span{font:12px/1.5 system-ui,sans-serif;color:#bccabd}
.resident-index a:hover{background:#284838}
.resident-story{display:grid;grid-template-columns:240px minmax(0,1fr);gap:52px;padding:48px 0 56px;border-top:1px solid var(--line);scroll-margin-top:110px}
.resident-identity{text-align:center}
.resident-portrait{display:block;width:128px;height:144px;margin:0 auto 18px;background:url('/assets/npcs/cast-v1.svg') no-repeat 0 0 / 256px 1152px;image-rendering:pixelated}
.portrait-borin{background-position-y:-144px}.portrait-mina{background-position-y:-288px}.portrait-nelis{background-position-y:-432px}.portrait-gaspard{background-position-y:-576px}.portrait-gribsin{background-position-y:-720px}.portrait-maera{background-position-y:-864px}.portrait-alya{background-position-y:-1008px}
.resident-identity h2{margin:0 0 12px;font:400 40px/1.1 Georgia,serif;color:var(--gold-soft)}
.resident-role{margin:0;font-size:13px;line-height:1.7;color:#dce4d7}
.resident-trait{max-width:210px;margin:15px auto 0;font-size:13px;line-height:1.7;color:var(--muted)}
.resident-copy{max-width:720px}
.resident-copy h3{margin:0 0 22px;font:400 clamp(26px,3vw,34px)/1.2 Georgia,serif;color:var(--cream);text-wrap:balance}
.resident-copy>p{font-size:16px;line-height:1.9;color:#c3d0c3;margin:0 0 18px}
.resident-copy blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:2px solid var(--gold);font:italic 23px/1.55 Georgia,serif;color:var(--gold-soft)}
.resident-copy .resident-meeting{margin-bottom:0;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.resident-meeting strong{color:#dce4d7}
.residents-outro{padding:38px;margin-top:12px;background:radial-gradient(ellipse at top right,#264f3655,transparent 70%)}
.residents-outro h2{margin:0;font:400 clamp(28px,4vw,42px)/1.2 Georgia,serif;color:var(--cream)}
.residents-outro>p:not(.eyebrow){line-height:1.8;color:#bccabd}
@media(max-width:720px){.residents-page{padding-top:38px}.resident-index{grid-template-columns:repeat(2,minmax(0,1fr))}.resident-index a{padding:14px}.resident-story{grid-template-columns:1fr;gap:28px;padding:36px 0 42px}.resident-identity{display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:18px;text-align:left;align-items:center}.resident-portrait{grid-row:1/5;width:96px;height:108px;margin:0;background-size:192px 864px}.portrait-borin{background-position-y:-108px}.portrait-mina{background-position-y:-216px}.portrait-nelis{background-position-y:-324px}.portrait-gaspard{background-position-y:-432px}.portrait-gribsin{background-position-y:-540px}.portrait-maera{background-position-y:-648px}.portrait-alya{background-position-y:-756px}.resident-identity .eyebrow{margin-bottom:8px;font-size:9px;letter-spacing:.12em}.resident-identity h2{font-size:34px;margin-bottom:7px}.resident-trait{max-width:none;margin-top:8px}.resident-copy>p{line-height:1.8}.residents-outro{padding:24px}}
@media(prefers-reduced-motion:reduce){.resident-index a{transition:none}}

/* Maëra wears a chestnut braid and copper armour, distinct from Sélène. */
.resident-portrait.portrait-maera {
  background: url('/assets/npcs/maera-v2.png') no-repeat center bottom / 144px 144px;
  image-rendering: auto;
}
@media (max-width: 720px) {
  .resident-portrait.portrait-maera { background-size: 108px 108px; }
}