/* Geography
   A 1970s textbook plate: one flat ink field, the globe drawn in white line,
   type in Helvetica reversed out of the field. The second ink (gold) marks
   the projects and their figure numbers, and nothing else. */

:root {
  --field: #2b666b;
  --ink: #fff;
  --ink-soft: rgba(255, 255, 255, 0.76);
  --ink-faint: rgba(255, 255, 255, 0.5);
  --spot: #f2b134;
  --veil: rgba(43, 102, 107, 0.92);
  --helvetica: Helvetica, "Helvetica Neue", "Nimbus Sans", "TeX Gyre Heros", Arial, sans-serif;
  --gutter: clamp(16px, 2.4vw, 36px);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --field: #0f2426;
    --veil: rgba(15, 36, 38, 0.93);
    --spot: #e9a62c;
  }
}
:root[data-theme="dark"] {
  --field: #0f2426;
  --veil: rgba(15, 36, 38, 0.93);
  --spot: #e9a62c;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--field);
  color: var(--ink);
  font-family: var(--helvetica);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.5s ease;
}

button { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The plate */

.stage {
  position: fixed;
  inset: 0;
  touch-action: none;
  cursor: default;
}
/* over the earth the cursor is a magnifying glass; its crosshair is the point
   the readout reports, and a click zooms in on it */
.stage.is-over-earth { cursor: url("../img/magnifier.svg") 12 12, zoom-in; }
/* holding Alt (Option) turns the glass to zoom out */
.alt-held .stage.is-over-earth { cursor: url("../img/magnifier-out.svg") 12 12, zoom-out; }
.stage.is-dragging { cursor: grabbing; }

#globe { display: block; width: 100%; height: 100%; }

.points { position: absolute; inset: 0; pointer-events: none; }

.point {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}
.point::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--spot);
  box-shadow: 0 0 0 2px var(--field);
}
.point.is-current::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
}
.point-number {
  position: absolute;
  left: 18px;
  top: -6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--spot);
  /* a halo in the field colour lifts the number off the coastlines */
  text-shadow: 0 0 2px var(--field), 0 0 2px var(--field), 0 0 3px var(--field);
  pointer-events: none;
}
.point-label {
  position: absolute;
  left: 18px;
  top: 8px;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.2;
  padding: 1px 4px 2px;
  background: var(--veil);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
}
.point:hover .point-label, .point.is-hot .point-label, .point.is-current .point-label { opacity: 1; }

/* Type reversed out of the field. The title and the right-hand column share
   one grid, aligned on their first baselines, so the phrase about what
   geography is always sits on the title's line and the card hangs below it. */

.masthead {
  position: fixed;
  top: calc(var(--gutter) * 0.4);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(25rem, 30vw);
  column-gap: 2rem;
  align-items: first baseline;
  pointer-events: none;
}

.title {
  margin: 0 0 0 -0.05em;
  font-size: clamp(5rem, 13.2vw, 13.5rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--ink);
  pointer-events: none;
  white-space: nowrap;
}

.tools {
  position: fixed;
  top: var(--gutter);
  right: var(--gutter);
  z-index: 4;
  display: flex;
  gap: 1.2rem;
}
.tools button {
  border: 0;
  padding: 0.2rem 0;
  background: none;
  font-size: 0.95rem;
  cursor: pointer;
  text-underline-offset: 0.25em;
}
.tools button:hover, .tools button[aria-expanded="true"] { text-decoration: underline; }

/* The right-hand column: what geography is, and the caption of a chosen plate */

.side {
  /* --side-top is measured by main.js, so a long card stops short of the foot */
  max-height: calc(100vh - var(--side-top, 9rem) - var(--gutter) - 3.2rem);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.side > :not(.phrase) { pointer-events: auto; }

.phrase {
  position: relative;
  margin: 0 0 1.1rem;
  font-size: clamp(1.9rem, 3.3vw, 3.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  pointer-events: none;
  flex: none;
}
.phrase-line {
  display: block;
  opacity: 0;
  transition: opacity 2.2s ease;
}
/* the line on its way out lies over the one coming in, out of the flow, so
   the phrase's baseline (and its alignment with the title) is the new line's */
.phrase-line:not(.is-shown) { position: absolute; top: 0; left: 0; right: 0; }
.phrase-line.is-shown { opacity: 1; }
.phrase.is-quick .phrase-line { transition-duration: 0.5s; }

.caption, .about {
  position: relative;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--veil);
  border-top: 2px solid var(--ink);
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  outline: none;
}

.fig {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--spot);
}

.caption h2, .about h2 {
  margin: 0 4rem 0.3rem 0;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.makers { margin: 0; font-size: 0.98rem; line-height: 1.35; color: var(--ink-soft); }
.meta { margin: 0.1rem 0 0; font-size: 0.98rem; color: var(--ink-soft); }

.caption .text, .about p {
  margin: 0.8rem 0 0;
  font-size: 1rem;
  line-height: 1.48;
  max-width: 34em;
}
.about p:first-of-type { margin-top: 0.4rem; }
.about .credits { font-size: 0.85rem; color: var(--ink-soft); }

.places {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.85rem 0 0;
  padding: 0;
}
.places button {
  border: 1px solid var(--ink-faint);
  background: none;
  padding: 0.2rem 0.45rem 0.25rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.places button:hover { border-color: var(--ink); }
.place-letter { margin-right: 0.35em; font-weight: 700; color: var(--spot); }
.places button[aria-current="true"] .place-letter { color: var(--field); }
.places button[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--field); }

.caption .link {
  display: inline-block;
  margin-top: 0.95rem;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}
.caption .link:hover { text-decoration-color: var(--spot); }

.close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  border: 0;
  padding: 0.15rem 0;
  background: none;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.close:hover { color: var(--ink); }

/* The chosen project's image heads its card, mounted like a print: a white
   mat and a keyline, with the credit beneath */

.caption:has(.caption-image) { padding-top: 2.6rem; }
.caption:has(.caption-image) .close { top: 0.8rem; }
.caption-image { margin: 0 0 1.05rem; }
.caption-image .frame {
  display: inline-block;
  max-width: calc(100% - 10px);
  margin: 5px;
  padding: 6px;
  background: #fff;
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
}
.caption-image img {
  display: block;
  max-width: 100%;
  max-height: 30vh;
  width: auto;
  height: auto;
}
.caption-image figcaption {
  margin-top: 0.75rem;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

/* Where the cursor is, and what time it is at Greenwich */

.readout {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 3;
  margin: 0;
  text-align: right;
  font-size: 0.8rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  pointer-events: none;
}
.readout span { display: block; white-space: pre; }
.readout-coords.is-centre { color: var(--ink-soft); }
.readout-time { color: var(--ink-soft); }

/* Contents, set like the list of plates in the front of the book */

.contents {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 3;
  max-width: 21rem;
}
.contents-list { list-style: none; margin: 0; padding: 0; }
.contents-list button {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  align-items: baseline;
  width: 100%;
  border: 0;
  padding: 0.16rem 0;
  background: none;
  text-align: left;
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--ink-soft);
  cursor: pointer;
}
.contents-list .n { font-weight: 700; font-size: 0.8rem; color: var(--spot); }
.contents-list button:hover, .contents-list button[aria-current="true"] { color: var(--ink); }
.contents-list button[aria-current="true"] .t { text-decoration: underline; text-underline-offset: 0.22em; }

.noscript {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  margin: 0;
  font-size: 1.1rem;
}

/* Phones: title under the tools, the list as a strip, the caption above it */

@media (max-width: 720px) {
  .masthead { display: block; top: calc(var(--gutter) + 1.6rem); }
  .title { font-size: clamp(3.4rem, 19vw, 6rem); }
  .tools { gap: 1rem; }
  .tools button { font-size: 0.88rem; }

  .side {
    position: fixed;
    top: auto;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(env(safe-area-inset-bottom) + 3.6rem);
    width: auto;
    max-height: none;
  }
  .phrase { font-size: clamp(1.6rem, 7.4vw, 2.2rem); margin-bottom: 0.7rem; }
  .readout {
    right: auto;
    bottom: auto;
    left: var(--gutter);
    top: calc(var(--gutter) + 1.6rem + clamp(3.4rem, 19vw, 6rem) * 0.95);
    text-align: left;
    font-size: 0.72rem;
  }
  .caption, .about { max-height: 54vh; padding: 0.9rem 0.95rem 1rem; }
  .caption:has(.caption-image) { padding-top: 2.4rem; }
  .caption-image img { max-height: 22vh; }
  .caption h2, .about h2 { font-size: 1.25rem; }

  .contents {
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom) + 0.7rem);
    max-width: none;
    padding: 0 var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .contents-list { display: flex; gap: 1.1rem; }
  .contents-list li { flex: 0 0 auto; }
  .contents-list button { display: flex; gap: 0.35rem; white-space: nowrap; padding: 0.5rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .phrase-line, .phrase.is-quick .phrase-line { transition: none; }
  html, body { transition: none; }
}