/* pages page styles. Owned by the pages page; uses the tokens defined in index.html */
  /* ---------- the other pages: paper, the same type, the same numbers ---------- */
  html.on-page #gl, html.on-page .story__vid, html.on-page .sheet { display: none; }
  .page { position: relative; z-index: 3; background: var(--paper); min-height: 100vh; }
  .pg { padding: calc(110px + env(safe-area-inset-top, 0px)) var(--m) 0; }
  .pg__head { display: grid; gap: 18px; max-width: 1200px; margin-bottom: clamp(48px, 9vh, 110px); }
  .pg__title { margin: 0; font: 300 clamp(3rem, 8.4vw, 9.4rem)/.94 var(--display); letter-spacing: -.03em; text-wrap: balance; }
  .pg__title em { font-size: 1.04em; }
  .pg__lede { margin: 0; max-width: 34em; font-size: 1.0625rem; color: rgba(11,14,42,.8); }
  .pg__count { color: rgba(11,14,42,.6); }
  .nextbar { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px var(--m); margin: clamp(90px, 16vh, 180px) calc(var(--m) * -1) 0; padding: clamp(40px, 8vh, 80px) var(--m) calc(var(--m) + env(safe-area-inset-bottom, 0px) + 10px); background: var(--night); color: var(--star); text-decoration: none; }
  .nextbar .lbl { grid-column: 1 / -1; color: rgba(243,242,251,.7); }
  .nextbar__t { font: 300 clamp(3rem, 9vw, 10rem)/.95 var(--display); letter-spacing: -.03em; transition: font-style .3s; }
  .nextbar:hover .nextbar__t { font-style: italic; }
  .nextbar__arrow { font: 300 clamp(2.4rem, 6vw, 6rem)/1 var(--display); transition: translate 1s var(--ease); }
  .nextbar:hover .nextbar__arrow { translate: 14px 0; }
  .pg .row + .row { margin-top: clamp(56px, 10vh, 120px); }
  .wd { display: inline-block; white-space: nowrap; }
  .pg__title .ch { display: inline-block; translate: 0 .55em; opacity: 0; transition: translate 1.2s var(--ease), opacity 1s var(--ease); }
  .pg__title.in .ch { translate: 0 0; opacity: 1; }
  .rise { opacity: 0; translate: 0 36px; transition: opacity 1.1s var(--ease), translate 1.3s var(--ease); }
  .rise.in { opacity: 1; translate: 0 0; }
  .pg__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin: 0 calc(var(--m) * -1); padding: 22px var(--m) calc(22px + env(safe-area-inset-bottom, 0px)); background: var(--night); color: rgba(243,242,251,.7); font-weight: 500; font-size: .875rem; }
  .pg__foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .pg__foot a { color: inherit; text-decoration: none; padding-block: 10px; margin-block: -10px; }
  .pg__foot a:hover { color: #fff; }
  .nextbar + .pg__foot, .case__next + .pg__foot { border-top: 1px solid rgba(243,242,251,.12); }

  /* a dark card under the bar (not full width): no shade behind the bar, the card is dark enough */
  html.night-bare .bar::after, html.night-bare .bar::before { opacity: 0; }