/* =====================================================================
   THE JOURNEY: THE STACK (index.html #journey, 2026-10-15)
   Built from Design/journey-v6/a-stack; Naveen picked it and asked for
   Apple cards (no outlines) and better motion.

   The idea. The three steps are a deck of cards. Each card pins under the
   header and the next rises over it; the card underneath settles back, so
   the earlier cards stay visible as a stack along the top. Discovery and
   Career Hypothesis are white cards; My Space, the place you keep, is navy.

   Apple cards. The app's canvas (navy mixed 5% into white, as cards.css),
   white cards with a 36px radius, no border or hairline anywhere: depth
   is the canvas, a soft shadow, and the sky panel inside each card (12px
   in, so its corners are the card's less that gap). Pieces inside a card
   are filled tiles, never outlined: white on the sky panel, the canvas on
   white, a faint white on navy.

   The grid. The intro is the landing's 12 columns: title on 1-6, lead on
   8-12, on one bottom line. Each card is the full .wrap: words | picture.
   The step's name sits at the top of the words, its detail (the chapters,
   the quote, the tabs) on the bottom line.

   The layers. .card is the sticky shell (no paint, never transformed, so
   the script can measure it); .cb takes the depth (scales back from its
   top edge as cards cover it); .ce is the card you see (it rises in with a
   slight tilt and settles). The script writes three numbers per card,
   smoothed toward the scroll so the motion glides instead of stepping:
     --en  0 to 1: the card rising from the bottom of the window into place
     --rv  0 to 1: its contents arriving, a little behind --en
     --d   how much now lies on it (the sum of the later cards' --en)
   Everything is a function of the scroll position, so it runs backwards.
   Reduced motion, no JS: no pin effects, the cards stand finished (every
   number defaults to its end state). Below 900px: no pin; each card fades
   up as it comes into view.
   ===================================================================== */

.stack{--navy:#102240; --blue:#3070B6; --sky:#9DCAE3; --ink:#1F4E80;
  --canvas:color-mix(in srgb, #102240 5%, #fff);
  --sky-panel:radial-gradient(80% 55% at 50% 18%, rgba(255,255,255,.72), rgba(255,255,255,0) 70%), linear-gradient(180deg, #E2F0F9 0%, #BFDDEF 100%);
  --out:cubic-bezier(.2, .7, .2, 1);
  --top:100px; --peek:16px; --ch:min(668px, calc(100svh - var(--top) - 40px)); --rc:36px; --in:12px;
  position:relative; overflow:clip; color:var(--text); background:var(--canvas);
  padding:clamp(120px, 11vw, 180px) 0 clamp(110px, 10vw, 160px)}
.stack *{min-width:0}

/* ---------------------------------------------------------------- shared words */
.stack .kicker{color:var(--ink); margin:0 0 22px}
.stack .jv-h{font-size:clamp(3rem, 1.6rem + 3.8vw, 5.4rem); font-weight:600; line-height:.98; letter-spacing:-.045em}
.stack .jv-lead{font-size:clamp(1.2rem, 1rem + .5vw, 1.45rem); font-weight:500; line-height:1.3; letter-spacing:-.02em; color:var(--navy); text-wrap:balance}
.stack .jv-l{color:var(--text-body); font-size:clamp(1rem, .96rem + .14vw, 1.08rem); line-height:1.6; text-wrap:pretty}
.stack .jv-num{color:var(--ink); font-size:.72rem; font-weight:500; letter-spacing:.24em; line-height:1}
.stack .jv-sub{color:var(--text-muted); font-size:clamp(1.1rem, .95rem + .45vw, 1.4rem); font-weight:400; letter-spacing:-.02em; line-height:1.2}

/* ---------------------------------------------------------------- the intro */
.st-open{display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:24px; align-items:end;
  padding-bottom:clamp(56px, 6vw, 96px)}
.st-open-l{grid-column:1 / span 6}
.st-open-r{grid-column:8 / span 5}
.st-open .jv-l{margin-top:16px}

/* ---------------------------------------------------------------- the deck */
.deck{position:relative; padding-bottom:10vh}
.card{position:sticky; top:calc(var(--top) + var(--i) * var(--peek)); height:var(--ch)}
.card + .card{margin-top:clamp(40px, 7vh, 80px)}
.cb{height:100%; transform-origin:50% 0;
  transform:scale(calc(1 - min(var(--d, 0), 2) * .04))}
.ce{position:relative; height:100%; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  border-radius:var(--rc); background:#fff; overflow:clip; transform-origin:50% 100%;
  transform:perspective(1800px) translateY(calc((1 - var(--en, 1)) * 64px)) rotateX(calc((1 - var(--en, 1)) * 7deg)) scale(calc(.94 + var(--en, 1) * .06));
  /* a rising card throws its shadow up onto the one it covers */
  box-shadow:0 1px 2px rgba(16,34,64,.04), 0 -24px 60px -36px rgba(16,34,64,calc(.12 + (1 - var(--en, 1)) * .2)), 0 40px 80px -56px rgba(16,34,64,.28)}
/* covered cards recede: a veil, never a change of their own colours */
.ce::after{content:""; position:absolute; inset:0; z-index:5; border-radius:inherit; background:var(--navy); pointer-events:none;
  opacity:calc(min(var(--d, 0), 1.6) * .075)}
.c3 .ce{background:var(--navy); color:#fff}
.c3 .ce::after{background:#000}

/* the words: the step's name at the top, the detail on the bottom line */
.cw{display:flex; flex-direction:column; padding:clamp(36px, 3.6vw, 56px) clamp(28px, 3vw, 44px) clamp(36px, 3.6vw, 56px) clamp(36px, 3.6vw, 56px)}
.stack .jv-t{margin-top:18px; padding-bottom:.08em; margin-bottom:-.08em; overflow:clip;
  font-size:clamp(2.5rem, 1.2rem + 2.6vw, 4.2rem); font-weight:600; line-height:.98; letter-spacing:-.05em; text-wrap:balance}
.stack .jv-t > span{display:block}
.stack .jv-sub{margin-top:12px}
.cw .jv-l{margin-top:auto; padding-top:24px; max-width:52ch}
.cw .jv-quote, .cw .jv-tabs{margin-top:20px}
.cw .jv-stepper{margin-top:28px}
.c3 .jv-num{color:var(--sky)}
.c3 .jv-sub{color:rgba(157,202,227,.9)}
.c3 .cw .jv-l{color:#fff; font-weight:500}
.c3 .jv-tabs{margin-top:16px}

/* the picture: a sky panel 12px inside the card */
.cv{position:relative; margin:var(--in) var(--in) var(--in) 0; border-radius:calc(var(--rc) - var(--in)); overflow:clip; background:var(--sky-panel)}
.cv .person{position:absolute; display:block; max-width:none; bottom:-2px; transform-origin:50% 100%;
  translate:0 calc((1 - var(--en, 1)) * 48px + min(var(--d, 0), 1) * -14px);
  scale:calc(1.08 - var(--rv, 1) * .08)}

/* 01: the three students fill the panel, its sides cropping only their bags */
.c1 .cv, .c3 .cv{container-type:size}
.p-three{left:50%; translate:-50% 0; height:min(74%, 74cqw); width:auto}
.c1 .p-three{translate:-50% calc((1 - var(--en, 1)) * 48px + min(var(--d, 0), 1) * -14px)}

/* 02: the 12 worlds along the top; she stands under them, facing them */
.cv-wall{--wt:18px; --tag:50px; --wg:8px; --wall-h:calc(var(--tag) * 4 + var(--wg) * 3)}
.cv .p-wall{left:50%; height:calc(100% - var(--wt) - var(--wall-h) - 22px); width:auto;
  translate:-50% calc((1 - var(--en, 1)) * 48px + min(var(--d, 0), 1) * -14px)}

/* 03: she sits on the panel's bottom-left corner, as she was photographed */
.p-phones{left:0; width:min(100%, 100cqh); height:auto; transform-origin:0 100%}

/* ---------------------------------------------------------------- the five chapters */
.jv-stepper{--ry:31px; list-style:none; position:relative; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); margin:0; padding:0}
.jv-stepper::before, .jv-stepper::after{content:""; position:absolute; left:10%; right:10%; top:var(--ry); height:1.5px; margin-top:-.75px; border-radius:2px}
.jv-stepper::before{background:rgba(16,34,64,.14)}
.jv-stepper::after{background:var(--blue); transform-origin:0 50%; transform:scaleX(var(--fill, 1))}
.jv-stepper li{position:relative; z-index:1; display:grid; grid-template-rows:12px 14px auto; row-gap:12px; justify-items:center; text-align:center;
  --on:clamp(0, calc((var(--fill, 1) - var(--n, 0) * .25) * 8 + 1), 1)}
.jv-stepper li:nth-child(2){--n:1} .jv-stepper li:nth-child(3){--n:2} .jv-stepper li:nth-child(4){--n:3} .jv-stepper li:nth-child(5){--n:4}
.jv-stepper .sn{color:var(--ink); font-size:.62rem; font-weight:500; letter-spacing:.2em; line-height:12px; padding-left:.2em; opacity:calc(.35 + var(--on) * .65)}
.jv-stepper i{position:relative; width:14px; height:14px; border-radius:50%; background:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(48,112,182,calc(.3 + var(--on) * .7)); scale:calc(.8 + var(--on) * .2)}
.jv-stepper i::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--blue); scale:var(--on)}
.jv-stepper li:first-child i{background:var(--blue); box-shadow:none}
.jv-stepper li:first-child i::after{background:#fff; inset:5px}
.jv-stepper .sl{max-width:11ch; font-size:.8rem; font-weight:500; line-height:1.3; color:var(--navy); text-wrap:balance; opacity:calc(.4 + var(--on) * .6)}

/* ---------------------------------------------------------------- inside a career card: a canvas tile on the white card */
.jv-quote{margin:0; padding:18px 20px; border-radius:22px; background:var(--canvas)}
.jv-quote .q-k{color:var(--ink); font-size:.6rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase}
.jv-quote .q-t{margin-top:8px; font-size:1.15rem; font-weight:600; letter-spacing:-.025em; line-height:1.2; color:var(--navy)}
.jv-quote .q-l{margin-top:6px; color:var(--text-body); font-size:.86rem; line-height:1.5}
/* a real career card: its name and door badge, then four of its blocks, a label beside each */
.jv-quote .q-t{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.jv-quote .q-door{padding:4px 10px; border-radius:999px; background:#fff; color:var(--ink); font-size:.7rem; font-weight:500; letter-spacing:0; line-height:1.2}
.q-rows{display:grid; gap:8px; margin:12px 0 0}
.q-rows > div{display:grid; grid-template-columns:8.4rem minmax(0, 1fr); column-gap:14px; align-items:baseline}
.q-rows dt{color:var(--navy); font-size:.78rem; font-weight:600; letter-spacing:-.005em; line-height:1.4}
.q-rows dd{margin:0; color:var(--text-body); font-size:.84rem; line-height:1.45; text-wrap:pretty}
.q-rows .q-ex{display:flex; flex-wrap:wrap; gap:6px}
.q-ex span{padding:2px 9px; border-radius:999px; background:#fff; color:var(--navy); font-size:.74rem; font-weight:500; line-height:1.5}

/* ---------------------------------------------------------------- the 12 worlds: white tiles on the sky panel */
.jv-wall{list-style:none; position:absolute; left:var(--wt); right:var(--wt); top:var(--wt); margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-auto-rows:var(--tag); gap:var(--wg)}
.jv-wall li{display:flex; align-items:center; gap:8px; padding:0 8px 0 7px; border-radius:14px; color:var(--navy);
  background:rgba(255,255,255,.9); box-shadow:0 1px 2px rgba(16,34,64,.05)}
.jv-wall .wa{flex:none; width:32px; height:32px; border-radius:9px; overflow:hidden; background:linear-gradient(160deg, #F4F9FC, #D9EAF5)}
.jv-wall .wa svg{display:block; width:100%; height:100%}
.jv-wall .wn{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:clamp(.68rem, .5rem + .24vw, .8rem); font-weight:500; letter-spacing:-.018em; line-height:1}

/* ---------------------------------------------------------------- the four tabs: faint white tiles on navy */
.jv-tabs{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:1fr; gap:12px; margin:0}
.jv-tabs > div{padding:18px 20px 20px; border-radius:22px; background:rgba(255,255,255,.07)}
.jv-tabs dt{display:flex; align-items:center; gap:12px; font-size:.98rem; font-weight:600; letter-spacing:-.015em; color:#fff}
.jv-tabs .ic{flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:rgba(157,202,227,.16)}
.jv-tabs svg{width:19px; height:19px; fill:none; stroke:var(--sky); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.jv-tabs dd{margin:10px 0 0; color:var(--on-dark-dim); font-size:.86rem; line-height:1.45; text-wrap:pretty}

/* ---------------------------------------------------------------- the finish */
.st-fin{display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:clamp(24px, 3vw, 48px)}
.st-fin-l{max-width:22ch; font-size:clamp(1.6rem, 1.1rem + 1.3vw, 2.4rem); line-height:1.1; letter-spacing:-.035em; font-weight:600; text-wrap:balance}
.st-fin .btn{margin-top:24px; padding:15px 28px; font-size:1rem}

/* ---------------------------------------------------------------- the contents arrive with --rv, one after another */
/* each piece has its place in the queue (--k); --p is how far it has come */
.cw > *, .jv-wall li, .jv-tabs > div, .jv-quote{
  --p:clamp(0, calc(var(--rv, 1) * 1.9 - var(--k, 0) * .09), 1);
  opacity:var(--p); translate:0 calc((1 - var(--p)) * 22px)}
.cw > :nth-child(2){--k:1} .cw > :nth-child(3){--k:2} .cw > :nth-child(4){--k:3} .cw > :nth-child(5){--k:4}
/* the step's name rises out of its own line; the tabs come in one by one, not as a block */
.stack .cw > .jv-t, .stack .cw > .jv-tabs{opacity:1; translate:none}
.stack .jv-t > span{translate:0 calc((1 - clamp(0, calc(var(--rv, 1) * 1.6), 1)) * 104%)}
/* the chapter line draws, and its rings light in turn */
.c1 .jv-stepper{--fill:clamp(0, calc(var(--rv, 1) * 1.6 - .55), 1)}
/* the worlds, row by row, left to right */
.jv-wall li{--k:calc(2 + var(--w, 0)); translate:0 calc((1 - var(--p)) * 14px); scale:calc(.94 + var(--p) * .06)}
.jv-wall li:nth-child(2){--w:.6} .jv-wall li:nth-child(3){--w:1.2} .jv-wall li:nth-child(4){--w:1.4} .jv-wall li:nth-child(5){--w:2}
.jv-wall li:nth-child(6){--w:2.6} .jv-wall li:nth-child(7){--w:2.8} .jv-wall li:nth-child(8){--w:3.4} .jv-wall li:nth-child(9){--w:4}
.jv-wall li:nth-child(10){--w:4.2} .jv-wall li:nth-child(11){--w:4.8} .jv-wall li:nth-child(12){--w:5.4}
.jv-quote{--k:5}
.jv-tabs > div{--k:5} .jv-tabs > div:nth-child(2){--k:5.6} .jv-tabs > div:nth-child(3){--k:6.2} .jv-tabs > div:nth-child(4){--k:6.8}

/* ---------------------------------------------------------------- 1280 x 800 and other short windows */
@media (min-width:900px) and (max-height:840px){
  .stack{--top:92px; --peek:13px}
  .stack .jv-t{font-size:clamp(2.3rem, 1rem + 2.4vw, 3.6rem)}
  .cw{padding-block:clamp(30px, 3vw, 44px)}
  .cw .jv-l{font-size:1rem; line-height:1.55}
  .jv-quote{padding:14px 18px}
  .jv-quote .q-l{font-size:.82rem}
  .cv-wall{--tag:44px}
  .jv-tabs > div{padding:14px 16px 16px}
}

/* ---------------------------------------------------------------- below 900px: the cards simply stack */
@media (max-width:899px){
  .st-open{grid-template-columns:minmax(0, 1fr); row-gap:24px}
  .st-open-l, .st-open-r{grid-column:1 / -1}
  .card{position:relative; top:auto; height:auto}
  .card + .card{margin-top:16px}
  .cb, .ce{transform:none}
  .ce{grid-template-columns:minmax(0, 1fr); border-radius:28px; box-shadow:0 1px 2px rgba(16,34,64,.04)}
  .ce::after{display:none}
  .cw{padding:30px 24px 26px}
  .cv{margin:0 var(--in) var(--in); border-radius:18px}
  .cv .person{translate:0 0}
  .c1 .cv{height:min(92vw, 420px)}
  .p-three{height:72%}
  .c1 .p-three, .cv .p-wall{translate:-50% 0}
  .cv-wall{--wt:12px; --tag:38px; --wg:6px; --wall-h:calc(var(--tag) * 6 + var(--wg) * 5); height:470px}
  .jv-wall{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .jv-wall li{gap:5px; padding:0 5px; border-radius:10px}
  .jv-wall .wa{width:24px; height:24px; border-radius:6px}
  .jv-wall .wn{font-size:.66rem}
  .c3 .cv{aspect-ratio:1}
  .p-phones{width:100%}
  .jv-stepper .sl{font-size:.68rem}
  .jv-tabs{grid-template-columns:minmax(0, 1fr)}
  .q-rows > div{grid-template-columns:minmax(0, 1fr); row-gap:3px}
  .deck{padding-bottom:0}
  .st-fin{margin-top:72px}
  /* each card fades up as it comes into view (journey-stack.js adds .is-in) */
  .stack.is-live .ce{opacity:0; translate:0 28px; transition:opacity .8s var(--out), translate .8s var(--out)}
  .stack.is-live .card.is-in .ce{opacity:1; translate:0 0}
}

@media (prefers-reduced-motion:reduce){
  .stack.is-live .ce{opacity:1; translate:none}
}