.gallery-main { max-width: 1360px; margin: auto; padding: 48px 5.5% 60px; }
.gallery-filters { flex-wrap: wrap; }
.gallery-intro { max-width: 760px; }.gallery-intro h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(33px,4.5vw,58px); line-height: 1.7; letter-spacing: .06em; margin: 18px 0; }.gallery-intro h1 em { font-style: normal; color: #dbc8a5; }.gallery-intro > p { color: #b5becc; font-size: 13px; }.gallery-intro > .eyebrow { color: var(--gold); font-size: 10px; }.gallery-note { color: #8e9caf !important; font-size: 10px !important; line-height: 1.9; }.gallery-intro .text-button { display: inline-block; margin-top: 10px; }
.gallery-controls { margin: 35px 0 22px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: end; gap: 16px 24px; }.gallery-search { display: block; flex: 1 1 260px; font-size: 10px; color: #afbdcf; }.gallery-search input { display: block; width: 100%; padding: 11px 14px; margin-top: 7px; border: 1px solid #536175; background: #172538; color: var(--paper); font: inherit; font-size: 13px; }.gallery-search input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }.gallery-filters { display: flex; gap: 7px; }.gallery-filters button { padding: 10px 14px; border: 1px solid #536175; background: transparent; color: #bcc8d8; font-size: 12px; }.gallery-filters button[aria-pressed=true] { background: #c9ae7b; color: #142033; border-color: var(--gold); }.gallery-filters span { font-family: Georgia,serif; margin-left: 7px; }.gallery-controls > p { margin: 0; min-width: 90px; color: #9eacc0; font-size: 11px; }
.character-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px 18px; }.character-tile { min-width: 0; border: 1px solid #c9ae7b35; background: #192638; }.character-image-button { border: 0; padding: 0; width: 100%; display: block; background: #fbf7ed; }.character-image-button:hover img { transform: scale(1.025); }.character-image-button img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: contain; transition: transform .2s; }.character-tile-copy { padding: 14px 14px 18px; }.character-tile-copy .eyebrow { font-size: 8px; }.character-tile h2 { font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.7; margin: 7px 0; color: #ede3d1; }.character-tile-copy > p:last-child { font-size: 10px; color: #a8b4c5; line-height: 1.9; margin: 0; }.gallery-about { max-width: 760px; border-top: 1px solid var(--line); padding-top: 28px; margin-top: 40px; }.gallery-about h2 { font-family: var(--serif); font-weight: 500; font-size: 23px; }.gallery-about p { color: #9baabd; font-size: 11px; }.gallery-main > #gallery-empty { padding: 40px 0; color: #b9c4d3; }
#character-dialog { width: 520px; max-height: 92vh; overflow: auto; }#character-dialog-close { display: block; margin: 0 0 12px auto; }#character-dialog-image { width: 100%; height: auto; display: block; margin-bottom: 20px; background: #fbf7ed; }#character-dialog h2 { margin: 10px 0; }#character-dialog-features { color: var(--gold); font-size: 10px; }
@media(max-width:1000px) { .character-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }@media(max-width:680px) { .gallery-main { padding: 30px 6% 40px; }.character-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 12px; }.character-tile h2 { font-size: 15px; }.character-tile-copy { padding: 11px 10px 14px; }.character-tile-copy > p:last-child { font-size: 9px; }.gallery-controls { align-items: center; }.gallery-filters button { padding: 9px 12px; }.gallery-controls > p { margin-left: auto; }.gallery-intro > p { font-size: 12px; } }