/* Orbis Terrarum: an atlas of the world's history.
   Layout: an engraved atlas plate (the map) bound in the site's dark cloth, a ruled timeline beneath it,
   and a chronicle column beside it (stacked on phones). */
body.atlas {
  /* Page chrome in the site's dark palette; the map plate itself stays parchment. */
  --bg: #0a0a0f;
  --panel: #12121a;
  --ink: #e8e4dc;
  --ink-soft: #9a968e;
  --rule: #2e2c33;
  --gilt: #c9a84c;
  --oxblood: #e0735d;
  --plate-edge: #8a7234;
  --chip: #18171f;
  --chip-alt: #201e26;
  --f-display: 'IM Fell English SC', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --f-italic: 'IM Fell English', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --f-body: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  color-scheme: dark;
}
body.atlas { background: var(--bg); color: var(--ink); }
.atlas-app [hidden] { display: none !important; }
.atlas-app {
  font-family: var(--f-body); font-size: 17px; line-height: 1.5; color: var(--ink);
  width: 100%; max-width: 1560px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.atlas-app button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, .track:focus-visible { outline: 2px solid var(--gilt); outline-offset: 2px; }

.atlas-app {
  display: grid; gap: 12px; padding-block: 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "top" "map" "time" "panel" "foot";
}
.top { grid-area: top; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.brand { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; min-width: 0; }
.title { font-family: var(--f-display); font-size: 30px; letter-spacing: .08em; line-height: 1; color: var(--ink); }
.sub { font-family: var(--f-italic); font-style: italic; color: var(--ink-soft); font-size: 16px; }
.proof { flex: none; font-family: var(--f-display); font-size: 13px; letter-spacing: .14em; color: var(--oxblood); border: 1px solid var(--oxblood); padding: 2px 8px 1px; }

.mapwrap {
  grid-area: map; position: relative; height: min(64vh, 640px); min-height: 340px;
  border: 1px solid var(--plate-edge); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--plate-edge), 0 10px 40px rgba(0,0,0,.5);
  margin: 5px; background: #e4d8bb; overflow: hidden;
}
canvas#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
canvas#map:active { cursor: grabbing; }

.cartouche {
  position: absolute; left: 12px; top: 12px; z-index: 3; pointer-events: none;
  background: rgba(243, 234, 212, .92); color: #2a2017; padding: 8px 14px 7px; text-align: center;
  border: 1px solid #4a3a26; box-shadow: inset 0 0 0 3px rgba(243, 234, 212, .92), inset 0 0 0 4px #4a3a26;
  min-width: 132px;
}
.cartouche .yr { font-family: var(--f-display); font-size: 28px; line-height: 1.05; letter-spacing: .04em; font-variant-numeric: oldstyle-nums; }
.cartouche .auc { font-family: var(--f-italic); font-style: italic; font-size: 14px; color: #6b4a2a; min-height: 1.2em; }
.cartouche .snap { font-family: var(--f-body); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #7a6a52; margin-top: 2px; }

.mapctl { position: absolute; right: 10px; top: 10px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.mapctl button {
  min-width: 36px; height: 36px; padding: 0 10px; background: rgba(243, 234, 212, .94); color: #2a2017;
  border: 1px solid #4a3a26; font-family: var(--f-display); font-size: 18px; line-height: 1;
}
.mapctl #follow { font-size: 13px; letter-spacing: .08em; }
.mapctl #follow[aria-pressed="true"] { background: #2f2418; color: #f2ead6; }

#markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ev {
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; border: 0; background: none;
  pointer-events: auto; display: grid; place-items: center;
}
.ev i { width: 13px; height: 13px; border-radius: 50%; background: #9b2a20; box-shadow: 0 0 0 2px #f3ead4, 0 0 0 3px #6e1d16, 0 1px 3px rgba(0,0,0,.4); transition: transform .2s; }
.ev.on i { transform: scale(1.35); }
.ev.on::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #9b2a20; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.flag {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap;
  font-family: var(--f-italic); font-style: italic; font-size: 15px; color: #2a2017;
  background: rgba(243, 234, 212, .95); border: 1px solid #6e1d16; padding: 1px 8px 2px; transform: translate(14px, -50%);
}
.tip {
  position: absolute; z-index: 4; pointer-events: none; max-width: 240px;
  background: rgba(243, 234, 212, .97); color: #2a2017; border: 1px solid #4a3a26; padding: 6px 10px 7px;
  font-size: 15px; line-height: 1.3; box-shadow: 0 2px 10px rgba(40, 25, 10, .25);
}
.tip b { font-family: var(--f-display); font-weight: normal; font-size: 17px; letter-spacing: .05em; display: block; }
.tip span { font-family: var(--f-italic); font-style: italic; color: #6b5a44; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; background: #e4d8bb; color: #4a3a26; font-family: var(--f-italic); font-style: italic; font-size: 20px; }

.timebar { grid-area: time; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-inline: 5px; }
.tbtn { width: 38px; height: 38px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--rule); color: var(--ink); padding: 0; }
.tbtn svg { width: 16px; height: 16px; fill: currentColor; }
.track { position: relative; height: 54px; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.eras { position: absolute; left: 0; right: 0; top: 18px; height: 20px; display: flex; }
.era { position: absolute; top: 0; height: 100%; border-left: 1px solid var(--rule); background: var(--chip); overflow: hidden; }
.era > span { position: absolute; left: 5px; top: 2px; font-family: var(--f-display); font-size: 11.5px; letter-spacing: .1em; white-space: nowrap; color: var(--ink-soft); }
.era:nth-child(odd) { background: var(--chip-alt); }
.ticks { position: absolute; left: 0; right: 0; top: 38px; height: 10px; }
.tick { position: absolute; top: 0; width: 1px; height: 7px; background: var(--oxblood); opacity: .75; }
.scale { position: absolute; left: 0; right: 0; top: 0; height: 16px; }
.scale span { position: absolute; transform: translateX(-50%); font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.thumb { position: absolute; top: 12px; width: 2px; height: 34px; margin-left: -1px; background: var(--oxblood); pointer-events: none; }
.thumb::before { content: ""; position: absolute; left: -6px; top: -5px; width: 14px; height: 14px; background: var(--oxblood); transform: rotate(45deg) scale(.75); }

.panel { grid-area: panel; display: flex; flex-direction: column; gap: 18px; background: var(--panel); border: 1px solid var(--rule); padding: 16px 18px 20px; min-width: 0; }
.age { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.age .eyebrow { font-family: var(--f-display); font-size: 13px; letter-spacing: .16em; color: var(--gilt); }
.age h2 { margin: 0; font-family: var(--f-display); font-weight: normal; font-size: 26px; letter-spacing: .04em; line-height: 1.15; text-wrap: balance; }
.age .from { font-family: var(--f-italic); font-style: italic; color: var(--ink-soft); font-size: 15px; }
.from button { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; color: var(--oxblood); font-style: italic; font-family: var(--f-italic); font-size: 15px; }
.sect h3 { margin: 0 0 8px; font-family: var(--f-display); font-weight: normal; font-size: 14px; letter-spacing: .16em; color: var(--gilt); }
.realms { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.realms button { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 3px 0; text-align: left; font-size: 16px; }
.realms button:hover { color: var(--oxblood); }
.sw { width: 18px; height: 12px; flex: none; border: 1px solid rgba(0,0,0,.35); }
.chron { display: grid; gap: 10px; }
.entry { border-top: 1px solid var(--rule); padding-top: 10px; }
.entry button.hd { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; }
.entry .dt { font-family: var(--f-display); font-size: 13px; letter-spacing: .12em; color: var(--oxblood); }
.entry .nm { font-family: var(--f-italic); font-style: italic; font-size: 20px; line-height: 1.2; text-wrap: balance; }
.entry p { margin: 6px 0 0; max-width: 62ch; }
.entry .pl { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.entry.on .nm { color: var(--oxblood); }
.entry.ahead { opacity: .7; }
.entry .tag { font-family: var(--f-body); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.foot { grid-area: foot; font-size: 13px; color: var(--ink-soft); line-height: 1.45; margin-inline: 5px; }
.foot b { font-weight: 600; color: var(--ink); }

@media (min-width: 960px) {
  .atlas-app { height: calc(100vh - 65px); height: calc(100dvh - 65px); min-height: 620px; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "top top" "map panel" "time panel" "foot panel"; }
  .mapwrap { height: auto; min-height: 0; }
  .panel { overflow: auto; min-height: 0; }
}
.era > span .short { display: none; }
.era > span.is-short .long { display: none; }
.era > span.is-short .short { display: inline; }
.era > span.is-none { visibility: hidden; }
.scale.tight span.minor { display: none; }
@media (max-width: 640px) {
  .title { font-size: 25px; }
  .sub { font-size: 15px; }
  .proof { font-size: 11px; padding: 2px 6px 1px; }
  .cartouche { left: 8px; top: 8px; padding: 5px 10px 4px; min-width: 104px; }
  .cartouche .yr { font-size: 21px; }
  .cartouche .auc { font-size: 12.5px; }
  .cartouche .snap { font-size: 10px; letter-spacing: .05em; }
  .mapctl { top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); right: 10px; flex-direction: row; }
  .mapctl button { min-width: 34px; height: 34px; }
  .timebar { grid-template-columns: auto auto auto 1fr; grid-template-areas: "track track track track" "play back fwd ."; row-gap: 6px; }
  .track { grid-area: track; }
  #play { grid-area: play; } #back { grid-area: back; } #fwd { grid-area: fwd; }
  .era > span { font-size: 9.5px; letter-spacing: 0; left: 3px; }
  .scale span { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .ev.on::after { animation: none; } }