/* BackpackMap marketing site, "Trail Light" direction.
   Full-bleed public-domain photographs of real trails, with the app's own
   trail-orange line, blue "you" dot and cards drawn onto them. Condensed
   Archivo headlines, IBM Plex Mono for readouts, Source Serif italic for
   photo credits. Dark night-green ground; fog and paper sections for air. */

:root {
  --night: #0b110e;
  --pine: #121c17;
  --pine-2: #17231d;
  --line: rgba(232, 240, 233, 0.14);
  --snow: #eef2ec;
  --mist: #a8b4ab;          /* 8.4:1 on --night */
  --trail: #ff6b1a;         /* the app's trail line, brightened for dark */
  --trail-hi: #ff823d;
  --trail-ink: #b3420a;     /* orange text on light grounds, 5.2:1 on paper */
  --blue: #2f8cff;
  --paper: #ebede5;
  --ink: #0f1712;
  --ink-dim: #4a5750;       /* 6.9:1 on paper */
  --fog: #e9e9e4;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --serif: 'Source Serif 4', Georgia, serif;
  --ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Archivo', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--night);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
  background: var(--night);
  color: var(--snow);
  font: 400 18px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

::selection {
  background: rgba(255, 107, 26, 0.35);
}

.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

/* Display type: condensed Archivo, heavy and tight, like a trail sign. */
h1,
h2 {
  font-family: var(--sans);
  font-stretch: 72%;
  font-weight: 820;
  line-height: 0.9;
  letter-spacing: -0.012em;
}

.label {
  margin: 0 0 18px;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--trail);
}

.label span {
  margin-right: 12px;
  color: var(--snow);
}

.credit {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 14px;
  margin: 0;
  max-width: calc(100% - 32px);
  font: italic 400 13px/1.35 var(--serif);
  color: rgba(255, 255, 255, 0.82);
  text-align: right;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 18px 30px;
  background: var(--trail);
  color: #160a03;             /* 7.4:1 on the orange */
  font: 700 17px/1 var(--sans);
  font-stretch: 92%;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 14px 34px -14px rgba(255, 107, 26, 0.75);
  transition: background 0.25s var(--ease), transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}

.btn:hover {
  background: var(--trail-hi);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 18px 40px -14px rgba(255, 107, 26, 0.9);
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus-visible,
.nav-cta:focus-visible,
.mv-chapters button:focus-visible,
.mv-controls button:focus-visible {
  outline: 2px solid var(--snow);
  outline-offset: 3px;
}

.btn:disabled {
  background: #6d5a4d;
  color: #f1e7df;
  box-shadow: none;
  cursor: progress;
}

/* ---------- Nav ---------- */
.nav {
  position: absolute;
  z-index: 30;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--snow);
  text-decoration: none;
  font: 800 14px/1 var(--sans);
  font-stretch: 100%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* The nav sits over the fog photo, so it is ink on light. Tap targets in
   the nav are at least 44pt tall (Apple's minimum). */
.nav .brand {
  min-height: 44px;
  color: var(--ink);
}

.brand img {
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.nav-tag {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--snow);           /* 16:1 on ink */
  font: 700 14px/1 var(--sans);
  text-decoration: none;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.45);
  transition: background 0.2s var(--ease);
}

.nav-cta:hover {
  background: #26332b;
}

.nav-cta:focus-visible,
.lead .btn:focus-visible {
  outline-color: var(--ink);
}

@media (max-width: 700px) {
  .nav-tag {
    display: none;
  }
}

/* Small phones: the name tightens, and the Join button never wraps. */
.nav-cta {
  flex: none;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .nav {
    padding-block: 18px;
  }

  .brand {
    font-size: 12px;
    letter-spacing: 0.14em;
  }
}

@media (max-width: 350px) {
  .nav .brand span {
    display: none;
  }
}

/* ---------- Photo plates (shared) ---------- */
.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--pine);
}

.photo > img,
.photo > svg.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.photo > svg.art {
  z-index: 2;
  overflow: visible;
}

/* ---------- The trail art drawn on the photos ---------- */
.art .route {
  fill: none;
  stroke: var(--trail);
  stroke-width: 11;
  stroke-linecap: round;
  opacity: 0.8;
}

.art .measure {
  fill: none;
  stroke: var(--trail);
  stroke-width: 15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.art .measure-glow {
  fill: none;
  stroke: var(--trail-hi);
  stroke-width: 40;
  stroke-linecap: round;
  opacity: 0.5;
}

.art .route-fog {
  fill: none;
  stroke: url(#g-fog-route);
  stroke-width: 13;
  stroke-linecap: round;
}

.art .back-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 1;
}

.art .crow {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-dasharray: 22 18;
  stroke-linecap: round;
  opacity: 0.95;
}

.art .you-halo {
  fill: rgba(47, 140, 255, 0.28);
  transform-origin: 0 0;
  animation: halo 2.8s ease-out infinite;
}

.art .you-ring,
.art .pin-ring {
  fill: #fff;
}

.art .you-dot {
  fill: var(--blue);
}

.art .pin-dot {
  fill: var(--trail);
}

.art .pin-ripple {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  opacity: 0;
  transform-origin: 0 0;
}

@keyframes halo {
  0% { transform: scale(0.6); opacity: 0.9; }
  80%, 100% { transform: scale(1.6); opacity: 0; }
}

@keyframes ripple {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Draw-on: the paths use pathLength="1". Everything is visible at rest;
   with scripts on, a plate starts undrawn and draws when it is seen. */
.art .draw {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}

.js [data-play]:not(.go) .draw {
  stroke-dashoffset: 1.001;
  opacity: 0;
}

.js [data-play]:not(.go) .pin,
.js [data-play]:not(.go) .crow {
  opacity: 0;
}

[data-play].go .draw {
  transition: stroke-dashoffset 1.9s var(--ease) var(--d, 0.25s), opacity 0s var(--d, 0.25s);
}

[data-play].go .pin {
  transition: opacity 0.4s ease var(--dt, 1.9s);
}

[data-play].go .pin-ripple {
  animation: ripple 1.1s ease-out calc(var(--dt, 1.9s) + 0.15s) 2 both;
}

[data-play].go .crow {
  transition: opacity 0.8s ease 0.2s;
}

/* Cards and tags pinned to a point in the photo (positioned by art.js from
   the photo's own coordinates; data-side says which way they hang). */
.chip {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  max-width: calc(100% - 20px);
  pointer-events: none;
  white-space: nowrap;
}

.chip[data-side='left'] { translate: calc(-100% - 30px) -50%; }
.chip[data-side='right'] { translate: 26px -50%; }
.chip[data-side='above'] { translate: -50% calc(-100% - 20px); }
.chip[data-side='below'] { translate: -50% 24px; }

.no-js .chip {
  display: none;
}

.js [data-play]:not(.go) .chip {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
}

[data-play].go .chip {
  transition: opacity 0.5s ease var(--dc, 2.2s), transform 0.8s var(--ease) var(--dc, 2.2s);
}

/* The app's measure card (same layout as the card in the phone). */
.card {
  display: grid;
  gap: 2px;
  padding: 13px 18px 14px;
  border-radius: 16px;
  background: #fff;
  color: #111;
  font-family: var(--ui);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 24px 50px -20px rgba(0, 0, 0, 0.6);
}

.card-name {
  font-size: 13px;
  font-weight: 600;
  color: #5d5d63;
}

.card-big {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.card-sub {
  font-size: 13.5px;
  color: #3c3c43;
}

/* The app's off-route banner. */
.banner {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px 11px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  color: #111;
  font: 400 15px/1.3 var(--ui);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.45);
}

.banner .warn {
  flex: none;
  display: flex;
  color: #e65100;
}

/* Phones: a smaller banner that wraps inside the photo strip. */
@media (max-width: 700px) {
  .banner {
    gap: 9px;
    padding: 9px 13px 9px 10px;
    border-radius: 15px;
    font-size: 13.5px;
    white-space: normal;
  }

  .banner .warn svg {
    width: 22px;
    height: 22px;
  }

  .tag {
    padding: 7px 11px;
    font-size: 12.5px;
  }

  .credit {
    right: 12px;
    bottom: 10px;
    font-size: 11.5px;
  }
}

.banner .warn svg {
  width: 26px;
  height: 26px;
}

/* Distance tags on the switchback photo. */
.tag {
  padding: 9px 14px;
  border-radius: 999px;
  font: 500 14px/1 var(--mono);
  letter-spacing: 0.02em;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.6);
}

.tag-crow {
  background: rgba(11, 17, 14, 0.82);
  color: #fff;
  border: 1.5px dashed rgba(255, 255, 255, 0.85);
}

.tag-trail {
  background: var(--trail);
  color: #160a03;
  font-weight: 500;
}

/* ================================================================
   Feature sections, one per feature, in story order: Off-trail (with the
   page headline), Messages over satellite, Tap-to-Measure. Each is a
   full-bleed photo of the real situation with the app's own art drawn on
   it, the copy, and the phone playing that feature's chapter of the
   movie. Narrow screens stack photo, copy, phone; from 1024px the photo
   fills the section, the copy takes the left and the phone the right.
   ================================================================ */
.plate {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 52px 0 64px;
  background: var(--night);
  color: var(--snow);
}

/* Phones: label and headline first, then the photo strip, then the phone
   with its caption, then the rest of the copy. The copy box dissolves so
   its pieces can sit around the photo and the phone. */
.plate-copy {
  display: contents;
}

.plate-copy > * {
  position: relative;
  z-index: 3;
  margin-inline: var(--gutter);
}

.plate-copy > .label { order: 1; }
.plate-copy > h1,
.plate-copy > h2 { order: 2; }
.plate-photo { order: 3; }
.plate .movie { order: 4; }
.plate-copy > :not(.label):not(h1):not(h2) { order: 5; }

.plate-photo {
  aspect-ratio: 4 / 3;
  width: 100%;
}

.plate-copy > p:not(.label):not(.nosub):not(.fine) {
  margin-top: 26px;
}

.plate h2 {
  font-size: clamp(44px, 11vw, 96px);
  margin-bottom: 24px;
}

.plate-copy p:not(.label):not(.fine) {
  margin-block: 0;
  max-width: 42ch;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.6;
  color: #d0d9d2;
}

.fine {
  margin-block: 18px 0;
  font: 400 13px/1.5 var(--mono);
  color: var(--mist);
}

.js .plate:not(.lead):not(.go) .plate-copy > * {
  opacity: 0;
  transform: translateY(18px);
}

.plate.go .plate-copy > * {
  transition: opacity 0.8s ease, transform 1s var(--ease);
}

.plate.go .plate-copy > :nth-child(2) { transition-delay: 0.08s; }
.plate.go .plate-copy > :nth-child(3) { transition-delay: 0.16s; }
.plate.go .plate-copy > :nth-child(4) { transition-delay: 0.24s; }
.plate.go .plate-copy > :nth-child(5) { transition-delay: 0.32s; }

/* ---------- The phone in each section ---------- */
.plate .movie {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 14px;
  padding: 28px var(--gutter) 0;
}

.plate .movie-stage {
  --scale: 0.6;
}

.plate .iphone {
  box-shadow:
    inset 0 0 0 1.5px #5b615d,
    inset 0 0 0 4px #0b0c0c,
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 50px 90px -30px rgba(0, 0, 0, 0.75);
}

.plate .mv-capcol,
.plate .mv-nav {
  width: min(100%, 340px);
}

.plate .mv-capcol {
  position: relative;
}

/* Caption card: the step's caption, on a dark card over any photo. */
.mv-panel {
  padding: 18px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(11, 17, 14, 0.9);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.8);
}

/* The section's own label already names the feature. */
.mv-label {
  display: none;
}

.mv-caption {
  margin: 0;
  min-height: 3.15em;
  font: 760 clamp(23px, 1.8vw, 27px)/1.05 var(--sans);
  font-stretch: 78%;
  letter-spacing: -0.005em;
  color: var(--snow);
  text-wrap: balance;
}

.mv-panel.in .mv-caption {
  animation: cap-in 0.7s var(--ease);
}

@keyframes cap-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Step progress and Pause/Replay, on one dark pill under the caption. */
.mv-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 4px 14px;
  border-radius: 999px;
  background: rgba(11, 17, 14, 0.78);
}

.mv-chapters {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mv-chapters button {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Chapter number and name stay for screen readers only. */
.mv-num,
.mv-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mv-ticks {
  display: flex;
  gap: 4px;
}

.mv-ticks i {
  display: block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.3s var(--ease), width 0.4s var(--ease);
}

.mv-ticks i.done {
  background: rgba(255, 255, 255, 0.55);
}

.mv-ticks i.on {
  width: 26px;
  background: var(--trail);
}

.mv-foot,
.mv-controls {
  display: flex;
  gap: 6px;
}

.mv-controls[hidden] {
  display: none;
}

.mv-controls button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--snow);
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.mv-controls button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--snow);
}

/* The smallest phones: narrower step marks and buttons so the row fits. */
@media (max-width: 360px) {
  .mv-nav {
    gap: 8px;
    padding-left: 12px;
  }

  .mv-ticks {
    gap: 3px;
  }

  .mv-ticks i {
    width: 9px;
  }

  .mv-ticks i.on {
    width: 18px;
  }

  .mv-controls button {
    padding: 0 13px;
  }
}

/* Reduced motion: every caption of the chapter, listed. */
.mv-list {
  margin: 0;
  padding: 0 0 0 18px;
  font: 600 16px/1.45 var(--sans);
  color: var(--snow);
}

.mv-list > li {
  padding: 4px 0;
}

.mv-list b {
  display: none;
}

.mv-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mv-list ul li + li {
  margin-top: 6px;
}

/* The trip map at home: over the lower half of the phone, then beside it. */
.plate .tripcard {
  top: auto;
  bottom: calc(100% + 56px);
  left: 50%;
  width: 250px;
  margin-left: -125px;
}

/* ---------- 01 The lead: headline and Off-trail, ink on the fog ---------- */
.fog {
  background: var(--fog);
  color: var(--ink);
}

.lead {
  padding-top: 96px;
}

.fog .plate-photo {
  background: var(--fog);
}

.lead h1 {
  margin-bottom: 24px;
  font-size: clamp(56px, 14vw, 120px);
  line-height: 0.86;
  font-weight: 840;
  color: var(--ink);
}

.lead h1 span {
  display: block;
}

/* The trail orange, deepened to 3.3:1 on the fog for display type. */
.lead h1 .l2 {
  color: #d9530b;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 30px;
}

.cta-note {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.fog .label {
  color: var(--trail-ink);
}

.fog .label span {
  color: var(--ink);
}

.fog h2 {
  color: var(--ink);
}

.fog .plate-copy p:not(.label):not(.fine) {
  color: var(--ink-dim);
}

.fog .credit {
  color: rgba(20, 28, 23, 0.7);
  text-shadow: none;
}

.fog .route-fog { --d: 0.2s; }
.fog .back-line { --d: 1.4s; }
.fog .chip { --dc: 1.1s; }

/* The headline rises in on load. */
@media (prefers-reduced-motion: no-preference) {
  .lead h1 span,
  .lead .plate-copy > p:not(.label),
  .lead .cta {
    animation: rise 1.1s var(--ease) both;
  }

  .lead h1 span:nth-child(2) { animation-delay: 0.08s; }
  .lead h1 .l2 { animation-delay: 0.16s; }
  .lead .plate-copy > p:not(.label) { animation-delay: 0.24s; }
  .lead .cta { animation-delay: 0.32s; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 02 Night: Messages over satellite ---------- */
.night .plate-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(5, 8, 7, 0.75) 0%, rgba(5, 8, 7, 0) 30%);
  pointer-events: none;
}

.night h2 span {
  display: block;
}

.night .plate-copy p.nosub:not(.label):not(.fine) {
  margin-top: 18px;
  font-weight: 650;
  color: var(--snow);
}

.art .orbit {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 2.5;
  stroke-dasharray: 3 14;
  stroke-linecap: round;
}

.art .link {
  stroke: var(--trail-hi);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 14 22;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.art .link.up,
.art .link.down {
  opacity: 0.95;
}

.art .link.up {
  animation: link-up 0.9s linear infinite;
}

.art .link.down {
  stroke: #9fd0ff;
  animation: link-down 0.9s linear infinite;
}

@keyframes link-up { to { stroke-dashoffset: 36; } }
@keyframes link-down { to { stroke-dashoffset: -36; } }

.art .sat-glow {
  fill: rgba(255, 255, 255, 0.18);
}

.art .sat-body {
  fill: #f2f5f7;
}

.art .sat-wing {
  fill: #7fa4c8;
}

.sat-log {
  display: grid;
  gap: 0;
  margin-block: 26px 0;
  padding: 0;
  max-width: 460px;
  list-style: none;
  border-top: 1px solid var(--line);
}

.sat-log li {
  display: grid;
  gap: 4px;
  padding: 12px 0 13px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
  color: #d0d9d2;
}

.log-tag {
  font: 500 11px/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}

.log-out .log-tag {
  color: var(--trail);
}

.log-in .log-tag {
  color: #9fd0ff;
}

.sat-log code {
  font: 500 15px/1.4 var(--mono);
  color: var(--snow);
}

.sat-log .wx b {
  font-size: 19px;
  color: var(--snow);
}

.js .night:not(.go) .sat-log li,
.js .night .sat-log li.wait {
  opacity: 0.25;
}

.night .sat-log li {
  transition: opacity 0.6s ease;
}

/* ---------- 03 Switchbacks: straight line vs the trail ---------- */
.switchbacks h2 span {
  display: block;
}

.switchbacks h2 .l2 {
  color: var(--trail);
}



.switchbacks .plate-photo > img {
  object-position: 0% 0%;
}

.switchbacks .measure,
.switchbacks .measure-glow { --d: 0.9s; }
.switchbacks .pin { --dt: 2.5s; }
.switchbacks .chip { --dc: 2.6s; }
.switchbacks .tag-crow { --dc: 0.9s; }

.readout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 24px;
  margin-block: 30px 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.readout div {
  display: grid;
  gap: 6px;
}

.readout dt {
  font: 500 10.5px/1.2 var(--mono);
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--mist);
}

.readout dd {
  margin: 0;
  white-space: nowrap;
  font: 820 clamp(30px, 2.7vw, 38px)/1 var(--sans);
  font-stretch: 74%;
  font-variant-numeric: tabular-nums;
  color: var(--snow);
}

.readout .ro-trail dd {
  color: var(--trail);
}

.readout .ro-crow dt::before {
  content: '';
  display: inline-block;
  width: 18px;
  margin-right: 8px;
  vertical-align: middle;
  border-top: 2px dashed var(--snow);
}

.readout .ro-trail dt::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 3px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 2px;
  background: var(--trail);
}

@media (max-width: 480px) {
  .readout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Wide screens: photo behind, copy left, phone right ---------- */
@media (min-width: 1024px) {
  .plate-copy {
    display: block;
    position: relative;
    z-index: 3;
  }

  .plate-copy > * {
    margin-inline: 0;
  }

  .plate-copy > p:not(.label):not(.nosub):not(.fine) {
    margin-top: 0;
  }

  .plate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: clamp(32px, 5vw, 80px);
    align-items: center;
    min-height: max(100svh, 860px);
    padding: 110px var(--gutter) 64px;
  }

  .plate-photo {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    max-height: none;
    height: 100%;
  }

  .plate-copy {
    grid-column: 1;
    grid-row: 1;
    max-width: 560px;
    padding: 0;
  }

  .plate .movie {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
  }

  /* The phone, caption and controls fit one screen: the phone scales with
     the window height (it is 868pt tall at scale 1). */
  .plate .movie-stage { --scale: 0.66; }

  .plate:not(.lead) {
    padding-top: 64px;
  }

  .plate h2 {
    font-size: clamp(56px, 5.2vw, 88px);
  }

  .plate .tripcard {
    left: auto;
    right: calc(100% - 36px);
    margin-left: 0;
    bottom: calc(100% + 110px);
  }

  .lead .plate-copy {
    align-self: center;
  }

  .lead h1 {
    font-size: clamp(72px, 6.6vw, 112px);
  }

  .night .plate-photo::before {
    background: linear-gradient(90deg, rgba(5, 8, 7, 0.82) 0%, rgba(5, 8, 7, 0.45) 36%, rgba(5, 8, 7, 0) 58%),
      linear-gradient(0deg, rgba(5, 8, 7, 0.7) 0%, rgba(5, 8, 7, 0) 38%);
  }

  .night h2 span {
    white-space: nowrap;
  }

  /* The card sits below the drawn switchbacks, whose depth grows with the
     photo's width. */
  .switchbacks .plate-copy {
    align-self: end;
    margin-top: calc(28vw - 64px);
    max-width: 540px;
    padding: 36px 36px 32px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: rgba(11, 17, 14, 0.9);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  }

  .switchbacks h2 {
    font-size: clamp(52px, 4.6vw, 76px);
  }

  .switchbacks .credit {
    left: 16px;
    right: auto;
    text-align: left;
  }
}

/* ================================================================
   Also in BackpackMap: a map legend on the topo sheet
   ================================================================ */
.more {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 11vw, 170px) 0 clamp(80px, 10vw, 150px);
  background: var(--paper);
  color: var(--ink);
}

.more::before {
  content: '';
  position: absolute;
  inset: -4% -2%;
  background: url('../img/topo.svg') center / cover no-repeat;
  opacity: 0.12;
  pointer-events: none;
}

.more .wrap {
  position: relative;
}

.more .label {
  color: var(--trail-ink);
}

.more-head {
  margin-bottom: clamp(40px, 5vw, 72px);
}

.more h2 {
  font-size: clamp(52px, 7vw, 112px);
  color: var(--ink);
}

.legend {
  display: grid;
  gap: 0 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legend li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  padding: 26px 0 30px;
  border-top: 1.5px solid rgba(15, 23, 18, 0.85);
}

.legend svg {
  grid-row: span 2;
  width: 48px;
  height: 48px;
}

.legend svg * {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legend svg .fill {
  fill: var(--trail);
  stroke: none;
}

.legend svg .dash {
  stroke: var(--trail-ink);
  stroke-dasharray: 3 5;
}

.legend svg .base {
  stroke-dasharray: 2 4;
  stroke-width: 1.6;
}

.legend h3 {
  font: 760 22px/1.15 var(--sans);
  font-stretch: 84%;
  color: var(--ink);
}

.legend p {
  margin: 6px 0 0;
  max-width: 34ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-dim);
}

@media (min-width: 700px) {
  .legend {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .legend {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================================================================
   Join: the sign-up form over the ridgelines at dusk
   ================================================================ */
.join {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 12vw, 180px) 0 clamp(96px, 11vw, 160px);
  background: #0f1c24;
  color: var(--snow);
}

.join-photo {
  position: absolute;
  inset: 0;
  background: #0f1c24;
}

.join-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11, 17, 14, 0.15) 0%, rgba(11, 17, 14, 0.55) 45%, rgba(11, 17, 14, 0.94) 100%);
}

.join-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 48px;
  align-items: start;
}

.join .label {
  color: #ffb489;
}

.join h2 {
  font-size: clamp(56px, 8vw, 128px);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.join-lede {
  margin: 26px 0 0;
  max-width: 34ch;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  color: #e3e9e4;
}

.req-h {
  margin: 36px 0 12px;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}

.req-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.req-list li {
  position: relative;
  padding-left: 28px;
  font-size: 16.5px;
  line-height: 1.5;
  color: #d9e0db;
}

.req-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--trail);
}

.join-credit {
  bottom: 16px;
}

/* The form: a solid dark card. */
.signup {
  position: relative;
  display: grid;
  gap: 20px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(11, 17, 14, 0.92);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.9);
}

.field label {
  display: block;
  margin-bottom: 8px;
  white-space: nowrap;
  font: 650 15px/1.2 var(--sans);
  color: var(--snow);
}

.field .opt {
  font-weight: 400;
  color: var(--mist);
}

.field input {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--snow);
  font: 400 17px/1 var(--sans);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.field input:focus {
  outline: none;
  border-color: var(--trail);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.28);
}

.field select {
  width: 100%;
  height: 50px;
  padding: 0 46px 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%23eef2ec' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 17px center / 14px 9px;
  color: var(--snow);
  font: 400 17px/1 var(--sans);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.field select:has(option[value='']:checked) {
  color: var(--mist);
}

.field select:focus {
  outline: none;
  border-color: var(--trail);
  background-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.28);
}

.field select option,
.field select optgroup {
  background: var(--pine);
  color: var(--snow);
}

.field select[aria-invalid='true'],
.field input[aria-invalid='true'] {
  border-color: #ff8f73;
}

.help {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--mist);
}

.field-err {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #ffab96;
}

.field-err[hidden],
.su-status[hidden] {
  display: none;
}

.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.su-submit {
  width: 100%;
  margin-top: 4px;
  padding-block: 19px;
}

.su-status {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border-left: 3px solid var(--mist);
  font-size: 15px;
  line-height: 1.5;
  color: var(--snow);
}

.su-status:focus {
  outline: none;
}

.su-status.su-ok {
  border-left-color: #5ad08a;
}

.su-status.su-error {
  border-left-color: #ff8f73;
}

/* After a successful sign-up only the confirmation stays. */
.signup.done .field,
.signup.done .su-submit {
  display: none;
}

.signup.done .su-status {
  font-size: 18px;
}

@media (min-width: 960px) {
  .join-inner {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 470px);
    gap: 72px;
  }

  .join-copy {
    padding-top: 12px;
  }
}

/* ================================================================
   Footer and sticky Join bar
   ================================================================ */
.foot {
  padding: 44px 0 56px;
  background: #070b09;
  border-top: 1px solid var(--line);
  color: var(--mist);
}

.foot-row {
  display: grid;
  gap: 14px 48px;
  font-size: 13.5px;
  line-height: 1.6;
}

.foot-row p {
  margin: 0;
  max-width: 70ch;
}

.foot-credits {
  font: italic 400 14px/1.5 var(--serif);
}

@media (min-width: 900px) {
  .foot-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .foot-row .brand {
    grid-row: span 2;
  }
}

.joinbar {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(9, 14, 12, 0.94);
  border-top: 1px solid var(--line);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, 0.8);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.5s var(--ease), visibility 0s 0.5s;
}

.joinbar.show {
  transform: none;
  visibility: visible;
  transition: transform 0.5s var(--ease);
}

.joinbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1360px;
  margin: 0 auto;
}

.joinbar-text {
  font: 500 14px/1.3 var(--sans);
  color: var(--mist);
}

.joinbar-text b {
  color: var(--snow);
  font-weight: 700;
}

.btn-slim {
  padding: 13px 22px;
  font-size: 15px;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .joinbar-text {
    display: none;
  }

  .joinbar-row .btn-slim {
    flex: 1;
    text-align: center;
  }
}

/* ---------- Reduced motion: everything at rest, fully drawn ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .art .you-halo,
  [data-play].go .pin-ripple,
  .art .link.up,
  .art .link.down {
    animation: none;
  }

  .js [data-play]:not(.go) .draw,
  .js [data-play]:not(.go) .pin,
  .js [data-play]:not(.go) .crow,
  .js [data-play]:not(.go) .chip,
  .js .plate:not(.go) .plate-copy > * {
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }

  .joinbar {
    transition: none;
  }
}

@media (min-width: 1024px) and (min-height: 1000px) {
  .plate .movie-stage { --scale: 0.74; }
}

@media (min-width: 1024px) and (max-height: 880px) {
  .plate .movie-stage { --scale: 0.6; }
}

@media (min-width: 1024px) and (max-height: 800px) {
  .plate .movie-stage { --scale: 0.54; }
}

@media (min-width: 1024px) and (max-height: 720px) {
  .plate .movie-stage { --scale: 0.5; }
}