/* Flyover owner's guide.

   Written for people who would rather not be reading a website: large calm
   type, one thing per step, a picture beside every step (under it on a
   phone), plain words. No boxes with coloured edges, no badges, no icons for
   decoration -- rules and space do the separating.

   Type: Atkinson Hyperlegible for reading (drawn by the Braille Institute
   for low vision), Source Serif 4 for headings and the step numbers. Both
   SIL OFL, served from /fonts -- the site's policy loads nothing from
   anywhere else. */

@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/source-serif-4-latin-700-normal.woff2") format("woff2"); }

:root {
  --paper: #fbf8f2;
  --paper-2: #f2ede2;
  --ink: #1c1d1a;
  --ink-2: #4d4f49;
  --rule: #e2dbcd;
  --accent: #0b6b4e;
  --accent-deep: #084e39;
  --read: 36rem;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.25rem/1.62 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (max-width: 640px) { body { font-size: 1.1875rem; } }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1rem; }
b, strong { font-weight: 700; }
.wrap { max-width: 70rem; margin: 0 auto; padding: 0 1.5rem; }
.read { max-width: var(--read); }
.soft { color: var(--ink-2); }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------ masthead */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1.25rem; padding-bottom: 1.25rem; }
.masthead img { width: 124px; }
.masthead span { color: var(--ink-2); font-size: 1.05rem; }

/* ------------------------------------------------------------ hero */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem;
  align-items: center; padding-top: 4rem; padding-bottom: 3.5rem; }
.hero h1 { font: 600 clamp(2.7rem, 1.9rem + 3.4vw, 4.4rem)/1.03 var(--serif); letter-spacing: -0.02em;
  margin: 0 0 1.4rem; }
.hero p { font-size: 1.4rem; line-height: 1.5; color: var(--ink-2); max-width: 30rem; margin: 0 0 2.2rem; }
.hero .device { width: min(100%, 470px); justify-self: center; }
.button { display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 1.2rem; line-height: 1; padding: 1.05rem 1.7rem; border-radius: 999px; }
.button:hover { background: var(--accent-deep); color: #fff; }
.device { filter: drop-shadow(0 20px 28px rgba(28, 29, 26, 0.22)) drop-shadow(0 3px 6px rgba(28, 29, 26, 0.12)); }
@media (max-width: 840px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.25rem; }
  .hero .device { width: min(84%, 380px); order: -1; }
}

/* ------------------------------------------------------------ contents */
.contents .wrap { padding-bottom: 4rem; }
.contents ol { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; border-top: 1px solid var(--rule); }
.contents li { border-bottom: 1px solid var(--rule); }
.contents a { display: flex; gap: 0.9rem; align-items: baseline; padding: 1.05rem 0; color: var(--ink);
  text-decoration: none; font-size: 1.2rem; }
.contents a span { font: 600 1.2rem/1 var(--serif); color: var(--accent); min-width: 1.3rem; }
.contents a:hover { color: var(--accent); }
@media (max-width: 840px) { .contents ol { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ parts */
.part { border-top: 1px solid var(--rule); }
.part > .wrap { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.part h2 { font: 600 clamp(2.1rem, 1.6rem + 2vw, 3rem)/1.08 var(--serif); letter-spacing: -0.015em;
  margin: 0 0 0.9rem; }
.part .lede { font-size: 1.4rem; line-height: 1.5; color: var(--ink-2); max-width: var(--read); margin: 0 0 3rem; }
.part h3 { font: 600 1.6rem/1.2 var(--serif); margin: 2.75rem 0 0.6rem; }
.part h3:first-child { margin-top: 0; }
.kicker { font: 600 1.05rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1rem; }

/* ------------------------------------------------------------ what you need */
.needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 0 0 1rem;
  padding: 0; list-style: none; max-width: 56rem; }
.needs li { border-top: 2px solid var(--ink); padding-top: 1rem; }
.needs b { display: block; font-size: 1.25rem; margin-bottom: 0.25rem; }
.needs span { color: var(--ink-2); }
@media (max-width: 840px) { .needs { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ------------------------------------------------------------ steps */
.steps { list-style: none; margin: 3.5rem 0 0; padding: 0; }
.step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: center;
  padding: 3.5rem 0; border-top: 1px solid var(--rule); }
.step .n { display: block; font: 600 5rem/0.9 var(--serif); color: var(--accent); margin: 0 0 1rem; }
.step h3 { font-size: 2rem; margin: 0 0 0.8rem; }
.step figure { margin: 0; justify-self: center; width: 100%; display: grid; justify-items: center; }
.step .device { width: min(100%, 390px); }
.step .phone { width: min(100%, 290px); }
.step .aside { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); color: var(--ink-2); }
.step .aside b { color: var(--ink); }
@media (max-width: 840px) {
  .step { grid-template-columns: 1fr; gap: 2rem; padding: 2.75rem 0; }
  .step .n { font-size: 4rem; }
}

/* ------------------------------------------------------------ the finder */
.finder { background: var(--paper-2); border-radius: 22px; padding: 2.25rem; margin-top: 1rem; }
.finder h3 { margin-top: 0; }
.finder .controls { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.25rem 0 1rem; }
.finder input { flex: 1 1 16rem; min-width: 0; font: inherit; font-size: 1.15rem; padding: 0.85rem 1rem;
  border: 1.5px solid #cfc6b4; border-radius: 12px; background: #fff; color: var(--ink); }
.finder input:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.finder .button { border: 0; cursor: pointer; font-family: inherit; }
.finder .button.quiet { background: #fff; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.finder .button:disabled { opacity: 0.6; cursor: default; }
#map { height: 360px; border-radius: 14px; overflow: hidden; margin: 0.5rem 0; }
.pin-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); }
.coords { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 0.5rem; }
.coord { background: #fff; border-radius: 14px; padding: 1rem 1.1rem; display: flex; align-items: center; gap: 1rem; }
.coord .cell { flex: 1; min-width: 0; }
.coord .lbl { display: block; font-size: 1rem; color: var(--ink-2); }
.coord .val { display: block; font: 700 1.6rem/1.2 var(--sans); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; }
.copy { font: 700 1rem/1 var(--sans); padding: 0.7rem 1rem; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; cursor: pointer; }
@media (max-width: 640px) { .coords { grid-template-columns: 1fr; } .finder { padding: 1.5rem 1.1rem; } }

/* ------------------------------------------------------------ figure + text */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.split.middle { align-items: center; }
.split.titled { margin-top: 2.75rem; }
.split.titled h3 { margin-top: 0; }
.split .device { width: min(100%, 460px); justify-self: center; }
@media (max-width: 840px) { .split { grid-template-columns: 1fr; gap: 2.25rem; } .split .device { width: min(92%, 400px); } }
figure { margin: 0; }
figcaption { color: var(--ink-2); font-size: 1.02rem; text-align: center; margin-top: 1rem; }

/* the numbered key under "Reading the radar" */
.key { list-style: none; margin: 0; padding: 0; }
.key li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1.1rem; padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule); }
.key li:first-child { padding-top: 0.2rem; }
.key .dot { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; border: 2px solid #0a1410;
  color: #0b4b37; font: 700 1.2rem/1 var(--sans); display: grid; place-items: center; }
.key b { display: block; font-size: 1.25rem; margin-bottom: 0.15rem; }

/* two device pictures side by side */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; margin: 0 0 1rem; }
.pair .device { width: min(100%, 380px); margin: 0 auto; }
@media (max-width: 640px) { .pair { grid-template-columns: 1fr; } .pair .device { width: min(90%, 360px); } }

/* three device pictures in order: an update from start to finish */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem; margin: 0 0 2.5rem; }
.trio .device { display: block; width: 100%; max-width: 340px; margin: 0 auto; }
.trio figcaption { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline;
  text-align: left; color: var(--ink); font-size: 1.12rem; margin-top: 1.4rem; }
.trio figcaption .n { font: 600 2.1rem/1 var(--serif); color: var(--accent); }
@media (max-width: 640px) { .trio { grid-template-columns: 1fr; gap: 3rem; } .trio .device { width: min(88%, 340px); } }

/* the settings pages */
.pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; margin: 0; }
.pages div { border-top: 1px solid var(--rule); padding: 1.4rem 0 1.2rem; }
.pages dt { font: 600 1.45rem/1.2 var(--serif); margin: 0 0 0.4rem; }
.pages dd { margin: 0; }
@media (max-width: 840px) { .pages { grid-template-columns: 1fr; } }

/* map styles */
.styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; margin: 2rem 0 0; }
.styles figure .device { width: 100%; }
.styles figcaption { text-align: left; font-size: 1.05rem; color: var(--ink); }
.styles figcaption span { display: block; color: var(--ink-2); }
@media (max-width: 840px) { .styles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the tracker bubble sits on paper, not in a device */
.bubble { width: min(100%, 520px); margin: 0 auto;
  filter: drop-shadow(0 14px 22px rgba(28, 29, 26, 0.2)); }

/* questions and answers */
.qa { max-width: 44rem; }
.qa h3 { font-size: 1.45rem; margin: 2.4rem 0 0.5rem; }
.qa h3:first-of-type { margin-top: 0; }
table.messages { border-collapse: collapse; width: 100%; margin: 1rem 0 0; font-size: 1.1rem; }
.messages th, .messages td { text-align: left; vertical-align: top; padding: 0.8rem 1rem 0.8rem 0;
  border-bottom: 1px solid var(--rule); }
.messages th { font-weight: 700; }
.messages td:first-child { white-space: nowrap; font-weight: 700; }
@media (max-width: 640px) { .messages td:first-child { white-space: normal; } }

/* ------------------------------------------------------------ footer */
footer { border-top: 1px solid var(--rule); }
footer .wrap { padding-top: 2.5rem; padding-bottom: 4rem; color: var(--ink-2); font-size: 1.05rem; }
footer p:last-child { margin: 0; }