/* Our story as a journey you scroll through (12 Oct 2026; one road, 23 Oct 2026). Page: about/story/. Script: assets/story.js.
   23 Oct 2026: the chapters are stops on one road. A route line runs the length of the journey and draws itself as the
   reader moves (two opposing transforms, never a stroke animation), a small car travels on it, a HUD under the header
   holds the year and the chapter, the background tone follows the era, and on wide screens with motion each scene is
   pinned beside the words and crossfades into the next. AntaraX is the arrival, with the next step.
   Scenes are drawn by story.js into each .st-vis. Two variables drive them, both set from the scroll:
   --b, a whole-number "beat" that steps up as a chapter passes (elements with --k show once --b reaches it, with a CSS transition),
   and a few transforms written per frame (the compass, the car, the journey line). Only transform and opacity animate.
   Without script, or with reduced motion, every scene sits in its finished state and every word is visible. */

.st-page{
  --st-ink:#161618; --st-card:#141922; --st-line:#252B35; --st-line2:#343C48; --st-mute:#8C94A3; --st-text:#B8BFCB; --st-head:#F4F2EE;
  --st-or:#FB9800; --st-or2:#FFB547; --st-paper:#F7F6F3;
  --st-top:128px;
}
.st{position:relative;z-index:1;background:var(--st-ink);color:var(--st-text)}
.st-open h1,.st-journey h2,.st-journey h3{color:var(--st-head);font-weight:600;letter-spacing:-.02em}
.st :focus-visible{outline:2px solid var(--st-or);outline-offset:3px;border-radius:6px}
.st-num{font:600 14px/18px var(--mono);letter-spacing:.04em;color:var(--st-or)}

/* ---------- 1 · opening scene ---------- */
.st-open{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:center;padding:calc(103px + 48px) var(--gut) 120px;overflow:hidden;isolation:isolate}
.st-open-bg{position:absolute;inset:0;z-index:-1}
.st-open-bg svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%}
.st-open-road{transform-box:view-box;transform-origin:600px 700px}
.st-open-in{position:relative;max-width:980px;margin:0 auto;text-align:center;will-change:transform,opacity}
.st-open h1{font-size:clamp(40px,6.4vw,92px);line-height:1.02;letter-spacing:-.035em;margin:18px 0 26px;text-wrap:balance}
.st-sub{max-width:680px;margin:0 auto;font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--st-text);text-wrap:pretty}
.st-hint{display:inline-flex;flex-direction:column;align-items:center;gap:12px;margin-top:56px;font:500 13px/1 var(--sans);letter-spacing:.08em;color:var(--st-mute);padding:8px 12px}
.st-hint i{display:block;width:2px;height:44px;border-radius:2px;background:linear-gradient(var(--st-or),transparent);transform-origin:top}
.st-hint:hover{color:var(--st-head)}
.st-motion .st-open-in>*{animation:stRise 1.1s var(--ease) both}
.st-motion .st-open-in>:nth-child(2){animation-delay:.12s}
.st-motion .st-open-in>:nth-child(3){animation-delay:.24s}
.st-motion .st-open-in>:nth-child(4){animation-delay:.5s}
.st-motion .st-hint i{animation:stHint 2.4s var(--ease) 1.2s infinite}
@keyframes stRise{from{opacity:0;transform:translateY(28px)}}
@keyframes stHint{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
/* 14 Oct 2026 tidy: the road runs in a band under the words, so no line or lane mark crosses the title or the text,
   and the full-width horizon line is gone (no full-width hairlines) */
.st-open{--st-road:clamp(180px,32vh,320px);padding-bottom:calc(var(--st-road) + 24px)}
.st-open-bg{top:auto;height:var(--st-road)}
.st-hint{margin-top:40px}

/* ---------- 2 · the journey: ambient tone, HUD, route ---------- */
.st-journey{position:relative;--route-w:112px;--hud-t:110px;--hud-h:60px}
/* the era's tone: one wash per division colour, the current one shown (a fixed-size layer, only opacity changes) */
.st-amb{position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:0;pointer-events:none;overflow:hidden}
.st-amb i{position:absolute;inset:0;opacity:0;background:linear-gradient(180deg,transparent 25%,color-mix(in srgb,var(--t) 14%,transparent) 100%);transition:opacity 1.4s var(--ease)}
.st-amb i.on{opacity:1}
/* the HUD: year, chapter, the stops as links, progress. Sticky and zero-height, so it takes no room and leaves with the journey */
.st-hud{position:sticky;top:var(--hud-t);z-index:20;height:0}
.st-hud-in{position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(min(1376px,100%) - 2 * var(--gut));height:var(--hud-h);display:flex;align-items:center;gap:18px;padding:0 10px 0 20px;border-radius:16px;background:#10141B;box-shadow:inset 0 0 0 1px var(--st-line2),0 12px 28px rgba(0,0,0,.28)}
.st-year{flex:none;display:flex;font:600 28px/1 var(--mono);color:var(--st-head);letter-spacing:-.02em;height:1em;overflow:hidden;font-variant-numeric:tabular-nums}
.st-year>span{display:block;width:.62em;text-align:center}
.st-reel{display:flex!important;flex-direction:column;transform:translateY(calc(var(--d,0) * -1em));transition:transform .55s var(--ease),color .4s}
.st-reel i{display:block;height:1em;font-style:normal;text-align:center}
.st-reel[data-reel="u"]{color:var(--st-cur,var(--st-or))}
.st-hud-now{flex:0 1 auto;min-width:0;margin:0;padding-left:18px;box-shadow:inset 1px 0 0 var(--st-line2);font:500 15px/1.3 var(--sans);color:var(--st-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-rail{margin-left:auto;flex:none}
.st-ticks{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.st-ticks li{position:relative}
.st-ticks a{position:relative;display:grid;place-items:center;width:26px;height:40px;border-radius:8px}
.st-ticks a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--st-ink);box-shadow:0 0 0 2px var(--st-line2);transition:box-shadow .3s,background .3s,transform .3s var(--ease)}
.st-ticks li[data-tone]{--st-acc:var(--t)}
.st-ticks li.past a::before{background:var(--st-acc);box-shadow:0 0 0 2px var(--st-acc)}
.st-ticks li.on a::before{transform:scale(1.35)}
/* each stop's name: read by screen readers always, shown on hover or focus */
.st-ticks a span{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-4px);padding:6px 10px;border-radius:8px;background:#0E1116;box-shadow:inset 0 0 0 1px var(--st-line2);font:500 12.5px/1.2 var(--sans);color:var(--st-head);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.st-ticks li:nth-last-child(-n+3) a span{left:auto;right:0;transform:translateY(-4px)}
.st-ticks a:hover span,.st-ticks a:focus-visible span{opacity:1;transform:translate(-50%,0)}
.st-ticks li:nth-last-child(-n+3) a:hover span,.st-ticks li:nth-last-child(-n+3) a:focus-visible span{transform:none}
.st-hud-bar{position:absolute;left:20px;right:20px;bottom:0;height:2px;background:var(--st-line)}
.st-hud-bar b{position:absolute;inset:0;background:var(--st-cur,var(--st-or));transform-origin:left;transform:scaleX(0);will-change:transform;transition:background .4s}
html:not(.st-js) .st-year,html:not(.st-js) .st-hud-now,html:not(.st-js) .st-hud-bar{display:none}
/* the route: drawn by story.js from the stops' positions. A dim road, and the travelled road revealed from the top by two
   opposing transforms (the clip moves down while the drawing inside moves up), so drawing it never repaints */
.st-route{position:absolute;left:0;top:0;width:0;height:0;z-index:1;pointer-events:none}
.st-route svg{position:absolute;left:0;top:0;display:block;overflow:visible}
.st-route-lit{position:absolute;left:0;top:0;overflow:hidden;will-change:transform}
.st-route-lit>svg{will-change:transform}
.st-car{position:absolute;left:0;top:0;width:56px;height:26px;margin:-13px 0 0 -28px;will-change:transform}
.st-car svg{width:100%;height:100%;overflow:visible}

/* ---------- 3 · chapters ---------- */
.st-chapters{position:relative;z-index:2;max-width:1376px;margin:0 auto;padding:calc(var(--hud-h) + 56px) var(--gut) 0 calc(var(--gut) + var(--route-w))}
.st-track{position:relative}
/* 13 Oct 2026: chapters are ordinary rows, words beside their scene, so there are no long empty stretches between them */
.st-ch{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;gap:clamp(32px,5vw,72px);padding:clamp(56px,9vh,96px) 0;scroll-margin-top:calc(var(--hud-t) + var(--hud-h) + 8px)}
.st-copy{display:flex;flex-direction:column;justify-content:center;gap:20px;max-width:520px}
.st-copy h2{font-size:clamp(32px,3.6vw,52px);line-height:1.08;text-wrap:balance}
.st-copy h3{font-size:clamp(26px,2.6vw,38px);line-height:1.12;text-wrap:balance}
.st-copy h3:not(:first-child):not(.st-num + h3){margin-top:28px}
.st-copy p{font-size:18px;line-height:1.7;text-wrap:pretty}
.st-copy .st-num{font-size:12px;line-height:18px}
.st-beat{font-size:clamp(24px,2.4vw,32px)!important;line-height:1.25!important;color:var(--st-head);font-weight:600;letter-spacing:-.01em;margin-top:12px}
.st-link{color:var(--st-head);text-decoration:underline;text-decoration-color:var(--st-or);text-underline-offset:4px;text-decoration-thickness:2px}
.st-link:hover{color:var(--st-or)}
.st-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.st-chips li{font:500 14px/1.3 var(--sans);color:var(--st-head);padding:8px 14px;border-radius:999px;background:var(--st-card);box-shadow:inset 0 0 0 1px var(--st-line2)}
.st-steps{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.st-steps li{position:relative;padding-left:22px;font-size:17px;line-height:1.65}
.st-steps li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--st-or)}
/* real photographs along the road: a fixed frame (no layout shift), the picture drifting inside it (parallax, transform only) */
.st-photo{display:block;margin:6px 0 0}
.st-photo-f{display:block;position:relative;overflow:hidden;border-radius:16px;aspect-ratio:16/10;background:var(--st-card);box-shadow:inset 0 0 0 1px var(--st-line)}
.st-photo img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;will-change:transform}
.st-cap{display:block;margin-top:10px;font:500 13px/1.45 var(--sans);color:var(--st-mute)}
a.st-shot{border-radius:16px;color:inherit}
a.st-shot:hover .st-cap{color:var(--st-head)}
.st-shot:focus-visible{outline:2px solid var(--st-or);outline-offset:3px}
.st-sub4{margin:6px 0 -6px;font:600 13px/1.3 var(--mono);letter-spacing:.06em;color:var(--st-head)}
.st-help b{color:var(--st-head);font-weight:600}
.st-go{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.st-go .btn{height:auto;min-height:44px}
.st-go .st-go-sec{background:transparent;color:var(--st-head);box-shadow:inset 0 0 0 1px var(--st-line2)}
.st-go .st-go-sec:hover{background:var(--st-card)}

/* wide screens with motion (the same query as story.js, so the layout is right from the first paint): the words scroll on the left; each scene is pinned in the right-hand
   column and crossfades into the next as its chapter takes over. A chapter told in words only keeps the scene before it.
   AntaraX, outside the track, is not pinned: it is the arrival. */
@media (min-width:1101px) and (min-height:560px){
  .st-motion .st-track .st-ch{display:flex;flex-direction:column;justify-content:center;width:44%;min-height:100vh;padding:14vh 0}
  .st-motion .st-track .st-vis{position:fixed;top:var(--pin-t);left:var(--pin-l);width:var(--pin-w);height:var(--pin-h);z-index:3;opacity:0;transform:translate3d(0,48px,0) scale(.94);transition:opacity .8s var(--ease),transform 1s var(--ease);pointer-events:none}
  .st-motion .st-track .st-vis.was{transform:translate3d(0,-48px,0) scale(.97)}
  .st-motion .st-track .st-vis.cur{opacity:1;transform:none}
  .st-motion .st-track .st-note .st-vis{display:none}
}
.st-arrive{min-height:100vh}

/* words come in beside the scene */
.st-motion .st-copy>*{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.st-motion .st-copy>.in{opacity:1;transform:none}

/* the scene: pinned beside the words */
.st-vis{position:relative;height:min(calc(100vh - var(--st-top) - 32px),600px);display:grid;place-items:center;container-type:size;--b:99}
.st-stage{position:relative;width:min(100cqw,100cqh);aspect-ratio:1;border-radius:28px;background:radial-gradient(120% 90% at 50% 40%,#161C26 0%,#10141B 70%);box-shadow:inset 0 0 0 1px var(--st-line);overflow:hidden}
.st-stage>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.st-vis svg text{font-family:var(--sans);fill:var(--st-text)}
.st-vis svg .mono{font-family:var(--mono)}

/* beats: an element with --k shows once the scene's --b reaches it */
.st-vis .bt{--s:clamp(0,calc(var(--b) - var(--k,0) + 1),1);opacity:var(--s);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.st-vis .bt.pop{transform:scale(calc(.5 + .5 * var(--s)));transform-box:fill-box;transform-origin:center}
.st-vis .bt.up{transform:translateY(calc((1 - var(--s)) * 26px))}
.st-vis .bt.mv{transform:translate(calc((1 - var(--s)) * var(--x0,0px)),calc((1 - var(--s)) * var(--y0,0px)))}
.st-vis .bo{--o:clamp(0,calc(var(--b) - var(--ko) + 1),1);opacity:calc(1 - var(--o) * .85);transition:opacity .7s var(--ease)}
.st-vis .bo.gone{opacity:calc(1 - var(--o))}
.st-vis .on-lit{--s:clamp(0,calc(var(--b) - var(--k,0) + 1),1);opacity:calc(.12 + .88 * var(--s));transition:opacity .5s var(--ease)}
/* continuous parts written per frame by story.js */
.st-vis .live{transform-box:view-box;will-change:transform}

/* ambient loops exist only while their scene is on screen (a paused animation still costs a style pass every frame) */
.amb.ping{transform-box:fill-box;transform-origin:center}
.amb.spin{transform-box:view-box}
.st-motion .st-vis.on .amb.pulse{animation:stPulse 2.2s ease-in-out infinite}
.st-motion .st-vis.on .amb.blink{animation:stBlink 3.2s steps(1) infinite}
.st-motion .st-vis.on .amb.ping{animation:stPing 2.6s ease-out infinite}
.st-motion .st-vis.on .amb.slide-y{animation:stSlideY 2.4s linear infinite}
.st-motion .st-vis.on .amb.slide-x{animation:stSlideX 2.8s linear infinite}
.st-motion .st-vis.on .amb.spin{animation:stSpin 14s linear infinite}
.amb.ping{opacity:0}
.st-motion .st-vis.on .amb.ping{opacity:1}
@keyframes stPulse{50%{opacity:.25}}
@keyframes stBlink{0%{opacity:1}40%{opacity:.25}70%{opacity:1}}
@keyframes stPing{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes stSlideY{from{transform:translateY(0)}to{transform:translateY(var(--dy,80px))}}
@keyframes stSlideX{from{transform:translateX(0)}to{transform:translateX(var(--dx,80px))}}
@keyframes stSpin{to{transform:rotate(360deg)}}

/* the AntaraX scene is HTML: the A (assets/ax-mark.js) above its products and Lapisan */
.st-vis-ax .st-ax{width:min(100cqw,100cqh);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:4% 6%;border-radius:28px;background:#10141B;box-shadow:inset 0 0 0 1px var(--st-line)}
.st-vis-ax .ax-mark::before{display:none}
.st-vis-ax .ax-mark{max-width:min(300px,52cqh)}
.st-ax-prods{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.st-ax-prods li{display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;background:var(--st-card);box-shadow:inset 0 0 0 1px var(--st-line2);font:500 15px/1 var(--sans);color:var(--st-head)}
.st-ax-prods img{width:34px;height:34px;padding:4px;border-radius:50%;background:#fff;flex:none}
.st-ax-base{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(100%,420px);padding:12px 18px;border-radius:14px;background:var(--st-card);box-shadow:inset 0 0 0 1px var(--st-line2);font:600 15px/1 var(--sans);color:var(--st-head);letter-spacing:.02em}
.st-ax-base b{font:500 12px/1 var(--mono);color:var(--st-or)}

/* the AntaraX A: copied from the end of assets/home.css (12 Oct 2026) so the A behaves exactly as on Home */
.ax-mark{position:relative;width:100%;max-width:440px;justify-self:center;aspect-ratio:760/780;perspective:900px;cursor:pointer;touch-action:pan-y;border-radius:32px;outline:none;-webkit-tap-highlight-color:transparent}
.ax-mark::before{content:"";position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(4,89,247,.42),rgba(82,79,233,.16) 55%,transparent);filter:blur(18px);pointer-events:none;transition:opacity .6s}
.ax-mark:focus-visible{box-shadow:0 0 0 3px #0E1116,0 0 0 5px #FB9800}
.ax-mark>img,.ax-mark>svg{position:relative;display:block;width:100%;height:auto}
.ax-mark>svg{overflow:visible;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.axa-pc,.axa-spark{transform-box:fill-box;transform-origin:center}
.axa-pc{transition:transform 1s cubic-bezier(.3,1.45,.45,1),opacity .5s ease;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.axa-cloth{transition:translate .6s cubic-bezier(.2,.8,.2,1)}
.axa-spark{transition:translate .6s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.3,1.5,.5,1),opacity .4s}
.ax-mark.pre::before{opacity:0}
.ax-mark.pre .axa-pc{opacity:0}
.ax-mark.pre .axa-pc[data-i="0"]{transform:translate(-120px,-110px) rotate(-14deg)}
.ax-mark.pre .axa-pc[data-i="1"]{transform:translate(130px,40px) rotate(12deg)}
.ax-mark.pre .axa-pc[data-i="2"]{transform:translate(-90px,120px) rotate(10deg)}
.ax-mark.pre .axa-spark{opacity:0;transform:scale(.2) rotate(-120deg)}
.ax-mark.on .axa-pc[data-i="1"]{transition-delay:.12s}
.ax-mark.on .axa-pc[data-i="2"]{transition-delay:.24s}
.ax-mark.on .axa-spark{transition-delay:0s,.55s,.55s;animation:axaBreathe 6s ease-in-out 1.6s infinite}
@media (hover:hover){
  .ax-mark.on:not(.burst) .axa-pc{transition-delay:0s}
  .ax-mark.on:not(.burst) .axa-pc[data-i="0"]:hover{transform:translate(-8px,-10px)}
  .ax-mark.on:not(.burst) .axa-pc[data-i="1"]:hover{transform:translate(10px,4px)}
  .ax-mark.on:not(.burst) .axa-pc[data-i="2"]:hover{transform:translate(-8px,10px)}
}
.ax-mark.burst .axa-pc{transition:transform .32s cubic-bezier(.2,.7,.3,1);transition-delay:0s!important}
.ax-mark.burst .axa-pc[data-i="0"]{transform:translate(-44px,-40px) rotate(-5deg)}
.ax-mark.burst .axa-pc[data-i="1"]{transform:translate(48px,14px) rotate(5deg)}
.ax-mark.burst .axa-pc[data-i="2"]{transform:translate(-36px,44px) rotate(4deg)}
.ax-mark.spin .axa-spark{animation:axaSpin 1s cubic-bezier(.3,1.3,.5,1)}
@keyframes axaBreathe{50%{transform:scale(1.08) rotate(8deg)}}
@keyframes axaSpin{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.25) rotate(200deg)}100%{transform:scale(1) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ax-mark>svg,.axa-pc,.axa-cloth,.axa-spark{transition:none!important;animation:none!important}.ax-mark{cursor:default}}

/* ---------- the close (14 Oct 2026, section grammar): after the journey the page returns to paper, then chapter
   titles and oat trays with white cards, as on About. story.js still reveals the quote, the numbers line (its figures
   count once; the year is not counted) and the "What comes next" chapter. ---------- */
.st-end{background:var(--st-paper);color:var(--ink);padding-bottom:16px}
.st-end .blk.st-quote{padding-top:96px}
.st-quote .tray{display:flex;flex-direction:column;align-items:center;gap:40px}
.st-quote blockquote{margin:0 auto;max-width:980px;text-align:center}
.st-quote blockquote p{font:500 clamp(26px,3.4vw,44px)/1.25 var(--sans);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.st-quote footer{display:block;margin-top:20px;font:600 15px/1.4 var(--sans)}
.st-end .st-link{color:var(--ink);text-decoration-color:var(--brand)}
.st-end .st-link:hover{color:var(--brand-text)}
.st-nums-card{width:100%;max-width:1040px;padding:28px 32px}
.st-nums-card .st-nums{margin:0;text-align:center;font:500 clamp(19px,2vw,26px)/1.6 var(--sans);color:var(--ink);text-wrap:balance}
.st-nums b,.st-nums .st-yr{display:inline-block;font:600 1.35em/1 var(--mono);color:var(--brand-text);font-variant-numeric:tabular-nums;letter-spacing:-.03em;padding:0 .08em;vertical-align:-.06em}
.st-motion .st-quote blockquote,.st-motion .st-nums{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.st-motion .st-quote blockquote.in,.st-motion .st-nums.in{opacity:1;transform:none}

.st-next h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.st-next .chap-head p{color:var(--muted)}
.st-next-copy{max-width:720px;margin:0 auto 32px;text-align:center;font-size:18px;line-height:1.6;color:var(--ink);text-wrap:pretty}
.st-divs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.st-divs li{display:flex}
.st-divs .card{flex:1;min-height:150px}
.st-close{max-width:760px;margin:40px auto 0;text-align:center;font:500 clamp(20px,2.2vw,26px)/1.4 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.st-motion .st-next .chap-head,.st-motion .st-next .st-next-copy,.st-motion .st-next .st-close{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.st-motion .st-next.in .chap-head,.st-motion .st-next.in .st-next-copy,.st-motion .st-next.in .st-close{opacity:1;transform:none}
.st-motion .st-next.in .st-next-copy{transition-delay:.15s}
.st-motion .st-next.in .st-close{transition-delay:.5s}
.st-motion .st-divs li{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.st-motion .st-divs.in li{opacity:1;transform:none}
.st-motion .st-divs.in li:nth-child(2){transition-delay:.12s}
.st-motion .st-divs.in li:nth-child(3){transition-delay:.24s}
.st-motion .st-divs.in li:nth-child(4){transition-delay:.36s}

.st-more .frame img{height:auto;aspect-ratio:1200/630;object-fit:cover}
.st-more .meta{margin-top:-2px}
.st-more .tt{font-size:19px}

/* ---------- tablets and phones ---------- */
@media (max-width:760px){
  .st-journey{--route-w:30px;--hud-h:46px}
  .st-hud-in{width:calc(100% - 24px);gap:12px;padding:0 14px}
  .st-year{font-size:19px}
  .st-hud-now{font-size:14px;padding-left:12px}
  .st-rail{display:none}
  .st-hud-bar{left:14px;right:14px}
  html:not(.st-js) .st-hud{display:none}
}
@media (max-width:860px){
  .st-ch{grid-template-columns:minmax(0,1fr);gap:28px;padding:56px 0 40px}
  .st-ch:first-child{border-top:0}
  .st-vis{position:relative;top:auto;order:-1;height:auto;aspect-ratio:1;max-height:min(560px,62vh);width:100%;margin:0 auto}
  .st-copy{padding:0;max-width:none;justify-content:flex-start!important}
  .st-copy p{font-size:17px}
  .st-chapters{padding-right:16px;padding-left:calc(16px + var(--route-w))}
  .st-cap{font-size:12.5px}
  .st-end .blk.st-quote{padding-top:64px}
  .st-quote .tray{gap:28px}
  .st-nums-card{padding:20px}
  .st-next h2{font-size:36px}
  .st-next-copy{font-size:16px;margin-bottom:24px}
  .st-divs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .st-divs .card{min-height:0}
}
@media (max-width:480px){
  .st-open{padding-inline:16px}
  .st-open h1{font-size:40px}
  .st-nums-card .st-nums{font-size:17px}
  .st-nums b,.st-nums .st-yr{font-size:1.25em}
  .st-divs{grid-template-columns:minmax(0,1fr)}
}

/* ---------- reduced motion: a still, complete page ---------- */
@media (prefers-reduced-motion:reduce){
  .st *,.st *::before,.st *::after{animation:none!important;transition:none!important}
  .st-copy>*,.st-quote blockquote,.st-nums,.st-next *{opacity:1!important;transform:none!important}
  .st-end a.card:hover{transform:none!important}
}

/* ---------- colour with meaning (14 Oct 2026) ----------
   Each chapter carries the REKA division it belongs to (data-tone: the car, NanoMalaysia, the shift to automation and
   the autonomy partners are Kinetik; sensing the city is Harmonik; early AI and AntaraX are Heuristik; teaching is
   Esoterik; the studio and the company are REKA orange). story.js draws the chapter's scene in --st-acc; the rail's
   dots take each chapter's colour as it is passed, and the moving marker and year take the current one (--st-cur). */
.st-ch{--st-acc:var(--st-or)}
.st-ch[data-tone]{--st-acc:var(--t)}
.st-ch[data-tone] .st-num{align-self:flex-start;padding:5px 12px;border-radius:999px;background:var(--t-btn);color:var(--t-btn-fg);box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.st-ch .st-link{text-decoration-color:var(--st-acc)}
.st-ch .st-link:hover{color:var(--st-head);text-decoration-thickness:3px}
.st-ch .st-steps li::before{background:var(--st-acc)}
.st-ch .st-chips li{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-acc) 55%,var(--st-line2));transition:background .25s,transform .3s var(--ease)}
.st-ch .st-chips li:hover{background:color-mix(in srgb,var(--st-acc) 22%,var(--st-card));transform:translateY(-2px)}
.st-ch :focus-visible{outline-color:var(--st-acc)}
.st-ch .st-ax-base b{color:var(--st-acc)}
@media (prefers-reduced-motion:reduce){.st-ch .st-chips li:hover{transform:none!important}}

/* What comes next, with a picture (14 Oct 2026): the research going on, beside the words and the four divisions on
   desktop (they sit two by two there), between the words and the divisions on narrow screens. It breaks the run from
   the AntaraX chapter to More articles, on desktop and on phones. The scroll journey above is unchanged. */
.st-ntray{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);grid-template-areas:"pic copy" "pic divs" "close close";gap:0 32px;align-items:start}
.st-npic{grid-area:pic;display:flex;align-self:stretch}
.st-npic .ph{flex:1;width:100%;min-height:300px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
.st-ntray .st-next-copy{grid-area:copy;margin:0 0 24px;text-align:left;max-width:none}
.st-ntray .st-divs{grid-area:divs;grid-template-columns:repeat(2,minmax(0,1fr))}
.st-ntray .st-close{grid-area:close}
@media (max-width:860px){
  .st-ntray{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .st-ntray .st-next-copy{order:0;text-align:center;margin:0 auto 24px}
  .st-npic{order:1;margin-bottom:16px}
  .st-npic .ph{min-height:0;aspect-ratio:16/9}
  .st-ntray .st-divs{order:2}
  .st-ntray .st-close{order:3}
}
@media (max-width:480px){.st-ntray .st-divs{grid-template-columns:minmax(0,1fr)}}
/* phones: the AntaraX scene (mark, product chips, Lapisan bar) is taller than a square, so its frame grows to fit
   instead of spilling over the chapter's year chip below it */
@media (max-width:860px){
  .st-vis.st-vis-ax{aspect-ratio:auto;height:auto;max-height:none;container-type:inline-size}
  .st-vis-ax .st-ax{width:100%;aspect-ratio:auto;padding:24px 20px}
  .st-vis-ax .ax-mark{max-width:min(240px,60cqw)}
}