:root{
  --leaf:#7CA043; --forest:#33672E; --forest-deep:#24482A; --paper:#F7FAF1; --sky:#F2EFDA; --sky-day:#F2EFDA; --sky-rgb:242,239,218; --tod-dur:1.5s;
  --ink:#243028; --ink-soft:#4B584E; --line:rgba(36,48,40,.16); --ochre:#C98B3A;
  --ease:cubic-bezier(.32,.72,0,1);
  --font:"Avenir Next","Avenir","Avenir LT Std","Avenir LT Pro","Nunito Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;z-index:60;left:16px;top:-64px;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:600;transition:top .5s var(--ease)}
.skip:focus{top:16px}

/* ---------- Hero shell ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:660px;max-height:1080px;background:var(--sky);overflow:hidden;isolation:isolate}
/* ---------- sticky site header ---------- */
:root{--head-h:112px;--head-h-s:68px}
html{scroll-padding-top:var(--head-h-s);scroll-snap-type:y mandatory;scroll-behavior:smooth}
/* one screen per section: native CSS scroll snap (no scroll hijacking). Every section is exactly one screen on desktop and
   tablet, so mandatory snapping never hides content; on phones the impact section is taller than the screen, so there it
   only snaps when the scroll already ends near a section edge. */
.snap{scroll-snap-align:start}

/* pagePiling (desktop and tablet, on by default; ?pagepiling=0 turns it off): the page no longer scrolls, the sections are
   stacked like cards. Going down, the next section slides up over the current one, which eases back a little and dims;
   going up, the top card slides back down. */
html.piling,html.piling body{height:100%;overflow:hidden;overscroll-behavior:none}
html.piling{scroll-snap-type:none;scroll-behavior:auto}
html.piling .snap{position:fixed;left:0;right:0;margin:0;will-change:transform;transition:transform var(--pp-dur,.9s) ease,filter var(--pp-dur,.9s) ease}   /* pagePiling-style slide, 850 ms ease */
/* a crisp edge on the card that slides in: forest-green top rule and a short, firm shadow; the card underneath dims */
html.piling main .snap{border-top:6px solid var(--forest);box-shadow:0 -14px 28px -6px rgba(20,30,22,.5)}
html.piling .snap.pp-under{filter:brightness(.6)}
html.piling .snap.pp-below{transform:translateY(100%)}
html.piling #hero{top:0}
html.piling #dampak{top:0;height:100vh;height:100svh;padding-top:calc(var(--head-h-s) + 20px)}   /* a full-screen card; the header sits over its top */
html.piling main{position:static}
/* push transition, the default (?transisi=tutup or ?pagepiling=cover switches to the slide-over above): the two sections move as one strip. Going down, the section in view is
   pushed up and out by the one below it; going up, it is pushed down by the one above. No card edge or dimming. */
html.piling.pp-push .snap{transition:transform var(--pp-dur,.9s) cubic-bezier(.65,0,.35,1)}
html.piling.pp-push main .snap{border-top:0;box-shadow:none}
html.piling.pp-push .snap.pp-under{transform:translateY(-100%);filter:none}
/* the OS reduce-motion setting does not switch the slide off (client request, as for the forest animation) */
/* section navigation: floating dots, right side, vertically centred */
.secnav{position:fixed;z-index:30;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;padding:8px 6px;border-radius:999px;background:var(--paper);box-shadow:0 1px 0 rgba(36,48,40,.08),0 8px 20px -12px rgba(36,48,40,.45)}
.secnav button{position:relative;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.secnav button::before{content:"";width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(36,48,40,.45);transition:transform .5s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease)}
.secnav button:hover::before{box-shadow:inset 0 0 0 2px var(--forest)}
.secnav button[aria-current="true"]::before{background:var(--forest);box-shadow:0 0 0 3px #D8E6C4;transform:scale(1.15)}
.secnav .sn-label{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);padding:4px 10px;border-radius:8px;background:var(--ink);color:var(--paper);font-size:12px;line-height:16px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .4s var(--ease)}
.secnav button:focus-visible .sn-label{opacity:1;transform:translate(0,-50%)}
@media (hover:hover){.secnav button:hover .sn-label{opacity:1;transform:translate(0,-50%)}}   /* touch screens: no hover label, so the first tap always navigates */
.secnav button::after{content:"";position:absolute;top:-3px;bottom:-3px;left:-12px;right:-12px}   /* a finger-sized hit area around each small dot */
.site-head{position:fixed;z-index:40;top:0;left:0;right:0;height:var(--head-h);pointer-events:none;transition:height .6s var(--ease);transform:translateZ(0);backface-visibility:hidden;will-change:transform}   /* its own compositing layer: stays steady while the animated, night-filtered hero scrolls under it (mobile browsers otherwise repaint and flicker it) */
.head-bg{position:absolute;inset:0;background:var(--paper);box-shadow:0 1px 0 rgba(36,48,40,.08),0 12px 24px -20px rgba(36,48,40,.45);opacity:0;transition:opacity .5s var(--ease)}
.scrolled .site-head{height:var(--head-h-s)}
.scrolled .head-bg{opacity:1}
.top-sentinel{position:absolute;top:0;left:0;width:1px;height:48px;pointer-events:none}
.top{position:absolute;z-index:1;top:0;left:0;height:100%;padding:0 40px;pointer-events:none}   /* logo now has a transparent background (images/logo.png) */
.top a{pointer-events:auto;display:block;border-radius:12px}
/* web: the tagline sits to the right of the logo (the intro eyebrow is hidden); mobile keeps the eyebrow above the headline */
.top{display:flex;align-items:center;gap:16px}
.top-tag{margin:0;padding-left:16px;border-left:1px solid rgba(51,103,46,.35);font-size:14px;line-height:20px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);white-space:nowrap}
.intro .eyebrow{display:none}
.top img{display:block;height:64px;width:auto;transition:height .6s var(--ease)}
.scrolled .top img{height:44px}
/* ---------- Top-right menu ---------- */
.menu{position:absolute;z-index:2;top:0;right:40px;height:100%;display:flex;align-items:center;pointer-events:auto}
.menu-toggle{display:none}
.menu-list{display:flex;align-items:center;gap:32px}
.menu ul{display:flex;align-items:center;gap:32px;margin:0;padding:0;list-style:none}
.menu a{position:relative;display:block;padding:4px 0;color:var(--ink);text-decoration:none;font-size:16px;line-height:24px;font-weight:500;white-space:nowrap;border-radius:4px}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--leaf);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1)}
/* language: active code sits on the line with an underline, the other one floats smaller and fainter, as in the reference */
.lang{display:flex;align-items:flex-start;gap:8px}
.lang-btn{position:relative;padding:4px 0;border:0;background:none;cursor:pointer;font-size:16px;line-height:24px;font-weight:500;color:var(--ink);border-radius:4px;transition:color .4s var(--ease),transform .4s var(--ease)}
.lang-btn[aria-pressed="false"]{font-size:14px;line-height:20px;color:var(--ink-soft);opacity:.7;transform:translateY(-8px)}
.lang-btn[aria-pressed="false"]:hover{opacity:1}
.lang-btn[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--leaf)}


.stage{position:absolute;left:0;right:0;top:0;bottom:64px;overflow:hidden;cursor:grab;touch-action:pan-y;outline:none;-webkit-user-select:none;user-select:none}
.stage:focus-visible{box-shadow:inset 0 0 0 3px var(--forest)}
.stage.dragging{cursor:grabbing}
.stage .layer{position:absolute;left:0;top:0;display:block;will-change:transform;overflow:visible;pointer-events:none}
.stage .sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* layers are see-through for the pointer (drag lands on .stage); only the hotspots catch it */
.stage .layer .hs{pointer-events:auto}

/* ---------- Intro copy ---------- */
.intro{position:absolute;z-index:5;left:40px;top:120px;width:min(560px,calc(100% - 80px));
  transition:opacity .6s var(--ease),transform .9s var(--ease),visibility 0s linear 0s}
/* while exploring, the headline and lede stay visible and keep panning with the landscape; the start button and the hint
   step aside, and the copy lets drags through to the landscape */
.hero.exploring .intro{pointer-events:none}
.hero.exploring .intro .cta,.hero.exploring .intro .hint span:not(.key){opacity:0;visibility:hidden}   /* the HHBK / Masyarakat legend stays */
/* a soft wash of sky colour behind the copy keeps it readable over the trees (fades in while exploring) */
.intro::before{content:"";position:absolute;z-index:-1;left:-40px;top:-72px;width:calc(100% + 120px);height:calc(100% - 40px);pointer-events:none;
  background:radial-gradient(ellipse 62% 64% at 38% 50%,rgba(var(--sky-rgb),.94) 55%,rgba(var(--sky-rgb),.7) 75%,rgba(var(--sky-rgb),0) 100%);opacity:0;transition:opacity .6s var(--ease)}
.hero.exploring .intro::before{opacity:1}
.eyebrow{margin:0 0 16px;font-size:14px;line-height:20px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.intro h1{font-family:var(--font-head,var(--font));margin:0 0 24px;font-size:60px;line-height:1;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.lede{margin:0 0 32px;max-width:480px;font-size:18px;line-height:28px;color:var(--ink-soft);text-wrap:pretty}
.cta{display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 20px;border:0;border-radius:12px;background:var(--forest);color:var(--paper);
  font-size:16px;line-height:24px;font-weight:600;cursor:pointer;transition:background-color .5s var(--ease),transform .5s var(--ease)}
.cta:hover{background:var(--forest-deep);transform:translateY(-1px)}
.cta:active{transform:scale(.98)}
.cta svg{width:20px;height:20px;transition:transform .6s var(--ease)}
.cta:hover svg{transform:translateX(4px)}
.hint{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px;line-height:20px;color:var(--ink-soft)}
.key{display:inline-flex;align-items:center;gap:8px}
.key i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.hint > span:not(.key){flex-basis:100%}   /* the "click any point" tip sits on its own line under the legend */
.hint .key i{margin-left:3.5px}   /* the outer ring (3.5 px) lines up with the start button's left edge */

.icon-btn{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:transparent;cursor:pointer;
  transition:background-color .5s var(--ease),transform .5s var(--ease)}
.icon-btn:hover{background:rgba(36,48,40,.06)}
.icon-btn:active{transform:scale(.96)}
.icon-btn:disabled{opacity:.35;cursor:not-allowed}
.icon-btn svg{width:20px;height:20px}
.btn-next{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 16px;border:0;border-radius:12px;background:var(--forest);color:var(--paper);font-size:16px;line-height:24px;font-weight:600;cursor:pointer;
  transition:background-color .5s var(--ease),transform .5s var(--ease)}
.btn-next:hover{background:var(--forest-deep)}
.btn-next:active{transform:scale(.98)}
.btn-next svg{width:20px;height:20px}

/* ---------- Route bar: Hutan → ... → Keberlanjutan ---------- */
.route{position:absolute;z-index:6;left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;gap:24px;padding:0 40px;background:var(--paper)}
.route-title{flex:none;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.stages{flex:1;min-width:0;display:flex;align-items:center;margin:0;padding:0;list-style:none}
.stages li{display:flex;align-items:center;min-width:0}
.stages li+li::before{content:"";flex:none;width:24px;height:2px;margin:0 4px;border-radius:2px;background:var(--line)}
.stages li.done+li::before,.stages li.done::before{background:var(--leaf)}
.stage-btn{display:inline-flex;align-items:center;gap:8px;padding:8px;border:0;border-radius:8px;background:none;cursor:pointer;
  font-size:14px;line-height:20px;font-weight:600;color:var(--ink-soft);white-space:nowrap;transition:color .5s var(--ease),background-color .5s var(--ease)}
.stage-btn:hover{background:rgba(36,48,40,.06);color:var(--ink)}
.stage-btn .n{flex:none;width:10px;height:10px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px rgba(36,48,40,.35);transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
.stages li.done .n{background:var(--leaf);box-shadow:none}
.stage-btn[aria-current="step"]{color:var(--ink)}
.stage-btn[aria-current="step"] .n{background:var(--forest);box-shadow:0 0 0 3px #D8E6C4}
.route-nav{flex:none;display:flex;align-items:center;gap:8px}
/* gender toggle shows the current main character: ♂ man, ♀ woman */
.gender .g-f{display:none}
.gender[aria-pressed="true"] .g-m{display:none}
.gender[aria-pressed="true"] .g-f{display:block}
.farmer .f-female{display:none}
.farmer.fem .f-female{display:inline}
.farmer.fem .f-male{display:none}
.motion{flex:none;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:none;cursor:pointer;font-size:14px;line-height:20px;font-weight:600;color:var(--ink-soft);
  transition:background-color .5s var(--ease)}
.motion:hover{background:rgba(36,48,40,.06)}
.autoplay{display:inline-flex;align-items:center;gap:6px}
.autoplay svg{flex:none;width:16px;height:16px}
.autoplay .i-pause,.autoplay[aria-pressed="true"] .i-play{display:none}
.autoplay[aria-pressed="true"] .i-pause{display:block}
.autoplay[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--paper)}
.autoplay[aria-pressed="true"]:hover{background:var(--forest-deep)}

/* ---------- Hover tooltip ---------- */
.tip{position:absolute;z-index:8;left:0;top:0;max-width:264px;padding:12px 16px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:14px;line-height:20px;pointer-events:none;
  opacity:0;transform:translate(-50%,calc(-100% - 12px)) translateY(4px);transition:opacity .3s var(--ease),transform .5s var(--ease)}
.tip.on{opacity:1;transform:translate(-50%,calc(-100% - 12px))}
.tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;background:var(--ink);transform:rotate(45deg);border-radius:2px}
.tip b{display:block;font-size:16px;line-height:24px}
.tip span{display:block;color:#C9D3C3}
.tip em{display:block;margin-top:4px;font-style:normal;color:#A9D07A}

/* ---------- Story bubble: the active stop's description and field story, at its point in the landscape ----------
   Same look as the hover tooltip, a little wider. It opens by itself when the farmer arrives at a stop, sits above the
   point (below it, or beside it, when there is no room) and follows the point while the landscape moves. */
.sbub{position:absolute;z-index:7;left:0;top:0;width:384px;max-width:calc(100% - 24px);box-sizing:border-box;padding:12px 16px 14px;border-radius:12px;background:var(--sb-bg,var(--ink));color:var(--paper);font-size:14px;line-height:20px;
  box-shadow:0 18px 36px -20px rgba(20,30,22,.7);opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .5s var(--ease),visibility 0s linear .3s}
.sbub{--sb-bg:var(--sb-bg-d,var(--ink))}
.sbub.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .45s var(--ease),transform .7s var(--ease),visibility 0s}
.sbub.below{transform:translateY(-6px)}
.sbub.on.below{transform:none}
.sbub::after{content:"";position:absolute;left:var(--ax,50%);bottom:-6px;width:12px;height:12px;margin-left:-6px;background:var(--sb-bg,var(--ink));transform:rotate(45deg);border-radius:2px}
.sbub.below::after{bottom:auto;top:-6px}
.sbub.free::after{display:none}
.sb-title{margin:0;font-size:16px;line-height:24px;font-weight:700;color:var(--paper);outline:none;text-wrap:balance}
.sb-latin{margin:0;font-size:12px;line-height:16px;color:#C9D3C3}
.sb-lead{margin:8px 0 0;text-wrap:pretty}
.sb-h{margin:10px 0 2px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#A9D07A}
.sb-story{margin:0;color:#D5DDD0;text-wrap:pretty}
.sb-story strong{color:var(--paper)}
/* page number of the stop, e.g. 1/11 (gelembung.nomorHalaman, gelembung.formatNomorHalaman) */
.sb-page{margin:6px 0 0;text-align:right;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;color:#A9D07A;font-variant-numeric:tabular-nums}
/* with the product icons, the number sits in the bubble's bottom-right corner, under the icon column */
.sbub.has-pops .sb-page{position:absolute;right:12px;bottom:12px;width:48px;margin:0;text-align:center;letter-spacing:0}   /* centred under the icon column */
/* HHBK stops: the product icons live in the bubble's top-right corner, one under the other (they only show while it is open) */
.sbub.has-pops{padding-right:76px;min-height:208px}   /* room for the icons and the page number under them */
.sb-pops{position:absolute;top:12px;right:12px;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.sb-pops li{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--paper);cursor:zoom-in;outline:none}
.sb-pops li:focus-visible{box-shadow:0 0 0 5px var(--ring,#8CB25A)}
.sb-pops svg{width:34px;height:34px}
.sbub.on .sb-pops li{animation:sbPop .6s var(--ease) both}
.sbub.on .sb-pops li:nth-child(2){animation-delay:.08s}
.sbub.on .sb-pops li:nth-child(3){animation-delay:.16s}
@keyframes sbPop{from{transform:scale(.3);opacity:0}}
/* phones: a small dark bubble with the stop's title over the active point (the story itself sits above the stage) */
.sbtag{display:none}
/* "Interaksi" button (bottom-left of the landscape) and its bubble listing what visitors can do (PENGATURAN.tombolInteraksi) */
.ix-bar{position:absolute;z-index:8;left:24px;bottom:20px;display:flex;gap:8px}
.ix-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border:1px solid rgba(36,48,40,.16);border-radius:999px;
  background:rgba(247,250,241,.92);color:var(--ink);font:inherit;font-size:14px;line-height:20px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px -12px rgba(20,30,22,.6);
  transition:background-color .3s var(--ease),transform .3s var(--ease)}
.ix-btn:hover{background:var(--paper);transform:translateY(-1px)}
.ix-btn:focus-visible{outline:3px solid var(--ring,#8CB25A);outline-offset:2px}
.ix-btn svg{width:18px;height:18px;flex:none}
.ix-btn[aria-expanded="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ix-pop{position:absolute;z-index:9;left:24px;bottom:72px;width:340px;max-width:calc(100% - 48px);max-height:calc(100% - 96px);display:flex;flex-direction:column;box-sizing:border-box;padding:14px 16px 16px;
  border-radius:12px;background:var(--ink);color:#D5DDD0;font-size:14px;line-height:20px;box-shadow:0 18px 36px -20px rgba(20,30,22,.7);
  opacity:0;transform:translateY(8px);transition:opacity .25s var(--ease),transform .4s var(--ease)}
.ix-pop.on{opacity:1;transform:none}
.ix-pop[hidden]{display:none!important}   /* a closed bubble leaves the page (display:flex above would otherwise keep it as an invisible layer that swallows taps and drags) */
.ix-pop:not(.on){pointer-events:none}   /* also while it fades out */
/* a slim scrollbar, only when the list is taller than the bubble (Chrome / Edge / Safari; Firefox below) */
/* only the list scrolls (the title and the arrow stay put): a slim bar, and only when the list is taller than the bubble */
.ix-body{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;margin-right:-8px;padding-right:8px}   /* the list keeps its scroll: it never chains to the page */
.ix-body::-webkit-scrollbar{width:4px}
.ix-body::-webkit-scrollbar-track{background:transparent}
.ix-body::-webkit-scrollbar-thumb{background:rgba(247,250,241,.28);border-radius:4px}
.ix-body::-webkit-scrollbar-thumb:hover{background:rgba(247,250,241,.45)}
@supports (-moz-appearance:none){.ix-body{scrollbar-width:thin;scrollbar-color:rgba(247,250,241,.3) transparent}}
.ix-pop::after{content:"";position:absolute;left:var(--ax,34px);margin-left:-6px;bottom:-6px;width:12px;height:12px;background:var(--ink);transform:rotate(45deg);border-radius:2px}
.ix-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.ix-head h2{margin:0;font-size:16px;line-height:24px;font-weight:700;color:var(--paper)}
.ix-close{flex:none;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(247,250,241,.14);color:var(--paper);cursor:pointer}
.ix-close svg{width:12px;height:12px}
.ix-pop ul{margin:0;padding:0 0 0 18px;display:grid;gap:6px}
.ix-pop li::marker{color:#A9D07A}
.ix-pop strong{color:var(--paper)}
.hero.no-ix #ix-btn,.hero.no-ix #ix-pop,.hero.no-fx #fx-btn,.hero.no-fx #fx-pop{display:none}
.tw-ic{display:inline-flex}
.tw-ic svg,.tw-opt svg{width:18px;height:18px;flex:none}
.tw-pop{width:300px}
.tw-list{display:grid;gap:6px;margin:0;padding:0}
.tw-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:1px solid rgba(247,250,241,.14);border-radius:10px;background:rgba(247,250,241,.06);
  color:#D5DDD0;font:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.tw-opt:hover{background:rgba(247,250,241,.14)}
.tw-opt:focus-visible{outline:3px solid var(--ring,#8CB25A);outline-offset:1px}
.tw-opt[aria-checked="true"]{background:#8CB25A;border-color:#8CB25A;color:#1E2A20;font-weight:700}
.tw-opt .tw-def{font-style:normal;font-weight:400;opacity:.75}
.tw-opt small{display:block;font-size:12px;line-height:16px;font-weight:400;opacity:.8}
.hero.no-tw #tw-btn,.hero.no-tw #tw-pop{display:none}
.fx-pop{width:380px;max-height:min(500px,calc(100% - 210px))}   /* stays clear of the header logo */
.ix-pop h3{margin:12px 0 4px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#A9D07A}
.ix-pop h3:first-child{margin-top:0}
.fx-pop li i{color:#C9D3C3}
.fx-beh{display:block;margin-top:4px}
.fx-beh em{font-style:normal;font-weight:600;color:#A9D07A}
@media (max-width:760px){
  .ix-bar{left:12px;bottom:12px;gap:8px}
  .route .ix-bar{position:absolute;left:12px;bottom:calc(100% + 8px);z-index:8}   /* sits just above the sticky control bar */
  .ix-btn{position:relative;justify-content:center;width:30px;height:30px;padding:0;gap:0;background:rgba(247,250,241,.86)}   /* phones: small icon-only buttons, so they hide less of the scene */
  .ix-btn svg,.ix-btn .tw-ic svg{width:15px;height:15px}
  .ix-btn::after{content:"";position:absolute;inset:-6px}   /* a finger-sized tap area around the small button */
  .ix-btn .t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* the label stays for screen readers */
  /* phones: the stage is short and clips, so the bubble floats above the button, over the page (closes on scroll) */
  .ix-pop{position:fixed;z-index:70;left:12px;right:12px;width:auto;max-width:none;max-height:calc(100svh - 170px);font-size:13px;line-height:18px}
}
/* elements switched off in PENGATURAN.elemen */
.hero.hide-monyet .monkey,.hero.hide-enggang .hornbill,.hero.hide-rangkong .hb,.hero.hide-maleo .maleo,.hero.hide-tupai .squirrel,.hero.hide-lebah .bees,
.hero.hide-pesepeda .cyclist,.hero.hide-wargaHHBK .crew,
.hero.hide-wargaMadu .crew[data-spot="madu"],.hero.hide-wargaRotan .crew[data-spot="rotan"],.hero.hide-wargaJernang .crew[data-spot="jernang"],
.hero.hide-wargaTengkawang .crew[data-spot="tengkawang"],.hero.hide-wargaAren .crew[data-spot="aren"],.hero.hide-wargaObat .crew[data-spot="obat"],.hero.hide-wargaBuah .crew[data-spot="buah"],
.hero.hide-wargaKampung .actor[data-spot="kampung"],.hero.hide-wargaKampung .actor[data-spot="produksi"],.hero.hide-wargaKampung .actor[data-spot="lestari"],
.hero.hide-wargaPasar .actor[data-spot="pasar"],.hero.hide-wargaPasar .vd-wrap{display:none}
@media (max-width:760px){
  .sbtag{display:block;position:absolute;z-index:7;left:0;top:0;width:max-content;max-width:min(210px, calc(100% - 24px));text-align:center;box-sizing:border-box;padding:4px 10px;border-radius:8px;
    background:var(--tag-bg,#243028);color:var(--tag-tx,#F7FAF1);font-size:13px;line-height:17px;font-weight:700;
    transform:translate(-50%,calc(-100% - 10px)) translateY(4px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s var(--ease),transform .5s var(--ease),visibility 0s linear .3s}
  .sbtag.on{opacity:1;visibility:visible;transform:translate(-50%,calc(-100% - 10px));transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s}
  .sbtag.off-stage{opacity:0;visibility:hidden}
}
.sbtag-t{display:block;text-wrap:balance}   /* long titles wrap to two balanced lines instead of one wide one */
.sbtag-arrow{position:absolute;width:10px;height:10px;margin-left:-5px;border-radius:2px;transform:rotate(45deg);pointer-events:none}
/* a small x right after the title closes the story and brings the intro back (its touch area is larger than it looks) */
.sb-head{display:flex;align-items:center;gap:8px}
.sb-close{flex:none;position:relative;display:grid;place-items:center;width:16px;height:16px;padding:0;border:0;border-radius:50%;background:rgba(247,250,241,.18);color:var(--paper);cursor:pointer;transition:background-color .2s var(--ease)}
.sb-close::before{content:"";position:absolute;inset:-12px}
.sb-close svg{width:8px;height:8px}
.sb-close:hover{background:rgba(247,250,241,.32)}
.sb-close:active{transform:scale(.9)}
.sb-close:focus-visible{outline:2px solid var(--ring,#8CB25A);outline-offset:2px}
/* hovered / open icon: a thick ring around the white disc, growing outward (colour: gelembung.warnaBorderIkon) */
.sb-pops li:hover,.sb-pops li.on{box-shadow:0 0 0 5px var(--ring,#8CB25A)}
.sb-pops li{transition:box-shadow .25s var(--ease)}
/* the photo of the hovered icon grows out of the bubble's side as part of it: same dark ground, flush edge, the joined
   corners go square (to the right, or to the left when there is no room; on phones it opens inside the bubble) */
.sbub{transition-property:opacity,transform,visibility,border-radius}
.sb-photo{position:absolute;z-index:1;top:0;bottom:0;left:calc(100% - 1px);width:var(--pw,220px);box-sizing:border-box;padding:12px 12px 10px 4px;display:flex;flex-direction:column;gap:6px;
  background:var(--sb-bg,var(--ink));border-radius:0 12px 12px 0;box-shadow:0 18px 36px -20px rgba(20,30,22,.7);pointer-events:none;
  opacity:0;clip-path:inset(0 100% 0 0);transition:clip-path .45s var(--ease),opacity .2s var(--ease)}
/* two stacked photos cross-fade when the next product opens; the caption fades out, changes, and fades back in */
.sb-ph-frame{position:relative;flex:1 1 auto;min-height:0;border-radius:8px;overflow:hidden;background:#34413A}
.sb-ph-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--ph-fade,.5s) ease-in-out}
.sb-ph-frame img.show{opacity:1}
.sb-photo p{margin:0;font-size:13px;line-height:18px;font-weight:600;color:var(--paper);text-align:center;text-wrap:balance;transition:opacity .2s ease-in-out}
.sb-photo p .cap{display:block;transition:opacity calc(var(--ph-fade,.5s) * .4) ease-in-out}
.sb-photo p .cap.dip{opacity:.15}   /* the name dims briefly, changes while dim, and comes back: never two names on top of each other */
.sbub.ph-left .sb-photo{left:auto;right:calc(100% - 1px);padding:12px 4px 10px 12px;border-radius:12px 0 0 12px;clip-path:inset(0 0 0 100%)}
.sbub.ph-in .sb-photo{left:0;right:72px;width:auto;padding:12px;border-radius:12px 0 0 12px;box-shadow:none;clip-path:inset(0 0 0 100%)}
.sbub.ph-on .sb-photo{opacity:1;clip-path:inset(0)}
.sbub.ph-on:not(.ph-left):not(.ph-in){border-top-right-radius:0;border-bottom-right-radius:0}
.sbub.ph-on.ph-left{border-top-left-radius:0;border-bottom-left-radius:0}
.sb-uses{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px}
.sb-uses li{padding:2px 8px;border-radius:999px;background:rgba(247,250,241,.14);font-size:12px;line-height:16px;color:var(--paper)}
.sb-products{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sb-products li{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;line-height:16px;color:#DCE3D6;text-wrap:balance;border-radius:8px;outline-offset:2px}
.sb-products svg{flex:none;width:28px;height:28px;padding:3px;border-radius:8px;background:var(--paper)}
.sb-products li[data-photo]{cursor:zoom-in}
.sb-products li[data-photo]:hover span{text-decoration:underline;text-underline-offset:2px}

/* ---------- Scene: hotspots ---------- */
.hs{cursor:pointer;outline:none}
.hs .m{transform:scale(var(--ms,1));transform-box:fill-box;transform-origin:center;transition:transform .6s var(--ease)}
.hs:hover .m,.hs:focus-visible .m{transform:scale(calc(var(--ms,1) * 1.12))}
.hs-hit{fill:transparent}
.hs-ring{fill:#F7FAF1;stroke:#243028;stroke-width:2.2;transition:fill .5s var(--ease)}
.hs-dot{fill:var(--c);transition:fill .5s var(--ease)}
.hs:hover .hs-ring,.hs.open .hs-ring{fill:var(--c)}
.hs:hover .hs-dot,.hs.open .hs-dot{fill:#F7FAF1}
.hs-pulse{fill:none;stroke:#F7FAF1;stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:pulse 3.2s var(--ease) infinite}
.hs.seen .hs-pulse{display:none}
.hs-focus{fill:none;stroke:#243028;stroke-width:3;opacity:0}
.hs:focus-visible .hs-focus{opacity:1}
.pop-in{transform:scale(.2);opacity:0;transform-box:fill-box;transform-origin:center;transition:transform .7s var(--ease),opacity .35s var(--ease)}
.pop-line{stroke:#243028;stroke-width:1.5;stroke-dasharray:2 4;stroke-linecap:round;opacity:0;transition:opacity .4s var(--ease)}
.hs.open .pop-in{transform:scale(1);opacity:1}
.hs.open .pop-line{opacity:.55}
.hs.open .pop:nth-child(2) .pop-in{transition-delay:.08s}
.hs.open .pop:nth-child(3) .pop-in{transition-delay:.16s}
.pops{pointer-events:none}
.hs.open .pop{pointer-events:auto;cursor:zoom-in}
/* product photo in a speech bubble (same shape language as the logo), shown on hover / focus / tap */
.pbubble{position:absolute;z-index:9;left:0;top:0;padding:4px;background:var(--paper);border-radius:16px;box-shadow:0 1px 0 rgba(36,48,40,.08),0 16px 32px -16px rgba(36,48,40,.6);pointer-events:none;
  opacity:0;transform:translate(-50%,calc(-100% - 16px)) scale(.9);transform-origin:50% 100%;transition:opacity .25s var(--ease),transform .5s var(--ease)}
.pbubble.on{opacity:1;transform:translate(-50%,calc(-100% - 16px)) scale(1)}
.pbubble img{display:block;width:250px;height:250px;border-radius:12px;background:#E9F0DB}
.pbubble.sm img{width:100px;height:100px}   /* from the field note list: compact 100 × 100 */
.pb-title{display:block;max-width:250px;margin:0;padding:8px 4px 4px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink);text-align:center;text-wrap:balance}
.pbubble.sm .pb-title{display:none}   /* the note list already shows the name beside the icon */
.pbubble::after{content:"";position:absolute;left:calc(50% - 10px);bottom:-14px;width:30px;height:16px;background:var(--paper);clip-path:path("M0 0 C7 5 10 10 7 16 C15 12 24 6 30 0 Z")}
.pbubble.below{transform:translate(-50%,16px) scale(.9);transform-origin:50% 0}
.pbubble.below.on{transform:translate(-50%,16px) scale(1)}
.pbubble.below::after{bottom:auto;top:-14px;transform:scaleY(-1)}
@keyframes pulse{0%{transform:scale(.9);opacity:.95}70%,100%{transform:scale(2.1);opacity:0}}

/* ---------- Scene: farmer ---------- */
.f-leg,.f-arm{transform-box:fill-box;transform-origin:50% 0}
.farmer{transition:opacity .35s var(--ease)}
.farmer.fade{opacity:0}
.farmer.walking .f-leg-f{animation:legA .74s ease-in-out infinite}
.farmer.walking .f-leg-b{animation:legB .74s ease-in-out infinite}
.farmer.walking .f-arm-f{animation:armB .74s ease-in-out infinite}
.farmer.walking .f-arm-b{animation:armA .74s ease-in-out infinite}
.farmer.walking .f-bob{animation:bob .37s ease-in-out infinite alternate}
.farmer:not(.walking) .f-bob{animation:breathe 3.6s ease-in-out infinite alternate}
.farmer.reach .f-arm-f{animation:reach 1.6s var(--ease)}
/* livelier farmer (all small): lean into the walk, anjat and caping lag behind the step (follow-through),
   the anjat settles after stopping, a slow weight shift at rest, and a random fidget every few seconds */
.f-lean{transform-box:view-box;transform-origin:0 0;transition:transform .5s var(--ease)}
.farmer.walking .f-lean{transform:rotate(3deg)}
.farmer:not(.walking) .f-lean{animation:fWeight 5.2s ease-in-out infinite alternate}
.f-pack{transform-box:view-box;transform-origin:-20px -50px}
.farmer.walking .f-pack{animation:fPackBob .37s ease-in-out .09s infinite alternate}
.farmer.settle .f-pack{animation:fPackSettle .8s ease-out}
.f-head{transform-box:view-box;transform-origin:0 -92px}
.farmer.walking .f-head{animation:fHeadLag .37s ease-in-out .06s infinite alternate}
.farmer.idle-look .f-head{animation:fLook 3.2s ease-in-out}
.farmer.idle-hat .f-arm-f{animation:fHat 2.6s ease-in-out}
.farmer.idle-hat .f-head{animation:fNod 2.6s ease-in-out}
.farmer.idle-wipe .f-arm-f{animation:fWipe 2.4s ease-in-out}
.farmer.idle-strap .f-arm-b{animation:fStrapArm 1.8s ease-in-out}
.farmer.idle-strap .f-pack{animation:fStrapPack 1.8s ease-in-out}
@keyframes fWeight{from{transform:translateX(-.6px) rotate(-.5deg)}to{transform:translateX(.6px) rotate(.5deg)}}
@keyframes fPackBob{from{transform:translateY(0) rotate(0)}to{transform:translateY(1.6px) rotate(-2deg)}}
@keyframes fPackSettle{0%{transform:rotate(-5deg)}40%{transform:rotate(3deg)}70%{transform:rotate(-1.2deg)}100%{transform:rotate(0)}}
@keyframes fHeadLag{from{transform:rotate(-1.5deg)}to{transform:rotate(1.2deg)}}
@keyframes fLook{0%,100%{transform:rotate(0)}20%,40%{transform:rotate(-7deg)}60%,80%{transform:rotate(5deg) translateY(-.5px)}}
@keyframes fHat{0%,100%{transform:rotate(0)}30%,65%{transform:rotate(-150deg)}45%{transform:rotate(-143deg)}}
@keyframes fNod{0%,100%{transform:rotate(0)}40%,60%{transform:rotate(4deg)}}
@keyframes fWipe{0%,100%{transform:rotate(0)}25%{transform:rotate(-150deg)}45%{transform:rotate(-168deg)}65%{transform:rotate(-146deg)}80%{transform:rotate(-40deg)}}
@keyframes fStrapArm{0%,100%{transform:rotate(0)}30%,70%{transform:rotate(-38deg)}}
@keyframes fStrapPack{0%,100%{transform:translateY(0)}35%{transform:translateY(-3px) rotate(2deg)}55%{transform:translateY(-1px)}}
/* fidget "rest" (side view): squat with a straight back to set the anjat down, stretch, squat again, slip the straps on,
   stand up with the load and pull both straps down at the chest. Poses are computed per frame by the script (restFrame). */
.f-front{display:none;opacity:0;transition:opacity .15s ease}
.f-lean{transition:transform .5s var(--ease),opacity .22s ease}
.farmer.fronting .f-front{opacity:1}
.farmer.fronting .f-lean{opacity:0;animation:none}
.farmer .ff-f{display:none}
.farmer.fem .ff-f{display:inline}
.farmer.fem .ff-m{display:none}
.hero.still .farmer .f-lean,.hero.still .farmer .f-head,.hero.still .farmer .f-pack,.hero.still .farmer .f-upper,.hero.still .farmer .f-arm-b{animation:none!important}
@keyframes legA{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-20deg)}}
@keyframes legB{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}}
@keyframes armA{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}
@keyframes armB{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-2.2px)}}
@keyframes breathe{from{transform:translateY(0)}to{transform:translateY(-.8px)}}
@keyframes reach{0%{transform:rotate(0)}40%,70%{transform:rotate(-125deg)}100%{transform:rotate(0)}}

/* ---------- Scene: people at work, only while their stop is active ---------- */
.p-arm{transform-box:view-box;transform-origin:4px -85px}   /* shoulder */
.p-up{transform-box:view-box;transform-origin:0 -52px}      /* hip */
.actor.on.a-climb{animation:aClimb 2.2s ease-in-out infinite}
.actor.on.a-climb .p-arm{animation:aReach 2.2s ease-in-out infinite}
.actor.on.a-tap .p-arm{animation:aTap 1.1s ease-in-out infinite}
.actor.on.a-tap{animation:aClimb 3.2s ease-in-out infinite}
.actor.on.a-gather .p-up{animation:aGather 1.8s ease-in-out infinite}
.actor.on.a-gather .p-arm{animation:aScoop 1.8s ease-in-out infinite}
.actor.on.a-plant .p-up{animation:aGather 2.2s ease-in-out infinite}
.actor.on.a-plant .p-arm{animation:aScoop 2.2s ease-in-out infinite}
.actor.on.a-pick .p-arm{animation:aPick 1.4s ease-in-out infinite}
.actor.on.a-weave .p-arm{animation:aWeave .9s ease-in-out infinite alternate}
.actor.on.a-weave .p-up{animation:aNod 3s ease-in-out infinite}
.actor.on.a-stir .p-arm{animation:aStir 1.2s ease-in-out infinite alternate}
.actor.on.a-pack .p-arm{animation:aPack 1.6s ease-in-out infinite}
.actor.on.a-offer .p-arm{animation:aOffer 3s ease-in-out infinite}
.actor.on.a-nod .p-up{animation:aNod 2.4s ease-in-out infinite}
.actor.on.a-crack .p-arm{animation:aCrack .7s cubic-bezier(.5,0,.2,1) infinite}
@keyframes aClimb{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes aReach{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes aTap{0%,100%{transform:rotate(0)}40%{transform:rotate(-22deg)}60%{transform:rotate(-18deg)}}
@keyframes aGather{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
@keyframes aScoop{0%,100%{transform:rotate(0)}50%{transform:rotate(26deg)}}
@keyframes aPick{0%,100%{transform:rotate(0)}45%,55%{transform:rotate(-58deg)}}
@keyframes aWeave{from{transform:rotate(-8deg)}to{transform:rotate(12deg)}}
@keyframes aStir{from{transform:rotate(-16deg)}to{transform:rotate(18deg)}}
@keyframes aPack{0%,100%{transform:rotate(0)}35%,60%{transform:rotate(-40deg)}}
@keyframes aOffer{0%,15%,100%{transform:rotate(0)}40%,75%{transform:rotate(-62deg)}}
@keyframes aNod{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
@keyframes aCrack{0%,100%{transform:rotate(-46deg)}45%{transform:rotate(6deg)}}

/* ---------- Scene: HHBK work routines (crew actors, driven by the step director in the script) ---------- */
.crew-body{transition:transform 1s linear}
.crew .p-leg{transform-box:fill-box;transform-origin:50% 0}
.crew .ap.walking .p-leg-f{animation:legA .8s ease-in-out infinite}
.crew .ap.walking .p-leg-b{animation:legB .8s ease-in-out infinite}
.crew .ap.walking{animation:bob .4s ease-in-out infinite alternate}
.crew.on[data-a="climb"] .ap{animation:aClimb 1.1s ease-in-out infinite}
.crew.on[data-a="climb"] .p-arm{animation:aReach 1.1s ease-in-out infinite}
.crew.on[data-a="wave"] .p-arm{animation:cWave .7s ease-in-out infinite alternate}
.crew.on[data-a="chop"] .p-arm{animation:cChop .5s cubic-bezier(.5,0,.2,1) infinite}
.crew.on[data-a="knock"] .p-arm{animation:cKnock .32s ease-in-out infinite alternate}
.crew.on[data-a="tug"] .p-up{animation:cTug 1.1s ease-in-out infinite}
.crew.on[data-a="strip"] .p-arm{animation:cStrip .75s ease-in-out infinite alternate}
.crew.on[data-a="scoop"] .p-up{animation:aGather 1.6s ease-in-out infinite}
.crew.on[data-a="scoop"] .p-arm{animation:aScoop 1.6s ease-in-out infinite}
.crew.on[data-a="pick"] .p-arm{animation:aPick 1.3s ease-in-out infinite}
.crew.on[data-a="pound"] .ap{animation:cPoundBody .7s ease-in-out infinite}
.crew.on[data-a="pound"] .p-arm{animation:cPound .7s ease-in-out infinite}
.crew.on[data-a="sieve"] .ap{animation:cSieve .5s ease-in-out infinite alternate}
.crew.on[data-a="pack"] .p-arm{animation:aPack 1.4s ease-in-out infinite}
.crew.on[data-a="spread"] .p-arm{animation:aStir 1s ease-in-out infinite alternate}
.crew.on[data-a="roll"] .p-arm{animation:aStir .8s ease-in-out infinite alternate}
.crew.on[data-a="lift"] .p-arm{animation:cLift 2.2s ease-in-out infinite}
.crew.on[data-a="nod"] .p-up{animation:aNod 1.6s ease-in-out infinite}
.crew.on[data-a="hold"] .p-arm{transform:rotate(-8deg)}
@keyframes cWave{from{transform:rotate(-28deg)}to{transform:rotate(14deg)}}
@keyframes cChop{0%,100%{transform:rotate(-48deg)}45%{transform:rotate(12deg)}}
@keyframes cKnock{from{transform:rotate(-14deg)}to{transform:rotate(6deg)}}
@keyframes cTug{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes cStrip{from{transform:rotate(-18deg)}to{transform:rotate(22deg)}}
@keyframes cPound{0%,100%{transform:rotate(-70deg)}50%{transform:rotate(4deg)}}
@keyframes cPoundBody{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes cSieve{from{transform:translateX(-3px) rotate(-2deg)}to{transform:translateX(3px) rotate(2deg)}}
@keyframes cLift{0%,100%{transform:rotate(0)}40%,70%{transform:rotate(-60deg)}}
/* props */
.pr-fall{transition:transform 1s cubic-bezier(.55,0,1,.45)}
.pr-slow{transition:transform 3s linear}
.pr-rope{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(.01);transition:transform 3s linear}
.pr-smoke circle{transform-box:fill-box;transform-origin:center;animation:smoke 2.4s ease-out infinite}
.pr-puff circle{transform-box:fill-box;transform-origin:center;animation:cPuff .8s ease-out infinite}
@keyframes cPuff{0%{transform:translate(0,0) scale(.4);opacity:.9}100%{transform:translate(6px,-14px) scale(1.4);opacity:0}}
.pr-pestle{animation:cPestle .7s ease-in-out infinite}
@keyframes cPestle{0%,100%{transform:translateY(-16px)}50%{transform:translateY(2px)}}
.crew[data-s="lower"] .pr-rope,.crew[data-s="down"] .pr-rope{transform:scaleY(442)}
.crew[data-s="lower"] .pr-bucket,.crew[data-s="down"] .pr-bucket{transform:translateY(442px)}
.crew[data-s="drop"] .pr-jfruit{transform:translate(-36px,52px)}
.crew[data-s="fall"] .pr-durian,.crew[data-s="w1"] .pr-durian,.crew[data-s="pickup"] .pr-durian{transform:translateY(358px)}
.hero.still .crew .ap,.hero.still .crew .p-arm,.hero.still .crew .p-up{animation:none!important}
/* pasar vendor (left stall): arranges the fruit, shifts along the counter, now and then steps out to tidy the baskets */
.vend .p-leg{transform-box:fill-box;transform-origin:50% 0}
.vend .ap.walking .p-leg-f{animation:legA .8s ease-in-out infinite}
.vend .ap.walking .p-leg-b{animation:legB .8s ease-in-out infinite}
.vend .ap.walking{animation:bob .4s ease-in-out infinite alternate}
.vend[data-a="pack"] .p-arm{animation:aPack 1.9s ease-in-out infinite}
.vend[data-a="offer"] .p-arm{animation:aOffer 3s ease-in-out infinite}
.vend[data-a="scoop"] .p-up{animation:aGather 2.2s ease-in-out infinite}
.vend[data-a="scoop"] .p-arm{animation:aScoop 2.2s ease-in-out infinite}
.hero.still .vend .ap,.hero.still .vend .p-arm,.hero.still .vend .p-up{animation:none!important}

/* ---------- Scene: fauna (positions driven by script, wings/tail by CSS) ---------- */
/* Prevost's squirrel: quick bounding run, tail flicks, sits upright nibbling fruit held in the forepaws */
.sq-tail{transform-box:fill-box;transform-origin:100% 100%}
.squirrel.flick .sq-tail{animation:sqFlick .5s ease-in-out 3}
.squirrel.eating .sq-headE{transform-box:fill-box;transform-origin:50% 100%;animation:sqNibble .35s ease-in-out infinite alternate}
.squirrel.running .sq-legs{transform-box:fill-box;transform-origin:50% 0;animation:sqRun .18s ease-in-out infinite alternate}
.squirrel .sq-run{display:none}
.squirrel.running .sq-run,.squirrel.climbing .sq-run{display:inline}
.squirrel.running .sq-sit,.squirrel.climbing .sq-sit{display:none}
@keyframes sqFlick{0%,100%{transform:rotate(0)}50%{transform:rotate(-22deg)}}
@keyframes sqNibble{from{transform:translateY(0)}to{transform:translateY(1.2px) rotate(4deg)}}
@keyframes sqRun{from{transform:scaleY(1)}to{transform:scaleY(.6) translateY(1px)}}

/* maleo: chicken-like gait with a bobbing head, pecks the forest floor, scratches the ground with strong feet */
.ml-leg{transform-box:fill-box;transform-origin:50% 0}
.maleo.walking .ml-leg-f{animation:mlStepA .5s ease-in-out infinite}
.maleo.walking .ml-leg-b{animation:mlStepB .5s ease-in-out infinite}
.maleo.walking .ml-head{animation:mlBob .5s ease-in-out infinite}
.maleo.running .ml-leg-f{animation:mlStepA .26s ease-in-out infinite}
.maleo.running .ml-leg-b{animation:mlStepB .26s ease-in-out infinite}
.maleo.running .ml-body{animation:bob .13s ease-in-out infinite alternate}
.ml-fore{transform-box:view-box;transform-origin:9px -27px}
.maleo.pecking .ml-fore{animation:mlPeck 1s ease-in-out infinite}
.maleo.scratching .ml-leg-f{animation:mlScratch .45s ease-in-out infinite}
.maleo.looking .ml-head{animation:mlLook 2.4s ease-in-out infinite}
.ml-dust{display:none}
/* ---------- startle (PENGATURAN.kaget): what can be tapped, and how each one reacts ----------
   People: the startle reflex, a jolt with shoulders up and head forward, a brief freeze, then they turn to look.
   Monkey: flees with a fast long leap to another crown. Hornbill: hard, quick wingbeats, takes off at once.
   Squirrel: freezes flicking its tail fast (alarm), then climbs up out of sight or dashes on. Giant honeybees: the
   colony's shimmering wave runs over the combs and the bees around them speed up. Cyclist: wobbles and slows. */
.hero.kaget-monyet .stage .layer .monkey,.hero.kaget-rangkong .stage .layer .hb,.hero.kaget-tupai .stage .layer .squirrel,
.hero.kaget-lebah .stage .layer .bees,.hero.kaget-lebah .stage .layer .comb,.hero.kaget-pesepeda .stage .layer .cyclist,
.hero.kaget-warga .stage .layer .actor,.hero.kaget-warga .stage .layer .vend,.hero.kaget-tokohUtama .stage .layer #farmer{pointer-events:auto;cursor:pointer}
@keyframes pJolt{0%{transform:translateY(0)}16%{transform:translateY(-3px)}38%{transform:translateY(-1px)}100%{transform:translateY(0)}}
@keyframes pStartleUp{0%{transform:rotate(0)}12%{transform:rotate(5deg)}30%,70%{transform:rotate(-7deg)}100%{transform:rotate(0)}}
@keyframes pStartleArm{0%{transform:rotate(0)}15%{transform:rotate(-35deg)}60%{transform:rotate(-18deg)}100%{transform:rotate(0)}}
.actor.startled,.vend.startled{animation:pJolt .5s cubic-bezier(.2,.9,.3,1)!important}
.actor.startled .p-up,.vend.startled .p-up{animation:pStartleUp 1.4s ease-out!important}
.actor.startled .p-arm,.vend.startled .p-arm{animation:pStartleArm 1.4s ease-out!important}
@keyframes fStartleHead{0%{transform:rotate(0)}15%{transform:rotate(6deg)}35%,70%{transform:rotate(-10deg)}100%{transform:rotate(0)}}
.farmer.startled .f-bob{animation:pJolt .5s cubic-bezier(.2,.9,.3,1)!important}
.farmer.startled .f-head{animation:fStartleHead 1.4s ease-out!important}
.cy-rider{transform-box:view-box;transform-origin:0 0}
@keyframes cyWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.cyclist.startled .cy-rider{animation:cyWobble .3s ease-in-out 4}
.cyclist.startled .cy-walker,.cyclist.startled .cy-fix{animation:pJolt .5s cubic-bezier(.2,.9,.3,1)}
.monkey.startled .mk-sit{animation:pJolt .4s cubic-bezier(.2,.9,.3,1)}
.hb.scared .bd-wing,.hb.scared .bd-wing2{animation-duration:.24s!important}
.squirrel{transition:opacity .35s ease}
.squirrel.alarm .sq-tail{animation:sqFlick .16s ease-in-out infinite!important}
@keyframes combShimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
.comb.shimmer path{animation:combShimmer .34s ease-in-out 6}
.comb.shimmer path:nth-child(3n+2){animation-delay:.08s}
.comb.shimmer path:nth-child(3n){animation-delay:.16s}
.bees.agitated{animation-duration:.7s!important}
.bees.b2.agitated{animation-duration:.9s!important}
/* shy forest-floor forager: alert (neck up), running (leaning, wing a little open), flying (wing flaps, feet tucked),
   gliding down (wing held open), perched on a bush top; leaf bits fly backwards when it scratches */
.ml-lean{transform-box:view-box;transform-origin:0 0;transition:transform .25s ease}
.ml-wing{transform-box:view-box;transform-origin:7px -28px;transition:transform .2s ease}
.ml-fore{transition:transform .25s ease}
.maleo.running .ml-lean{transform:rotate(9deg)}
.maleo.running .ml-wing{transform:rotate(14deg)}
.maleo.alert .ml-fore{transform:translate(1px,-5px) rotate(-8deg)}
.maleo.alert .ml-head,.maleo.perched .ml-head{animation:mlLook 1.6s ease-in-out infinite}
.maleo.flying .ml-wing{animation:mlFlap .15s ease-in-out infinite alternate}
.maleo.flying .ml-lean{transform:rotate(-8deg)}
.maleo.gliding .ml-wing{transform:rotate(42deg)}
.maleo.gliding .ml-lean{transform:rotate(8deg)}
.maleo.flying .ml-leg,.maleo.gliding .ml-leg{transform:rotate(62deg) scaleY(.5)}
.maleo.flying .ml-leg-f,.maleo.gliding .ml-leg-f{opacity:0}   /* feet tucked: only the far leg trails behind */
@keyframes mlFlap{from{transform:rotate(72deg)}to{transform:rotate(-12deg)}}   /* up (positive) and down */
.ml-dust ellipse{transform-box:fill-box;transform-origin:center;animation:mlLeaf .7s ease-out infinite}
@keyframes mlLeaf{0%{transform:translate(0,0) rotate(0);opacity:1}55%{transform:translate(-12px,-10px) rotate(130deg);opacity:1}100%{transform:translate(-19px,-1px) rotate(220deg);opacity:0}}
.hero.kaget-maleo .stage .layer .maleo{pointer-events:auto;cursor:pointer}   /* a tap startles it (maleo.bisaDikagetkan) */
.maleo.scratching .ml-dust{display:inline}
.ml-dust circle{transform-box:fill-box;transform-origin:center;animation:cPuff .6s ease-out infinite}
@keyframes mlStepA{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-24deg)}}
@keyframes mlStepB{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}}
@keyframes mlBob{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}
@keyframes mlPeck{0%,55%,100%{transform:rotate(0)}20%,35%{transform:rotate(46deg)}}
@keyframes mlScratch{0%,100%{transform:rotate(0)}40%{transform:rotate(-55deg)}}
@keyframes mlLook{0%,100%{transform:translateX(0)}30%{transform:translateX(-3px) translateY(-1px)}65%{transform:translateX(2px)}}

/* rhinoceros hornbills: slow, deep wingbeats with glides; at a perch the male leans over to feed the female */
.hb .bd-wing{transform-box:fill-box;transform-origin:50% 100%;animation:hbFlap .62s ease-in-out infinite alternate}
.hb .bd-wing2{transform-box:fill-box;transform-origin:50% 100%;animation:hbFlap .62s ease-in-out infinite alternate;animation-delay:-.08s}
.hb.glide .bd-wing,.hb.glide .bd-wing2{animation:none;transform:scaleY(.2)}
@keyframes hbFlap{from{transform:scaleY(1)}to{transform:scaleY(-.95)}}
.hb-head{transform-box:fill-box;transform-origin:10% 60%;transition:transform .8s ease-in-out}
.hb.feeding .hb-perch .hb-head{transform:rotate(24deg) translateX(4px)}
.hb.preening .hb-perch .hb-head{animation:hbLook 2.6s ease-in-out infinite}
@keyframes hbLook{0%,100%{transform:rotate(0)}30%{transform:rotate(-14deg)}60%{transform:rotate(8deg)}}
/* onthel cyclist: legs swing only while pushing the bike on foot */
.cy-wleg{transform-box:fill-box;transform-origin:50% 0}
.cy-walker.walking .cy-wleg-f{animation:legA .9s ease-in-out infinite}
.cy-walker.walking .cy-wleg-b{animation:legB .9s ease-in-out infinite}
/* task poses (same villager): hands work at the chain, head nods while checking a tyre, arms lift to re-tie the load */
.cy-fix .p-arm{transform-box:view-box;transform-origin:4px -85px}
.cy-fix .p-up{transform-box:view-box;transform-origin:0 -52px}
.cy-fix .sq-arm{transform-box:fill-box;transform-origin:10% 0;animation:sqWork .8s ease-in-out infinite alternate}
@keyframes sqWork{from{transform:rotate(-10deg)}to{transform:rotate(12deg)}}
.cy-fix[data-pose="rear"] .p-up,.cy-fix[data-pose="front"] .p-up{animation:aNod 1.8s ease-in-out infinite}
.cy-fix[data-pose="rear"] .p-arm,.cy-fix[data-pose="front"] .p-arm{animation:aScoop 2.2s ease-in-out infinite}
.cy-fix[data-pose="load"] .p-arm{animation:aPack 1.3s ease-in-out infinite}
.mk-tail{transform-box:fill-box;transform-origin:100% 0;animation:mkTail 3.4s ease-in-out infinite alternate}
@keyframes mkTail{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}

/* ---------- Scene: ambient life (quiet, slow) ---------- */
.sway{animation:sway 7s ease-in-out infinite alternate}
.sway.s2{animation-duration:9s;animation-delay:-4s}
.sway.s3{animation-duration:5.5s;animation-delay:-2s}
@keyframes sway{from{transform:rotate(-.9deg)}to{transform:rotate(.9deg)}}
.bees{animation:spin 3.2s linear infinite}
.bees.b2{animation-duration:4.6s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.fall{transform-box:fill-box;transform-origin:center;animation:fall 11s linear infinite;opacity:0}
@keyframes fall{0%{transform:translate(0,0) rotate(0);opacity:0}6%{opacity:1}88%{opacity:1}100%{transform:translate(-40px,330px) rotate(1080deg);opacity:0}}
.smoke circle{transform-box:fill-box;transform-origin:center;animation:smoke 6s ease-out infinite;opacity:0}
@keyframes smoke{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:.55}100%{transform:translate(22px,-120px) scale(1.7);opacity:0}}
.ripple{stroke-dasharray:22 30;animation:ripple 7s linear infinite}
@keyframes ripple{to{stroke-dashoffset:-104}}
.cloud{animation:drift 90s ease-in-out infinite alternate}
/* ---------- time of day (PENGATURAN.waktu): class waktu-pagi / -siang / -sore / -malam on <html> ---------- */
.hero{transition:background-color var(--tod-dur) ease}
.stage .layer{transition:filter var(--tod-dur) ease}
.sky .sun,.sky .moon,.sky .stars,.sky .sky-birds{transition:transform var(--tod-dur) ease,opacity var(--tod-dur) ease}
.sky circle,.sky .cloud path{transition:fill var(--tod-dur) ease}
.sky .moon,.sky .stars{opacity:0}
.sky .moon-cut{fill:var(--sky)}
/* morning: the sun lower and paler, a faint warm cast */
.waktu-pagi .sky .sun{transform:translate(-90px,110px)}
.waktu-pagi .sky .sun-disc{fill:#F6DC97}
html.waktu-pagi{--sun-glow:#F8E3B0}
.waktu-pagi .stage .layer{filter:sepia(.08) brightness(1.02)}
/* afternoon: a low orange sun, a golden cast on the forest */
.waktu-sore .sky .sun{transform:translate(70px,170px)}
.waktu-sore .sky .sun-disc{fill:#F0A35E}
html.waktu-sore{--sun-glow:#F6B977}
.waktu-sore .sky .cloud path{fill:#F8E1C8}
.waktu-sore .stage .layer{filter:sepia(.22) saturate(1.08) brightness(.96)}
/* night: moon and stars, the forest darker and cooler; light text over the sky */
.waktu-malam .sky .sun{opacity:0;transform:translate(0,260px)}
.waktu-malam .sky .moon,.waktu-malam .sky .stars{opacity:1}
/* distant birds: slow drift and wing beats, each at its own pace */
.sky-birds .sb{animation:sbDrift 11s ease-in-out infinite alternate}
.sky-birds .sb:nth-child(2){animation-duration:14s;animation-delay:-5s}
.sky-birds .sb:nth-child(3){animation-duration:9s;animation-delay:-3s}
.sky-birds .sbw{transform-box:fill-box;transform-origin:center;animation:sbFlap .6s ease-in-out infinite alternate}
.sky-birds .sb:nth-child(2) .sbw{animation-duration:.72s;animation-delay:-.3s}
.sky-birds .sb:nth-child(3) .sbw{animation-duration:.54s;animation-delay:-.1s}
@keyframes sbDrift{0%{transform:translate(0,0)}35%{transform:translate(70px,-10px)}70%{transform:translate(120px,6px)}100%{transform:translate(170px,-4px)}}
@keyframes sbFlap{from{transform:scaleY(1)}to{transform:scaleY(-.35)}}
.sky .stars .twk{transform-box:fill-box;transform-origin:center;animation:twinkle 4s ease-in-out infinite}
html:not(.waktu-malam) .sky .stars .twk{animation-play-state:paused}   /* stars are hidden by day: no hidden animation running */
@keyframes twinkle{0%,100%{opacity:.85;transform:scale(1)}35%{opacity:.1;transform:scale(.6)}52%{opacity:1;transform:scale(1.9)}68%{opacity:.75;transform:scale(1.1)}}
.sky .moon{transform:translate(40px,80px)}   /* a little lower and to the right: clear of the menu in the header */
.waktu-malam .sky .sky-birds{opacity:0}
.waktu-malam .sky .cloud path{fill:#3A4A66}
.waktu-malam .stage .layer{filter:brightness(.58) saturate(.72) hue-rotate(12deg)}
.waktu-malam .stage .layer.lyr0{filter:brightness(.36) saturate(.6) hue-rotate(20deg)}   /* the far ranges sink into the night first */
.waktu-malam .stage .layer.lyr1{filter:brightness(.44) saturate(.65) hue-rotate(16deg)}
.waktu-malam .intro h1{color:#F4F1E4}
/* animals follow the time of day (hero.hewan-waktu = PENGATURAN.waktu.perilakuHewan) */
.sky .bats,.stage .layer.glow{display:none}
.waktu-malam .hero.hewan-waktu .sky .bats{display:block}
.waktu-malam .stage .layer.glow{display:block}   /* the night glow layer is off by day: one wide layer less for phones to draw while panning */
.layer.glow .night-only{display:none}
.waktu-malam .layer.glow .night-only{display:inline}
/* petromax lamps: the unlit ones hang on the main layer all day; at night the lit copies on the glow layer cover them (the market ones only while the market is open) */
.petromaks .pm-halo,.petromaks .pm-mantle{display:none}
.petromaks .pm-glass{fill:#D6D1C2}
.layer.glow .petromaks .pm-halo,.layer.glow .petromaks .pm-mantle{display:inline}
.layer.glow .petromaks .pm-glass{fill:#FFF2C4}
.hero.no-lampuRumah .lamp-rumah,.hero.no-lampuPasar .lamp-pasar,.hero.pulang-wargaPasar .lamp-pasar{display:none!important}   /* off: the unlit lamp underneath shows */
.hero.hide-kelelawar .sky .bats,.hero.hide-kunangKunang .fireflies,.hero:not(.hewan-waktu) .fireflies,
.hero.no-oborTokohUtama #farmer-torch,.hero.no-lampuSepeda #cy-light,.hero.pulang-pesepeda #cy-light,.hero.hide-pesepeda #cy-light{display:none!important}
/* night lights (PENGATURAN.waktu.penerangan) */
.flame .fl-o,.flame .fl-m,.flame .fl-i{transform-box:fill-box;transform-origin:50% 100%}
.flame .fl-o{animation:flO .42s ease-in-out infinite alternate}
.flame .fl-m{animation:flM .31s ease-in-out infinite alternate}
.flame .fl-i{animation:flI .23s ease-in-out infinite alternate}
@keyframes flO{0%{transform:scale(1,1) skewX(0)}50%{transform:scale(.94,1.08) skewX(-4deg)}100%{transform:scale(1.04,.93) skewX(3deg)}}
@keyframes flM{0%{transform:scale(1,1) skewX(2deg)}100%{transform:scale(.92,1.1) skewX(-3deg)}}
@keyframes flI{0%{transform:scale(1,.94)}100%{transform:scale(.9,1.08)}}
.flame .fl-halo{animation:flHalo 1.7s ease-in-out infinite alternate}
@keyframes flHalo{0%{opacity:.85;transform:scale(1)}40%{opacity:1;transform:scale(1.04)}70%{opacity:.8;transform:scale(.97)}100%{opacity:.95;transform:scale(1.02)}}
.flame .fl-emb circle{opacity:0;animation:ember 1.8s linear infinite}
@keyframes ember{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx,4px),-46px);opacity:0}}
.flame .fl-smoke circle{transform-box:fill-box;transform-origin:center;animation:smokeUp 3.4s ease-out infinite}
@keyframes smokeUp{0%{transform:translate(0,10px) scale(.6);opacity:0}30%{opacity:1}100%{transform:translate(6px,-34px) scale(1.7);opacity:0}}
.flame.pelita .fl-smoke,.flame.pelita .fl-emb{display:none}
.petromaks .pm-halo{animation:pmHalo 2.6s ease-in-out infinite alternate}   /* a pressure lamp burns steady: only a faint pulse */
@keyframes pmHalo{from{opacity:.9}to{opacity:1}}
/* at night the farmer holds the torch: the front arm stays bent forward (no swing or idle arm moves), the torch stays upright */
.f-arm-f{transition:transform .5s var(--ease)}
.waktu-malam .hero:not(.no-oborTokohUtama) #farmer .f-arm-f{animation:none!important;transform:rotate(-30deg)}
#farmer-torch .tw-planted{opacity:0;transition:opacity .4s ease}
/* torch sequence (classes tq-* on the farmer, mirrored on the torch twin): pivots in the farmer's own coordinates */
#farmer-torch .tw-hold{transform-box:view-box;transform-origin:7px -85px}   /* the shoulder: the torch travels with the hand */
#farmer-torch .tw-tilt{transform-box:view-box;transform-origin:21px -60px}   /* the hand: the torch tips in the grip */
#farmer-torch .tw-fl{transform-box:view-box;transform-origin:21.9px -107px}   /* the wick */
#farmer-torch .tw-match,#farmer-torch .tw-puff{opacity:0}
#farmer-torch .tw-puff circle{transform-box:fill-box;transform-origin:center}
/* nightfall: reach into the anjat, bring the torch out unlit */
html .hero #farmer.tq-take.tq-take .f-arm-f{animation:tqArmTake 1.2s ease-in-out forwards!important}
@keyframes tqArmTake{0%{transform:rotate(0)}45%{transform:rotate(112deg)}100%{transform:rotate(-30deg)}}
#farmer-torch.tq-take .tw-hold{animation:tqHoldTake 1.2s ease-in-out forwards}
@keyframes tqHoldTake{0%,40%{transform:rotate(142deg);opacity:0}52%{transform:rotate(142deg);opacity:1}100%{transform:rotate(0);opacity:1}}
#farmer-torch.tq-take .tw-fl,#farmer-torch.tq-tilt .tw-fl,#farmer-torch.tq-take .tw-ground,#farmer-torch.tq-tilt .tw-ground{opacity:0}
/* tip it so the wick soaks in the oil */
html .hero #farmer.tq-tilt.tq-tilt .f-arm-f,html .hero #farmer.tq-light.tq-light .f-arm-f,html .hero #farmer.tq-snuff.tq-snuff .f-arm-f{animation:none!important;transform:rotate(-30deg)}
#farmer-torch.tq-tilt .tw-tilt{animation:tqTilt .9s ease-in-out forwards}
@keyframes tqTilt{0%{transform:rotate(0)}35%,60%{transform:rotate(150deg)}100%{transform:rotate(0)}}
/* strike a match at the wick with the other hand, the flame catches */
html .hero #farmer.tq-light.tq-light .f-arm-b,html .hero #farmer.tq-snuff.tq-snuff .f-arm-b{animation:none!important;transform:rotate(-128deg);transition:transform .35s ease}
#farmer-torch.tq-light .tw-match{animation:tqMatch 1.6s ease-out forwards}
@keyframes tqMatch{0%,18%{opacity:0;transform:scale(.4)}24%{opacity:1;transform:scale(1.2)}32%{opacity:.6;transform:scale(.9)}44%{opacity:1;transform:scale(1.1)}70%{opacity:1}82%,100%{opacity:0}}
#farmer-torch.tq-light .tw-match{transform-box:fill-box;transform-origin:50% 80%}
#farmer-torch.tq-light .tw-fl{animation:tqFlIn 1.6s ease-out forwards}
@keyframes tqFlIn{0%,45%{transform:scale(0);opacity:0}52%{opacity:1}75%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
#farmer-torch.tq-light .tw-ground{animation:tqGlowIn 1.6s ease-out forwards}
@keyframes tqGlowIn{0%,50%{opacity:0}100%{opacity:1}}
/* daybreak: cover the wick, the flame dies with a wisp of smoke, then back into the anjat */
#farmer-torch.tq-snuff .tw-fl{animation:tqFlOut 1s ease-in forwards}
@keyframes tqFlOut{0%,30%{transform:scale(1);opacity:1}70%{transform:scale(.25);opacity:.6}85%,100%{transform:scale(0);opacity:0}}
#farmer-torch.tq-snuff .tw-ground{animation:tqGlowOut 1s ease-in forwards}
@keyframes tqGlowOut{0%,40%{opacity:1}90%,100%{opacity:0}}
#farmer-torch.tq-snuff .tw-puff{opacity:1}
#farmer-torch.tq-snuff .tw-puff circle{opacity:0;animation:tqPuff 1.3s ease-out .55s forwards}
@keyframes tqPuff{0%{opacity:0;transform:translate(0,4px) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translate(4px,-26px) scale(1.8)}}
html .hero #farmer.tq-stow.tq-stow .f-arm-f{animation:tqArmStow 1.2s ease-in-out forwards!important}
@keyframes tqArmStow{0%{transform:rotate(-30deg)}55%{transform:rotate(112deg)}100%{transform:rotate(0)}}
#farmer-torch.tq-stow .tw-hold{animation:tqHoldStow 1.2s ease-in-out forwards}
@keyframes tqHoldStow{0%{transform:rotate(0);opacity:1}48%{transform:rotate(142deg);opacity:1}58%,100%{transform:rotate(142deg);opacity:0}}
#farmer-torch.tq-stow .tw-fl,#farmer-torch.tq-stow .tw-ground{opacity:0}
/* the night layer stays on while the torch is put away in daylight: only the torch shows */
html.torch-busy .stage .layer.glow{display:block}
html.torch-busy:not(.waktu-malam) .layer.glow .night-only{display:inline}
html.torch-busy:not(.waktu-malam) .layer.glow .night-only > :not(#farmer-torch),html.torch-busy:not(.waktu-malam) .layer.glow .lamp-rumah,html.torch-busy:not(.waktu-malam) .layer.glow .lamp-pasar{display:none}
#farmer-torch.fronting .tw-planted{opacity:1}   /* resting: the torch is planted in the ground beside them */
#farmer-torch .tw-ground{animation:flHalo 1.7s ease-in-out infinite alternate}
#cy-light{transition:opacity .6s ease}
.ffd{animation:ffDrift 7s ease-in-out infinite alternate}
@keyframes ffDrift{to{transform:translate(var(--fx,0),var(--fy,0))}}
/* story points at night: a soft light over each marker, sized like the marker */
.hs-glow .hsg{transform:scale(var(--ms,1));transform-box:fill-box;transform-origin:center;animation:hsGlow 3.2s ease-in-out infinite alternate}
@keyframes hsGlow{from{opacity:.85}to{opacity:1}}
/* the open point at night: the ring takes its colour, the centre lights up warm white and breathes gently */
.hs-glow .hsg-ring,.hs-glow .hsg-dot,.hs-glow .hsg-shine{transition:stroke .4s ease,fill .4s ease,fill-opacity .4s ease,stroke-opacity .4s ease}
.hs-glow.open .hsg-ring{stroke:var(--c);stroke-opacity:.6}
.hs-glow.open .hsg-dot{fill:#FFFDF2;fill-opacity:1}
.hs-glow.open .hsg-shine{fill-opacity:.5;transform-box:fill-box;transform-origin:center;animation:hsShine 1.8s ease-in-out infinite alternate}
.hs-glow.open .hsg-halo{opacity:1}
@keyframes hsShine{from{transform:scale(.85);fill-opacity:.35}to{transform:scale(1.25);fill-opacity:.6}}
/* moonlight: a pale wash from the moon's side of the sky over the tree tops, faint slanting rays, and the moonlit path */
.moonlight{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;visibility:hidden;mix-blend-mode:screen;transition:opacity var(--tod-dur,1.5s) ease,visibility 0s linear var(--tod-dur,1.5s);
  background:radial-gradient(ellipse 62% 58% at 76% 6%,rgba(205,218,248,.2),rgba(205,218,248,.07) 50%,rgba(205,218,248,0) 80%),linear-gradient(180deg,rgba(185,200,235,.1),rgba(185,200,235,0) 55%)}
.moonlight::before{content:"";position:absolute;inset:-40px;filter:blur(28px);   /* three broad, soft beams fanning down from the moon: smooth ramps, blurred, so no hard lines */
  background:conic-gradient(from 180deg at 76% -8%,rgba(215,225,250,0) 0deg,rgba(215,225,250,0) 22deg,rgba(215,225,250,.07) 34deg,rgba(215,225,250,0) 48deg,rgba(215,225,250,0) 60deg,rgba(215,225,250,.06) 74deg,rgba(215,225,250,0) 90deg,rgba(215,225,250,0) 104deg,rgba(215,225,250,.05) 116deg,rgba(215,225,250,0) 132deg,rgba(215,225,250,0) 360deg);
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 76% 4%,#000 18%,transparent 74%);mask-image:radial-gradient(ellipse 72% 72% at 76% 4%,#000 18%,transparent 74%)}
.waktu-malam .hero.cahaya-bulan .moonlight{opacity:1;visibility:visible;transition:opacity var(--tod-dur,1.5s) ease,visibility 0s}
.moon-path{display:none}
html.ringan .spanduk{animation:none!important}   /* mode ringan ponsel: the market banner hangs still */
@media (max-width:1024px),(pointer:coarse),(hover:none){   /* phones and tablets (any touch screen, any width): the swaying plants repaint large parts of the wide landscape layers every frame, which made nearby trees flicker; they stand still here (people and animals still move) */
  .stage .layer .sway{animation:none!important}
}
@media (max-width:760px){   /* phones: a lighter moonlight (no blend mode, no full-screen blur), much cheaper to redraw while scrolling */
  .moonlight{mix-blend-mode:normal}
  .moonlight::before{display:none}
  .waktu-malam .hero.cahaya-bulan .moonlight{opacity:.6}
}
.hero.cahaya-bulan .moon-path{display:inline}
/* villagers follow the time of day (hero.warga-waktu = PENGATURAN.waktu.perilakuWarga): outside their hours they are at home */
.hero.warga-waktu .crew,.hero.warga-waktu .actor,.hero.warga-waktu .vd-wrap,.hero.warga-waktu .cyclist{transition:opacity 1.5s ease}
.hero.pulang-wargaMadu .crew[data-spot="madu"],.hero.pulang-wargaRotan .crew[data-spot="rotan"],.hero.pulang-wargaJernang .crew[data-spot="jernang"],
.hero.pulang-wargaTengkawang .crew[data-spot="tengkawang"],.hero.pulang-wargaAren .crew[data-spot="aren"],.hero.pulang-wargaObat .crew[data-spot="obat"],
.hero.pulang-wargaBuah .crew[data-spot="buah"],.hero.pulang-wargaKampung .actor[data-spot="kampung"],.hero.pulang-wargaKampung .actor[data-spot="produksi"],
.hero.pulang-wargaKampung .actor[data-spot="lestari"],.hero.pulang-wargaPasar .actor[data-spot="pasar"],.hero.pulang-wargaPasar .vd-wrap,
.hero.pulang-pesepeda .cyclist{opacity:0;pointer-events:none!important}
.waktu-malam .stage .layer.glow{filter:none}
.bat{animation:batFly 40s linear infinite}
.bat.rev{animation-direction:reverse}
.bat-b{animation:batBob 1.9s ease-in-out infinite alternate}
.bat-w{transform-box:fill-box;transform-origin:50% 40%;animation:batFlap .24s ease-in-out infinite alternate}
@keyframes batFly{from{transform:translateX(-120px)}to{transform:translateX(1720px)}}
@keyframes batBob{from{transform:translateY(0)}to{transform:translateY(-22px)}}
@keyframes batFlap{from{transform:scaleY(1)}to{transform:scaleY(-.45)}}
.ff{opacity:0;animation:ffBlink 3.4s ease-in-out infinite}
@keyframes ffBlink{0%,40%,100%{opacity:0}55%{opacity:1}75%{opacity:.85}}
.hero.hewan-waktu .bees{transition:opacity 1.5s ease}
.waktu-malam .hero.hewan-waktu .bees{opacity:0}   /* a crescent moon is too dark for the giant honey bee to fly: they stay on the comb */
.monkey .mk-sit{transition:transform 1.2s ease}
.monkey.sleeping .mk-sit{transform-box:fill-box;transform-origin:50% 100%;transform:scale(1.05,.9)}
.monkey.sleeping .mk-sit circle[r="1.1"]{opacity:0}   /* eyes closed */
.hb .hb-perch .hb-head{transition:transform 1.4s ease}
.hb.roosting .hb-perch .hb-head{transform:translate(-3px,7px) rotate(6deg)}   /* head drawn in, asleep */
.hb.startled .hb-perch{animation:pJolt .4s cubic-bezier(.2,.9,.3,1)}
.maleo.roosting .ml-head{animation:none!important}
.maleo.startled .ml-lean{animation:pJolt .4s cubic-bezier(.2,.9,.3,1)}
.waktu-malam .hero.hewan-waktu .bees.agitated{opacity:1;transition:opacity .25s ease}   /* night: a disturbed colony pours out over the comb for a moment */
.waktu-malam .lede,.waktu-malam .hint{color:#C9D2DE}
.waktu-malam .eyebrow{color:#B9D88F}
.waktu-malam .key i{box-shadow:0 0 0 2px #22304A,0 0 0 3.5px #F4F1E4}
html.waktu-malam .top-tag{color:#B9D88F;border-left-color:rgba(185,216,143,.4)}
/* night: the header bar that appears on scroll is night blue, not white, so there is no bright flash over the dark page */
.head-bg{transition:opacity .5s var(--ease),background-color var(--tod-dur,1.5s) ease}
html.waktu-malam .head-bg{background:#1E2A3D;box-shadow:0 1px 0 rgba(0,0,0,.25),0 12px 24px -20px rgba(0,0,0,.6)}
.top-tag,.menu a{transition:color .5s var(--ease),border-color .5s var(--ease)}   /* text colours fade together with the header background (no flash at night) */
@media (min-width:761px){
  html.waktu-malam .menu a,html.waktu-malam .lang-btn{color:#F4F1E4;text-shadow:0 1px 8px rgba(18,26,42,.9),0 0 2px rgba(18,26,42,.6)}   /* readable over the moonlight */
}
.cloud.c2{animation-duration:120s;animation-delay:-40s}
@keyframes drift{to{transform:translateX(-120px)}}
.hornbill{animation:fly 52s linear infinite;animation-delay:6s;transform:translate(1900px,180px)}
@keyframes fly{0%{transform:translate(1900px,180px)}48%{transform:translate(-320px,110px)}100%{transform:translate(-320px,110px)}}
.wing{transform-box:fill-box;transform-origin:50% 100%;animation:flap 1.15s ease-in-out infinite}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.45)}}
.fly-b{animation:flutter 16s ease-in-out infinite;transition:opacity 1.5s ease}
.hero.hide-kupuKupu .fly-b{display:none}
.waktu-malam .hero.hewan-waktu .fly-b{opacity:0}   /* night: butterflies rest under the leaves */
.fly-b.f2{animation-duration:21s;animation-delay:-7s}
@keyframes flutter{0%,100%{transform:translate(0,0)}25%{transform:translate(40px,-30px)}50%{transform:translate(90px,-8px)}75%{transform:translate(38px,-46px)}}
.bw{transform-box:fill-box;transform-origin:100% 50%;animation:bw .22s ease-in-out infinite alternate}
.bw.r{transform-origin:0 50%}
@keyframes bw{to{transform:scaleX(.25)}}

.spanduk{transform-box:fill-box;transform-origin:50% 50%;animation:spanduk 5.5s ease-in-out infinite}
@keyframes spanduk{0%,100%{transform:skewY(0) scaleY(1)}30%{transform:skewY(.6deg) scaleY(.985)}65%{transform:skewY(-.4deg) scaleY(1.01)}}
.hero.still *,.hero.offscreen *{animation-play-state:paused!important}
.hero.still .hs-pulse{display:none}

/* ---------- After the hero (placeholder for the next section) ---------- */
.next{max-width:1120px;margin:0 auto;padding:96px 40px}
.next p{max-width:680px;margin:0 0 16px;color:var(--ink-soft);text-wrap:pretty}
.next h2{margin:0 0 16px;font-size:36px;line-height:40px;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.next .tag{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--forest)}


/* ---------- Our Impact: map + numbers ---------- */
/* Our Impact fits in one screen: heading row, map (sized to the height left over), legend, one-row stats band */
.impact{height:calc(100vh - var(--head-h-s));height:calc(100svh - var(--head-h-s));min-height:600px;display:flex;flex-direction:column;padding:20px 0 0;background:var(--paper);box-sizing:border-box}
.impact-head{flex:none;width:100%;max-width:1120px;margin:0 auto;padding:0 40px 12px;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:end;box-sizing:border-box}
.impact .tag{margin:0 0 8px;font-size:14px;line-height:20px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.impact h2{font-family:var(--font-head,var(--font));margin:0;font-size:36px;line-height:40px;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.impact-lede{margin:0 0 0 auto;max-width:460px;font-size:16px;line-height:24px;color:var(--ink-soft);text-wrap:pretty}
.impact-map{position:relative;flex:1 1 auto;min-height:200px;width:100%;max-width:1120px;margin:0 auto;padding:0 40px 12px;display:flex;flex-direction:column;box-sizing:border-box}
.map-fit{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.map{position:relative;flex:none;height:min(100%, calc((100vw - 48px) * 346 / 924), 584px);aspect-ratio:924 / 346}   /* as large as the height left over allows, never wider than the screen or 1560 px */   /* 150% of the 1040 px text column (125% then 120%), never wider than the screen */
.map svg{display:block;width:100%;height:auto;overflow:visible}
.prov{fill:#CAD6CC;stroke:var(--paper);stroke-width:.8;stroke-linejoin:round;transition:fill .6s var(--ease)}
.prov.focus{fill:#A9C78B;transform-box:fill-box;transform-origin:center;transition:fill .6s var(--ease),transform .45s var(--ease),filter .45s var(--ease)}
/* a supported province grows a little under the pointer (and is lifted above its neighbours by the script) */
.prov.focus:hover{transform:scale(1.06);fill:#93BA6C;filter:drop-shadow(0 4px 6px rgba(36,48,40,.3))}
.map.hl .prov.focus{fill:#93BA6C}
.prov-label{position:absolute;transform:translate(-50%,-50%);padding:2px 8px;border-radius:999px;background:var(--paper);box-shadow:0 1px 0 rgba(36,48,40,.1),0 4px 12px -6px rgba(36,48,40,.45);
  font-size:12px;line-height:16px;font-weight:600;color:var(--forest-deep);white-space:nowrap;pointer-events:none}
.site{position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;
  opacity:0;transform:scale(.3);transition:opacity .4s var(--ease),transform .8s var(--ease)}
.impact-map.in .site{opacity:1;transform:none}
.site::before{content:"";position:absolute;left:9px;top:9px;width:14px;height:14px;border-radius:50%;background:var(--ochre);box-shadow:0 0 0 3px var(--paper),0 2px 6px rgba(36,48,40,.35)}
.site::after{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;border:2px solid var(--ochre);opacity:0}
.site:hover::before,.site:focus-visible::before,.site.on::before{background:var(--forest)}
.map.hl .site::after,.site.on::after{animation:sitePulse 1.6s var(--ease) infinite}
@keyframes sitePulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.site-tip{position:absolute;z-index:3;left:0;top:0;padding:8px 12px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:14px;line-height:20px;white-space:nowrap;pointer-events:none;
  opacity:0;transform:translate(-50%,calc(-100% - 14px)) translateY(4px);transition:opacity .3s var(--ease),transform .5s var(--ease)}
.site-tip.on{opacity:1;transform:translate(-50%,calc(-100% - 14px))}
.site-tip b{display:block}
.site-tip span{color:#C9D3C3}
.site-tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;background:var(--ink);transform:rotate(45deg);border-radius:2px}
.site-list{display:none}
.map-legend{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:8px;font-size:14px;line-height:20px;color:var(--ink-soft)}
.lg{display:inline-flex;align-items:center;gap:8px}
.lg-prov{width:16px;height:12px;border-radius:2px;background:#A9C78B}
.lg-site{width:12px;height:12px;border-radius:50%;background:var(--ochre);box-shadow:0 0 0 2px var(--paper),0 0 0 3px rgba(36,48,40,.25)}
.lg-src{margin-left:auto;font-size:12px;line-height:16px}
.stats-band{background:var(--forest-deep);color:var(--paper)}
.stats-band{flex:none}
.stats{max-width:1280px;margin:0 auto;padding:18px 40px;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.st{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;border-radius:12px;transition:background-color .5s var(--ease)}
.st-ic{grid-row:1 / span 3;width:32px;height:32px;margin:0;align-self:start;margin-top:4px;fill:none;stroke:#A9D07A;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.st-num{margin:0;font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.st-num small{font-size:16px;line-height:24px;font-weight:600;letter-spacing:0}
.st-label{margin:0;font-size:12px;line-height:16px;color:#DDE6D2;text-wrap:balance}
.st-sub{margin:0;font-size:12px;line-height:16px;color:#A9D07A}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .intro h1{font-size:48px}
  .route-title{display:none}
  .top-tag{max-width:152px;font-size:12px;line-height:16px;white-space:normal}   /* two lines, clears the menu */
  .stage-btn .t{display:none}
  .stage-btn[aria-current="step"] .t{display:inline}
  .impact h2{font-size:30px;line-height:36px}
  .impact-head{grid-template-columns:1fr;gap:8px}
  .impact-lede{margin:0;max-width:none}
  .stats{gap:16px;padding:16px 24px}
  .st{grid-template-columns:1fr}
  .st-ic{grid-row:auto;width:24px;height:24px;margin:0 0 4px}
  .st-num{font-size:24px;line-height:32px}
  .prov-label{font-size:12px;padding:2px 6px}
  .menu{right:24px}
  .menu-list,.menu ul{gap:20px}
  .menu a,.lang-btn[aria-pressed="true"]{font-size:14px;line-height:20px}
}
/* ---------- Mobile: stacked, illustration stays the hero ---------- */
/* up to 900 px the full menu no longer fits beside the logo and tagline: collapse it into the Menu button */
@media (max-width:900px){
  .menu-toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:14px;line-height:20px;font-weight:600;cursor:pointer}
  .menu-toggle svg{width:20px;height:20px}
  .menu-list{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:224px;flex-direction:column;align-items:stretch;gap:12px;padding:16px;background:var(--paper);border-radius:16px;box-shadow:0 1px 0 rgba(36,48,40,.08),0 24px 48px -28px rgba(36,48,40,.55)}
  .menu.open .menu-list{display:flex}
  .menu ul{flex-direction:column;align-items:stretch;gap:4px}
  .menu a{padding:8px}
  .lang{padding:8px 8px 0;border-top:1px solid var(--line);gap:16px;align-items:center}
  .lang-btn[aria-pressed="false"]{transform:none}
}
@media (max-width:760px){
  .hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;overflow:visible;overflow-x:clip}   /* clip, not hidden: the sticky control bar keeps working */
  /* one gutter for both edges: logo on the left, Menu on the right (safe-area aware on notched phones) */
  :root{--gut:16px;--head-h:80px;--head-h-s:64px}
  .hero{padding-top:var(--head-h)}   /* the fixed header no longer takes space in the flow */
  .top{padding:0 var(--gut);padding-left:max(var(--gut), env(safe-area-inset-left))}
  .top img{height:48px}
  .scrolled .top img{height:40px}
  /* tagline beside the logo on mobile too: two short lines between logo and Menu */
  .top{gap:12px}
  .top-tag{padding-left:12px;font-size:12px;line-height:16px;letter-spacing:.1em;white-space:normal;max-width:132px}
  .menu{top:0;right:max(var(--gut), env(safe-area-inset-right));left:auto;height:100%}
  .intro{position:relative;left:auto;top:auto;width:auto;padding:8px 16px 24px}
  .hero.exploring .intro{display:none}   /* phones: once exploring, the story bubble takes the intro's place */
  .intro h1{font-size:36px;line-height:34px;margin-bottom:12px}   /* phones: tighter lines */
  .lede{font-size:16px;line-height:21px;margin-bottom:20px}
  .cta{gap:8px;padding:8px 12px 8px 16px;border-radius:10px;font-size:15px;line-height:22px}   /* phones: a smaller start button */
  .cta svg{width:16px;height:16px}
  .stage{position:relative;inset:auto;height:54svh;min-height:320px;max-height:560px;flex:none}
  /* phones: the stage is too short to hold the story beside its point, so it sits above the stage, where the intro was */
  .hero.exploring{padding-top:calc(var(--head-h) - 2px)}   /* phones: the story sits close under the header, so more of the stage and the control bar fit */
  .sbub{order:-1;position:relative;left:auto!important;top:auto!important;width:auto;max-width:none;margin:0 16px 8px;padding:12px 16px 14px;font-size:14px;line-height:var(--sb-lh,18px);display:none;transform:none}
  .sbub.on{display:block}
  /* phones: the (hidden) photo panel always sits inside the bubble; placed outside it, it widened the page and the browser
     re-zoomed when it moved in on the first tap, so the icons seemed to jump left */
  .sb-photo{left:0;right:72px;width:auto;padding:12px;border-radius:12px 0 0 12px;box-shadow:none;clip-path:inset(0 0 0 100%)}
  .sb-title{line-height:20px}   /* phones: tighter lines in the story (gelembung.jarakBarisMobile) */
  /* phones: an outlined bubble (see-through, green border, dark text); colours from gelembung.warna*Mobile */
  .sbub{--sb-bg:var(--sb-bg-m,transparent);border:var(--sb-bw-m,1px) solid var(--sb-bd-m,#A5CD69);color:var(--sb-tx-m,#243028);box-shadow:none}
  .sbub .sb-title,.sbub .sb-story,.sbub .sb-story strong,.sbub .sb-photo p{color:var(--sb-tx-m,#243028)}
  .sbub .sb-latin{color:var(--sb-tx-m,#243028);opacity:.72}
  .sbub .sb-h,.sbub .sb-page{color:var(--sb-hc-m,#3E7536)}
  .sbub .sb-close{background:rgba(36,48,40,.1);color:var(--sb-tx-m,#243028)}
  .sbub.sb-dark .sb-close{background:rgba(247,250,241,.18)}
  .sbub .sb-pops li{box-shadow:0 0 0 1px rgba(36,48,40,.16)}
  /* phones: product icons at 75 % (48 -> 36 px discs, 34 -> 26 px drawings); the text and photo panel make room for the narrower column */
  .sbub .sb-pops{gap:6px}
  .sbub .sb-pops li{width:36px;height:36px}
  .sbub .sb-pops svg{width:26px;height:26px}
  .sbub.has-pops .sb-page{width:36px}
  .sbub.has-pops{padding-right:60px;min-height:172px}   /* icons (132 px) + a gap + the page number */
  .sbub.ph-in .sb-photo,.sbub .sb-photo{right:56px}
  .sbub .sb-pops li.on,.sbub .sb-pops li:focus-visible{box-shadow:0 0 0 var(--ring-w-m,3px) var(--ring,#8CB25A)}   /* thinner ring on phones (gelembung.tebalBorderIkonMobile) */
  .sbub .sb-photo{background:var(--sky);border-radius:10px 0 0 10px;transition:background-color var(--tod-dur,1.5s) ease}   /* opaque, so the story does not show through the photo; the same colour as the sky around the bubble, so it follows the time of day (its caption follows the automatic contrast) */
  .sbub::after{display:none}
  .sb-lead{margin-top:6px}
  .sb-h{margin-top:8px}
  /* the control bar stays at the bottom of the screen while any part of the hero is in view */
  .route{position:sticky;bottom:0;z-index:8;height:auto;padding:8px 16px;padding-bottom:max(8px, env(safe-area-inset-bottom));gap:8px;box-shadow:0 -8px 16px -12px rgba(36,48,40,.45)}
  .motion{padding:8px}
  .motion .t{display:none}
  /* (desktop order comes from the markup: gender, prev, autoplay, next, reload, stop) mobile route = one row: [gender] [prev] [autoplay] [next] [reload] [stop]; the stage list (Perjalanan) is hidden on phones */
  .route{display:grid;grid-template-columns:repeat(6,auto);justify-content:space-between;align-items:center;column-gap:6px}
  .route .stages{display:none}
  .route-nav{display:contents}
  #gender{grid-column:1;grid-row:1}
  #prev{grid-column:2;grid-row:1}
  .stages{grid-column:3;grid-row:1;height:40px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:12px;background:#EEF2E3}
  .stages::-webkit-scrollbar{display:none}
  #next{grid-column:4;grid-row:1}
  #reload{grid-column:5;grid-row:1}
  .route .motion{grid-column:6;grid-row:1;width:40px;height:40px;padding:0;display:grid;place-items:center}
  .route .motion.autoplay{grid-column:3;width:auto;padding:0 12px 0 10px;display:inline-flex;align-items:center;gap:6px}   /* phones: the Autoplay label stays */
  .route .motion.autoplay .t{display:inline}
  .stages li{flex:0 0 100%;justify-content:center;scroll-snap-align:center;scroll-snap-stop:always}
  .stages li+li::before{display:none}
  .stage-btn{max-width:100%;padding:8px}
  .stage-btn:hover{background:none}
  .stage-btn .t{display:inline;overflow:hidden;text-overflow:ellipsis}
  .stage-btn[aria-current="step"]{color:var(--ink)}
  .next{padding:64px 16px}
  .impact{height:auto;min-height:0;padding-top:24px}
  html{scroll-snap-type:none}   /* phones: free scrolling; with snapping, stopping in the lower part of the tall hero pulled the page back up to its top */
  .secnav{right:8px;padding:6px 4px}
  .secnav button{width:24px;height:24px}
  .secnav{gap:10px;padding:8px 4px}   /* phones: more room between the dots */
  .secnav button::after{top:-5px;bottom:-5px;left:-14px;right:-10px}
  .map-fit{display:block}
  .map{width:100%;height:auto}
  .impact-head{grid-template-columns:1fr;gap:16px;padding:0 16px 24px}
  .impact-lede{font-size:16px;line-height:21px}   /* phones: same tight lines as the hero text */
  .impact h2{line-height:28px}   /* 30 px heading, same ratio as the hero headline (36 / 34) */
  .impact-map{padding:0 16px 32px}
  .map{--mapw:calc(100vw - 32px)}
  .prov-label{display:none}
  .site{width:24px;height:24px;margin:-12px 0 0 -12px}
  .site::before{left:8px;top:8px;width:8px;height:8px;box-shadow:0 0 0 1.5px var(--paper)}
  .site::after{left:3px;top:3px;width:18px;height:18px}
  .site-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:16px 0 0;padding:0;list-style:none;font-size:14px;line-height:20px}
  .site-list li{display:flex;gap:8px;align-items:baseline}
  .site-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ochre);transform:translateY(-1px)}
  .site-list span{display:block;font-size:12px;line-height:16px;color:var(--ink-soft)}
  .lg-src{margin-left:0}
  .stats{grid-template-columns:1fr 1fr;gap:16px;padding:20px 16px}
  .st-wide{grid-column:1 / -1}
  .st-num{font-size:24px;line-height:32px}
}
/* when stopped, UI panels appear without sliding */
.hero.still .intro,.hero.still .sbub,.hero.still .cta,.hero.still .btn-next,.hero.still .pop-in{transition-duration:.01s!important}
/* very narrow phones (under 360 px): tighter route row so every stage name fits in the slider */
@media (max-width:359px){
  .menu-toggle span{display:none}   /* icon-only Menu leaves room for the tagline */
  .menu-toggle{padding:8px}
  .route{gap:4px}
  .stage-btn{padding:8px 4px}
  .stage-btn .n{display:none}
}

/* very narrow phones (360 px and below): smaller buttons so the six controls, with the Autoplay label, fit on one row */
@media (max-width:360px){
  .route{padding-left:12px;padding-right:12px;column-gap:4px}
  .route .icon-btn,.route .motion{width:36px;height:36px}
  .route .motion.autoplay{width:auto;padding:0 10px 0 8px;font-size:13px;gap:4px}
}