/* Map my impact: one journey along the thread, on the canvas. The thread across the top is the
   progress line, two photographs travel from step to step, and the words are kept to a heading,
   a line and the figures. */

.page-journey { background: var(--canvas); }
.journey { position: relative; padding: calc(var(--header-h) + clamp(28px, 5vh, 56px)) 0 clamp(64px, 8vw, 112px); min-height: 100svh; overflow: clip; }
/* one soft breath of mist behind the stage, nothing behind the words */
.journey::before { content: ""; position: absolute; z-index: 0; right: -12vw; top: 18vh; width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; border-radius: 50%; background: radial-gradient(closest-side, var(--mist), transparent 72%); pointer-events: none; }
.journey > .wrap { position: relative; z-index: 1; }
.journey-head { display: grid; gap: 14px; }
.journey-head h1 { font-size: var(--t-64); color: var(--forest); max-width: 14ch; }
.journey-head h1 em { color: var(--moss); font-style: italic; }

/* ---------- The thread of steps ---------- */
.jt { position: relative; margin: clamp(28px, 4vw, 44px) 0 clamp(36px, 5vw, 64px); }
.jt-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.jt-base { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 5 4.5; stroke-linecap: round; }
.jt-line { fill: none; stroke: var(--leaf); stroke-width: 2; stroke-dasharray: 5 4.5; stroke-linecap: round; animation: jt-march 3.4s linear infinite; }
.jt-reveal { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease); }
@keyframes jt-march { to { stroke-dashoffset: -28.5px; } }
.jt-stations { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.jt-stations li:nth-child(2) { justify-self: center; } .jt-stations li:nth-child(3) { justify-self: center; } .jt-stations li:last-child { justify-self: end; }
.jt-st { display: grid; justify-items: start; gap: 6px; padding: 0; cursor: default; color: var(--stone); text-align: left; }
.jt-stations li:nth-child(2) .jt-st, .jt-stations li:nth-child(3) .jt-st { justify-items: center; text-align: center; }
.jt-stations li:last-child .jt-st { justify-items: end; text-align: right; }
.jt-st:not([disabled]) { cursor: pointer; }
.jt-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--canvas); border: 1.5px solid var(--line-strong); transition: transform .5s var(--ease), background .4s, border-color .4s; margin-bottom: 6px; }
.jt-st b { font: 500 var(--t-14) / 1.2 var(--sans); color: var(--stone); transition: color .3s; }
.jt-st span { display: block; min-height: 1.3em; font-family: var(--display); font-style: italic; font-size: var(--t-18); line-height: 1.2; color: var(--moss); opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
li.is-done .jt-st span:not(:empty), li.is-current .jt-st span:not(:empty) { opacity: 1; transform: none; }
li.is-done .jt-dot { background: var(--leaf); border-color: var(--leaf); }
li.is-current .jt-dot { background: var(--sprout); border-color: var(--leaf); transform: scale(1.45); box-shadow: 0 0 0 5px rgba(169,213,160,.3); }
li.is-current .jt-st b, li.is-done .jt-st b { color: var(--forest); }
.jt-st:not([disabled]):hover b { color: var(--moss); }
.jt-st:focus-visible { outline: 2px solid var(--leaf); outline-offset: 4px; border-radius: 4px; }

/* ---------- Stage ---------- */
.journey-stage { position: relative; }
.stage-thread { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.st-line { fill: none; stroke: var(--leaf); stroke-width: 2; stroke-dasharray: 5 4.5; stroke-linecap: round; animation: jt-march 3.4s linear infinite; }
.st-reveal { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease); }
.st-dot { opacity: 0; transition: opacity .4s var(--ease) .2s; }
.st-dot-a { fill: var(--sprout); stroke: var(--leaf); stroke-width: 1.5; }
.st-dot-b { fill: var(--canvas); stroke: var(--leaf); stroke-width: 2; }
.stage-thread.is-on .st-dot { opacity: 1; }
.stage-km { position: absolute; z-index: 1; transform: translate(-50%, -50%); padding: 6px 12px; border-radius: 4px; background: var(--canvas); color: var(--forest); font-size: var(--t-14); letter-spacing: .04em; white-space: nowrap; opacity: 0; transition: opacity .4s var(--ease) .5s; }
.stage-km.is-on { opacity: 1; }
.stage-km i { font-style: normal; color: var(--stone); margin-left: 4px; }

.step { display: none; position: relative; z-index: 1; }
.step.is-on { display: grid; }
.step-copy { display: grid; gap: 14px; justify-items: start; }
.step.is-on .step-copy { animation: copy-in .55s var(--ease) both; }
@keyframes copy-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.step-copy h2 { font-size: var(--t-48); color: var(--forest); max-width: 16ch; }
.step-copy h2 em { color: var(--moss); font-style: italic; }
.step-copy-centre { justify-items: center; text-align: center; }
.step-copy-centre h2 { max-width: 20ch; }
.step-line { color: var(--stone); font-size: var(--t-18); line-height: 1.5; max-width: 40ch; text-wrap: pretty; }
.step-place { font: 500 var(--t-12) / 1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--moss); }
.facts { color: var(--forest); font-size: var(--t-16); line-height: 1.7; text-wrap: balance; }
.facts > span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--sprout); margin: 0 10px; vertical-align: .18em; }
.step-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 10px; }
.step-actions .btn-primary { padding-inline: 24px; }
.textlink { display: inline-flex; align-items: center; gap: 8px; color: var(--moss); font-size: var(--t-16); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color .3s; }
.textlink:hover { border-color: var(--moss); }
.textlink .arrow { width: 14px; height: 14px; transition: transform .5s var(--ease); }
.textlink:hover .arrow { transform: translateX(3px); }
.step-alt { margin-top: clamp(22px, 3vw, 32px); }

/* ---------- Plates ---------- */
/* The approved photograph card, restated here because this page loads only its own stylesheet. */
.plate { display: block; background: #fff; border: 1.5px solid var(--forest); padding: 9px; box-shadow: 8px 8px 0 rgba(18, 56, 42, .1); color: var(--ink); }
.plate-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.plate-media img { width: 100%; height: 100%; object-fit: cover; }
.plate-caption { display: flex; justify-content: space-between; gap: 14px; font: 500 11px / 1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); padding: 10px 2px 2px; }
.plate-caption b { color: var(--forest); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate-caption .money { font-size: 11px; letter-spacing: .06em; white-space: nowrap; }
.tilt-a { transform: rotate(-1deg); } .tilt-b { transform: rotate(1deg); }
.jplate { transform-origin: top left; will-change: transform; }
.jplate.is-travelling { transition: transform .7s var(--ease), opacity .5s var(--ease); }
.jplate.is-arriving { opacity: 0; }

/* step 1: three cities in a row, rising in one after the other */
.city-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin-top: clamp(28px, 4vw, 44px); }
.city-slot { display: block; padding: 0; text-align: left; opacity: 0; transform: translateY(16px); animation: city-in .7s var(--ease) both; animation-delay: calc(.15s + var(--i) * .08s); transition: transform .5s var(--ease); }
@keyframes city-in { to { opacity: 1; transform: none; } }
.city-slot .plate { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.city-slot.tilt-a .plate { transform: rotate(-1deg); } .city-slot.tilt-b .plate { transform: rotate(1deg); }
.city-slot:hover .plate, .city-slot:focus-visible .plate { box-shadow: 11px 11px 0 rgba(18, 56, 42, .14); }
.city-slot.tilt-a:hover .plate { transform: rotate(-1deg) translateY(-4px); } .city-slot.tilt-b:hover .plate { transform: rotate(1deg) translateY(-4px); }
.city-slot:focus-visible { outline: 2px solid var(--leaf); outline-offset: 6px; }
.city-slot .plate-caption span { color: var(--stone); }
.step[data-step="0"].is-leaving .city-slot { animation: city-out .35s var(--ease) both; }
@keyframes city-out { to { opacity: 0; transform: translateY(-10px); } }

/* step 2: the patch on the left, the words beside it */
.step[data-step="1"] { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(16px, 2vw, 28px); }
.slot { position: relative; }
.slot-urban, .slot-wild { max-width: 440px; }
.pair-row .slot-urban, .pair-row .slot-wild { max-width: 380px; }

/* step 3 and 4: the pair, with the thread drawn between them once they have settled */
.pair-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 220px) minmax(0, 1fr); align-items: center; gap: 0 clamp(16px, 2vw, 28px); margin: clamp(8px, 1.5vw, 16px) 0 clamp(32px, 4vw, 48px); }
.pair-row .slot-urban { justify-self: end; width: 100%; }
.pair-row .slot-wild { justify-self: start; width: 100%; }
.pair-row-small { grid-template-columns: minmax(0, 1fr) minmax(120px, 360px) minmax(0, 1fr); margin-bottom: clamp(20px, 3vw, 32px); }
.pair-row-small .slot-urban, .pair-row-small .slot-wild { max-width: 260px; }
.give-wrap { max-width: 720px; width: 100%; margin: 0 auto; display: grid; gap: 22px; }
.give-wrap .step-copy { margin-bottom: 4px; }
/* the two plates already carry the split, so the gift control's own pair of photographs goes */
.page-journey .gift-split { display: none; }
.give-wrap .step-alt { margin-top: 0; }

@media (max-width: 900px) {
  .journey-head h1 { font-size: var(--t-48); }
  .jt-st b { font-size: 13px; }
  .jt-st span { font-size: 15px; }
  .step[data-step="1"] { grid-template-columns: 1fr; gap: 28px; }
  .step[data-step="1"] .slot-urban { max-width: 360px; }
}
@media (max-width: 640px) {
  .jt-stations li:not(.is-current) .jt-st span { display: none; }
  .jt-st b { font-size: 12px; }
  .city-row { grid-template-columns: 1fr; gap: 28px; max-width: 360px; }
  .pair-row { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 0 8px; }
  .pair-row .slot-urban, .pair-row .slot-wild, .pair-row-small .slot-urban, .pair-row-small .slot-wild { max-width: none; }
  .plate { padding: 6px; box-shadow: 5px 5px 0 rgba(18, 56, 42, .1); }
  .plate-caption { font-size: 9.5px; letter-spacing: .06em; padding-top: 7px; }
  .stage-km { display: none; }
  .plate-caption { flex-direction: column; gap: 3px; }
  .plate-caption b { white-space: normal; }
  .step-copy h2 { font-size: var(--t-36); }
}
@media (prefers-reduced-motion: reduce) {
  .jt-line, .st-line { animation: none; }
  .city-slot { animation: none; opacity: 1; transform: none; }
  .jplate.is-travelling { transition: none; }
}