/* visit.css: the Summit's visit and programme pages as an itinerary.

   Loaded after doc.css and summit-pages.css on eleven pages: the five "Your
   visit" pages, Speakers, and the five programme pages. Everything here rides
   on the document tokens (--paper, --ink, --line, --gold-deep, --gut, --wrap),
   so the dark theme is answered by the same flip theme.css already makes.
   Nothing is a literal that the flip would miss.

   The page has four parts, in this order:

     .arrive   the arrival. A frame from one of the two journeys, with the
               page's name set between the photograph and the paper. Three
               planes, driven from scroll by js/visit.js: the photograph lags
               most, the title less, the paper not at all, so the sheet rises
               over the name the way a foreground layer does in a layered
               parallax. Under reduced motion nothing translates and the sheet
               simply scrolls over a still picture.
     .route    the route strip. Sticky under the site bar. Every stop on the
               page, the one you are at ringed, the ones behind you filled and
               their line travelled. It is the answer to "hard to follow".
     .stop     one topic each, opened by a rule that wipes in from the left
               with the stop's marker at its head. On a wide screen the name
               stays put beside the copy while the copy scrolls.
     .onward   the hand-over to the next page on the larger route (onward.css).

   House rule: no em dashes anywhere. */

:root {
  /* Measured by js/visit.js. These are the values before it runs. */
  --visit-bar: 4.125rem;
  --visit-chrome: 6.9rem;
  --visit-h: clamp(24rem, 72vh, 46rem);
  --visit-h: clamp(24rem, 72svh, 46rem);
}
@media (max-width: 40rem) {
  :root {
    --visit-h: clamp(19rem, 58vh, 30rem);
    --visit-h: clamp(19rem, 58svh, 30rem);
  }
}

/* The document's own top padding is air for a title under the bar. The title
   is in the arrival now, and the rail's script sets its own offset, so the
   padding goes and the gutter moves onto the wrappers. */
.doc--visit { padding: 0; }
.doc--visit > .qn { padding-inline: var(--gut); margin-bottom: 0; }
/* Off the Summit pages there is no quick-links rail to clear the fixed bar,
   so the arrival clears it itself. */
.doc--visit > .arrive:first-child { margin-top: var(--visit-bar); }
/* A long page name takes the smaller display size and a wider measure. */
.arrive h1.display--lg { max-width: 20ch; }
/* The name of a person is a link (to their LinkedIn, which Elegast asked for). */
.stop__h a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--go-line); }
.stop__h a:hover { border-bottom-color: currentColor; }
/* The one line under a stop's name that is a quotation rather than a brief. */
.stop__k--quote { font-style: italic; border-left: 2px solid var(--gold-deep); padding-left: 1rem; color: var(--ink); }
.doc--visit .wrap { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--gut); }

/* ─────────────────────────────────────────────────────────── the arrival */

.arrive {
  position: relative; z-index: 0;
  height: var(--visit-h);
  overflow: clip;
  /* A photograph on the page, the same in both themes, with the name set in
     bone straight on it. No band and no halo, on Edgar's word of 10 September
     after three tries: a film band read as a black slab on paper, a paper
     band fogged the picture, a paper halo was a shape behind the words. What
     keeps the words readable is a shadow on the letters themselves, below,
     which the standard measures as the colour next to the glyph. */
  background: var(--film); color: var(--bone);
}
.arrive__world { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.arrive__shot {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
/* The scrim stays in the markup and paints nothing. */
.arrive__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: none; }
.arrive__title {
  position: absolute; left: 0; right: 0; z-index: 2;
  bottom: clamp(2.4rem, 9vh, 4.6rem);
  will-change: transform;
}
.arrive__title .wrap { display: grid; gap: .55rem; }
/* The shadow: a close dark edge and two wider, fainter glows, so a letter
   over bright sky or a lit floor still has film next to it. Measured with
   the type transparent on every page, both widths; see the section note. */
.arrive__back, .arrive__eyebrow, .arrive h1, .arrive__lede, .arrive__when {
  text-shadow:
    0 0 1px rgba(13,11,8,.9),
    0 1px 2px rgba(13,11,8,.78),
    0 1px 3px rgba(13,11,8,.6),
    0 2px 12px rgba(13,11,8,.5),
    0 0 30px rgba(13,11,8,.45);
}
/* The small lines are the ones that reach highest into the frame, over sky
   and haze, and their strokes are thin: a tighter, denser shadow for them. */
.arrive__back, .arrive__eyebrow, .arrive__when {
  text-shadow:
    0 0 1px rgba(13,11,8,.95),
    0 0 2px rgba(13,11,8,.9),
    0 0 3px rgba(13,11,8,.85),
    0 1px 2px rgba(13,11,8,.85),
    0 2px 4px rgba(13,11,8,.7),
    0 1px 8px rgba(13,11,8,.6),
    0 0 16px rgba(13,11,8,.5);
}
.arrive__back {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
  color: var(--bone); text-decoration: none; justify-self: start;
}
.arrive__back::before { content: "\2190"; }
.arrive__back:hover { color: var(--gold-hi); text-decoration: underline; text-underline-offset: .3em; }
.arrive__eyebrow {
  font-size: .74rem; letter-spacing: .19em; text-transform: uppercase;
  font-weight: 600; color: var(--gold-hi);
}
.arrive h1 { color: var(--bone); max-width: 14ch; }
.arrive__lede {
  font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem);
  line-height: 1.4; color: var(--bone); max-width: 34rem; text-wrap: pretty;
  margin-top: .2rem;
}
.arrive__when {
  font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
  color: var(--bone);
}
/* The credit sits on the picture, bottom right, with the small lines'
   shadow and nothing else behind it (Edgar, 10 September: the gradient goes,
   the credit stays). */
.arrive__credit {
  position: absolute; right: var(--gut); bottom: .85rem; z-index: 2; margin: 0;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--bone); will-change: transform;
  /* Eleven pixels of type over the brightest corner of some frames (the lit
     podium on Speakers). A soft glow is not enough at that size, so this is
     a hard ring: eight hairline offsets that draw a dark edge round every
     glyph, then the glow. The edge is what the standard measures against. */
  text-shadow:
    1px 0 0 rgba(13,11,8,.9), -1px 0 0 rgba(13,11,8,.9), 0 1px 0 rgba(13,11,8,.9), 0 -1px 0 rgba(13,11,8,.9),
    1px 1px 0 rgba(13,11,8,.9), -1px -1px 0 rgba(13,11,8,.9), 1px -1px 0 rgba(13,11,8,.9), -1px 1px 0 rgba(13,11,8,.9),
    2px 0 1px rgba(13,11,8,.85), -2px 0 1px rgba(13,11,8,.85), 0 2px 1px rgba(13,11,8,.85), 0 -2px 1px rgba(13,11,8,.85),
    0 0 6px rgba(13,11,8,.8),
    0 0 14px rgba(13,11,8,.6);
}
@media (max-width: 40rem) {
  .arrive__shot { object-position: var(--focus-mobile, var(--focus, 50% 50%)); }
  .arrive__title { bottom: clamp(2.2rem, 8vh, 3.4rem); }
  .arrive h1 { font-size: clamp(2.1rem, 1.3rem + 4.2vw, 3rem); }
  .arrive__lede { font-size: 1.08rem; }
  .arrive__credit { display: none; }
}

/* The three planes. --dy is the distance the arrival has scrolled, in px,
   written by js/visit.js and clamped to the arrival's own height. Each plane
   moves DOWN by a share of it, which is the same as moving up more slowly
   than the page: the photograph keeps 40% of the scroll, the name 60%, the
   credit 75%, and the sheet that follows keeps all of it and so overtakes
   the name before the arrival has gone. The photograph never shows a gap,
   because the part of the frame the lag would expose is already above the
   window. */
@media (prefers-reduced-motion: no-preference) {
  .arrive__world  { transform: translate3d(0, calc(var(--dy, 0px) * .6),  0); }
  .arrive__title  { transform: translate3d(0, calc(var(--dy, 0px) * .4),  0); }
  .arrive__credit { transform: translate3d(0, calc(var(--dy, 0px) * .25), 0); }
}

/* ────────────────────────────────────────────────────────────── the sheet */

.sheet {
  position: relative; z-index: 2;
  background: var(--paper); color: var(--ink);
  /* the paper's edge, lit, over the photograph */
  box-shadow: 0 -1px 0 rgba(246,238,225,.28), 0 -14px 34px -14px rgba(13,11,8,.55);
}

/* ─────────────────────────────────────────────────────────── the route */

.route {
  position: sticky; top: var(--visit-bar); z-index: 5;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.route__list {
  list-style: none; margin: 0; padding: .35rem 0;
  display: flex; align-items: center;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* room for the ring on the current stop, which the scroll box would clip */
  padding-block: .4rem;
}
.route__list::-webkit-scrollbar { display: none; }
.route__list li {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; scroll-snap-align: start;
}
/* the stop marker */
.route__list li::before {
  content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%;
  border: 1px solid var(--gold-deep); background: transparent;
  transition: background .25s var(--sc-ease-out), box-shadow .25s var(--sc-ease-out);
}
/* the line to the next stop */
.route__list li::after {
  content: ""; flex: none; width: clamp(.9rem, 2vw, 1.8rem); height: 1px;
  background: var(--line); transition: background .25s var(--sc-ease-out);
}
.route__list li:last-child::after { display: none; }
.route__list a {
  display: inline-block; padding: .7rem .55rem .7rem .45rem;
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  transition: color .18s ease;
}
.route__list a:hover { color: var(--gold-deep); }
.route__list a:focus-visible { outline-offset: -2px; border-radius: .2rem; }
.route__list li[data-state="past"]::before,
.route__list li[data-state="past"]::after { background: var(--gold-deep); }
.route__list li[data-state="here"]::before {
  background: var(--gold-deep);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold-deep);
}
.route__list li[data-state="here"] a { color: var(--ink); }
/* The last stop is the hand-over; it is on the route but it is not a topic. */
.route__list li.route__on a { color: var(--gold-deep); }

/* Wide: the whole route fits, centred, no scrolling. */
@media (min-width: 64rem) {
  .route__list { justify-content: center; }
}
/* Narrow: the row scrolls sideways and the current stop is brought into view
   by the script. The fades tell a thumb there is more either side. */
@media (max-width: 63.99rem) {
  .route__list {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.2rem, #000 calc(100% - 1.2rem), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 1.2rem, #000 calc(100% - 1.2rem), transparent 100%);
  }
  .route__list::before, .route__list::after { content: ""; flex: none; width: .6rem; }
  .route__list a { padding-block: .8rem; }
}

/* ─────────────────────────────────────────────────────────────── stops */

.stop {
  position: relative;
  scroll-margin-top: calc(var(--visit-chrome) + .2rem);
  padding-top: clamp(2.4rem, 6vh, 4rem);
  padding-bottom: clamp(2.6rem, 7vh, 4.6rem);
}
.stop__in { display: grid; gap: clamp(1.4rem, 3.5vh, 2.2rem); }

/* The rule that opens a stop: a hairline that wipes in from the left, with
   the stop's marker, the same disc the route uses, standing at its head. */
.stop__rule { position: relative; display: block; height: 1px; }
.stop__rule::after {
  content: ""; position: absolute; inset: 0; background: var(--line);
  transform-origin: left center; transform: scaleX(0);
  transition: transform .9s var(--sc-ease-out) .05s;
}
.stop__rule::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: .55rem; height: .55rem; margin-top: -.275rem; border-radius: 50%;
  background: var(--gold-deep); z-index: 1;
}
.stop__in.sc-in .stop__rule::after { transform: none; }

.stop__grid { display: grid; gap: clamp(1.2rem, 3vh, 1.8rem); }
.stop__open { display: grid; gap: .7rem; align-content: start; }
.stop__h {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.012em;
  font-size: clamp(1.9rem, 1.35rem + 2vw, 3rem); line-height: 1.1;
  max-width: 18ch; text-wrap: balance; margin: 0;
}
.stop__k {
  font-family: var(--serif); font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem);
  line-height: 1.45; color: var(--ink-soft); max-width: 30rem; text-wrap: pretty;
}
.stop__when {
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
  color: var(--gold-deep);
}
/* The body is the document's own body, so every existing component keeps
   its styling. Its page-level width and padding are reset, because the stop
   is the page now. */
/* margin-inline: 0 as well as width: auto. doc.css centres the body with auto
   margins, and inside a grid column auto margins shrink the item to its
   content instead of stretching it: the confirmed list on the Committee page,
   which declares inline-size containment, collapsed to 56px that way. */
.stop .doc__body { width: auto; margin-inline: 0; padding-block: 0; }
.stop .doc__body > h3:first-child { margin-top: 0; }
.stop .doc__body > .lede:first-child { margin-top: .1rem; }

@media (min-width: 64rem) {
  .stop__grid {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
  }
  /* The name stays beside the copy for the length of the stop. */
  .stop__open { position: sticky; top: calc(var(--visit-chrome) + 1.6rem); }
}

/* Rows: a list of named things with one line each and a way on. Used where
   the old page had a grid of identical cards. */
.rows { list-style: none; margin: .2rem 0 0; padding: 0; max-width: none; }
.rows li { display: grid; gap: .3rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows__name { font-family: var(--serif); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); line-height: 1.2; margin: 0; font-weight: 400; }
.rows__say { color: var(--ink-soft); max-width: 40rem; font-size: .98rem; }
.rows__go { justify-self: start; }
@media (min-width: 52rem) {
  .rows li { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; gap: 1.4rem; align-items: baseline; }
}

/* ────────────────────────────────────────────── the composer (Travel) */

.way { display: grid; gap: 1.1rem; max-width: none; border: 0; margin: 0; padding: 0; min-width: 0; }
/* `display: grid` outranks the hidden attribute's own rule, so restate it:
   without JavaScript the composer must stay hidden. */
.way[hidden] { display: none; }
.way__legend {
  padding: 0; margin: 0 0 .2rem;
  font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height: 1.3; color: var(--ink);
}
/* A native select: one line where eighteen chips were a wall, and on a phone
   it opens the phone's own picker. The label above it is the question; the
   theme's color-scheme makes the native list follow the ground. */
.way__legend { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; }
.way__select { position: relative; display: inline-block; max-width: 100%; justify-self: start; }
.way__select select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.3;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: .45rem;
  padding: .8rem 2.9rem .8rem 1.05rem; width: min(100%, 24rem); min-width: 16rem;
  cursor: pointer; text-overflow: ellipsis;
  transition: border-color .16s ease;
}
.way__select::after {
  content: ""; position: absolute; right: 1.1rem; top: 50%; pointer-events: none;
  width: .55rem; height: .55rem; margin-top: -.42rem;
  border-right: 1px solid var(--gold-deep); border-bottom: 1px solid var(--gold-deep);
  transform: rotate(45deg);
}
.way__select select:hover { border-color: var(--gold-deep); }
.way__select select:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.way__out { display: grid; gap: .9rem; margin-top: .4rem; }
.way__for {
  font-size: .74rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 600;
  color: var(--gold-deep); margin: 0;
}
.way__legs { list-style: none; margin: 0; padding: 0; position: relative; }
.way__leg {
  position: relative; padding: .2rem 0 1.25rem 1.9rem;
  display: grid; gap: .25rem;
}
/* the thread down the legs, and a marker per leg */
.way__leg::before {
  content: ""; position: absolute; left: .22rem; top: .95rem; bottom: -.2rem; width: 1px;
  background: var(--line);
}
.way__leg:last-child::before { display: none; }
.way__leg::after {
  content: ""; position: absolute; left: 0; top: .5rem;
  width: .5rem; height: .5rem; border-radius: 50%;
  border: 1px solid var(--gold-deep); background: var(--paper);
}
.way__leg--end::after { background: var(--gold-deep); }
.way__mode {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: var(--gold-deep);
}
.way__say { font-family: var(--serif); font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.4; max-width: 38rem; text-wrap: pretty; }
.way__go { justify-self: start; margin-top: .1rem; }
.way__note { font-size: .9rem; color: var(--ink-soft); max-width: var(--read); }
.way__empty { font-family: var(--serif); font-size: 1.1rem; color: var(--ink-soft); }

@media (prefers-reduced-motion: no-preference) {
  .way__leg { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--sc-ease-out), transform .45s var(--sc-ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .way__legs.is-set .way__leg { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .way__leg { opacity: 1; transform: none; }
}

/* The hand-over card (.onward) moved to onward.css on 10 September 2026,
   so the five studies can carry it too. */

/* ─────────────────────────────────────────────────── reduced motion */

@media (prefers-reduced-motion: reduce) {
  .stop__rule::after { transform: none; transition: none; }
  .route__list li::before, .route__list li::after { transition: none; }
  .way__from label { transition: none; }
}