main.lore { max-width: 1080px; padding-top: 48px; padding-bottom: 40px; }
main.lore p, main.lore li { max-width: 68ch; }
.atlas, .atlas p, .atlas li { max-width: none; }
main.lore p, main.lore ul { color: var(--text); }
main.lore p { line-height: 1.75; }
main.lore h1, main.lore h2, main.lore h3, main.lore caption {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.25;
  letter-spacing: 0;
}
main.lore h1 { margin-bottom: 16px; font-size: 48px; }
main.lore h2 { margin-top: 40px; margin-bottom: 16px; font-size: 28px; }
main.lore h3 { margin-top: 26px; margin-bottom: 10px; font-size: 21px; }
main.lore .lede { font-size: 20px; line-height: 1.6; }
main.lore .eyebrow, main.lore .note, main.lore .jest { color: var(--muted); }
main.lore .jest { font-style: italic; }
main.lore .eyebrow { margin-bottom: 12px; font-size: 14px; }
main.lore .era-note { margin: 24px 0; padding-left: 16px; border-left: 3px solid var(--accent); }
main.lore .contents { margin: 28px 0 36px; padding: 20px 0; border-block: 1px solid var(--border); }
main.lore .contents h2 { margin: 0 0 12px; font: 600 14px/1.5 system-ui, sans-serif; color: var(--muted); }
main.lore .toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
main.lore .toc li { margin: 0; }
main.lore a { text-underline-offset: 3px; }
main.lore a:hover { color: var(--text); }
main.lore a:active { opacity: 0.8; }
.cabinet-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.table-wrap { margin: 24px 0; }
main.lore table { min-width: 480px; line-height: 1.6; }
main.lore caption { padding: 0 0 12px; text-align: left; font-size: 21px; font-weight: 700; }
main.lore th, main.lore td { padding: 12px 10px; }
main.lore tbody th { width: 26%; color: var(--text); font-weight: 600; }
main.lore td:last-child { white-space: nowrap; }
main.lore .links { padding: 0; }
main.lore .links li { margin: 0; }
main.lore .links a { color: var(--text); }
main.lore .links a:hover { background: var(--panel); text-decoration: underline; }
main.lore .further-reading { margin-top: 16px; }
.lore-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }
main.lore [id] { scroll-margin-top: 24px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 1; padding: 12px 16px; background: var(--panel); color: var(--text); }
.skip-link:focus { top: 8px; }
@media (max-width: 540px) {
  main.lore { padding-top: 28px; }
  main.lore h1 { font-size: 38px; }
  main.lore .lede { font-size: 18px; }
  .cabinet-link { max-width: 110px; white-space: normal; text-align: right; font-size: 13px; }
}
@media (max-width: 360px) {
  main.lore .toc { grid-template-columns: 1fr; }
}

.atlas {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.8fr);
  gap: 16px;
  align-items: start;
  margin: 8px 0 28px;
}
.atlas-map {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #102433;
}
.atlas-map svg { display: block; width: 100%; min-width: 680px; height: auto; }
.atlas-frame { fill: #102433; stroke: #ab9b71; stroke-width: 2; }
.compass { fill: #9aa0b4; font-size: 13px; text-anchor: middle; font-family: Georgia, "Times New Roman", serif; }
.place { cursor: pointer; }
.place text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  text-anchor: middle;
  pointer-events: none;
}
.place.narrow text { font-size: 11px; }
.place:focus { outline: none; }
.place:focus-visible :is(rect, circle, ellipse) { stroke: #fff; stroke-width: 3px; }
.sea rect, .sea ellipse { fill: #1a4d66; stroke: #8ec8d8; stroke-width: 1.5; }
.sea text { fill: #e7f6fb; }
.land-civ rect { fill: #e2c48a; stroke: #6d5330; }
.land-civ text { fill: #2c2114; }
.land-cold rect { fill: #c5d5e2; stroke: #4d6474; }
.land-cold text { fill: #1b2830; }
.land-mount rect { fill: #8d7364; stroke: #3e2e26; }
.land-mount text { fill: #f6efe6; }
.land-east rect { fill: #c4847c; stroke: #5c302c; }
.land-east text { fill: #2a1210; }
.land-jungle rect { fill: #6ea37a; stroke: #244232; }
.land-jungle text { fill: #102016; }
.land-desert rect { fill: #e6c56a; stroke: #7a5a22; }
.land-desert text { fill: #3a2c12; }
.island ellipse { fill: #d7c4a2; stroke: #6a5434; stroke-width: 1.5; }
.island text { fill: #2c2114; font-size: 13px; }
.city rect, .city circle { fill: #fff8ea; stroke: #2c2114; stroke-width: 2; }
.city text { fill: #2c2114; font-size: 14px; }
.land-rumor rect { fill: #243846; stroke: #e6d7a8; stroke-width: 2; stroke-dasharray: 7 5; }
.land-rumor text { fill: #f3ead2; font-size: 14px; }
.place:is(:hover, :focus-visible) :is(rect, circle, ellipse) {
  stroke: #f8e7ba;
  stroke-width: 3px;
  filter: brightness(1.12);
}
.atlas-read {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 16px 18px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.atlas-read h3 { margin: 0 0 8px; font-size: 24px; }
.dossier { display: none; }
.dossier.intro { display: block; }
.atlas:has(.dossier:target) .intro { display: none; }
.dossier:target, .dossier.open { display: block; }
.atlas:has(.dossier.open) .intro { display: none; }
.atlas:has(.place:is(:hover, :focus-visible)) .dossier { display: none !important; }
.atlas:has(a[href="#d-ocean"]:is(:hover, :focus-visible)) #d-ocean,
.atlas:has(a[href="#d-gates"]:is(:hover, :focus-visible)) #d-gates,
.atlas:has(a[href="#d-umbria"]:is(:hover, :focus-visible)) #d-umbria,
.atlas:has(a[href="#d-umbrian"]:is(:hover, :focus-visible)) #d-umbrian,
.atlas:has(a[href="#d-sybaris"]:is(:hover, :focus-visible)) #d-sybaris,
.atlas:has(a[href="#d-hyperborea"]:is(:hover, :focus-visible)) #d-hyperborea,
.atlas:has(a[href="#d-cold"]:is(:hover, :focus-visible)) #d-cold,
.atlas:has(a[href="#d-amazonia"]:is(:hover, :focus-visible)) #d-amazonia,
.atlas:has(a[href="#d-copper"]:is(:hover, :focus-visible)) #d-copper,
.atlas:has(a[href="#d-three"]:is(:hover, :focus-visible)) #d-three,
.atlas:has(a[href="#d-heraclea"]:is(:hover, :focus-visible)) #d-heraclea,
.atlas:has(a[href="#d-athens"]:is(:hover, :focus-visible)) #d-athens,
.atlas:has(a[href="#d-argos"]:is(:hover, :focus-visible)) #d-argos,
.atlas:has(a[href="#d-median"]:is(:hover, :focus-visible)) #d-median,
.atlas:has(a[href="#d-seriphos"]:is(:hover, :focus-visible)) #d-seriphos,
.atlas:has(a[href="#d-mineia"]:is(:hover, :focus-visible)) #d-mineia,
.atlas:has(a[href="#d-proteus"]:is(:hover, :focus-visible)) #d-proteus,
.atlas:has(a[href="#d-triton"]:is(:hover, :focus-visible)) #d-triton,
.atlas:has(a[href="#d-hanatari"]:is(:hover, :focus-visible)) #d-hanatari,
.atlas:has(a[href="#d-scythania"]:is(:hover, :focus-visible)) #d-scythania,
.atlas:has(a[href="#d-arcadia"]:is(:hover, :focus-visible)) #d-arcadia,
.atlas:has(a[href="#d-sun"]:is(:hover, :focus-visible)) #d-sun,
.atlas:has(a[href="#d-midia"]:is(:hover, :focus-visible)) #d-midia,
.atlas:has(a[href="#d-solos"]:is(:hover, :focus-visible)) #d-solos,
.atlas:has(a[href="#d-charybdis"]:is(:hover, :focus-visible)) #d-charybdis,
.atlas:has(a[href="#d-desert"]:is(:hover, :focus-visible)) #d-desert,
.atlas:has(a[href="#d-stygia"]:is(:hover, :focus-visible)) #d-stygia,
.atlas:has(a[href="#d-atlantis"]:is(:hover, :focus-visible)) #d-atlantis { display: block !important; }
@media (max-width: 800px) {
  .atlas { grid-template-columns: 1fr; }
  .atlas-read { position: static; max-height: none; }
}