/* Full source paragraphs inherit each concept's palette and reading layout. */
.complete-copy { min-width: 0; overflow-wrap: anywhere; }
.complete-copy p { font-size: 16px; line-height: 1.95; word-break: keep-all; }
.complete-copy p + p { margin-top: 1em; }
.complete-copy .eyebrow { font-size: 13px; }
.complete-home-copy { max-width: 580px; margin: 20px 0; }
.complete-home-copy > span { font-size: 14px; }
.complete-home-copy p { font-size: 16px; line-height: 1.8; margin-top: 12px; word-break: keep-all; }
.story-overview { margin-bottom: 30px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.world-overview { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.character-introduction { margin: 0 0 24px; padding: 14px 0; border-block: 1px solid var(--line); }
.character-introduction summary { cursor: pointer; font-size: 16px; color: var(--accent); }
.character-introduction .complete-copy { margin-top: 16px; }
.team-values > h3 { margin-bottom: 24px; }
.team-values > details > .complete-copy { padding: 20px 0 24px 32px; }
.team-values .complete-copy .complete-copy { padding: 0; }
.story-grid .complete-copy p { margin-top: 16px; }
.hero-tagline, .hero-description { max-width: 600px; word-break: keep-all; }
.archive-title > p:not(.eyebrow) { max-width: 700px; margin-inline: auto; }
.ink-bottom > p { max-width: 540px; word-break: keep-all; }
.source-lines .complete-copy { min-width: 0; }
.credit-slide .complete-copy, .team-billboard .complete-copy { margin-top: 24px; }
.credit-pagination { flex-wrap: wrap; }
.stage-team { align-items: start; }
.stage-team > .inset-scroll { max-height: 100%; }
.atlas-title .complete-home-copy { max-width: 440px; }
.atlas-home { height: auto; min-height: 100%; padding-bottom: 0; }
@media (max-width: 760px) {
  .team-values > details > .complete-copy { padding-left: 0; }
  .complete-home-copy p { font-size: 15px; }
  .stage-team > .inset-scroll { max-height: none; overflow: visible; }
}

/* The main screen owns scrolling; these pages never create inner scroll panes. */
.theme-atlas .reading-page { height: auto; min-height: 100%; align-items: start; }
.reading-page .book-page,
.reading-page .colophon-body { height: auto; max-height: none; overflow: visible; min-width: 0; }
.reading-page .book-page { justify-content: flex-start; gap: 0; }
.reading-page .book-frontispiece,
.reading-page .colophon-title { position: sticky; top: 0; align-self: start; }
.reading-page .book-frontispiece { gap: 28px; }
.reading-page .colophon-title { padding-block: 45px; }
.reading-intro .complete-copy { margin-top: 26px; }
.reading-topic { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.reading-topic h2 { margin: 14px 0 22px; font: 600 clamp(23px, 2.4vw, 32px)/1.6 var(--body); word-break: keep-all; }
.reading-page .folio-label { font-size: 13px; }
@media (max-width: 760px) {
  .reading-page .book-frontispiece,
  .reading-page .colophon-title { position: static; align-self: stretch; }
  .reading-topic { margin-top: 32px; padding-top: 26px; }
}

/* Give character descriptions a quiet surface over the detailed city backdrop. */
.theme-atlas .portrait-story {
  width: 100%;
  padding: clamp(22px, 2.5vw, 38px);
  background: rgba(12, 24, 38, .96);
  border: 1px solid rgba(218, 189, 133, .35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .24);
  color: #f2ecdf;
  --muted: #c9c2b3;
  --accent: #e4c991;
}
@media (max-width: 760px) {
  .theme-atlas .portrait-story { padding: 24px 20px; }
}

/* Weekly minutes use the atlas paper surface and remain fully expanded. */
.meetings-heading { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.meetings-heading h2 { margin: 14px 0 12px; font: 600 clamp(25px, 2.5vw, 34px)/1.5 var(--body); }
.meetings-heading > p, .meeting-note { font-size: 16px; line-height: 1.9; color: var(--muted); }
.meeting-week { margin-top: 38px; padding: clamp(20px, 2vw, 30px); border: 1px solid var(--line); background: rgba(255, 255, 255, .24); }
.meeting-week-heading { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.meeting-week-heading h3 { margin-top: 12px; font: 600 clamp(20px, 1.8vw, 25px)/1.65 var(--body); word-break: keep-all; }
.meeting-note { margin-top: 14px; }
.meeting-role { padding: 24px 0; border-bottom: 1px solid var(--line); }
.meeting-role:last-child { padding-bottom: 0; border-bottom: 0; }
.meeting-role h4 { margin: 0 0 16px; font: 600 19px/1.6 var(--body); color: var(--accent); }
.meeting-role-content { display: grid; gap: 20px; }
.meeting-role h5 { margin: 0 0 10px; font: 600 14px/1.6 var(--sans); color: var(--muted); }
.meeting-role ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.meeting-role li { font-size: 16px; line-height: 1.9; word-break: keep-all; overflow-wrap: anywhere; }
.meeting-role li + li { margin-top: 7px; }
.meeting-next { padding: 16px 18px; background: rgba(120, 99, 57, .07); border-left: 2px solid var(--line); }
@media (max-width: 760px) {
  .meeting-week { padding: 20px 16px; margin-top: 26px; }
  .meeting-next { padding: 14px; }
}

/* Preserve the transparent CI on the atlas's light paper surface. */
.reading-page .colophon-title--ci {
  padding: 32px clamp(20px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.colophon-title--ci .team-ci { display: block; width: 100%; max-width: 430px; height: auto; object-fit: contain; }
.colophon-title--ci h1 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: .06em; line-height: 1.5; }
.colophon-title--ci > span:last-child { margin-top: 0; }
@media (max-width: 760px) {
  .reading-page .colophon-title--ci { padding: 28px 24px; gap: 16px; }
  .colophon-title--ci .team-ci { max-width: 320px; }
}

/* Development notes flow inside the journal's paper; the screen handles scrolling. */
.atlas-journal.reading-page { height: auto; align-items: start; }
.atlas-journal.reading-page > aside { position: sticky; top: 20px; }
.atlas-journal .journal-paper { min-width: 0; --line: #78633940; }
.atlas-journal .journal-volume b { font-size: clamp(32px, 4vw, 56px); }
@media (max-width: 760px) {
  .atlas-journal.reading-page { align-items: stretch; }
  .atlas-journal.reading-page > aside { position: static; }
}

/* Larger world topics stay inside the map even with their full names. */
.atlas-map { min-height: 480px; }
.map-pin {
  max-width: calc(100% - 32px);
  min-height: 60px;
  padding: 12px 18px 12px 12px;
  gap: 12px;
}
.map-pin > span { flex-shrink: 0; width: 34px; height: 34px; font-size: 13px; }
.map-pin strong { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.4; white-space: normal; word-break: keep-all; }
.map-pin.pin-0 { top: 38%; }
.map-pin.pin-1 { left: auto; right: 6%; top: 55%; transform: translateY(-50%); }
.map-pin.pin-2 { left: 6%; top: 72%; transform: translateY(-50%); }
.map-pin.pin-3 { top: 87%; }
@media (max-width: 760px) {
  .atlas-map { min-height: 460px; }
  .map-pin { min-height: 50px; padding: 9px 13px 9px 9px; gap: 9px; }
  .map-pin > span { width: 30px; height: 30px; font-size: 12px; }
  .map-pin strong { font-size: clamp(14px, 3.8vw, 16px); }
}

/* Fit portraits by character height, regardless of the source canvas width. */
.portrait-slot.has-art > img {
  position: absolute;
  inset: auto auto 0 50%;
  width: auto;
  max-width: none;
  height: var(--portrait-art-height, 92%);
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
}
.portrait-slot::after { bottom: 10px; }
.portrait-main > .portrait-slot { border-bottom: 0; }

/* Compensate for transparent headroom in the square source canvases.
   Visible figure height: 92% of the frame; the bottom remains flush. */
.portrait-slot.has-art > img[src="assets/characters/ihon.png"] {
  --portrait-art-height: 97.13%; /* 92% / (1364 / 1440) */
}
.portrait-slot.has-art > img[src="assets/characters/mago.png"] {
  --portrait-art-height: 99.76%; /* 92% / (1328 / 1440) */
}

/* The cast directory stays in place while the portrait and story change. */
.atlas-cast { grid-template-rows: auto minmax(0, 1fr); }
.atlas-cast .portrait-carousel {
  display: grid;
  grid-template-columns: minmax(140px, .48fr) minmax(0, .95fr) minmax(0, 1.3fr);
  gap: clamp(18px, 3vw, 48px);
  align-items: stretch;
}
.cast-directory { min-height: 0; display: flex; flex-direction: column; background: #101e2be8; border: 1px solid var(--line); }
.cast-directory-heading { padding: 18px 16px; border-bottom: 1px solid var(--line); }
.cast-directory-heading small { display: block; margin-top: 7px; font-size: 11px; color: var(--muted); }
.cast-name-list { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 10px; scrollbar-width: thin; scrollbar-color: #bba37466 transparent; scroll-padding-block: 12px; }
.cast-name-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 12px 10px; text-align: left; border: 1px solid transparent; border-radius: 3px; color: var(--muted); transition: background .25s, border-color .25s, color .25s; }
.cast-name-list button + button { margin-top: 6px; }
.cast-name-list strong { font: 500 16px/1.5 var(--body); transform-origin: left center; transition: transform .28s ease; white-space: nowrap; }
.cast-number { font: 10px var(--mono); opacity: .65; }
.cast-indicator { margin-left: auto; opacity: 0; color: var(--accent); }
.cast-name-list button:hover { color: var(--text); background: #e4c9910d; }
.cast-name-list button.selected { color: #f3e2b8; background: #d9bc7c1a; border-color: #d9bc7c66; }
.cast-name-list button.selected strong { transform: scale(1.1); }
.cast-name-list button.selected .cast-indicator { opacity: 1; }
.cast-name-list button:focus-visible { outline-offset: -3px; }
.atlas-cast .portrait-main { width: 100%; max-width: none; min-width: 0; }
@keyframes cast-portrait-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cast-story-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .atlas-cast .portrait-main { animation: cast-portrait-in .45s ease-out both; }
  .atlas-cast .portrait-story { animation: cast-story-in .45s .08s ease-out both; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .atlas-cast .portrait-carousel { grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; }
  .atlas-cast .portrait-story { padding: 22px 18px; }
}
@media (max-width: 760px) {
  .atlas-cast .portrait-carousel { grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: 350px auto; gap: 20px 12px; }
  .cast-directory-heading { padding: 12px 10px; }
  .cast-directory-heading .folio-label { font-size: 10px; letter-spacing: 1px; }
  .cast-directory-heading small { font-size: 9px; }
  .cast-name-list { padding: 8px 5px; }
  .cast-name-list button { padding: 12px 7px; gap: 7px; min-height: 48px; }
  .cast-name-list strong { font-size: 14px; }
  .cast-number { font-size: 9px; }
  .cast-indicator { display: none; }
  .atlas-cast .portrait-main { height: 350px; padding: 6px; }
  .atlas-cast .portrait-nameplate h2 { font-size: 20px; }
  .atlas-cast .portrait-nameplate p { font-size: 9px; }
  .atlas-cast .portrait-story { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .cast-name-list button, .cast-name-list strong { transition: none; }
}
@media (min-width: 761px) {
  .atlas-cast { min-height: 0; }
}

/* Preserve the full panoramic composition and colors of the introduction art. */
.reading-page .book-frontispiece > img {
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  filter: none;
}

/* Shared world context precedes every topic, independently of the selected pin. */
.atlas-world { height: auto; min-height: 100%; align-items: start; grid-template-rows: auto minmax(0, 1fr); row-gap: 18px; }
.atlas-world > .world-overview {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px 22px;
  background: linear-gradient(90deg, transparent 0%, rgba(3, 8, 14, .72) 8%, rgba(3, 8, 14, .82) 45%, rgba(3, 8, 14, .72) 85%, transparent 100%);
  border: 0;
  text-shadow: 0 2px 5px #000;
}
.world-overview > p:first-child {
  margin: 0 0 8px;
  font: 500 clamp(16px, 1.3vw, 19px)/1.5 var(--body);
  color: #f3e2b8;
}
.world-overview > p:not(:first-child) {
  display: inline;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}
.world-overview > p:not(:first-child)::after { content: " "; }
.atlas-world > .atlas-map {
  height: clamp(520px, calc(100dvh - 240px), 760px);
  min-height: 520px;
  align-self: start;
  width: 100%;
  flex-shrink: 0;
}
.atlas-world > .map-folio { max-height: none; overflow: visible; }
@media (max-width: 760px) {
  .atlas-world > .world-overview { padding: 14px 16px; }
  .world-overview > p:not(:first-child) { font-size: 13px; line-height: 1.65; }
  .atlas-world > .atlas-map { height: 460px; min-height: 460px; }
}

/* Dim only the page backdrop on the world route, preserving the map contrast. */
.theme-atlas:has(#screen[data-view="world"]) .experience-tint::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 12, 21, .48);
  pointer-events: none;
}

/* Use the removed masthead space for page content. */
.theme-atlas .experience { grid-template-rows: 51px minmax(0, 1fr) 35px; }
.theme-atlas .screen-nav { grid-row: 1; }
.theme-atlas .screen { grid-row: 2; }
.theme-atlas .experience-footer { grid-row: 3; }
.experience > .atlas-home-caption {
  display: none;
  position: absolute;
  right: 5%;
  bottom: 55px;
  left: auto;
  text-align: right;
  pointer-events: none;
  text-shadow: 0 2px 8px #06101d;
}
.experience:has(#screen[data-view="home"]) > .atlas-home-caption { display: block; }
.theme-atlas .screen[data-view="home"] { margin-bottom: 94px; }
.atlas-home .atlas-title { padding-bottom: 0; }
@media (max-width: 760px) {
  .theme-atlas .experience { grid-template-rows: 48px minmax(0, 1fr) 27px; }
  .theme-atlas .screen[data-view="home"] { margin-bottom: 76px; }
  .experience > .atlas-home-caption { right: 5%; bottom: 43px; }
  .experience > .atlas-home-caption > span { font-size: 11px; letter-spacing: 3px; }
  .experience > .atlas-home-caption > p { font-size: 11px; margin-top: 5px; }
}

/* Set the two-line home title with a compact, explicit line gap. */
.atlas-title h1 { line-height: 1.08; }
.atlas-title h1 > span { display: block; margin-top: .12em; font-size: 1em; letter-spacing: inherit; line-height: inherit; }

/* Continue the introduction's navy surface beneath its sticky left panel. */
.book-spread.reading-page { background: #122131; }
.book-spread.reading-page > .book-frontispiece { background: #122131; }

/* Keep the reading frame stationary while its contents scroll inside it. */
.theme-atlas .screen[data-view="story"] {
  border: 1px solid var(--line);
  box-shadow: 0 20px 70px #0006;
  background: #122131;
}
.screen[data-view="story"] > .book-spread {
  border: 0;
  box-shadow: none;
}

/* Give the primary navigation larger labels and comfortable click targets. */
.theme-atlas .experience { grid-template-rows: 64px minmax(0, 1fr) 35px; }
.theme-atlas .screen-nav { gap: clamp(8px, 1.6vw, 26px); padding-inline: 2%; }
.theme-atlas .screen-nav button {
  min-height: 56px;
  padding: 16px 10px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.4;
  gap: 8px;
}
.theme-atlas .screen-nav .nav-number { font-size: 11px; }
@media (max-width: 760px) {
  .theme-atlas .experience { grid-template-rows: 60px minmax(0, 1fr) 27px; }
  .theme-atlas .screen-nav { justify-content: flex-start; gap: 4px; padding-inline: 8px; }
  .theme-atlas .screen-nav button {
    flex: 1 0 auto;
    min-width: 64px;
    min-height: 56px;
    padding: 8px;
    font-size: 13px;
    gap: 3px;
  }
  .theme-atlas .screen-nav .nav-number { font-size: 10px; }
}

/* Chronicle: a continuous archive with a persistent desktop era index. */
.chronicle-reader { background: #122130f5; border: 1px solid #dec88e38; padding: clamp(24px, 4vw, 64px); color: #ece6d7; }
.chronicle-intro { padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.chronicle-intro .eyebrow { font-size: .8125rem; letter-spacing: .12em; }
.chronicle-intro h1 { font-size: clamp(28px, 3vw, 44px); word-break: keep-all; }
.chronicle-lead { margin-top: 20px; max-width: 48rem; }
.chronicle-lead p { font-size: 1rem; color: #d0cbbf; word-break: keep-all; overflow-wrap: anywhere; }
.chronicle-range { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 26px; font: 1rem var(--mono); color: #e4c991; }
.chronicle-range > span { font: .875rem var(--sans); color: #c0bba9; }
.chronicle-reader .chronicle-layout { display: grid; grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: 36px; }
.chronicle-index { position: sticky; top: 20px; }
.chronicle-index > .folio-label { display: block; font-size: .8125rem; margin-bottom: 16px; color: #c0bba9; }
.chronicle-index ol, .chronicle-events { list-style: none; padding: 0; margin: 0; }
.chronicle-index button { display: flex; align-items: baseline; width: 100%; gap: 12px; text-align: left; padding: 12px 10px; border-left: 2px solid #dec88e30; color: #c9c4b8; }
.chronicle-index button strong { display: block; font-size: .875rem; font-weight: 500; line-height: 1.6; word-break: keep-all; }
.chronicle-index button small { display: block; font-size: .8125rem; margin-top: 4px; color: #b4b4ae; }
.chronicle-index button:hover, .chronicle-index button[aria-current] { border-left-color: #e4c991; background: #dec88e12; color: #f0d7a5; }
.chronicle-index button[aria-current] strong { font-weight: 700; }
.chronicle-reader .era-number { font: .8125rem var(--mono); color: #d9bc7c; flex-shrink: 0; }
.chronicle-records { min-width: 0; max-width: 52rem; }
.chronicle-era + .chronicle-era { margin-top: 64px; }
.era-heading { display: flex; align-items: baseline; gap: 20px; padding: 0 0 24px; border-bottom: 1px solid #dec88e50; }
.era-heading > .era-number { font-size: 1.5rem; }
.era-heading p { font-size: .875rem; color: #d9bc7c; margin-bottom: 8px; }
.era-heading h2 { font: 600 clamp(23px, 2.3vw, 32px)/1.5 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.chronicle-events { margin: 28px 0 0 9px; border-left: 1px solid #dec88e40; }
.chronicle-event { position: relative; padding: 0 0 36px 28px; }
.chronicle-event:last-child { padding-bottom: 8px; }
.chronicle-event::before { content: ''; position: absolute; width: 7px; height: 7px; border: 1px solid #d9bc7c; background: #122130; border-radius: 50%; left: -5px; top: 10px; }
.chronicle-event .event-date { color: #e4c991; font-size: .875rem; letter-spacing: .025em; margin-bottom: 6px; }
.chronicle-event h3 { font: 600 1.25rem/1.6 var(--body); margin-bottom: 12px; word-break: keep-all; overflow-wrap: anywhere; }
.chronicle-event .event-body p { font-size: 1rem; line-height: 1.95; color: #d3d0c7; word-break: keep-all; overflow-wrap: anywhere; white-space: pre-line; }
.event-body p + p { margin-top: 1em; }
.chronicle-event.chronicle-arrival { margin-top: 12px; padding: 28px; background: linear-gradient(120deg, #dec88e14, #dec88e04); border-block: 1px solid #dec88e60; }
.chronicle-arrival::before { top: 38px; background: #e4c991; }
.chronicle-arrival h3 { color: #f0d7a5; }
.chronicle-arrival .event-body p:last-child { color: #f0d7a5; }
.chronicle-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.chronicle-end button { font-size: .875rem; min-height: 44px; }
@media (max-width: 1000px), (max-height: 740px) {
  .chronicle-reader .chronicle-layout { grid-template-columns: minmax(0, 1fr); }
  .chronicle-index { position: static; }
  .chronicle-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .chronicle-records { max-width: none; }
}
@media (max-width: 540px) {
  .chronicle-reader { padding: 24px 18px; }
  .chronicle-index ol { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .chronicle-index button { padding-block: 10px; }
  .chronicle-index button > span:last-child { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
  .chronicle-index button small { margin-top: 0; }
  .era-heading { gap: 12px; }
  .chronicle-event { padding-left: 20px; }
  .chronicle-event.chronicle-arrival { padding: 22px 16px 22px 20px; }
  .chronicle-era + .chronicle-era { margin-top: 44px; }
}