@font-face {
  font-family: "DINish";
  src: url("/fonts/dinish-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DINish";
  src: url("/fonts/dinish-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Stand-in while the font loads: a local grotesque scaled to the width of DINish, so the sentence breaks at the same word and nothing moves when the real font arrives. */
@font-face {
  font-family: "DINish fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
  size-adjust: 93%;
}

:root {
  --paper: #f2f2ee;
  --ink: #000;
  --contour: #9c6b3f;
  --route: #1a3fcf;
  --edge: clamp(1.25rem, 4.2vw, 3.5rem);
  color-scheme: light;
}

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

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "DINish", "DINish fallback", sans-serif;
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The sheet is the whole screen. It clips the map, which is larger than any screen. */
.sheet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--edge);
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
}

.wordmark {
  margin: 0;
  font-size: inherit;
  line-height: 0;
}

.wordmark-art {
  display: block;
  height: clamp(1rem, 0.78rem + 0.62vw, 1.4rem);
  width: auto;
}

/* The sentence breaks after "forces": the measure is wider than its second line and narrower than its first line plus one more word, so every browser breaks it at the same place. */
.mission {
  margin: 0;
  max-width: 9.6em;
  font-weight: 500;
  font-size: clamp(1.5rem, min(9.6vw, 6.3vh), 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* The last word and the point the route leaves from stay on one line. */
.last {
  white-space: nowrap;
}

.origin {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
}

address {
  margin-top: clamp(2rem, 5.5vh, 4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 2rem;
  font-style: normal;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--route);
  transition: color 120ms ease-out;
}

a:hover {
  color: var(--route);
}

a:focus-visible {
  outline: 2px solid var(--route);
  outline-offset: 0.3em;
  border-radius: 1px;
}

::selection {
  background: var(--route);
  color: var(--paper);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The map is drawn around the first point of its route, and that point is pinned to the full stop of the sentence. One drawing unit is --u: it grows with the sentence, stops growing when the screen is too short for the route, and keeps a minimum share of the screen height, which holds the top of the sheet above the screen. A landscape screen has room beside the sentence and gets the wide drawing, any other the tall one. The sentence is sized against the screen in both cases so that the route always clears the type. */
.map {
  position: absolute;
  left: calc(0.3em + var(--left) * var(--u));
  top: calc(-0.07em + var(--top) * var(--u));
  z-index: -1;
  width: calc(var(--width) * var(--u));
  height: calc(var(--height) * var(--u));
  pointer-events: none;
}

.map-wide {
  --u: max(min(0.0104em, 0.0992vh), 0.08vh);
  display: none;
}

.map-tall {
  --u: max(min(0.0111em, 0.0484vh), 0.044vh);
}

/* Sheet sizes in drawing units, written by tools/map.py. */
/* map:start */
.map-wide {
  --left: -640;
  --top: -1180;
  --width: 2650;
  --height: 1370;
}

.map-tall {
  --left: -1340;
  --top: -2060;
  --width: 2030;
  --height: 2080;
}
/* map:end */

.map-contour,
.map-index,
.map-route {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-contour {
  stroke: var(--contour);
  stroke-opacity: 0.36;
  stroke-width: 1.15;
}

.map-index {
  stroke: var(--contour);
  stroke-opacity: 0.54;
  stroke-width: 1.9;
}

.map-route {
  stroke: var(--route);
  stroke-width: 3.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: advance 2.6s cubic-bezier(0.62, 0.04, 0.3, 1) 0.3s forwards;
}

.map-head {
  fill: var(--route);
  opacity: 0;
  animation: arrive 0.3s ease-out 2.62s forwards;
}

/* The tall drawing is shown smaller, so its lines are drawn heavier to land at the same weight on screen. */
.map-tall .map-contour {
  stroke-width: 1.9;
}

.map-tall .map-index {
  stroke-width: 3.1;
}

.map-tall .map-route {
  stroke-width: 5.6;
}

@media (min-aspect-ratio: 5/4) {
  .mission {
    font-size: min(6.2vw, max(5.25rem, 4.4vw), 11vh);
  }

  .map-wide {
    display: block;
  }

  .map-tall {
    display: none;
  }
}

/* The one movement on the page: the route is drawn once, then the arrowhead lands. */
@keyframes advance {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes arrive {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-route,
  .map-head {
    animation: none;
  }

  .map-route {
    stroke-dashoffset: 0;
  }

  .map-head {
    opacity: 1;
  }

  a {
    transition: none;
  }
}

@media print {
  .map-route,
  .map-head {
    animation: none;
  }

  .map-route {
    stroke-dashoffset: 0;
  }

  .map-head {
    opacity: 1;
  }
}