/* ============================================================
   SPECTRUM v3 — paint chips, paper and ink

   The artboard is 1440 wide; --s is one of its pixels. The page is
   built from the objects a colour studio actually has on the desk:
   paint chips (colour above, a label below), fan guides, a wheel,
   a prism. It opens in the dark, the wheel floods it with paper,
   and the last stretch goes dark again.

   Layers: 0 the mark (foot of the screen) and the nav chips (top),
   both fixed and buried by the page; 1 the page; 10 the burst,
   inside the wheel's own stack; 40 grain; 50 curtain, short nav.
   ============================================================ */

:root {
  --s: calc(100vw / 1440);
  /* type is set in --t: --s divided by however much the browser itself
     enlarges text (1 on a browser that does not), measured on load */
  --t: calc(var(--s) / var(--text-scale, 1));
  --night: #121212;
  --paper: #ebe7df;
  --card: #f8f6f1;
  --ink: #111111;
  --mut: #8b8a86;
  --line: #1111111f;
  --note: #f8f6f1;
  --r: calc(14 * var(--s));
  --hue: 350;
  --live: hsl(var(--hue) 94% 58%);
  --parallax: 70;
  --drift: 0.07;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { background: var(--night); }
body {
  background: var(--night); color: #fff;
  font-family: var(--font); font-size: calc(13 * var(--t)); line-height: 1.4;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.is-loading, .is-loading body { height: 100%; overflow: hidden; }
h1, h2, h3, p, dl, dd, dt, ol, ul, li { margin: 0; padding: 0; font-weight: 400; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

main { position: relative; z-index: 1; }
main, main > *, main section, .seven > * { pointer-events: none; }
main a, main button, main summary, main details, main [data-scroll-top], .field, .hero, .cta, .fact, .shape, .hang, .out, .enrol__card, .poster__card { pointer-events: auto; }

.k { font-size: calc(11 * var(--t)); letter-spacing: .02em; color: var(--mut); }
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line__in { display: block; }

/* ---------- chips: the nav, the footer ---------- */
.chip {
  position: relative; display: inline-flex; align-items: center; overflow: hidden;
  height: calc(30 * var(--s)); padding: 0 calc(14 * var(--s));
  border-radius: calc(15 * var(--s));
  background: var(--card); color: var(--ink);
  font-size: calc(12 * var(--t)); line-height: 1; white-space: nowrap;
  transition: background .3s, color .3s, box-shadow .3s;
}
.chip b { font-weight: 600; }
.chip .rise { display: inline-flex; align-items: center; }
.chip--line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #ffffff55; }
.chip--line:hover, .chip--line[aria-pressed="true"] { background: #fff; color: var(--ink); }
.chip--live { background: var(--live); color: var(--ink); }
.chip--live:hover { background: #fff; }
.dot {
  display: inline-block; width: calc(10 * var(--s)); height: calc(10 * var(--s)); margin-right: calc(8 * var(--s));
  border-radius: 50%; background: conic-gradient(from 90deg, hsl(350 95% 58%), hsl(50 95% 58%), hsl(140 80% 48%), hsl(200 90% 52%), hsl(270 80% 60%), hsl(350 95% 58%));
}
.nav__gap { flex: 1; }

.nav, .back-nav {
  position: fixed; z-index: 0; left: calc(24 * var(--s)); right: calc(24 * var(--s)); top: calc(20 * var(--s));
  display: flex; gap: calc(6 * var(--s)); align-items: center;
}
.back-nav {
  z-index: 50; top: calc(12 * var(--s));
  transform: translateY(calc(-100% - 20 * var(--s))); visibility: hidden; pointer-events: none;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .5s;
}
.back-nav.is-down { transform: none; visibility: visible; pointer-events: auto; transition: transform .5s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.back-nav .chip { box-shadow: 0 calc(6 * var(--s)) calc(18 * var(--s)) #0000002a; }
.back-nav .chip--line { background: var(--night); }

/* ---------- the mark, on the foot of the screen ---------- */
.mark {
  position: fixed; z-index: 0; pointer-events: none;
  left: calc(24 * var(--s)); bottom: calc(20 * var(--s)); width: calc(1392 * var(--s));
  color: #fff;
}
.mark__word, .foot__word {
  display: flex; justify-content: space-between; margin: 0; white-space: nowrap;
  font-weight: 760; font-variation-settings: "wdth" 62; font-stretch: 62%;
  line-height: 1.09; letter-spacing: -.01em; text-transform: uppercase;
  font-size: calc(340 * var(--t));
}
/* the mask is the cap height: a letter lowered out of it is not drawn */
.mark__ch { display: block; flex: 0 0 auto; overflow: hidden; height: .72em; }
.mark__ch > i { display: block; font-style: normal; margin-top: -.17em; }
.mark__word.is-lit .mark__ch > i {
  background: linear-gradient(90deg, #fff 0 30%, hsl(350 95% 62%) 38%, hsl(46 100% 60%) 44%, hsl(150 80% 55%) 50%, hsl(210 95% 62%) 56%, hsl(280 85% 66%) 62%, #fff 70% 100%) no-repeat;
  background-size: 400% 100%; background-position: var(--sweep, 100%) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- curtain: seven bands ---------- */
.curtain { position: fixed; inset: 0; z-index: 50; display: flex; pointer-events: none; }
.curtain span { flex: 1; background: hsl(var(--h) 90% 58%); transform-origin: top; }

/* ---------- filmstrip ---------- */
.film { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.film__strip { position: absolute; left: 50%; top: 0; width: calc(1392 * var(--s)); margin-left: calc(-696 * var(--s)); overflow: visible; }
.is-ready .film { display: none; }

/* ============================================================
   COLOUR FIELDS
   ============================================================ */
.cf {
  position: absolute; inset: 0; display: block; background: var(--paint, #777);
  --tex: url(../tex/silk.webp); --tex-op: .75; --tex-mode: overlay;
}
.cf::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--tex) center / cover; mix-blend-mode: var(--tex-mode); opacity: var(--tex-op);
}
.frame { position: absolute; overflow: hidden; }
[data-drift] > .cf { top: calc(var(--drift) * -100%); height: calc(100% + var(--drift) * 200%); bottom: auto; will-change: transform; }
[data-parallax] > .cf { top: calc(var(--parallax) * -1 * var(--s)); height: calc(100% + var(--parallax) * 2 * var(--s)); bottom: auto; will-change: transform; }

.cf--hero {
  --paint:
    radial-gradient(60% 50% at 70% 30%, hsl(46 100% 64%) 0%, transparent 70%),
    radial-gradient(60% 55% at 25% 75%, hsl(200 95% 55%) 0%, transparent 72%),
    conic-gradient(from 200deg at 45% 55%, hsl(350 95% 58%), hsl(20 98% 56%), hsl(46 100% 58%), hsl(150 75% 45%), hsl(200 90% 52%), hsl(260 80% 60%), hsl(320 90% 58%), hsl(350 95% 58%));
  --tex: url(../tex/silk.webp); --tex-op: .7;
}
.cf--ground {
  --paint:
    radial-gradient(55% 45% at 20% 30%, hsl(calc(var(--hue) + 40) 100% 64%) 0%, transparent 70%),
    radial-gradient(50% 55% at 80% 65%, hsl(calc(var(--hue) + 190) 92% 52%) 0%, transparent 72%),
    radial-gradient(60% 50% at 50% 100%, hsl(calc(var(--hue) + 260) 85% 40%) 0%, transparent 75%),
    linear-gradient(115deg, hsl(var(--hue) 96% 52%), hsl(calc(var(--hue) + 110) 80% 34%));
  --tex: url(../tex/cloth.webp); --tex-op: .95;
}
.cf--deep {
  --paint:
    radial-gradient(50% 45% at 70% 25%, hsl(calc(var(--hue) + 170) 85% 58%) 0%, transparent 70%),
    radial-gradient(60% 50% at 25% 70%, hsl(calc(var(--hue) + 230) 85% 50%) 0%, transparent 72%),
    linear-gradient(200deg, hsl(calc(var(--hue) + 190) 70% 40%), hsl(calc(var(--hue) + 240) 60% 20%));
  --tex: url(../tex/smoke.webp); --tex-op: .8;
}
.cf--poster {
  --paint: radial-gradient(60% 45% at 50% 30%, hsl(var(--hue) 95% 62%) 0%, transparent 70%), linear-gradient(180deg, hsl(calc(var(--hue) + 30) 60% 70%), hsl(calc(var(--hue) + 200) 40% 25%));
  --tex: url(../tex/cloth.webp); --tex-op: 1;
}
.cf--enrol {
  --paint: radial-gradient(70% 80% at 25% 20%, hsl(calc(var(--hue) + 30) 100% 66%), hsl(var(--hue) 94% 54%) 55%, hsl(calc(var(--hue) - 30) 85% 30%));
  --tex: url(../tex/light.webp); --tex-op: .9;
}
.cf--p0 { --paint: linear-gradient(160deg, hsl(46 100% 60%), hsl(28 100% 50%)); --tex: url(../tex/stone.webp); }
.cf--p1 { --paint: linear-gradient(160deg, hsl(345 95% 62%), hsl(330 85% 36%)); --tex: url(../tex/light.webp); }
.cf--p2 { --paint: linear-gradient(160deg, hsl(160 70% 52%), hsl(185 80% 28%)); --tex: url(../tex/smoke.webp); }
.cf--p4 { --paint: linear-gradient(160deg, hsl(40 10% 80%), hsl(40 6% 46%)); --tex: url(../tex/cloth.webp); }
.cf--p5 { --paint: linear-gradient(160deg, hsl(220 95% 64%), hsl(245 80% 36%)); --tex: url(../tex/silk.webp); }
.cf--p6 { --paint: linear-gradient(160deg, hsl(95 70% 58%), hsl(130 60% 26%)); --tex: url(../tex/stone.webp); }
/* any chip that carries --h gets its own colour */
.wk .cf, .hang .cf {
  --paint:
    radial-gradient(80% 70% at 30% 25%, hsl(calc(var(--h) + 14) 100% calc(var(--l, 50) * 1% + 14%)), transparent 70%),
    linear-gradient(160deg, hsl(var(--h) 92% calc(var(--l, 50) * 1%)), hsl(calc(var(--h) - 16) 85% calc(var(--l, 50) * 1% - 22%)));
  --tex: url(../tex/silk.webp); --tex-op: .6;
}

/* ============================================================
   TOP — dark
   ============================================================ */
.top { position: relative; z-index: 1; height: calc(2150 * var(--s)); }
.top > * { position: absolute; }

/* the course as a paint chip */
.hero {
  left: calc(24 * var(--s)); top: calc(84 * var(--s));
  width: calc(340 * var(--s)); height: calc(470 * var(--s));
  border-radius: var(--r); overflow: hidden; background: var(--card); color: var(--ink);
}
.hero__swatch { left: 0; top: 0; width: 100%; height: calc(330 * var(--s)); }
.hero__label { position: absolute; left: 0; right: 0; top: calc(330 * var(--s)); bottom: 0; padding: calc(16 * var(--s)) calc(40 * var(--s)) calc(14 * var(--s)) calc(18 * var(--s)); display: flex; flex-direction: column; }
.hero__name {
  font-size: calc(28 * var(--t)); font-weight: 760; font-variation-settings: "wdth" 62; letter-spacing: .01em; line-height: 1;
}
.hero__code { margin-top: calc(6 * var(--s)); font-size: calc(11 * var(--t)); color: var(--mut); }
.hero__what { margin-top: auto; font-size: calc(14 * var(--t)); line-height: 1.15; }
.hero__hole { position: absolute; right: calc(18 * var(--s)); top: calc(18 * var(--s)); width: calc(14 * var(--s)); height: calc(14 * var(--s)); border-radius: 50%; background: var(--night); }

.clock { left: calc(388 * var(--s)); top: calc(84 * var(--s)); width: calc(120 * var(--s)); }
.face { display: block; width: calc(120 * var(--s)); height: calc(120 * var(--s)); }
.face__disc { fill: var(--card); }
.face__ticks path { stroke: #b9b7b1; stroke-width: 1px; }
.face__ball { fill: var(--ink); }
.face__ball[data-role="second"] { fill: var(--live); }
.clock__cap { margin-top: calc(10 * var(--s)); font-size: calc(11 * var(--t)); line-height: 1.3; color: #fff; }
.clock__cap span { color: var(--mut); }

.intro { left: calc(532 * var(--s)); top: calc(84 * var(--s)); width: calc(704 * var(--s)); }
.intro__lead {
  font-size: calc(44 * var(--t)); line-height: 1; letter-spacing: -.025em;
  font-variation-settings: "wdth" 88; color: #fff;
}
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--s)); margin-top: calc(40 * var(--s)); }
.fact {
  position: relative; min-height: calc(118 * var(--s)); padding: calc(14 * var(--s)) calc(14 * var(--s)) calc(16 * var(--s));
  border-radius: var(--r); background: var(--card); color: var(--ink);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.fact:hover { transform: translateY(calc(-6 * var(--s))); }
.fact i { position: absolute; right: calc(14 * var(--s)); top: calc(14 * var(--s)); width: calc(12 * var(--s)); height: calc(12 * var(--s)); border-radius: 50%; background: hsl(var(--h) 92% 55%); }
.fact > em { display: block; padding-right: calc(20 * var(--s)); font-style: normal; font-size: calc(11 * var(--t)); color: var(--mut); }
.fact > b { display: block; margin-top: calc(18 * var(--s)); line-height: 1.1; font-size: calc(18 * var(--t)); font-weight: 600; letter-spacing: -.01em; }
.fact > span { display: block; margin-top: calc(6 * var(--s)); font-size: calc(11 * var(--t)); line-height: 1.25; color: var(--mut); }
.cta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: calc(8 * var(--s)); min-height: calc(56 * var(--s)); padding: calc(10 * var(--s)) calc(22 * var(--s)); gap: calc(16 * var(--s));
  border-radius: calc(28 * var(--s)); background: var(--live); color: var(--ink);
  font-size: calc(15 * var(--t)); font-weight: 500;
  transition: background .3s, letter-spacing .45s cubic-bezier(.22, 1, .36, 1);
}
.cta:hover { background: #fff; letter-spacing: .02em; }
.cta b { font-weight: 600; }

.hue-tag {
  left: calc(1236 * var(--s)); top: calc(84 * var(--s)); width: calc(180 * var(--s)); height: calc(130 * var(--s));
  border-radius: var(--r); background: var(--card); color: var(--ink); overflow: hidden; isolation: isolate;
}
.hue-tag__cut { position: absolute; overflow: hidden; left: calc(var(--x) * var(--s)); top: calc(var(--y) * var(--s)); width: calc(var(--w) * var(--s)); height: calc(var(--h) * var(--s)); }
.hue-tag__cut::after {
  content: ""; position: absolute; left: calc(var(--ix) * var(--s)); top: calc(var(--iy) * var(--s));
  width: calc(210 * var(--s)); height: calc(260 * var(--s));
  background: url(../tex/silk.webp) center / cover, linear-gradient(160deg, hsl(calc(var(--hue) + 20) 100% 60%), hsl(calc(var(--hue) + 250) 80% 40%));
  background-blend-mode: overlay; mix-blend-mode: hard-light;
}
.hue-tag p { position: absolute; margin: 0; white-space: nowrap; }
.hue-tag__kick { left: calc(12 * var(--s)); top: calc(10 * var(--s)); font-size: calc(11 * var(--t)); }
.hue-tag__word { left: 50%; top: calc(44 * var(--s)); transform: translateX(-50%); font-size: calc(64 * var(--t)); line-height: .9; font-weight: 760; font-variation-settings: "wdth" 62; }

/* the six weeks on a stair */
.weeks { left: calc(24 * var(--s)); top: calc(780 * var(--s)); width: calc(1392 * var(--s)); min-height: calc(330 * var(--s)); display: flex; align-items: stretch; gap: calc(12 * var(--s)); }
.wk {
  position: relative; flex: 1; min-height: 100%; border-radius: var(--r); overflow: hidden;
  background: var(--card); color: var(--ink); will-change: transform;
  display: flex; flex-direction: column; padding: calc(218 * var(--s)) calc(14 * var(--s)) calc(16 * var(--s));
}
.wk__sw { left: calc(8 * var(--s)); top: calc(8 * var(--s)); right: calc(8 * var(--s)); height: calc(206 * var(--s)); border-radius: calc(8 * var(--s)); }
.wk p { position: relative; }
.wk__no { font-size: calc(11 * var(--t)); color: var(--mut); }
.wk__name { margin-top: calc(6 * var(--s)); font-size: calc(24 * var(--t)); letter-spacing: -.02em; line-height: 1.05; overflow-wrap: anywhere; }
.wk__line { margin-top: calc(10 * var(--s)); font-size: calc(12 * var(--t)); line-height: 1.25; color: #5d5c58; }

.ground { left: 0; top: calc(1150 * var(--s)); width: 100%; height: calc(1000 * var(--s)); background: #555; }

.ticker { left: 0; top: calc(1180 * var(--s)); width: 100%; overflow: hidden; }
.ticker__in {
  display: flex; align-items: center; gap: calc(40 * var(--s)); width: max-content; white-space: nowrap;
  font-size: calc(170 * var(--t)); line-height: .9; font-weight: 700; font-variation-settings: "wdth" 62;
  text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px #fff; will-change: transform;
}
.ticker__in i { display: block; width: calc(40 * var(--s)); height: calc(40 * var(--s)); border-radius: 50%; background: #fff; }

/* ---------- the wheel ---------- */
.wheel-sec { left: 0; top: calc(1440 * var(--s)); width: 100%; height: calc(600 * var(--s)); }
.wheel {
  --box: 600; --ring-in: 236;
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: calc(600 * var(--s)); height: calc(600 * var(--s)); color: var(--ink);
}
.wheel__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 90deg, hsl(350 94% 58%), hsl(20 94% 58%), hsl(50 94% 58%), hsl(80 94% 50%), hsl(110 80% 48%), hsl(140 80% 46%), hsl(170 85% 46%), hsl(200 94% 54%), hsl(230 94% 62%), hsl(260 85% 64%), hsl(290 80% 60%), hsl(320 90% 60%), hsl(350 94% 58%));
  -webkit-mask-image: radial-gradient(circle closest-side, #0000 calc(78.4%), #000 calc(78.8%));
  mask-image: radial-gradient(circle closest-side, #0000 calc(78.4%), #000 calc(78.8%));
}
.wheel__face { position: absolute; left: calc(64 * var(--s)); top: calc(64 * var(--s)); width: calc(472 * var(--s)); height: calc(472 * var(--s)); border-radius: 50%; background: var(--card); }
.wheel__mark {
  --a: calc(var(--i) * 30deg);
  position: absolute; margin: 0;
  left: calc((300 + 204 * cos(var(--a))) * var(--s)); top: calc((300 + 204 * sin(var(--a))) * var(--s));
  font-size: calc(12 * var(--t)); line-height: 1; white-space: nowrap; color: #b0aea8;
  transform: translate(-50%, -50%) rotate(calc(var(--a) + 90deg)); transition: color .2s;
}
.wheel__mark.is-active { color: var(--ink); font-weight: 600; }
.wheel__hand { position: absolute; left: calc(300 * var(--s)); top: calc(300 * var(--s)); width: calc(268 * var(--s)); height: 0; transform-origin: 0 0; }
.wheel__rule { position: absolute; left: calc(40 * var(--s)); top: -0.5px; width: calc(210 * var(--s)); height: 1px; background: var(--ink); }
.wheel__knob {
  position: absolute; right: calc(-17 * var(--s)); top: calc(-17 * var(--s));
  width: calc(34 * var(--s)); height: calc(34 * var(--s)); border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 calc(4 * var(--s)) #fff, 0 calc(4 * var(--s)) calc(14 * var(--s)) #0005;
}
.wheel__read {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; width: calc(260 * var(--s)); pointer-events: none;
}
.wheel__read em { display: block; font-style: normal; font-size: calc(11 * var(--t)); color: var(--mut); }
.wheel__read b {
  display: block; margin: calc(6 * var(--s)) 0; font-size: calc(110 * var(--t)); line-height: .8; font-weight: 700;
  font-variation-settings: "wdth" 62; color: var(--live); font-variant-numeric: tabular-nums;
}
.wheel__read span { display: block; font-size: calc(12 * var(--t)); line-height: 1.25; }
.wheel__burst { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 10; pointer-events: none; }
.wheel__ball { position: absolute; border-radius: 50%; will-change: transform; }
.wheel__ball--hue { background: var(--live); }
.wheel__ball--ink { background: var(--night); }
.wheel__ball--paper { background: var(--paper); }

.burst-run { position: relative; height: 100vh; }

/* ============================================================
   SEVEN — paper
   ============================================================ */
.seven { position: relative; z-index: 3; height: calc(1440 * var(--s)); color: var(--ink); }
.seven > * { position: absolute; }

.curric {
  left: calc(24 * var(--s)); top: 0; width: calc(330 * var(--s)); min-height: calc(740 * var(--s));
  border-radius: var(--r); overflow: hidden; background: var(--ink); color: #fff;
  display: flex; flex-direction: column; padding-top: calc(20 * var(--s));
}
.curric > .k { padding: 0 calc(20 * var(--s)); }
.curric__title { padding: calc(8 * var(--s)) calc(20 * var(--s)) calc(24 * var(--s)); font-size: calc(32 * var(--t)); line-height: 1.02; letter-spacing: -.025em; }
.curric__rows { margin-top: auto; }
.curric__rows li {
  position: relative; min-height: calc(90 * var(--s)); padding: calc(14 * var(--s)) calc(20 * var(--s));
  background: url(../tex/silk.webp) center / cover, linear-gradient(100deg, hsl(var(--h) 88% calc(var(--l, 46) * 1%)), hsl(calc(var(--h) + 18) 80% calc(var(--l, 46) * 1% - 12%)));
  background-blend-mode: soft-light;
  display: grid; grid-template-columns: calc(40 * var(--s)) 1fr; grid-template-rows: auto 1fr; column-gap: calc(8 * var(--s));
  transform-origin: left; will-change: transform;
}
.curric__rows b { font-weight: 400; font-size: calc(11 * var(--t)); opacity: .8; }
.curric__rows span { font-size: calc(22 * var(--t)); line-height: 1.05; letter-spacing: -.02em; }
.curric__rows em { grid-column: 2; align-self: end; margin-top: calc(6 * var(--s)); font-style: normal; font-size: calc(12 * var(--t)); line-height: 1.25; opacity: .85; }

.shape {
  top: 0; width: calc(330 * var(--s)); height: calc(330 * var(--s));
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 0 calc(56 * var(--s)); will-change: border-radius;
}
.shape--live { left: calc(378 * var(--s)); background: var(--card); }
.shape--rec { left: calc(732 * var(--s)); background: var(--live); border-radius: 50%; }
.shape .k { color: #0009; }
.shape__title { margin: calc(8 * var(--s)) 0 calc(12 * var(--s)); font-size: calc(46 * var(--t)); line-height: .9; letter-spacing: -.03em; }
.shape__body { font-size: calc(12.5 * var(--t)); line-height: 1.3; }

.sclock {
  left: calc(1086 * var(--s)); top: 0; width: calc(330 * var(--s)); height: calc(330 * var(--s));
  border-radius: 50%; background: var(--ink); color: #fff;
}
.sclock__inner { position: absolute; left: calc(45 * var(--s)); top: calc(45 * var(--s)); width: calc(240 * var(--s)); height: calc(240 * var(--s)); border-radius: 50%; box-shadow: inset 0 0 0 1px #ffffff26; }
.sclock__dot {
  position: absolute; left: calc(165 * var(--s)); top: calc(165 * var(--s));
  width: calc(var(--d) * var(--s)); height: calc(var(--d) * var(--s)); margin: calc(var(--d) / -2 * var(--s)) 0 0 calc(var(--d) / -2 * var(--s));
  border-radius: 50%; background: #fff;
}
.sclock__dot[data-role="second"] { background: var(--live); }
.sclock__dot[data-role="minute"] { background: #9d9b96; }
.sclock__h {
  --a: calc((var(--i) - 3) * 30deg);
  position: absolute; left: calc((165 + 146 * cos(var(--a))) * var(--s)); top: calc((165 + 146 * sin(var(--a))) * var(--s));
  transform: translate(-50%, -50%); font-size: calc(12 * var(--t)); color: #ffffff99;
}
.sclock__cap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font-size: calc(15 * var(--t)); line-height: 1.1; }
.sclock__cap em { display: block; font-style: normal; font-size: calc(11 * var(--t)); color: #ffffff80; margin-bottom: calc(6 * var(--s)); }

.record { left: calc(378 * var(--s)); top: calc(354 * var(--s)); width: calc(500 * var(--s)); height: calc(500 * var(--s)); }
.record__spin { position: absolute; inset: 0; will-change: transform; }
.record__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, var(--ink) 0 22%, transparent 22.3%),
    repeating-radial-gradient(circle, #0000 0 calc(3 * var(--s)), #00000014 calc(3 * var(--s)) calc(4 * var(--s))),
    conic-gradient(from 0deg, hsl(350 94% 58%), hsl(50 94% 58%), hsl(110 80% 48%), hsl(170 85% 46%), hsl(230 94% 62%), hsl(290 80% 60%), hsl(350 94% 58%));
  box-shadow: 0 calc(20 * var(--s)) calc(60 * var(--s)) #0000002e;
}
.record__type { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.record__type text { fill: var(--ink); font-size: 26px; font-weight: 600; letter-spacing: 2px; font-variation-settings: "wdth" 75; }
.record__type .record__small { font-size: 13px; font-weight: 400; letter-spacing: 1px; fill: #111111cc; }
.record__glass { left: calc(160 * var(--s)); top: calc(160 * var(--s)); width: calc(180 * var(--s)); height: calc(180 * var(--s)); }
.record__cap { position: absolute; left: calc(-354 * var(--s)); top: calc(410 * var(--s)); width: calc(330 * var(--s)); font-size: calc(15 * var(--t)); }
.record__cap em { display: block; font-style: normal; font-size: calc(11 * var(--t)); color: var(--mut); }
.glass {
  position: absolute; border-radius: 50%;
  -webkit-backdrop-filter: blur(calc(12 * var(--s))); backdrop-filter: blur(calc(12 * var(--s)));
  background: #ffffff2e; box-shadow: 0 0 calc(4 * var(--s)) #00000040;
  -webkit-mask-image: radial-gradient(circle closest-side, #0000 16.1%, #000 16.5%);
  mask-image: radial-gradient(circle closest-side, #0000 16.1%, #000 16.5%);
}

.faculty { left: calc(902 * var(--s)); top: calc(354 * var(--s)); width: calc(514 * var(--s)); height: calc(520 * var(--s)); }
.faculty__rail { position: absolute; left: calc(-20 * var(--s)); right: calc(-20 * var(--s)); top: calc(20 * var(--s)); height: calc(3 * var(--s)); border-radius: 2px; background: var(--ink); }
.hang {
  position: absolute; top: calc(8 * var(--s)); width: calc(158 * var(--s)); min-height: calc(380 * var(--s));
  display: flex; flex-direction: column; padding: calc(232 * var(--s)) calc(12 * var(--s)) calc(16 * var(--s));
  border-radius: var(--r); background: var(--card); box-shadow: 0 calc(10 * var(--s)) calc(30 * var(--s)) #0000001f;
  transform-origin: calc(79 * var(--s)) calc(14 * var(--s)); will-change: transform;
}
.hang:nth-of-type(1) { left: 0; }
.hang:nth-of-type(2) { left: calc(178 * var(--s)); }
.hang:nth-of-type(3) { left: calc(356 * var(--s)); }
.hang__hole { position: absolute; left: calc(71 * var(--s)); top: calc(6 * var(--s)); width: calc(16 * var(--s)); height: calc(16 * var(--s)); border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 calc(3 * var(--s)) var(--ink); }
.hang__sw { left: calc(8 * var(--s)); right: calc(8 * var(--s)); top: calc(32 * var(--s)); height: calc(190 * var(--s)); border-radius: calc(8 * var(--s)); }
.hang > p, .hang > h3 { position: relative; }
.hang__no { font-size: calc(11 * var(--t)); color: var(--mut); }
.hang h3 { margin-top: calc(4 * var(--s)); font-size: calc(26 * var(--t)); letter-spacing: -.02em; line-height: 1.05; }
.hang > p:last-child { margin-top: calc(10 * var(--s)); font-size: calc(12 * var(--t)); line-height: 1.3; color: #5d5c58; }
.faculty__cap { position: absolute; left: 0; top: calc(430 * var(--s)); width: calc(514 * var(--s)); padding: calc(14 * var(--s)) calc(16 * var(--s)); border-radius: var(--r); background: var(--card); font-size: calc(15 * var(--t)); line-height: 1.25; letter-spacing: -.01em; }
.faculty__cap em, .fan__cap em, .win__k, .outs__k, .gauge__cap em, .prism__k { display: block; font-style: normal; font-size: calc(11 * var(--t)); color: var(--mut); letter-spacing: .02em; }

.prism {
  left: calc(24 * var(--s)); top: calc(900 * var(--s)); width: calc(1392 * var(--s)); height: calc(520 * var(--s));
  border-radius: var(--r); overflow: hidden; background: var(--night); color: #fff;
}
.prism__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.prism__glass { fill: #ffffff14; stroke: #ffffffcc; stroke-width: 1.5; }
.prism__rays path { mix-blend-mode: screen; }
.prism p { position: absolute; margin: 0; }
.prism__k { left: calc(32 * var(--s)); top: calc(28 * var(--s)); }
.prism__word {
  left: calc(28 * var(--s)); bottom: calc(18 * var(--s));
  font-size: calc(150 * var(--t)); line-height: .82; font-weight: 700; font-variation-settings: "wdth" 62; text-transform: uppercase;
}
.prism__say { left: calc(32 * var(--s)); top: calc(52 * var(--s)); width: calc(380 * var(--s)); font-size: calc(17 * var(--t)); line-height: 1.25; letter-spacing: -.01em; }
.prism__warm, .prism__cool { right: calc(28 * var(--s)); font-size: calc(12 * var(--t)); color: #ffffffb0; }
.prism__warm { top: calc(28 * var(--s)); }
.prism__cool { bottom: calc(28 * var(--s)); }

.seven__ground { position: absolute; left: 0; top: 0; z-index: 2; overflow: hidden; will-change: transform; border-radius: 0; }
.seven__ground > .cf { width: 100%; bottom: auto; will-change: transform; }

/* ============================================================
   MID — paper
   ============================================================ */
.mid { position: relative; z-index: 1; padding-top: 40vh; color: var(--ink); }

.deck {
  position: relative; margin: 0 auto; width: calc(336 * var(--s)); min-height: calc(480 * var(--s));
  border-radius: var(--r); background: var(--ink); color: #fff; --grey: 0;
  display: flex; flex-direction: column; padding: calc(22 * var(--s)) calc(20 * var(--s)) calc(22 * var(--s)) calc(136 * var(--s));
}
.deck__reel { position: absolute; left: calc(20 * var(--s)); top: 0; width: calc(96 * var(--s)); height: 100%; overflow: hidden; }
.deck__pic { position: absolute; left: 0; top: 0; width: 100%; height: calc(116 * var(--s)); border-radius: calc(8 * var(--s)); overflow: hidden; will-change: transform; }
.deck__slot { visibility: hidden; }
.deck__slot > .cf { inset: 0; }
.deck > .k { color: #ffffff80; }
.deck__title { margin-top: calc(6 * var(--s)); font-size: calc(34 * var(--t)); line-height: .98; letter-spacing: -.03em; }
.deck__list { margin-top: calc(36 * var(--s)); font-size: calc(12 * var(--t)); line-height: 1.25; }
.deck__list dt { padding-top: calc(10 * var(--s)); border-top: 1px solid #ffffff26; font-weight: 600; }
.deck__list dd { padding-bottom: calc(10 * var(--s)); color: color-mix(in srgb, #ffffff66 calc(var(--grey) * 100%), #fff); }
.deck__foot { margin-top: auto; padding-top: calc(16 * var(--s)); font-size: calc(11 * var(--t)); line-height: 1.3; color: #ffffff80; }

/* the fan guide */
.fan { position: relative; margin-top: calc(40 * var(--s)); height: calc(760 * var(--s)); }
.fan__pivot { position: absolute; left: 50%; top: calc(700 * var(--s)); width: 0; height: 0; }
.fan__strip {
  position: absolute; left: calc(-60 * var(--s)); bottom: calc(-30 * var(--s));
  width: calc(120 * var(--s)); height: calc(600 * var(--s));
  border-radius: calc(12 * var(--s)); overflow: hidden; background: var(--card);
  box-shadow: 0 calc(8 * var(--s)) calc(24 * var(--s)) #0000001c;
  transform-origin: 50% calc(100% - 30 * var(--s));
  transform: rotate(calc((var(--base) + (var(--carry, 0) + var(--v)) * var(--open, 0)) * 13deg));
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto repeat(5, 1fr); padding: calc(8 * var(--s)); gap: calc(3 * var(--s)); will-change: transform;
  -webkit-mask-image: radial-gradient(circle calc(9 * var(--s)) at 50% calc(100% - 30 * var(--s)), #0000 92%, #000 100%);
  mask-image: radial-gradient(circle calc(9 * var(--s)) at 50% calc(100% - 30 * var(--s)), #0000 92%, #000 100%);
}
.fan__strip b { display: block; padding: calc(4 * var(--s)) calc(4 * var(--s)) calc(4 * var(--s)); font-size: calc(46 * var(--t)); line-height: .86; font-weight: 760; font-variation-settings: "wdth" 62; color: var(--ink); }
.fan__strip i { flex: 1; border-radius: calc(5 * var(--s)); }
.fan__strip i:nth-of-type(1) { background: hsl(var(--h) 85% 84%); }
.fan__strip i:nth-of-type(2) { background: hsl(var(--h) 90% 72%); }
.fan__strip i:nth-of-type(3) { background: hsl(var(--h) 92% 58%); }
.fan__strip i:nth-of-type(4) { background: hsl(var(--h) 88% 44%); }
.fan__strip i:nth-of-type(5) { background: hsl(var(--h) 80% 30%); }
.fan__strip i { grid-column: 1 / -1; }
.fan__strip em { align-self: start; display: block; padding: calc(8 * var(--s)) calc(4 * var(--s)) 0; font-style: normal; font-size: calc(11 * var(--t)); color: var(--mut); }
.fan__rivet { position: absolute; left: calc(-16 * var(--s)); top: calc(-16 * var(--s)); width: calc(32 * var(--s)); height: calc(32 * var(--s)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b8b6b0 45%, #6e6c67); box-shadow: 0 calc(3 * var(--s)) calc(8 * var(--s)) #0005; z-index: 2; }
.fan__cap { position: absolute; left: calc(24 * var(--s)); top: calc(40 * var(--s)); width: calc(300 * var(--s)); font-size: calc(16 * var(--t)); line-height: 1.25; letter-spacing: -.01em; }

/* the windows */
.win {
  --lift: 488.2; --mid-x: 720; --mid-y: 836.7; --disc: 697;
  --plate-x: 198; --plate-y: 614.2; --plate-w: 1045; --plate-h: 448;
  --shot-w: 294; --shot-h: 368.5; --shot-y: 654; --inset: 40;
  --win-x: 612; --win-w: 216; --win-h: 73; --win-top: 654.2; --win-foot: 949.2;
  position: relative; margin-top: calc(6 * var(--s)); width: 100%; height: calc(697 * var(--s)); overflow: hidden;
}
.win > * { position: absolute; }
.win__disc { left: calc(var(--mid-x) * var(--s)); top: calc((var(--mid-y) - var(--lift)) * var(--s)); width: 0; height: 0; transform: rotate(var(--turn, 0deg)); }
.win__face {
  position: absolute; left: calc(var(--disc) / -2 * var(--s)); top: calc(var(--disc) / -2 * var(--s));
  width: calc(var(--disc) * var(--s)); height: calc(var(--disc) * var(--s)); border-radius: 50%;
  background: radial-gradient(circle, var(--ink) 0 12%, transparent 12.2%), conic-gradient(from 0deg, hsl(350 94% 58%), hsl(20 94% 58%), hsl(50 94% 58%), hsl(80 94% 50%), hsl(110 80% 48%), hsl(140 80% 46%), hsl(170 85% 46%), hsl(200 94% 54%), hsl(230 94% 62%), hsl(260 85% 64%), hsl(290 80% 60%), hsl(320 90% 60%), hsl(350 94% 58%));
  box-shadow: 0 0 0 calc(4 * var(--s)) var(--ink);
}
.win__plate { background: var(--ink); }
.win__plate--west { left: calc(var(--plate-x) * var(--s)); top: calc((var(--plate-y) - var(--lift)) * var(--s)); width: calc((var(--win-x) - var(--plate-x)) * var(--s)); height: calc(var(--plate-h) * var(--s)); border-radius: var(--r) 0 0 var(--r); }
.win__plate--east { left: calc((var(--win-x) + var(--win-w)) * var(--s)); top: calc((var(--plate-y) - var(--lift)) * var(--s)); width: calc((var(--plate-x) + var(--plate-w) - var(--win-x) - var(--win-w)) * var(--s)); height: calc(var(--plate-h) * var(--s)); border-radius: 0 var(--r) var(--r) 0; }
.win__plate--head, .win__plate--waist, .win__plate--foot { left: calc(var(--win-x) * var(--s) - 1px); width: calc(var(--win-w) * var(--s) + 2px); }
.win__plate--head { top: calc((var(--plate-y) - var(--lift)) * var(--s)); height: calc((var(--win-top) - var(--plate-y)) * var(--s)); }
.win__plate--waist { top: calc((var(--win-top) + var(--win-h) - var(--lift)) * var(--s)); height: calc((var(--win-foot) - var(--win-top) - var(--win-h)) * var(--s)); }
.win__plate--foot { top: calc((var(--win-foot) + var(--win-h) - var(--lift)) * var(--s)); height: calc((var(--plate-y) + var(--plate-h) - var(--win-foot) - var(--win-h)) * var(--s)); }
.win__shot { top: calc((var(--shot-y) - var(--lift)) * var(--s)); width: calc(var(--shot-w) * var(--s)); height: calc(var(--shot-h) * var(--s)); overflow: hidden; border-radius: calc(8 * var(--s)); }
.win__shot--left { left: calc((var(--plate-x) + var(--inset)) * var(--s)); }
.win__shot--right { left: calc((var(--plate-x) + var(--plate-w) - var(--inset) - var(--shot-w)) * var(--s)); }
.win__shot .cf { --paint: radial-gradient(80% 70% at 30% 25%, hsl(calc(var(--c) + 18) 100% 68%), hsl(var(--c) 92% 52%) 55%, hsl(calc(var(--c) - 14) 85% 26%)); --tex: url(../tex/cloth.webp); --tex-op: .8; }
.win__shot p { position: absolute; left: calc(16 * var(--s)); bottom: calc(14 * var(--s)); color: #fff; }
.win__shot em { display: block; font-style: normal; font-size: calc(11 * var(--t)); opacity: .75; }
.win__shot b { display: block; font-size: calc(34 * var(--t)); line-height: 1; font-weight: 500; letter-spacing: -.02em; }
.win__shot span { display: block; font-size: calc(12 * var(--t)); margin-top: calc(4 * var(--s)); font-variant-numeric: tabular-nums; }
.win__k, .win__name, .win__say { color: #fff; margin: 0; }
.win__k { left: calc(636 * var(--s)); top: calc(250 * var(--s)); color: #ffffff80; }
.win__name { left: calc(636 * var(--s)); top: calc(266 * var(--s)); font-size: calc(19 * var(--t)); letter-spacing: -.01em; }
.win__say { left: calc(636 * var(--s)); top: calc(300 * var(--s)); font-size: calc(12 * var(--t)); line-height: 1.25; color: #ffffffa0; }

/* what you leave with */
.outs { position: relative; margin-top: calc(40 * var(--s)); height: calc(620 * var(--s)); }
.outs > * { position: absolute; }
.out {
  width: calc(336 * var(--s)); min-height: calc(280 * var(--s)); padding: calc(20 * var(--s)) calc(20 * var(--s)) calc(24 * var(--s));
  border-radius: var(--r); background: var(--card); overflow: hidden;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.out::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(10 * var(--s)); background: hsl(var(--h) 92% 55%); transition: height .45s cubic-bezier(.22, 1, .36, 1); }
.out:hover::before { height: calc(40 * var(--s)); }
.out:nth-of-type(1) { left: calc(24 * var(--s)); top: 0; }
.out:nth-of-type(2) { left: calc(376 * var(--s)); top: calc(40 * var(--s)); }
.out:nth-of-type(3) { left: calc(728 * var(--s)); top: calc(80 * var(--s)); }
.out:nth-of-type(4) { left: calc(1080 * var(--s)); top: calc(120 * var(--s)); }
.out__i { position: relative; margin-top: calc(16 * var(--s)); font-size: calc(60 * var(--t)); line-height: .8; font-weight: 700; font-variation-settings: "wdth" 62; }
.out h3 { position: relative; margin-top: calc(70 * var(--s)); font-size: calc(24 * var(--t)); line-height: 1; letter-spacing: -.02em; }
.out h3 + p { position: relative; margin-top: calc(10 * var(--s)); font-size: calc(12.5 * var(--t)); line-height: 1.3; color: #5d5c58; }
.outs__k { left: calc(24 * var(--s)); top: calc(310 * var(--s)); }
.outs__seed {
  left: calc(702 * var(--s)); top: calc(520 * var(--s)); width: calc(36 * var(--s)); height: calc(31 * var(--s));
  background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); visibility: hidden;
}

/* ============================================================
   NIGHT
   ============================================================ */
.night { position: relative; z-index: 1; background: var(--night); padding-top: calc(80 * var(--s)); }

.gauge {
  --axis: 1180; --band-in: 520; --band-out: 660; --word-r: 590;
  position: relative; height: calc(1300 * var(--s)); overflow: hidden; color: var(--ink);
}
.gauge__dial { position: absolute; left: 50%; top: calc(var(--axis) * var(--s)); width: 0; height: 0; will-change: transform; }
.gauge__rim {
  position: absolute; left: calc(var(--band-out) * -1 * var(--s)); top: calc(var(--band-out) * -1 * var(--s));
  width: calc(var(--band-out) * 2 * var(--s)); height: calc(var(--band-out) * 2 * var(--s)); border-radius: 50%;
  background: var(--card);
  -webkit-mask-image: radial-gradient(circle closest-side, #0000 calc(var(--band-in) / var(--band-out) * 100% - .2%), #000 calc(var(--band-in) / var(--band-out) * 100%));
  mask-image: radial-gradient(circle closest-side, #0000 calc(var(--band-in) / var(--band-out) * 100% - .2%), #000 calc(var(--band-in) / var(--band-out) * 100%));
}
.gauge__band {
  position: absolute; left: calc(-510 * var(--s)); top: calc(-510 * var(--s)); width: calc(1020 * var(--s)); height: calc(1020 * var(--s)); border-radius: 50%;
  background: conic-gradient(from 0deg, hsl(350 94% 58% / .9), hsl(50 94% 58% / .9), hsl(110 80% 48% / .9), hsl(170 85% 46% / .9), hsl(230 94% 62% / .9), hsl(290 80% 60% / .9), hsl(350 94% 58% / .9));
  -webkit-mask-image: radial-gradient(circle closest-side, #0000 98.4%, #000 98.8%);
  mask-image: radial-gradient(circle closest-side, #0000 98.4%, #000 98.8%);
  transform: rotate(var(--sweep, 0deg));
}
.gauge__words { position: absolute; left: 0; top: 0; transform: rotate(var(--sweep, 0deg)); }
.gauge__word {
  position: absolute; left: 0; top: 0; white-space: nowrap; transform-origin: 0 0;
  font-size: calc(42 * var(--t)); letter-spacing: -.03em; line-height: 1; color: #a9a7a1;
  --k: .26; --r: var(--word-r);
  transform: rotate(calc(var(--a) * 1deg)) translateY(calc(var(--r) * -1 * var(--s))) scale(var(--k)) translate(-50%, -50%);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), color .25s linear, opacity .3s;
}
.gauge__word.is-read { --k: 1; --r: calc(var(--word-r) + 12); color: var(--ink); }
.gauge__word.is-near { opacity: 0; }
.gauge__word.is-read::after {
  content: ""; display: inline-block; width: .32em; height: .32em; margin-left: .2em; vertical-align: .18em;
  border-radius: 50%; background: hsl(var(--wh, 0) 94% 55%);
}
.gauge__word.is-neutral.is-read::after { background: var(--ink); }
.gauge__glass { left: calc(-90 * var(--s)); top: calc(-90 * var(--s)); width: calc(180 * var(--s)); height: calc(180 * var(--s)); }
.gauge__needle { position: absolute; left: 50%; top: calc((var(--axis) - 700) * var(--s)); width: 1px; height: calc(170 * var(--s)); background: #fff; }
.gauge__no { position: absolute; left: calc(10 * var(--s)); top: 0; font-size: calc(11 * var(--t)); font-weight: 400; color: #fff; }
.gauge__cap { position: absolute; left: calc(24 * var(--s)); top: calc(40 * var(--s)); color: #fff; font-size: calc(16 * var(--t)); }

.pip { position: absolute; left: 50%; top: 0; width: 0; height: 0; z-index: 1; color: #fff; will-change: transform; }
.pip__shape {
  --field: calc(var(--size, 20) * 41 / 20 * var(--s));
  position: absolute; left: 0; top: 0; width: var(--field); height: var(--field);
  margin: calc(var(--field) / -2) 0 0 calc(var(--field) / -2);
}
.pip__pane { position: absolute; inset: 0; background: currentColor; will-change: clip-path; }

/* the poster */
.poster {
  --deep: 1500;
  position: relative; margin-top: calc(6 * var(--s)); height: calc(var(--deep) * var(--s));
  background: var(--night); color: #fff; transform-origin: 50% 50%; will-change: transform;
}
.poster.is-card { z-index: 2; border-radius: calc(18 * var(--s)); }
.poster > * { position: absolute; }
.poster__say {
  left: calc(24 * var(--s)); top: calc(20 * var(--s)); width: calc(1060 * var(--s));
  font-size: calc(132 * var(--t)); line-height: .88; font-weight: 700; font-variation-settings: "wdth" 62; text-transform: uppercase;
}
.poster__line { display: block; white-space: pre; }
.poster__glyph { display: inline-block; will-change: transform; transition: color .3s; }
.poster__card { right: calc(24 * var(--s)); top: calc(24 * var(--s)); width: calc(420 * var(--s)); padding: calc(28 * var(--s)) calc(30 * var(--s)) calc(30 * var(--s)); border-radius: var(--r); background: var(--card); color: var(--ink); }
.poster__card .k { font-size: calc(14 * var(--t)); }
.poster__name { font-size: calc(56 * var(--t)); line-height: .95; margin: calc(8 * var(--s)) 0 calc(24 * var(--s)); font-weight: 760; font-variation-settings: "wdth" 62; }
.poster__dl { display: grid; grid-template-columns: calc(110 * var(--s)) 1fr; font-size: calc(19 * var(--t)); line-height: 1.2; }
.poster__dl dt, .poster__dl dd { padding: calc(11 * var(--s)) 0; border-top: 1px solid var(--line); }
.poster__dl dd { font-weight: 500; }
.poster__dl dt { color: var(--mut); }
.poster__shot { left: calc(24 * var(--s)); top: calc(640 * var(--s)); width: calc(640 * var(--s)); height: calc(836 * var(--s)); border-radius: var(--r); }
.poster__tell { top: calc(640 * var(--s)); width: calc(330 * var(--s)); font-size: calc(30 * var(--t)); line-height: 1.02; letter-spacing: -.025em; }
.poster__tell .k { display: block; margin-bottom: calc(12 * var(--s)); font-size: calc(14 * var(--t)); }
.poster__tell--a { left: calc(700 * var(--s)); }
.poster__tell--b { left: calc(1062 * var(--s)); }
.poster__ring { left: calc(700 * var(--s)); top: calc(1110 * var(--s)); width: calc(340 * var(--s)); height: calc(340 * var(--s)); border-radius: 50%; box-shadow: inset 0 0 0 1px #ffffff80; }
.poster__hand { left: calc(870 * var(--s)); top: calc(1280 * var(--s)); width: calc(150 * var(--s)); height: 1px; background: #fff; transform-origin: 0 0; transform: rotate(var(--tick, 0deg)); }
.poster__seat {
  display: none; border-radius: 50%;
  left: calc((1250 - 170) * var(--s)); top: calc((1280 - 170) * var(--s)); width: calc(340 * var(--s)); height: calc(340 * var(--s));
  background: var(--seat, var(--live));
}
.poster.is-whole .poster__seat { display: block; }
.poster__edge { left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.poster__edge rect { fill: none; stroke: #fff; stroke-width: var(--edge-thin, 0); vector-effect: non-scaling-stroke; }

/* the field, ruled as a wheel */
.field {
  --dash: #5d5d5d; --dim: .25;
  position: relative; margin: calc(1100 * var(--s)) auto 0; width: calc(1392 * var(--s)); height: calc(143vh - 40 * var(--s));
  border: 1px dashed var(--dash); border-radius: var(--r); overflow: hidden; cursor: crosshair; z-index: 1;
}
.field__marks { position: absolute; inset: 0; pointer-events: none; }
.field__ring { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 140vh); height: calc(var(--r) * 140vh); border: 1px dashed var(--dash); border-radius: 50%; transform: translate(-50%, -50%); }
.field__rule { position: absolute; background: none; }
.field__rule--v { left: 50%; top: 0; bottom: 0; border-left: 1px dashed var(--dash); }
.field__rule--h { top: 50%; left: 0; right: 0; border-top: 1px dashed var(--dash); }
.field__says { position: absolute; inset: 0; pointer-events: none; transition: opacity .5s; }
.field.is-played .field__says { opacity: 0; }
.field p { position: absolute; margin: 0; white-space: nowrap; color: #fff; overflow: hidden; }
.field__mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.field.is-up .field__mask { overflow: visible; }
.field__word { display: inline-block; transform: translateY(110%); opacity: calc(1 - var(--phase, 0) * (1 - var(--dim))); }
.field.is-up .field__word { animation: flick 2.6s step-end infinite; animation-delay: calc(var(--phase, 0) * -1.3s); }
@keyframes flick { 0% { opacity: 1; } 50% { opacity: var(--dim); } }
.field__tick { left: 50%; margin-left: calc(10 * var(--s)); font-size: calc(12 * var(--t)); }
.field__tick--top { top: calc(8 * var(--s)); }
.field__tick--foot { bottom: calc(8 * var(--s)); }
.field__call { top: calc(50% - 44 * var(--s)); font-size: calc(48 * var(--t)); letter-spacing: -.03em; line-height: .9; font-variation-settings: "wdth" 88; }
.field__call--left { left: calc(16 * var(--s)); }
.field__call--right { left: 50%; margin-left: calc(12 * var(--s)); }

.chip-body { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; pointer-events: none; }
.chip-body__face { position: absolute; inset: 0; overflow: hidden; border-radius: calc(8 * var(--s)); background: var(--card); color: var(--ink); }
.chip-body--round .chip-body__face { border-radius: 50%; }
.chip-body__face b { position: absolute; left: 8%; bottom: 7%; font-weight: 600; font-size: calc(10 * var(--t)); line-height: 1.1; white-space: nowrap; }
.chip-body__face em { position: absolute; left: 8%; bottom: 20%; font-style: normal; font-size: calc(8 * var(--t)); color: var(--mut); }

/* enrol */
.enrol { position: relative; margin-top: calc(200 * var(--s)); height: calc(700 * var(--s)); }
.enrol__card {
  position: absolute; left: calc(24 * var(--s)); top: 0; width: calc(700 * var(--s)); min-height: calc(640 * var(--s));
  border-radius: var(--r); overflow: hidden; background: var(--card); color: var(--ink); padding: calc(320 * var(--s)) calc(24 * var(--s)) calc(24 * var(--s));
}
.enrol__sw { left: 0; top: 0; width: 100%; height: calc(300 * var(--s)); }
.enrol__price { position: absolute; left: calc(24 * var(--s)); bottom: calc(22 * var(--s)); color: #fff; }
.enrol__price b { display: block; font-size: calc(180 * var(--t)); line-height: .74; font-weight: 760; font-variation-settings: "wdth" 62; letter-spacing: -.01em; }
.enrol__price span { display: block; margin-top: calc(24 * var(--s)); font-size: calc(13 * var(--t)); }
.enrol__label { position: relative; }
.enrol__spec { display: grid; grid-template-columns: calc(90 * var(--s)) 1fr; margin-top: calc(10 * var(--s)); font-size: calc(13 * var(--t)); }
.enrol__spec dt, .enrol__spec dd { padding: calc(7 * var(--s)) 0; border-top: 1px solid var(--line); }
.enrol__spec dt { color: var(--mut); }
.enrol__spec b { font-weight: 600; }
.enrol__gauge { display: block; margin-top: calc(16 * var(--s)); height: calc(6 * var(--s)); border-radius: 3px; background: #11111118; overflow: hidden; }
.enrol__gauge i { display: block; height: 100%; width: 0; background: var(--live); }
.enrol__btn {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: calc(14 * var(--s)); min-height: calc(56 * var(--s)); padding: 0 calc(22 * var(--s)); border-radius: calc(28 * var(--s));
  background: var(--ink); color: #fff; font-size: calc(15 * var(--t)); transition: background .3s, color .3s;
}
.enrol__btn:hover { background: var(--live); color: var(--ink); }
.enrol__fine { margin-top: calc(10 * var(--s)); font-size: calc(10 * var(--t)); color: var(--mut); }
.faq { position: absolute; left: calc(760 * var(--s)); top: 0; width: calc(656 * var(--s)); }
.faq .k { margin-bottom: calc(14 * var(--s)); }
.faq details { border-top: 1px solid #ffffff26; }
.faq details:last-child { border-bottom: 1px solid #ffffff26; }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: calc(16 * var(--s)) calc(44 * var(--s)) calc(16 * var(--s)) 0; font-size: calc(26 * var(--t)); line-height: 1.05; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; width: calc(30 * var(--s)); height: calc(30 * var(--s)); margin-top: calc(-15 * var(--s));
  border-radius: 50%; background: var(--card); color: var(--ink); text-align: center; line-height: calc(30 * var(--s)); font-size: calc(18 * var(--t));
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), background .3s;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--live); }
.faq details p { padding: 0 calc(90 * var(--s)) calc(18 * var(--s)) 0; font-size: calc(13 * var(--t)); color: #bdbbb5; line-height: 1.45; }

/* footer */
.foot { position: relative; padding: calc(60 * var(--s)) calc(24 * var(--s)) calc(20 * var(--s)); }
.foot__line { display: flex; gap: calc(6 * var(--s)); align-items: center; }
.foot__line .chip--line { cursor: pointer; }
.foot__word { margin-top: calc(24 * var(--s)); color: #fff; }

/* ============================================================
   NOTES — paint chips with a tail
   ============================================================ */
.notes { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 7; pointer-events: none; }
.note {
  --pad: calc(4 * var(--s));
  position: absolute; margin: 0; width: calc(146 * var(--s)); min-height: calc(40 * var(--s));
  padding: calc(8 * var(--s)) calc(10 * var(--s)) calc(10 * var(--s)) calc(18 * var(--s));
  background: var(--note); color: var(--ink); opacity: 0; user-select: none;
  border-radius: calc(6 * var(--s)); box-shadow: 0 calc(6 * var(--s)) calc(20 * var(--s)) #0000003a;
  -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000);
  -webkit-mask-size: 0% 100%; mask-size: 0% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: opacity .18s, -webkit-mask-size 0s linear .18s, mask-size 0s linear .18s;
}
.note::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(8 * var(--s)); border-radius: calc(6 * var(--s)) 0 0 calc(6 * var(--s)); background: hsl(var(--nh) 92% 55%); }
.is-notes .note {
  opacity: 1; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  transition: opacity .18s, -webkit-mask-size .42s cubic-bezier(.22, 1, .36, 1), mask-size .42s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i) * 50ms);
}
.note__label { display: block; margin-bottom: calc(4 * var(--s)); font-size: calc(9 * var(--t)); color: var(--mut); }
.note__text { display: block; font-size: calc(10.5 * var(--t)); line-height: 1.2; }

/* ============================================================
   OVERLAYS
   ============================================================ */
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .16; mix-blend-mode: overlay; background-size: 180px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
.desat { position: fixed; inset: 0; z-index: 38; pointer-events: none; opacity: 0; -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1); transition: opacity .6s ease; }
.is-grey .desat { opacity: 1; }