/* Fly My Route: the app's own palette (ios/App/FlyMyRoute/Design/Theme.swift) and nothing else.
   Navy is the film's studio, volt the one accent; cyan, orange and purple are the film's time, pace and climb.
   System fonts only: the site loads nothing from anywhere else. */

:root {
  color-scheme: dark;
  --stage-top: #0A0F1F;
  --stage-bottom: #1A2138;
  --card: #151B30;
  --edge: rgba(255, 255, 255, 0.10);
  --ink: #F5F5FA;
  --ink-body: rgba(235, 235, 245, 0.76);
  --ink2: rgba(235, 235, 245, 0.64);
  --ink3: rgba(235, 235, 245, 0.40);
  --ink-fine: rgba(235, 235, 245, 0.56);
  --volt: #D6FF3D;
  --on-volt: #0A0F00;
  --time: #59C7FA;
  --pace: #FF9E0A;
  --climb: #BF59F2;
  --glow: rgba(70, 110, 255, 0.20);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gutter: max(20px, env(safe-area-inset-left));  /* the text pages; the home page sets its own */
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-body);
  background:
    radial-gradient(90% 520px at 50% -140px, var(--glow), transparent 70%),
    linear-gradient(180deg, var(--stage-top) 0%, var(--stage-bottom) 100%);
  background-color: var(--stage-top);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1; width: 100%; }

a { color: var(--volt); text-decoration: underline; text-decoration-color: rgba(214, 255, 61, 0.35);
    text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--volt); }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------------ the logo */

/* The app's own lockup (design/logo/logo-on-dark.svg), shown as it is: its two lines are its character, so it is
   never set on one line. */
.top {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) var(--gutter) 18px;
}
.logo { display: inline-block; line-height: 0; }
.logo img { display: block; width: 128px; height: auto; }

/* ------------------------------------------------------------------ the home page: one screen */

/* Logo, app icon, the App Store slot, one sentence, social links and the foot: one column, centred, from a phone to a
   desktop. The sizes follow the screen's height (svh), so it stays on one screen; a screen too short for it scrolls. */
.home {
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --gap: 18px;
  --icon: 156px;
  --logo: 190px;
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: max(12px, env(safe-area-inset-top)) var(--gutter) max(12px, env(safe-area-inset-bottom));
  text-align: center;
}
@supports (height: 1svh) {
  .home {
    --gap: clamp(10px, 2.5svh, 28px);
    --icon: clamp(104px, calc(29svh - 41px), 240px);
    --logo: clamp(168px, min(46vw, 31svh), 272px);
  }
}

.home .top { width: auto; margin: 0; padding: 0; }
.home .logo img { width: var(--logo); }
.home main { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--gap); }

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

/* Faint route lines behind the page (/routes: one of 256 SVGs drawn by scripts/routes.py, a different one for each visit,
   handed out by nginx): a backdrop that is never in the way.
   The stage's own background is painted first (isolation), the lines over it, the page over the lines, and the lines
   fade towards the middle, where the words are. */
.home { isolation: isolate; }
.routes {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  height: 100lvh;
  object-fit: cover;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 300px 600px at 50% 50%, rgba(0, 0, 0, 0.5) 50%, #000);
  mask-image: radial-gradient(ellipse 300px 600px at 50% 50%, rgba(0, 0, 0, 0.5) 50%, #000);
}
@media (min-width: 900px) { .routes { opacity: 0.75; } }

/* The icon as the app has it, with iOS's rounded corner; the glow is the stage's own. */
.app-icon {
  display: block;
  width: var(--icon);
  height: var(--icon);
  border-radius: 22.37%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 22px 56px rgba(0, 0, 0, 0.50), 0 0 90px var(--glow);
}

/* The App Store slot (content/store.html): text, not a link, until the app is live. */
.store { display: flex; justify-content: center; }
.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}
.soon::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 10px var(--volt);
}

.pitch {
  max-width: 44ch;
  margin: 0;
  color: var(--ink2);
  font-size: clamp(16px, 0.9vw + 12px, 19px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.social { display: flex; justify-content: center; gap: 6px; margin: -4px 0; }
.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink2);
  transition: color 0.2s;
}
.social a:hover { color: var(--ink); }
.social svg { width: 22px; height: 22px; fill: currentColor; }

.home .draft { max-width: 520px; margin: 0; text-align: left; }

/* A light entrance, in turn from the top; with reduced motion the page simply stands there. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  .home .top, .home .app-icon, .home .store, .home .pitch, .home .social, .home .foot {
    animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .home .app-icon { animation-delay: 0.08s; }
  .home .store { animation-delay: 0.16s; }
  .home .pitch { animation-delay: 0.24s; }
  .home .social { animation-delay: 0.32s; }
  .home .foot { animation-delay: 0.40s; }
}

/* ------------------------------------------------------------------ the text pages */

.doc main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px var(--gutter) 80px;
}

.doc h1 {
  margin: 24px 0 10px;
  color: var(--ink);
  font-size: clamp(36px, 6vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.doc h2 {
  margin: 56px 0 14px;
  padding-top: 28px;
  border-top: 1px solid var(--edge);
  color: var(--ink);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  scroll-margin-top: 20px;
}

.doc h3 {
  margin: 36px 0 10px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  scroll-margin-top: 20px;
}

.doc p { margin: 0 0 16px; }
.doc h3.q { margin: 30px 0 6px; font-size: 18px; }
.doc h2 + h3.q { margin-top: 18px; }
.doc strong { color: var(--ink); font-weight: 600; }

.doc .meta { color: var(--ink2); font-size: 15px; }
.doc .lede { color: var(--ink2); font-size: 19px; line-height: 1.55; }

.doc ul, .doc ol { margin: 0 0 18px; padding-left: 1.3em; }
.doc li { margin: 0 0 8px; padding-left: 0.2em; }
.doc li > ul, .doc li > ol { margin: 8px 0 0; }
.doc ul > li::marker { color: var(--volt); }
.doc ol > li::marker { color: var(--volt); font-family: var(--rounded); font-weight: 700; }

.toc {
  margin: 28px 0 8px;
  padding: 18px 22px 12px;
  border: 1px solid var(--edge);
  border-radius: 18px;
  background: rgba(21, 27, 48, 0.7);
}
.toc p {
  margin: 0 0 8px;
  color: var(--ink3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.toc ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 32px; }
.toc li { margin: 0 0 6px; break-inside: avoid; font-size: 15px; }
.toc a { color: var(--ink2); text-decoration: none; }
.toc a:hover { color: var(--volt); }

.table {
  margin: 0 0 20px;
  overflow-x: auto;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--card);
}
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.doc th, .doc td { padding: 12px 16px; text-align: left; vertical-align: top; }
.doc th { color: var(--ink); font-weight: 600; background: rgba(255, 255, 255, 0.03); }
.doc tbody tr + tr td, .doc tbody tr:first-child td { border-top: 1px solid var(--edge); }
.doc td:first-child { color: var(--ink); width: 42%; }

/* A blank still to fill: never published (build.py --strict refuses). */
mark.blank {
  padding: 1px 7px;
  border: 1px dashed var(--pace);
  border-radius: 6px;
  background: rgba(255, 158, 10, 0.14);
  color: #FFB84D;
  font-size: 0.86em;
  font-weight: 700;
  letter-spacing: 0.02em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
mark.blank .hint { font-weight: 500; letter-spacing: 0; opacity: 0.85; }

.draft {
  margin: 8px 0 0;
  padding: 12px 16px;
  border: 1px solid rgba(255, 158, 10, 0.5);
  border-radius: 12px;
  background: rgba(255, 158, 10, 0.10);
  color: #FFD08A;
  font-size: 15px;
}
.home .draft { max-width: 1120px; margin: 8px auto 0; }
.draft strong { color: #FFB84D; }

.missing main { padding-top: 12vh; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .toc ol { columns: 1; }
  .doc h2 { margin-top: 44px; padding-top: 22px; font-size: 23px; }
  .doc td:first-child { width: auto; }
  .doc th, .doc td { padding: 10px 12px; }
}

/* ------------------------------------------------------------------ the foot */

.foot {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px var(--gutter) max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--edge);
  color: var(--ink-fine);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; margin-bottom: 10px; font-size: 15px; }
.foot nav a { padding: 4px 0; color: var(--ink2); text-decoration: none; }
.foot nav a:hover { color: var(--ink); }
.foot p { max-width: 62ch; margin: 0 auto; text-wrap: balance; }
.foot p + p { margin-top: 2px; }

/* On the home page the foot is the last of the column, not a band across the page. */
.home .foot { width: auto; max-width: 560px; margin-top: calc(var(--gap) * 0.4); padding: 0; border-top: 0; }