/* Approved Celestial composition: artwork, ornament and readable live controls. */
.celestial{--paper:#fcf9f0;--gold:#b38331;--line:#d9c59f}
.celestial h3{border:0;text-transform:none;letter-spacing:0}
.celestial h2{letter-spacing:-.5px}
.celestial .site-shell{max-width:1280px;margin:20px auto;background:radial-gradient(ellipse at 20% 50%,#efe7d338,transparent 65%),#fffcf5;outline:none;border:0;position:relative}
.site-shell:after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;border:42px solid transparent;border-image:url('../img/ornate-frame.png') 220 290 stretch;border-image-width:42px}
.framed{position:relative;border:0!important;border-radius:0!important;overflow:visible;background-color:#fffaf0}
.framed:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;border:22px solid transparent;border-image:url('../img/ornate-frame.png') 220 290 stretch;border-image-width:22px}
.reference-art{position:relative;display:block;overflow:hidden;flex-shrink:0}
.reference-art>img{position:absolute;max-width:none!important;object-fit:fill!important;margin:0!important;padding:0!important;border:0!important}
.site-header{flex-wrap:nowrap;height:76px;min-height:76px;margin:35px 20px 0 275px;padding:8px 25px 8px 12px;gap:16px;border:1px solid #d4b16c;box-shadow:inset 0 0 0 3px #e9e4b83d;background:linear-gradient(100deg,#17548bd9,#072d5ae8);border-radius:3px}
.site-header nav{order:0;width:auto;gap:25px;flex:1;justify-content:space-between}.site-header nav a{font-size:16px;font-weight:600;white-space:nowrap}
.wordmark{position:absolute;left:-255px;top:-27px;width:245px;z-index:4}.wordmark img{width:100%;height:auto;filter:drop-shadow(0 4px 4px #142f6a70)}
.landing-page .site-shell{padding-top:1px;background-image:linear-gradient(#ebf8ff00 90px,#fffaf5 580px),url('../img/hero.png');background-size:100% 600px,auto 660px;background-repeat:no-repeat;background-position:center top}
.hero{min-height:520px;margin-top:0;border:0;background-position:center center;background-size:cover;background-color:transparent}
.hero-copy{width:65%;margin-left:12%;padding:42px 0 0}.hero-copy>.eyebrow,.hero-copy>p:not(.eyebrow){display:none}
.hero h1{font-family:Cinzel,Georgia,serif;font-size:clamp(38px,4.9vw,64px);font-weight:600;line-height:1.06;letter-spacing:-1px;color:#fce4a3;text-shadow:1px 2px #714b22,-1px -1px #fff3c6,0 4px 7px #183e6e}.hero .ornament{color:#c99b38;margin:20px 0 30px;text-shadow:0 1px white}.actions{gap:27px;margin-top:0}.celestial .button{border-radius:0;clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);outline:none;border:2px solid #b2883e;box-shadow:inset 0 0 0 2px #e9d19a,inset 0 0 0 4px #ffffff70;padding:11px 27px;font-family:Georgia,serif;font-size:17px;font-weight:bold;min-height:43px}.celestial .button:hover{filter:brightness(1.15)}
.status-strip{margin:0 14px;padding:15px 35px;position:relative;border:0;background:#fffdf6;box-shadow:0 3px 6px #8f7d5633}.status-strip:after{content:'';position:absolute;inset:-4px;pointer-events:none;border:16px solid transparent;border-image:url('../img/ornate-frame.png') 220 290 stretch;border-image-width:16px}.home-body{padding:30px 28px 24px}.news-layout{grid-template-columns:2fr 1fr;gap:32px}.ruled{font-family:Georgia,serif!important;font-size:27px!important;text-transform:none;margin-bottom:20px;gap:15px}.home-content .ruled{text-transform:uppercase}.ruled:after{height:1px;background:linear-gradient(90deg,#d0a65f,#e8dcc7)}.card{box-shadow:0 4px 7px #6a573d20;padding:11px 11px 7px}.news-art{width:100%;height:145px}.card-copy{padding:13px 10px 8px}.card-copy h3{font-family:Georgia,serif;font-size:20px;text-transform:uppercase;line-height:1.15}.card-copy p{font-size:16px;min-height:64px;line-height:1.25;margin:8px 0}.card-copy a{font-size:16px}.explore{margin-top:33px}.explore>h2{font-size:39px;text-transform:uppercase;margin-bottom:24px}.explore-grid{gap:21px}.celestial .explore-card{min-height:190px;outline:none;background:#fcf9ef;box-shadow:0 3px 6px #67513b25;padding:10px;display:grid;grid-template-columns:46% 54%}.explore-art{width:100%;height:100%;min-height:166px}.explore-card>div{padding:18px 10px}.explore-card h3{font-family:Georgia,serif;text-transform:uppercase;font-size:22px}.explore-card p{font-size:16px}.explore-card span:not(.reference-art){font-size:24px}.journey{position:relative;padding:35px 15px 30px;min-height:225px;background:linear-gradient(90deg,#e9f6ff40,#fffdf0c9 35%,#fffdf0a0 70%,#daf2ff20),url('../img/hero.png') center 65%/cover;border-block:2px solid #c0a068}.journey h2{color:#5b3917;font-size:43px;text-transform:uppercase;margin-bottom:16px}.journey p{color:#193656;font-size:19px}.site-footer{padding:22px 42px;min-height:78px;background:linear-gradient(100deg,#0e3868,#1b5280,#0c315c);border-top:2px solid #cfa654}.footer-brand{font-size:28px!important}.site-footer>span{display:none}.site-footer small{font-size:12px}
/* Account overview follows the full illustrated dashboard composition. */
.hub-page .site-shell{padding-top:0}.hub-masthead{height:160px;background:linear-gradient(90deg,#ebf6ff10,#e9f5ff9c 50%,#c6e8ff10),url('../img/hero.png') center 38%/cover;position:relative;text-align:center;padding:35px 15px 0 280px}.hub-masthead>a{position:absolute;left:25px;top:15px;width:245px}.hub-masthead img{width:100%;filter:drop-shadow(0 3px 3px #1c436987)}.hub-masthead h1{font-family:Georgia,serif;font-size:39px;text-transform:uppercase;color:#694715;text-shadow:0 2px white;margin:15px 0 4px}.hub-masthead p{font-family:Cinzel,Georgia,serif;font-size:17px;letter-spacing:2px}.hub-page .site-header{margin:0 8px;height:57px;min-height:57px;padding:5px 30px}.hub-page .wordmark{display:none}.hub-page .site-header nav{justify-content:space-around}.hub-page .site-header .button{font-size:15px}.hub-content{padding:14px 15px 20px}.hub-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:22px}.account-sidebar{display:flex;flex-direction:column;padding:12px 9px 0;background:linear-gradient(#fffcf7,#f6f3ea);min-height:1300px}.sidebar-title{height:135px;text-align:center;padding:12px 0 10px}.sidebar-title img{width:165px;height:83px;object-fit:contain}.sidebar-title>span{display:block;font:20px Georgia,serif;margin-top:4px}.account-sidebar nav{position:relative;z-index:4}.account-sidebar nav>a{display:flex;align-items:center;gap:13px;color:#352922;font:18px Georgia,serif;border-block-end:1px solid #c5b9a4;margin:0 5px;padding:17px 12px;min-height:58px}.account-sidebar nav>a>span{font-size:24px;color:#76603c;width:25px;text-align:center}.account-sidebar nav>a.selected{background:linear-gradient(#39a8e7,#1766ad);box-shadow:inset 0 0 0 2px #c8e9ff,inset 0 0 0 4px #ffffff55;border:1px solid #b58b40;color:white;margin:0 -7px;clip-path:polygon(0 0,96% 0,100% 50%,96% 100%,0 100%,4% 50%);padding-left:24px}.account-sidebar nav>a.selected>span{color:#fff1bf}.sidebar-scenery{width:100%;flex:1;min-height:550px;margin-top:12px}.hub-main{min-width:0;padding:4px 0 0}.hub-greeting h1{font-family:Georgia,serif;font-size:35px;margin:0 0 8px;line-height:1.15}.hub-greeting p{font-size:15px;color:#746b72;margin-bottom:21px}.character-overview{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:15px;margin-bottom:23px}.selected-character{min-height:302px;overflow:hidden;background:linear-gradient(100deg,#e0effe,#fffaf0)}.selected-label{position:absolute;left:18px;right:18px;top:9px;z-index:2;text-align:center;background:linear-gradient(90deg,transparent,#275c86dd,transparent);font-family:Georgia,serif;text-transform:uppercase;letter-spacing:3px;color:#fff0c7;font-size:13px;padding:4px}.selected-portrait{position:absolute;inset:30px 0 0;width:56%;height:calc(100% - 30px)}.selected-details{position:relative;margin-left:54%;padding:54px 18px 18px 4px;z-index:2;background:linear-gradient(90deg,transparent,#fffaf3df 18%);min-height:302px}.selected-details h2{font-family:Georgia,serif;font-size:35px;margin:6px 0 9px;overflow-wrap:anywhere}.selected-details p{font-family:Georgia,serif;font-size:17px;margin:0 0 10px}.selected-details .character-job{font-size:18px}.selected-details .character-meta{font-family:'Source Sans 3',Arial,sans-serif;line-height:1.6}.selected-details .button{font-size:15px;padding:9px 13px;width:100%}.balance-panels{display:grid;grid-template-rows:1fr 1.2fr;gap:15px}.balance-panel,.mail-panel{display:flex;align-items:center;gap:8px;padding:17px 13px 17px 12px;background:linear-gradient(#fffdf7,#f8f1e5)}.panel-icon{width:80px;height:85px}.balance-panel p{font-size:14px;margin:0 0 5px}.balance-panel strong{font:bold 27px Georgia,serif;white-space:nowrap}.balance-panel span:not(.reference-art){font:18px Georgia,serif}.mail-panel h3{font-size:24px;font-family:Georgia,serif;margin:0 0 5px}.mail-panel strong{display:block;font:bold 21px Georgia,serif;margin-bottom:10px}.mail-panel .button{font-size:15px;padding:6px 22px;min-height:35px}.character-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.character-card{padding:10px;background:#fffdf7;box-shadow:0 4px 7px #57452a22;overflow:hidden}.card-portrait{width:100%;aspect-ratio:1.38}.character-card-details{position:relative;text-align:center;padding:0 7px 10px}.job-plaque{font:18px Georgia,serif!important;color:#5a4120;background:linear-gradient(#fff9e5,#e8d9b7);border:1px solid #c4a666;margin:-5px auto 5px!important;padding:5px 9px;position:relative;display:table;min-width:130px}.character-card h3{font:bold 28px Georgia,serif;margin:0 0 7px;overflow-wrap:anywhere}.character-card-details>p:not(.job-plaque){font:15px Georgia,serif;margin:0 0 10px}.character-card .button{min-height:33px;padding:5px 17px;font-size:15px}.active-character{box-shadow:0 0 0 2px #579fcb,0 4px 7px #57452a22}.art-caption{font-size:12px!important;color:#817b71;margin:9px 0 19px!important}.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.quick-card{color:var(--navy)!important;background:#fffaf0;box-shadow:0 3px 6px #67513b25;padding:10px;text-decoration:none!important}.quick-art{width:100%;height:100px}.quick-card>div{padding:10px 7px 8px}.quick-card h3{font:bold 21px Georgia,serif;margin-bottom:5px}.quick-card p{font-size:14px;line-height:1.3;margin:5px 0}.quick-card div>span{font-size:14px;text-decoration:underline}.account-activity{margin-top:23px}.section-heading{display:flex;align-items:center;gap:10px;justify-content:space-between}.section-heading h2{flex:1;margin-bottom:13px}.section-heading .button{font-size:14px;min-height:28px;padding:4px 16px}.activity-list{padding:10px 20px;background:#fffcf8}.activity-row{display:flex;align-items:center;gap:18px;padding:10px 5px;border-bottom:1px solid #ddcfb8}.activity-row:last-child{border:0}.activity-icon{font-size:25px;color:#916f35;width:39px;height:39px;border:1px solid #c5b78b;border-radius:50%;text-align:center;background:#eee5d0}.activity-row strong{font:bold 17px Georgia,serif}.activity-row p{font-size:14px;margin:3px 0 0}.activity-row time{margin-left:auto;font-size:13px;color:#5f5c61;white-space:nowrap}.account-bottom{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:25px}.bottom-panel{min-height:156px;padding:20px 120px 18px 22px;background:#fffaf0}.bottom-panel h2{font:bold 24px Georgia,serif;margin-bottom:9px;white-space:nowrap}.bottom-panel p{font-size:14px;line-height:1.3;margin-bottom:12px}.bottom-panel .button{font-size:14px;padding:5px 17px;min-height:32px;white-space:nowrap}.bottom-art{position:absolute;right:10px;top:30px;width:110px;height:105px}.hub-page .site-footer{background:linear-gradient(#fffef5d9,#e5f2f9aa),url('../img/hero.png') center 40%/cover;justify-content:center;color:#173250;padding:28px 25px}.hub-page .site-footer a{color:#173250}.hub-page .site-footer .footer-brand{color:#785424!important}.hub-records{padding:30px;min-height:350px}.records-scroll{overflow-x:auto}.hub-records table{width:100%;border-collapse:collapse}.hub-records td,.hub-records th{padding:12px;border-bottom:1px solid #dbcaa9;text-align:left}.hub-records th{background:#e6eff5}
@media(max-width:1100px){.site-header{margin-left:230px;padding-inline:12px}.wordmark{width:205px;left:-215px}.site-header nav{gap:12px}.site-header nav a{font-size:14px}.hero{min-height:460px}.hub-layout{grid-template-columns:190px minmax(0,1fr);gap:16px}.account-sidebar nav>a{font-size:16px;padding-inline:7px}.hub-masthead{height:145px}.selected-details{padding-right:13px}.selected-details h2{font-size:29px}.selected-details p{font-size:15px}.panel-icon{width:58px;height:68px}.balance-panel strong{font-size:22px}.mail-panel strong{font-size:18px}.character-card h3{font-size:25px}.character-card-details>p:not(.job-plaque){font-size:13px}.bottom-panel{padding-right:75px}.bottom-art{width:70px;height:90px;top:55px}.bottom-panel h2{font-size:22px}.explore-card h3{font-size:20px}}
@media(max-width:800px){.site-header{height:auto;min-height:75px;margin:20px 12px 0 200px;flex-wrap:wrap}.wordmark{width:180px;top:-3px;left:-188px}.site-header nav{order:0;gap:11px;flex-wrap:wrap;justify-content:center}.site-header>.button{margin:auto}.hero{min-height:440px}.hero-copy{width:85%;margin-left:8%;padding-top:45px}.home-body{padding:25px 20px}.news-layout{grid-template-columns:1fr}.news-layout>section:last-child .card{display:block}.explore-grid{grid-template-columns:repeat(2,1fr)}.news-art{height:160px}.hub-masthead{padding-left:200px}.hub-masthead>a{width:180px;left:15px;top:25px}.hub-masthead h1{font-size:29px}.hub-page .site-header{padding-inline:15px}.hub-layout{grid-template-columns:150px minmax(0,1fr);gap:14px}.sidebar-title img{width:120px}.sidebar-title{height:110px}.account-sidebar nav>a{font-size:14px;gap:5px;padding:13px 3px}.account-sidebar nav>a>span{font-size:19px}.account-sidebar nav>a.selected{padding-left:12px}.hub-greeting h1{font-size:27px}.character-overview{grid-template-columns:1fr}.balance-panels{grid-template-columns:1fr 1fr;grid-template-rows:auto}.selected-character,.selected-details{min-height:280px}.balance-panel,.mail-panel{padding:15px 9px}.panel-icon{width:45px;height:55px}.balance-panel strong{font-size:19px}.balance-panel span:not(.reference-art){font-size:13px}.mail-panel strong{font-size:15px}.mail-panel h3{font-size:20px}.mail-panel .button{font-size:12px;padding:5px 14px}.character-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-grid{grid-template-columns:1fr}.quick-card{display:grid;grid-template-columns:42% 58%}.quick-art{height:125px}.account-bottom{grid-template-columns:1fr}.activity-row{gap:8px;flex-wrap:wrap}.activity-row time{margin-left:47px}.hub-page .ruled{font-size:25px!important}.section-heading{flex-wrap:wrap}.account-sidebar{min-height:100%}}
@media(max-width:540px){.site-shell:after{border-image-width:25px}.celestial .site-shell{margin:0}.site-header{margin:20px 10px 0 152px;padding:8px}.wordmark{width:140px;top:-2px;left:-145px}.site-header nav a{font-size:12px}.site-header nav{gap:8px 11px}.site-header .button{font-size:12px;padding:5px 17px;min-height:28px}.hero{min-height:445px}.hero-copy{width:100%;margin:0;padding:45px 10px 0;background:transparent}.hero h1{font-size:39px}.actions{gap:14px}.actions .button{font-size:14px!important;padding:9px 15px!important}.status-strip{padding:13px;font-size:12px}.two-cards,.explore-grid{grid-template-columns:1fr}.home-body{padding:22px 16px}.explore>h2{font-size:29px}.explore-art{min-height:140px}.journey h2{font-size:31px}.hub-masthead{height:125px;padding:18px 10px 0 140px}.hub-masthead>a{width:135px;left:8px;top:27px}.hub-masthead h1{font-size:24px;margin-top:15px}.hub-masthead p{font-size:11px}.hub-page .site-header{min-height:60px;padding:10px}.hub-content{padding:12px}.hub-layout{display:block}.account-sidebar{min-height:0;padding:9px;margin-bottom:20px}.sidebar-title,.sidebar-scenery{display:none}.account-sidebar nav{display:grid;grid-template-columns:repeat(2,1fr)}.account-sidebar nav>a{min-height:43px;padding:7px 10px;font-size:14px}.account-sidebar nav>a.selected{margin:0;padding-left:12px}.hub-greeting h1{font-size:29px}.character-cards{gap:12px}.character-card{padding:8px}.character-card h3{font-size:23px}.job-plaque{min-width:0;font-size:15px!important;padding:4px}.character-card .button{font-size:12px;padding:5px 9px}.quick-card h3{font-size:21px}.hub-page .site-footer{gap:13px}.hub-page .site-footer .footer-brand{width:100%;text-align:center}.hub-records{padding:25px 14px}.character-card-details{padding-inline:2px}}

.session-actions{text-align:right;padding:8px 28px 14px;background:#f7f3e9;font-size:14px}


/* Keep legacy theme breakpoints from changing the redesigned component layout. */
.news-layout > section:last-child .card {
    display: block;
}
.hero-copy {
    background: transparent;
}
.hub-masthead h1 {
    overflow-wrap: anywhere;
}
.selected-details,
.balance-panel > div,
.mail-panel > div,
.explore-card > div {
    min-width: 0;
}
.balance-panel strong {
    font-size: clamp(17px, 2vw, 27px);
    overflow-wrap: anywhere;
    white-space: normal;
}
.character-card-details > p:not(.job-plaque) {
    line-height: 1.5;
}
@media (max-width: 800px) {
    .site-header {
        height: auto;
        flex-wrap: wrap;
    }
    .site-header nav {
        flex-basis: 100%;
    }
    .hub-page .site-header {
        height: auto;
        min-height: 70px;
    }
    .hub-page .site-header > .button {
        margin: 2px auto;
    }
}
/* Match the source artwork ratio instead of stretching it with the sidebar. */
.sidebar-scenery {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 181 / 851;
}
.card-portrait {
    aspect-ratio: 235 / 161;
}

/* Modern primary navigation */
.celestial .site-header.modern-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    height: auto;
    min-height: 88px;
    margin: 18px 20px;
    padding: 10px 22px;
    border: 1px solid #6b9fbd;
    border-radius: 16px;
    background: linear-gradient(120deg, #183b59f5, #0b223bf5);
    box-shadow: inset 0 1px #d2edff50, 0 6px 20px #081b3230;
}
.celestial .modern-header .wordmark {
    display: block;
    position: static;
    flex: 0 0 160px;
    width: 160px;
    margin: 0;
}
.celestial .modern-header .wordmark img { display: block; width: 100%; height: auto; }
.celestial .modern-header nav {
    display: flex;
    flex: 1;
    width: auto;
    justify-content: center;
    gap: 4px;
    order: 0;
}
.celestial .modern-header nav a {
    position: relative;
    padding: 12px 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #e1edf6;
    font: 600 16px/1.2 'Source Sans 3', sans-serif;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.celestial .modern-header nav a:hover,
.celestial .modern-header nav a[aria-current=page] {
    background: #62b9df1c;
    border-color: #75c6e349;
    color: #9ce9ff;
}
.celestial .modern-header nav a[aria-current=page]::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 30%;
    right: 30%;
    height: 2px;
    background: #77dafa;
    border-radius: 2px;
}
.celestial .modern-header > .button {
    flex-shrink: 0;
    padding: 11px 20px;
    border: 1px solid #a9dded;
    border-radius: 9px;
    clip-path: none;
    background: linear-gradient(#58c2df, #2686b2);
    color: #082c43;
    font: 700 15px/1.2 'Source Sans 3', sans-serif;
    box-shadow: inset 0 1px #d8f7ff;
}
.celestial .modern-header a:focus-visible { outline: 3px solid #a0e6ff; outline-offset: 3px; }
@media (max-width: 1050px) {
    .celestial .site-header.modern-header { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
    .celestial .modern-header .wordmark { margin-right: auto; }
    .celestial .modern-header nav { order: 3; flex-basis: 100%; flex-wrap: wrap; }
}
@media (max-width: 550px) {
    .celestial .site-header.modern-header { margin: 10px; border-radius: 12px; }
    .celestial .modern-header .wordmark { flex-basis: 135px; width: 135px; }
    .celestial .modern-header nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .celestial .modern-header nav a { text-align: center; padding: 11px 6px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .celestial .modern-header nav a { transition: none; }
}