/* The discovery atlas: each chapter is a place, not another set of cards. */
.chapter-jumps {
  gap: 9px;
  margin: 20px 0 25px;
}
.chapter-jumps a {
  position: relative;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 8px 13px 8px 27px;
  border: 1px solid #577f82;
  border-radius: 999px;
  background: #11333f;
  color: #e4f5ef;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: background .18s, border-color .18s, transform .18s;
}
.chapter-jumps a::before {
  content: '';
  position: absolute;
  left: 11px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: #bff28d;
  box-shadow: 0 0 9px #bff28d88;
}
.chapter-jumps a:hover {
  transform: translateY(-2px);
  background: #1a4852;
  border-color: #adf1cb;
}
.chapter-jumps a:focus-visible,
.world-map .stage-node:focus-visible,
.study-index button:focus-visible {
  outline: 3px solid #d9ff94;
  outline-offset: 3px;
}

.world-map { gap: 29px; }
.world-map .chapter {
  --chapter-dark: #173847;
  --chapter-deep: #0b232f;
  --chapter-art: url('./assets/chapter-1.svg');
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--chapter) 55%, #294a58);
  border-radius: 21px;
  background: linear-gradient(160deg, var(--chapter-dark), var(--chapter-deep));
  box-shadow: 0 18px 38px #020e1788, inset 0 1px #ffffff19;
  scroll-margin-top: 22px;
  isolation: isolate;
}
.world-map .chapter::before {
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  z-index: 2;
  background: linear-gradient(90deg, var(--chapter), color-mix(in srgb, var(--chapter) 38%, transparent) 68%, transparent);
}
.world-map .chapter:nth-child(1) { --chapter-dark:#394038; --chapter-deep:#152e35; --chapter-art:url('./assets/chapter-1.svg'); }
.world-map .chapter:nth-child(2) { --chapter-dark:#174846; --chapter-deep:#102c39; --chapter-art:url('./assets/chapter-2.svg'); }
.world-map .chapter:nth-child(3) { --chapter-dark:#233f64; --chapter-deep:#112638; --chapter-art:url('./assets/chapter-3.svg'); }
.world-map .chapter:nth-child(4) { --chapter-dark:#533c43; --chapter-deep:#172d3b; --chapter-art:url('./assets/chapter-4.svg'); }
.world-map .chapter:nth-child(5) { --chapter-dark:#4a4534; --chapter-deep:#1b3136; --chapter-art:url('./assets/chapter-5.svg'); }
.world-map .chapter:nth-child(6) { --chapter-dark:#373865; --chapter-deep:#16283e; --chapter-art:url('./assets/chapter-6.svg'); }
.world-map .chapter:nth-child(7) { --chapter-dark:#184d4a; --chapter-deep:#15303b; --chapter-art:url('./assets/chapter-7.svg'); }
.world-map .chapter:nth-child(8) { --chapter-dark:#365267; --chapter-deep:#152d3d; --chapter-art:url('./assets/chapter-8.svg'); }

.world-map .chapter-head {
  position: relative;
  min-height: 166px;
  display: flex;
  align-items: flex-end;
  gap: 15px;
  margin: 0;
  padding: 25px 25px 26px;
  overflow: hidden;
  background:
    linear-gradient(90deg, #071c28f5 0%, #0a2537cc 39%, #0b25384a 77%, #0b233323 100%),
    var(--chapter-art) right center / auto 100% no-repeat,
    linear-gradient(125deg, var(--chapter-dark), var(--chapter-deep));
  border-bottom: 1px solid color-mix(in srgb, var(--chapter) 42%, #43647a);
}
.world-map .chapter-head::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 28px;
  background: linear-gradient(transparent, #091e2b66);
  pointer-events: none;
}
.world-map .chapter-head > * { position: relative; z-index: 1; }
.world-map .chapter-crest {
  width: 52px;
  height: 52px;
  flex: none;
  border: 2px solid var(--chapter);
  border-radius: 15px;
  background: #0d2834d9;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--chapter) 32%, #102736), 0 0 25px color-mix(in srgb, var(--chapter) 32%, transparent);
  color: #fff9db;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.world-map .chapter-head small {
  color: #dbffbf;
  font-size: 11px;
  letter-spacing: .18em;
  text-shadow: 0 1px 6px #071827;
}
.world-map .chapter-head h3 {
  margin-top: 4px;
  color: #fff;
  font-size: clamp(23px, 2.2vw, 30px);
  line-height: 1.25;
  text-shadow: 0 2px 14px #071827;
}
.world-map .chapter-head > span:last-child {
  align-self: flex-end;
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid #ffffff66;
  border-radius: 999px;
  background: #071d2da8;
  color: #ecfff8;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.world-map .stage-grid {
  position: relative;
  gap: 13px;
  padding: 24px;
  background:
    radial-gradient(circle at 9% 12%, color-mix(in srgb, var(--chapter) 10%, transparent), transparent 32%),
    linear-gradient(135deg, #1027337d, #08202bc2);
}
.world-map .stage-node {
  min-height: 153px;
  gap: 5px;
  padding: 16px 16px 14px;
  border: 1px solid color-mix(in srgb, var(--chapter) 45%, #507181);
  border-radius: 14px;
  background:
    linear-gradient(150deg, #ffffff0d, transparent 54%),
    linear-gradient(155deg, color-mix(in srgb, var(--chapter-dark) 40%, #102d3a), #0b2835);
  box-shadow: inset 0 1px #ffffff1d, 0 7px 14px #03172166;
  color: #fff;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.world-map .stage-node::before {
  content: '';
  position: absolute;
  top: 17px;
  right: 17px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--chapter);
  border-radius: 50%;
  background: #0a2733;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--chapter) 18%, transparent);
}
.world-map .stage-node.is-cleared::before {
  background: var(--chapter);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--chapter) 18%, transparent), 0 0 17px var(--chapter);
}
.world-map .stage-node:not(:nth-child(3n))::after {
  content: '';
  position: absolute;
  top: 46%;
  right: -14px;
  width: 13px;
  border-top: 2px dashed color-mix(in srgb, var(--chapter) 66%, #f7e9b3);
  pointer-events: none;
}
.world-map .stage-node:hover:not(:disabled) {
  transform: translateY(-4px);
  border-color: #d2f7c8;
  box-shadow: inset 0 1px #ffffff3d, 0 11px 24px #001822a8, 0 0 21px color-mix(in srgb, var(--chapter) 25%, transparent);
}
.world-map .stage-node.is-cleared {
  background: linear-gradient(145deg, color-mix(in srgb, var(--chapter) 23%, #183d40), #123a3c);
  border-color: var(--chapter);
}
.world-map .stage-no {
  padding-right: 23px;
  color: #d9ffb1;
  font-size: 11px;
  letter-spacing: .16em;
}
.world-map .stage-node strong {
  max-width: 100%;
  padding-right: 8px;
  color: #fff;
  font-size: 16px;
  line-height: 1.35;
}
.world-map .stage-period {
  color: #f4daa7;
  font-size: 12px;
  line-height: 1.45;
}
.world-map .stage-subtitle {
  display: -webkit-box;
  overflow: hidden;
  color: #cce0e0;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  text-overflow: clip;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.world-map .stage-bottom {
  padding-top: 9px;
  border-top: 1px solid #a8d3c035;
  color: #dceee9;
  font-size: 11px;
}
.world-map .stage-stars { color: #d8fd91; letter-spacing: .09em; }
.world-map .stage-arrow { display: none; }

/* The journal uses the same eight places while keeping the long prose calm. */
#study-view {
  --study-art: url('./assets/chapter-1.svg');
  --study-wash: #d7bc79;
}
#study-view:has(#study-stage-select optgroup:nth-child(2) option:checked) { --study-art:url('./assets/chapter-2.svg'); --study-wash:#77dac6; }
#study-view:has(#study-stage-select optgroup:nth-child(3) option:checked) { --study-art:url('./assets/chapter-3.svg'); --study-wash:#9ac0ed; }
#study-view:has(#study-stage-select optgroup:nth-child(4) option:checked) { --study-art:url('./assets/chapter-4.svg'); --study-wash:#f1aeb8; }
#study-view:has(#study-stage-select optgroup:nth-child(5) option:checked) { --study-art:url('./assets/chapter-5.svg'); --study-wash:#e9bc8a; }
#study-view:has(#study-stage-select optgroup:nth-child(6) option:checked) { --study-art:url('./assets/chapter-6.svg'); --study-wash:#afaaf2; }
#study-view:has(#study-stage-select optgroup:nth-child(7) option:checked) { --study-art:url('./assets/chapter-7.svg'); --study-wash:#8de1c9; }
#study-view:has(#study-stage-select optgroup:nth-child(8) option:checked) { --study-art:url('./assets/chapter-8.svg'); --study-wash:#8cd9eb; }
.study-page-head {
  position: relative;
  min-height: 179px;
  padding: 30px 31px;
  border: 1px solid #618d86;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(95deg, #0a2936ee 0%, #0c3340dd 52%, #1846547a 100%),
    url('./assets/chapter-8.svg') right center / auto 120% no-repeat,
    #123440;
  box-shadow: 0 14px 32px #04141b8c;
}
.study-page-head::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #d2ff96, #79e3cb 54%, transparent);
}
.study-page-head h1 { margin: 7px 0 4px; color: #fff; }
.study-page-head p { color: #dff2ee; }
.study-progress-card {
  position: relative;
  min-width: 179px;
  border-color: #a2e5c077;
  border-radius: 13px;
  background: #0a2734dc;
  box-shadow: inset 0 1px #ffffff27;
}
.study-progress-track { background: #35545b; }
.study-progress-track > span { background: linear-gradient(90deg, #8ce9d4, #d6fc8e); }
.study-toolbar {
  margin: 14px 0 4px;
  padding: 13px 17px;
  border: 1px solid #426b72;
  border-radius: 12px;
  background: #10313c;
}
.study-index {
  border-color: #5a8780;
  border-radius: 14px;
  background: linear-gradient(160deg, #133641, #0b2734);
  box-shadow: inset 0 1px #ffffff16;
}
.study-index-group h2 { color: #e6fff4; }
.study-index button { min-height: 42px; font-size: 13px; }
.study-index button.is-current {
  border-color: #a4e3ba;
  background: #265e5a;
  box-shadow: inset 3px 0 #cef995;
}
.study-article {
  border-color: #71938a;
  border-radius: 17px;
  background: #102f38;
  box-shadow: 0 17px 42px #06171cb5;
}
.study-article-banner {
  min-height: 218px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 31px clamp(24px, 3vw, 40px);
  border-color: #99c5ad7d;
  background:
    linear-gradient(90deg, #082634f5 0%, #0b3342df 51%, #10405682 100%),
    var(--study-art) right center / auto 100% no-repeat,
    linear-gradient(140deg, #204459, #12313d);
}
.study-article-banner::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--study-wash), #ffffff38 65%, transparent);
}
.study-article-overline { color: #dcffad; }
.study-article-group { color: #ffe4a8; }
.study-article-banner h2 { max-width: 85%; color: #fff; text-shadow: 0 2px 18px #051521; }
.study-article-banner p { color: #e4f0eb; }
.study-longread {
  position: relative;
  margin-top: 26px;
  border: 1px solid #d5d9bd;
  border-radius: 4px 14px 14px 4px;
  background:
    linear-gradient(90deg, #dce8d3 0 6px, transparent 6px),
    linear-gradient(150deg, #fbfcef, #f0f5e8);
  box-shadow: 7px 9px 0 #092c3688, 0 15px 34px #06172085;
}
.study-longread::before {
  content: '';
  position: absolute;
  top: 22px;
  right: 22px;
  width: 38px;
  height: 38px;
  border: 1px solid #a9bea8;
  border-radius: 50%;
  background: radial-gradient(circle, #6aab9080 0 2px, transparent 3px), repeating-conic-gradient(from 0deg, #89ac9e 0deg 2deg, transparent 2deg 30deg);
  opacity: .58;
  pointer-events: none;
}
.study-longread-head { padding-right: 45px; }
.study-longread-part { border-color: #d2dac5; }
.study-person {
  position: relative;
  padding-left: 22px;
  border-color: #bed6c1;
  background: #fffef5;
  box-shadow: 0 4px 0 #bed1bd66;
}
.study-person::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 9px;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: #3b9b85;
}

@media (max-width: 1160px) {
  .world-map .chapter-head { min-height: 149px; }
  .world-map .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .world-map .stage-node { min-height: 156px; }
  .world-map .stage-node::after { display: none; }
  .world-map .stage-node:nth-child(odd):not(:last-child)::after {
    display: block;
    content: '';
    position: absolute;
    top: 46%;
    right: -13px;
    width: 12px;
    border-top: 2px dashed color-mix(in srgb, var(--chapter) 66%, #f7e9b3);
    pointer-events: none;
  }
}
@media (max-width: 620px) {
  .chapter-jumps { gap: 7px; }
  .chapter-jumps a { min-height: 42px; font-size: 12px; }
  .world-map { gap: 20px; }
  .world-map .chapter-head { min-height: 142px; padding: 18px 16px 20px; background-size: auto, auto 100%, auto; }
  .world-map .chapter-crest { width: 45px; height: 45px; font-size: 18px; }
  .world-map .chapter-head h3 { font-size: 23px; }
  .world-map .chapter-head > span:last-child { display: none; }
  .world-map .stage-grid { grid-template-columns: 1fr; gap: 10px; padding: 15px; }
  .world-map .stage-node { min-height: 124px; padding: 13px 12px; }
  .world-map .stage-node strong { font-size: 15px; }
  .world-map .stage-period,.world-map .stage-subtitle { font-size: 12px; }
  .world-map .stage-bottom { font-size: 11px; }
  .study-page-head { min-height: 174px; padding: 22px 19px; background-size: auto, auto 100%, auto; }
  .study-progress-card { min-width: 0; max-width: 185px; margin-top: 17px; }
  .study-toolbar { margin-top: 12px; padding: 13px; }
  .study-article-banner { min-height: 190px; padding: 24px 20px; background-size: auto, auto 100%, auto; }
  .study-article-banner h2 { max-width: 100%; }
  .study-longread { margin: 18px 12px 8px; padding: 22px 17px; }
  .study-longread::before { display: none; }
  .study-person { padding-left: 22px; }
  .world-map .stage-node:not(:last-child)::after,
  .world-map .stage-node:nth-child(odd):not(:last-child)::after {
    display: block;
    top: auto;
    right: auto;
    bottom: -11px;
    left: 24px;
    width: 0;
    height: 10px;
    border-top: 0;
    border-left: 2px dashed color-mix(in srgb, var(--chapter) 66%, #f7e9b3);
  }
}
@media (max-width: 390px) {
  .world-map .chapter-head h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-jumps a,.world-map .stage-node { transition: none; }
  .chapter-jumps a:hover,.world-map .stage-node:hover:not(:disabled) { transform: none; }
}