/* "The crossing": three destinations along one suspension bridge.
   Base layout is a calm stacked list (no JS, mobile, reduced motion);
   .is-pinned (desktop + motion, set by intro.js) turns it into a pinned scroll scene. */
.crossing{
  --crossing-ink:var(--forest); --crossing-muted:color-mix(in srgb,var(--forest) 68%,var(--ivory));
  --crossing-brass:color-mix(in srgb,var(--brass) 82%,var(--forest)); --crossing-line:color-mix(in srgb,var(--forest) 14%,transparent);
  --crossing-card:color-mix(in srgb,var(--ivory) 40%,white);
  --crossing-arch-gap:.75rem; --crossing-arch-foot:1.25rem;
  --crossing-title:clamp(1.75rem,2.6vw,2.625rem); --crossing-story-title:clamp(1.5rem,2.1vw,2.25rem);
  --crossing-counter:clamp(4.5rem,8vw,8.5rem);
  position:relative;isolation:isolate;overflow:clip;color:var(--crossing-ink);
  border-start-start-radius:var(--surface-radius);border-start-end-radius:var(--surface-radius);
  padding-block:clamp(5rem,8vw,7rem) clamp(4rem,6vw,6rem)
}
.crossing .intro-ornament{position:absolute;z-index:-1;pointer-events:none;inline-size:var(--journey-ornament-width);inset-inline-end:var(--journey-ornament-edge);inset-block-start:var(--journey-ornament-top);color:var(--journey-ornament-ink);transform:rotate(var(--journey-ornament-turn));opacity:.8}
.crossing .intro-ornament svg{display:block;inline-size:100%;block-size:auto;stroke:currentColor;stroke-width:var(--journey-ornament-stroke)}
.crossing .intro-ornament-accent{stroke:var(--journey-ornament-accent)}
.crossing-pin{position:relative}

/* Heading: small, editorial. */
.crossing-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);align-items:end;column-gap:clamp(2rem,6vw,6rem);row-gap:var(--s2)}
.crossing-eyebrow{grid-column:1/-1;display:flex;align-items:center;gap:.875rem;margin:0;color:var(--crossing-brass);font-size:.8125rem;font-weight:600;letter-spacing:.06em}
.crossing-eyebrow-index{font-family:var(--font-body-en);font-weight:500;letter-spacing:.12em}
.crossing-eyebrow-rule{display:block;inline-size:2.5rem;block-size:1px;background:currentColor;opacity:.7}
.crossing-head h2{margin:0;font:500 var(--crossing-title)/1.35 var(--font-heading);letter-spacing:-.005em;text-wrap:balance}
.crossing-line{display:inline-block;overflow:clip;padding-block:.08em;vertical-align:top}.crossing-line>span{display:inline-block}
.crossing-lead{margin:0;color:var(--crossing-muted);font-size:var(--body);line-height:1.85;text-wrap:pretty}

/* Destinations, stacked. */
.crossing-stage{margin-block-start:clamp(2.5rem,5vw,4rem)}
.crossing-counter{display:none}
.crossing-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.25rem,3vw,2rem)}
.crossing-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);padding:clamp(1rem,2.5vw,2rem);border:1px solid var(--crossing-line);border-radius:calc(var(--surface-radius) * .75);background:var(--crossing-card);transform-origin:50% 0}
.crossing-story{min-inline-size:0;max-inline-size:32rem;padding-inline:clamp(0rem,1.5vw,1rem)}
.crossing-label{display:flex;align-items:baseline;gap:.625rem;margin:0 0 var(--s2);color:var(--crossing-brass);font-size:.8125rem;font-weight:600;letter-spacing:.04em}
.crossing-label bdi{font-family:var(--font-body-en);font-weight:500;letter-spacing:.12em}
.crossing-story h3{margin:0;font:500 var(--crossing-story-title)/1.45 var(--font-heading);text-wrap:balance}
.crossing-copy{margin:var(--s2) 0 0;color:var(--crossing-muted);line-height:1.9;text-wrap:pretty}
.crossing-action{margin-block-start:var(--s4);--button-ink:var(--forest);--button-line:var(--meaning-button-line);--button-ground:var(--meaning-button-ground)}

/* The arch: a Najdi window, revealed from its foot. */
.crossing-arch{position:relative;margin:var(--crossing-arch-gap);inline-size:calc(100% - var(--crossing-arch-gap) * 2);aspect-ratio:4/4.4;container-type:inline-size;justify-self:center}
.crossing-arch-outline{position:absolute;inset:calc(var(--crossing-arch-gap) * -1);border:1px solid color-mix(in srgb,var(--brass) 55%,transparent);border-radius:calc(50cqi + var(--crossing-arch-gap)) calc(50cqi + var(--crossing-arch-gap)) calc(var(--crossing-arch-foot) + var(--crossing-arch-gap)) calc(var(--crossing-arch-foot) + var(--crossing-arch-gap));pointer-events:none}
.crossing-arch-mask{position:absolute;inset:0;overflow:hidden;border-radius:50cqi 50cqi var(--crossing-arch-foot) var(--crossing-arch-foot);background:var(--pale)}
.crossing-arch-mask::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--forest) 22%,transparent));pointer-events:none}
.crossing-arch picture,.crossing-arch img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.crossing-arch img{transform-origin:50% 60%}

/* Rail: only meaningful in the pinned scene. */
.crossing-rail[hidden]{display:none}
.crossing-bridge{position:relative;block-size:clamp(4.5rem,10svh,6.5rem)}
.crossing-bridge svg{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
:root[dir=rtl] .crossing-bridge svg{transform:scaleX(-1)}
.crossing-bridge path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.crossing-deck{stroke:var(--crossing-line);stroke-width:1}
.crossing-hanger{stroke:color-mix(in srgb,var(--forest) 12%,transparent);stroke-width:1;transition:stroke .5s var(--ease)}
.crossing-hanger.is-lit{stroke:color-mix(in srgb,var(--brass) 70%,transparent)}
.crossing-cable{stroke:color-mix(in srgb,var(--forest) 18%,transparent);stroke-width:1}
.crossing-cable--live{stroke:var(--brass);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.crossing-station{position:absolute;inset-inline-start:var(--x);inset-block-start:var(--y);inline-size:8rem;margin-inline-start:-4rem;margin-block-start:-.5rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:0;border:0;background:none;color:var(--crossing-muted);font:inherit;font-size:.875rem;cursor:pointer}
.crossing-station-dot{position:relative;inline-size:1rem;block-size:1rem;border-radius:50%;border:1px solid color-mix(in srgb,var(--forest) 35%,transparent);background:var(--ivory);transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.crossing-station-dot::after{content:'';position:absolute;inset:-.4375rem;border-radius:50%;border:1px solid var(--brass);opacity:0;transform:scale(.6);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.crossing-station-label{padding:.125rem .625rem;border-radius:var(--pill);transition:color .4s var(--ease),background .4s var(--ease)}
.crossing-station:hover .crossing-station-dot{transform:scale(1.15)}
.crossing-station.is-passed .crossing-station-dot{background:var(--brass);border-color:var(--brass)}
.crossing-station[aria-current=step]{color:var(--forest);font-weight:600}
.crossing-station[aria-current=step] .crossing-station-dot{background:var(--forest);border-color:var(--forest)}
.crossing-station[aria-current=step] .crossing-station-dot::after{opacity:1;transform:scale(1)}
.crossing-station[aria-current=step] .crossing-station-label{background:color-mix(in srgb,var(--sage) 30%,transparent)}

/* ---------- Pinned scene (desktop, motion allowed) ---------- */
.crossing.is-pinned{padding-block:0}
.crossing.is-pinned .crossing-pin{block-size:100svh;min-block-size:40rem;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-block:calc(var(--header-height) + clamp(1.5rem,4svh,3rem)) clamp(1rem,3svh,2rem)}
.crossing.is-pinned .crossing-track{display:contents}
.crossing.is-pinned .section-frame{inline-size:100%}
.crossing.is-pinned .crossing-stage{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(2rem,5vw,5rem);margin-block-start:clamp(1.5rem,4svh,3rem);min-block-size:0}
.crossing.is-pinned .crossing-counter{display:flex;flex-direction:column;align-self:center;gap:.5rem;font-family:var(--font-body-en);direction:ltr;color:var(--forest)}
.crossing-counter-window{display:block;block-size:1em;overflow:hidden;font-size:var(--crossing-counter);font-weight:200;line-height:1;letter-spacing:-.04em}
.crossing-counter-reel{display:flex;flex-direction:column}.crossing-counter-reel>span{display:block;block-size:1em}
.crossing-counter-total{font-size:.875rem;font-weight:500;letter-spacing:.2em;color:var(--crossing-brass);padding-inline-start:.5rem}
.crossing.is-pinned .crossing-list{display:grid;gap:0;min-block-size:0}
.crossing.is-pinned .crossing-item{grid-area:1/1;position:relative;inset:auto;padding:0;border:0;border-radius:0;background:none;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,5vw,5rem);min-block-size:0}
.crossing.is-pinned .crossing-item:nth-child(1){z-index:1}.crossing.is-pinned .crossing-item:nth-child(2){z-index:2}.crossing.is-pinned .crossing-item:nth-child(3){z-index:3}
.crossing.is-pinned .crossing-story{align-self:center;justify-self:center;inline-size:min(100%,32rem)}
.crossing.is-pinned .crossing-arch{inline-size:min(34vw,calc((100svh - var(--header-height) - 21rem) * .82),30rem);aspect-ratio:4/4.9;margin:var(--crossing-arch-gap)}
.crossing.is-pinned .crossing-item:not(:first-child) .crossing-arch-outline{display:none}
.crossing.is-pinned .crossing-rail{margin-block-start:clamp(.5rem,2svh,1.5rem)}

@media (max-width:64rem){
  .crossing-head{grid-template-columns:minmax(0,1fr)}
  .crossing-item{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .crossing-arch{grid-row:1;aspect-ratio:5/4}
  .crossing-story{padding:0 .25rem .5rem}
  .crossing .intro-ornament{inline-size:var(--journey-mobile-ornament-width);inset-inline-end:var(--journey-mobile-ornament-edge);inset-block-start:var(--journey-mobile-ornament-top)}
}
@media (max-width:48rem){
  .crossing-item{border-radius:1.5rem}
  .crossing-arch{--crossing-arch-gap:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .crossing-item{position:relative;inset-block-start:auto!important}
  .crossing-station-dot,.crossing-station-dot::after,.crossing-hanger{transition:none}
}

/* ---------- Single-card scene (smaller screens, motion allowed) ---------- */
.crossing.is-carousel .crossing-track{display:flex;flex-direction:column;background:var(--ivory)}
.crossing.is-carousel .crossing-track>.section-frame{inline-size:100%}
.crossing.is-carousel .crossing-rail{order:1;padding-block-start:var(--s3)}
.crossing.is-carousel .crossing-stage{order:2;margin-block-start:var(--s3)}
.crossing.is-carousel .crossing-list{display:grid;gap:0;touch-action:pan-y}
.crossing.is-carousel .crossing-item{grid-area:1/1;gap:var(--s2)}
.crossing.is-carousel .crossing-arch{aspect-ratio:auto;block-size:clamp(9rem,27svh,15rem)}
.crossing.is-carousel .crossing-story h3{font-size:1.375rem}
.crossing.is-carousel .crossing-copy{margin-block-start:.5rem;font-size:.9375rem;line-height:1.8}
.crossing.is-carousel .crossing-action{margin-block-start:var(--s2)}
.crossing.is-carousel .crossing-label{margin-block-end:.5rem}
.crossing.is-carousel .crossing-bridge{block-size:3.75rem}
.crossing.is-carousel .crossing-station{inline-size:6rem;margin-inline-start:-3rem;font-size:.8125rem}