/* Smarter Runner plan page. Colours and fonts come from the video kit (explainers/kit/src/kit/theme.ts)
   and from the rendered pictures, so the page looks like the video the visitor has just watched. */

@font-face {
  font-family: "InterKit";
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BarlowKit";
  src: url("fonts/barlow-condensed-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --sky: #000723;        /* top edge of the staircase pictures */
  --floor: #222e62;      /* bottom edge of the staircase pictures */
  --deep: #0b1030;
  --gold: #f2b544;       /* running, and everything you can press */
  --gold-hot: #ffc457;
  --ink: #1a1200;        /* text on gold */
  --walk: #6fb0ff;       /* walking, as in the video */
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.76);
  --line: rgba(255, 255, 255, 0.16);
  --wrap: 40rem;
  --pad: 1.25rem;
  --text-font: "InterKit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --number-font: "BarlowKit", "Arial Narrow", "Roboto Condensed", var(--text-font);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
  background: var(--sky);
}

body {
  margin: 0;
  background: var(--sky);
  color: var(--text);
  font: 500 1.0625rem/1.55 var(--text-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
h1, h2, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right));
}

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

:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
  border-radius: 0.35rem;
}

/* ---------- top bar ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: calc(var(--wrap) + 2 * var(--pad));
  margin-inline: auto;
  padding: 0.9rem var(--pad) 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  text-decoration: none;
}
.brand img { border-radius: 50%; }
.toplink {
  padding: 0.5rem 0.95rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
.toplink:hover { border-color: var(--gold); }

/* ---------- the question ---------- */

.intro { padding-top: 2.25rem; padding-bottom: 0.5rem; }
h1 {
  font-size: clamp(2.3rem, 10.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.rule {
  width: 4.75rem;
  height: 0.3rem;
  margin: 1.1rem 0 1.15rem;
  border-radius: 999px;
  background: var(--gold);
}
.lead {
  max-width: 34rem;
  font-size: 1.125rem;
  color: var(--muted);
}

/* ---------- the staircase ---------- */

.chooser { position: relative; }

/* The eight choices are real radio buttons, so the keyboard and screen readers get them for free.
   They are drawn by the pictures and the columns laid over them. */
.pick {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.stairs {
  position: relative;
  width: min(100%, 47.5rem);
  margin-inline: auto;
  aspect-ratio: 1280 / 1160;
  overflow: hidden;
}
.stairs img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.26s ease;
}
.stairs.instant img { transition: none; }
/* The first picture always sits underneath, so a picture that is still loading never leaves a hole. */
.stairs .i1 { opacity: 1; }
#s2:checked ~ .stairs .i2,
#s3:checked ~ .stairs .i3,
#s4:checked ~ .stairs .i4,
#s5:checked ~ .stairs .i5,
#s6:checked ~ .stairs .i6,
#s7:checked ~ .stairs .i7,
#s8:checked ~ .stairs .i8 { opacity: 1; }

/* The glow round the runner tints the top edge of some pictures by a shade. This lays the page's own sky over
   the first few percent, above the runner's head, so the picture never shows where it begins. */
.stairs::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 4.5%;
  background: linear-gradient(180deg, var(--sky), rgba(0, 7, 35, 0));
  pointer-events: none;
}
/* The floor of the picture runs into the section below it. */
.stairs::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 9%;
  background: linear-gradient(180deg, rgba(34, 46, 98, 0), var(--floor));
  pointer-events: none;
}

.prompt {
  position: absolute;
  top: 5%;
  left: max(var(--pad), 5.5%);
  width: 41%;
  max-width: 15rem;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--muted);
  pointer-events: none;
}
.prompt strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}

/* One column per step, placed from the camera's own geometry (see tools/build.py). */
.col {
  position: absolute;
  top: 0;
  bottom: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.col::after {
  content: "";
  position: absolute;
  /* the outline of this step in the picture: used for the hover tint and the keyboard focus ring */
  inset: var(--top) 2% var(--bottom) 2%;
  border-radius: 0.5rem;
}
@media (hover: hover) {
  .col:hover::after { background: rgba(255, 255, 255, 0.09); }
}
#s1:focus-visible ~ .stairs .c1::after,
#s2:focus-visible ~ .stairs .c2::after,
#s3:focus-visible ~ .stairs .c3::after,
#s4:focus-visible ~ .stairs .c4::after,
#s5:focus-visible ~ .stairs .c5::after,
#s6:focus-visible ~ .stairs .c6::after,
#s7:focus-visible ~ .stairs .c7::after,
#s8:focus-visible ~ .stairs .c8::after {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

/* ---------- the week for the chosen step ---------- */

.week {
  padding: 1.5rem 0 3.25rem;
  background: linear-gradient(180deg, var(--floor) 0, var(--deep) 15rem);
}
.panel { display: none; }
#s1:checked ~ .week .p1,
#s2:checked ~ .week .p2,
#s3:checked ~ .week .p3,
#s4:checked ~ .week .p4,
#s5:checked ~ .week .p5,
#s6:checked ~ .week .p6,
#s7:checked ~ .week .p7,
#s8:checked ~ .week .p8 { display: block; }

.stepno {
  font-weight: 700;
  color: var(--gold);
}
.recipe {
  margin: 0.2rem 0 1.15rem;
  font-size: clamp(1.55rem, 6.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* The session drawn to scale: every block is as wide as its minutes. */
.strip {
  display: flex;
  gap: 2px;
  height: 3rem;
}
.strip i {
  flex: var(--m) 1 0;
  min-width: 2px;
  display: grid;
  place-items: center;
  border-radius: 0.3rem;
  font: 800 1.35rem/1 var(--number-font);
  font-style: normal;
}
.strip .run { background: var(--gold); color: var(--ink); }
.strip .walk { background: var(--walk); color: #06143a; }
.strip .ease { background: rgba(111, 176, 255, 0.34); color: var(--text); }

.key {
  display: flex;
  gap: 1.1rem;
  margin-top: 0.7rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.key span { display: inline-flex; align-items: center; gap: 0.4rem; }
.key span::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  background: var(--gold);
}
.key .w::before { background: var(--walk); }

.sum { margin-top: 0.9rem; }
.days { margin-top: 0.35rem; color: var(--muted); }

.feel {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.ask { font-weight: 700; }
.answers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.8rem;
}
.btn {
  min-height: 3.1rem;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn.fine, .btn.send { background: var(--gold); color: var(--ink); }
.btn.fine:hover, .btn.send:hover { background: var(--gold-hot); }
.btn.hard {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
}
.btn.hard:hover { box-shadow: inset 0 0 0 1.5px var(--text); }
.verdict { margin-top: 1rem; font-weight: 600; }
.verdict:empty { display: none; }
.verdict a { color: var(--gold); }

/* ---------- rules and the whole list ---------- */

h2 {
  font-size: clamp(1.55rem, 6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.rules, .all { background: var(--deep); }
.rules { padding: 0.5rem 0 2.75rem; }
.all { padding: 0 0 3.5rem; }

.dots { margin-top: 1.1rem; }
.dots li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.dots li + li { margin-top: 0.9rem; }
.dots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--gold);
}

.steps {
  display: grid;
  gap: 0.7rem 2rem;
  margin: 1.2rem 0 1.4rem;
}
.steps li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-weight: 600;
}
.steps b {
  flex: 0 0 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font: 800 1.5rem/1 var(--number-font);
}
.small { font-size: 0.95rem; color: var(--muted); }
.small + .small { margin-top: 0.6rem; }

/* ---------- the PDF by email: the dusk sky from the video's cover ---------- */

.signup {
  padding: 3.25rem 0 9rem;
  background: linear-gradient(180deg, #0e0c22 0, #21152a 26%, #412336 calc(100% - 9.5rem), #7f4337 calc(100% - 5rem), #bf642a calc(100% - 2rem), #dd7e2e 100%);
}
.pitch { margin-top: 0.7rem; font-size: 1.125rem; color: var(--muted); }
#signup { margin-top: 1.5rem; }
#signup label { display: block; margin-bottom: 0.45rem; font-size: 0.95rem; font-weight: 700; }
.row { display: grid; gap: 0.7rem; }
#email {
  width: 100%;
  min-height: 3.3rem;
  padding: 0 1rem;
  border: 2px solid transparent;
  border-radius: 0.9rem;
  background: #ffffff;
  color: #14102a;
  font-weight: 500;
}
#email::placeholder { color: #7b7690; }
#email:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 0.9rem;
}
.btn.send { min-height: 3.3rem; }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn.get { width: 100%; margin-top: 1.5rem; }
.btn.send[disabled] { opacity: 0.7; cursor: default; }
.formnote {
  margin-top: 0.8rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.35);
  font-weight: 600;
}
.fine-print { margin-top: 1.1rem; font-size: 0.9rem; color: var(--muted); }

/* ---------- the ground under the sky ---------- */

.more {
  padding: 3rem 0 2.5rem;
  background: linear-gradient(180deg, #211a2c 0, #131122 16rem);
}
.more h2 + p { margin-top: 0.7rem; }
.more p { color: var(--muted); }
.more p + p { margin-top: 0.7rem; }
.more p + h2 { margin-top: 2.25rem; }

.foot {
  padding: 2.25rem 0 3rem;
  background: #131122;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--muted);
}
.foot img { margin-bottom: 0.9rem; border-radius: 50%; }
.foot p + p { margin-top: 0.5rem; }
.foot a { margin-right: 1.25rem; font-weight: 600; color: var(--text); }

/* ---------- the short pages (thank you, privacy) ---------- */

.page { min-height: 100vh; min-height: 100svh; background: linear-gradient(180deg, var(--sky) 0, var(--deep) 100%); }
.page main { padding: 2.5rem 0 4rem; }
.page h1 { font-size: clamp(2rem, 8.5vw, 3rem); }
.page h2 { margin-top: 2rem; font-size: 1.3rem; }
.page p { margin-top: 0.85rem; color: var(--muted); max-width: 34rem; }
.page .back { display: inline-block; margin-top: 1.75rem; font-weight: 700; color: var(--gold); }

/* ---------- wider screens ---------- */

@media (min-width: 34rem) {
  .steps { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; }
  .row { grid-template-columns: 1fr auto; }
  .btn.send { padding-inline: 1.75rem; }
  .btn.get { width: auto; padding-inline: 2.4rem; }
}

@media (min-width: 47.5rem) {
  .intro { padding-top: 3.5rem; }
  /* The picture is narrower than the window here, so its sides fade out. */
  .stairs {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  /* Beside the picture the sky darkens into the next section, and the floor carries on below the picture
     with the same soft sides, so there is no edge where the picture stops. 43rem is the picture's height. */
  .chooser { background: linear-gradient(180deg, var(--sky) 0, var(--deep) 43rem); }
  .week { position: relative; background: none; }
  .week::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 47.5rem;
    height: 15rem;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--floor), rgba(34, 46, 98, 0));
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    pointer-events: none;
  }
  .week > .wrap { position: relative; }
  /* Line the question up with the text column, which starts 3.75rem inside the wider picture. */
  .prompt { left: 3.75rem; }
  .strip { height: 3.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stairs img, .btn { transition: none; }
}

@media print {
  .top, .stairs, .feel, .signup, .foot { display: none; }
  body, .week, .rules, .all, .more { background: #fff; color: #000; }
  .panel { display: none !important; }
  .lead, .small, .more p, .days { color: #000; }
}

/* ---------- the short page (November 13): a title, one line, a button that asks for the email ---------- */

.landing .intro { padding-bottom: 0; }
.get { padding-top: 1.6rem; padding-bottom: 1.9rem; }
.btn.big { width: 100%; min-height: 3.6rem; font-size: 1.15rem; }
/* Without the script the form is shown straight away; with it, the button comes first and opens the form. */
.open { display: none; }
.js .open { display: inline-flex; }
.js .open[hidden] { display: none; }
.js #signup { display: none; }
.js #signup.shown { display: block; }
#signup label { display: block; margin-bottom: 0.45rem; font-size: 0.95rem; font-weight: 700; }
.error {
  margin-bottom: 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: rgba(255, 120, 90, 0.18);
  font-weight: 600;
}
.error[hidden] { display: none; }
/* The field only bots fill in. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.done h2 { font-size: 1.5rem; }
.done p { margin-top: 0.5rem; color: var(--muted); }
.done .btn { margin-top: 1.1rem; }
.done[hidden] { display: none; }
.inside { padding: 1.4rem 0 2.75rem; background: linear-gradient(180deg, var(--floor), var(--deep)); }
.inside p { max-width: 34rem; color: var(--muted); }
@media (min-width: 34rem) {
  .btn.big { width: auto; padding-inline: 2.6rem; }
}