/* Quiet magic: ink, brass and a brief unfolding of the archive. */
:root{--archive-ease:cubic-bezier(.22,1,.36,1)}
main{view-transition-name:archive-page}
::view-transition-group(archive-page){animation-duration:360ms;animation-timing-function:var(--archive-ease)}
::view-transition-old(archive-page){animation:archive-out 150ms ease both}
::view-transition-new(archive-page){animation:archive-in 360ms var(--archive-ease) both}
::view-transition-group(root){animation:none}
@keyframes archive-out{to{opacity:0;transform:translateY(-5px)}}
@keyframes archive-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.chapter-heading>.eyebrow::after{content:"";display:block;width:52px;height:1px;margin-top:16px;background:linear-gradient(90deg,#b39052,transparent);transform-origin:left;animation:archive-rule 650ms var(--archive-ease) both}
@keyframes archive-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
:is(.topic-card,.student-card,.city-card,.fauna-card){transition:border-color 260ms ease,box-shadow 260ms ease,transform 360ms var(--archive-ease)}
:is(.topic-card,.student-card,.city-card,.fauna-card):focus-within{border-color:#ad8b50;box-shadow:0 5px 24px #8c6d2f16}
@media(hover:hover){:is(.topic-card,.student-card,.city-card,.fauna-card):hover{border-color:#ad8b50;box-shadow:0 8px 28px #8c6d2f19;transform:translateY(-3px)}
:is(.profile-launch,.press-read,.fauna-read,.gold-button){transition:background 220ms ease,box-shadow 220ms ease}
:is(.profile-launch,.press-read,.fauna-read,.gold-button):hover{box-shadow:0 0 18px #c8a36122}}
/* Native dialog keeps focus containment, Escape and backdrop behavior. */
dialog:is(.profile-dialog,.press-dialog,.art-dialog,.fauna-dialog,.city-dialog){border-radius:4px;border-color:#b79a64;box-shadow:0 28px 100px #03091399,0 0 0 4px #c6aa7010;opacity:0;transform:translateY(12px) scale(.985);transition:opacity 220ms ease,transform 320ms var(--archive-ease),display 320ms allow-discrete,overlay 320ms allow-discrete}
dialog:is(.profile-dialog,.press-dialog,.art-dialog,.fauna-dialog,.city-dialog)[open]{opacity:1;transform:none;animation:none}
dialog:is(.profile-dialog,.press-dialog,.art-dialog,.fauna-dialog,.city-dialog)::backdrop{background:#07111dcc;backdrop-filter:blur(6px);opacity:0;transition:opacity 220ms ease,display 320ms allow-discrete,overlay 320ms allow-discrete}
dialog:is(.profile-dialog,.press-dialog,.art-dialog,.fauna-dialog,.city-dialog)[open]::backdrop{opacity:1}
@starting-style{
dialog:is(.profile-dialog,.press-dialog,.art-dialog,.fauna-dialog,.city-dialog)[open]{opacity:0;transform:translateY(12px) scale(.985)}
dialog:is(.profile-dialog,.press-dialog,.art-dialog,.fauna-dialog,.city-dialog)[open]::backdrop{opacity:0}
}
dialog :is(.profile-top,header){position:relative}
dialog :is(.profile-top,header)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#d3b16f,transparent);pointer-events:none}
dialog[open] :is(.profile-top,header)::after{animation:archive-rule 550ms var(--archive-ease) both}
dialog :is(.profile-close,header>button){min-width:44px;min-height:44px;transition:background 200ms ease,color 200ms ease}
.city-dialog .city-dialog-copy{padding:20px 24px 26px}
.city-dialog .city-dialog-copy p{margin:0 0 12px;font-size:16px;line-height:1.9}
.city-dialog .city-dialog-copy a{font-size:14px;color:var(--gold);text-decoration:underline;text-underline-offset:4px}
.city-dialog .art-stage img{max-height:65dvh}
.city-popup-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){
main{view-transition-name:none}
::view-transition-old(archive-page),::view-transition-new(archive-page){animation:none}
.chapter-heading>.eyebrow::after,dialog[open] :is(.profile-top,header)::after{animation:none}
dialog:is(.profile-dialog,.press-dialog,.art-dialog,.fauna-dialog,.city-dialog){transition:none;transform:none}
dialog:is(.profile-dialog,.press-dialog,.art-dialog,.fauna-dialog,.city-dialog)::backdrop{transition:none}
:is(.topic-card,.student-card,.city-card,.fauna-card):hover{transform:none}
}

.chapter-art[data-art="guild"] img{aspect-ratio:4/3;object-fit:contain}

.chapter-art[data-art="factions"] img{aspect-ratio:auto;height:auto;object-fit:contain}
.topic-card[href="#factions"] .topic-art img{object-fit:contain;background:#d4c8b0}