/* =========================================================
   Lumen-Strata — space black, white, and light.
   Two typefaces: Instrument Serif for display, Familjen
   Grotesk for everything else (uppercase + tracking = labels).
   ========================================================= */

:root {
  --bg: #040509;
  --bg-2: #0a0b10;
  --ink: #f4f2ec;
  --ink-2: #a7a8ae;
  --ink-3: #66686f;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.22);
  --glass: rgba(10, 11, 16, 0.55);
  --warm: #fff1d6;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Familjen Grotesk", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 3.4vw, 48px);
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* Deep space: near-black with two faint, cold nebula glows. */
  background:
    radial-gradient(1100px 760px at 78% -8%, rgba(70, 86, 140, 0.16), transparent 62%),
    radial-gradient(900px 700px at -6% 64%, rgba(110, 90, 150, 0.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, #viewer, .foot { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font: inherit; color: inherit; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
code { font: 0.86em ui-monospace, monospace; background: rgba(255, 255, 255, 0.07); padding: 0.1em 0.35em; border-radius: 4px; }
kbd { font: 600 0.72rem var(--sans); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 6px; margin: 0 2px; }
[hidden] { display: none !important; }
:focus-visible { outline: 1.5px solid var(--warm); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--warm); color: #000; }
.cap { font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.dim { color: var(--ink-3); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #000; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }

/* ---------- rolling text (hover swaps to a duplicate line) ---------- */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.15; }
.roll > span, .roll::after { display: block; transition: transform 0.6s var(--ease); }
.roll::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
a:hover .roll > span, a:hover .roll::after, button:hover .roll > span, button:hover .roll::after,
a:focus-visible .roll > span, a:focus-visible .roll::after { transform: translateY(-100%); }

.link-cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 0 6px; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--line-2);
  font: 600 0.78rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  transition: border-color 0.4s;
}
.link-cta i { font-style: normal; transition: transform 0.6s var(--ease); }
.link-cta:hover { border-color: var(--ink); }
.link-cta:hover i { transform: translateX(4px); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 64px;
  display: flex; align-items: center; gap: 20px; padding: 0 var(--gutter);
  transition: background 0.5s, transform 0.6s var(--ease);
}
.nav.solid { background: linear-gradient(rgba(4, 5, 9, 0.88), rgba(4, 5, 9, 0)); }
.nav.tuck { transform: translateY(-100%); }
.brand { font: 700 0.95rem var(--sans); letter-spacing: -0.01em; white-space: nowrap; }
.nav-back, .nav-title, .nav-pager { display: none; }
.nav-back { align-items: center; gap: 6px; color: var(--ink-2); }
.nav-back:hover { color: var(--ink); }
.nav-back svg { width: 16px; height: 16px; }
.nav-title { flex: 1; margin: 0; text-align: center; font: 400 1.05rem var(--serif); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-title b { font: 600 0.68rem var(--sans); letter-spacing: 0.16em; color: var(--ink-3); margin-right: 10px; vertical-align: 2px; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav-pager { gap: 6px; }
body.in-viewer .brand { display: none; }
body.in-viewer .nav-back { display: inline-flex; }
body.in-viewer .nav-title { display: block; }
body.in-viewer .nav-pager { display: flex; }
body.in-viewer .nav-right { margin-left: 0; }
body.menu-open .nav { background: none; transform: none; }
body.menu-open .nav-back, body.menu-open .nav-title, body.menu-open .nav-pager { visibility: hidden; }
body.menu-open .brand { display: block; }

.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent;
  display: grid; place-items: center; cursor: pointer; transition: background 0.3s, border-color 0.3s;
}
.icon-btn:hover { background: var(--ink); color: #000; border-color: var(--ink); }
.icon-btn svg { width: 16px; height: 16px; }

.menu-btn { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 8px 0; font: 700 0.95rem var(--sans); text-transform: uppercase; letter-spacing: -0.01em; }
.dots { display: grid; grid-template-columns: repeat(2, 4px); gap: 4px; transition: gap 0.5s var(--ease), transform 0.5s var(--ease); }
.dots i { width: 4px; height: 4px; background: currentColor; border-radius: 1px; }
.menu-btn:hover .dots { gap: 6px; }
.menu-btn[aria-expanded="true"] .dots { transform: rotate(45deg); gap: 7px; }

/* ---------- menu overlay ---------- */
.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--bg);
  clip-path: inset(0 0 100% 0); transition: clip-path 0.9s var(--ease);
  overflow-y: auto;
}
.menu.open { clip-path: inset(0 0 0 0); }
.menu-inner {
  min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gutter);
  padding: 120px var(--gutter) 48px; align-items: end;
}
.menu-main { display: flex; flex-direction: column; }
.menu-main a {
  display: flex; align-items: baseline; gap: 22px; padding: 6px 0; border-bottom: 1px solid var(--line);
  transform: translateY(40px); opacity: 0; transition: transform 0.9s var(--ease), opacity 0.9s var(--ease), color 0.4s;
}
.menu.open .menu-main a { transform: none; opacity: 1; }
.menu.open .menu-main a:nth-child(2) { transition-delay: 0.06s, 0.06s, 0s; }
.menu.open .menu-main a:nth-child(3) { transition-delay: 0.12s, 0.12s, 0s; }
.menu.open .menu-main a:nth-child(4) { transition-delay: 0.18s, 0.18s, 0s; }
.menu-main .cap { color: var(--ink-3); width: 28px; }
.menu-main em { font-size: clamp(3rem, 8vw, 7.4rem); line-height: 1; }
.menu-main:hover a { color: var(--ink-3); }
.menu-main a:hover, .menu-main a:focus-visible { color: var(--ink); }
.menu-side { display: flex; flex-direction: column; gap: 36px; opacity: 0; transition: opacity 0.8s 0.25s; }
.menu.open .menu-side { opacity: 1; }
.menu-preview { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.menu-preview img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s, transform 1.2s var(--ease); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 0.92rem; }
.menu-cols p { margin: 0 0 8px; color: var(--ink-2); }
.menu-cols .cap { margin-bottom: 12px; }
.menu-cols a { display: block; margin-bottom: 6px; color: var(--ink-2); }
.menu-cols a:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; }
.hero-stage { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 62% 46%; }
.hero-world {
  --h: min(54vh, 520px); --ar: 0.8; --spread: 0; --px: 0; --py: 0;
  position: absolute; left: 66%; top: 43%; width: calc(var(--h) * var(--ar)); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--h) * var(--ar) / -2);
  transform-style: preserve-3d;
  transform: rotateX(calc(9deg + var(--py) * -6deg)) rotateY(calc(-52deg + var(--px) * 10deg - var(--spread) * 10deg));
  transition: transform 1.2s var(--ease);
}
.hero-sheet {
  position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.2);
  transform: translateZ(calc((var(--k) - 3) * (48px + var(--spread) * 40px)));
  opacity: 0; animation: sheet-in 1.4s var(--ease) forwards; animation-delay: calc(0.3s + (6 - var(--k)) * 0.09s);
}
.hero-sheet canvas, .method-sheet canvas { width: 100%; height: 100%; display: block; }
.hero-sheet { background: rgba(250, 244, 232, 0.12); }
.hero-proj {
  position: absolute; inset: 0; transform: translateZ(-300px) scale(1.25); opacity: 0;
  animation: proj-in 2.4s 1s ease forwards;
  -webkit-mask: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%);
          mask: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%);
}
.hero-proj canvas { width: 100%; height: 100%; display: block; filter: brightness(0.9); }
@keyframes proj-in { to { opacity: 0.85; } }
.hero-sheet::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.14), transparent 38%);
}
@keyframes sheet-in { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
.hero-copy { position: absolute; left: var(--gutter); top: 15vh; z-index: 2; }
.display { margin: 0; font: 400 clamp(4.4rem, 10.4vw, 10.5rem)/0.88 var(--serif); letter-spacing: -0.025em; }
.reveal-lines > span { display: block; overflow: hidden; padding-bottom: 0.04em; }
.reveal-lines > span > span { display: block; animation: rise 1.3s var(--ease) both; }
.reveal-lines > span:nth-child(2) > span { animation-delay: 0.12s; }
@keyframes rise { from { transform: translateY(105%); } }
.hero-cta { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 32px; animation: fade 1.2s 0.5s both; }
@keyframes fade { from { opacity: 0; } }
.hero-labels {
  position: absolute; left: var(--gutter); right: var(--gutter); z-index: 2;
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  letter-spacing: 0.32em; bottom: 13vh; color: var(--ink-2); animation: fade 1.2s 0.7s both; pointer-events: none;
}
.hero-labels li:nth-child(n + 2) { text-align: center; }
.hero-labels li:last-child { text-align: right; }
.hero-caption { position: absolute; left: 0; right: 0; bottom: 34px; margin: 0; text-align: center; z-index: 2; color: var(--ink-2); font-size: 0.95rem; animation: fade 1.2s 0.9s both; }

/* ---------- statement ---------- */
.statement { padding: 18vh var(--gutter) 14vh; display: grid; grid-template-columns: 1fr 3fr; gap: var(--gutter); }
.statement > .cap { padding-top: 0.9em; }
.statement-text { margin: 0; font: 500 clamp(1.9rem, 4.1vw, 4rem)/1.06 var(--sans); letter-spacing: -0.025em; }
.statement-text .w { opacity: 0.14; transition: opacity 0.35s; }
.statement-text .w.on { opacity: 1; }
.statement-foot { grid-column: 2; border-top: 1px solid var(--line-2); padding-top: 22px; }
.statement-foot p { margin: 0; max-width: 30rem; color: var(--ink-2); }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 22px 0; position: relative; z-index: 1; }
.marquee-track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.marquee-track span { font: 400 clamp(2.4rem, 5vw, 4.6rem)/1 var(--serif); padding: 0 0.45em; white-space: nowrap; color: var(--ink-2); }
.marquee-track span:nth-child(even) { font-style: italic; color: var(--ink); }
.marquee-track span::after { content: "/"; color: var(--ink-3); font-style: normal; margin-left: 0.9em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
section.collection, section.method, section.light-essay { padding: 15vh var(--gutter) 6vh; }
.section-head { display: grid; grid-template-columns: 1fr 3fr; gap: 14px var(--gutter); margin-bottom: 56px; }
.section-head > .cap { padding-top: 0.9em; }
.section-head > .cap span { color: var(--ink); }
.h2 { grid-column: 2; margin: 0; font: 400 clamp(2.6rem, 5.8vw, 5.6rem)/0.95 var(--serif); letter-spacing: -0.02em; }
.sub { grid-column: 2; color: var(--ink-2); max-width: 38rem; margin: 10px 0 0; }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-bottom: 40px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.search { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; }
.search svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--ink); font: 500 1.05rem var(--sans); outline: none; padding: 8px 0; }
.search input::placeholder { color: var(--ink-3); }
.tabs { display: flex; gap: 22px; }
.tabs button { background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--ink-3); position: relative; font: inherit; letter-spacing: inherit; transition: color 0.3s; }
.tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.tabs button:hover { color: var(--ink-2); }
.tabs button.on { color: var(--ink); }
.tabs button.on::after { transform: scaleX(1); }
.sort { display: flex; align-items: center; gap: 10px; color: var(--ink-3); }
.sort select { background: transparent; color: var(--ink); border: 0; font: inherit; letter-spacing: inherit; text-transform: uppercase; cursor: pointer; padding: 6px 0; }
.sort select option { background: var(--bg-2); text-transform: none; }
.count { margin: 0 0 0 auto; color: var(--ink-3); }

/* ---------- cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 56px 28px; perspective: 1400px; }
.card { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; display: block; transform-style: preserve-3d; animation: card-in 0.9s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(24px); } }
.card-media {
  position: relative; aspect-ratio: 4 / 5; transform-style: preserve-3d; border-radius: var(--radius);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.7s var(--ease);
}
.card .ly { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); transition: transform 0.8s var(--ease), opacity 0.8s; background: var(--bg-2); }
.card .ly0 { filter: grayscale(1) contrast(3) brightness(1.5) invert(1); opacity: 0; }
.card .ly1 { filter: sepia(1) saturate(0.4) contrast(0.8); opacity: 0; }
.glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s; border-radius: var(--radius);
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.22), transparent 55%);
  transform: translateZ(36px);
}
.card-go {
  position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: #000; display: grid; place-items: center; font-size: 1rem;
  transform: translateZ(50px) scale(0.6); opacity: 0; transition: transform 0.6s var(--ease), opacity 0.4s;
}
.card.ready:hover .ly0, .card.ready:focus-visible .ly0 { opacity: 0.45; transform: translateZ(-40px); }
.card.ready:hover .ly1, .card.ready:focus-visible .ly1 { opacity: 0.75; transform: translateZ(-18px); }
.card:hover .ly2, .card:focus-visible .ly2 { transform: translateZ(34px); }
.card:hover .glare { opacity: 1; }
.card:hover .card-go, .card:focus-visible .card-go { opacity: 1; transform: translateZ(50px) scale(1); }
.card-meta { padding-top: 16px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.card-meta .cap { color: var(--ink-3); }
.card-meta h3 { grid-column: 1 / -1; font: 400 1.45rem/1.08 var(--serif); margin: 2px 0 0; }
.card-meta p { grid-column: 1 / -1; margin: 4px 0 0; color: var(--ink-2); font-size: 0.88rem; }
.empty { color: var(--ink-3); text-align: center; padding: 3rem 0; }

/* ---------- method (sticky split) ---------- */
.method-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); }
.method-stage { position: sticky; top: 12vh; height: 76vh; perspective: 1500px; }
.method-world {
  --h: min(52vh, 440px); --ar: 0.8;
  position: absolute; left: 50%; top: 46%; width: calc(var(--h) * var(--ar)); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--h) * var(--ar) / -2);
  transform-style: preserve-3d; transform: rotateX(14deg) rotateY(-42deg);
}
.method-sheet {
  position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.18);
  transform: translateZ(calc((var(--k) - 3) * 52px)); opacity: 0.13;
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease), border-color 0.6s;
}
.method-sheet.on { opacity: 1; border-color: rgba(255, 255, 255, 0.7); transform: translateZ(calc((var(--k) - 3) * 52px)) translateY(-26px); }
.method-sheet.on::before {
  content: attr(data-name); position: absolute; left: 0; bottom: calc(100% + 14px); white-space: nowrap;
  font: 600 0.72rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
}
.method-count { position: absolute; left: 0; bottom: 0; margin: 0; color: var(--ink-3); }
.method-count b { font: 400 3.6rem/1 var(--serif); color: var(--ink); letter-spacing: 0; margin-right: 8px; vertical-align: -0.2em; }
.method-steps { list-style: none; margin: 0; padding: 0; }
.method-steps li { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; border-top: 1px solid var(--line); opacity: 0.3; transition: opacity 0.6s; }
.method-steps li.on { opacity: 1; }
.method-steps .cap { color: var(--ink-3); margin: 0 0 18px; }
.method-steps h3 { font: 400 clamp(2.2rem, 3.6vw, 3.4rem)/1 var(--serif); margin: 0 0 18px; }
.method-steps p { margin: 0 0 14px; color: var(--ink-2); max-width: 34rem; }
.method-steps .m-short { font: 400 1.5rem/1.2 var(--serif); color: var(--ink); }
.method-steps .m-tool { color: var(--warm); margin: 0 0 18px; }
.m-instr b, .note-instr b { color: var(--ink); font-weight: 600; }
.disclaimer { margin: 56px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line-2); max-width: 52rem; }
.disclaimer strong { color: var(--ink); font-weight: 600; }

/* ---------- light essay ---------- */
.essay { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.essay details { margin-top: 18px; }
.essay article { border-top: 1px solid var(--line-2); padding-top: 22px; }
.essay h3 { font: 400 2rem/1.05 var(--serif); margin: 14px 0 14px; }
.essay p { color: var(--ink-2); margin: 0; }
.essay .cap { margin: 0; }

/* ---------- footer ---------- */
.foot { padding: 16vh var(--gutter) 28px; margin-top: 10vh; border-top: 1px solid var(--line); overflow: hidden; }
.foot-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.foot-tag { margin: 0; font: 400 clamp(2rem, 4vw, 3.4rem)/1 var(--serif); font-style: italic; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.foot-cols .cap { margin: 0 0 14px; }
.foot-cols a { display: block; margin-bottom: 8px; font-size: 1.05rem; }
.foot-word { margin: 12vh 0 3vh; font: 400 clamp(4rem, 15.5vw, 16rem)/0.8 var(--serif); letter-spacing: -0.04em; white-space: nowrap; color: var(--ink); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--line); }

/* ====================== VIEWER ====================== */
#viewer { --lit: 0; --sw: 300px; --sh: 400px; }
.track { height: 760vh; position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; perspective: 2000px; perspective-origin: 50% 44%; cursor: grab; touch-action: pan-y; }
/* The stage is a drag surface: its labels are not text to select. The note card's
   prose stays selectable, and nothing on the page selects mid-drag. */
.stage { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.stage .note, .stage .note * { -webkit-user-select: text; user-select: text; }
body.orbiting, body.orbiting * { -webkit-user-select: none !important; user-select: none !important; }
.sheet canvas { -webkit-user-drag: none; }
.stage.dragging { cursor: grabbing; }
.world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.sheets { position: absolute; transform-style: preserve-3d; }

/* sheets of transparent film */
/* Each sheet is a film: a faint frosted backing catches the room's light, so
   clear areas read pale and dense areas dark, and it glows when lit. */
.sheet {
  position: absolute; left: 0; top: 0; width: var(--sw); height: var(--sh); cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(250, 244, 232, calc(0.13 + var(--lit) * 0.07));
  transition: border-color 0.4s, box-shadow 0.6s;
  box-shadow: 0 0 calc(var(--lit) * 50px) calc(var(--lit) * 2px) rgba(255, 241, 214, calc(var(--lit) * 0.18));
}
.sheet canvas { width: 100%; height: 100%; display: block; pointer-events: none; }
.sheet.active { border-color: rgba(255, 255, 255, 0.6); }
.sheet:hover { border-color: var(--warm); }
.sheet:hover .sheet-tag { opacity: 1; }
.sheet.out { border-style: dashed; }
.sheet.assembled { pointer-events: none; background: none; border-color: transparent; }
.sheet.assembled canvas { box-shadow: 0 30px 80px -30px #000; }
.lit .sheet canvas { filter: brightness(calc(1 + var(--lit) * 0.2)); }
.reg { position: absolute; width: 14px; height: 14px; opacity: 0.5; pointer-events: none; }
.reg::before, .reg::after { content: ""; position: absolute; background: #fff; }
.reg::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.reg::after { top: 50%; left: 0; right: 0; height: 1px; }
.reg.tl { left: -20px; top: -20px; } .reg.tr { right: -20px; top: -20px; }
.reg.bl { left: -20px; bottom: -20px; } .reg.br { right: -20px; bottom: -20px; }
.sheet-tag { position: absolute; left: 0; bottom: calc(100% + 26px); white-space: nowrap; display: flex; gap: 8px; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.sheet-tag b { color: var(--ink-3); font-weight: 600; }
.sheet.active .sheet-tag, .lit .sheet-tag { opacity: 1; }

/* the room: floor, wall, projection */
.floor {
  position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 30% 50% at 50% 50%, rgba(255, 241, 214, calc(var(--lit) * 0.09)), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 64px);
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 100%);
          mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 100%);
}
.wall {
  position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(#0d0f15, #08090d);
  box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.12); }
.wall-glow { position: absolute; inset: 0; opacity: var(--lit); background: radial-gradient(ellipse 40% 42% at 50% 62%, rgba(255, 244, 222, 0.14), transparent 70%); }
.projection {
  position: absolute; left: 50%; translate: -50% -50%;
  opacity: 0; filter: blur(18px) brightness(0.3);
  -webkit-mask: radial-gradient(ellipse 74% 74% at 50% 50%, #000 66%, transparent 100%);
          mask: radial-gradient(ellipse 74% 74% at 50% 50%, #000 66%, transparent 100%);
  transition: opacity 1.4s ease 0.4s, filter 1.8s var(--ease) 0.4s, rotate 1.2s var(--ease);
}
.projection canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lit .projection { opacity: 1; filter: blur(0) brightness(1.04); animation: flicker 0.9s steps(1) 0.35s; }
.obscura .projection { rotate: 180deg; }
@keyframes flicker { 0% { opacity: 0.2; } 15% { opacity: 0.8; } 25% { opacity: 0.1; } 40% { opacity: 0.9; } 55% { opacity: 0.5; } 70% { opacity: 1; } }

.beam { position: absolute; transform-style: preserve-3d; pointer-events: none; }
.beam i {
  position: absolute; left: 0; top: 0; border-radius: 40%; opacity: var(--lit);
  background: radial-gradient(ellipse at center, rgba(255, 246, 226, var(--a)) 0%, rgba(255, 246, 226, calc(var(--a) * 0.35)) 50%, transparent 72%);
}
.lamp { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; opacity: var(--lit); }
.lamp span { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%; box-shadow: 0 0 60px 30px rgba(255, 244, 222, 0.45), 0 0 140px 70px rgba(255, 244, 222, 0.12); }

/* the projector: a six-faced box with a lens barrel, on a stand */
.projector { position: absolute; left: 0; top: 0; transform-style: preserve-3d; opacity: 0; pointer-events: none; }
.pf { position: absolute; left: 0; top: 0; translate: -50% -50%; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 3px; }
.pf.front, .pf.back { width: var(--pw); height: var(--ph); }
.pf.left, .pf.right { width: var(--pd); height: var(--ph); }
.pf.top, .pf.bottom { width: var(--pw); height: var(--pd); }
.pf.front { transform: rotateY(180deg) translateZ(calc(var(--pd) / 2)); background: linear-gradient(160deg, #23262e, #121318); display: grid; place-items: center; }
.pf.back { transform: translateZ(calc(var(--pd) / 2)); background: radial-gradient(circle at 80% 30%, rgba(255, 241, 214, calc(0.2 + var(--lit) * 0.7)) 0 3px, transparent 4px), linear-gradient(160deg, #262930, #111216); }
.pf.left { transform: rotateY(-90deg) translateZ(calc(var(--pw) / 2)); background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.4)), repeating-linear-gradient(90deg, #1b1d23 0 6px, #0d0e12 6px 9px); }
.pf.right { transform: rotateY(90deg) translateZ(calc(var(--pw) / 2)); background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.4)), repeating-linear-gradient(90deg, #22252c 0 6px, #111216 6px 9px); box-shadow: inset 0 0 calc(var(--lit) * 30px) rgba(255, 241, 214, 0.18); }
.pf.top { transform: rotateX(90deg) translateZ(calc(var(--ph) / 2)); background: linear-gradient(#3a3e49, #23262e); box-shadow: inset 0 0 0 999px rgba(255, 241, 214, calc(var(--lit) * 0.05)); }
.pf.top::after { content: "LUMEN · STRATA"; position: absolute; left: 50%; top: 22%; translate: -50% 0; font: 700 9px var(--sans); letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.28); white-space: nowrap; }
.pf.bottom { transform: rotateX(-90deg) translateZ(calc(var(--ph) / 2)); background: #08090b; }
.lens { width: calc(var(--ph) * 0.72); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 252, 240, calc(0.15 + var(--lit) * 0.85)) 0 18%, #262a34 38%, #0b0c10 56%, #3b3f4a 60%, #14161a 68%); }
.barrel { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--pd) / -2)); }
.barrel i {
  position: absolute; left: 0; top: 0; width: calc(var(--ph) * 0.66); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  border: 2px solid #3a3e48; background: rgba(12, 13, 17, 0.92);
  transform: translateZ(calc(var(--n) * var(--ph) * -0.08));
}
.barrel i:nth-child(1) { --n: 1; } .barrel i:nth-child(2) { --n: 2; } .barrel i:nth-child(3) { --n: 3; }
.barrel i:nth-child(4) {
  --n: 4; border-color: #555a66;
  background: radial-gradient(circle, rgba(255, 252, 240, calc(0.12 + var(--lit) * 0.88)) 0 30%, rgba(60, 66, 80, 0.9) 58%, #111 70%);
  box-shadow: 0 0 calc(var(--lit) * 40px) calc(var(--lit) * 12px) rgba(255, 244, 222, 0.5);
}
.stand { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.stand i { position: absolute; left: 0; top: calc(var(--ph) / 2); width: calc(var(--ph) * 0.12); height: var(--stand); translate: -50% 0; background: linear-gradient(90deg, #121318, #2c2f38, #121318); }
.stand i:nth-child(2) { transform: rotateY(90deg); }
.stand::after { content: ""; position: absolute; left: 0; top: calc(var(--ph) / 2 + var(--stand)); width: calc(var(--pw) * 0.8); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; transform: rotateX(90deg); background: radial-gradient(circle, #23252c 0 40%, #101114 62%, transparent 64%); }

/* ---------- viewer HUD ---------- */
.intro-card { position: absolute; z-index: 4; left: var(--gutter); top: 50%; translate: 0 -50%; max-width: min(34vw, 500px); transition: opacity 0.7s, translate 0.9s var(--ease); pointer-events: none; }
.intro-card.gone { opacity: 0; translate: -30px -50%; }
.intro-card h1 { font: 400 clamp(2.6rem, 5vw, 5rem)/0.95 var(--serif); letter-spacing: -0.02em; margin: 16px 0 16px; }
.intro-card .artist { color: var(--ink-2); font-size: 1.1rem; margin: 0 0 2.6rem; }
.hint { display: flex; align-items: center; gap: 12px; color: var(--ink-3); }
.mouse { width: 18px; height: 28px; border: 1.5px solid var(--ink-3); border-radius: 10px; position: relative; flex: none; }
.mouse::after { content: ""; position: absolute; left: 50%; top: 5px; width: 2px; height: 6px; margin-left: -1px; background: var(--ink-2); border-radius: 2px; animation: wheel 1.6s infinite; }
@keyframes wheel { to { transform: translateY(8px); opacity: 0; } }
.stage-hint { position: absolute; z-index: 4; left: 0; right: 0; top: 80px; margin: 0; text-align: center; color: var(--ink-3); pointer-events: none; }

.chip-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: transparent; font: 600 0.7rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.3s, color 0.3s, border-color 0.3s; list-style: none;
}
.chip-btn::-webkit-details-marker { display: none; }
.chip-btn:hover { background: var(--ink); color: #000; border-color: var(--ink); }
.chip-btn i { font-style: normal; }
details.more[open] > summary { background: rgba(255, 255, 255, 0.1); }
.more-body { padding-top: 14px; }
.more-body p { font-size: 0.9rem; color: var(--ink-2); margin: 0 0 12px; }

.note {
  position: absolute; z-index: 4; right: var(--gutter); top: 50%; translate: 0 -46%;
  width: min(320px, 26vw); padding: 22px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; pointer-events: none; transition: opacity 0.5s, translate 0.7s var(--ease);
  max-height: 72vh; overflow: auto;
}
.note.show { opacity: 1; pointer-events: auto; translate: 0 -50%; }
.note.swap > * { animation: note-in 0.6s var(--ease) both; }
.note.swap > *:nth-child(2) { animation-delay: 40ms; } .note.swap > *:nth-child(3) { animation-delay: 80ms; } .note.swap > *:nth-child(5) { animation-delay: 120ms; }
@keyframes note-in { from { opacity: 0; transform: translateY(8px); } }
.note-num { color: var(--ink-3); margin: 0 0 12px; }
.note h2 { font: 400 2.2rem/1 var(--serif); margin: 0 0 10px; letter-spacing: -0.01em; }
.note-short { margin: 0 0 12px; color: var(--ink-2); }
.note-tool { color: var(--warm); margin: 0 0 18px; }
.note-tool:empty { display: none; }
.note-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.note-actions details { flex-basis: 100%; }
.note-actions details > summary { display: inline-flex; }
.note-actions .chip-btn[hidden] { display: none; }
.note-how { color: var(--ink-3) !important; font-size: 0.8rem !important; }

.light-caption { position: absolute; z-index: 4; left: var(--gutter); top: 96px; max-width: 420px; opacity: 0; translate: 0 -8px; transition: opacity 0.8s 0.6s, translate 0.8s var(--ease) 0.6s; pointer-events: none; }
.lit .light-caption { opacity: 1; translate: 0 0; }
.light-caption .cap { color: var(--warm); margin: 0 0 10px; }
.light-caption p:last-child { font: 400 1.4rem/1.2 var(--serif); margin: 0; }
.lit .note { opacity: 0 !important; pointer-events: none !important; }

.hud-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 0 var(--gutter) 20px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(transparent, rgba(4, 5, 9, 0.75) 40%); pointer-events: none; }
.hud-bottom > * { pointer-events: auto; }
.rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.rail button { width: 100%; background: none; border: 0; padding: 10px 0 0; cursor: pointer; text-align: left; position: relative; color: var(--ink-3); display: flex; gap: 8px; align-items: baseline; transition: color 0.3s; }
.rail button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.r-fill { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); transform-origin: left; transform: scaleX(var(--f, 0)); }
.r-num { font: 600 0.68rem var(--sans); letter-spacing: 0.12em; }
.r-name { font: 500 0.78rem var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail button:hover, .rail button.on { color: var(--ink); }
.rail button.on .r-fill { background: var(--warm); }
.lit .rail button { color: var(--ink-2); }
.lit .rail button .r-fill { transform: scaleX(1); background: var(--warm); transition: transform 0.4s var(--ease); }
.lit .rail button.off { color: var(--ink-3); text-decoration: line-through; }
.lit .rail button.off .r-fill { transform: scaleX(0); }
.controls { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 50px; }
.controls-right { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.table { opacity: 0; pointer-events: none; translate: 0 8px; transition: opacity 0.5s, translate 0.6s var(--ease); }
.lit .table { opacity: 1; pointer-events: auto; translate: 0 0; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(10, 11, 16, 0.6); cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.presets button:hover { border-color: var(--ink); }
.presets button[aria-pressed="true"] { background: var(--warm); color: #12100b; border-color: var(--warm); }
.light-toggle, .lens-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px 0 7px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(10, 11, 16, 0.6); cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background 0.4s, color 0.4s, box-shadow 0.5s, border-color 0.4s;
}
.bulb { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); transition: background 0.4s; }
.bulb svg { width: 19px; height: 19px; }
.light-toggle b { font-weight: 600; color: var(--ink-3); margin-left: 4px; }
.light-toggle:hover { border-color: var(--ink); }
.light-toggle[aria-pressed="true"] { background: var(--warm); color: #12100b; border-color: var(--warm); box-shadow: 0 0 60px -6px rgba(255, 240, 210, 0.7); }
.light-toggle[aria-pressed="true"] .bulb { background: #fff; }
.light-toggle[aria-pressed="true"] b { color: #7a6638; }
.light-toggle.beckon { animation: beckon 2s ease-in-out infinite; }
@keyframes beckon { 50% { box-shadow: 0 0 0 10px rgba(255, 244, 220, 0.07), 0 0 50px -8px rgba(255, 244, 220, 0.6); } }
.lens-btn { padding: 0 18px; height: 42px; display: none; }
.lens-btn svg { width: 17px; height: 17px; }
.lit .lens-btn { display: inline-flex; }
.lens-btn:hover { border-color: var(--ink); }
.lens-btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); border-color: var(--warm); }

.loader { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 24px; background: rgba(4, 5, 9, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.5s; text-align: center; padding: 0 24px; }
.loader.show { opacity: 1; pointer-events: auto; }
.loader p { color: var(--ink-2); margin: 0; }
.loader-stack { width: 60px; height: 60px; position: relative; perspective: 300px; transform-style: preserve-3d; }
.loader-stack i { position: absolute; inset: 8px; border: 1px solid rgba(255, 255, 255, 0.6); transform: rotateX(60deg) rotateZ(45deg); animation: lift 1.6s var(--ease) infinite; }
.loader-stack i:nth-child(2) { animation-delay: 0.12s; } .loader-stack i:nth-child(3) { animation-delay: 0.24s; } .loader-stack i:nth-child(4) { animation-delay: 0.36s; }
@keyframes lift { 50% { transform: rotateX(60deg) rotateZ(45deg) translateZ(26px); border-color: #fff; } }

/* ---------- sheet inspector ---------- */
body.inspecting { overflow: hidden; }
body.inspecting .nav { opacity: 0; pointer-events: none; }
.inspect {
  position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: auto 1fr auto auto; gap: 14px;
  padding: 20px var(--gutter) 18px; background: rgba(4, 5, 9, 0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  opacity: 0; transition: opacity 0.4s;
}
.inspect.open { opacity: 1; }
.ins-top { display: flex; align-items: baseline; gap: 18px; }
.ins-top .cap { color: var(--ink-3); margin: 0; }
.ins-top h2 { margin: 0; font: 400 clamp(1.8rem, 3vw, 2.8rem)/1 var(--serif); }
.ins-close { margin-left: auto; align-self: center; }
.ins-body { display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 0; }
.compare {
  --ar: 0.8; --x: 50%; position: relative; aspect-ratio: var(--ar); width: min(80vw, calc(58vh * var(--ar))); max-height: 100%;
  border-radius: 8px; overflow: hidden; box-shadow: 0 30px 80px -30px #000, 0 0 0 1px var(--line); transform: scale(0.97); transition: transform 0.6s var(--ease);
}
.inspect.open .compare { transform: none; }
.cmp-base, .cmp-top { position: absolute; inset: 0; }
.cmp-base canvas, .cmp-top canvas { width: 100%; height: 100%; display: block; }
.cmp-top { background: #08090c; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.cmp-top[data-key="drawing"] { background: #ece6d8; }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: #fff; pointer-events: none; }
.cmp-handle span { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-size: 1rem; }
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp-range:focus-visible + .cmp-label { outline: none; }
.compare:has(.cmp-range:focus-visible) { box-shadow: 0 0 0 2px var(--warm); }
.cmp-label { position: absolute; top: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(4, 5, 9, 0.7); pointer-events: none; }
.cmp-label.l { left: 12px; } .cmp-label.r { right: 12px; }
.ins-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; max-width: 900px; margin: 0 auto; width: 100%; justify-content: center; text-align: center; }
.ins-foot > p { margin: 0; }
.ins-foot #ins-short { font: 400 1.25rem var(--serif); }
.ins-foot details { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; }
.ins-foot details > summary { display: inline-flex; }
.ins-foot .more-body { text-align: left; }
.ins-foot .more-body { max-width: 680px; margin: 0 auto; }
.ins-strip { display: flex; justify-content: center; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.ins-strip button { flex: none; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-3); opacity: 0.7; transition: opacity 0.3s, color 0.3s; }
.ins-strip .thumb { height: 54px; border-radius: 4px; overflow: hidden; outline: 1px solid var(--line); }
.ins-strip .thumb canvas { height: 100%; width: auto; display: block; }
.ins-strip button:hover { opacity: 1; }
.ins-strip button[aria-selected="true"] { opacity: 1; color: var(--ink); }
.ins-strip button[aria-selected="true"] .thumb { outline: 2px solid var(--warm); }
.ins-strip .cap { font-size: 0.62rem; letter-spacing: 0.1em; }

/* ---------- dossier ---------- */
.dossier { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); padding: 14vh var(--gutter); border-top: 1px solid var(--line); background: var(--bg); position: relative; z-index: 2; }
.dossier-img { position: sticky; top: 90px; align-self: start; }
.dossier-img img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; border-radius: 6px; }
.dossier h2 { font: 400 clamp(2.6rem, 4.6vw, 4.4rem)/0.96 var(--serif); letter-spacing: -0.02em; margin: 16px 0 12px; }
.dossier .artist { color: var(--ink-2); font-size: 1.15rem; margin: 0 0 32px; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px 24px; margin: 0 0 32px; padding: 24px 0; border-block: 1px solid var(--line); }
.facts dt { color: var(--ink-3); margin-bottom: 6px; }
.facts dd { margin: 0; font-size: 0.96rem; }
.d-text p { color: var(--ink-2); margin: 0 0 14px; max-width: 44rem; }
.d-text .muted { color: var(--ink-3); }
.palette { margin: 36px 0; }
.palette .cap { margin: 0 0 12px; }
.swatches { display: flex; height: 56px; border-radius: 10px; overflow: hidden; }
.sw { background: var(--c); flex-basis: 0; min-width: 6px; position: relative; transition: flex-grow 0.6s var(--ease); }
.sw i { position: absolute; bottom: -24px; left: 0; font: 600 0.62rem var(--sans); letter-spacing: 0.08em; color: var(--ink-3); font-style: normal; opacity: 0; transition: opacity 0.2s; white-space: nowrap; }
.sw:hover i { opacity: 1; }
.dossier-actions { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 44px; }

.next-up { position: relative; z-index: 2; background: var(--bg); border-top: 1px solid var(--line); }
.next-up a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--gutter); padding: 9vh var(--gutter); overflow: hidden; position: relative; }
.next-up .cap { color: var(--ink-3); display: block; margin-bottom: 14px; }
.next-up strong { font: 400 clamp(2.4rem, 6vw, 6rem)/0.95 var(--serif); letter-spacing: -0.02em; display: block; transition: transform 0.8s var(--ease); }
.next-up a:hover strong { transform: translateX(12px); }
.next-up img { width: clamp(120px, 16vw, 220px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); transition: transform 0.9s var(--ease); }
.next-up a:hover img { transform: rotate(-3deg) scale(1.04); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .r-name { display: none; }
  .rail button.on .r-name { display: inline; }
}
@media (max-width: 900px) {
  .hero-world { --h: 46vh; left: 50%; top: 58%; }
  .hero-stage { perspective-origin: 50% 55%; }
  .hero-copy { top: 13vh; }
  .hero-labels { grid-template-columns: repeat(2, 1fr); gap: 12px; bottom: 110px; letter-spacing: 0.22em; }
  .hero-labels li:nth-child(n) { text-align: left; }
  .hero-labels li:nth-child(even) { text-align: right; }
  .statement, .section-head { grid-template-columns: 1fr; }
  .statement-foot, .h2, .sub { grid-column: 1; }
  .method-split { grid-template-columns: 1fr; }
  .method-stage { top: 56px; height: 40vh; z-index: 2; background: linear-gradient(var(--bg) 84%, transparent); }
  .method-world { --h: 24vh; }
  .method-count b { font-size: 2.4rem; }
  .method-steps li { min-height: 46vh; }
  .essay { grid-template-columns: 1fr 1fr; }
  .foot-top { grid-template-columns: 1fr; }
  .dossier { grid-template-columns: 1fr; }
  .dossier-img { position: static; }
  .menu-inner { grid-template-columns: 1fr; align-items: start; }
  .menu-preview { display: none; }
  .note { width: min(300px, 34vw); }
}
@media (max-width: 760px) {
  .nav { height: 56px; }
  body.in-viewer .nav-title { display: none; }
  body.in-viewer .nav-right { margin-left: auto; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .card-meta h3 { font-size: 1.1rem; }
  .card-meta p { font-size: 0.8rem; }
  .count { width: 100%; margin: 0; }
  .intro-card { left: 16px; right: 16px; top: auto; bottom: 150px; translate: 0 0; max-width: none; }
  .intro-card.gone { translate: 0 20px; }
  .intro-card h1 { font-size: 2.6rem; }
  .intro-card .artist { margin-bottom: 1rem; }
  .stage-hint { top: 64px; }
  .note { left: 12px; right: 12px; width: auto; top: auto; bottom: 132px; translate: 0 12px; max-height: 34vh; padding: 16px 18px; }
  .note.show { translate: 0 0; }
  .note h2 { font-size: 1.7rem; margin-bottom: 6px; }
  .note-short { font-size: 0.92rem; margin-bottom: 10px; }
  .note-tool { margin-bottom: 12px; }
  .light-caption { left: 16px; right: 16px; top: 72px; }
  .light-caption p:last-child { font-size: 1.15rem; }
  .controls { flex-wrap: wrap; }
  .table { order: 2; width: 100%; }
  .lit .hud-bottom { padding-bottom: 14px; }
  .presets { flex-wrap: nowrap; overflow-x: auto; }
  .presets button { flex: none; }
  .light-toggle { height: 46px; }
  .menu-cols { grid-template-columns: 1fr; }
  .essay { grid-template-columns: 1fr; }
  .next-up img { display: none; }
  .ins-nav { display: none; }
  .compare { width: min(92vw, calc(52vh * var(--ar))); }
  .ins-strip { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .marquee-track { animation: none; }
}