/* base.css — reset, the invitation column, the art canvas, a11y helpers. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  --page-bg: #3a0807;     /* deep maroon just outside the art's own edge tones */
  --page-bg-2: #220403;
  --column-max: 560px;
}
html { background: var(--page-bg); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  background: radial-gradient(120% 70% at 50% 0%, var(--page-bg) 0%, var(--page-bg-2) 100%);
  color: #fbe6c6;
  font-family: var(--f-trajan);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* centred invitation column. `clip`, never `hidden`: hidden makes a scroll container and
   freezes every view() timeline inside it (no error — progress just sticks). */
.page {
  width: 100%;
  max-width: var(--column-max);
  margin-inline: auto;
  overflow: clip;
  box-shadow: 0 0 60px rgba(0, 0, 0, .45);
}

/* the whole PSB canvas (2160 x 30012) as one box; every layer is absolutely positioned
   in % of it, and type is sized in cqw (1cqw = 1% of the canvas width). */
.art {
  position: relative;
  width: 100%;
  aspect-ratio: 2160 / 30012;
  container-type: inline-size;
  background: #6d0f0b;     /* art tone under the base while slices decode */
}
.base, .cut, .cut-mv, .cut-in { position: absolute; }
.base { left: 0; width: 100%; display: block; }
.cut { pointer-events: none; }
.cut-mv { inset: 0; }
.cut-in { inset: 0; width: 100%; height: 100%; display: block; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 8px 14px; border-radius: 8px;
  background: #2a0504; color: #fbe6c6; font: 600 14px/1.2 system-ui, sans-serif;
  transform: translateY(-150%); transition: transform .2s;
}
.skip-link:focus-visible { transform: none; outline: 2px solid #f3cf8e; outline-offset: 2px; }