@font-face {
  font-family: "Danny";
  src: url("/fonts/Danny-Regular-web.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --ink: #111;
  --paper: #f6f4ef;
  --shell: #23262b;
  --shell-2: #2c3038;
  --rule: #3a3f47;
  --muted: #9aa1ab;

  /* One rail width shared by the topic pages and the topic view, because
     build.py sizes the subtopic labels against it ahead of time and the
     overlay animates a label into a slot it has to be able to predict. */
  /* The two flanking columns are the same width on purpose: the writing sits
     in the middle of the page, under the middle of the title, and it only
     does that if what is either side of it balances. */
  --rail: 300px;
  --aside: 300px;
  --sheet: 46rem;
  --wide: 86rem;

  --physics: #bbc9ff;
  --chemistry: #ffdbb7;
  --organic-chemistry: #ff8d78;
  --biochemistry: #ffce23;
  --biology: #b3feac;
  --psychology: #d9b4ff;
  --sociology: #a97fd6;
  --cars: #ffffff;
}

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

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--shell);
  color: #e9ecf1;
  font: 16px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* One line of poster text, positioned on its own baseline.
   ---------------------------------------------------------------------------
   Shared, not map-only: the map draws its labels with this, and so do the
   subtopic rails on every topic and subtopic page. It lived in map.css until
   those pages were built, which left every rail label in the fallback
   sans-serif and stacked on one line -- correct on the map, broken the moment
   you refreshed a topic page and got the real one.

   Leading can change from line to line inside a single Photoshop text layer,
   so line-height is set per line to that line's largest font size, putting the
   baseline exactly 0.8em below the top -- the ascent the webfont is
   normalised to.

   pointer-events: none is load-bearing. These spans are absolutely positioned
   and their line boxes carry the font's full ascent and descent, so at the
   poster title's 350pt they hang far below the ink -- and an absolutely
   positioned child still hit-tests outside its parent's bounds. Without this
   the title reached down over the CARS labels and answered their clicks. The
   anchor itself, sized to the ink, is what should be clickable. */
.mline {
  position: absolute;
  white-space: pre;
  font-family: Danny, ui-sans-serif, sans-serif;
  font-weight: 400;
  pointer-events: none;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .7rem 1rem;
  background: #fff;
  color: #000;
  border-radius: 0 0 .4rem 0;
}
.skip:focus { left: 0; }

/* The list of every section, always in the document. With no chrome over the
   map, this is the only route to all 34 sections that does not depend on
   hovering, so it carries keyboard and screen-reader navigation on its own --
   clipped on wide screens, visible below the map on narrow ones. */
.section-list {
  padding: 2.5rem 1.25rem 4rem;
  border-top: 1px solid var(--rule);
  background: var(--shell-2);
}
.section-list h2 { margin: 0 0 1.5rem; font-size: 1.15rem; }
.section-list h3 {
  margin: 0 0 .5rem;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-list section { margin-bottom: 1.6rem; }
.section-list ul { margin: 0; padding: 0; list-style: none; }
.section-list li { margin: .15rem 0; }
.section-list a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.section-list a:hover { border-bottom-color: currentColor; }

@media (min-width: 1024px) {
  .section-list {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}