/* =========================================================
   Page — Tour

   Six stops down one rail. Written mobile-first: the stop is a
   column at every width and gains its second column at 900px,
   where there is room for a 1280px screenshot to be legible
   beside a paragraph rather than under it.

   Only this page's layout lives here. The buttons, the badge,
   the closer and the hairline are components.
   ========================================================= */

/* ---------------------------------------------------------
   Hero

   Centred and short. The page's argument is the six screens
   below it, so the hero's whole job is to say what they are
   and get out of the way.
   --------------------------------------------------------- */
.tour-hero {
  position: relative;
  padding-block: var(--space-16) var(--space-12);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.tour-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(100% 70% at 50% -10%, var(--hero-wash-brand) 0%, transparent 60%),
    linear-gradient(180deg, var(--hero-wash-top) 0%, transparent 70%);
  pointer-events: none;
}

.tour-hero__inner { max-width: 46rem; }

.tour-hero__title {
  margin: var(--space-5) 0 var(--space-4);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.tour-hero__lead {
  margin: 0 auto var(--space-8);
  max-width: 44ch;
  color: var(--color-text-secondary);
}

.tour-hero__actions {
  display: grid;
  gap: var(--space-3);
}


/* ---------------------------------------------------------
   The stops

   The rail is a single line down the reading edge with the six
   numbers sitting on it. It is drawn on the list rather than
   per item so it cannot break between stops, and it stops
   short of the last number instead of running off the end.
   --------------------------------------------------------- */
.stops {
  position: relative;
  display: grid;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stop {
  position: relative;
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.stop__copy { min-inline-size: 0; }

/* The number is the through-line. On a phone it sits above the
   title; from 900px it moves onto the rail in the margin, which
   is what turns six blocks into one journey. */
.stop__num {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-block-end: var(--space-4);
  border: 1px solid var(--color-line-gold);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-gold-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.stop__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h2);
  text-wrap: balance;
}

.stop__lead {
  margin: 0;
  max-width: 46ch;
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

/* The clock, in the same brass the home page's steps use, so the
   two pages are accounting for the same five minutes. */
.stop__time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-gold-text);
}
.stop__time::before {
  content: "";
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  background-color: var(--color-gold-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 4.6V8l2.4 1.6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 4.6V8l2.4 1.6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}


/* ---------------------------------------------------------
   The frame

   These screenshots are light, and so is the page. A pale
   rectangle on a pale ground reads as a hole unless something
   gives it an edge — so the frame carries a real border, a real
   shadow, and a chrome bar above it. That is also what tells the
   reader they are looking at a screen and not at an illustration.
   --------------------------------------------------------- */
.stop__frame {
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}

.stop__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-line);
  background: var(--color-surface-raised);
}
.stop__chrome i {
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-line-strong);
}

.stop__frame img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}


@media (min-width: 900px) {
  .tour-hero { padding-block: var(--space-24) var(--space-16); }
  .tour-hero__title { font-size: var(--fs-h1); }
  .tour-hero__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* The rail. It runs the height of the list, behind the numbers,
     and is inset by half the number's width so the two share a
     centre line. */
  .stops::before {
    content: "";
    position: absolute;
    inset-block: 1.4rem;
    inset-inline-start: 1.37rem;
    inline-size: 1px;
    background: linear-gradient(
      180deg,
      transparent,
      var(--color-line-gold) 8%,
      var(--color-line-gold) 92%,
      transparent
    );
  }

  .stop {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--space-12);
    padding-inline-start: var(--space-16);
  }

  /* Odd stops put the screen on the far side, so the eye crosses
     the rail on every step instead of running down one gutter. */
  .stop:nth-child(even) .stop__copy { order: 2; }
  .stop:nth-child(even) .stop__frame { order: 1; }

  /* Pinned to the stop, not to the copy.

     The copy changes column on every even stop so the eye crosses the
     rail as it descends. The number must not travel with it: anchored
     to .stop__copy it left the rail on stops two, four and six and
     landed in the middle of the row, which broke the one line holding
     the six together. */
  .stop__num {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    margin-block-end: 0;
  }
}


/* Motion is not part of this page. The reveal the shell adds to
   [data-reveal] is deliberately not used here: six screens that
   each fade in as they arrive turn a walkthrough into a slideshow,
   and the reader is meant to be able to scroll back up. */