/*
  The site pages' own rules, on top of the game's stylesheet, which every page links first.
  Everything the pages share with the game (the crumb, the rows, the ceremony's stage, the type,
  the colours) comes from that sheet untouched; this file only says how a page differs from the
  night: the stage sits in the page instead of over it, the acts read left-aligned, and without
  script the acts stack. No class here is a class the game's sheet declares (scripts/check-site.mjs).
*/
.pages{min-height:100dvh;display:flex;flex-direction:column}
.pages .top{position:sticky;top:0;z-index:5;background:var(--bg)}
.pages .crumb a{color:inherit;text-decoration:none}
.pages .cer{position:relative;inset:auto;z-index:auto;flex:1;min-height:calc(100dvh - 44px)}
.pages .cstg{justify-content:flex-start;align-items:stretch;text-align:left;padding:18px 20px 10px;animation:none}
.pages .cstg.flip{animation:swap .22s ease-out}
.pages .leaf{display:block;width:100%;max-width:560px;margin:0 auto 44px}
.pages.live .leaf{display:none;margin-bottom:0}
.pages.live .leaf.on{display:block}
.pages .leaf.opening{text-align:center}
.pages .leaf.opening .clead{font-family:var(--q);font-size:clamp(16px,2vw,20px);color:var(--dim);line-height:1.7;max-width:46ch;margin:0 auto 14px}
.pages .leaf.opening .cprose{text-align:left}
.pages .ctitle{font-family:var(--x);font-size:30px;text-transform:uppercase;line-height:1;margin:8px 0 10px}
.pages .cprose{font-family:var(--q);font-size:16.5px;line-height:1.65;color:var(--dim);margin:8px 0}
.pages .cprose b{color:var(--fg)}
/* A picture is a phone screen, 390 by 844: it takes under half the height so an act with 2 paragraphs
   fits one screen; a longer act scrolls inside the stage, as a 12-award night does. */
.pages .cpic{margin:14px auto 0;width:fit-content;max-width:62%;border:1px solid var(--edge2);border-radius:12px;overflow:hidden;background:#000}
.pages .cpic img{display:block;width:auto;height:auto;max-width:100%;max-height:46dvh}
.pages .leaf .r{text-align:left}
.pages .leaf .acts{margin-top:14px}
.pages .cnav{display:none}
.pages.live .cnav{display:flex}
.pages .cdots.many{display:none}
.pages .ccount{display:none;font-family:var(--c);font-size:12px;letter-spacing:.2em;color:var(--dim3);font-variant-numeric:tabular-nums}
.pages .cdots.many + .ccount{display:inline}
.pages .ctail{text-align:left}
.pages .cfoot{font-family:var(--c);font-size:11.5px;letter-spacing:.08em;color:var(--dim3);padding:14px 20px 26px;border-top:1px solid var(--edge);text-align:center;line-height:1.8}
.pages .cfoot a{color:var(--dim2)}
/* The 404 reads down: the number is the page. */
.pages .hero404{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 20px;text-align:center}
.pages .hero404 .cnum{font-family:var(--x);font-size:clamp(150px,44vw,300px);line-height:.86;margin:10px 0 18px}
.pages .hero404 .acts,.pages .hero404 .r{text-align:left;width:100%;max-width:520px;margin-left:auto;margin-right:auto}
.pages .hero404 .acts{width:100%;margin-top:6px}
@media (min-width:760px){
  .pages .leaf{max-width:640px}
  .pages .ctitle{font-size:36px}
}