/* Night sky, scholar constellations and reading surfaces. */
:root {
  --sky-white: #eaf2ff;
  --sky-muted: #b5c8e2;
  --sky-gold: #e1c48e;
  --sky-line: rgba(187, 211, 245, .22);
}
body { background: #071126; color: var(--sky-white); isolation: isolate; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: #071126 url('assets/night-sky.svg') center / cover no-repeat;
}
::selection { background: #e1c48e; color: #102541; }
:focus-visible { outline-color: #e8c98c; }
.site-header { background: rgba(6, 17, 37, .92); border-color: var(--sky-line); backdrop-filter: blur(18px); }
.brand-mark { color: var(--sky-gold); border-color: #a99878; }
.brand-name { color: #f0f5ff; }
.brand-name small { color: #a9bfd9; }
.main-nav a { color: #c1cfe3; }
.main-nav a:hover, .main-nav a[aria-current] { color: #f3d9a9; }
.main-nav a[aria-current]::after, .page-progress > div { background: var(--sky-gold); }
.header-music { color: #e0c797; border-color: #7d8da14d; background: #c2d9ff08; }
.exhibition-hero { border-bottom: 1px solid #7084a14a; }
.hero-shade { background: linear-gradient(90deg, #03152ce8, #07162d69 54%, #07162d12), linear-gradient(0deg, #071126, transparent 37%); }
.hero-bottom { border-color: #b9cce63d; }
.section-kicker { color: #cbdbef; }
h2, h2 em { color: #edf3ff; }
.section-intro { color: #b6c8e0; }
.subtle-link { color: #dfcba8; border-color: #c6d7ef40; }
.subtle-link:hover { color: #fff1d6; border-color: #e4c890; }

.prologue-text > p:not(.section-kicker) { color: #b6c8e0; }
.chapter-tile { border: 1px solid #b6ceee33; box-shadow: 0 15px 35px #02081540; }
.tile-history { background-image: linear-gradient(0deg, #05152aef, #05152a30), url('assets/archive-1.jpg'); }
.tile-people { background: #30437745; color: #ecf2ff; backdrop-filter: blur(5px); }
.tile-people::after {
  content: ''; width: 195px; height: 195px; position: absolute; right: -65px; top: -92px;
  border: 1px solid #c9ad7c60; border-radius: 50%; box-shadow: 0 0 0 19px #b7d3ff06, 0 0 0 20px #b7d3ff20;
}
.tile-journey { color: #eaf1ff; background: url('assets/mountains.svg') bottom / cover no-repeat, #182d4a70; }
.tile-num { color: #ead3ad; }
.tile-arrow { color: #e3c798; }

.chronicle { border-color: var(--sky-line); }
.index-heading, .reading-hint { color: #afc4df; }
.index-heading > span { color: #e3c798; }
.event-index::before { background: #8eaac75c; }
.event-dot { border-color: #111e36; background: #7590b3; }
.event-tab, .tab-year { color: #a7bedb; }
.event-tab.is-visited .event-dot { background: #ddc393; }
.event-tab[aria-selected='true'], .event-tab[aria-selected='true'] .tab-year { color: #f4dbad; }
.event-tab[aria-selected='true'] .event-dot { box-shadow: 0 0 0 1px #ecd3a3, 0 0 16px #e4c58b66; }
.event-panel {
  color: #263e56; background: rgba(244, 248, 255, .96); border-color: #a9c3e25c; border-top-color: #d3b884;
  box-shadow: 0 22px 70px #02091855, 0 0 50px #749edb0b; backdrop-filter: blur(18px);
}
.event-year { color: #234e7d; }
.event-note { background: #e4eaf2a6; }
.event-related button { background: #f2f6fc; }
.chronicle-tail > span { color: #bda77f; }
.chronicle-tail p { color: #b0c3de; }
.chronicle-tail a { color: #e0c79d; }

.people-section {
  position: relative; background: radial-gradient(ellipse at 76% 15%, #7357a522, transparent 62%), #09132d30;
  border-block: 1px solid #a2c2ed24;
}
.constellation-map { height: 300px; position: relative; margin: -3px 0 30px; }
.constellation-lines { position: absolute; inset: 0 0 40px; width: 100%; height: calc(100% - 40px); overflow: visible; }
.constellation-thread { fill: none; stroke: #a6c5ee; stroke-width: 1; opacity: .55; }
.constellation-faint { fill: none; stroke: #9eb9d9; stroke-width: .7; opacity: .23; stroke-dasharray: 3 5; }
.constellation-lines g { fill: #d6e6ff; opacity: .7; }
.constellation-orbit {
  position: absolute; height: 390px; width: 75%; top: -60px; left: 14%; border: 1px solid #b0c7eb16;
  border-radius: 50%; transform: rotate(-10deg); pointer-events: none;
}
.scholar-star {
  position: absolute; width: 130px; padding: 0 10px 12px; transform: translate(-50%, -12px);
  border: 0; background: transparent; color: #f3f6ff; text-align: center;
}
.star-zhu { left: 7%; top: calc(155 / 260 * (100% - 40px)); }
.star-su { left: 23.5%; top: calc(65 / 260 * (100% - 40px)); }
.star-chen { left: 41.5%; top: calc(155 / 260 * (100% - 40px)); }
.star-wang { left: 58%; top: calc(55 / 260 * (100% - 40px)); }
.star-tan { left: 75.5%; top: calc(155 / 260 * (100% - 40px)); }
.star-bei { left: 92%; top: calc(90 / 260 * (100% - 40px)); }
.star-light {
  position: relative; display: block; width: 24px; height: 24px; margin: 0 auto 19px;
  background: radial-gradient(circle, #fff8e6 0 9%, #e5d4a66b 15%, #c5d7ff24 40%, transparent 70%);
  filter: drop-shadow(0 0 9px #b6ccffa8);
}
.star-light::before, .star-light::after { content: ''; position: absolute; background: #ecf2ff; border-radius: 50%; }
.star-light::before { width: 1px; height: 34px; top: -5px; left: 11.5px; }
.star-light::after { height: 1px; width: 24px; left: 0; top: 11.5px; }
.scholar-star strong { display: block; font: 21px var(--serif); letter-spacing: 3px; text-shadow: 0 2px 15px #010713; }
.scholar-star small { display: block; font-size: 9px; color: #abc2e0; margin-top: 10px; letter-spacing: 1px; }
.scholar-star:hover .star-light, .scholar-star:focus-visible .star-light { filter: drop-shadow(0 0 13px #ffe4a2); transform: scale(1.2); }
.scholar-star:hover strong { color: #f5d8a3; }
.constellation-caption { position: absolute; bottom: 0; inset-inline: 0; display: flex; justify-content: space-between; gap: 20px; font-size: 10px; color: #d4bd93; }
.constellation-caption small { font-size: 8px; color: #8fa6c5; }
.people-tools { border-color: var(--sky-line); }
.people-filters button { color: #c1d1e8; }
.people-filters button:hover { border-color: #bdd1ef70; }
.people-filters button[aria-pressed='true'] { color: #172740; background: #e1c48e; }
.people-search { color: #dfcaab; border-color: #98afce77; }
.people-search input { color: #eef4ff; }
.people-search input::placeholder { color: #a1b7d4; }
.gallery-topline { color: #a9bedb; }
.person-card { color: #eef4ff; }
.person-visual { background: #152846; border: 1px solid #bdd2f13d; }
.person-visual::after { border-color: #cfddf421; }
.person-card-copy { padding: 24px 18px 22px; border-color: #a4bdde38; background: linear-gradient(180deg, #2942683d, #0b163149); }
.person-name-row > span { color: #d4bc95; }
.person-roman { color: #9db3d1; }
.person-tagline { color: #e1eafa; }
.person-connection { color: #b0c3dd; }
.person-open { color: #e0c79d; }
.splide__arrow { color: #efdfbf; border-color: #a9bed26b; background: #18294866; }
.splide__arrow:not(:disabled):hover { color: #10233e; background: #e1c48e; border-color: #e1c48e; }
.gallery-footnote { color: #9eb4d1; }
.people-empty { color: #bfcee4; border-color: var(--sky-line); }
.people-empty button { color: #f1d2a1; }
.people-context { border-color: var(--sky-line); }
.people-context > span, .people-context button { color: #e3cca7; }
.people-context > p { color: #b1c4e0; }
.people-context button { border-color: #b7c9e259; }

.journey {
  position: relative;
  background: url('assets/mountains.svg') center bottom / 100% 630px no-repeat, linear-gradient(180deg, #06112621, #0c1d3470 45%, #07152b66);
}
.journey-chapter { border-color: var(--sky-line); }
.journey-chapter > span { color: #e0c596; }
.journey-chapter > div { color: #bed0e7; }
.journey-line { background: #9db8dc6b; }
.route-frame {
  background-color: rgba(12, 32, 57, .79);
  background-image: linear-gradient(#9dbad509 1px, transparent 1px), linear-gradient(90deg, #9dbad509 1px, transparent 1px);
  background-size: 42px 42px; border-color: #9dbbd44a; backdrop-filter: blur(8px); box-shadow: 0 22px 60px #010b1b50;
}
.stop-dot { border-color: #142b47; background: #142b47; }
.route-detail { border-color: var(--sky-line); }
.wartime-stories, .wartime-number { border-color: var(--sky-line); }
.wartime-stories > div > p:not(.small-kicker), .wartime-number p { color: #b6c9df; }

.anthem-section { gap: 90px; }
.anthem-intro, .anthem-tip { color: #b8cae2; }
.record-stage { isolation: isolate; margin-top: 50px; }
.record-stage::before {
  content: ''; position: absolute; z-index: -1; width: 380px; height: 180px; top: 70px; left: -40px;
  border: 1px solid #b4c9e947; border-radius: 50%; transform: rotate(-30deg);
  box-shadow: 0 0 0 18px #b1c8e905, 0 0 0 19px #b1c8e91a, 0 0 80px #8c87d222;
}
.record-stage::after { content: '✦'; position: absolute; top: 45px; right: 0; font-size: 22px; color: #f4dfb9; text-shadow: 0 0 15px #e0c389; }
.record-disc { box-shadow: 0 15px 50px #010817bb, 0 0 45px #a9bdeb22; border: 1px solid #acc2db5c; }
.record-play { border-color: #111f38; background: #ddc18e; color: #152942; }
.record-play:hover { background: #fae0ae; }
.record-caption { color: #a0b7d7; }
.anthem-lyrics {
  padding: 32px 38px; border: 1px solid #a7c1e04d; background: rgba(13, 29, 54, .77);
  box-shadow: 0 16px 50px #01091855; backdrop-filter: blur(12px); align-self: start;
}
.lyrics-topline { border-color: var(--sky-line); }
.lyrics-topline > span { color: #f1e3c8; }
.lyrics-topline small { color: #a5bcda; }
.lyrics-stanza p { color: #dfebfc; }
.stanza-num { color: #ccb48e; }
.lyrics-more summary { border-color: var(--sky-line); color: #e1c99f; }
.lyric-note { background: #6c73861a; border-color: #c4aa7b; }
.lyric-note > span { color: #ead3a9; }
.lyric-note p { color: #b8cbe3; }
.lyric-note small { color: #90a8c6; }

.quiz-wrap { background: radial-gradient(ellipse at 15% 70%, #5a5f8d30, transparent 65%); border-color: var(--sky-line); }
.quiz-intro > p:last-of-type { color: #b9cae2; }
.quiz-step { border-color: #9bb5da6b; color: #b8cbe5; }
.quiz-step.is-current { border-color: #e1c48e; color: #f1ddb7; box-shadow: 0 0 0 3px #b4c5e018; }
.quiz-step.is-complete { background: #dac08e; color: #172943; border-color: #dac08e; }
.quiz-card { background: #f5f8feee; color: #263e56; border-color: #b8cdec7d; border-top-color: #d4b783; box-shadow: 0 20px 65px #01081959; }
.sources { background: linear-gradient(0deg, #071226ba, #0b183340); }
.source-list li, .creation-note { border-color: var(--sky-line); }
.source-list li > span { color: #c8b28e; }
.source-list a { color: #e1ebfa; }
.source-list a:hover { color: #f3d39f; }
.source-list p { color: #adbed6; }
.creation-note summary { color: #d8e6fa; }
.creation-note > div { color: #aebfd8; }
.site-footer { border-color: var(--sky-line); }
.footer-brand { color: #f1e1c1; }
.site-footer > p { color: #b5c7df; }
.site-footer p span { color: #8ca5c5; }
.back-top { color: #dec39a; }
.dialog-heading { background: #0b1d37 url('assets/night-sky.svg') center / cover; }
.music-player { background: rgba(10, 25, 47, .95); border-color: #b2c9e252; color: #ebf2ff; box-shadow: 0 10px 40px #01061366; backdrop-filter: blur(16px); }
.player-toggle { color: #142a43; background: #e0c38e; }
.player-name > span, .player-expand, .player-time, .player-settings { color: #b3c7e3; }
.player-details { border-color: var(--sky-line); }
.player-details input[type='range'] { accent-color: #d3b887; }
.player-settings button { background: #d9c29c16; color: #ecd4ad; border-color: #c9d9ef3d; }
.player-settings button[aria-pressed='false'] { background: transparent; color: #afc0d8; }

@media (max-width: 1100px) {
  .scholar-star { width: 110px; }
  .scholar-star strong { font-size: 19px; }
  .anthem-section { gap: 55px; }
  .anthem-lyrics { padding: 28px; }
}
@media (max-width: 800px) {
  .constellation-map { height: 270px; }
  .scholar-star { width: 100px; }
  .scholar-star strong { font-size: 17px; letter-spacing: 2px; }
  .scholar-star small { font-size: 8px; }
  .constellation-caption { font-size: 9px; }
  .anthem-section { gap: 35px; }
  .anthem-lyrics { padding: 26px 23px; }
  .record-stage::before { width: 270px; height: 140px; top: 50px; left: -18px; }
  .record-stage::after { right: 0; top: 28px; font-size: 18px; }
}
@media (max-width: 560px) {
  .hero-shade { background: linear-gradient(90deg, #03152cdb, #07162d60), linear-gradient(0deg, #071126, transparent 45%); }
  .constellation-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; padding: 14px 0 0; margin: 0 0 28px; gap: 24px 12px; }
  .constellation-lines { display: none; }
  .constellation-orbit { width: 85%; height: 300px; top: 35px; left: 7%; transform: rotate(-25deg); }
  .scholar-star { position: relative; width: 100%; left: auto; top: auto; transform: none; padding: 3px 12px 7px; }
  .star-light { margin-bottom: 13px; }
  .scholar-star strong { font-size: 20px; }
  .scholar-star small { margin-top: 7px; font-size: 9px; }
  .constellation-caption { position: static; grid-column: 1 / -1; flex-wrap: wrap; font-size: 9px; gap: 7px; margin-top: 4px; }
  .constellation-caption small { font-size: 7px; }
  .people-tools { gap: 16px; }
  .person-card-copy { padding: 22px 16px; }
  .journey { background-size: 100% 410px, auto; }
  .anthem-section { gap: 44px; }
  .anthem-lyrics { padding: 26px 23px; }
  .lyrics-topline { align-items: flex-start; flex-direction: column; gap: 9px; }
  .lyrics-topline small { font-size: 9px; }
  .record-stage { margin-top: 40px; }
  .record-stage::before { width: 310px; height: 150px; left: -15px; top: 75px; }
  .record-stage::after { right: 3px; top: 31px; }
  .lyrics-stanza { grid-template-columns: 17px 1fr; gap: 13px; }
  .lyrics-stanza p { font-size: 16px; letter-spacing: 0; }
  .sources { background: #06132966; }
}
@media (max-width: 360px) {
  .record-stage::before { width: 270px; height: 130px; top: 65px; left: -10px; }
  .anthem-lyrics { padding-inline: 19px; }
  .lyrics-stanza { gap: 9px; }
  .lyrics-stanza p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .scholar-star:hover .star-light { transform: none; } }
@media print {
  body { color: #162c46; background: white; }
  body::before, .constellation-map { display: none; }
  .section-kicker, h2, h2 em, .section-intro, .source-list a, .source-list p, .creation-note summary, .creation-note > div { color: #162c46; }
  .people-section, .sources, .quiz-wrap { background: white; }
  .person-card, .person-tagline, .person-connection, .people-context > p { color: #162c46; }
  .anthem-lyrics { background: white; }
  .lyrics-stanza p { color: #162c46; }
}