.home-page {
  background: var(--color-paper);
  color: var(--color-asphalt);
}

.home-page a:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
}

.home-masthead,
.home-hero,
.home-routes,
.home-sequence,
.home-cta {
  color: var(--color-mist);
}

.home-masthead__grid,
.home-hero__grid,
.home-lenses__grid,
.home-frame__grid,
.home-routes__grid,
.home-fieldnote__grid,
.home-method__grid,
.home-sequence__grid,
.home-recap__grid,
.home-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
}

.home-masthead__copy,
.home-hero__copy,
.home-hero__rail,
.home-hero__media,
.home-lenses__intro,
.home-lenses__items,
.home-frame__prose,
.home-frame__aside,
.home-routes__intro,
.home-routes__board,
.home-fieldnote__intro,
.home-fieldnote__tips,
.home-method__prose,
.home-method__official,
.home-sequence__intro,
.home-sequence__list,
.home-recap__block,
.home-cta__content,
.home-cta__routes {
  min-inline-size: 0;
  inline-size: 100%;
}

.home-masthead {
  padding-block: var(--space-7) var(--space-6);
  border-block-end: 1px solid var(--color-border-dark);
}

.home-masthead__copy {
  max-inline-size: 42rem;
}

.home-masthead__note {
  max-inline-size: 42rem;
  margin-block-end: var(--space-4);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.home-masthead__promise {
  max-inline-size: 38rem;
  margin-block-end: 0;
  color: var(--color-slate);
}

.home-masthead__locator {
  display: none;
}

.home-hero {
  padding-block: var(--space-7) var(--space-9);
}

.home-hero__copy .rule-accent {
  margin-block-end: var(--space-5);
}

.home-hero__copy h1 {
  max-inline-size: 48rem;
  margin-block-end: var(--space-5);
  font-size: clamp(2.625rem, 2.1rem + 3.3vw, 4rem);
  line-height: 0.98;
}

.home-hero__dek {
  max-inline-size: 44rem;
  margin-block-end: var(--space-7);
}

.home-hero__media {
  margin: 0 0 var(--space-5);
  overflow: hidden;
  background: var(--color-ink-raised);
}

.home-hero__media img {
  inline-size: 100%;
  min-inline-size: 0;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 52% 58%;
}

.home-hero__rail {
  padding: var(--space-5);
  border: 1px solid var(--color-border-dark);
  background: var(--color-ink-raised);
}

.home-hero__rail-label,
.home-method__label,
.home-tip__next,
.home-route__label {
  margin: 0;
  color: var(--color-amber);
  font-family: var(--font-heading);
  font-size: var(--text-utility);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: var(--leading-utility);
  text-transform: uppercase;
}

.home-hero__rail ol {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.home-hero__rail li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: var(--space-3);
  min-inline-size: 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border-dark);
}

.home-hero__rail li > span {
  color: var(--color-amber);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

.home-hero__rail strong,
.home-hero__rail small {
  grid-column: 2;
}

.home-hero__rail strong {
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.home-hero__rail small {
  color: var(--color-slate);
}

.home-lenses,
.home-frame,
.home-fieldnote,
.home-method {
  padding-block: var(--space-9);
}

.home-lenses__intro {
  max-inline-size: 44rem;
}

.home-lenses__intro h2,
.home-frame__prose h2,
.home-fieldnote__intro h2,
.home-method__prose h2,
.home-sequence__intro h2,
.home-recap__block h2,
.home-cta__content h2,
.home-routes__intro h2 {
  margin-block-start: 0;
}

.home-lenses__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  margin-block-start: var(--space-7);
}

.home-lens {
  min-inline-size: 0;
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border-light);
}

.home-lens__marker {
  display: block;
  margin-block-end: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-utility);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-lens--city .home-lens__marker { color: var(--color-city-blue); }
.home-lens--missions .home-lens__marker { color: var(--color-signal-red); }
.home-lens--driving .home-lens__marker { color: var(--color-amber); }

.home-lens h3 {
  margin-block-start: 0;
}

.home-lens p {
  max-inline-size: 28rem;
  margin-block-end: 0;
}

.home-lens a,
.home-frame__prose a,
.home-tip a,
.home-method__prose a {
  color: inherit;
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: 600;
  text-decoration-color: var(--color-amber);
}

.home-frame__prose {
  max-inline-size: 46rem;
}

.home-frame__prose h3 {
  position: relative;
  padding-block-start: var(--space-5);
}

.home-frame__prose h3::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 3rem;
  block-size: 3px;
  background: var(--color-amber);
}

.home-frame__aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.home-frame__media {
  margin: 0;
}

.home-frame__media img {
  inline-size: 100%;
  min-inline-size: 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 56% 52%;
}

.home-frame__media figcaption {
  padding-block-start: var(--space-3);
  color: #667174;
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.home-frame__note {
  padding: var(--space-5);
  border-inline-start: var(--rule-accent);
  background: var(--color-amber-soft);
  color: var(--color-asphalt);
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.home-routes,
.home-sequence,
.home-cta {
  padding-block: var(--space-9);
}

.home-routes__intro,
.home-sequence__intro {
  max-inline-size: 40rem;
}

.home-routes__board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-block-start: var(--space-7);
  border-block-start: 1px solid var(--color-border-dark);
}

.home-route {
  position: relative;
  min-inline-size: 0;
  border-block-end: 1px solid var(--color-border-dark);
}

.home-route__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  min-inline-size: 0;
  padding: var(--space-6) 0;
  color: var(--color-mist);
  text-decoration: none;
  transition: padding var(--transition-fast), color var(--transition-fast);
}

.home-route__link:hover,
.home-route__link:focus-visible {
  padding-inline-start: var(--space-3);
  color: var(--color-mist);
  box-shadow: inset 3px 0 0 var(--color-amber);
}

.home-route__number {
  color: var(--color-amber);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.home-route h3 {
  margin: 0;
  color: var(--color-mist);
}

.home-route p {
  max-inline-size: 30rem;
  margin: 0;
  color: var(--color-mist);
}

.home-route__arrow {
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: 600;
}

.home-route img {
  inline-size: min(100%, 15rem);
  min-inline-size: 0;
  aspect-ratio: 1;
  margin-block: 0 var(--space-6);
  object-fit: cover;
}

.home-fieldnote__intro {
  max-inline-size: 34rem;
}

.home-fieldnote__tips {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-block-start: var(--space-7);
}

.home-tip {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-4);
  min-inline-size: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border-light);
}

.home-tip--warm {
  border-inline-start: var(--rule-accent);
  background: var(--color-amber-soft);
}

.home-tip__number {
  color: var(--color-city-blue);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.home-tip h3 {
  margin-block-start: 0;
}

.home-tip p {
  max-inline-size: 30rem;
  margin-block-end: 0;
}

.home-tip__next {
  display: block;
  margin-block-end: var(--space-3);
  color: var(--color-city-blue);
}

.home-method__prose {
  max-inline-size: 44rem;
}

.home-method__official {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--color-border-dark);
  background: var(--color-ink-raised);
  color: var(--color-mist);
}

.home-method__official h3,
.home-method__official p {
  margin: 0;
}

.home-method__official p {
  max-inline-size: 30rem;
}

.home-sequence__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-border-dark);
}

.home-sequence__step {
  min-inline-size: 0;
  border-block-end: 1px solid var(--color-border-dark);
}

.home-sequence__step a {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-4);
  min-inline-size: 0;
  padding-block: var(--space-5);
  color: var(--color-mist);
  text-decoration: none;
}

.home-sequence__step a:hover,
.home-sequence__step a:focus-visible {
  color: var(--color-mist);
  box-shadow: inset 3px 0 0 var(--color-amber);
}

.home-sequence__step > a > span {
  color: var(--color-city-blue);
  font-family: var(--font-heading);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.home-sequence__step--task > a > span { color: var(--color-signal-red); }
.home-sequence__step--end > a > span { color: var(--color-amber); }

.home-sequence__step h3,
.home-sequence__step p {
  margin-block-start: 0;
}

.home-sequence__step p {
  max-inline-size: 28rem;
}

.home-sequence__step b {
  display: block;
  margin-block-start: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
}

.home-sequence__step i {
  font-style: normal;
}

.home-recap {
  padding-block: var(--space-8);
}

.home-recap__block {
  max-inline-size: 42rem;
  padding: var(--space-5);
  border-inline-start: var(--rule-accent);
}

.home-recap__lens {
  max-inline-size: 42rem;
  margin-block-end: var(--space-5);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.home-recap__official {
  max-inline-size: 34rem;
  margin-block-end: 0;
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: var(--leading-caption);
}

.home-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-inline-size: 36rem;
}

.home-cta__content h2,
.home-cta__content p,
.home-cta__content small {
  margin: 0;
}

.home-cta__content p {
  max-inline-size: 36rem;
}

.home-cta__button {
  inline-size: auto;
  min-block-size: 2.75rem;
  margin-block-start: var(--space-2);
}

.home-cta__button:hover,
.home-cta__button:focus-visible {
  background: var(--color-amber);
  border-color: var(--color-amber);
  color: var(--color-ink);
}

.home-cta__content small {
  color: var(--color-slate);
}

.home-cta__routes {
  display: none;
}

@media (min-width: 48rem) {
  .home-masthead,
  .home-hero,
  .home-routes,
  .home-sequence,
  .home-cta,
  .home-lenses,
  .home-frame,
  .home-fieldnote,
  .home-method {
    padding-block: var(--space-10);
  }

  .home-masthead__grid,
  .home-hero__grid,
  .home-lenses__grid,
  .home-frame__grid,
  .home-routes__grid,
  .home-fieldnote__grid,
  .home-method__grid,
  .home-sequence__grid,
  .home-recap__grid,
  .home-cta__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--space-5);
  }

  .home-masthead__copy,
  .home-hero__copy,
  .home-lenses__intro,
  .home-frame__prose,
  .home-routes__intro,
  .home-fieldnote__intro,
  .home-method__prose,
  .home-sequence__intro,
  .home-recap__block,
  .home-cta__content {
    grid-column: 1 / -1;
  }

  .home-hero__media {
    grid-column: 1 / 4;
    grid-row: 2;
    margin-block: 0;
  }

  .home-hero__rail {
    grid-column: 4 / 7;
    grid-row: 2;
  }

  .home-lenses__items,
  .home-frame__aside,
  .home-routes__board,
  .home-fieldnote__tips,
  .home-method__official,
  .home-sequence__list {
    grid-column: 1 / -1;
  }

  .home-lenses__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }

  .home-lens--driving {
    grid-column: 1 / -1;
  }

  .home-frame__aside {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .home-route--review { grid-column: 1 / -1; }
  .home-route--explore { grid-column: 1 / 4; }
  .home-route--gameplay { grid-column: 4 / 7; }
  .home-route--mission { grid-column: 1 / 4; }
  .home-route--drive { grid-column: 4 / 7; }

  .home-routes__board {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--space-5);
  }

  .home-fieldnote__tips {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-method__official {
    max-inline-size: 32rem;
  }

  .home-sequence__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }

  .home-sequence__step a {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .home-recap__block {
    grid-column: 2 / 6;
    margin-inline: auto;
  }

  .home-cta__content {
    grid-column: 1 / 6;
  }
}

@media (min-width: 64rem) {
  .home-masthead {
    padding-block: var(--space-7);
  }

  .home-masthead__grid,
  .home-hero__grid,
  .home-lenses__grid,
  .home-frame__grid,
  .home-routes__grid,
  .home-fieldnote__grid,
  .home-method__grid,
  .home-sequence__grid,
  .home-recap__grid,
  .home-cta__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.25rem;
  }

  .home-masthead__copy { grid-column: 1 / 8; }
  .home-masthead__locator {
    display: flex;
    grid-column: 9 / 13;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--space-3);
    color: var(--color-city-blue);
    font-family: var(--font-heading);
    font-size: var(--text-utility);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
  }

  .home-hero__copy { grid-column: 1 / 8; grid-row: 1; }
  .home-hero__rail { grid-column: 8 / 10; grid-row: 1; align-self: end; }
  .home-hero__media { grid-column: 10 / 13; grid-row: 1; align-self: stretch; }
  .home-hero__media img { block-size: 100%; min-block-size: 29rem; }
  .home-hero__dek { margin-block-end: 0; }

  .home-lenses__intro { grid-column: 1 / 8; }
  .home-lenses__items { grid-column: 1 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-lens--driving { grid-column: auto; }
  .home-lens + .home-lens { border-inline-start: 1px solid var(--color-border-light); padding-inline-start: var(--space-5); }

  .home-frame__prose { grid-column: 1 / 8; }
  .home-frame__aside { grid-column: 8 / 13; grid-row: 1; align-self: start; margin-block-start: var(--space-7); grid-template-columns: minmax(0, 1fr); }

  .home-routes__intro { grid-column: 1 / 7; }
  .home-routes__board { grid-column: 1 / 13; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.25rem; }
  .home-route--review { grid-column: 1 / 8; }
  .home-route--explore { grid-column: 8 / 13; }
  .home-route--gameplay { grid-column: 1 / 5; }
  .home-route--mission { grid-column: 5 / 9; }
  .home-route--drive { grid-column: 9 / 13; }
  .home-route--explore .home-route__link,
  .home-route--drive .home-route__link { padding-block-end: var(--space-4); }

  .home-fieldnote__intro { grid-column: 1 / 6; }
  .home-fieldnote__tips { grid-column: 6 / 13; margin-block-start: 0; }

  .home-method__prose { grid-column: 1 / 8; }
  .home-method__official { grid-column: 8 / 13; grid-row: 1; align-self: end; margin-block-start: 0; }

  .home-sequence__intro { grid-column: 1 / 6; }
  .home-sequence__list { grid-column: 6 / 13; margin-block-start: 0; grid-template-columns: minmax(0, 1fr); }

  .home-recap__block { grid-column: 3 / 10; }

  .home-cta__content { grid-column: 2 / 8; }
  .home-cta__routes {
    display: grid;
    grid-column: 8 / 13;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: var(--space-3);
    min-block-size: 18rem;
    opacity: 0.7;
  }
  .home-cta__routes span { block-size: 1px; background: var(--color-city-blue); transform-origin: left center; }
  .home-cta__routes span:nth-child(1) { transform: rotate(-22deg) translateY(4rem); }
  .home-cta__routes span:nth-child(2) { transform: rotate(31deg) translateY(-2rem); background: var(--color-amber); }
  .home-cta__routes span:nth-child(3) { transform: rotate(-12deg) translateY(2rem); }
}

@media (min-width: 80rem) {
  .home-masthead__grid,
  .home-hero__grid,
  .home-lenses__grid,
  .home-frame__grid,
  .home-routes__grid,
  .home-fieldnote__grid,
  .home-method__grid,
  .home-sequence__grid,
  .home-recap__grid,
  .home-cta__grid,
  .home-routes__board {
    column-gap: 1.5rem;
  }
}

@media (max-width: 59.99rem) {
  .home-hero__grid {
    row-gap: var(--space-5);
  }

  .home-hero__copy { grid-row: 1; }
  .home-hero__media { grid-row: 2; }
  .home-hero__rail { grid-row: 3; }
}

@media (max-width: 47.99rem) {
  .home-hero__grid {
    gap: var(--space-5);
  }

  .home-hero__copy h1 {
    font-size: clamp(2.625rem, 10vw, 3.125rem);
  }

  .home-hero__media {
    order: 2;
    margin: 0;
  }

  .home-hero__rail {
    order: 3;
  }

  .home-lenses__items,
  .home-frame__aside,
  .home-routes__board,
  .home-fieldnote__tips,
  .home-method__grid,
  .home-sequence__grid {
    row-gap: var(--space-6);
  }

  .home-route img {
    inline-size: 100%;
    max-inline-size: 19rem;
  }

  .home-recap__block {
    padding: var(--space-5);
  }

  .home-cta__button {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .home-page .reveal {
    transition-duration: 360ms;
  }
}