/* Foundation shared by every page.
 *
 * Taken from the Terra Incognita page, which is the site's reference layout:
 * a 1000px measure in a 32px gutter, 28px headings at 1.25, body text at 1.7,
 * and dashed underlines in --link. Page stylesheets load after this one and add
 * only what is particular to them.
 *
 * Change a value here and it changes on all thirteen pages. */

:root {
  /* The reading measure, and the site's single content edge. Headings, figures,
   * captions and body text all align to it. Widen it and the whole page widens.
   *
   * Must be a root-relative unit. `ch` and `em` would be resolved against the font
   * size of whichever element consumed the variable, so the nav bar — which sets
   * font-size: 0.84rem — would come out narrower than the column and the footer.
   * 58.5rem is 936px: the content width of the original 1000px column, once its
   * 32px gutters are taken off. */
  --measure: 58.5rem;
  /* The wider column, kept for chrome that deliberately frames the content: the
   * nav bar, the footer, and the standalone calendar and booking pages. */
  --max: 1000px;
  --pad: 32px;
  --text: #17212a;
  --muted: #62696d;
  --link: #496575;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.7;
}

/* box-sizing is border-box, so the padding is added back to keep the content box
 * exactly one measure wide. */
main {
  max-width: calc(var(--measure) + (2 * var(--pad)));
  margin: 0 auto;
  padding: 44px var(--pad) 72px;
}

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}

/* Nothing visual escapes the text column. Wide content — the research map, the
 * research table — sits in a container with overflow-x: auto and scrolls inside the
 * column instead of bleeding past it. An explicit min-width still wins over this,
 * which is what keeps those two scrollable. */
figure {
  max-width: 100%;
  margin-inline: 0;
}

img,
svg,
table {
  max-width: 100%;
}

h1,
h2 {
  font-size: 28px;
  line-height: 1.25;
}

figcaption {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

/* Inline reference markers, used on the home, research and Terra Incognita pages. */
.citation {
  color: #4a6574;
  font-size: 0.9em;
  white-space: nowrap;
}

.citation a {
  color: inherit;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The footer's panel and both of its rules are footer.css defaults, left alone here —
 * the rules share --footer-line, so they stay the same shade as each other. The only
 * override is the ink and link colour, so footer text matches body text. */
body .site-footer {
  --footer-ink: #17212a;
  --footer-muted: #62696d;
  --footer-link: #17212a;
  --footer-link-hover: #000000;
}

body .site-footer a {
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}

@media (max-width: 700px) {
  :root { --pad: 18px; }

  main { padding-top: 32px; }

  h1,
  h2 { font-size: 25px; }
}