a[data-link][hidden]{display:none!important}
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Marcellus-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/AlbertSans-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/AlbertSans-normal-600.woff2') format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/AlbertSans-normal-800.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/SpaceMono-normal-400.woff2') format('woff2'); }

:root {
  /* ground: a deep plum night taken from the tongue's rose, so the pink leads and the art's teal stays in the art */
  --night: #170c11;
  --deep: #26141c;
  --on: #f6f1ea;
  --onsoft: #cbc2b4;
  --paper: #f7f0e3;
  --paper2: #ede2cf;
  --ink: #2a1520;
  --inksoft: #5d3a49;
  --amber: #e9ad49;
  --amberd: #8f6114;
  --neon: #f2909f; /* the tongue's rose, the show's follow-spot */
  --rope: #c99a5b;
  --rope2: #8a6234;
  --face: color-mix(in oklab, var(--deep), var(--on) 5%);
  --fd: "Marcellus", Georgia, serif;
  --fb: "Albert Sans", system-ui, sans-serif;
  --fm: "Space Mono", ui-monospace, monospace;
  /* surface: a lamp-lit sheet, brighter at the centre and darker at the deckle edges (no lines, no grain) */
  --laid: radial-gradient(ellipse 80% 70% at 50% 42%, rgba(246, 241, 234, .05), transparent 62%, rgba(0, 0, 0, .22));
  --laid-ink: radial-gradient(ellipse 80% 70% at 50% 42%, rgba(255, 255, 255, .45), transparent 60%, rgba(143, 97, 20, .08));
  --ease: cubic-bezier(.2, .8, .2, 1);
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
html.rm { scroll-behavior: auto; }
body { margin: 0; font-family: var(--fb); color: var(--on); background: var(--night); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

.kicker { font-family: var(--fm); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--neon); }
.kicker--ink { color: var(--inksoft); }
h2 { font-family: var(--fd); font-weight: 400; font-size: clamp(40px, 5.4vw, 76px); line-height: 1; letter-spacing: .005em; margin: 18px 0 26px; }
h2 em, h1 em { font-style: italic; display: block; }

/* ---------- buttons ---------- */
.buy {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; background: var(--amber); color: var(--ink);
  font-family: var(--fm); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; border: 0; border-radius: 0; overflow: hidden; isolation: isolate;
  box-shadow: 0 10px 30px -12px rgba(233, 173, 73, .7);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.buy::before { content: ""; position: absolute; inset: 0; background: color-mix(in oklab, var(--amber), white 30%); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); z-index: -1; }
.buy::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 9px; height: 1px; background: var(--ink); transform: scaleX(.2); transition: transform .45s var(--ease); }
.buy:hover, .buy:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(233, 173, 73, .85); }
.buy:hover::before, .buy:focus-visible::before { transform: scaleX(1); }
.buy:hover::after, .buy:focus-visible::after { transform: scaleX(1); }
.buy--sm { min-height: 38px; padding: 0 14px; font-size: 11px; letter-spacing: .12em; }
.buy--sm::after { display: none; }
.buy--big { min-height: 76px; padding: 0 44px; font-size: 18px; }
.ghost { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--fm); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding: 0 2px; transition: color .3s, letter-spacing .4s var(--ease); background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.ghost:hover, .ghost:focus-visible { color: var(--neon); letter-spacing: .24em; }

/* ---------- header ---------- */
.top { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 16px; transition: background .4s, box-shadow .4s; }
html.is-scrolled .top { background: color-mix(in oklab, var(--night) 92%, transparent); box-shadow: 0 1px 0 rgba(242, 144, 159, .28); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--fm); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin-right: auto; min-height: 44px; }
.brand img { width: 32px; height: 32px; border: 1px solid var(--neon); padding: 2px; background: var(--night); }
#burger { order: 3; width: 44px; height: 44px; border: 1px solid rgba(246, 241, 234, .4); background: rgba(23, 12, 17, .6); display: grid; place-items: center; cursor: pointer; }
.burger__bars, .burger__bars::before, .burger__bars::after { display: block; width: 18px; height: 1px; background: var(--on); position: relative; transition: transform .3s; }
.burger__bars::before, .burger__bars::after { content: ""; position: absolute; left: 0; }
.burger__bars::before { top: -6px; } .burger__bars::after { top: 6px; }
#nav { position: absolute; top: 64px; right: 12px; left: 12px; display: none; flex-direction: column; padding: 18px; background: var(--night); border: 1px solid rgba(242, 144, 159, .4); background-image: var(--laid); max-height: calc(100svh - 80px); overflow: auto; }
#nav.is-open { display: flex; }
#nav a, #motion { font-family: var(--fm); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; min-height: 44px; display: flex; align-items: center; gap: 10px; position: relative; }
#nav a i { font-style: normal; font-family: var(--fd); color: var(--neon); min-width: 28px; letter-spacing: 0; font-size: 15px; }
#nav a.is-active { color: var(--neon); }
#motion { background: none; border: 1px solid rgba(246, 241, 234, .35); padding: 0 12px; cursor: pointer; justify-content: center; margin-top: 8px; }
.xchip img { width: 16px; height: 16px; filter: invert(1); }
.xchip--ink img { filter: none; }

@media (min-width: 900px) {
  .top { padding: 0 32px; height: 68px; }
  #burger { display: none; }
  #nav { position: static; display: flex; flex-direction: row; align-items: center; gap: 22px; padding: 0; background: none; border: 0; max-height: none; overflow: visible; }
  #nav a { font-size: 11px; }
  #nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: rgba(242, 144, 159, .35); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
  #nav a:hover::after, #nav a.is-active::after { transform: scaleX(1); }
  #motion { margin: 0; min-height: 34px; font-size: 10px; }
}

/* ---------- depth gauge ---------- */
.gauge { display: none; }
@media (min-width: 1100px) {
  .gauge { display: block; position: fixed; z-index: 40; right: 16px; top: 50%; height: 46vh; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; width: 64px; pointer-events: none; }
  .gauge::before { content: ""; position: absolute; right: 6px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--neon), var(--amber)); opacity: .55; }
  .gauge li { position: absolute; right: 16px; font-family: var(--fm); font-size: 9px; letter-spacing: .1em; color: var(--onsoft); text-shadow: 0 0 6px var(--night); transition: color .3s; }
  .gauge li:nth-child(1) { top: 0; } .gauge li:nth-child(2) { top: 20%; } .gauge li:nth-child(3) { top: 40%; }
  .gauge li:nth-child(4) { top: 60%; } .gauge li:nth-child(5) { top: 80%; } .gauge li:nth-child(6) { top: 100%; }
  .gauge li { transform: translateY(-50%); }
  .gauge li.is-on { color: var(--neon); }
  .gauge__bead { position: absolute; right: 2px; top: calc(var(--scroll, 0) * 100%); width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 12px var(--neon); }
}

/* ---------- spreads: the book ---------- */
.spread { position: relative; overflow: hidden; background-color: var(--face); background-image: var(--laid); }
.rh, .folio { position: absolute; z-index: 6; font-family: var(--fm); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--onsoft); pointer-events: none; }
.rh { top: 18px; } .folio { bottom: 16px; }
.rh--l { left: 22px; } .rh--r { right: 22px; } .folio--l { left: 22px; } .folio--r { right: 22px; }
.rh--r, .folio--l { display: none; }
.page { position: relative; padding: 64px 22px 56px; }
.page + .page { border-top: 1px dashed rgba(242, 144, 159, .45); }

.wire { position: absolute; left: 0; width: 100%; height: 40px; overflow: visible; pointer-events: none; z-index: 2; }
.wire path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.wire__a { stroke: var(--rope); stroke-width: 4; }
.wire__b { stroke: var(--rope2); stroke-width: 4; stroke-dasharray: 2 5; opacity: .8; }

@media (min-width: 900px) {
  .spread { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; }
  .spread::after { content: ""; position: absolute; z-index: 5; top: 0; bottom: 0; left: calc(50% - 30px); width: 60px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .28) 46%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .22) 54%, transparent),
                linear-gradient(rgba(242, 144, 159, .5), rgba(242, 144, 159, .5)) center / 1px 100% no-repeat; }
  .page { padding: 110px 7vw 90px; display: flex; flex-direction: column; justify-content: center; }
  .page + .page { border-top: 0; }
  .rh--r, .folio--l { display: block; }
  .rh { top: 26px; } .folio { bottom: 24px; }
  .rh--l, .folio--l { left: 40px; } .rh--r, .folio--r { right: 96px; }
}

/* page turn: the next spread slides up with a paper shadow on its edge while the last one's leaf folds back
   (no overlap, so nothing ever covers a button) */
@media (min-width: 900px) and (min-height: 700px) {
  html.js:not(.rm) .spread { box-shadow: 0 -40px 70px -20px rgba(0, 0, 0, .7); }
  html.js:not(.rm) .spread { filter: brightness(calc(1 - var(--cover, 0) * .35)); }
  html.js:not(.rm) .spread .page--r { transform: perspective(1600px) rotateY(calc(var(--cover, 0) * -9deg)); transform-origin: left center; }
}

/* ---------- I · Dusk ---------- */
.spread--1 { background: var(--night); }
.spread--1 { --W: 100vw; --H: max(52svh, 360px); }
.sky { position: relative; height: var(--H); }
.spread--1 { overflow: visible; }
/* rose dusk: the sky picture is washed toward the tongue's pink, the character stays true above it */
/* the dusk picture fills the left page only (the sunset side), fading into the plum night; the character keeps the
   right page to itself, on the wire, with nothing behind it but night */
.sky__tint { position: absolute; top: 0; bottom: 0; left: 0; width: var(--pw); pointer-events: none; background: linear-gradient(170deg, #c9607a, #6b2a45 60%, #2a1020); mix-blend-mode: color; opacity: .62; }
.sky__img, .sky__glass { position: absolute; top: 0; left: 0; width: var(--pw); height: 100%;
  -webkit-mask: linear-gradient(90deg, #000 72%, transparent); mask: linear-gradient(90deg, #000 72%, transparent); }
.sky__img { background: var(--night) url("../img/hero-900.jpg") 0% 55% / cover no-repeat; }
.sky__glass { opacity: 0; transition: opacity .6s; cursor: crosshair; }
html.glass-on .sky__glass { opacity: 1; }
html.rm .sky__glass { display: none; }
.sky__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(23, 12, 17, .55), transparent 24%, transparent 80%, rgba(23, 12, 17, .7)); }
.sky > *, .rider { --pw: calc(var(--W) * .46); --dh: max(var(--H), var(--pw) * .6667); --rope-y: calc((var(--H) - var(--dh)) * .55 + var(--dh) * .688); }
.wire--live { top: calc(var(--rope-y) - 20px); z-index: 3; }
.rider { --rw: min(calc(var(--W) - var(--pw) - 28px), calc(var(--rope-y) - 70px)); position: absolute; z-index: 4; width: var(--rw); left: calc(var(--W) - var(--rw) - 16px); top: calc(var(--rope-y) - var(--rw) * .913); transform-origin: 49% 98%; cursor: pointer; }
/* the character with the afterimage of its wobble: rose and cream ghosts of its silhouette trail on either side,
   pushed out by the balance spring's speed (js sets --wob), resting a hair apart when still */
.rider img.afterimage { width: 100%;
  filter: drop-shadow(calc(var(--wob, 7px) * -1) 0 0 rgba(242, 144, 159, .55)) drop-shadow(calc(var(--wob, 7px) * 2) 0 0 rgba(246, 241, 234, .16)) drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.hint { position: absolute; z-index: 5; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap; font-family: var(--fm); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--on); background: rgba(23, 12, 17, .72); border: 1px solid rgba(242, 144, 159, .5); padding: 7px 12px; pointer-events: none; }
.slam--net { position: absolute; z-index: 5; left: 18px; top: 74px; font-family: var(--fm); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--on); padding: 6px 10px; border: 3px double var(--neon); background: rgba(23, 12, 17, .55); rotate: -4deg; }
.spread--1 .rh { display: none; }
.spread--1 .folio { color: var(--onsoft); }

.lead { position: relative; z-index: 6; padding: 18px 22px 16px; border-top: 1px dashed rgba(242, 144, 159, .5); background: var(--night); background-image: var(--laid); }
.name { font-family: var(--fd); font-size: 52px; line-height: .95; letter-spacing: .04em; text-transform: uppercase; margin: 8px 0 8px; }
h1 { font-family: var(--fd); font-weight: 400; font-size: 23px; line-height: 1.18; }
h1 span { display: block; }
h1 em { position: relative; display: inline-block; color: var(--on); padding-bottom: 6px; }
h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M0 1 Q50 7 100 1' fill='none' stroke='%23f2909f' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 4px rgba(242, 144, 159, .8)); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 16px; }
.actions .buy { flex: 1 1 100%; }

.ticket { position: relative; z-index: 6; margin: 4px 16px 28px; padding: 20px 18px 16px 30px; color: var(--ink); background-color: var(--paper); background-image: var(--laid-ink);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7); rotate: 1deg;
  -webkit-mask: radial-gradient(circle at 0 10px, transparent 5px, #000 5.5px) 0 0 / 100% 20px repeat-y; mask: radial-gradient(circle at 0 10px, transparent 5px, #000 5.5px) 0 0 / 100% 20px repeat-y; }
.ticket::before { content: ""; position: absolute; left: 16px; top: 8px; bottom: 8px; border-left: 1px dashed rgba(42, 21, 32, .4); }
.ticket__label { font-family: var(--fm); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--inksoft); font-weight: 700; }
.ticket__seat { font-family: var(--fm); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--inksoft); margin-top: 3px; }
#ca-copy { display: block; width: 100%; text-align: left; margin: 10px 0 12px; padding: 10px 12px; background: var(--paper2); border: 1px solid rgba(42, 21, 32, .35); cursor: pointer; transition: border-color .3s, background .3s; }
#ca-copy:hover, #ca-copy:focus-visible { border-color: var(--ink); background: color-mix(in oklab, var(--paper2), var(--neon) 12%); }
#ca-text { display: block; font-family: var(--fm); font-size: 12px; line-height: 1.5; color: var(--ink); word-break: break-all; }
.ca__tap, .ca__done { display: block; margin-top: 6px; font-family: var(--fm); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--amberd); font-weight: 700; }
.ca__done { display: none; }
#ca-copy.is-copied .ca__tap { display: none; }
#ca-copy.is-copied .ca__done { display: block; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; min-width: 36px; padding: 0 9px; background: #fff; border: 1px solid rgba(42, 21, 32, .25); text-decoration: none; font-family: var(--fm); font-size: 10px; letter-spacing: .06em; color: var(--ink); transition: transform .3s var(--ease), border-color .3s; }
.chip img { width: 18px; height: 18px; }
.chip:hover, .chip:focus-visible { transform: translateY(-2px); border-color: var(--ink); }
@media (max-width: 899px) { .chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .chip { padding: 0 8px; justify-content: center; } }

/* the spirit level on the ticket */
.level { position: absolute; top: 20px; right: 16px; width: 32%; }
.level__vial { position: relative; display: block; height: 14px; border-radius: 7px; border: 1px solid rgba(42, 21, 32, .55); background: linear-gradient(180deg, #fbe0e4, #f2b3bd 55%, #e6909e); box-shadow: inset 0 2px 3px rgba(255, 255, 255, .7), 0 2px 6px rgba(0, 0, 0, .2); overflow: hidden; }
.level__mark { position: absolute; top: 1px; bottom: 1px; left: calc(50% - 13px); width: 1px; background: var(--ink); transition: background .3s; }
.level__mark--r { left: calc(50% + 12px); }
.level__bubble { position: absolute; top: 2px; left: calc(50% - 11px); translate: -150% 0; transition: translate 1.1s cubic-bezier(.3, 1.7, .5, 1); width: 22px; height: 8px; border-radius: 5px; background: radial-gradient(ellipse at 40% 30%, #fff, rgba(255, 255, 255, .55) 60%, rgba(255, 255, 255, .2)); box-shadow: 0 0 0 1px rgba(42, 21, 32, .2); }
html.ca-copied .level__mark, html.is-level .level__mark { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
html.ca-copied .level__bubble, html.is-level .level__bubble { translate: 0 0; }
@keyframes level-tip { 0% { transform: none; } 18% { transform: rotate(-3deg); } 42% { transform: rotate(1.6deg); } 64% { transform: rotate(-.7deg); } 82% { transform: rotate(.25deg); } 100% { transform: none; } }
@keyframes bubble-run { 0% { translate: -150% 0; } 30% { translate: 120% 0; } 52% { translate: -45% 0; } 72% { translate: 16% 0; } 88% { translate: -5% 0; } 100% { translate: 0 0; } }
html.js:not(.rm).ca-copied .ticket { animation: level-tip 1.3s ease-out both; }
html.js:not(.rm).ca-copied .level__bubble { animation: bubble-run 1.3s ease-out both; }

@media (min-width: 900px) {
  .spread--1 { display: block; height: 100svh; min-height: 640px; }
  .sky { position: absolute; inset: 0; height: 100%; }
  .sky__img { background-image: url("../img/hero-1600.jpg"); background-position: 0% 55%; }
  .spread--1 { --H: max(100svh, 640px); }
  .sky > *, .rider { --pw: calc(var(--W) * .52); }
  .rider { --rw: min(calc(var(--W) * .36), calc(var(--rope-y) - 110px)); left: calc(var(--W) * .75 - var(--rw) * .493); }
  .sky__scrim { background: radial-gradient(ellipse 52% 62% at 18% 34%, rgba(23, 12, 17, .78), rgba(23, 12, 17, .35) 60%, transparent 80%), linear-gradient(180deg, rgba(23, 12, 17, .6), transparent 18%, transparent 70%, rgba(23, 12, 17, .75)); }
  .lead { position: absolute; left: 6vw; top: 15vh; width: 46vw; padding: 0; border: 0; background: none; }
  .name { font-size: clamp(84px, 8.9vw, 140px); margin: 12px 0 14px; }
  h1 { font-size: clamp(28px, 2.65vw, 40px); }
  .actions { margin-top: 28px; }
  .actions .buy { flex: 0 0 auto; }
  .ticket { position: absolute; right: 6vw; bottom: 3vh; width: 400px; margin: 0; rotate: 2deg; }
  .hint { bottom: 4.5vh; left: 50%; }
  .slam--net { left: auto; right: calc(50% + 40px); top: auto; bottom: calc(100% - var(--rope-y) + 30px); }
  .spread--1 .folio { z-index: 7; }
}
@media (min-width: 900px) and (max-height: 760px) { .lead { top: 11vh; } .name { font-size: 80px; } .ticket { bottom: 3vh; } }

/* opening: labels slam on, the world recoils */
@keyframes thunk { 0% { opacity: 0; transform: scale(1.7) translateY(-10px); } 60% { opacity: 1; transform: scale(.97); } 100% { opacity: 1; transform: none; } }
@keyframes recoil { 0%, 22%, 30%, 41%, 49%, 60%, 68%, 79%, 87%, 100% { transform: none; } 25%, 44%, 63%, 82% { transform: translate(2px, 2px) rotate(.25deg); } 27%, 46%, 65%, 84% { transform: translate(-1px, -1px) rotate(-.15deg); } }
@keyframes glimmer { from { opacity: 0; } to { opacity: 1; } }
html.js:not(.rm) .slam { animation: thunk .46s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: var(--d, 0s); }
.slam--rh { --d: .15s; } .slam--net { --d: .35s; } .slam--k { --d: .5s; } .slam--n { --d: .62s; } .slam--h { --d: .86s; } .slam--a { --d: 1.02s; } .slam--t { --d: 1.12s; }
html.js:not(.rm) .sky { animation: recoil 1.6s linear both; }
html.js:not(.rm) .slam--hint { animation: glimmer .8s ease 1.5s both; }

/* ---------- II · The Setup ---------- */
.spread--2 { background-color: var(--deep); }
.drop { font-size: 19px; line-height: 1.6; max-width: 34ch; color: var(--on); }
.drop::first-letter { font-family: var(--fd); float: left; font-size: 66px; line-height: .86; padding: 6px 10px 0 0; color: var(--neon); }
.note { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(242, 144, 159, .4); font-family: var(--fm); font-size: 14px; line-height: 1.7; color: var(--onsoft); max-width: 42ch; }
.note span { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--neon); }
.watermark { position: absolute; right: -6%; top: 8%; width: 70%; opacity: .07; mix-blend-mode: soft-light; pointer-events: none; filter: grayscale(.4); }
.plate-a { position: relative; z-index: 3; margin: 0; }
.plate-a__pic { position: relative; padding: 12px; border: 1px solid rgba(246, 241, 234, .35); outline: 1px solid rgba(246, 241, 234, .15); outline-offset: 6px; background: var(--night); }
.plate-a__pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.plate-a__glass { position: absolute; left: 12px; top: 12px; width: calc(100% - 24px); height: calc(100% - 24px); opacity: 0; transition: opacity .3s; }
.plate-a__pic.is-glass .plate-a__glass { opacity: 1; }
html.rm .plate-a__glass { display: none; }
.mount { position: absolute; width: 22px; height: 22px; background: var(--paper2); }
.mount--tl { left: 4px; top: 4px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.mount--tr { right: 4px; top: 4px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.mount--bl { left: 4px; bottom: 4px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.mount--br { right: 4px; bottom: 4px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.plate-a figcaption { margin-top: 18px; font-family: var(--fm); font-size: 12px; line-height: 1.6; letter-spacing: .04em; color: var(--onsoft); }
.plate-a figcaption b { color: var(--neon); letter-spacing: .2em; text-transform: uppercase; margin-right: 10px; }
.spread--2 .wire { bottom: 38px; }
html.js:not(.rm) .plate-a[data-reveal] { opacity: 0; transform: translateY(-26px) rotate(-1.5deg); transition: opacity .7s var(--ease), transform .9s cubic-bezier(.3, 1.5, .4, 1); }
html.js:not(.rm) .plate-a[data-reveal].seen { opacity: 1; transform: none; }
html.js:not(.rm) .spread--2 .page--l[data-reveal] { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .6s, clip-path 1.1s var(--ease); }
html.js:not(.rm) .spread--2 .page--l[data-reveal].seen { opacity: 1; clip-path: inset(0 -10% 0 0); }
@media (min-width: 900px) { .spread--2 .wire { bottom: 13vh; } }

/* ---------- midnight · the routine ---------- */
.spread--3 { background-color: var(--night); display: block; padding: 70px 22px 70px; }
.spread--3::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 46%, rgba(242, 144, 159, .12), transparent 70%); }
.routine { position: relative; z-index: 3; text-align: center; }
.wire--cards { display: none; }
.line { position: relative; z-index: 3; display: grid; gap: 34px; margin-top: 30px; }
.card { position: relative; padding: 38px 24px 26px; background-color: var(--face); background-image: var(--laid); border: 1px solid rgba(242, 144, 159, .45); box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .8); transform-origin: 50% -26px; rotate: calc(var(--velocity, 0) * 5deg); transition: rotate .9s cubic-bezier(.3, 1.6, .5, 1), transform .4s var(--ease), border-color .4s; }
.card::before { content: ""; position: absolute; left: 50%; top: -20px; width: 10px; height: 30px; margin-left: -5px; background: linear-gradient(90deg, #d9c7a5, #a88b5e); border-radius: 2px; box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.card::after { content: ""; position: absolute; left: -22px; right: -22px; top: -8px; height: 4px; background: linear-gradient(var(--rope), var(--rope2)); border-radius: 2px; }
.card:hover { transform: translateY(-4px); border-color: var(--neon); }
.card__num { display: block; font-family: var(--fd); font-size: 54px; line-height: 1; color: var(--neon); text-shadow: 0 0 18px rgba(242, 144, 159, .5); }
.card h3 { font-family: var(--fd); font-weight: 400; font-size: 28px; margin: 12px 0 10px; }
.card p { font-size: 16px; line-height: 1.6; color: var(--onsoft); }
html.js:not(.rm) .line .card { opacity: 0; transform: translateY(-40px) rotate(6deg); transition: opacity .6s ease calc(var(--i, 0) * .14s), transform 1s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i, 0) * .14s), rotate .9s cubic-bezier(.3, 1.6, .5, 1), border-color .4s; }
html.js:not(.rm) .spread--3.seen .line .card { opacity: 1; transform: none; }
html.js:not(.rm) .spread--3.seen .line .card:hover { transform: translateY(-4px); }
@media (min-width: 900px) {
  .spread--3 { padding: 13vh 7vw 8vh; display: flex; flex-direction: column; }
  .wire--cards { display: block; top: calc(13vh + 190px); }
  .line { grid-template-columns: repeat(3, 1fr); gap: 4vw; margin-top: 70px; align-items: start; }
  .card::after { display: none; }
  .card:nth-child(1) { margin-top: 0; } .card:nth-child(2) { margin-top: 26px; } .card:nth-child(3) { margin-top: 8px; }
  .card { --tilt: 0deg; }
  .card:nth-child(1) { transform-origin: 50% -26px; }
}

/* ---------- III · Plates ---------- */
.spread--4 { background-color: color-mix(in oklab, var(--deep), var(--amber) 6%); }
.spread--4::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgba(233, 173, 73, .1)); }
.index { list-style: none; padding: 0; margin: 0; max-width: 360px; }
.index li { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; font-family: var(--fm); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--onsoft); cursor: default; transition: color .3s, padding .4s var(--ease); }
.index li i { flex: 1; border-bottom: 1px dotted rgba(203, 194, 180, .5); }
.index li:hover, .index li.is-lit { color: var(--neon); padding-left: 10px; }
.plates { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; z-index: 3; }
.plates figure { margin: 0; padding: 8px 8px 0; background-color: var(--paper2); background-image: var(--laid-ink); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .9); transition: transform .45s var(--ease), box-shadow .45s; }
.plates figure img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.plates figcaption { font-family: var(--fm); font-size: 10px; line-height: 1.45; color: var(--ink); padding: 8px 2px 10px; }
.plates figure:hover, .plates figure.is-lit { transform: translateY(-6px); box-shadow: 0 22px 34px -16px rgba(0, 0, 0, .9), 0 6px 20px -6px rgba(242, 144, 159, .6); }
.plates figure:last-child { grid-column: 1 / -1; width: 60%; justify-self: end; }
html.js:not(.rm) .plates figure { opacity: 0; transform: translateX(-60px); clip-path: inset(0 0 0 100%); transition: opacity .6s ease calc(var(--i, 0) * .12s), transform .9s var(--ease) calc(var(--i, 0) * .12s), clip-path .9s var(--ease) calc(var(--i, 0) * .12s), box-shadow .45s; }
html.js:not(.rm) .spread--4.seen .plates figure { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
html.js:not(.rm) .spread--4.seen .plates figure:hover, html.js:not(.rm) .spread--4.seen .plates figure.is-lit { transform: translateY(-6px); }
@media (min-width: 900px) {
  .spread--4 .page--r { padding-left: 3vw; padding-right: 8vw; }
  .plates { grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .plates figure { grid-column: span 2; }
  .plates figure:nth-child(1) { grid-column: 1 / 3; } .plates figure:nth-child(2) { grid-column: 3 / 5; margin-top: 30px; } .plates figure:nth-child(3) { grid-column: 5 / 7; margin-top: 60px; }
  .plates figure:nth-child(4) { grid-column: 2 / 4; } .plates figure:nth-child(5) { grid-column: 4 / 6; margin-top: 30px; width: auto; justify-self: stretch; }
  .plates figcaption { font-size: 9px; }
}
@media (min-width: 900px) and (max-height: 820px) { .plates figcaption { display: none; } }

/* ---------- IV · Stay steady ---------- */
.spread--5 { background-color: color-mix(in oklab, var(--deep), var(--paper) 7%); transition: background-color 1.2s; }
.spread--5.is-cleared { background-color: color-mix(in oklab, var(--deep), var(--paper) 13%); }
.status { font-family: var(--fm); font-size: 14px; line-height: 1.6; color: var(--on); min-height: 2.6em; }
.count { margin: 14px 0 20px; font-family: var(--fm); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--onsoft); }
.count b { font-family: var(--fd); font-size: 34px; color: var(--neon); letter-spacing: 0; margin-left: 6px; vertical-align: -6px; }
.ghost--btn { align-self: flex-start; color: var(--on); }
.mem { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 520px; perspective: 1200px; }
.mem__c { padding: 0; border: 0; background: none; aspect-ratio: 1; cursor: pointer; }
.mem__in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.mem__back, .mem__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid rgba(242, 144, 159, .5); }
.mem__back { display: grid; place-items: center; background-color: var(--night);
  background-image: linear-gradient(transparent calc(62% - 1px), var(--rope) calc(62% - 1px) calc(62% + 2px), transparent calc(62% + 2px)), radial-gradient(circle at 50% 62%, transparent 5px, var(--neon) 5.5px 6.5px, transparent 7px), var(--laid); }
.mem__back b { font-family: var(--fd); font-weight: 400; font-size: 40px; color: var(--neon); margin-top: -18%; text-shadow: 0 0 14px rgba(242, 144, 159, .6); }
.mem__face { transform: rotateY(180deg); background: var(--paper2); padding: 5px; }
.mem__face img { width: 100%; height: 100%; object-fit: cover; }
.mem__c.is-up .mem__in, .mem__c.is-done .mem__in, html.rm .mem__in { transform: rotateY(180deg); }
html:not(.js) .mem__in { transform: rotateY(180deg); }
.mem__c.is-done .mem__face { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(233, 173, 73, .5); }
.mem__c:hover .mem__in { transform: translateY(-4px); }
.mem__c.is-up:hover .mem__in, .mem__c.is-done:hover .mem__in { transform: rotateY(180deg); }
@keyframes teeter { 0%, 100% { rotate: 0deg; } 25% { rotate: -5deg; } 55% { rotate: 4deg; } 80% { rotate: -2deg; } }
.mem__c.is-miss { animation: teeter .55s ease; transform-origin: 50% 100%; }
@keyframes level-click { 0% { scale: 1; } 40% { scale: 1.06; } 100% { scale: 1; } }
.mem__c.is-done { animation: level-click .45s ease; }
@media (min-width: 600px) { .mem { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .mem { gap: 14px; } }

/* ---------- V · First light ---------- */
.spread--6 { color: var(--ink); background-color: var(--paper2); background-image: var(--laid-ink); }
.spread--6 .page--r { background-color: var(--paper); background-image: var(--laid-ink); align-items: flex-start; }
.spread--6 .kicker { color: var(--amberd); }
.spread--6 .rh, .spread--6 .folio { color: var(--inksoft); }
.spread--6 .page + .page { border-top-color: rgba(42, 21, 32, .3); }
.spread--6 h2 em { color: var(--inksoft); }
.steps { list-style: none; margin: 0; padding: 0; max-width: 480px; }
.steps li { display: grid; grid-template-columns: 38px 34px 1fr; align-items: center; gap: 10px; padding: 16px 0; border-top: 1px solid rgba(42, 21, 32, .2); }
.steps__n { font-family: var(--fd); font-size: 26px; color: var(--amberd); }
.steps img { width: 28px; height: 28px; padding: 3px; background: #fff; border: 1px solid rgba(42, 21, 32, .2); }
.steps p { font-size: 16px; line-height: 1.5; color: var(--inksoft); }
.steps b { color: var(--ink); font-weight: 600; }
html.js:not(.rm) .steps li { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease) calc(var(--i, 0) * .18s); }
html.js:not(.rm) .seen .steps li { clip-path: inset(0 0 0 0); }
.tag { font-family: var(--fd); font-style: italic; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.1; margin: 28px 0 18px; color: var(--ink); }
.spread--6 .ghost { color: var(--ink); }
.spread--6 .ghost:hover { color: var(--amberd); }
.spread--6 .buy { box-shadow: 0 14px 30px -14px rgba(143, 97, 20, .8); }
.spread--6 .wire { bottom: 70px; }
.rider--far { position: absolute; z-index: 3; width: 120px; right: 12%; bottom: 87px; transform-origin: 49% 98%; cursor: default; }
.rider--far img { filter: drop-shadow(0 6px 10px rgba(42, 21, 32, .3)); }
.spread--6 .page--r { padding-bottom: 210px; }
@media (min-width: 900px) {
  .spread--6 .wire { bottom: 15vh; }
  .rider--far { width: 150px; bottom: calc(15vh + 17px); right: 14%; }
  .spread--6 .page--r { padding-bottom: 30vh; justify-content: flex-start; padding-top: 18vh; }
}

/* ---------- colophon ---------- */
.colophon { position: relative; z-index: 2; color: var(--ink); background-color: var(--paper); background-image: var(--laid-ink); border-top: 1px solid rgba(42, 21, 32, .2); }
.colophon__in { display: grid; gap: 28px; padding: 56px 22px 48px; max-width: 1200px; margin: 0 auto; }
.colophon__logo { margin: 0; width: 140px; padding: 8px; background: #fff; border: 1px solid rgba(42, 21, 32, .25); box-shadow: 0 16px 30px -18px rgba(42, 21, 32, .6); }
.fin { font-family: var(--fd); font-size: 84px; line-height: .9; letter-spacing: .02em; position: relative; display: inline-block; }
.fin::after { content: ""; position: absolute; left: -40px; right: -60px; top: 54%; height: 3px; background: linear-gradient(var(--rope), var(--rope2)); border-radius: 2px; }
.colophon .kicker { margin: 16px 0 14px; }
.disclaimer { font-size: 14px; line-height: 1.6; color: var(--inksoft); max-width: 62ch; }
.colophon__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 18px; font-family: var(--fm); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.colophon__links a { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.colophon__links a:hover { color: var(--amberd); }
@media (min-width: 900px) {
  .colophon__in { grid-template-columns: 220px 1fr; gap: 6vw; padding: 100px 7vw 80px; align-items: center; }
  .colophon__logo { width: 220px; }
  .fin { font-size: 120px; }
}

/* ---------- 404 ---------- */
.spread--lost { min-height: 100svh; display: grid; place-items: center; background-color: var(--night); padding: 60px 22px; }
.lost__in { position: relative; z-index: 3; text-align: center; max-width: 640px; display: grid; justify-items: center; gap: 18px; }
.lost__in img { width: 96px; height: 96px; border: 1px solid var(--neon); padding: 3px; }
.lost h1 { font-size: clamp(34px, 6vw, 64px); line-height: 1.05; }
.spread--lost .wire { bottom: 22%; }
.spread--lost .folio--l { display: block; }
.spread--lost::after { display: none; }

/* reveal defaults */
html.js:not(.rm) .page--l[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .9s var(--ease); }
html.js:not(.rm) .page--l[data-reveal].seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
html.rm *, html.rm *::before, html.rm *::after { animation: none !important; transition: none !important; }