/* Vertical scrolling carries four illustrated scenes across a sticky viewport. */
body.playful { overflow-x:clip; }
.story-journey { --journey-top:100px; color:var(--brown); background:var(--sun); scroll-margin-top:100px; }
.story-journey__stage { background:var(--paper); }
.story-journey__top,.story-journey__controls { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:14px 5vw; }
.story-journey__top { border-bottom:2px solid var(--brown); font-size:11px; font-weight:800; }
.story-journey__top a { display:flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:4px; }
.journey-chapter { display:grid; grid-template-columns:1fr 1.25fr; align-items:center; gap:4vw; padding:35px 6vw; min-height:520px; }
.journey-chapter--kim { background:var(--sun); }
.journey-chapter--family { background:var(--sage); }
.journey-chapter--place { background:#c2b7db; }
.journey-chapter--table { background:var(--orange); }
.playful .journey-chapter h2 { font:900 clamp(46px,6vw,95px)/.88 var(--font-disp); letter-spacing:-.03em; margin:20px 0; color:var(--brown); }
.journey-chapter h2 em { font-style:normal; color:var(--paper); -webkit-text-stroke:1px var(--brown); paint-order:stroke fill; text-shadow:3px 3px 0 var(--brown); }
.journey-chapter__copy>p:not(.eyebrow) { max-width:360px; font-size:14px; line-height:1.65; }
.journey-chapter__copy small { display:block; margin-top:14px; font-size:11px; }
.journey-chapter>img { display:block; width:100%; height:auto; max-height:490px; object-fit:contain; border:2px solid var(--brown); border-radius:25px; background:var(--paper); box-shadow:6px 6px 0 var(--brown); }
.journey-chapter--kim>img { max-width:420px; justify-self:center; border-radius:48% 48% 18% 18%; }
.story-journey__controls { display:none; border-top:2px solid var(--brown); font-size:12px; }
.story-journey__controls>div { display:flex; align-items:center; gap:18px; }
.story-journey__controls button { height:44px; width:44px; border:2px solid var(--brown); border-radius:50%; background:var(--sun); color:var(--brown); font-size:23px; cursor:pointer; }
.story-journey__controls button:disabled { opacity:.35; cursor:default; }
.journey-count { font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.story-journey__progress { display:none; height:5px; background:var(--paper); }
.story-journey__progress>span { display:block; height:100%; background:var(--brown); transform:scaleX(var(--journey-progress,0)); transform-origin:left; }
.story-journey[data-pinned=true] { height:var(--journey-height); }
.story-journey[data-pinned=true] .story-journey__stage { position:sticky; top:var(--journey-top); height:var(--journey-stage); display:flex; flex-direction:column; }
.story-journey[data-pinned=true] .story-journey__window { flex:1; min-height:0; overflow:hidden; }
.story-journey[data-pinned=true] .story-journey__track { display:flex; height:100%; transform:translate3d(var(--journey-x,0px),0,0); will-change:transform; }
.story-journey[data-pinned=true] .journey-chapter { flex:0 0 100%; min-width:0; min-height:0; box-sizing:border-box; }
.story-journey[data-pinned=true] .journey-chapter>img { max-height:calc(var(--journey-stage) - 190px); }
.story-journey[data-pinned=true] .story-journey__controls,.story-journey[data-pinned=true] .story-journey__progress { display:flex; }
.story-journey[data-pinned=true] .story-journey__progress>span { width:100%; }
@media(max-width:760px) {
  .story-journey { --journey-top:96px; }
  .story-journey__top { font-size:9px; padding:4px 5vw; }
  .story-journey__top>span { max-width:160px; }
  .journey-chapter { grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:14px; padding:20px 6vw; min-height:0; }
  .playful .journey-chapter h2 { font-size:clamp(36px,10vw,58px); margin:9px 0; }
  .journey-chapter h2 br { display:none; }
  .journey-chapter__copy>p:not(.eyebrow) { font-size:12px; line-height:1.4; }
  .journey-chapter .eyebrow { font-size:9px; }
  .journey-chapter>img { max-height:290px; width:auto; max-width:100%; justify-self:center; min-height:0; }
  .story-journey[data-pinned=true] .journey-chapter>img { height:100%; max-height:calc(var(--journey-stage) - 280px); }
  .story-journey__controls { padding:7px 5vw; gap:10px; }
  .journey-hint { font-size:10px; max-width:140px; }
  .story-journey__controls>div { gap:9px; }
}