/* ==========================================================================
   home.css: the scenes between the home page's approved chapters.

   The base rules below are a composed, static page. Without script, with
   reduced motion, or on a small screen, every section reads correctly from
   them alone. The pinned desktop versions are layered on top only when script
   is running, motion is welcome and the screen has room for them.
   ========================================================================== */

/* over a dark section that scrolls as ordinary page the bar keeps a dark ground,
   the same one the About page uses, so words never slide under clear links */
.nav.over-flat:not(.menu-open){background:rgba(23,29,19,.84);border-bottom-color:rgba(245,239,229,.12);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}

/* ============================== 06 recognition ============================== */
.rc{position:relative;background:#0F140B;color:var(--bone)}
.rc-stage{position:relative;padding:0 0 clamp(70px,11vh,120px)}
.rc-ground{position:absolute;inset:0;z-index:0;
  background:linear-gradient(to bottom,var(--bg) 0,#B9BF9E 70px,#3A4722 190px,#0F140B 320px)}
.rc-line{position:absolute;z-index:1;left:calc(var(--pad) + 4px);top:clamp(130px,22vh,210px);bottom:clamp(70px,11vh,120px);
  width:1px;background:rgba(245,239,229,.16)}
.rc-line::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:50% 0;transform:scaleY(var(--rp,1))}
.rc-head{position:relative;z-index:2;max-width:calc(var(--maxw) + var(--pad) * 2);margin:0 auto;
  padding:clamp(150px,26vh,240px) var(--pad) clamp(40px,6vh,64px) calc(var(--pad) + 32px)}
.rc-head .kicker{color:var(--sand)}
.rc-head h2{font-family:var(--display);font-weight:400;color:var(--bone);font-size:clamp(2.2rem,6vw,4.5rem);
  letter-spacing:-.026em;line-height:1.02;max-width:16ch}
.rc-head p{margin-top:20px;max-width:46ch;color:#CFD6BC;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.62}
.rc-rail,.rc-count,.rc-tray,.rc-back,.rc-date,.rc-big{display:none}
.rc-chs{position:relative;z-index:2}
.rc-ch{position:relative;display:grid;gap:22px;max-width:calc(var(--maxw) + var(--pad) * 2);margin:0 auto;
  padding:0 var(--pad) clamp(64px,10vh,100px) calc(var(--pad) + 32px)}
.rc-ch::before{content:"";position:absolute;left:calc(var(--pad) - 1px);top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 5px rgba(224,86,22,.14)}
.rc-text{order:1}
.rc-n{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:rgba(245,239,229,.5)}
.rc-n b{font-weight:400;color:var(--accent-hover)}
.rc-when{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--sand)}
.rc-text h3{margin-top:14px;font-family:var(--display);font-weight:400;color:var(--bone);
  font-size:clamp(2.2rem,4.8vw,4.2rem);letter-spacing:-.03em;line-height:.98}
.rc-sub2{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;line-height:1.8;
  text-transform:uppercase;color:var(--sage-soft)}
.rc-text p{margin-top:18px;max-width:40ch;color:#CFD6BC;font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.62}
.rc-text p.rc-fine{margin-top:10px;font-size:.9rem;color:rgba(207,214,188,.72)}
.rc-main{order:2;position:relative;margin:0;border-radius:6px;overflow:hidden;background:#171E12;aspect-ratio:3/2}
.rc-main img{width:100%;height:100%;object-fit:cover;display:block;
  transform:translate3d(0,calc(var(--py,0) * -16px),0) scale(1.07)}
.rc-main.tall{aspect-ratio:4/5;max-width:520px}
.rc-sub{order:3;margin:-84px 0 0 auto;width:min(46%,260px);aspect-ratio:1;border-radius:5px;overflow:hidden;
  background:#171E12;border:1px solid rgba(245,239,229,.16);box-shadow:0 30px 60px -30px rgba(0,0,0,.9);position:relative;z-index:1}
.rc-sub img{width:100%;height:100%;object-fit:cover;display:block}
/* the stacked chapters on a wide screen: the words beside the photograph, not above one the width of the page */
@media (min-width:861px){
  .rc-ch{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(36px,5vw,84px);align-items:center}
  .rc-text{grid-column:1;grid-row:1 / span 2}
  .rc-main,.rc-sub{grid-column:2}
  .rc-main{grid-row:1}
  .rc-sub{grid-row:2}
  .rc-main.tall{justify-self:start}
}

/* the Bernama milestone as an original editorial clipping: the publication is set in type, no logo, no screenshot */
.rc-paper{aspect-ratio:auto;background:#F2EBDC;color:#242818;padding:clamp(24px,4.4vw,46px);border-radius:3px;overflow:visible;
  box-shadow:0 60px 110px -50px rgba(0,0,0,.95)}
.rc-paper::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;border-radius:inherit;
  background-image:radial-gradient(rgba(36,40,24,.07) .6px,transparent .7px);background-size:4px 4px}
.rc-paper .mast{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-bottom:14px;border-bottom:3px double rgba(36,40,24,.5);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#3B3F2E}
.rc-paper .mast b{font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,1.9vw,1.6rem);letter-spacing:.06em;color:#1C2012}
.rc-paper .kick{position:relative;margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#6A6F58}
.rc-paper h4{position:relative;margin-top:12px;font-family:var(--display);font-weight:400;color:#1C2012;
  font-size:clamp(1.45rem,2.6vw,2.25rem);line-height:1.12;letter-spacing:-.018em}
.rc-paper .rule{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.rc-paper .rule i{display:block;height:30px;border-top:1px solid rgba(36,40,24,.3)}
.rc-paper .go{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:10px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#A93F0E;text-decoration:none}
.rc-paper .go::after{content:"\2192";transition:transform .4s var(--ease)}
.rc-paper .go:hover::after{transform:translateX(4px)}

/* Vanakkam Malaysia: the anniversary post stands upright like a clipping, with the stage photograph beside it */
.rc-ch.van .rc-main.tall{aspect-ratio:397/588;max-width:320px}
.rc-ch.van .rc-sub{aspect-ratio:362/203;width:min(70%,325px)}
.rc-ch.m26 .rc-sub,.rc-ch.agv .rc-sub{aspect-ratio:3/4;width:min(38%,200px)}
.rc-ch.m26 .rc-sub img,.rc-ch.agv .rc-sub img{object-position:50% 40%}

.rc-end{position:relative;z-index:2;max-width:calc(var(--maxw) + var(--pad) * 2);margin:0 auto;
  padding:0 var(--pad) 0 calc(var(--pad) + 32px)}
.rc-end .row{display:none}
.rc-go{display:inline-flex;flex-direction:column;align-items:flex-start;gap:10px;text-decoration:none;color:var(--bone)}
.rc-go span{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--sand)}
.rc-go b{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.8rem);letter-spacing:-.02em;
  padding-bottom:6px;border-bottom:1px solid rgba(224,86,22,.6);transition:border-color .4s var(--ease)}
.rc-go b::after{content:" \2192";color:var(--accent)}
.rc-go:hover b{border-bottom-color:var(--accent)}

@media (prefers-reduced-motion:no-preference) and (min-width:861px) and (min-height:540px){
  .js .rc{height:1040vh;background:#0F140B}
  .js .rc-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;padding:0}
  .js .rc-ground{background:var(--bg)}
  /* the light goes down through the brand's own green rather than through grey */
  .js .rc-ground::before{content:"";position:absolute;inset:0;opacity:var(--bf,0);background:var(--forest-3)}
  .js .rc-ground::after{content:"";position:absolute;inset:0;opacity:var(--br,0);
    background:radial-gradient(120% 90% at 58% 42%,#141B0F 0%,#0F140B 58%,#0A0E07 100%)}
  /* the thread: down the middle first, then to the left edge where it becomes the rail */
  .js .rc-line{left:calc(50% + (clamp(20px,3vw,44px) - 50%) * var(--rl,0));top:calc(var(--rl,0) * 22vh);bottom:auto;
    height:calc(30vh + var(--rl,0) * 26vh);background:none}
  .js .rc-line::after{transform:scaleY(calc(var(--ln,0) * (1 - var(--rl,0)) + var(--rp,0) * var(--rl,0)))}
  .js .rc-head{position:absolute;left:50%;top:57%;width:min(900px,86vw);padding:0;margin:0;text-align:center;
    opacity:var(--hd,0);transform:translate3d(-50%,calc(-50% - var(--hu,0) * 16vh),0)}
  .js .rc-head .kicker{justify-content:center}
  .js .rc-head h2{max-width:none}
  .js .rc-head p{margin-left:auto;margin-right:auto}

  .js .rc-rail{display:block;position:absolute;z-index:1;left:clamp(20px,3vw,44px);top:22vh;height:56vh;width:1px;
    background:rgba(245,239,229,.17);opacity:var(--rl,0)}
  .rc-rail ol{list-style:none;margin:0;padding:0;position:absolute;inset:0}
  .rc-rail li{position:absolute;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4px;border-radius:50%;
    background:#0F140B;border:1.5px solid rgba(245,239,229,.42);transition:background .4s var(--ease),border-color .4s var(--ease)}
  .rc-rail li:nth-child(1){top:0}.rc-rail li:nth-child(2){top:11.111%}.rc-rail li:nth-child(3){top:22.222%}
  .rc-rail li:nth-child(4){top:33.333%}.rc-rail li:nth-child(5){top:44.444%}.rc-rail li:nth-child(6){top:55.556%}
  .rc-rail li:nth-child(7){top:66.667%}.rc-rail li:nth-child(8){top:77.778%}.rc-rail li:nth-child(9){top:88.889%}
  .rc-rail li:nth-child(10){top:100%}
  .rc-rail li.on{background:var(--accent);border-color:var(--accent)}
  .js .rc-count{display:block;position:absolute;z-index:3;left:calc(clamp(20px,3vw,44px) + 20px);top:calc(22vh - 7px);
    font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:rgba(245,239,229,.5);opacity:var(--rl,0)}
  .rc-count b{font-weight:400;color:var(--accent-hover)}

  .js .rc-chs{position:absolute;inset:0}
  .js .rc-ch{position:absolute;inset:0;display:block;max-width:none;margin:0;padding:0;
    visibility:hidden;pointer-events:none;--in:0;--out:0;--tr:0}
  .js .rc-ch::before{display:none}
  .js .rc-ch.on{visibility:visible}
  .js .rc-ch .rc-text a,.js .rc-ch .rc-paper a{pointer-events:none}
  .js .rc-ch.act .rc-text a,.js .rc-ch.act .rc-paper a{pointer-events:auto}

  .js .rc-back{display:block;position:absolute;inset:-8%;z-index:0;opacity:calc(var(--in) * (1 - var(--out)) * .34);
    transform:translate3d(calc(var(--tr) * -40px),0,0)}
  .rc-back img{width:100%;height:100%;object-fit:cover;display:block}

  .js .rc-text{position:absolute;z-index:3;top:50%;left:calc(clamp(20px,3vw,44px) + clamp(56px,6vw,100px));
    width:min(33vw,470px);
    opacity:calc(clamp(0,(var(--in) - .3) * 2.2,1) * (1 - clamp(0,var(--out) * 4,1)));
    transform:translate3d(calc(var(--tr) * 22px),calc(-50% + (1 - clamp(0,(var(--in) - .3) * 2.2,1)) * 24px),0)}

  /* the photograph arrives out of the dark, tracks sideways, and leaves as an archive tile */
  .js .rc-main{position:absolute;z-index:1;top:50%;right:clamp(40px,6vw,110px);
    width:min(50vw,820px,calc((100vh - 190px) * 1.5));will-change:transform,opacity;transform-origin:0 100%;
    clip-path:inset(calc((1 - var(--in)) * 14%) calc((1 - var(--in)) * 20%) round 6px);
    transform:translate3d(calc(var(--tr) * -60px - var(--out) * 44vw),calc(-50% + var(--out) * 36vh),0)
              scale(calc((1.1 - .1 * var(--in)) * (1 - .84 * var(--out))));
    opacity:calc(1 - var(--out) * var(--out));
    box-shadow:0 70px 140px -60px rgba(0,0,0,.95)}
  .js .rc-main img{transform:none}
  .js .rc-main.tall{width:min(28vw,440px,calc((100vh - 210px) * .8));right:calc(clamp(40px,6vw,110px) + min(15vw,230px));
    max-width:none;aspect-ratio:4/5}
  /* hung off the lower left of the photograph, never reaching back over the words */
  .js .rc-sub{position:absolute;z-index:2;margin:0;
    left:calc(100% - clamp(40px,6vw,110px) - min(50vw,820px,calc((100vh - 190px) * 1.5)) + 4vw);
    top:calc(50% + min(50vw,820px,calc((100vh - 190px) * 1.5)) / 3 - min(17vw,270px) * .3);
    width:min(17vw,270px);aspect-ratio:4/3;
    opacity:calc(clamp(0,(var(--in) - .45) * 2.2,1) * (1 - clamp(0,var(--out) * 3,1)));
    transform:translate3d(calc(var(--tr) * -120px),calc((1 - var(--in)) * 60px),0)}
  .js .rc-ch.two .rc-sub{left:auto;top:auto;right:clamp(40px,6vw,110px);bottom:12vh;width:min(19vw,290px);aspect-ratio:1}
  .js .rc-ch.van .rc-main.tall{width:min(22vw,330px,calc((100vh - 230px) * .68));aspect-ratio:397/588}
  .js .rc-ch.van .rc-sub{width:min(24vw,360px);aspect-ratio:362/203}
  .js .rc-ch.m26 .rc-sub,.js .rc-ch.agv .rc-sub{top:auto;aspect-ratio:3/4;width:min(12vw,200px);
    left:calc(100% - clamp(40px,6vw,110px) - min(50vw,820px,calc((100vh - 190px) * 1.5)) + 1.8vw);
    bottom:calc(50% - min(50vw,820px,calc((100vh - 190px) * 1.5)) / 3 - min(12vw,200px) * .32)}

  .js .rc-ch.press .rc-main{width:min(42vw,600px);
    transform:translate3d(calc(var(--tr) * -60px - var(--out) * 44vw),calc(-50% + var(--out) * 36vh),0)
              rotate(calc(-1.6deg + var(--tr) * 1.2deg)) scale(calc((1.1 - .1 * var(--in)) * (1 - .84 * var(--out))))}
  .js .rc-date{display:block;position:absolute;z-index:0;right:2vw;bottom:3vh;pointer-events:none;
    font-family:var(--display);font-weight:400;font-size:clamp(5rem,13vw,13rem);letter-spacing:-.05em;line-height:.8;
    color:rgba(245,239,229,.05);opacity:calc(var(--in) * (1 - var(--out)));transform:translate3d(calc(var(--tr) * -50px),0,0)}

  /* the placing, set as large as the stage allows and anchored bottom left, under the words */
  .js .rc-big{display:block;position:absolute;z-index:0;left:clamp(30px,3.4vw,70px);bottom:-7vh;pointer-events:none;white-space:nowrap;
    font-family:var(--display);font-weight:400;font-size:min(40vw,80vh);line-height:.8;letter-spacing:-.06em;
    color:rgba(201,169,107,.06);-webkit-text-stroke:1px rgba(201,169,107,.24);
    opacity:calc(var(--in) * (1 - var(--out)));transform-origin:0 100%;
    transform:translate3d(calc(var(--tr) * -40px),0,0) scale(calc(1.1 - .1 * var(--in)))}


  .js .rc-tray{display:flex;position:absolute;z-index:4;left:clamp(20px,3vw,44px);bottom:clamp(18px,3.4vh,34px);gap:8px;
    opacity:calc(var(--rl,0) * (1 - var(--end,0)))}
  .rc-tile{display:grid;place-items:center;width:clamp(44px,4.4vw,64px);aspect-ratio:4/3;border-radius:3px;overflow:hidden;
    background:rgba(245,239,229,.05);border:1px solid rgba(245,239,229,.16);
    opacity:calc(.22 + .78 * var(--t,0));transform:translateY(calc((1 - var(--t,0)) * 10px));
    font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--sand)}
  .rc-tile img{width:100%;height:100%;object-fit:cover;display:block}
  .rc-tile.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

  .js .rc-end{position:absolute;z-index:5;left:50%;top:50%;width:min(860px,90vw);padding:0;margin:0;text-align:center;
    opacity:var(--end,0);transform:translate3d(-50%,calc(-50% + (1 - var(--end,0)) * 30px),0);pointer-events:none}
  .js .rc.fin .rc-end{pointer-events:auto}
  .js .rc-end .row{display:flex;justify-content:center;gap:12px;margin-bottom:38px}
  .rc-end .row i{display:grid;place-items:center;width:clamp(78px,8.4vw,122px);aspect-ratio:4/3;border-radius:4px;overflow:hidden;
    background:#171E12;border:1px solid rgba(245,239,229,.16);box-shadow:0 30px 50px -30px rgba(0,0,0,.9);
    font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--sand);font-style:normal}
  .rc-end .row i:nth-child(odd){transform:translateY(8px) rotate(-1.5deg)}
  .rc-end .row i:nth-child(even){transform:translateY(-6px) rotate(1.2deg)}
  .rc-end .row img{width:100%;height:100%;object-fit:cover;display:block}
  .js .rc-go{align-items:center}
}

/* ============================== 07 from the field ============================== */
.fs{position:relative;background:#0F140B;color:var(--bone);overflow:hidden;
  padding:clamp(80px,12vh,130px) 0 clamp(64px,10vh,110px)}
.fs-stage{position:relative}
.fs-head{max-width:calc(var(--maxw) + var(--pad) * 2);margin:0 auto;padding:0 var(--pad)}
.fs-head .kicker{color:var(--sand)}
.fs-head h2{font-family:var(--display);font-weight:400;color:var(--bone);font-size:clamp(2rem,5vw,3.6rem);
  letter-spacing:-.024em;line-height:1.04}
.fs-strip{list-style:none;margin:0;display:flex;align-items:flex-start;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:clamp(30px,5vh,48px) var(--pad) 26px}
.fs-strip::-webkit-scrollbar{display:none}
.fs-it{flex:0 0 auto;height:clamp(250px,62vw,380px);scroll-snap-align:start;
  transform:translateY(calc(var(--my,0) * 1px))}
.fs-it figure{position:relative;height:100%;margin:0;border-radius:4px;overflow:hidden;background:#171E12;
  box-shadow:0 40px 70px -40px rgba(0,0,0,.9)}
.fs-it img{height:100%;width:auto;display:block}
.fs-it figcaption{position:absolute;left:10px;bottom:10px;padding:5px 9px;border-radius:3px;background:rgba(15,20,11,.84);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.fs-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px;max-width:calc(var(--maxw) + var(--pad) * 2);
  margin:0 auto;padding:10px var(--pad) 0}
.fs-count{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,239,229,.62)}
.fs-count b{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,3.6vw,3rem);letter-spacing:-.03em;
  color:var(--bone);margin-right:10px;vertical-align:-.1em}
.fs-go{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--body);font-weight:600;font-size:14px;
  color:var(--accent-hover);text-decoration:none}
.fs-go::after{content:"\2192";transition:transform .4s var(--ease)}
.fs-go:hover::after{transform:translateX(4px)}
/* a wide screen without the depth planes sets every photograph out in rows, rather than a strip that hides most of them */
@media (min-width:861px){
  .fs-strip{flex-wrap:wrap;overflow-x:visible;scroll-snap-type:none;max-width:calc(var(--maxw) + var(--pad) * 2);margin:0 auto}
  .fs-it{height:clamp(200px,19vw,290px);transform:none}
}

@media (prefers-reduced-motion:no-preference) and (min-width:861px) and (min-height:540px){
  .js .fs{height:520vh;padding:0;overflow:visible}
  .js .fs-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
  .js .fs-head{position:absolute;z-index:4;left:var(--pad);top:calc(var(--nav-h) + 3vh);max-width:min(640px,52vw);
    margin:0;padding:0;pointer-events:none;opacity:calc(1 - clamp(0,(var(--fp,0) - .06) * 6.25,1))}
  .js .fs-head h2{font-size:clamp(2rem,min(5vw,7vh),3.6rem);text-shadow:0 6px 40px rgba(8,12,4,.9)}
  .js .fs-strip{position:absolute;inset:0;z-index:2;display:block;padding:0;margin:0;max-width:none;overflow:visible}
  /* three planes at three speeds; the near ones are larger and brighter. The fourteen are spaced in
     time so three to six are on screen at once, and the last two settle before the archive link. */
  .js .fs-it{position:absolute;left:0;top:calc(var(--y) * 1vh);height:calc(var(--h) * 1vh);will-change:transform;
    transform:translate3d(calc(var(--x) * 1vw - var(--fp,0) * 420vw * var(--d)),0,0) rotate(calc(var(--r,0) * 1deg));
    opacity:calc(1 - clamp(0,(var(--fp,0) - .93) * 16,1))}
  .js .fs-it figure{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
  .js .fs-it img{filter:brightness(var(--b,.82)) saturate(.92);transition:filter .6s var(--ease)}
  .js .fs-it figcaption{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .js .fs-it:hover{z-index:9!important}
  .js .fs-it:hover figure{transform:translateY(-12px) scale(1.035);box-shadow:0 80px 120px -40px rgba(0,0,0,.95)}
  .js .fs-it:hover img{filter:none}
  .js .fs-it:hover figcaption{opacity:1;transform:none}
  .js .fs-foot{position:absolute;z-index:4;left:var(--pad);bottom:clamp(24px,5vh,54px);margin:0;padding:0;max-width:none;
    opacity:calc(clamp(0,(var(--fp,0) - .8) * 12.5,1) * (1 - clamp(0,(var(--fp,0) - .95) * 22,1)))}
}

/* ============================== 08 talk to us ============================== */
.tk{z-index:3;overflow:visible}
.tk .wrap{z-index:2}
.tk .h2{max-width:22ch}
.tk-thread,.tk-rise{display:none}
@media (prefers-reduced-motion:no-preference){
  .js .tk.tk-live{background:#0F140B}
  .js .tk.tk-live .tk-rise{display:block;position:absolute;inset:0;z-index:0;background:var(--forest);
    clip-path:inset(calc((1 - clamp(0,(var(--tk,1) - .4) / .44,1)) * 100%) 0 0 0)}
  .js .tk.tk-live::before{z-index:1;opacity:clamp(0,(var(--tk,1) - .6) * 2.5,1)}
  .js .tk.tk-live .tk-body{transition:none;opacity:clamp(0,(var(--tk,1) - .56) / .36,1);
    transform:translateY(calc((1 - clamp(0,(var(--tk,1) - .56) / .36,1)) * 34px))}
  /* the thread ends on the band's top edge and pulses there, then the band rises to meet it */
  .js .tk.tk-live .tk-thread{display:block;position:absolute;z-index:2;left:50%;top:-36vh;width:1px;
    height:36vh;pointer-events:none}
  .tk-line{position:absolute;inset:0;transform-origin:50% 0;
    background:linear-gradient(to bottom,rgba(224,86,22,0),var(--accent) 30%);
    transform:scaleY(clamp(0,var(--tk,1) / .38,1));opacity:calc(1 - clamp(0,(var(--tk,1) - .6) * 4,1))}
  .tk-pulse{position:absolute;left:50%;bottom:0;width:70px;height:70px;margin:0 0 -35px -35px;border-radius:50%;
    border:1px solid var(--accent);
    opacity:calc(clamp(0,(var(--tk,1) - .36) / .26,1) * (1 - clamp(0,(var(--tk,1) - .36) / .26,1)) * 3.6);
    transform:scale(calc(.2 + clamp(0,(var(--tk,1) - .36) / .26,1) * 2.8))}
  .tk-pulse.b{opacity:calc(clamp(0,(var(--tk,1) - .42) / .3,1) * (1 - clamp(0,(var(--tk,1) - .42) / .3,1)) * 3);
    transform:scale(calc(.2 + clamp(0,(var(--tk,1) - .42) / .3,1) * 4.4))}
}
/* where the field teaser is an ordinary strip, the thread is shorter and runs in its own margin */
@media (prefers-reduced-motion:no-preference) and (max-width:860px),
       (prefers-reduced-motion:no-preference) and (max-height:539px){
  .js .tk.tk-live .tk-thread{top:-15vh;height:15vh}
  .js .fs{padding-bottom:calc(15vh + clamp(40px,6vh,64px))}
}