/* Each task precedes its souvenir, then the shared trail reaches the next task. */
.station-screen .station-inner {
  position: relative;
  z-index: 2;
  width: min(1000px, calc(100% - 184px));
  min-height: max(850px, calc(100svh - var(--journey-header)));
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content max-content;
  align-content: center;
  align-items: start;
  column-gap: clamp(76px, 15vw, 210px);
  row-gap: 128px;
  padding: 100px 0 112px;
}
.station-screen[data-theme] .station-copy {
  width: min(100%, 330px);
  justify-self: center;
  grid-column: 2;
  grid-row: 1;
  transform: rotate(-1deg);
}
.station-screen[data-theme] .journey-token {
  width: 144px;
  justify-self: center;
  grid-column: 1;
  grid-row: 2;
  transform: rotate(-4deg);
}
.station-screen[data-route-side="left"] .station-copy { grid-column: 1; }
.station-screen[data-route-side="left"] .journey-token { grid-column: 2; transform: rotate(4deg); }
.station-screen[data-theme] .journey-token.is-earned {
  background: #e7e8aa;
  border-color: #a5b974;
  color: #343b23;
  box-shadow: 0 0 28px #dbe58b40, 3px 6px 10px #15121b4d;
}
.station-screen[data-theme] .journey-token.is-earned .token-art { filter: none; opacity: 1; }
.station-screen[data-theme] .journey-token.is-earned :is(.token-eyebrow, [data-token-status]) { color: #53612e; }
@media (max-width: 900px) and (min-width: 741px) {
  .station-screen .station-inner { width: calc(100% - 132px); column-gap: 40px; }
}
@media (max-width: 740px) {
  .station-screen .station-inner {
    width: calc(100% - 78px);
    min-height: max(900px, calc(100svh - var(--journey-header)));
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 155px;
    padding: 135px 0 110px;
  }
  .station-screen[data-theme] .station-copy,
  .station-screen[data-route-side="left"] .station-copy {
    width: min(100%, 300px);
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    transform: rotate(-1deg);
  }
  .station-screen[data-theme] .journey-token,
  .station-screen[data-route-side="left"] .journey-token {
    width: 155px;
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    margin: 0 10px 0 0;
    transform: rotate(4deg);
  }
  .station-screen[data-route-side="left"] .journey-token {
    justify-self: start;
    margin: 0 0 0 10px;
    transform: rotate(-4deg);
  }
}