:root {
  --sea: #1d3b45;
  --sea-deep: #152c34;
  --land: #f4e6c0;
  --marble: #f3f2ee;
  --ink: #182226;
  --muted: #5b676c;
  --rule: #d5d6d0;
  --saffron: #e3a72f;
  --saffron-ink: #8a5d00;
  --serif: "Alegreya", Georgia, serif;
  --sans: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;

  --g-lydian: #a8790a;
  --g-persian: #6b3fa0;
  --g-mede: #24798a;
  --g-greek: #1f5fa8;
  --g-egyptian: #2f7d4f;
  --g-scythian: #8c4a2f;
  --g-mesopotamian: #a0355e;
  --g-phoenician: #c2452d;
  --g-other: #5e6a70;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--marble);
  color: var(--ink);
  font: 400 1.0625rem/1.5 var(--sans);
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; }

/* ---------- frame ---------- */
#app { display: flex; flex-direction: column; min-height: 100dvh; }

.bar {
  position: sticky; top: 0; z-index: 1100;
  display: flex; align-items: center; gap: .25rem;
  padding: calc(.4rem + env(safe-area-inset-top)) .5rem .45rem;
  background: var(--sea); color: #f3f2ee;
}
.bar .where { flex: 1; min-width: 0; text-align: center; }
.bar h1 {
  margin: 0; font: 700 1.7rem/1.05 var(--serif); letter-spacing: .01em;
}
.bar p {
  margin: .1rem 0 0; font-size: .9rem; color: #b9cbd0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar p a { color: var(--saffron); margin-left: .6em; white-space: nowrap; }
.step {
  flex: none; width: 3rem; height: 3rem; border: 0; border-radius: 50%;
  background: transparent; color: #f3f2ee;
  font: 400 2.4rem/1 var(--serif); padding-bottom: .35rem;
}
.step:hover:not(:disabled) { background: #ffffff1c; }
.step:disabled { opacity: .25; cursor: default; }

#mapwrap { position: relative; height: 44dvh; min-height: 260px; background: var(--sea); }
#app.bigmap #mapwrap { height: calc(100dvh - 4.2rem); }
#map { position: absolute; inset: 0; background: var(--sea); font-family: var(--serif); }
.mapctl { position: absolute; left: .6rem; bottom: .6rem; z-index: 900; display: flex; gap: .4rem; }
.mapctl button {
  border: 1px solid #ffffff40; border-radius: 3px; padding: .3rem .65rem;
  background: #152c34e6; color: #eef0ea; font-size: .9rem;
}
.mapctl button[aria-pressed="true"] { background: var(--saffron); color: #1a1a12; border-color: var(--saffron); }

#page { padding: 1.1rem 1.1rem 4rem; max-width: 44rem; width: 100%; margin: 0 auto; }
#page:focus { outline: none; }

@media (min-width: 900px) {
  #app { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; grid-template-rows: auto 1fr; height: 100dvh; }
  #mapwrap { grid-column: 1; grid-row: 1 / 3; height: auto; }
  #app.bigmap #mapwrap { height: auto; }
  .bar { grid-column: 2; grid-row: 1; position: static; }
  #page { grid-column: 2; grid-row: 2; overflow-y: auto; padding: 1.4rem 1.6rem 4rem; }
  #grow { display: none; }
}

/* ---------- page ---------- */
.loading, .fail { color: var(--muted); }
h2 { font: 700 1.9rem/1.12 var(--serif); margin: 0 0 .5rem; text-wrap: balance; }
h3 { font: 500 1.02rem/1.2 var(--sans); color: var(--muted); margin: 2rem 0 .6rem; }
.brief { font: 400 1.16rem/1.5 var(--serif); margin: 0; }
section + section { margin-top: 0; }

/* thread: the path from the book's big subject down to today */
.thread { margin: 0 0 1.4rem; padding: 0; list-style: none; }
.thread li {
  position: relative; padding: .12rem 0 .12rem calc(var(--d) * 1.15rem + 1.2rem);
  font: 400 1rem/1.3 var(--sans); color: var(--muted);
}
.thread li::before {
  content: ""; position: absolute; left: calc(var(--d) * 1.15rem + .3rem); top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid currentColor;
}
.thread li:not(:first-child)::after {
  content: ""; position: absolute; left: calc(var(--d) * 1.15rem - .62rem); top: -.2em;
  width: .85rem; height: .95em; border-left: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule);
}
.thread li.here { color: var(--ink); font-weight: 700; }
.thread li.here::before { background: var(--saffron); border-color: var(--saffron); }
.thread .tag { font-weight: 400; font-style: italic; color: var(--saffron-ink); margin-left: .45em; white-space: nowrap; }
.thread li.gone { text-decoration: line-through; text-decoration-color: #9aa3a6; }
.thread li.gone .tag { text-decoration: none; display: inline-block; }
.threadnote { margin: -.9rem 0 1.4rem; font: italic 400 1rem/1.4 var(--serif); color: var(--muted); }

/* path strip: one column per day, hanging lower the deeper the digression */
.path { display: flex; gap: 2px; overflow-x: auto; padding: 0 0 .3rem; margin: 0 0 1.3rem; scrollbar-width: thin; }
.path button {
  flex: none; width: 1.6rem; border: 0; background: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: .72rem; color: var(--muted); height: 3.4rem; justify-content: space-between;
}
.path i { display: block; width: 100%; height: calc(.35rem + var(--d) * .5rem); background: #b8c2c4; border-radius: 0 0 2px 2px; }
.path button.unread i { height: .2rem; background: var(--rule); }
.path button[aria-current="true"] i { background: var(--saffron); }
.path button[aria-current="true"] { color: var(--ink); font-weight: 700; }
.path button:hover i { background: var(--sea); }

/* people */
.people, .places { list-style: none; margin: 0; padding: 0; }
.people li { padding: .55rem 0 .6rem .8rem; border-left: 4px solid var(--g); margin-bottom: .55rem; }
.people .nm { font: 700 1.18rem/1.2 var(--serif); }
.people .aka, .places .aka { font: italic 400 1rem var(--serif); color: var(--muted); margin-left: .3em; }
.people .grp { color: var(--g); font-size: .92rem; font-weight: 500; margin-left: .5em; white-space: nowrap; }
.people .role { display: block; color: var(--muted); font-size: .96rem; line-height: 1.35; }
.people .today { display: block; margin-top: .15rem; line-height: 1.4; }
.people .seen { font-size: .9rem; color: var(--muted); }
.people li.myth { border-left-style: double; border-left-width: 6px; }

.places li { border-bottom: 1px solid var(--rule); }
.places li:first-child { border-top: 1px solid var(--rule); }
.places button {
  display: block; width: 100%; text-align: left; border: 0; background: none; padding: .5rem 0 .55rem;
}
.places button:hover .nm { text-decoration: underline; text-decoration-color: var(--saffron); text-underline-offset: 3px; }
.places .nm { font: 700 1.08rem/1.2 var(--serif); }
.places .kind { color: var(--muted); font-size: .9rem; margin-left: .5em; }
.places .today { display: block; line-height: 1.4; }

details { border-top: 1px solid var(--rule); margin-top: 1.6rem; }
details + details { margin-top: 0; }
details:last-of-type { border-bottom: 1px solid var(--rule); }
summary { padding: .7rem 0; font: 500 1.05rem var(--sans); cursor: pointer; }
details > :last-child { margin-bottom: 1rem; }
.gloss { margin: 0; padding: 0; list-style: none; }
.gloss li { display: grid; grid-template-columns: 2.6rem 1fr; padding: .22rem 0; line-height: 1.4; }
.gloss b { font: 700 1rem var(--serif); color: var(--saffron-ink); }
.recap p { margin: 0 0 .55rem; font: 400 1.05rem/1.45 var(--serif); }
.recap a { font: 500 .88rem var(--sans); color: var(--muted); margin-right: .5em; text-decoration: none; white-space: nowrap; }
.lines h4 { font: 700 1.05rem var(--serif); margin: .8rem 0 .3rem; }
.lines ol { margin: 0 0 .6rem; padding-left: 1.4rem; }
.lines li { padding: .1rem 0; line-height: 1.4; }
.lines li span { color: var(--muted); }
.pilot { margin-top: 2rem; color: var(--muted); font-size: .93rem; }

/* ---------- map ---------- */
.leaflet-container { background: var(--sea); }
.leaflet-relief-pane img { mix-blend-mode: multiply; }
.leaflet-div-icon { background: none; border: 0; }
.pt { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: auto; cursor: pointer; }
.pt i {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: #3b4a4f; border: 1.5px solid #f3f2ee;
}
.pt b {
  position: absolute; font: 500 .98rem/1 var(--serif); color: #1a2428;
  text-shadow: 0 0 3px #f1ecdc, 0 0 3px #f1ecdc, 0 0 2px #f1ecdc, 0 0 2px #f1ecdc;
  padding: 2px 3px;
}
.pt.dir-e b { left: 6px; top: -.62em; }
.pt.dir-w b { right: 6px; top: -.62em; }
.pt.dir-n b { left: 0; bottom: 5px; transform: translateX(-50%); }
.pt.dir-s b { left: 0; top: 5px; transform: translateX(-50%); }
.pt.today i { left: -6.5px; top: -6.5px; width: 13px; height: 13px; background: var(--saffron); border: 2px solid #17262b; }
.pt.today b { font-weight: 700; font-size: 1.1rem; }
.pt.today.dir-e b { left: 9px; } .pt.today.dir-w b { right: 9px; }
.pt.today.dir-n b { bottom: 8px; } .pt.today.dir-s b { top: 8px; }
.pt.past { opacity: .62; }
.pt.nolabel b { display: none; }

/* areas: regions, seas, peoples: a name on the map, no dot */
.pt.area i { display: none; }
.pt.area b {
  left: 0; top: 0; transform: translate(-50%, calc(-50% + var(--dy, 0em)));
  font-style: italic; font-weight: 400; letter-spacing: .14em; font-size: 1.02rem;
}
.pt.area.today b { font-weight: 500; font-size: 1.16rem; color: #5a3c00; }
.pt.k-sea b, .pt.k-river b {
  color: #cfe0e4; text-shadow: 0 0 3px var(--sea-deep), 0 0 3px var(--sea-deep);
}
.pt.k-river b { letter-spacing: .04em; color: #1e4a58; text-shadow: 0 0 3px #f1ecdc, 0 0 3px #f1ecdc; }
.pt.k-sea.today b { color: #ffd77a; }
.pt.k-river.today b { color: #5a3c00; }
.pt.k-sanctuary:not(.area) i, .pt.k-mountain:not(.area) i { border-radius: 0; transform: rotate(45deg); }

.arrow { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; }
.arrow::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(0 10%, 100% 50%, 0 90%, 25% 50%); background: #b3261e;
}

.leaflet-popup-content-wrapper { border-radius: 4px; background: var(--marble); color: var(--ink); }
.leaflet-popup-tip { background: var(--marble); }
.leaflet-popup-content { margin: .75rem .9rem; font: 400 1rem/1.4 var(--sans); min-width: 12rem; }
.leaflet-popup-content h4 { margin: 0; font: 700 1.2rem/1.2 var(--serif); }
.leaflet-popup-content .aka { font: italic 400 1rem var(--serif); color: var(--muted); }
.leaflet-popup-content p { margin: .3rem 0 0; }
.leaflet-popup-content .days { color: var(--muted); font-size: .92rem; }
.leaflet-popup-content .days a { margin-right: .35em; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.leaflet-bar a { background: #152c34e6; color: #eef0ea; border-color: #ffffff30; }
.leaflet-bar a:hover { background: var(--sea); color: #fff; }
.leaflet-control-attribution { background: #152c34b0 !important; color: #a9bcc1; font: 400 .7rem var(--sans); }
.leaflet-control-attribution a { color: #cfdcdf; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

details.bk { margin-top: 0; border-top: 0; border-bottom: 0 !important; }
details.bk summary { padding: .35rem 0; font: 700 1rem var(--serif); }

.gloss li.bkbreak span { font: 700 1rem var(--serif); padding-top: .5rem; }