/* Kaimei AI — scrollytelling option: 891 passengers (css/scrolly/passengers.css)
   A unit chart that regroups: every dot is one row of the Titanic training file. js/scrolly/passengers.js
   adds .is-live (pinned track, one canvas, captions that step) or .is-still (reduced motion, short screens:
   two finished frames and the steps as a list). Without JS the steps simply read as a list. */

.ps { position: relative; }
.ps-head { margin-bottom: clamp(36px, 4.5vw, 56px); }
.ps-head .h2 { max-width: 760px; }

/* Steps: a plain list until JS takes over */
.ps-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 36px 40px; }
.ps-step { min-width: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.ps-num { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ps-num::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--grad); }
.ps-step h3 { margin-top: 12px; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; color: var(--ink); }
.ps-step p:not(.ps-num) { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.ps-step p.ps-method { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.ps-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; font-size: 15px; }
.ps-foot { max-width: 760px; margin-top: clamp(40px, 5vw, 64px); font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.ps-foot code { font-size: 0.92em; color: var(--ink-2); }

.ps-rail, .ps-stage, .ps-stills { display: none; }

/* ---------- Still: reduced motion, short screens ---------- */
.ps.is-still .ps-grid { display: flex; flex-direction: column; gap: 48px; }
.ps.is-still .ps-stills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; order: -1; }
.ps-still { margin: 0; min-width: 0; padding: 20px 20px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); }
.ps-still canvas { display: block; width: 100%; height: clamp(400px, 46vw, 600px); }
.ps-still figcaption { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
@media (max-width: 760px) {
  .ps.is-still .ps-stills { grid-template-columns: minmax(0, 1fr); }
  .ps-still { padding: 14px 14px 10px; }
  .ps-still canvas { height: 520px; }
}

/* ---------- Live: pinned graphic, captions that step ---------- */
.ps.is-live { padding-bottom: clamp(48px, 6vw, 80px); }
.ps.is-live .ps-foot { margin-top: clamp(8px, 2vw, 24px); }
.ps.is-live .ps-track { height: calc(100vh + 7 * 72vh); }
.ps.is-live .ps-pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: 60px; overflow: hidden; }
.ps.is-live .ps-grid {
  height: 100%; display: grid; grid-template-columns: minmax(280px, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(16px, 3.2vh, 40px);
}
.ps.is-live .ps-copy { min-width: 0; }
.ps.is-live .ps-stage { display: block; position: relative; align-self: stretch; min-width: 0; min-height: 0; }
.ps-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.ps.is-live .ps-rail { display: flex; gap: 2px; margin: 0 0 26px -3px; }
.ps-rail button { position: relative; width: 28px; height: 18px; border-radius: 4px; }
.ps-rail button::before {
  content: ""; position: absolute; left: 3px; right: 3px; top: 7px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), var(--violet)) 0 0 / calc(var(--t, 0) * 100%) 100% no-repeat, var(--line-strong);
}
.ps-rail button:hover::before { box-shadow: 0 0 0 1px var(--line-strong); }

.ps.is-live .ps-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.ps.is-live .ps-step {
  grid-area: 1 / 1; padding: 0; border: 0; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.4s var(--ease), transform 0.55s var(--ease), visibility 0.4s;
}
.ps.is-live .ps-step.is-active { opacity: 1; visibility: visible; transform: none; }
.ps.is-live .ps-step h3 { margin-top: 16px; font-size: clamp(1.7rem, 2.5vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.1; }
.ps.is-live .ps-step p:not(.ps-num) { margin-top: 16px; font-size: 1.05rem; }
.ps.is-live .ps-step p.ps-method { margin-top: 18px; font-size: 12.5px; }
.ps.is-live .ps-links { margin-top: 22px; }

@media (max-width: 900px) {
  .ps.is-live .ps-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 14px; align-items: stretch; padding-block: 12px 22px; }
  .ps.is-live .ps-stage { grid-row: 1; }
  .ps.is-live .ps-copy { grid-row: 2; }
  .ps.is-live .ps-rail { margin-bottom: 10px; }
  .ps-rail button { width: 24px; }
  .ps.is-live .ps-step h3 { margin-top: 8px; font-size: 1.32rem; }
  .ps.is-live .ps-step p:not(.ps-num) { margin-top: 6px; font-size: 15px; line-height: 1.5; }
  .ps.is-live .ps-step p.ps-method { margin-top: 8px; font-size: 12px; }
  .ps.is-live .ps-links { margin-top: 10px; gap: 6px 20px; font-size: 14.5px; }
  .ps.is-live .ps-more { display: none; }
}
@media (max-width: 900px) and (min-height: 900px) { .ps.is-live .ps-more { display: inline; } }