/* Page-wide rules. Colour tokens come from shared/base.css; these are the page's own. */
:root {
  --plinth-top: #fff;
  --plinth-front-1: #ececec;
  --plinth-front-2: #b9b9b9;
  --plinth-side-1: #d2d2d2;
  --plinth-side-2: #a4a4a4;
  --still-dim: 1;
  --still-fade: 0.5;
  --bar-h: 76px;
  --type-giant: clamp(34px, min(5.4vw, 12svh), 96px);
  --type-big: clamp(32px, 4vw, 68px);
  --type-mid: clamp(21px, 1.9vw, 30px);
  --body-big: clamp(17px, 1.25vw, 19px);
}
@media (max-width: 760px) {
  :root { --type-giant: 10vw; --type-big: 8.4vw; }
}
:root[data-theme='dark'] {
  --plinth-top: #c6c6c6;
  --plinth-front-1: #474747;
  --plinth-front-2: #070707;
  --plinth-side-1: #262626;
  --plinth-side-2: #020202;
  --still-dim: 0.62;
  --still-fade: 1;
}

html { background: var(--ground); scroll-padding-top: 0; }
body { background: var(--ground); }
main { display: block; }
h1, h2 { letter-spacing: -0.03em; line-height: 1.06; }
h2 { font-size: var(--type-big); }
p { text-wrap: pretty; }
h3 { margin: 0; font-size: var(--type-mid); line-height: 1.08; letter-spacing: -0.025em; font-weight: 600; }
ol, ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

.ch { position: relative; padding-inline: max(var(--margin), env(safe-area-inset-left, 0px)) max(var(--margin), env(safe-area-inset-right, 0px)); }
.acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* A scene picture: both themes are in the page, and only the matching one loads. */
.still { position: absolute; inset: 0; display: block; overflow: hidden; pointer-events: none; }
.still picture { display: none; width: 100%; height: 100%; }
.still img { width: 100%; height: 100%; object-fit: cover; }
:root:not([data-theme='dark']) .still-light, :root[data-theme='dark'] .still-dark { display: block; }

.skip { position: fixed; left: var(--margin); top: -80px; z-index: 80; padding: 10px 16px; background: var(--ink); color: var(--ground); border-radius: 8px; }
.skip:focus { top: 12px; }

/* Jumping between chapters happens behind this. */
.jump-veil { position: fixed; inset: 0; z-index: 70; background: var(--ground); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }
.jump-veil.on { opacity: 1; }