/* InnerFable, interface phase E. Loaded after the existing presentation styles.
   The illustrations remain real, exclusive assets; colour only frames them. */
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) {
  --if-night: #091321;
  --if-panel: #101f32;
  --if-panel-raised: #172a41;
  --if-text: #f6eee0;
  --if-muted: #c0cad9;
  --if-line: #52637b;
  --if-gold: #e7c99a;
  background: var(--if-night);
  font-size: 1rem;
}
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe]) {
  --ink: var(--if-text);
  --muted: var(--if-muted);
  --line: var(--if-line);
  color: var(--if-text);
}
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .container {
  width: min(1360px, calc(100% - 64px));
}
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) :is(a,button,input,select,summary):focus-visible {
  outline: 3px solid var(--if-gold);
  outline-offset: 4px;
}

/* Compact navigation, with the full language choice kept visible. */
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .site-header {
  background: #08111eee;
  color: var(--if-text);
  border-bottom: 1px solid #52637b5c;
}
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .header-inner {
  width: min(1408px, calc(100% - 64px));
  min-height: 72px;
  gap: 18px;
  flex-wrap: nowrap;
}
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .site-header .brand {
  font-size: 1.9rem;
  letter-spacing: -.035em;
}
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .site-header nav:not(.language-switch) {
  gap: 22px;
}
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .site-header nav a {
  font-size: .875rem;
  line-height: 1.4;
}
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .site-header .nav-worlds {
  border-color: #ae9a794f;
  background: #e7c99a09;
  padding: 9px 14px !important;
}
.site-header .header-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid #52637b;
  border-radius: 999px;
  font-size: .875rem;
  line-height: 1.4;
  color: #dce3ef;
  white-space: nowrap;
}
.site-header .header-search:hover { background: #172a41; border-color: #e7c99a; }
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .motion-toggle {
  padding-left: 12px;
  min-width: 38px;
  min-height: 42px;
}

/* Home: a short illustrated opening, followed immediately by the worlds. */
body[data-page=home] .portal-hero { min-height: 400px; background: #0b1729; }
body[data-page=home] .hero-world-image { inset: 0; }
body[data-page=home] .hero-world-image img { object-position: 58% 46%; }
body[data-page=home] .hero-world-image:after {
  background: linear-gradient(90deg,#091321eb 0%,#091321ae 32%,#09132119 75%), linear-gradient(0deg,#091321f2,transparent 58%);
}
body[data-page=home] .hero-content { min-height: 400px; align-items: center; }
body[data-page=home] .hero-script { max-width: 660px; padding: 44px 0 48px; }
body[data-page=home] .world-badge { margin-bottom: 15px; color: #e7c99a; letter-spacing: .1em; }
body[data-page=home] .hero-script h1 {
  max-width: 640px;
  font-size: clamp(2.75rem,4.3vw,4.5rem);
  letter-spacing: -.035em;
  line-height: 1.08;
}
body[data-page=home] .hero-script h1 em { color: #f3d9b5; }
body[data-page=home] .hero-script>p { font-size: 1.0625rem; line-height: 1.65; margin-top: 18px; color: #e1e5ee; }
body[data-page=home] .hero-actions { gap: 24px; margin-top: 23px; }
body[data-page=home] .portal-btn {
  background: #10243de6;
  color: #fff5e8;
  border-color: #e7c99a;
  border-radius: 999px;
  padding: 13px 25px;
  box-shadow: 0 3px 16px #0003;
  font-size: 1rem;
}
body[data-page=home] .portal-btn:hover { background: #1b354f; box-shadow: 0 3px 24px #e7c99a24; }
body[data-page=home] .portal-btn:after { content: none; }
body[data-page=home] .hero-secondary { color: #f3e6d3; font-size: .9375rem; }
body[data-page=home] .hero-notes { margin-top: 18px; color: #cbd4e1; }
body[data-page=home] .hero-chapter { padding: 15px 0; }
body[data-page=home] .hero-atmosphere { display: none; }
.home-discovery,.home-selection { padding: 30px 0 10px; color: var(--if-text); }
.home-discovery .section-heading,.home-selection .section-heading { align-items: center; gap: 18px; margin-bottom: 18px; }
.home-discovery h2,.home-selection h2 { font-size: clamp(1.75rem,2.1vw,2.15rem); letter-spacing: -.025em; }
.home-discovery .eyebrow,.home-selection .eyebrow { color: #c3b396; margin-bottom: 8px; }
.home-discovery .text-link,.home-selection .text-link { color: #e7c99a; flex-shrink: 0; }
.discovery-grid,.home-discovery-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 12px; }
.discovery-world {
  display: flex;
  position: relative;
  isolation: isolate;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: 238px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--world-color,#e7c99a) 48%,#52637b);
  border-radius: 10px;
  background: #101f32;
  color: #fff5e8;
  transition: border-color .2s,transform .2s;
}
.discovery-art { position: absolute; inset: 0; z-index: -2; }
.discovery-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform .4s; }
.discovery-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,#08111efc 0%,#08111ed9 25%,#08111e05 72%); }
.discovery-copy { padding: 55px 14px 16px; }
.discovery-copy h3 { font-family: Georgia,"Times New Roman",serif; font-weight: 400; font-size: 1.22rem; line-height: 1.23; letter-spacing: -.015em; text-wrap: balance; }
.discovery-copy p { font-size: .8125rem; line-height: 1.5; color: #d4dcea; margin-top: 8px; }
.discovery-count { display: block; font-size: .8125rem; color: #f1d7b1; line-height: 1.5; margin-top: 13px; }
.discovery-world:hover { transform: translateY(-3px); border-color: var(--world-color,#e7c99a); }
.discovery-world:hover img { transform: scale(1.035); }
.home-realms { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 12px; padding: 18px 0 0; }
.home-realms>p,.home-realms>span,.home-realms>label,.home-realms .label { color: #d0d9e7; font-size: .875rem; }
.home-realms a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; border: 1px solid #52637b; border-radius: 7px; padding: 7px 12px; color: #e4eaf3; font-size: .875rem; background: #101f32; }
.home-realms a:hover { border-color: #e7c99a; color: #fff5e8; background: #172a41; }
.home-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 25px; padding: 25px 0 36px; color: #c0cad9; }
.home-links a { min-height: 44px; display: inline-flex; align-items: center; font-size: .9375rem; text-decoration: underline; text-decoration-color: #8290a5; text-underline-offset: 5px; }
.home-links a:hover { color: #e7c99a; text-decoration-color: currentColor; }
.home-selection .test-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 14px; }

/* Cards share the navy frame on discovery and catalog pages. */
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe]) .test-card {
  --deep: #f6eee0;
  --paper: #101f32;
  background: #101f32;
  color: #f6eee0;
  border: 1px solid #52637b;
  border-radius: 10px;
  box-shadow: none;
}
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe]) .test-card:hover {
  border-color: var(--world-color,#e7c99a);
  transform: translateY(-3px);
  box-shadow: 0 7px 25px #0003;
}
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe]) .card-image { background: #091321; }
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe]) .card-copy>p { color: #cbd4e1; opacity: 1; }
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe]) .card-bottom { border-color: #52637b70; color: #d2dbe9; }
body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe]) .card-kicker .badge { color: #ecd4b1; opacity: 1; }
.home-selection .card-image { aspect-ratio: 1.6; }
.home-selection .card-copy { padding: 16px 14px 13px; }
.home-selection .card-copy h3 { font-size: 1.24rem; line-height: 1.24; letter-spacing: -.015em; }
.home-selection .card-copy>p { font-size: .875rem; line-height: 1.55; margin: 11px 0 15px; }
.home-selection .card-kicker { flex-wrap: wrap; gap: 6px 10px; margin-bottom: 11px; }
.home-selection .card-bottom { flex-wrap: wrap; gap: 6px 10px; font-size: .75rem; padding-top: 10px; }
.home-selection .card-category { left: 12px; top: 12px; }

/* Universe pages: one image, a clear title, four journeys side by side. */
body[data-page=universe] .universe-page { padding-bottom: 46px; }
body[data-page=universe] .breadcrumbs { color: #c0cad9; margin: 22px 0; }
body[data-page=universe] .breadcrumbs a { color: #e7c99a; }
.universe-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--world-color,#e7c99a) 48%,#52637b);
  border-radius: 13px;
  background: #101f32;
  color: #fff5e8;
  margin-bottom: 28px;
}
.universe-stage-art { position: absolute; inset: 0; z-index: -2; }
.universe-stage-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.universe-stage-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#08111ee8 0%,#08111ebf 38%,#08111e33 100%),linear-gradient(0deg,#08111ecc,transparent 65%); }
.universe-stage-copy { width: min(750px,100%); padding: 36px 44px; }
.universe-stage-copy .eyebrow { color: #eed4ab; margin-bottom: 14px; }
.universe-stage-copy h1 { font-size: clamp(2.3rem,4.1vw,3.9rem); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.universe-stage-copy .lead { max-width: 61ch; font-size: 1.0625rem; line-height: 1.7; color: #e0e6ef; margin-top: 19px; }
.universe-collection { padding: 3px 0 0; }
.universe-collection .section-heading { align-items: center; margin-bottom: 20px; }
.universe-collection h2 { font-size: 1.8rem; }
.universe-quiz-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; align-items: start; }
.universe-quiz { display: flex; flex-direction: column; min-width: 0; gap: 12px; }
.universe-quiz .test-card { width: 100%; flex: 1; border-color: color-mix(in srgb,var(--world-color,#e7c99a) 43%,#52637b); }
.universe-quiz .card-image { aspect-ratio: 1.45; }
.universe-quiz .card-copy { padding: 20px 20px 17px; }
.universe-quiz .card-copy h3 { font-size: 1.6rem; line-height: 1.23; letter-spacing: -.025em; }
.universe-quiz .card-copy>p { font-size: .9375rem; line-height: 1.65; margin-bottom: 18px; }
.universe-quiz .card-kicker { flex-wrap: wrap; gap: 7px 12px; }
.universe-quiz .card-bottom { gap: 7px 12px; flex-wrap: wrap; }
.universe-preview { border: 1px solid #52637b; border-radius: 9px; background: #0b1729; padding: 0 11px 12px; color: #d7e0ee; }
details.universe-preview:not([open]) { padding-bottom: 0; }
.universe-preview>summary { padding: 13px 3px; min-height: 48px; cursor: pointer; color: #ead3ae; font-size: .8125rem; line-height: 1.55; letter-spacing: .025em; }
.universe-preview>summary:hover { color: #fff3dc; }
.preview-portraits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; align-items: stretch; }
.preview-portraits figure { display: flex; flex-direction: column; margin: 0; min-width: 0; overflow: hidden; border: 1px solid #52637b80; border-radius: 6px; background: #08111e; }
.preview-portraits img { width: 100%; height: 158px; object-fit: contain; object-position: center; padding: 3px; background: #08111e; }
.preview-portraits figcaption { padding: 7px 5px 9px; font-family: Georgia,"Times New Roman",serif; font-size: .8125rem; line-height: 1.35; text-align: center; color: #f0e6d8; overflow-wrap: break-word; }
.preview-question { padding: 5px 3px 3px; }
.preview-question p { font-family: Georgia,"Times New Roman",serif; font-size: 1rem; line-height: 1.55; color: #f0e6d8; }
.preview-question ul { list-style: none; display: grid; gap: 7px; padding: 0; margin: 13px 0 0; }
.preview-question li { padding: 8px 10px; border: 1px solid #52637b80; border-radius: 5px; background: #101f32; color: #d7e0ee; font-size: .8125rem; line-height: 1.5; }
.universe-preview>p,.universe-preview .preview-note { color: #b7c5d8; font-size: .8125rem; line-height: 1.6; margin: 11px 3px 1px; }
body[data-page=universe] .universe-reading { color: #c7d1e1; border-top: 1px solid #52637b80; padding-top: 28px; margin-top: 34px; }
body[data-page=universe] .universe-reading h2 { color: #f0e6d8; font-size: 1.55rem; }
body[data-page=universe] .universe-links a { color: #e7c99a; background: #101f32; border-color: #52637b; }

/* Catalogs keep their existing filters and journeys. */
body[data-page=catalog] .all-catalog { padding-top: 38px; }
body[data-page=catalog] .all-catalog .eyebrow { color: #c5b594; }
body[data-page=catalog] .all-catalog h1 { font-size: clamp(2.3rem,4vw,3.6rem); }
body[data-page=catalog] .search-box { background: #101f32; border-color: #52637b; color: #e4eaf3; }
body[data-page=catalog] .search-box input { color: #e4eaf3; font-size: 1rem; }
body[data-page=catalog] .search-box input::placeholder { color: #b6c4d7; opacity: 1; }
body[data-page=catalog] .search-box .icon { color: #c0cad9; }
body[data-page=catalog] .filter { border-color: #52637b; color: #e4eaf3; background: #101f32; }
body[data-page=catalog] .filter:hover,body[data-page=catalog] .filter.active { background: #213650; color: #fff5e8; border-color: #e7c99a; }
body[data-page=catalog] .catalog-options { color: #c0cad9; }
body[data-page=parallel] .parallel-intro { padding-top: 40px; }
body[data-page=parallel] .parallel-intro h1 { font-size: clamp(2.7rem,4.5vw,4.2rem); }
body[data-page=parallel] .parallel-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
body[data-page=parallel] .world-poster { border-radius: 12px; min-height: 410px; }
body[data-page=parallel] .poster-top { inset: 23px 21px auto; }
body[data-page=parallel] .poster-copy { inset: auto 21px 23px; }
body[data-page=parallel] .poster-copy>strong { font-size: 1.8rem; }

/* Quiz introduction: narrative and search wording have almost equal presence. */
body[data-page=quiz] .quiz-container { padding-top: 25px; }
body[data-page=quiz] .quiz-intro {
  grid-template-columns: .9fr 1.15fr;
  border-color: color-mix(in srgb,var(--glow,#e7c99a) 46%,#52637b);
  border-radius: 14px;
  background: #101f32;
  box-shadow: 0 12px 42px #0003;
}
body[data-page=quiz] .quiz-intro-image { min-height: 580px; background: #08111e; overflow: hidden; }
body[data-page=quiz] .quiz-intro-image::before { content: ""; position: absolute; inset: 0; background-image: var(--page-scene); background-size: cover; background-position: center; filter: blur(8px); opacity: .3; transform: scale(1.04); }
body[data-page=quiz] .quiz-intro-image>img { object-fit: contain; object-position: center; z-index: 1; }
body[data-page=quiz] .quiz-intro-image::after { z-index: 1; }
body[data-page=quiz] .intro-image-caption { z-index: 2; }
body[data-page=quiz] .quiz-intro-main,body[data-page=quiz] .quiz-container[data-world] .quiz-intro-main {
  padding: 38px 42px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #101f32;
  color: #f6eee0;
}
body[data-page=quiz] .quiz-heading-pair { display: grid; gap: 14px; }
body[data-page=quiz] .quiz-intro-main .quiz-heading-pair h1 {
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(1.875rem,3.15vw,2.75rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.025em;
  color: #fff5e8;
  text-wrap: balance;
  margin: 0;
}
body[data-page=quiz] .quiz-narrative-heading {
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(1.75rem,2.85vw,2.5rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.025em;
  color: #e7c99a;
  text-wrap: balance;
  margin: 0;
}
body[data-page=quiz] .quiz-description { color: #d4ddea; font-size: 1rem; line-height: 1.75; margin-top: 19px; }
body[data-page=quiz] .intro-badges { gap: 10px 18px; margin-bottom: 20px; color: #d9e2ef; }
body[data-page=quiz] .intro-badges .badge { color: #efd7b0; }
body[data-page=quiz] .quiz-facts { color: #d4ddea; margin: 20px 0; }
body[data-page=quiz] .scene-intro { border-color: #52637b; padding-top: 19px; margin-bottom: 24px; }
body[data-page=quiz] .scene-intro>.eyebrow { color: #efd7b0; }
body[data-page=quiz] .scene-intro>p:last-child { color: #d4ddea; font-size: 1rem; line-height: 1.7; }
body[data-page=quiz] .quiz-intro-main>.btn { align-self: flex-start; background: #e7c99a; border-color: #e7c99a; color: #101d30; padding: 13px 25px; }
body[data-page=quiz] .quiz-intro-main>.btn:hover { background: #f6dbb0; }
body[data-page=quiz] .quiz-intro-main .local-note { color: #b9c7d9; line-height: 1.65; }

/* Questions and portraits retain their readable paper panels and complete art. */
body[data-page=quiz] .quiz-running { border-radius: 14px; box-shadow: 0 12px 42px #0003; }
body[data-page=quiz] .question-stage { color: #192a3d; }
body[data-page=quiz] :is(.question-stage,.result-page) :is(a,button,input,select,summary):focus-visible { outline-color: var(--accent,#253bc8); }
body[data-page=quiz] .question-panel h1 { font-size: clamp(1.8rem,2.45vw,2.4rem); line-height: 1.22; }
body[data-page=quiz] .answer-label { font-size: 1rem; line-height: 1.55; }
body[data-page=quiz] .answer-detail { font-size: .9375rem; line-height: 1.6; }
body[data-page=quiz] .scale-options .answer-label { font-size: .875rem; }
body[data-page=quiz] .result-page { border: 1px solid #52637b80; border-radius: 14px; box-shadow: 0 12px 42px #0003; color: #192a3d; }
body[data-page=quiz] .result-hero { border: 1px solid #52637b70; border-radius: 10px; }
body[data-page=quiz] .result-art>img { object-fit: contain; padding: 8px; }
body[data-page=quiz] .result-hero h1 { font-size: clamp(2.25rem,3.6vw,3.5rem); line-height: 1.13; letter-spacing: -.025em; }
body[data-page=quiz] .result-section h2 { font-size: clamp(1.75rem,2.25vw,2.25rem); line-height: 1.2; }

@media(max-width:1200px) {
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .header-inner { gap: 14px; }
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .site-header nav:not(.language-switch) { gap: 16px; }
  .discovery-grid,.home-discovery-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
  .discovery-world { min-height: 240px; }
  .discovery-copy h3 { font-size: 1.4rem; }
  .home-selection .test-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
  .home-selection .card-copy h3 { font-size: 1.5rem; }
  .universe-quiz .card-copy { padding: 17px 16px; }
  .universe-quiz .card-copy h3 { font-size: 1.42rem; }
  .preview-portraits img { height: 135px; }
}
@media(max-width:1000px) {
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .header-inner { flex-wrap: wrap; padding: 12px 0; gap: 10px 16px; }
  .universe-quiz-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
  .universe-quiz .card-copy { padding: 21px; }
  .universe-quiz .card-copy h3 { font-size: 1.65rem; }
  .preview-portraits img { height: 185px; }
  body[data-page=quiz] .quiz-intro-main,body[data-page=quiz] .quiz-container[data-world] .quiz-intro-main { padding: 30px; }
  body[data-page=quiz] .quiz-intro-image { min-height: 610px; }
  body[data-page=parallel] .parallel-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:800px) {
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .container { width: calc(100% - 40px); }
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .header-inner { width: calc(100% - 40px); }
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .site-header .brand { font-size: 1.65rem; }
  body[data-page=home] .portal-hero,body[data-page=home] .hero-content { min-height: 400px; }
  body[data-page=home] .hero-script { max-width: 590px; padding: 45px 0; }
  body[data-page=home] .hero-script h1 { font-size: 3.3rem; }
  body[data-page=home] .hero-world-image:after { background: linear-gradient(90deg,#091321e6,#09132165),linear-gradient(0deg,#091321f2,transparent 68%); }
  .discovery-copy { padding-inline: 13px; }
  .discovery-copy h3 { font-size: 1.2rem; }
  .discovery-copy p { font-size: .8125rem; }
  .universe-stage { min-height: 310px; }
  .universe-stage-copy { padding: 31px; max-width: 640px; }
  .universe-stage-copy h1 { font-size: 3rem; }
  body[data-page=quiz] .quiz-intro { grid-template-columns: .8fr 1.2fr; }
  body[data-page=quiz] .quiz-intro-image { min-height: 650px; }
  body[data-page=quiz] .quiz-intro-main,body[data-page=quiz] .quiz-container[data-world] .quiz-intro-main { padding: 29px 25px; }
  body[data-page=quiz] .quiz-intro-main .quiz-heading-pair h1 { font-size: 1.875rem; }
  body[data-page=quiz] .quiz-narrative-heading { font-size: 1.75rem; }
}
@media(max-width:700px) {
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .site-header .header-inner {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 9px 13px;
    padding: 12px 0 10px;
    min-height: 0;
  }
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .site-header .header-inner>.brand { grid-column: 1; grid-row: 1; }
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .site-header nav.language-switch { grid-column: 1/-1; grid-row: 2; justify-self: start; margin: 0; max-width: 100%; flex-wrap: wrap; gap: 6px; }
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .site-header .header-inner>nav:not(.language-switch) { grid-column: 1/-1; grid-row: 3; flex-wrap: wrap; justify-content: flex-start; width: auto; margin: 0; gap: 8px 18px; }
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .site-header .header-inner>.header-search { grid-column: 1; grid-row: 4; justify-self: start; }
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .motion-toggle { display: flex; grid-column: 2; grid-row: 1; justify-self: end; border: 0; padding: 6px; }
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .site-header nav a { font-size: .875rem; }
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .site-header .language-switch a { min-width: 32px; min-height: 36px; font-size: .75rem; padding: 6px 7px; }
  .home-discovery,.home-selection { padding-top: 27px; }
  .home-discovery .section-heading,.home-selection .section-heading { flex-wrap: wrap; gap: 10px 18px; }
  .home-discovery .text-link,.home-selection .text-link { font-size: .875rem; }
  .discovery-grid,.home-discovery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .discovery-world { min-height: 248px; }
  .discovery-copy h3 { font-size: 1.4rem; }
  .discovery-copy p { font-size: .875rem; }
  .home-selection .test-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
  .home-selection .card-copy { padding: 16px 13px 13px; }
  .home-selection .card-copy h3 { font-size: 1.32rem; }
  .home-links { padding-bottom: 29px; }
  .universe-stage-copy { padding: 30px 27px; }
  .universe-stage-copy h1 { font-size: 2.5rem; }
  .universe-stage-copy .lead { font-size: 1rem; line-height: 1.7; }
  .universe-quiz-grid { gap: 20px 16px; }
  .universe-quiz .card-copy { padding: 18px 16px; }
  .universe-quiz .card-copy h3 { font-size: 1.45rem; }
  .preview-portraits img { height: 150px; }
  .preview-portraits figcaption { font-size: .75rem; }
}
@media(max-width:600px) {
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .container { width: calc(100% - 32px); }
  body:is([data-page=home],[data-page=parallel],[data-page=catalog],[data-page=universe],[data-page=quiz]) .header-inner { width: calc(100% - 32px); }
  body[data-page=home] .portal-hero { min-height: 440px; display: flex; flex-direction: column; justify-content: flex-end; }
  body[data-page=home] .hero-content { min-height: 440px; align-items: flex-end; }
  body[data-page=home] .hero-script { padding: 135px 0 35px; max-width: none; }
  body[data-page=home] .hero-script h1 { font-size: clamp(2.55rem,9.4vw,3.2rem); line-height: 1.1; }
  body[data-page=home] .hero-script>p { font-size: 1rem; line-height: 1.6; }
  body[data-page=home] .hero-world-image img { object-position: 64% 35%; }
  body[data-page=home] .hero-world-image:after { background: linear-gradient(0deg,#091321fc 0%,#091321ad 46%,#0913210a 100%); }
  body[data-page=home] .hero-actions { flex-wrap: wrap; gap: 15px 23px; margin-top: 20px; }
  body[data-page=home] .hero-actions .portal-btn { font-size: .9375rem; padding: 12px 22px; }
  body[data-page=home] .hero-secondary { font-size: .875rem; }
  .universe-stage { min-height: 320px; margin-bottom: 25px; }
  .universe-stage-shade { background: linear-gradient(0deg,#08111ef7 0%,#08111eb3 55%,#08111e38 100%); }
  .universe-stage-copy { padding: 45px 23px 29px; }
  .universe-stage-copy h1 { font-size: 2.4rem; }
  .universe-quiz-grid { grid-template-columns: 1fr; gap: 27px; }
  .universe-quiz .card-image { aspect-ratio: 1.7; }
  .universe-quiz .card-copy { padding: 23px; }
  .universe-quiz .card-copy h3 { font-size: 1.8rem; }
  .universe-quiz .card-copy>p { font-size: 1rem; }
  .universe-preview { padding-inline: 12px; }
  .universe-preview>summary { font-size: .875rem; padding-block: 14px; }
  .preview-portraits { gap: 9px; }
  .preview-portraits img { height: 195px; }
  .preview-portraits figcaption { font-size: .875rem; padding: 9px 6px; }
  .preview-question p { font-size: 1.0625rem; }
  .preview-question li { font-size: .875rem; padding: 10px 12px; }
  body[data-page=quiz] .quiz-intro { grid-template-columns: 1fr; border-radius: 12px; }
  body[data-page=quiz] .quiz-intro-image { min-height: 260px; }
  body[data-page=quiz] .quiz-intro-main,body[data-page=quiz] .quiz-container[data-world] .quiz-intro-main { padding: 29px 25px; }
  body[data-page=quiz] .quiz-heading-pair { gap: 14px; }
  body[data-page=quiz] .quiz-intro-main>.btn { width: 100%; }
  body[data-page=quiz] .question-stage { padding: 27px 22px; }
  body[data-page=quiz] .question-panel h1 { font-size: 1.8rem; }
  body[data-page=quiz] .choice-grid { grid-template-columns: 1fr; }
  body[data-page=quiz] .answer-label { font-size: 1rem; }
  body[data-page=quiz] .answer-detail { font-size: .875rem; }
  body[data-page=quiz] .result-art { min-height: 320px; }
  body[data-page=quiz] .result-art>img { object-position: center; }
  body[data-page=quiz] .result-hero-copy { padding: 30px 25px; }
}
@media(max-width:479px) {
  .home-selection .test-grid { grid-template-columns: 1fr; gap: 18px; }
  .home-selection .card-image { aspect-ratio: 1.9; }
  .home-selection .card-copy { padding: 21px; }
  .home-selection .card-copy h3 { font-size: 1.65rem; }
  .home-selection .card-copy>p { font-size: 1rem; }
  .home-selection .card-kicker { flex-wrap: nowrap; }
  .discovery-world { min-height: 237px; }
  .discovery-copy { padding: 55px 13px 15px; }
  .discovery-copy h3 { font-size: 1.25rem; }
  .discovery-copy p { font-size: .8125rem; }
  .home-realms { gap: 8px; }
  .home-realms a { font-size: .8125rem; padding: 8px 10px; }
  .home-links { display: grid; gap: 3px; }
  body[data-page=parallel] .parallel-grid { gap: 16px 12px; }
  body[data-page=parallel] .world-poster { min-height: 335px; }
  body[data-page=parallel] .poster-copy { inset: auto 14px 18px; }
  body[data-page=parallel] .poster-copy>strong { font-size: 1.4rem; }
  body[data-page=parallel] .poster-top { inset: 18px 14px auto; }
  body[data-page=quiz] .quiz-intro-main,body[data-page=quiz] .quiz-container[data-world] .quiz-intro-main { padding: 28px 21px; }
  body[data-page=quiz] .question-stage { padding: 25px 18px; }
  .preview-portraits img { height: 172px; }
  .preview-portraits figcaption { font-size: .8125rem; }
}
@media(prefers-reduced-motion:reduce) {
  .discovery-world,.discovery-art img,.universe-quiz .test-card,.home-selection .test-card { transition: none; }
  .discovery-world:hover,.discovery-world:hover img,.universe-quiz .test-card:hover,.home-selection .test-card:hover { transform: none; }
}
body[data-motion=off] :is(.discovery-world,.discovery-art img) { transition: none; }
body[data-motion=off] :is(.discovery-world:hover,.discovery-world:hover img) { transform: none; }

/* The original mockups become a compact, illustrated story atlas. */
body[data-page=home] .portal-hero,
body[data-page=home] .hero-content { min-height: 300px; }
body[data-page=home] .hero-script { padding: 34px 0 38px; }
body[data-page=home] .hero-script h1 { font-size: clamp(2.6rem,4.1vw,4rem); }
body[data-page=home] .hero-world-image img { object-position: 68% 50%; }
body[data-page=home] .hero-world-image:after {
  background: linear-gradient(90deg,#091321d9 0%,#0913219c 34%,#09132108 78%),linear-gradient(0deg,#091321,transparent 44%);
}
.home-discovery { padding-top: 24px; }
.discovery-world { min-height: 190px; border-radius: 7px; }
.discovery-copy { padding: 45px 12px 14px; }
.discovery-copy h3 { font-size: 1.18rem; }
.discovery-count { margin-top: 8px; }
.home-selection { padding-top: 26px; }
.home-selection .card-copy>p { display: none; }
.home-selection .card-copy h3 { margin-bottom: 16px; }

/* Each world's typography and coloured light belong to that world. */
.universe-page { --world-light: var(--world-color); }
.universe-page[data-world=jujutsu-kaisen] { --world-light: #f1a1ac; --world-color: #90bfe1; }
.universe-page[data-world=marvel] { --world-light: #f0a49d; }
.universe-page[data-world=star-wars] { --world-light: #efdd96; }
.universe-page[data-world=pokemon] { --world-light: #f1da8c; }
.universe-stage { min-height: 285px; border-radius: 8px; border-top: 2px solid var(--world-light); }
.universe-stage-art img { object-position: 65% 43%; }
.universe-stage-shade {
  background: linear-gradient(90deg,#08111ee8 0%,#08111eb0 45%,#08111e24 100%),linear-gradient(0deg,#08111ee0,transparent 75%);
}
.universe-stage-copy { width: min(790px,100%); padding: 32px 38px; }
.universe-stage-copy h1 { font-size: clamp(2.6rem,4.5vw,4.6rem); color: var(--world-light); }
.universe-stage-copy .lead { margin-top: 16px; }
.universe-stage-intro { max-width: 62ch; }
.universe-page:is([data-world=jujutsu-kaisen],[data-world=dragon-ball],[data-world=marvel],[data-world=attack-on-titan]) .universe-stage-copy h1 {
  font-family: Impact,"Arial Narrow",system-ui,sans-serif;
  font-weight: 700;
  letter-spacing: .015em;
  text-transform: uppercase;
}
.universe-page[data-world=jujutsu-kaisen] .universe-stage-copy h1 { font-style: italic; text-shadow: 2px 3px 0 #101e32; }
.universe-page[data-world=star-wars] .universe-stage-copy h1 { font-family: system-ui,sans-serif; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.universe-page[data-world=ghibli] .universe-stage-copy h1 { font-style: italic; }
.universe-quiz-grid { align-items: stretch; }
.universe-quiz .test-card { flex: 1; }
.universe-preview { margin-top: 0; align-self: start; }
.skip-link { color: #101f32; }
.universe-preview[open] { padding-top: 4px; }
.universe-preview-visible { padding: 12px 10px; }
.universe-preview-more>summary { cursor: pointer; color: #ead3ae; font-size: .875rem; line-height: 1.6; min-height: 44px; padding: 12px 2px 4px; }
.universe-preview-more[open]>summary { padding-bottom: 12px; }
.preview-portraits img { height: 135px; }
.preview-portraits { grid-template-columns: repeat(3,minmax(0,1fr)); }

/* Questions keep the atlas's navy surface instead of changing to white. */
body[data-page=quiz] .question-stage {
  --paper: #101f32;
  --ink: #f6eee0;
  --muted: #c3ccdb;
  --line: #52637b;
  --accent: #e7c99a;
  color: #f6eee0;
  background: #101f32;
}
body[data-page=quiz] .question-prompt { background: #101f32; }
body[data-page=quiz] .question-panel h1 { color: #fff5e8; }
body[data-page=quiz] .question-prompt>.eyebrow { color: #e7c99a; }
body[data-page=quiz] :is(.question-help,.question-footnote,.keyboard-hint) { color: #c3ccdb; }
body[data-page=quiz] .question-stage .answer-option { background: #172a41; border-color: #5a6a80; color: #f6eee0; }
body[data-page=quiz] .question-stage .answer-option:hover { background: #213851; border-color: #e7c99a; }
body[data-page=quiz] .question-stage .answer-option:has(input:checked) { background: #2b4058; border-color: #e7c99a; box-shadow: 0 0 0 2px #e7c99a40; }
body[data-page=quiz] .question-stage .answer-number { color: #e9d5b3; border-color: #7f8a9c; }
body[data-page=quiz] .question-stage .answer-option:has(input:checked) .answer-number { background: #e7c99a; border-color: #e7c99a; color: #101f32; }
body[data-page=quiz] .question-stage .answer-detail { color: #c3ccdb; }
body[data-page=quiz] .question-stage .answer-check { color: #e7c99a; }
body[data-page=quiz] .question-actions .btn { background: #e7c99a; color: #101f32; border-color: #e7c99a; }
body[data-page=quiz] .question-actions .btn.secondary { background: #172a41; color: #f6eee0; border-color: #738199; }
body[data-page=quiz] .question-stage kbd { background: #172a41; color: #e1d5bf; border-color: #52637b; }
body[data-page=quiz] .question-stage .error-note { color: #ffd1cd; }

/* A dark result frame holds small parchment chapters, like a story folio. */
body[data-page=quiz] .result-page {
  --paper: #eee5d5;
  --ink: #243446;
  --muted: #596777;
  --line: #52637b;
  background: #101f32;
  color: #f6eee0;
}
body[data-page=quiz] .result-page>.back-link,
body[data-page=quiz] .result-page .result-tabs a,
body[data-page=quiz] .result-page .edit-answer { color: #eed2a5; }
body[data-page=quiz] .result-page .result-tabs { border-color: #52637b; }
body[data-page=quiz] .result-page .result-section h2 { color: #f6eee0; }
body[data-page=quiz] .result-page :is(.portrait-chapter,.result-insights,.dimension,.other-portrait,.conversation-tip,.knowledge-topic,.knowledge-summary) { background: #eee5d5; color: #243446; border-color: #d1c4ac; }
body[data-page=quiz] .result-page .portrait-chapter.chapter-resources { background: var(--deep); color: #fff8ed; border-color: #78879d; }
body[data-page=quiz] .result-page .chapter-toggle { background: #e1d5c0; border-color: #a59a89; }
body[data-page=quiz] .result-page .chapter-resources .chapter-toggle { background: #ffffff15; border-color: #ffffff70; color: #fff8ed; }
body[data-page=quiz] .result-page .near-note { background: #1a2d44; color: #e4eaf2; border-left-color: #e7c99a; }
body[data-page=quiz] .result-page .ally-card { background: #172a41; color: #f6eee0; border-color: #63738b; }
body[data-page=quiz] .result-page .ally-card :is(.eyebrow,.text-link) { color: #eed2a5; }
body[data-page=quiz] .result-page .compatibility { color: #243446; }
body[data-page=quiz] .result-page .compatibility-heading :is(h2,.eyebrow) { color: #243446; }
body[data-page=quiz] .result-page .compatibility .compare-empty { color: #596777; }
body[data-page=quiz] .result-page .dimension-explanations>summary { color: #eed2a5; }
body[data-page=quiz] .result-page :is(.profile-library>p,#browse-portrait>p,.related>.eyebrow) { color: #c2ccdb; }
body[data-page=quiz] .result-page .result-actions .btn { background: #e7c99a; color: #101f32; border-color: #e7c99a; }
body[data-page=quiz] .result-page .result-actions .btn.secondary { background: #172a41; color: #f6eee0; border-color: #63738b; }
body[data-page=quiz] .result-page .profile-pick { background: #172a41; color: #f6eee0; border-color: #63738b; }
body[data-page=quiz] .result-page .profile-pick:is(:hover,[aria-pressed=true]) { background: #e7c99a; color: #101f32; border-color: #e7c99a; }
body[data-page=quiz] .result-page :is(.compare-empty,.chart-note,.dimension-poles) { color: #c2ccdb; }
body[data-page=quiz] .result-page .dimension .dimension-poles { color: #596777; }
body[data-page=quiz] .result-page select { background: #172a41; color: #f6eee0; border-color: #63738b; }
body[data-page=quiz] .result-page .review-item { border-color: #63738b; }
body[data-page=quiz] .result-page .review-item>p { color: #d5deeb; }
body[data-page=quiz] .result-page .answer-review.correct { color: #bce6bc; background: #1c342e; }
body[data-page=quiz] .result-page .answer-review.wrong { color: #ffd1cd; background: #402832; }
body[data-page=quiz] .result-page .test-card { --deep: #f6eee0; background: #172a41; color: #f6eee0; border-color: #63738b; }
body[data-page=quiz] .result-page .card-copy>p { color: #c5cfdd; }
body[data-page=quiz] .result-page .card-bottom { color: #c5cfdd; border-color: #63738b; }
body[data-page=quiz] .result-page .card-kicker .badge { color: #eed2a5; }
body[data-page=quiz] .result-page :is(.result-section,.result-tabs) :is(a,button,select,summary):focus-visible { outline-color: #e7c99a; }
body[data-page=quiz] .result-page :is(.portrait-chapter,.result-insights) :is(a,button,summary):focus-visible { outline-color: #253bc8; }

@media(max-width:1200px) {
  .discovery-world { min-height: 180px; }
  .preview-portraits img { height: 125px; }
}
@media(max-width:1000px) {
  .preview-portraits img { height: 190px; }
}
@media(max-width:700px) {
  .discovery-world { min-height: 195px; }
  .discovery-copy h3 { font-size: 1.25rem; }
  .universe-stage-copy { padding: 29px 25px; }
  .preview-portraits img { height: 140px; }
}
@media(max-width:600px) {
  body[data-page=home] .portal-hero,
  body[data-page=home] .hero-content { min-height: 370px; }
  body[data-page=home] .hero-script { padding: 105px 0 30px; }
  body[data-page=home] .hero-script h1 { font-size: clamp(2.55rem,9.4vw,3.2rem); }
  body[data-page=home] .hero-world-image:after { background: linear-gradient(0deg,#091321 0%,#091321aa 51%,#0913211a 100%); }
  .universe-stage { min-height: 315px; }
  .universe-stage-copy h1 { font-size: clamp(2.3rem,10vw,3.2rem); overflow-wrap: anywhere; }
  .universe-stage-shade { background: linear-gradient(0deg,#08111ef7 0%,#08111eb8 57%,#08111e30 100%); }
  .preview-portraits img { height: 170px; }
  body[data-page=quiz] .result-page .result-section h2 { font-size: 1.8rem; }
}