/* One Acre Fields: About (07-about), a walk down the hill.
   Page-specific rules from the prototype, values verbatim. Shared pieces
   (.stars, .mail, .rv, .hand, .btn, .k, .h1, .p) come from base/components. */

/* the walk: one long gradient from dawn paper to night.
   The stops sit at the same share of the walk at every width (hero 0-9%,
   stops ~9/23/38/52/67%, fire 81-100%), so the colours are placed to match:
   dusk (#6E5747) arrives with the first .dark stop, night by the fire. One column
   (<=900px) runs its stops higher up the walk, so it has its own stops. Caption
   colours follow the band (.tone-light/.tone-mid/.tone-dark on each stop).
   Prototype values, for reference: #F6F2E8 0, #EDE3CC 14, #E6D6B8 30,
   #D9C39C 44, #B08B66 58, #6E5747 70, #33322F 82, #1C201D 100. */
/* overflow is clip, not hidden: hidden makes the walk a scroll container, and every view()
   timeline inside it (the .rv rise, the objects' line draw, the fire) then measures against
   the walk instead of the page and never moves. */
.walk{--trail-start:-6%;--trail-end:100%;position:relative;overflow:hidden;overflow:clip;background:linear-gradient(180deg, #F6F2E8 0%, #EDE3CC 12%, #E6D6B8 24%, #D9C39C 36%, #B08B66 49.5%, #6E5747 53%, #33322F 62%, #1C201D 82%)}
.land{position:absolute;inset:0;z-index:0;pointer-events:none}
.land svg{width:100%;height:100%;display:block}
.land .i{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.land .w{mix-blend-mode:multiply}
.land .lt .i{stroke:#EFEAE0;opacity:.55}

/* the trail */
.trail{position:absolute;inset:0;z-index:1;pointer-events:none}
.trail svg{width:100%;height:100%;display:block}
.trail .base{fill:none;stroke:var(--ink);stroke:url(#ab-trail-ink);stroke-width:2;stroke-linecap:round;stroke-dasharray:10 11;opacity:.35}
.trail .draw{fill:none;stroke:var(--ink);stroke:url(#ab-trail-ink);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:14 10;opacity:.9}
.trail .m{display:none}
@supports (animation-timeline: scroll()){
  .walk{view-timeline-name:--walk}
  /* --len (inline on each path; about.js re-measures it) is the path's length, so the drawn tip
     follows the reader down the hill. The range runs while the walk fills the screen, so the tip
     stays in view all the way and reaches the fire as the page runs out (--trail-start/-end). */
  .trail .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:drawpath linear both;animation-timeline:--walk;animation-range:contain var(--trail-start) contain var(--trail-end)}
  @keyframes drawpath{to{stroke-dashoffset:0}}
}

/* the top of the hill */
.ab-hero{position:relative;z-index:2;padding:clamp(3.5rem,9vh,6.5rem) clamp(18px,4.5vw,56px) 2rem}
.ab-hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,6vw,5rem);align-items:end}
.ab-hero .hand{margin-top:1rem}
.journey{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:1.4rem}
.journey i{display:block;width:34px;height:1px;background:var(--ink-3)}
.journey b{font-weight:500;color:var(--ink);background:#FBF8F0;border:1px solid rgba(30,37,32,.3);padding:.35em .7em;border-radius:2px}

/* the stops */
.stops{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:0 clamp(18px,4.5vw,56px)}
.stop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:center;min-height:78vh;padding-block:3rem}
.stop.r .found{order:2}
.found{position:relative}
.found .obj{width:min(100%,420px);height:auto;display:block;overflow:visible}
.found .obj .i{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.found .obj .it{fill:none;stroke:var(--ink);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.found .obj .w{mix-blend-mode:multiply}
.found .obj text{font-family:var(--hand);fill:var(--earth)}
.stop.dark .found .obj .i,.stop.dark .found .obj .it{stroke:#EFEAE0}
@supports (animation-timeline: view()){
  .found .obj .i,.found .obj .it,.found .obj .string{stroke-dasharray:1600;stroke-dashoffset:1600;animation:drawv linear both;animation-timeline:view();animation-range:entry 15% entry 75%}
}
.found .hand{margin-top:.6rem;font-size:1.05rem}
/* the caption sits on a soft scrap of paper (an ink halo on the dark stops), so it keeps
   AA against the gradient and the land washes at every width (a11y A4). The halo hugs the
   text: inline-block, with the padding pulled back so the words stay flush with the object. */
.found .hand{--halo:rgba(251,248,240,.86);--halo-soft:rgba(251,248,240,.55);display:inline-block;max-width:100%;padding:.22em .6em .3em;margin-left:-.6em;border-radius:.4em;background:var(--halo);box-shadow:0 0 0 .32em var(--halo),0 0 1.3em .8em var(--halo-soft);transform:rotate(-.35deg)}
.stop.r .found .hand{transform:rotate(.35deg)}
.stop.dark .found .hand{--halo:rgba(28,32,29,.64);--halo-soft:rgba(28,32,29,.4)}

/* the plank signs (pegs, .yr and @keyframes up come from components.css, C20) */
.plank{position:relative;background:#F1E7CF;padding:1.6rem 1.7rem 1.8rem;border-radius:3px;box-shadow:0 14px 30px rgba(30,37,32,.16), inset 0 0 0 1px rgba(30,37,32,.2);transform:rotate(var(--r,-.6deg))}
.plank h2{font-family:var(--display);font-weight:var(--dw);font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:var(--dls);text-transform:var(--dcase);line-height:1.06;margin:.3rem 0 .7rem}
.plank p{color:var(--ink-2);font-size:.98rem}
.cv{margin-top:1rem;border-top:1px dashed rgba(30,37,32,.35);padding:.8rem 0 0;list-style:none;display:grid;gap:.45rem}
.cv li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;font-size:.9rem;color:var(--ink-2);align-items:baseline}
.cv b{font-weight:600;color:var(--ink)}
.cv i{font-style:normal;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--ink-3-text);white-space:nowrap}
.stop.dark .plank{background:#EFE6D2}
/* captions take the colour of the band they sit on (AA against the measured ground) */
.stop.tone-light .found .hand{color:var(--band-em)}
.stop.tone-mid .found .hand,.stop.tone-mid .found .hand small{color:var(--ink)}
.stop.tone-dark .found .hand{color:var(--ember)}
.stop.tone-dark .found .hand small{color:var(--dusk-ink-2)}
.stop.dark .found .obj text{fill:var(--ember)}

/* the fire: the last chapter */
.fire-scene{position:relative;z-index:2;min-height:100vh;display:grid;align-content:end;padding:clamp(4rem,10vh,8rem) clamp(18px,4.5vw,56px) clamp(15rem,32vh,19rem);color:#EFEAE0}
/* the bottom padding keeps the fire drawing (bottom of .scene) clear of the creds and the plank */
.fire-scene .scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.fire-scene .scene svg{width:100%;height:100%;display:block}
.fire-scene .scene .i{fill:none;stroke:#EFEAE0;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.fire-scene .scene .it{fill:none;stroke:#EFEAE0;stroke-width:1;stroke-linecap:round;opacity:.5}
.fire-scene .scene .ember{opacity:.3}
.fire-scene .glow{position:absolute;left:50%;bottom:-6vh;width:60vw;height:50vh;transform:translateX(-50%);background:radial-gradient(closest-side, rgba(232,154,74,.55), rgba(232,154,74,.18) 45%, transparent);filter:blur(24px);animation:ab-flick 2.8s ease-in-out infinite alternate;z-index:0;pointer-events:none}
@keyframes ab-flick{from{opacity:.7;transform:translateX(-50%) scale(1)}to{opacity:1;transform:translateX(-51%) scale(1.05)}}
.fire-scene .stars i{animation-name:ab-twinkle}
@keyframes ab-twinkle{from{opacity:.15}to{opacity:.9}}
.fire-scene .wrap{position:relative;z-index:2;max-width:1160px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,5rem);align-items:end}
.fire-scene .k{color:var(--dusk-k)}
.fire-scene .plank{background:rgba(239,230,210,.96);color:var(--ink)}
.quote{font-family:var(--hand);color:#EFEAE0;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.5}
.quote em{color:#E89A4A;font-style:normal}
.fire-scene .ctas{margin-top:1.6rem}
.fire-scene .btn{border-color:#EFEAE0;color:#EFEAE0}
.fire-scene .btn.solid{background:#E89A4A;border-color:#E89A4A;color:#1C201D}
.fire-scene :focus-visible{outline-color:#E89A4A}
.creds{display:flex;gap:1.4rem;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dusk-k);margin-top:1.6rem}

@media (max-width:900px){.land .lt{display:none}.walk{background:linear-gradient(180deg, #F6F2E8 0%, #EDE3CC 12%, #E6D6B8 24%, #D9C39C 34%, #B08B66 44%, #4E4038 50.5%, #33322F 57%, #1C201D 80%)}.trail .d{display:none}.trail .m{display:inline}.ab-hero .wrap,.stop,.fire-scene .wrap{grid-template-columns:1fr}.stop.r .found{order:0}.stop{min-height:0;padding-block:2.5rem}.found .obj{width:min(100%,300px)}.found .obj text[font-size="18"]{font-size:14px}.fire-scene{padding-bottom:20rem}}
@media (prefers-reduced-motion: reduce){.trail .draw{animation:none;stroke-dashoffset:0}.found .obj .i,.found .obj .it,.found .obj .string{animation:none;stroke-dashoffset:0}.fire-scene .glow,.fire-scene .stars i{animation:none}}

/* dawn: the veil lifts, then the hero rises */
.dawnveil{position:absolute;left:0;right:0;top:0;height:120vh;z-index:3;pointer-events:none;background:linear-gradient(180deg, rgba(246,242,232,1) 0%, rgba(246,242,232,.95) 40%, rgba(246,242,232,0) 100%);animation:lift 3.2s cubic-bezier(.25,.6,.2,1) .2s forwards}
@keyframes lift{to{opacity:0;translate:0 -30vh}}
.ab-hero .rv{opacity:0;translate:0 14px;animation:up .9s cubic-bezier(.2,.7,.2,1) 1s both}
.ab-hero .rv:nth-child(2){animation-delay:1.3s}
@media (prefers-reduced-motion: reduce){.dawnveil{display:none}.ab-hero .rv{animation:none;opacity:1;translate:0 0}}

/* ===== the motion layer =====
   page-about.php marks the walk .is-live (JS on, motion allowed); about.js then lays the
   trail in pixels, gives the lantern its path, splits the h1 and the quote into words and
   adds .in to each found object, plank and fire block as it arrives (.is-near while a found
   object is on screen, for its loops). Everything here is screen + no-preference, so with
   no JS, in print or with reduced motion the page is the plain one above.
   Entrances fill backwards only: once they end, the rules above are the resting state. */
.lantern{display:none}
@media screen and (prefers-reduced-motion: no-preference){
  .walk{--ab-out:cubic-bezier(.2,.7,.2,1);--ab-spring:linear(0,.22 5%,.62 11%,.9 16%,1.04 21%,1.09 26%,1.085 31%,1.05 38%,1.015 45%,.995 53%,.99 60%,.996 72%,1.002 84%,1)}
  @keyframes ab-up{from{opacity:0;translate:0 12px}}
  @keyframes ab-fade{from{opacity:0}}
  /* a hand line is written in, left to right (the insets leave room for the caption's halo) */
  @keyframes ab-write{from{clip-path:inset(-3em calc(100% + 3em) -3em -3em)}to{clip-path:inset(-3em)}}

  /* the top of the hill: the title rises word by word, the journey is walked chip by chip */
  .is-live .ab-hero .h1 .wd{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.1em .05em .18em;margin:-.1em -.05em -.18em}
  .is-live .ab-hero .h1 .wd>span{display:inline-block;animation:ab-word 1s var(--ab-out) calc(1s + var(--i,0)*65ms) backwards}
  @keyframes ab-word{from{translate:0 118%}}
  .is-live .journey b{animation:ab-chip .6s var(--ab-out) backwards}
  .is-live .journey i{transform-origin:0 50%;animation:ab-rule .5s var(--ab-out) backwards}
  @keyframes ab-chip{from{opacity:0;translate:0 8px;scale:.94}}
  @keyframes ab-rule{from{scale:0 1}}
  .is-live .journey :nth-child(1){animation-delay:1.7s}.is-live .journey :nth-child(2){animation-delay:1.82s}.is-live .journey :nth-child(3){animation-delay:1.98s}.is-live .journey :nth-child(4){animation-delay:2.1s}.is-live .journey :nth-child(5){animation-delay:2.26s}.is-live .journey :nth-child(6){animation-delay:2.38s}.is-live .journey :nth-child(7){animation-delay:2.54s}
  .is-live .ab-hero .hand{animation:ab-write 1s ease-out 2.2s backwards}
  .is-live .ab-hero .hand small{animation:ab-write .8s ease-out 2.8s backwards}

  /* the lantern: a dot at the tip of the drawn trail. Ink by day, it lights at dusk and goes into the fire. */
  .is-live .lantern{display:block;position:absolute;left:0;top:0;width:10px;height:10px;offset-rotate:0deg;animation:ab-lantern-in .9s var(--ab-out) 2.7s backwards}
  .lantern>span{position:absolute;inset:0;color:var(--ink)}
  .lantern b{position:absolute;inset:0;border-radius:50%;background:currentColor}
  .lantern i{position:absolute;inset:-28px;border-radius:50%;background:radial-gradient(closest-side, rgba(232,154,74,.85), rgba(232,154,74,.26) 45%, transparent);opacity:0;animation:ab-lantern-flick 2.3s ease-in-out infinite alternate}
  .lantern>span::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid currentColor;animation:ab-ping 2.8s ease-out 3.6s infinite backwards}
  @keyframes ab-lantern-in{from{opacity:0;scale:0}}
  @keyframes ab-lantern-flick{from{scale:.9}to{scale:1.12}}
  @keyframes ab-ping{from{opacity:.6;scale:1}70%,to{opacity:0;scale:3.6}}
  @supports (animation-timeline: scroll()){
    .is-live .lantern{animation:ab-lantern-in .9s var(--ab-out) 2.7s backwards,ab-lead linear both;animation-timeline:auto,--walk;animation-range:normal,contain var(--trail-start) contain var(--trail-end)}
    .lantern>span{animation:ab-tone linear both;animation-timeline:--walk;animation-range:contain var(--trail-start) contain var(--trail-end)}
    .lantern i{animation:ab-lantern-flick 2.3s ease-in-out infinite alternate,ab-lit linear both;animation-timeline:auto,--walk;animation-range:normal,contain var(--trail-start) contain var(--trail-end)}
    @keyframes ab-lead{from{offset-distance:0%}to{offset-distance:100%}}
    @keyframes ab-tone{0%,45%{color:#1E2520;opacity:1}56%,97%{color:#FFDCA8;opacity:1}100%{color:#FFDCA8;opacity:0}}
    @keyframes ab-lit{0%,44%{opacity:0}58%,100%{opacity:1}}
  }
  /* no scroll timelines: about.js moves the lantern and sets .is-dusk */
  @supports not (animation-timeline: scroll()){
    .lantern>span{transition:color .8s,opacity .5s}.lantern i{transition:opacity .8s}
    .lantern.is-dusk>span{color:#FFDCA8}.lantern.is-dusk i{opacity:1}.lantern.is-home>span{opacity:0}
  }

  /* the stops: these replace the scroll-scrubbed rise (.rv) */
  .is-live .stop .rv,.is-live .fire-scene .rv{animation:none}
  /* the found object: the washes bloom, then its lettering, then the caption is written */
  .is-live .found:not(.in) .obj .w,.is-live .found:not(.in) .obj text,.is-live .found:not(.in) .hand{opacity:0}
  .is-live .found .obj .w{transform-box:fill-box;transform-origin:50% 60%}
  .is-live .found.in .obj .w{animation:ab-wash 1.3s var(--ab-out) calc(var(--i,0)*110ms) backwards}
  .is-live .found.in .obj text{animation:ab-ink .7s ease-out calc(.3s + var(--i,0)*110ms) backwards}
  @keyframes ab-wash{from{opacity:0;scale:.84}}
  @keyframes ab-ink{from{opacity:0;translate:0 5px}}
  .is-live .found.in .hand{animation:ab-write .9s ease-out .5s backwards}
  .is-live .found.in .hand small{animation:ab-write .8s ease-out 1s backwards}
  /* while it is on screen: the lamp breathes, the blue string moves in the wind */
  .is-live .found.in.is-near .obj circle.w{animation:ab-wash 1.3s var(--ab-out) calc(var(--i,0)*110ms) backwards,ab-lamp 2.6s ease-in-out 1.5s infinite alternate}
  .is-live .found.is-near .obj .string{transform-box:fill-box;transform-origin:50% 0;animation:drawv linear both,ab-sway 4.6s ease-in-out infinite alternate;animation-timeline:view(),auto;animation-range:entry 15% entry 75%,normal}
  @keyframes ab-lamp{from{opacity:.3;scale:.92}to{opacity:.62;scale:1.1}}
  @keyframes ab-sway{from{transform:rotate(-.8deg)}to{transform:rotate(.8deg) translateY(1.5px)}}

  /* the plank is hung: it drops, swings past true and settles; the pegs go in; the words follow */
  .is-live .stop .plank:not(.in),.is-live .fire-scene .plank:not(.in){opacity:0}
  .is-live .plank{--swing:4deg}.is-live .stop.r .plank{--swing:-4deg}
  .is-live .plank.in{animation:ab-plank 1.2s var(--ab-spring) backwards}
  @keyframes ab-plank{from{opacity:0;transform:translateY(40px) rotate(calc(var(--r,-.6deg) + var(--swing)))}}
  .is-live .plank.in::before{animation:ab-peg .5s var(--ab-spring) .34s backwards}
  .is-live .plank.in::after{animation:ab-peg .5s var(--ab-spring) .46s backwards}
  @keyframes ab-peg{from{transform:translateY(-50%) scale(0)}}
  .is-live .plank .yr{display:inline-block}
  .is-live .plank.in .yr{animation:ab-write .7s ease-out .16s backwards}
  .is-live .plank.in h2{animation:ab-up .8s var(--ab-out) .22s backwards}
  .is-live .plank.in p{animation:ab-up .8s var(--ab-out) .3s backwards}
  .is-live .plank.in .cv{animation:ab-fade .6s ease-out .4s backwards}
  .is-live .plank.in .cv li{animation:ab-row .6s var(--ab-out) .46s backwards}
  .is-live .plank.in .cv li:nth-child(2){animation-delay:.54s}.is-live .plank.in .cv li:nth-child(3){animation-delay:.62s}.is-live .plank.in .cv li:nth-child(n+4){animation-delay:.7s}
  @keyframes ab-row{from{opacity:0;translate:-10px 0}}
  @media (hover:hover){
    .is-live .plank{transition:transform .5s var(--ab-out),box-shadow .5s var(--ab-out)}
    .is-live .plank:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 22px 40px rgba(30,37,32,.22), inset 0 0 0 1px rgba(30,37,32,.2)}
  }

  /* the fire: it kindles as the scene scrolls in, the flame and its sparks never sit still */
  @supports (animation-timeline: view()){
    .fire-scene{view-timeline-name:--fire}
    /* origin on the left edge, low: the glow is centred by translateX(-50%), so it grows in place, upwards */
    .fire-scene .glow{transform-origin:0 85%;animation:ab-flick 2.8s ease-in-out infinite alternate,ab-kindle linear both;animation-timeline:auto,--fire;animation-range:normal,entry 10% cover 50%}
    @keyframes ab-kindle{from{scale:.3}}
  }
  .fire-scene .scene .flame,.fire-scene .scene .ember{transform-box:fill-box;transform-origin:50% 100%;animation:ab-flame 1.7s ease-in-out infinite alternate}
  @keyframes ab-flame{0%{transform:scale(1) skewX(0deg)}35%{transform:scale(.96,1.08) skewX(-3.5deg)}70%{transform:scale(1.04,.95) skewX(3deg)}100%{transform:scale(.97,1.12) skewX(-1.5deg)}}
  .fire-scene .scene .ember{animation-name:ab-flame,ab-ember;animation-duration:1.7s,1.1s}
  @keyframes ab-ember{from{opacity:.22}to{opacity:.42}}
  .fire-scene .scene .sparks{opacity:1}
  .fire-scene .scene .sparks circle{opacity:0;transform-box:fill-box;transform-origin:center;animation:ab-spark 3.4s linear infinite}
  .fire-scene .scene .sparks circle:nth-child(1){--dx:-38px}
  .fire-scene .scene .sparks circle:nth-child(2){--dx:30px;animation-duration:4.2s;animation-delay:1.1s}
  .fire-scene .scene .sparks circle:nth-child(3){--dx:12px;animation-duration:2.9s;animation-delay:.5s}
  .fire-scene .scene .sparks circle:nth-child(4){--dx:-16px;animation-duration:3.8s;animation-delay:2.3s}
  .fire-scene .scene .sparks circle:nth-child(5){--dx:46px;animation-duration:4.6s;animation-delay:1.8s}
  .fire-scene .scene .sparks circle:nth-child(6){--dx:-26px;animation-duration:3.1s;animation-delay:2.9s}
  @keyframes ab-spark{0%{opacity:0;transform:translate(0,0)}10%{opacity:.95}50%{opacity:.6;transform:translate(calc(var(--dx,20px)*.78),-100px)}100%{opacity:0;transform:translate(var(--dx,20px),-230px) scale(.4)}}
  /* one shooting star, now and then */
  .fire-scene .shoot{position:absolute;left:66%;top:10%;width:120px;height:1.5px;border-radius:2px;background:linear-gradient(90deg, #EFEAE0, transparent);opacity:0;animation:ab-shoot 13s linear 5s infinite}
  @keyframes ab-shoot{0%{opacity:0;transform:rotate(-22deg) translateX(0) scaleX(.3)}1.5%{opacity:.9}7%{opacity:0;transform:rotate(-22deg) translateX(-320px) scaleX(1)}100%{opacity:0;transform:rotate(-22deg) translateX(-320px)}}

  /* the last chapter is said word by word; "and grow old." keeps a little of the fire */
  .is-live .fire-scene .rv:not(.plank):not(.in)>*{opacity:0}
  .is-live .fire-scene .rv.in .k{animation:ab-up .7s var(--ab-out) backwards}
  .is-live .quote .wd>span{display:inline-block}
  .is-live .fire-scene .rv.in .quote .wd>span{animation:ab-say .75s var(--ab-out) calc(.25s + var(--i,0)*42ms) backwards}
  @keyframes ab-say{from{opacity:0;translate:0 .45em;filter:blur(2px)}}
  .is-live .fire-scene .rv.in .quote em{animation:ab-warm 3.4s ease-in-out 2.4s infinite alternate}
  @keyframes ab-warm{from{text-shadow:0 0 0 rgba(232,154,74,0)}to{text-shadow:0 0 18px rgba(232,154,74,.6)}}
  .is-live .fire-scene .rv.in .ctas{animation:ab-up .8s var(--ab-out) 1.7s backwards}
  .is-live .fire-scene .rv.in .mail{animation:ab-up .8s var(--ab-out) 1.85s backwards}
  .is-live .fire-scene .rv.in .creds span{animation:ab-up .7s var(--ab-out) 2s backwards}
  .is-live .fire-scene .rv.in .creds span:nth-child(2){animation-delay:2.09s}.is-live .fire-scene .rv.in .creds span:nth-child(3){animation-delay:2.18s}.is-live .fire-scene .rv.in .creds span:nth-child(n+4){animation-delay:2.27s}
}
/* one column: the trail stops above the fire, so its tip gets there sooner */
@media (max-width:900px){.walk{--trail-start:0%;--trail-end:83%}}