/* v3: v2's gothic layout in black / white / red; the ticket carries a sigil holo foil */
:root {
  --bg: #0A0A0B;
  --card: #121213;
  --line: #2A2A2D;
  --dim: #6E6E73;
  --grey: #8E8F96;   /* secondary text: 4.6:1 even on the stub's lightest grey; --dim is for lines and ornaments, never text */
  --white: #F2F2F2;
  --ink: #0E0E10;
  --red: #C41E24;
  --red-hi: #E2353B;
  --red-text: #EE6166;   /* small red text on cards and the stub, where --red-hi falls under 4.5:1 */
  --well: #0D0D0F;
  --raised: #141416;
  --line-hi: #3A3A3E;
  --orn: #5A5A60;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;   /* data only: times, dates, ticket N°, camera readouts, stacks */
  --sans: 'IBM Plex Sans', Arial, sans-serif;
  --gutter: clamp(16px, 6.6vw, 96px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--white); font: 400 15px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
::selection { background: var(--red); color: var(--white); }
:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.label { font: 500 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.red { color: var(--red-hi); }
/* link arrows (gen-sigils: arrow) in the text's colour; .out leans up for links that leave the site */
.sigil.ar { display: inline-block; width: 1.9em; height: .95em; margin-left: .2em; vertical-align: -.12em; --m: url(sigils/arrow.svg); --c: currentColor; }
.sigil.ar.out { width: 1.5em; rotate: -35deg; translate: 0 -.1em; }
.btn .sigil.ar { margin-left: 0; }

/* sigils are masks; the background decides the colour */
.sigil { display: block; background: var(--c, var(--white)); mask: var(--m) center / contain no-repeat; -webkit-mask: var(--m) center / contain no-repeat; pointer-events: none; }
.s-corner { --m: url(sigils/corner.svg); }
.s-corner-br { --m: url(sigils/corner-br.svg); }
.s-star { --m: url(sigils/star.svg); }
.s-mark { --m: url(sigils/mark.svg); }
.s-halo-red { --m: url(sigils/halo-red.svg); --c: var(--red); }
.s-halo-needle { --m: url(sigils/halo-needle.svg); }
.s-halo-foot { --m: url(sigils/halo-foot.svg); }
.s-halo-sky { --m: url(sigils/halo-sky-a.svg); }
.s-halo-sky + .s-halo-sky { --m: url(sigils/halo-sky-b.svg); }
.s-constellation { --m: url(sigils/constellation.svg); }
.s-divider { --m: url(sigils/divider.svg); }
.s-sun { --m: url(sigils/sun.svg); --c: var(--red); }
.s-eclipse { --m: url(sigils/eclipse.svg); }
.s-twin { --m: url(sigils/twin.svg); }
/* the stars that come out as the ticket burns (gen-sigils: night-1..3), the same layers on both sides of the page change so they hold still */
.night { position: fixed; inset: 0; z-index: -1; opacity: 0; -webkit-mask-size: cover; mask-size: cover; }
.night.n1 { --m: url(sigils/night-1.svg); }
.night.n2 { --m: url(sigils/night-2.svg); }
.night.n3 { --m: url(sigils/night-3.svg); }
.halo { position: relative; aspect-ratio: 290 / 390; }
.halo > .sigil, .halo > div, .halo > div > .sigil { position: absolute; inset: 0; }   /* layers, and the groups that move them (.hcrown, .hsky) */
.halo > div { pointer-events: none; }
/* one box per needle (x, base y, height and angle in the halo's 290 x 390 units), a little wider and taller than the needle so it
   is easy to point at; the needle sits inside it, 4 units down from the top and 3 up from the bottom */
.halo .nd { position: absolute; left: calc((var(--x) - 14) / 290 * 100%); width: calc(18 / 290 * 100%);
  top: calc((var(--b) - 2 * var(--h) - 9) / 390 * 100%); height: calc((2 * var(--h) + 7) / 390 * 100%);
  rotate: calc(var(--a, 0) * 1deg); transform-origin: 50% calc(100% * (2 * var(--h) + 4) / (2 * var(--h) + 7)); }   /* turned a degrees on its base, so it points out from the star */
.halo .nd > .sigil { position: absolute; inset: calc(400% / (2 * var(--h) + 7)) 0 calc(300% / (2 * var(--h) + 7)); }
/* the two red stars beside the big one, level with its side points (x 106 / 194, y 230 in the halo's 290 x 390 box) */
.halo > .spark { --m: url(sigils/mark.svg); --c: var(--red); inset: auto; top: 57.69%; left: 34.83%; width: 5.31%; aspect-ratio: 1; translate: -50% -50%; }
.halo > .spark + .spark { left: 65.17%; }

/* header */
.top { display: flex; align-items: center; gap: 24px; margin: 0 var(--gutter); padding: 36px 0 28px; border-bottom: 1px solid var(--line); }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); letter-spacing: .36em; text-transform: uppercase; }
.brand .s-mark { width: 18px; height: 18px; --c: var(--red); }
.top .end { margin-left: auto; }

/* buttons */
.btn { appearance: none; display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; background: transparent; color: var(--white); border: 1px solid var(--dim); border-radius: 2px; cursor: pointer;
  font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.btn:hover { background: #ffffff0d; border-color: var(--white); }
.btn:active { background: var(--white); color: var(--ink); }

/* reduced motion: each page keeps its fades and state changes but drops movement and loops (see the page's own block);
   the JS draws still frames. Smooth scrolling goes too */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }