/* The plain page: used whenever the script isn't running (JavaScript off, the script blocked or failed, or a very old
   browser). The <head> marks the page "js" and site.js confirms it finished; without that mark, these rules lay the
   same words and pictures out top to bottom, with nothing waiting on the scroll. */
html:not(.js) .opening{height:auto;display:flex;flex-direction:column;align-items:center;gap:7vh;padding:16vh var(--gut) 12vh;text-align:center;
  background:radial-gradient(90% 60% at 50% 100%,rgba(232,98,43,.18),transparent 60%),var(--night)}
html:not(.js) .opening .stage{position:static;height:auto;overflow:visible;background:none;display:flex;flex-direction:column;align-items:center;gap:7vh}
html:not(.js) .opening canvas.fire,html:not(.js) .opening .hint{display:none}
html:not(.js) .opening .line{position:static;transform:none!important;opacity:1!important;width:auto;max-width:980px}
html:not(.js) .me{position:static;opacity:1!important;pointer-events:auto;padding:0}
html:not(.js) .orb{transform:none!important}

/* chapters: the cover as a wide picture, the title under it, the story with the page's side margins */
html:not(.js) .chapter{padding:0 var(--gut)}
html:not(.js) .cover-img{margin:14vh calc(-1 * var(--gut)) 0}
html:not(.js) .cover-img img{width:100%;height:auto;max-height:70vh;object-fit:cover}
html:not(.js) .chapter > header{position:static;padding:5vh 0 4vh;opacity:1;transform:none}
html:not(.js) .cover{height:auto}
html:not(.js) .cover .stick{position:relative;height:auto;min-height:60vh}
html:not(.js) .cover .stick header{position:absolute;opacity:1!important;transform:none!important}
html:not(.js) .beat,html:not(.js) .beat:not(.solo){display:block;margin-bottom:10vh}
html:not(.js) .beat > p,html:not(.js) .beat > h3{max-width:30ch}
html:not(.js) .beat > figure,html:not(.js) .pics figure{max-width:760px;margin:28px 0 0}
html:not(.js) .beat.solo > p{margin:0 auto}
html:not(.js) .text{position:static}
html:not(.js) figure{opacity:1!important;transform:none!important}
html:not(.js) figure.long .frame{aspect-ratio:auto}
html:not(.js) figure.long .frame img{position:static;transform:none!important}
html:not(.js) .w{opacity:1!important}
html:not(.js) .thought{padding:6vh 0 14vh}

html:not(.js) .pause{height:auto}
html:not(.js) .pause p{position:static;height:auto;padding:14vh var(--gut);opacity:1!important}
html:not(.js) .moment{height:auto;padding:14vh var(--gut);text-align:center}
html:not(.js) .moment .stick{position:relative;height:auto}
html:not(.js) .moment .year,html:not(.js) .moment .deal b,html:not(.js) .moment .sub{opacity:1!important;transform:none!important}
html:not(.js) .moment .deal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;font:400 clamp(40px,6.6vw,108px)/1 var(--serif)}
html:not(.js) .moment .arrow{transform:none!important}
html:not(.js) .moment .sub{margin:4vh auto 0}
html:not(.js) .rail{display:none}