#motion-toggle[hidden]{display:none}
/* The winter leg adds time to the drive while preserving native scrolling. */
.weather{min-height:160dvh;align-items:flex-start;padding-top:6dvh}
.chapter.weather .copy{position:sticky;top:calc(var(--header) + 4dvh);max-width:680px}
.weather h2{font-size:clamp(48px,5.4vw,80px)}
.weather h2 span{color:#c7dde8}
.weather .description{max-width:400px}
.chapter-bar>nav{min-width:0;overflow-x:auto;scrollbar-width:none}
.chapter-bar>nav::-webkit-scrollbar{display:none}
.chapter-bar a{flex-shrink:0}
@media(min-width:1100px){.closing h2{font-size:clamp(56px,5.2vw,80px)}}
@media(max-width:760px){
  .weather{padding-top:4dvh}
  .weather h2{font-size:clamp(42px,9.4vw,62px)}
  .weather .description{font-size:13px;margin-top:17px}
  .chapter-bar{width:max-content;max-width:calc(100vw - 24px)}
  .chapter-bar a{padding-inline:9px}
  .chapter-bar a:last-child{display:inline-flex}
  .weather .copy>.text-link{margin-top:16px}
  .closing h2{font-size:clamp(42px,9.4vw,62px)}
}
@media(prefers-reduced-motion:reduce){.weather{min-height:110dvh}.chapter.weather .copy{position:relative;top:auto}}
@media(max-width:380px){
  .weather h2,.closing h2{font-size:34px}
}
@media(max-width:760px) and (max-height:700px){
  .chapter.weather .copy{position:relative;top:auto}
  .closing{padding-top:10dvh}
}

/* September 12: the scene fades in once the truck is ready instead of popping. */
.world canvas{opacity:0;transition:opacity .9s cubic-bezier(.16,1,.3,1)}
.world.is-ready canvas{opacity:1}
html{scrollbar-color:#3b4046 #101112}

/* Drawn icons share one stroke, replacing mismatched text glyphs. */
.icon{width:14px;height:14px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#motion-toggle .icon{width:15px;height:15px}
#motion-toggle .icon-play,#motion-toggle[data-paused="true"] .icon-pause{display:none}
#motion-toggle[data-paused="true"] .icon-play{display:block}

/* A scrolled chapter list fades at the edge that hides links, never mid-word. */
.chapter-bar>nav.fade-end{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.chapter-bar>nav.fade-start{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
.chapter-bar>nav.fade-start.fade-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}

/* Over the brighter winter sky a wider, softer falloff keeps the copy legible
   without reading as a dark oval. */
.chapter.weather .copy::before{inset:-130px -190px;background:radial-gradient(ellipse at 40% 50%,rgba(8,10,12,.64) 20%,rgba(8,10,12,.34) 52%,transparent 80%);filter:blur(42px)}
/* Phones: the falloff must stay inside the screen. A pseudo-element past the
   right edge widens the mobile layout viewport and pushes the header menu
   and the fixed chapter bar off-screen. The blur still feathers the edge. */
@media(max-width:760px){.chapter.weather .copy::before{inset:-110px -20px}}

/* The login arrow sits on the text's centre line, not its baseline. */
.login{display:inline-flex;align-items:center;gap:6px}
.login .icon{width:12px;height:12px}