/* IRSI · the hand-over card, "Next stop", and the two links under it.
   Every page that is a stop on a route ends with one: the twenty itinerary
   pages since 9 September, and since 10 September the five ScrollCraft
   studies (Summit, Programme, Awards, About, Partners) on Edgar's "add the
   next stop feature to each page". The studies do not load theme.css, so
   this file carries its own tokens, the way bar.css and confirmed.css do,
   and every rule here reads only those. Moved out of visit.css that day.
   House rule: no em dashes anywhere. */

:root {
  --irsion-paper:     #faf6ee;
  --irsion-paper-2:   #f2ebde;
  --irsion-paper-3:   #ebe2d1;
  --irsion-ink:       #1b1712;
  --irsion-ink-soft:  #574f42;
  --irsion-line:      #ded3c1;
  --irsion-gold-deep: #7d5f1f;
  --irsion-go-line:   rgba(138,106,36,.42);
  --irsion-serif:     Georgia, "Noto Serif", "Droid Serif", "Times New Roman", serif;
  --irsion-sans:      "Public Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --irsion-wrap:      74rem;
  --irsion-gut:       clamp(1.25rem, 4vw, 3.5rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --irsion-paper:     #0d0b08;
    --irsion-paper-2:   #17130e;
    --irsion-paper-3:   #1f1912;
    --irsion-ink:       #f6eee1;
    --irsion-ink-soft:  #d6cbb8;
    --irsion-line:      #3a3226;
    --irsion-gold-deep: #dcbc71;
    --irsion-go-line:   rgba(220,188,113,.42);
  }
}
:root[data-theme="dark"] {
  --irsion-paper:     #0d0b08;
  --irsion-paper-2:   #17130e;
  --irsion-paper-3:   #1f1912;
  --irsion-ink:       #f6eee1;
  --irsion-ink-soft:  #d6cbb8;
  --irsion-line:      #3a3226;
  --irsion-gold-deep: #dcbc71;
  --irsion-go-line:   rgba(220,188,113,.42);
}

.onward {
  background: var(--irsion-paper-2); border-top: 1px solid var(--irsion-line);
  padding-block: clamp(3rem, 8vh, 5.5rem);
  scroll-margin-top: calc(var(--visit-chrome, 6.9rem) + .2rem);
  color: var(--irsion-ink); font-family: var(--irsion-sans);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.62;
}
.onward__wrap {
  width: min(100%, var(--irsion-wrap)); margin-inline: auto; padding-inline: var(--irsion-gut);
  display: grid; gap: 1.6rem;
}
.onward__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2rem); align-items: center;
  max-width: 46rem; padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--irsion-line); border-radius: .5rem; background: var(--irsion-paper);
  color: inherit; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px -10px rgba(60,48,30,.25);
  transition: border-color .18s ease, transform .18s ease;
}
.onward__card:hover { border-color: var(--irsion-gold-deep); transform: translateY(-1px); }
.onward__card:active { transform: none; }
/* width AND height: the img carries width="1920" height="1080" as hints, and
   overriding one leaves the other resolving to its attribute, which put a
   1080px tall picture in a 150px wide card. */
.onward__shot {
  width: clamp(6.5rem, 14vw, 9.5rem); height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: .3rem; background: var(--irsion-paper-3); display: block;
}
.onward__say { display: grid; gap: .25rem; min-width: 0; }
.onward__k { font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 600; color: var(--irsion-gold-deep); }
.onward__h { font-family: var(--irsion-serif); font-weight: 400; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.15; }
.onward__p { color: var(--irsion-ink-soft); font-size: .95rem; max-width: 30rem; text-wrap: pretty; }
.onward__go {
  position: relative; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--irsion-gold-deep); flex: none;
}
.onward__go::after {
  content: "\2192"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--irsion-gold-deep); font-size: 1.1rem; font-weight: 600;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.onward__card:hover .onward__go::after { transform: translateX(3px); }
.onward__else { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0; }
/* The two links, styled here rather than through theme.css's .go so the
   studies get the same link without that file. */
.onward__else a {
  font-family: var(--irsion-sans); font-weight: 600; font-size: .95rem;
  color: var(--irsion-gold-deep); text-decoration: none;
  border-bottom: 1px solid var(--irsion-go-line); padding-bottom: .15em;
  transition: border-color .18s ease, color .18s ease;
}
.onward__else a::after { content: " \2192"; }
.onward__else a:hover { border-color: currentColor; }
.onward .progs-nav { margin-top: .4rem; }
@media (max-width: 40rem) {
  .onward__card { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .onward__shot { width: 100%; aspect-ratio: 16 / 9; }
  .onward__go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .onward__card, .onward__go::after, .onward__else a { transition: none; }
  .onward__card:hover { transform: none; }
  .onward__card:hover .onward__go::after { transform: none; }
}