:root {
  --paper: #f3f0ea;
  --paper-2: #e8e4db;
  --ink: #111111;
  --ink-2: #2a2a2a;
  --mute: #6d6a63;
  --red: #b5281c;
  --line: rgba(17, 17, 17, 0.14);
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 56px);
}
[data-theme="ink"] {
  --paper: #0f0e12;
  --paper-2: #1c1b19;
  --ink: #efeae1;
  --ink-2: #d6d1c7;
  --mute: #8f8a80;
  --line: rgba(239, 234, 225, 0.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.5; transition: background 0.5s, color 0.5s; }
@media (hover: hover) and (pointer: fine) { body, a, button { cursor: none; } }
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
em { font-style: italic; }

.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: 16px; }
.kicker--light { color: #e2554a; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5.4vw, 84px); line-height: 0.98; letter-spacing: -0.01em; }
.h2 em { color: var(--red); }
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
[data-split] .w > span { display: inline-block; will-change: transform; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1.5px solid var(--ink); transition: background 0.25s, color 0.25s; will-change: transform; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--red { background: var(--red); color: #f3f0ea; border-color: var(--red); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--big { padding: 22px 40px; font-size: 18px; }

/* wireframe annotations */
.wf-note {
  font-family: var(--mono); font-size: 11px; line-height: 1.5; color: #3b5bdb;
  background: rgba(59, 91, 219, 0.08); border: 1px dashed rgba(59, 91, 219, 0.5);
  padding: 9px 11px; max-width: 430px; border-radius: 4px;
}
.scene .wf-note { position: absolute; left: calc(var(--gutter) + 40px); bottom: 18px; z-index: 5; }
.scene .wf-note--right { left: auto; right: calc(var(--gutter) + 40px); }
[data-theme="ink"] .wf-note, .scene--nv .wf-note { color: #8fa7ff; background: rgba(143, 167, 255, 0.08); border-color: rgba(143, 167, 255, 0.45); }
body.no-notes .wf-note { display: none; }
.wf-box { width: 100%; height: 100%; border: 1.5px dashed var(--line); display: grid; place-items: center; text-align: center; padding: 24px;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(17,17,17,0.035) 14px 15px), var(--paper-2); }
.wf-box span { font-family: var(--mono); font-size: 12px; color: var(--mute); max-width: 260px; }
.wf-box--dark { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.05) 14px 15px), #1a1a1a; border-color: #333; }
.wf-box--dark span { color: #9a958c; }

/* ---------- GATE ---------- */
#gate { position: fixed; inset: 0; z-index: 200; background: var(--paper); display: grid; place-items: center; }
.gate__inner { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.gate__logo { width: 150px; mix-blend-mode: multiply; }
.lock { position: relative; width: 220px; height: 220px; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.lock__svg { width: 100%; height: 100%; overflow: visible; }
.lock__track { fill: none; stroke: var(--line); stroke-width: 2; }
.lock__progress { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 100px 100px; stroke-dasharray: 540.35; stroke-dashoffset: 540.35; }
.lock__face { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.lock__mark, .lock__hub { fill: var(--ink); }
.lock__dial { transform-origin: 100px 100px; }
.lock__pin { fill: var(--paper); stroke: var(--ink); stroke-width: 2; transition: fill 0.15s; }
.lock__pin.is-set { fill: var(--red); stroke: var(--red); }
.lock__label { position: absolute; bottom: -42px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.gate__quiet { margin-top: 30px; font-family: var(--mono); font-size: 12px; color: var(--mute); text-decoration: underline; text-underline-offset: 4px; }
.gate__note { position: absolute; left: var(--gutter); bottom: 20px; }

/* ---------- CLAW TRANSITION ---------- */
#wipe { position: fixed; inset: 0; z-index: 300; pointer-events: none; visibility: hidden; }
#wipe svg { width: 100%; height: 100%; }
.wipe__bleed { fill: var(--red); opacity: 0; }
.claw__cut { fill: var(--red); }
.claw__shade { fill: #000; opacity: 0.45; }
.claw__core { fill: #4a0606; opacity: 0.4; }

/* ---------- CURSOR ---------- */
#cursor { position: fixed; top: 0; left: 0; z-index: 250; pointer-events: none; mix-blend-mode: difference; }
.cursor__dot, .cursor__ring { position: fixed; top: 0; left: 0; border-radius: 50%; }
/* the pupil: a slit in the dark that dilates over anything worth looking at */
.cursor__dot { width: 4px; height: 18px; background: #f3f0ea; transition: width 0.22s, height 0.22s; }
body.cursor-link .cursor__dot { width: 15px; height: 15px; }
.cursor__ring { width: 36px; height: 36px; border: 1.5px solid #f3f0ea; transition: width 0.25s, height 0.25s, opacity 0.25s; }
body.cursor-link .cursor__ring { width: 64px; height: 64px; }
body.cursor-lens .cursor__ring, body.cursor-lens .cursor__dot { opacity: 0; }
@media (hover: none), (pointer: coarse) { #cursor { display: none; } }

/* ---------- TRAIL + SCENE INDEX ---------- */
#trail { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#trail svg { width: 13px; height: 13px; fill: var(--ink); opacity: 0.12; transform: rotate(180deg); transition: opacity 0.35s, transform 0.35s; }
#trail svg:nth-child(odd) { margin-left: 9px; }
#trail svg.on { opacity: 0.75; transform: rotate(180deg) scale(1.08); }
#sceneIdx { position: fixed; left: calc(var(--gutter) - 4px); top: 50%; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; z-index: 60; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); display: flex; gap: 12px; pointer-events: none; white-space: nowrap; }
.sceneIdx__n { color: var(--red); }
@media (max-width: 700px) { #trail { right: 4px; gap: 4px; } #trail svg { width: 9px; height: 9px; } #sceneIdx { display: none; } }
.idle-paw { position: fixed; width: 30px; height: 30px; fill: var(--ink); pointer-events: none; z-index: 80; opacity: 0; }

/* ---------- HEADER ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--paper) 80%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.hdr__logo img { height: 46px; mix-blend-mode: multiply; display: block; }
[data-theme="ink"] .hdr__logo img, [data-theme="ink"] .gate__logo { filter: invert(1); mix-blend-mode: screen; }
.hdr__nav { display: flex; gap: 30px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.hdr__nav a { position: relative; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.3s; }
.hdr__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr__right { display: flex; gap: 18px; align-items: center; }
.hdr__settings { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.hdr .btn { padding: 10px 18px; font-size: 14px; }
.settings { position: absolute; top: 74px; right: var(--gutter); width: 270px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 14px; padding: 16px; box-shadow: 6px 6px 0 var(--ink); }
.settings__title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.settings__row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.settings__row input { accent-color: var(--red); width: 18px; height: 18px; }
.settings__hint { font-family: var(--mono); font-size: 10.5px; color: var(--mute); margin-top: 8px; }
@media (max-width: 860px) { .hdr__nav { display: none; } .hdr__logo img { height: 40px; } }

/* ---------- STAGE ---------- */
#stage { position: fixed; inset: 0; overflow: hidden; }
#ink, #world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ink { z-index: 0; }
#bg { position: absolute; inset: 0; z-index: 1; --cr: 0%; --cx: 50%; --cy: 50%; clip-path: circle(var(--cr) at var(--cx) var(--cy)); pointer-events: none;
  /* the desk at night: a warm lamp from the top left, cooler shadow toward the edges */
  background:
    radial-gradient(ellipse 70% 60% at 16% 6%, rgba(255, 205, 140, 0.34), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 55%, var(--paper), color-mix(in srgb, var(--paper) 82%, #3a3f66) 130%); }
#world { z-index: 2; pointer-events: none; }
.scene { position: absolute; inset: 0; z-index: 3; padding: 110px calc(var(--gutter) + 40px) 70px; pointer-events: none; }
.scene a, .scene button { pointer-events: auto; }

/* ---------- HERO ---------- */
.scene--hero { display: flex; flex-direction: column; justify-content: center; z-index: auto; } /* no stacking context: the title blends with the ink */
.hero__content { position: relative; max-width: 1200px; }
.hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 8.4vw, 140px); line-height: 0.93; letter-spacing: -0.015em; color: #f3f0ea; mix-blend-mode: difference; }
.hero__title .line { display: block; }
.underlined { position: relative; font-style: italic; white-space: nowrap; }
.underlined svg { position: absolute; left: -2%; bottom: -0.12em; width: 104%; height: 0.32em; overflow: visible; }
.underlined path { fill: none; stroke: var(--red); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; filter: drop-shadow(0 0 6px rgba(181, 40, 28, 0.45)); }
.hero__sub { max-width: 520px; margin-top: 28px; font-size: 19px; color: #f3f0ea; mix-blend-mode: difference; }
.hero__ctas { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.scroll-cue { position: absolute; left: calc(var(--gutter) + 40px); bottom: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; display: flex; gap: 12px; align-items: center; color: #f3f0ea; mix-blend-mode: difference; }
.scroll-cue__line { width: 60px; height: 1px; background: currentColor; transform-origin: left; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 100% { transform: scaleX(0); transform-origin: right; } }
.scene--hero .wf-note--right { bottom: 26px; }

/* ---------- NIGHT VISION ---------- */
.scene--nv { color: #efeae1; }
.nv__head { position: relative; z-index: 2; max-width: 620px; }
.nv__sub { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 20px; color: #9a958c; }
.nv__stat { margin-top: 22px; font-size: 17px; color: #c9c4ba; }
.nv__stat strong { color: #e2554a; font-family: var(--serif); font-size: 34px; font-weight: 400; margin-right: 6px; }
.nv__stat .src { font-family: var(--mono); font-size: 11px; color: #6d6a63; margin-left: 8px; }
.nv__field { position: absolute; inset: 0; }
.nv__visible .clue { position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%; background: #ffd9a6; box-shadow: 0 0 10px 3px rgba(255, 205, 140, 0.55), 0 0 30px 8px rgba(255, 205, 140, 0.18); animation: pulse 3.2s ease-in-out infinite; }
.nv__visible .clue:nth-child(2n) { animation-delay: -1.1s; } .nv__visible .clue:nth-child(3n) { animation-delay: -2.2s; }
@keyframes pulse { 50% { opacity: 0.35; transform: translateY(-6px); } }
.nv__hidden { position: absolute; inset: 0; --lx: 50%; --ly: 50%; --lr: 170px;
  -webkit-mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 55%, transparent 100%);
          mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 55%, transparent 100%);
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px), rgba(181, 40, 28, 0.07); }
.culprit { position: absolute; left: var(--x); top: var(--y); transform: translate(-6px, -6px); display: flex; flex-direction: column; gap: 4px; max-width: 260px; }
.culprit b { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.8vw, 40px); line-height: 1; color: #f3f0ea; }
.culprit span { font-family: var(--mono); font-size: 12.5px; color: #e2554a; }
.nv__lens { position: fixed; left: 0; top: 0; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(243, 240, 234, 0.3); box-shadow: inset 0 0 60px rgba(181, 40, 28, 0.25), 0 0 60px rgba(255, 205, 140, 0.12); will-change: transform; }
.nv__lens::before, .nv__lens::after { content: ""; position: absolute; background: rgba(243, 240, 234, 0.22); }
.nv__lens::before { left: 50%; top: 18px; bottom: 18px; width: 1px; }
.nv__lens::after { top: 50%; left: 18px; right: 18px; height: 1px; }

/* ---------- NINE LIVES ---------- */
.lives__title { max-width: 820px; }
.lives__stage { position: absolute; left: 48%; right: calc(var(--gutter) + 50px); top: 30%; bottom: 20%; }
.life { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; }
.life__n { display: none; }
.life h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.2vw, 64px); line-height: 1; margin-bottom: 18px; }
.life p { font-size: clamp(16px, 1.4vw, 21px); max-width: 520px; color: var(--ink-2); }
.lives__paws { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); display: flex; gap: 14px; }
.lives__paws svg { width: 24px; height: 24px; fill: var(--ink); opacity: 0.12; transition: opacity 0.3s, fill 0.3s; }
.lives__paws svg:nth-child(even) { transform: translateY(-8px); }
.lives__paws svg.on { opacity: 1; fill: var(--red); }

/* ---------- JOBS ---------- */
.job { position: absolute; left: 52%; right: calc(var(--gutter) + 50px); top: 18%; bottom: 14%; display: flex; flex-direction: column; justify-content: center; opacity: 0; }
.job__media { display: none; }
.job__meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.job__title { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 5.6vw, 88px); line-height: 1; margin: 8px 0 14px; }
.job__line { font-size: 18px; max-width: 520px; }
.job__fails { list-style: none; margin: 22px 0; display: grid; gap: 12px; }
.job__fails li { padding-left: 24px; position: relative; font-size: 15px; }
.job__fails li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 11px; height: 11px; border-radius: 50%; background: var(--red); }
.job__fails s { display: block; color: var(--mute); font-family: var(--mono); font-size: 11.5px; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.job__stack { font-family: var(--mono); font-size: 11.5px; color: var(--mute); border-top: 1px dashed var(--line); padding-top: 12px; }
.jobs__count { position: absolute; right: calc(var(--gutter) + 50px); bottom: 26px; font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: 0.12em; }
.jobs__count span { color: var(--red); }

/* ---------- OPERATIONS ---------- */
.ops__head { max-width: 46%; }
.ops__hunt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--mute); margin-top: 20px; text-transform: uppercase; }
.ops__hunt b { color: var(--red); font-weight: 500; }
.ops__active { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 22px; }
.opa__n { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.opa__name { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.02; margin: 6px 0 12px; }
.opa__desc { font-size: 18px; max-width: 520px; color: var(--ink-2); }
.opa__desc .rw { position: relative; display: inline-block; }
.opa__desc .rw::after { content: ""; position: absolute; left: -1px; right: -1px; top: 12%; bottom: 8%; background: var(--ink); transform-origin: right; transform: scaleX(var(--r, 1)); }
.ops__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- MASTERMIND ---------- */
.mm__photo { display: none; }
.mm__flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 150; }
.mm__body { position: absolute; left: 52%; right: calc(var(--gutter) + 50px); top: 18%; bottom: 14%; display: flex; flex-direction: column; justify-content: center; }
.mm__bio { font-size: 18px; max-width: 520px; margin: 18px 0 24px; color: var(--ink-2); }
.mm__sheet { list-style: none; border-top: 1px solid var(--line); }
.mm__sheet li { display: grid; grid-template-columns: 120px 1fr; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.mm__sheet span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); padding-top: 3px; }

/* ---------- CASE FILES ---------- */
.files__grid { position: absolute; left: calc(var(--gutter) + 40px); right: calc(var(--gutter) + 40px); bottom: 15%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.file { position: relative; background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 0 12px 12px 12px; padding: 30px 24px 22px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; transition: box-shadow 0.3s; pointer-events: auto; }
.file:hover { box-shadow: 8px 8px 0 var(--ink); }
.file__tab { position: absolute; top: -27px; left: -1.5px; background: var(--paper-2); border: 1.5px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 4px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.file h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.08; }
.file p { font-family: var(--mono); font-size: 12px; color: var(--mute); }

/* ---------- EXIT ---------- */
.scene--exit { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.exit__paws { position: fixed; inset: 0; pointer-events: none; }
.exit__paws svg { position: absolute; width: 30px; height: 30px; fill: var(--ink); opacity: 0; transition: opacity 0.25s; }
.exit__title { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 12vw, 200px); line-height: 0.9; }
.exit__sub { font-size: 20px; margin: 20px 0 36px; color: var(--ink-2); }
.exit__ctas { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; z-index: 2; }
.exit__email { font-family: var(--mono); font-size: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.exit__email small { color: var(--red); margin-left: 6px; }
.next { margin-top: 60px; width: min(420px, 80vw); }
.next__label, .next__dest { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.next__bar { height: 2px; background: var(--line); margin: 14px 0; overflow: hidden; }
.next__fill { height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.ftr { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 20px; padding: 18px calc(var(--gutter) + 40px); border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--mute); }
.scene--exit .wf-note--right { bottom: 64px; }

/* ---------- KEYCAT + TOAST ---------- */
#keycat { position: fixed; left: calc(var(--gutter) + 40px); bottom: 20px; z-index: 70; display: flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
#keycat.on { opacity: 0.8; }
#keycat svg { width: 16px; height: 16px; fill: var(--ink); }
.keycat__text::after { content: "▍"; animation: blink 0.9s steps(1) infinite; color: var(--red); }
@keyframes blink { 50% { opacity: 0; } }
#toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 30px); background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12px; padding: 10px 16px; border-radius: 999px; opacity: 0; transition: opacity 0.3s, transform 0.3s; z-index: 400; pointer-events: none; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- MOBILE (draft only: DOM stacks low, 3D stays above) ---------- */
@media (max-width: 860px) {
  .lives__stage, .job, .mm__body { left: var(--gutter); right: var(--gutter); top: auto; bottom: 90px; height: 42%; }
  .ops__head { max-width: 100%; }
  .files__grid { grid-template-columns: 1fr; gap: 34px; bottom: 80px; }
  .file { min-height: 0; }
}

/* ---------- REDUCED MOTION: a normal scrolling page ---------- */
html:has(body.flow), body.flow { overflow: auto; height: auto; }
.flow #stage { position: static; }
.flow #ink, .flow #world, .flow #bg, .flow .nv__lens, .flow #trail, .flow #sceneIdx { display: none; }
.flow .scene { position: relative; inset: auto; min-height: 100vh; }
.flow .scene--nv { background: #0a0a0a; }
.flow .nv__hidden { -webkit-mask-image: none; mask-image: none; }
.flow .life, .flow .job, .flow .file { position: relative; opacity: 1; inset: auto; margin-bottom: 40px; }
.flow .lives__stage, .flow .job, .flow .mm__body, .flow .files__grid { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
.flow .life__n { display: block; font-family: var(--serif); font-size: 64px; color: var(--red); }
.flow .ops__list { position: static; width: auto; height: auto; clip: auto; white-space: normal; }
.flow .underlined path { stroke-dashoffset: 0; }



/* =================== NIGHT FIRST =================== */
.hdr__logo { display: flex; align-items: center; gap: 10px; }
.hdr__logo img { height: 40px; mix-blend-mode: normal; transform-origin: center; will-change: transform; }
[data-theme="ink"] .hdr__logo img, [data-theme="ink"] .gate__logo { filter: none; mix-blend-mode: normal; }
.gate__logo { mix-blend-mode: normal; width: 140px; }
.hdr__logo span { font-family: var(--serif); font-size: 17px; letter-spacing: 0.02em; }
.hero__title { color: var(--ink); mix-blend-mode: normal; max-width: 56vw; }
.hero__title .ch { display: inline-block; will-change: transform; transform-origin: center; }
.hero__sub { color: var(--ink-2); mix-blend-mode: normal; }
[data-theme="ink"] .btn--ink { background: var(--ink); color: var(--paper); }
[data-theme="ink"] #bg { background:
    radial-gradient(ellipse 70% 60% at 16% 6%, rgba(255, 190, 120, 0.16), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 55%, var(--paper), #06060a 130%); }
[data-theme="ink"] .wf-box { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.04) 14px 15px), var(--paper-2); }
[data-theme="ink"] .nv__lens { box-shadow: inset 0 0 60px rgba(181, 40, 28, 0.3), 0 0 60px rgba(255, 205, 140, 0.1); }
.wf-note, #sceneIdx, .scroll-cue, .lock__label, .settings__hint { display: none !important; }
#stage { will-change: transform; transform-origin: center; }
.next { margin-top: 48px; width: min(320px, 70vw); }
.next__bar { margin: 0; }
.jobs__count { font-size: 11px; }

/* =================== TYPE: modern and thin =================== */
:root {
  --serif: "Geist", system-ui, sans-serif;           /* display, set thin */
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --accent: "Instrument Serif", Georgia, serif;      /* italic accents only */
}
body { font-weight: 300; letter-spacing: -0.005em; }
.h2, .hero__title, .life h3, .job__title, .opa__name, .exit__title, .file h3, .culprit b, .hdr__logo span {
  font-weight: 200; letter-spacing: -0.045em;
}
.hero__title { line-height: 0.95; }
.exit__title { letter-spacing: -0.06em; }
.nv__stat strong { font-family: var(--sans); font-weight: 200; letter-spacing: -0.04em; }
.h2 em, .hero__title em, .lives__title em { font-family: var(--accent); font-weight: 400; letter-spacing: -0.01em; }
.kicker, .hdr__nav, .hdr__settings, .job__meta, .job__stack, .ops__hunt, .mm__sheet span, .file__tab, .file p, .exit__email, .ftr, .nv__sub, .culprit span, .gate__quiet, #toast { font-weight: 300; }
.hero__sub, .job__line, .opa__desc, .mm__bio, .life p, .exit__sub { font-weight: 300; }
.hdr__logo span { font-size: 16px; letter-spacing: -0.01em; font-weight: 400; }

/* =================== PILLS =================== */
.btn.pill {
  --pill-h: 46px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--pill-h); padding: 0 22px 0 26px; min-width: 120px; border: 0; border-radius: 999px;
  font-family: var(--sans); font-weight: 400; font-size: 14.5px; line-height: 1; letter-spacing: -0.005em;
  color: var(--ink); background: rgba(15, 14, 18, 0.18); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: background-color 0.4s cubic-bezier(.16, 1, .3, 1), color 0.4s cubic-bezier(.16, 1, .3, 1);
}
/* 1. the orbiting stroke */
.btn.pill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--pill-angle, 90deg), #2a0d12 0%, #e3263f 4%, #f6eeee 31%, #f6eeee 60%, #8d8a86 85%, #e3263f 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
}
/* 2. waves inside */
.pill__fx { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; }
.pill__waves { display: block; width: 100%; height: 100%; filter: blur(6px); transform: scale(1.2); pointer-events: none; }
/* 4. the text roll */
.pill__label { position: relative; display: flex; flex-direction: column; gap: 0.1em; height: 1em; overflow: hidden; }
.pill__sub { display: block; white-space: nowrap; transition: transform 0.5s cubic-bezier(.16, 1, .3, 1); }
.pill:hover .pill__sub:nth-child(1) { transform: translateY(-120%); }
.pill:hover .pill__sub:nth-child(2) { transform: translateY(-110%); }
.pill__icon { display: grid; place-items: center; width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.5s cubic-bezier(.16, 1, .3, 1); }
.pill__icon svg { width: 100%; height: 100%; }
.pill:hover .pill__icon { transform: rotate(45deg); }
/* 5. the glow underneath */
.pill__glow { position: absolute; left: 0; bottom: 0; z-index: -2; width: 100%; height: 50%; border-radius: 999px; background: var(--red);
  filter: blur(20px); opacity: 0; transform: scale(0.6); visibility: hidden; transition: opacity 0.4s, transform 0.4s, visibility 0.4s; }
.pill:hover .pill__glow { opacity: 1; transform: scale(1); visibility: visible; }
.pill--glass .pill__glow { background: #6f1a22; }
.pill--red { color: #fff4f2; background: rgba(120, 14, 26, 0.32); }
.pill--red:hover { background: rgba(150, 18, 32, 0.45); }
.pill--glass:hover { background: rgba(239, 234, 225, 0.06); }
.btn--big.pill { --pill-h: 62px; padding: 0 30px 0 36px; font-size: 18px; }
.hdr .btn.pill { --pill-h: 38px; padding: 0 16px 0 20px; font-size: 14px; }
[data-theme="paper"] .pill--glass { background: rgba(243, 240, 234, 0.4); }

/* =================== PAW CURSOR =================== */
#cursor { mix-blend-mode: normal; }
.cursor__paw { position: fixed; top: 0; left: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; will-change: transform; }
.cursor__paw svg { display: block; width: 100%; height: 100%; fill: var(--ink); transition: fill 0.25s; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
body.cursor-link .cursor__paw svg { fill: var(--red); }
body.cursor-lens .cursor__paw { opacity: 0; }
.kicker { font-weight: 400; letter-spacing: 0.2em; color: #d8443a; }
.cursor__paw { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* =================== NAV JUMP: lens iris + glitch cut =================== */
#veil { position: fixed; inset: 0; z-index: 180; pointer-events: none; visibility: hidden; --r: 150vmax; --vx: 50%; --vy: 50%;
  background: radial-gradient(circle at var(--vx) var(--vy), transparent calc(var(--r) * 0.92), rgba(6, 5, 8, 0.97) var(--r)); }
.veil__ring { position: absolute; left: var(--vx); top: var(--vy); width: calc(var(--r) * 2); height: calc(var(--r) * 2); transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(227, 38, 63, 0.75); box-shadow: 0 0 24px rgba(227, 38, 63, 0.35), inset 0 0 24px rgba(227, 38, 63, 0.2); }
body.jump-out .scene { animation: cutOut 0.6s cubic-bezier(.7, 0, .84, 0) forwards; }
body.jump-in .scene { animation: cutIn 0.9s cubic-bezier(.16, 1, .3, 1) both; }
body.jump-out #world, body.jump-out #ink { animation: camOut 0.62s cubic-bezier(.7, 0, .84, 0) forwards; }
body.jump-in #world, body.jump-in #ink { animation: camIn 0.95s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes cutOut {
  0% { filter: none; transform: none; text-shadow: none; clip-path: inset(0 0 0 0); }
  25% { transform: translateX(-5px) skewX(-3deg); text-shadow: 3px 0 rgba(227, 38, 63, 0.9), -3px 0 rgba(90, 200, 255, 0.7); }
  55% { transform: translateX(7px) skewX(2deg); clip-path: inset(8% 0 34% 0); text-shadow: -6px 0 rgba(227, 38, 63, 0.9), 6px 0 rgba(90, 200, 255, 0.7); }
  80% { clip-path: inset(30% 0 52% 0); filter: blur(3px); }
  100% { opacity: 0; transform: translateY(-14px) scale(1.02); filter: blur(10px); clip-path: inset(49% 0 49% 0); text-shadow: 12px 0 rgba(227, 38, 63, 0.9), -12px 0 rgba(90, 200, 255, 0.7); }
}
@keyframes cutIn {
  0% { opacity: 0; transform: translateY(16px) scale(0.985); filter: blur(10px); clip-path: inset(49% 0 49% 0); text-shadow: -12px 0 rgba(227, 38, 63, 0.9), 12px 0 rgba(90, 200, 255, 0.7); }
  35% { opacity: 1; clip-path: inset(12% 0 18% 0); filter: blur(2px); text-shadow: 5px 0 rgba(227, 38, 63, 0.8), -5px 0 rgba(90, 200, 255, 0.6); }
  60% { transform: translateX(-3px) skewX(-1.5deg); clip-path: inset(0 0 0 0); text-shadow: -2px 0 rgba(227, 38, 63, 0.6), 2px 0 rgba(90, 200, 255, 0.4); }
  100% { transform: none; filter: none; text-shadow: none; clip-path: inset(0 0 0 0); }
}
@keyframes camOut { to { transform: scale(1.08); filter: blur(8px) brightness(0.45); } }
@keyframes camIn { from { transform: scale(0.94); filter: blur(10px) brightness(0.4); } to { transform: none; filter: none; } }
.mm__img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.3); }

/* =================== THE BRIEF (contact form) =================== */
.exit__title { font-size: clamp(48px, 7.4vw, 120px); }
.exit__sub { margin: 14px 0 30px; }
.scene input, .scene textarea, .scene label { pointer-events: auto; }
.brief { position: relative; z-index: 2; width: min(720px, 86vw); display: grid; gap: 22px; text-align: left; }
.brief__row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.field { display: grid; gap: 8px; }
.field__label { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); transition: color 0.3s; }
.field:focus-within .field__label { color: #d8443a; }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 6px 0 10px;
  font-family: var(--sans); font-weight: 300; font-size: 19px; color: var(--ink); outline: none; resize: none; caret-color: #e3263f;
  transition: border-color 0.3s;
}
.field textarea { min-height: 84px; line-height: 1.45; }
.field input:focus, .field textarea:focus { border-bottom-color: #e3263f; }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 9999s; }
.brief__send { justify-self: center; margin-top: 6px; }
.brief__check { justify-self: center; height: 0; margin: -11px 0; overflow: hidden; line-height: 0; }
.brief__check.is-open { height: auto; margin: 0; overflow: visible; }
.brief__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.brief.is-sending { opacity: 0.6; pointer-events: none; }
.brief__done { font-family: var(--accent); font-style: italic; font-size: clamp(24px, 2.6vw, 36px); text-align: center; color: var(--ink); }
.job__reveal img { display: block; width: 100%; height: auto; }
.job__soon { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.ftr { font-size: 10.5px; }
@media (max-width: 700px) { .brief__row { grid-template-columns: 1fr; gap: 18px; } .ftr { flex-direction: column; align-items: center; gap: 4px; text-align: center; } }

/* =================== VIVID: bright, airy, good vibes =================== */
[data-theme="ink"] {
  --paper: #f7f2ff;
  --paper-2: #ece2fb;
  --ink: #2a1647;
  --ink-2: #4d3b6c;
  --mute: #7d6f99;
  --red: #e2264d;
  --line: rgba(42, 22, 71, 0.14);
}
.kicker { color: #e2264d; }
.hdr { background: color-mix(in srgb, #f7f2ff 72%, transparent); }
.btn.pill { color: var(--ink); }
.btn.pill::before {
  background: linear-gradient(var(--pill-angle, 90deg), #c9b8ff 0%, #e2264d 4%, #ffffff 31%, #ffffff 60%, #b9a8e8 85%, #e2264d 100%);
}
.btn.pill.pill--red { color: #fff; background: linear-gradient(120deg, #ff4d74, #e2264d); }
.btn.pill.pill--red:hover { background: linear-gradient(120deg, #ff6a8a, #ea3158); }
.btn.pill.pill--glass { background: rgba(255, 255, 255, 0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn.pill.pill--glass:hover { background: rgba(255, 255, 255, 0.6); }
.pill--glass .pill__glow { background: #b48cff; }
.underlined path { filter: drop-shadow(0 0 6px rgba(226, 38, 77, 0.35)); }
.hero__sub { color: var(--ink-2); }
.hero__title { text-shadow: 0 0 40px rgba(255, 255, 255, 0.55); }
.cursor__paw svg { fill: #fff; filter: drop-shadow(0 1px 3px rgba(42, 22, 71, 0.5)); }   /* vivid: a white paw, outlined by its shadow */
body.cursor-link .cursor__paw svg { fill: #e2264d; }
/* vivid: the prints you leave (click, idle) are black, like the cats in the meadow */
.idle-paw { fill: #0c0910; }
/* the underline hangs below the word: give its reveal mask room so it is not clipped */
[data-split] .w:has(.underlined) { padding-bottom: 0.34em; margin-bottom: -0.26em; }

/* =================== VIVID: Our Platforms, on the balcony =================== */
@media (min-width: 861px) {
  .job { left: 55%; right: calc(var(--gutter) + 60px); top: 13%; bottom: 9%; }
}
.jobs__kicker { color: var(--red); }
.job__meta { color: var(--ink-2); letter-spacing: 0.16em; font-size: 11.5px; }
.job__title { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(60px, 7vw, 120px);
  letter-spacing: -0.012em; line-height: 0.92; margin: 12px 0 22px; padding-bottom: 20px; position: relative; color: var(--ink);
  text-shadow: 0 0 36px rgba(255, 255, 255, 0.6); }
.job__title::after { content: ""; position: absolute; left: 3px; bottom: 0; width: 48px; height: 3px; border-radius: 2px; background: var(--red);
  box-shadow: 0 0 10px rgba(226, 38, 77, 0.45); }
.job__line { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 40ch; }
.job__fails { margin: 26px 0 16px; gap: 0; max-width: 560px; }
.job__fails li { display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: center; padding: 12px 0;
  border-bottom: 1px dashed rgba(42, 22, 71, 0.16); font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.job__fails li::before { display: none; }
.feat__ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(120, 60, 90, 0.14), inset 0 0 0 1px rgba(226, 38, 77, 0.2); }
.feat__ico svg { width: 21px; height: 21px; fill: none; stroke: var(--red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.job__fails s { font-size: 10.5px; margin-bottom: 3px; letter-spacing: 0.04em; color: var(--mute); }
.job__stack { border-top: none; padding-top: 6px; color: var(--ink-2); font-size: 11.5px; letter-spacing: 0.06em; line-height: 1.8; max-width: 560px; }
.jobs__count { color: var(--ink-2); }

/* the section label sits on a frosted chip so it reads over the blossoms */
.jobs__kicker { display: inline-block; width: auto; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(120, 60, 90, 0.12); }
.job__stack { color: var(--ink); text-shadow: 0 0 10px rgba(255, 255, 255, 0.95), 0 0 2px rgba(255, 255, 255, 0.9); }
.job__fails s { color: #b4475f; }

/* the play button over the films on the dossier prints: a quiet, translucent disc */
.film-btn { position: fixed; z-index: 55; display: none; padding: 0; border: 0; background: transparent; cursor: none; }
.film-btn.is-on { display: grid; place-items: center; }
.film-btn__icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), opacity 0.25s, background 0.25s; }
.film-btn__icon svg { width: 26px; height: 26px; fill: rgba(255, 255, 255, 0.92); }
.film-btn .i-pause { display: none; }
.film-btn:hover .film-btn__icon { transform: scale(1.06); background: rgba(255, 255, 255, 0.26); }
.film-btn.is-playing .film-btn__icon { opacity: 0; transform: scale(0.85); }
.film-btn.is-playing:hover .film-btn__icon { opacity: 1; transform: scale(1); }
.film-btn.is-playing .i-play { display: none; }
.film-btn.is-playing .i-pause { display: block; }

/* =================== VIVID: platform stories in three beats =================== */
.job__title { font-size: clamp(52px, 5.6vw, 96px); margin-bottom: 14px; padding-bottom: 16px; }
.job__nav { display: flex; gap: 18px; margin: 0 0 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.job__nav span { position: relative; padding-bottom: 6px; transition: color 0.3s; }
.job__nav span::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(.2, .8, .2, 1); }
.job__nav span.on { color: var(--ink); }
.job__nav span.on::after { transform: scaleX(1); }
.beats { display: grid; max-width: 560px; }
.beat { grid-area: 1 / 1; will-change: opacity, transform; }
.beat p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 10px; max-width: 48ch; text-shadow: 0 0 18px rgba(255, 255, 255, 0.7); }
.beat p b { color: var(--ink); font-weight: 500; }
.beat .beat__head { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.15; color: var(--ink); margin-bottom: 14px; max-width: 26ch; }
.beat .beat__tag { margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--red); color: var(--ink); font-weight: 500; }
.beat__kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin: 0 0 6px; }
.beat .job__fails { margin: 4px 0 12px; }
.beat .job__fails li { align-items: start; }
.feat__txt { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.feat__title { display: block; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin: 2px 0 4px; }
.beat .job__stack { margin: 0 0 14px; }
.beat__cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 14px; color: var(--ink);
  background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(42, 22, 71, 0.16);
  text-decoration: none; transition: background 0.25s, color 0.25s; }
.beat__cta:hover { background: rgba(255, 255, 255, 0.78); color: var(--red); }
.beat__cta--soon { color: var(--mute); }
.beat .beat__close { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.2; color: var(--ink); margin-top: 16px; max-width: 30ch; }
.flow .beats { display: block; }
.flow .beat { opacity: 1 !important; transform: none !important; margin-bottom: 28px; }
.flow .job__nav { display: none; }

/* the platform stories carry more text now: a slightly tighter reading size */
.beat p { font-size: 14.5px; line-height: 1.55; margin-bottom: 8px; max-width: 52ch; }
.feat__txt { font-size: 14px; }
.beat .job__fails li { padding: 10px 0; }
.beat__cta { margin-top: 6px; }
/* the platforms that have a brand show their own logo instead of a typeset name */
.job__title--logo { line-height: 0; padding-bottom: 18px; margin-top: 14px; }
.job__logo { display: block; height: clamp(40px, 4.2vw, 68px); width: auto; filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.55)); }
/* the case file can carry a subtitle; keep it a step smaller than the overview headline */
.beat--case .beat__head { font-size: clamp(20px, 1.6vw, 26px); margin-bottom: 10px; }
/* the way to the platform stays in view through every beat */
.job__cta { margin-top: 18px; }
.job__cta .beat__cta { margin-top: 0; }

/* =================== VIVID: Night Vision culprits and their case files =================== */
.culprit { max-width: 280px; gap: 6px; }
.culprit i { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: #9a958c; }
.culprit b { font-size: clamp(22px, 2.2vw, 32px); }
.culprit span { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 16px; line-height: 1.3; color: #f0b7ae; }
.culprit--left { transform: translate(calc(-100% + 6px), -6px); text-align: right; align-items: flex-end; }
.nv__cases { position: absolute; left: calc(var(--gutter) + 40px); top: 310px; width: min(440px, 36vw); z-index: 2; display: grid; }
.nv__hint { grid-area: 1 / 1; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #6d6a63; transition: opacity 0.4s; }
.nv__cases.has-case .nv__hint { opacity: 0; }
.nv__case { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.45s ease, transform 0.55s cubic-bezier(.2, .8, .2, 1);
  border-left: 1px solid rgba(226, 85, 74, 0.55); padding-left: 18px; }
.nv__case.on { opacity: 1; transform: none; }
.nv__case p { font-size: 14.5px; line-height: 1.55; color: #c9c4ba; margin: 0 0 9px; }
.nv__case .nv__case-n { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #e2554a; margin-bottom: 10px; }
.nv__case .nv__case-q { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.2; color: #f3f0ea; margin-bottom: 14px; }
.nv__case .nv__case-t { margin-top: 14px; color: #efeae1; }
.nv__case .nv__case-t b { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #e2554a; margin-right: 4px; }
.flow .nv__cases { position: relative; left: auto; top: auto; width: auto; display: block; }
.flow .nv__case { opacity: 1; transform: none; margin-bottom: 26px; }
.flow .nv__hint { display: none; }
@media (max-width: 860px) { .nv__cases { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: 70px; } }
/* the panel sits in the head column under the stat; the lens text is centred on its light so it stays inside the lens */
.nv__cases { position: relative; left: auto; top: auto; width: min(460px, 100%); margin-top: 34px; }
.culprit, .culprit--left { transform: translate(-50%, -38%); text-align: center; align-items: center; max-width: 250px; }
.culprit b { font-size: clamp(22px, 1.9vw, 30px); }
.culprit span { font-size: 15px; }
@media (max-width: 860px) { .nv__cases { left: auto; right: auto; bottom: auto; } }
/* the lens reveals a wider clear core, and the names stay narrow enough to sit inside it */
.nv__hidden { -webkit-mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 72%, transparent 100%);
              mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 72%, transparent 100%); }
.culprit, .culprit--left { max-width: 220px; }
.culprit b { font-size: clamp(20px, 1.6vw, 26px); }
.culprit span { font-size: 14px; }

/* =================== THE VAULT (entry) =================== */
#gate.vault-pending { background: #07060a; --vault-vignette: 1; }
#gate.vault-pending .gate__logo, #gate.vault-pending .lock { display: none; }
#gate.vault-ready { background: transparent; }
.vault__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.vault__canvas:active { cursor: grabbing; }
#gate.vault-pending::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--vault-vignette, 1);
  background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 55%, rgba(0, 0, 0, 0.72) 100%); }
#gate.vault-pending .gate__inner { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; gap: 14px; pointer-events: none; }
#gate.vault-pending .gate__inner > * { pointer-events: auto; }
.vault__hint { display: none; }
#gate.vault-ready .vault__hint { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #ffc21a;
  text-shadow: 0 0 18px rgba(255, 194, 26, 0.45); animation: vaultHint 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes vaultHint { 50% { opacity: 0.45; } }
#gate.vault-pending .gate__quiet { margin-top: 0; color: rgba(239, 234, 225, 0.55); }
#gate.vault-touched .vault__hint { animation: none; opacity: 0; transition: opacity 0.5s; }
#gate.vault-open .gate__inner { opacity: 0; transition: opacity 0.5s; pointer-events: none; }
#gate.vault-open .vault__canvas { cursor: default; }

/* the claws are yellow and black now */
.wipe__bleed { fill: #0b0a08; }
.claw__cut { fill: #ffc21a; }
.claw__shade { fill: #000; opacity: 0.55; }
.claw__core { fill: #120d02; opacity: 0.6; }

/* =================== VIVID: The Nine Lives Code =================== */
/* the room: lilac, with a warm lamp pooled on the deck */
[data-theme="ink"] #bg { background:
    radial-gradient(ellipse 30% 44% at 27% 63%, rgba(255, 228, 196, 0.6), transparent 72%),
    radial-gradient(ellipse 70% 60% at 16% 6%, rgba(255, 210, 160, 0.22), transparent 70%),
    radial-gradient(ellipse 95% 85% at 50% 55%, #f7f0fe 0%, #d9cbef 62%, #9c87c2 112%, #5d4a84 150%); }
.lives__head { max-width: min(1180px, 80vw); }
.lives__title { font-size: clamp(32px, 3.7vw, 60px); line-height: 1.02; max-width: none; }
.lives__sub { margin-top: 14px; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.lives__classified { position: absolute; right: calc(var(--gutter) + 40px); top: 110px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); }
.lives__stage { left: 52%; right: calc(var(--gutter) + 70px); top: 36%; bottom: 20%; }
.life .life__k, .lives__fin .life__k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin: 0 0 18px; max-width: none; }
.life .life__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.life .life__why { font-family: var(--sans); font-weight: 300; font-size: clamp(20px, 1.75vw, 28px); line-height: 1.34; letter-spacing: -0.01em; color: var(--ink); max-width: 31ch; }
.life__why em, .lives__fin-t em { font-family: var(--accent); font-style: italic; color: var(--red); font-size: 1.1em; letter-spacing: 0; line-height: 1.1; }
.lives__fin { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; }
.lives__fin-t { font-family: var(--serif); font-weight: 200; font-size: clamp(36px, 4.3vw, 68px); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); max-width: 13ch; }
.lives__fin-s { margin-top: 18px; font-size: clamp(15px, 1.15vw, 18px); color: var(--ink-2); }
.lives__hint { position: absolute; left: 52%; bottom: 15%; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.lives__arr { display: inline-block; animation: livesNudge 1.8s ease-in-out infinite; }
.lives__arr:last-child { animation-delay: 0.9s; }
@keyframes livesNudge { 50% { transform: translateX(-5px); } }
.lives__arr:last-child { animation-name: livesNudgeR; }
@keyframes livesNudgeR { 50% { transform: translateX(5px); } }
.lives__grab { position: absolute; display: none; pointer-events: auto; touch-action: none; border-radius: 18px; cursor: grab; z-index: 4; }
.lives__grab.is-drag { cursor: grabbing; }
.lives__paws { left: 52%; transform: none; bottom: 8%; gap: 6px; }
.lives__paws button { all: unset; cursor: pointer; padding: 5px; pointer-events: auto; line-height: 0; }
.lives__paws button svg { width: 22px; height: 22px; fill: var(--ink); opacity: 0.14; transition: opacity 0.35s, fill 0.35s, transform 0.35s; }
.lives__paws button:nth-child(even) svg { transform: translateY(-7px); }
.lives__paws button.seen svg { opacity: 0.45; fill: var(--red); }
.lives__paws button.on svg { opacity: 1; fill: var(--red); transform: scale(1.25); }
.lives__paws button.on:nth-child(even) svg { transform: translateY(-7px) scale(1.25); }
.lives__paws button:focus-visible { outline: 1px solid var(--red); border-radius: 50%; }
@media (max-width: 860px) {
  .lives__title { font-size: 28px; }
  .lives__sub, .lives__classified, .lives__hint { display: none; }
  .lives__stage { left: var(--gutter); right: var(--gutter); top: 64%; bottom: 64px; height: auto; }
  .life .life__why { font-size: 17px; }
  .lives__paws { left: var(--gutter); bottom: 18px; }
}
.flow .life .life__t { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-family: var(--serif); font-weight: 300; font-size: 30px; margin: 0 0 10px; }
.flow .lives__fin { position: relative; inset: auto; opacity: 1; }
.flow .lives__grab, .flow .lives__hint, .flow .lives__paws, .flow .lives__classified { display: none; }

/* =================== VIVID: the Nine Lives table (mat, case file, red thread) =================== */
.scene--lives .lives__head { max-width: min(1180px, 80vw); }
.case { position: absolute; left: 52.5%; right: calc(var(--gutter) + 46px); top: 25%; bottom: 12.5%; perspective: 1400px; }
.case__paper { position: absolute; inset: 0; border-radius: 6px; transform: rotate(0.6deg); padding: 30px 38px 26px;
  background: linear-gradient(rgba(252, 241, 218, 0.62), rgba(246, 232, 204, 0.62)), url("assets/dossier/page.webp") center 62% / 150% auto, #f3e6c9;
  box-shadow: 0 34px 60px -24px rgba(40, 18, 60, 0.55), 0 10px 22px rgba(40, 18, 60, 0.16), inset 0 0 70px rgba(150, 105, 55, 0.22); color: #2b2030; }
.case__paper::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(170, 36, 28, 0.35); border-radius: 3px; pointer-events: none; }
.case .lives__stage { position: absolute; left: 38px; right: 38px; top: 30px; bottom: 58px; }
.case .life, .case .lives__fin { position: absolute; inset: 0; display: block; opacity: 0; }
.case .case__top { margin: 0; display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid rgba(43, 32, 48, 0.35);
  font-family: "Special Elite", var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a2a22; }
.case__ref { display: inline-flex; align-items: center; gap: 10px; }
.case__pin { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c0261c; box-shadow: 0 0 0 3px rgba(192, 38, 28, 0.18); }
.case__no { display: inline-flex; align-items: center; gap: 10px; color: #5d564e; }
.case__print { width: 22px; height: 26px; fill: none; stroke: rgba(43, 32, 48, 0.45); stroke-width: 1.2; stroke-linecap: round; }
.case .life .life__k, .case .lives__fin .life__k { margin: clamp(22px, 3.2vh, 44px) 0 14px; font-size: 11.5px; color: #b3261e; }
.case .life .case__head { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3vw, 58px); line-height: 1.04; letter-spacing: -0.025em; color: #221a28; margin: 0 0 22px; max-width: 16ch; }
.case .life .life__why { font-size: clamp(16px, 1.3vw, 22px); line-height: 1.55; color: #3b3040; max-width: 44ch; font-weight: 400; letter-spacing: 0; }
.case .life__why em { font-size: 1.14em; }
.case .life .case__note { position: absolute; right: 4px; bottom: 6px; margin: 0; font-family: "Caveat", cursive; font-weight: 600; font-size: clamp(24px, 1.9vw, 34px); color: #b8231b; transform: rotate(-4deg); opacity: 0.9; }
.case__stamp { position: absolute; left: 46px; bottom: 66px; width: 92px; height: 92px; border-radius: 50%; border: 3px double rgba(179, 38, 30, 0.6); display: grid; place-content: center; text-align: center;
  transform: rotate(-14deg); color: rgba(179, 38, 30, 0.62); font-family: "Special Elite", var(--mono); text-transform: uppercase; mix-blend-mode: multiply; pointer-events: none; }
.case__stamp b { font-weight: 400; font-size: 19px; letter-spacing: 0.08em; }
.case__stamp span { font-size: 8.5px; letter-spacing: 0.14em; }
.case__foot { position: absolute; left: 38px; right: 38px; bottom: 22px; display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgba(43, 32, 48, 0.25);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #7a6f68; }
.case .lives__fin-t { font-size: clamp(32px, 3.2vw, 54px); color: #221a28; margin-top: 4px; }
.case .lives__fin-s { color: #3b3040; }
.case__closed { display: inline-block; margin-top: 26px; padding: 8px 16px; border: 3px solid rgba(179, 38, 30, 0.7); color: rgba(179, 38, 30, 0.75); font-family: "Special Elite", var(--mono);
  font-size: 22px; letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-6deg); mix-blend-mode: multiply; }
.lives__thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; opacity: 0; z-index: 2; }
.lives__thread path { fill: none; stroke: #c0261c; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 3px 2px rgba(60, 20, 40, 0.3)); }
.lives__tack { fill: #c0261c; stroke: #fff3ea; stroke-width: 1.5; filter: drop-shadow(0 2px 2px rgba(60, 20, 40, 0.4)); transition: opacity 0.2s; }
.lives__nav { position: absolute; left: calc(var(--gutter) + 40px); right: calc(var(--gutter) + 46px); bottom: 3.2%; display: flex; align-items: center; justify-content: space-between; }
.lives__nav .lives__paws { position: static; transform: none; display: flex; gap: 6px; }
.lives__step { all: unset; cursor: pointer; pointer-events: auto; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); padding: 8px 4px; transition: color 0.25s; }
.lives__step:hover { color: var(--red); }
.lives__step span { display: inline-block; transition: transform 0.25s; }
.lives__step:hover span { transform: translateX(-4px); }
.lives__step[data-step="1"]:hover span { transform: translateX(4px); }
.lives__step:focus-visible { outline: 1px solid var(--red); }
@media (max-width: 860px) {
  .case { left: var(--gutter); right: var(--gutter); top: 64%; bottom: 60px; }
  .case__paper { padding: 16px 18px; transform: none; }
  .case .lives__stage { left: 18px; right: 18px; top: 16px; bottom: 16px; }
  .case__head { font-size: 22px; margin-bottom: 8px; }
  .case .life .life__why, .case__note, .case__stamp, .case__foot, .case .life .life__k { display: none; }
  .lives__thread { display: none; }
  .lives__nav { left: var(--gutter); right: var(--gutter); bottom: 14px; }
  .lives__step { font-size: 10px; }
}
.flow .case, .flow .case__paper, .flow .case .lives__stage, .flow .case .life, .flow .case .lives__fin { position: relative; inset: auto; transform: none; opacity: 1; }
.flow .lives__thread, .flow .lives__nav, .flow .case__stamp, .flow .case__foot { display: none; }

/* the case file opens like a form: subject, status, who filed it */
.case__fields { margin-top: 16px; display: grid; gap: 7px; }
.case__fields > div { display: flex; align-items: baseline; gap: 14px; padding-bottom: 6px; border-bottom: 1px dotted rgba(43, 32, 48, 0.32); }
.case__fields span { flex: none; width: 96px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #8a7f76; }
.case__fields b, .case .life .case__fields .life__t { font-family: "Special Elite", var(--mono); font-weight: 400; font-size: clamp(13px, 1vw, 16px); color: #2b2030; letter-spacing: 0.02em; }
.case .life .case__fields .life__t { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 0; line-height: 1.3; }
@media (max-width: 860px) { .case__fields > div:not(:first-child) { display: none; } }

/* =================== VIVID: the Nine Lives desk (walnut, props, case file on its folder) =================== */
#table { position: absolute; inset: 0; background:
    radial-gradient(ellipse 58% 52% at 50% 60%, rgba(255, 196, 130, 0.16), transparent 72%),
    linear-gradient(180deg, rgba(12, 7, 4, 0.62) 0%, rgba(12, 7, 4, 0.2) 24%, rgba(12, 7, 4, 0) 38%, rgba(12, 7, 4, 0.38) 100%),
    url("assets/table/walnut.webp") center / cover, #2a190f; }
.scene--lives { --L: 12; --M: 50; --D: 54; --R: 88; --T: 25; --B: 88; --u: 10px; --cream: #f1e6d2; --rd: #ff5a6a; }
.scene--lives .lives__kick { color: var(--rd); letter-spacing: 0.32em; font-weight: 500; }
.scene--lives .lives__kick i { font-style: normal; margin: 0 0.9em; opacity: 0.8; }
.scene--lives .lives__title { color: var(--cream); letter-spacing: -0.035em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.scene--lives .lives__title em { color: var(--rd); }
.scene--lives .lives__sub { color: rgba(241, 230, 210, 0.78); display: inline-block; padding-bottom: 12px; position: relative; }
.scene--lives .lives__sub::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64%; height: 1.5px; background: linear-gradient(90deg, var(--rd), rgba(255, 90, 106, 0)); }
.scene--lives .lives__classified { right: calc(100% - var(--R) * 1%); color: rgba(241, 230, 210, 0.55); letter-spacing: 0.3em; }
.scene--lives .lives__classified i { font-style: normal; margin: 0 1.4em; }
.lives__side { position: absolute; left: calc(var(--R) * 1% + 3.2 * var(--u)); top: calc(var(--T) * 1% + 6 * var(--u)); writing-mode: vertical-rl; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(241, 230, 210, 0.38); margin: 0; }

/* props on the desk */
.desk { position: absolute; inset: 0; pointer-events: none; }
.prop { position: absolute; margin: 0; }
.prop p { margin: 0; }
.prop--slip { left: calc(var(--L) * 1% - 3.5 * var(--u)); top: calc(var(--T) * 1% + 15 * var(--u)); width: calc(27 * var(--u)); padding: calc(2.2 * var(--u)) calc(2.4 * var(--u));
  transform: rotate(-13deg); transform-origin: left center; color: #2a1d17;
  background: linear-gradient(rgba(248, 232, 200, 0.55), rgba(238, 218, 180, 0.6)), url("assets/dossier/page.webp") 30% 70% / 260% auto;
  box-shadow: 0 16px 26px -10px rgba(0, 0, 0, 0.65), 0 2px 4px rgba(0, 0, 0, 0.3); clip-path: polygon(0 3%, 100% 0, 99% 100%, 1% 97%); }
.slip__k { font-family: var(--mono); font-size: calc(1.15 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: #b3261e; margin-bottom: calc(0.8 * var(--u)) !important; }
.slip__t { font-family: var(--accent); font-size: calc(2.15 * var(--u)); line-height: 1.12; }
.slip__r { font-family: var(--mono); font-size: calc(1 * var(--u)); letter-spacing: 0.2em; color: #8a2a22; text-align: right; margin-top: calc(0.6 * var(--u)) !important; }
.pin { position: absolute; width: calc(1.9 * var(--u)); height: calc(1.9 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9d97 0 12%, #d3262a 38%, #7c0f14 100%); box-shadow: 0 4px 5px rgba(0, 0, 0, 0.45); }
.prop--slip .pin { left: calc(5 * var(--u)); bottom: calc(-0.6 * var(--u)); }
.prop--sticky { left: calc(var(--L) * 1% - 2 * var(--u)); top: calc(var(--B) * 1% - 23 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: calc(3.2 * var(--u)) calc(2.2 * var(--u));
  transform: rotate(4deg); background: linear-gradient(160deg, #f7e08a, #f0d26e 60%, #e6c35a); color: #22305f;
  box-shadow: 0 22px 26px -14px rgba(0, 0, 0, 0.7), 0 2px 3px rgba(0, 0, 0, 0.25); }
.prop--sticky::after { content: ""; position: absolute; right: 0; bottom: 0; width: 40%; height: 30%; background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.08)); pointer-events: none; }
.tape { position: absolute; left: 30%; top: calc(-1.2 * var(--u)); width: 40%; height: calc(2.6 * var(--u)); background: rgba(232, 214, 190, 0.6); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.sticky__k { font-family: var(--mono); font-size: calc(1 * var(--u)); letter-spacing: 0.18em; text-transform: uppercase; color: #5a4a2a; margin-bottom: calc(0.9 * var(--u)) !important; }
.sticky__t { font-family: "Caveat", cursive; font-weight: 600; font-size: calc(3.5 * var(--u)); line-height: 1; color: #23317c; }
.sticky__s { font-family: var(--mono); font-size: calc(0.95 * var(--u)); letter-spacing: 0.2em; text-transform: uppercase; color: #5a4a2a; margin-top: calc(1 * var(--u)) !important; }
.prop--polaroid { left: calc(var(--M) * 1% - 9 * var(--u)); top: calc(var(--B) * 1% - 25 * var(--u)); width: calc(19 * var(--u)); padding: calc(1.4 * var(--u)) calc(1.4 * var(--u)) calc(4.6 * var(--u));
  background: linear-gradient(#f4efe4, #e9e1d1); transform: rotate(-9deg); box-shadow: 0 22px 30px -14px rgba(0, 0, 0, 0.75), 0 2px 4px rgba(0, 0, 0, 0.3); }
.polaroid__img { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse 50% 56% at 50% 50%, #f3dfae 0 52%, #b98f45 53% 55%, #241a20 56%), #1a1418; filter: sepia(0.25) contrast(1.05); }
.polaroid__img img { width: 74%; height: auto; display: block; }
.prop--polaroid p { position: absolute; left: 0; right: 0; bottom: calc(1 * var(--u)); text-align: center; font-family: "Caveat", cursive; font-weight: 600; font-size: calc(2.5 * var(--u)); color: #2b3a8c; transform: rotate(-3deg); }
.prop--ruler { left: calc(var(--L) * 1% + 4 * var(--u)); top: calc(var(--B) * 1% - 1.4 * var(--u)); width: calc(56 * var(--u)); height: calc(4.4 * var(--u)); transform: rotate(-2.2deg);
  background: repeating-linear-gradient(90deg, rgba(60, 36, 16, 0.75) 0 1px, transparent 1px calc(1 * var(--u))) top / 100% 28% no-repeat,
    repeating-linear-gradient(90deg, rgba(60, 36, 16, 0.85) 0 1.5px, transparent 1.5px calc(5 * var(--u))) top / 100% 48% no-repeat,
    linear-gradient(180deg, #d9b47a, #c39556 60%, #a87a3e);
  box-shadow: 0 14px 18px -10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 240, 210, 0.5); border-radius: 2px; }
.prop--ruler span { position: absolute; left: 32%; bottom: calc(0.5 * var(--u)); font-family: var(--mono); font-size: calc(0.95 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(50, 28, 12, 0.85); }

/* the case file, on its manila folder */
.scene--lives .case { left: calc(var(--D) * 1%); right: calc(100% - var(--R) * 1%); top: calc(var(--T) * 1%); bottom: calc(100% - var(--B) * 1%); perspective: none; }
.case__folder { position: absolute; left: calc(-2.2 * var(--u)); right: calc(-1.4 * var(--u)); top: calc(-3.6 * var(--u)); bottom: calc(-1.4 * var(--u)); transform: rotate(-2.4deg);
  background: linear-gradient(rgba(214, 170, 110, 0.35), rgba(176, 130, 72, 0.35)), url("assets/dossier/cover.webp") center / cover, #c9a46e; border-radius: 4px 10px 6px 6px;
  box-shadow: 0 30px 50px -18px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.35); }
.case__tab { position: absolute; left: calc(3 * var(--u)); top: calc(-2.6 * var(--u)); padding: calc(0.8 * var(--u)) calc(3 * var(--u)) calc(1.2 * var(--u)); border-radius: 8px 8px 0 0;
  background: inherit; background: linear-gradient(#cfa86f, #c49a5f); font-family: var(--mono); font-size: calc(1.15 * var(--u)); letter-spacing: 0.28em; text-transform: uppercase; color: rgba(60, 38, 18, 0.8); }
.scene--lives .case__paper { transform: rotate(1.2deg); border-radius: 3px; padding: 0; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.25), inset 0 0 80px rgba(150, 105, 55, 0.25); }
.scene--lives .case .lives__stage { left: calc(4 * var(--u)); right: calc(6.5 * var(--u)); top: calc(3.6 * var(--u)); bottom: calc(6 * var(--u)); }
.case__vert { position: absolute; right: calc(2.2 * var(--u)); top: 26%; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; font-family: var(--mono); font-size: calc(1 * var(--u));
  letter-spacing: 0.32em; text-transform: uppercase; color: rgba(179, 38, 30, 0.65); }
.case__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #c0261c; margin-right: 12px; vertical-align: middle; transform: translateY(-1px); }
.scene--lives .case .life .life__k, .scene--lives .case .lives__fin .life__k { margin: calc(4 * var(--u)) 0 calc(1.6 * var(--u)); letter-spacing: 0.24em; }
.scene--lives .case .life .case__head, .scene--lives .case .lives__fin .case__head { font-family: var(--serif); font-weight: 400; font-size: calc(6.2 * var(--u)); line-height: 0.98; letter-spacing: -0.045em;
  color: #1e1622; margin: 0 0 calc(2.6 * var(--u)); max-width: 13ch; }
.case__head em { display: block; font-family: var(--accent); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: #c8222f; font-size: 1.08em; line-height: 1.05; }
.scene--lives .case .life .life__why, .scene--lives .case .lives__fin .life__why { font-size: calc(2 * var(--u)); line-height: 1.5; color: #3b3040; max-width: 40ch; }
.scene--lives .case .life .life__t, .scene--lives .case .lives__fin .life__t { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  margin: calc(2.8 * var(--u)) 0 0; padding-top: calc(1.6 * var(--u)); border-top: 1px solid rgba(43, 32, 48, 0.3); max-width: 70%;
  font-family: var(--mono); font-weight: 400; font-size: calc(1.2 * var(--u)); line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; color: #5d544e; }
.case .life__t span { color: #b3261e; margin-right: 0.8em; }
.scene--lives .case .life .case__note, .scene--lives .case .lives__fin .case__note { right: calc(1 * var(--u)); bottom: calc(5 * var(--u)); font-size: calc(3.2 * var(--u)); color: #2b3a8c; transform: rotate(-6deg); }
.case__num { position: absolute; right: calc(-1 * var(--u)); bottom: calc(-3 * var(--u)); font-family: var(--accent); font-size: calc(22 * var(--u)); line-height: 1; color: rgba(70, 48, 30, 0.08); pointer-events: none; }
.scene--lives .case__closed { position: absolute; left: calc(1 * var(--u)); top: 58%; margin: 0; font-size: calc(2.6 * var(--u)); }
.scene--lives .case__foot { left: calc(4 * var(--u)); right: calc(6.5 * var(--u)); bottom: calc(2.6 * var(--u)); }
.case__clip { position: absolute; right: calc(5 * var(--u)); top: calc(-4.4 * var(--u)); width: calc(4.2 * var(--u)); height: auto; transform: rotate(18deg); fill: none;
  stroke: #b9bec6; stroke-width: 3.2; stroke-linecap: round; filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.45)); }
.case__tag { position: absolute; right: calc(-6.5 * var(--u)); top: calc(22 * var(--u)); width: calc(11 * var(--u)); height: calc(21 * var(--u)); padding: calc(3.6 * var(--u)) calc(1.4 * var(--u)) 0;
  transform: rotate(16deg); display: flex; flex-direction: column; gap: calc(0.8 * var(--u)); text-align: center;
  background: linear-gradient(rgba(214, 178, 120, 0.4), rgba(190, 150, 92, 0.45)), url("assets/dossier/inside.webp") 70% 40% / 400% auto, #cfae78;
  clip-path: polygon(18% 0, 82% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); box-shadow: 0 16px 22px -10px rgba(0, 0, 0, 0.7);
  font-family: var(--mono); font-size: calc(1 * var(--u)); letter-spacing: 0.2em; text-transform: uppercase; color: #6b2a1c; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45)); }
.case__tag i { position: absolute; left: 50%; top: calc(1.4 * var(--u)); width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); margin-left: calc(-0.7 * var(--u)); border-radius: 50%;
  background: #2a190f; box-shadow: 0 0 0 calc(0.4 * var(--u)) #e9d7b4; }
.case__tag b { font-weight: 500; color: #b3261e; }
.case__tag em { font-style: normal; font-family: var(--accent); font-size: calc(2.6 * var(--u)); letter-spacing: 0; display: block; color: #3a2418; }
.case__seal { position: absolute; right: calc(-3 * var(--u)); bottom: calc(-3.4 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); display: grid; place-items: center;
  border-radius: 47% 53% 50% 46% / 52% 46% 54% 48%;
  background: radial-gradient(circle at 36% 30%, #ff8a7c 0 6%, #d9363a 26%, #a5161f 62%, #6e0b12 100%);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.55), inset 0 -6px 12px rgba(60, 0, 6, 0.55), inset 0 4px 8px rgba(255, 170, 160, 0.35); }
.case__seal::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; border: 2px solid rgba(110, 10, 16, 0.55); box-shadow: inset 0 2px 3px rgba(255, 160, 150, 0.35), 0 1px 1px rgba(255, 170, 160, 0.3); }
.case__seal span { font-family: var(--accent); font-size: calc(4.6 * var(--u)); color: #8e1219; text-shadow: 0 1px 0 rgba(255, 160, 150, 0.55), 0 -1px 0 rgba(60, 0, 6, 0.6); letter-spacing: -0.04em; }

/* the threads and the nav */
.scene--lives .lives__thread { z-index: 3; }
.scene--lives .lives__thread path { stroke: #d42a30; stroke-width: 1.7; }
.scene--lives .lives__tack { fill: #d3262a; stroke: #7c0f14; stroke-width: 1; }
.scene--lives .case__pin { width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); background: radial-gradient(circle at 35% 30%, #ff9d97 0 12%, #d3262a 40%, #7c0f14 100%); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4); }
.scene--lives .lives__nav { left: calc(var(--L) * 1%); right: calc(100% - var(--R) * 1%); top: calc(var(--B) * 1% + 3 * var(--u)); bottom: auto; z-index: 4; }
.scene--lives .lives__step { border: 1px solid rgba(241, 230, 210, 0.32); background: rgba(20, 12, 8, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--cream); padding: 12px 22px; letter-spacing: 0.3em; font-size: 11px; }
.scene--lives .lives__step b { font-weight: 400; }
.scene--lives .lives__step:hover { color: #fff; border-color: var(--rd); }
.scene--lives .lives__paws { gap: 18px; }
.scene--lives .lives__paws button { color: rgba(241, 230, 210, 0.28); font-size: 13px; line-height: 1; padding: 4px; transition: color 0.3s, transform 0.3s; }
.scene--lives .lives__paws button.seen { color: rgba(255, 90, 106, 0.6); }
.scene--lives .lives__paws button.on { color: var(--rd); transform: scale(1.35); }
@media (max-width: 860px) {
  .desk, .lives__side, .case__tag, .case__seal, .case__clip, .case__folder, .case__vert, .case__num { display: none; }
  .scene--lives .case { left: var(--gutter); right: var(--gutter); top: 64%; bottom: 64px; }
  .scene--lives .case .life .case__head { font-size: 24px; }
  .scene--lives .lives__nav { left: var(--gutter); right: var(--gutter); top: auto; bottom: 12px; }
  .scene--lives .lives__step { padding: 8px 10px; letter-spacing: 0.14em; font-size: 10px; }
}
.flow .desk, .flow .case__folder, .flow .case__tag, .flow .case__seal, .flow .case__clip, .flow .lives__side { display: none; }

.scene--lives .case { z-index: 1; }
.scene--lives .desk { z-index: 2; }
.prop--polaroid { left: calc(var(--M) * 1% - 12 * var(--u)); }
.lives__side { left: calc(var(--R) * 1% + 6.5 * var(--u)); top: calc(var(--T) * 1% + 2 * var(--u)); }
.scene--lives .case .lives__fin .case__note { position: absolute; margin: 0; font-family: "Caveat", cursive; font-weight: 600; opacity: 0.9; }
.scene--lives .case__closed { left: auto; right: calc(9 * var(--u)); top: auto; bottom: calc(11 * var(--u)); transform: rotate(-9deg); }
.scene--lives .case .lives__fin .case__note { right: calc(1 * var(--u)); bottom: calc(-0.5 * var(--u)); }
.scene--lives .case__closed { right: auto; left: calc(0.5 * var(--u)); bottom: calc(-0.5 * var(--u)); transform: rotate(-7deg); }
.scene--lives .lives__kick { color: #ff6f7c; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.scene--lives .lives__classified { color: rgba(241, 230, 210, 0.7); }

/* =================== VIVID: Operations bureau (walnut bench, rotary archive, case files) =================== */
#bench { position: absolute; inset: 0; opacity: 0; overflow: hidden; background: #24150c; }
#bench::before { content: ""; position: absolute; inset: 0; background: url("assets/table/walnut.webp") center / cover; transform: scale(-1, -1); }
#bench::after { content: ""; position: absolute; inset: 0; background:
    radial-gradient(ellipse 42% 58% at 72% 56%, rgba(255, 192, 120, 0.24), transparent 70%),
    radial-gradient(ellipse 36% 46% at 26% 64%, rgba(255, 214, 160, 0.12), transparent 72%),
    linear-gradient(90deg, rgba(10, 6, 4, 0.55), rgba(10, 6, 4, 0.12) 36%, rgba(10, 6, 4, 0) 58%, rgba(10, 6, 4, 0.3)),
    linear-gradient(180deg, rgba(10, 6, 4, 0.62) 0%, rgba(10, 6, 4, 0.1) 28%, rgba(10, 6, 4, 0) 70%, rgba(10, 6, 4, 0.5) 100%); }
.scene--ops { --cream: #f1e6d2; --rd: #ff6f7c; --brass: #d2a650; }
.scene--ops .ops__head { max-width: min(760px, 52vw); }
.scene--ops .ops__kick { color: var(--rd); letter-spacing: 0.32em; font-weight: 500; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.scene--ops .ops__kick i { font-style: normal; margin: 0 0.9em; opacity: 0.8; }
.scene--ops .ops__title { color: var(--cream); letter-spacing: -0.035em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.scene--ops .ops__title em { font-family: var(--accent); font-style: italic; font-weight: 400; color: var(--rd); letter-spacing: -0.01em; }
.ops__sub { margin-top: 14px; max-width: 54ch; font-size: clamp(15px, 1.12vw, 18px); line-height: 1.55; color: rgba(241, 230, 210, 0.78); }
.ops__label { position: absolute; right: calc(var(--gutter) + 40px); top: 110px; margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(241, 230, 210, 0.66); }
.ops__label i { font-style: normal; margin: 0 1.2em; color: var(--brass); }

/* the leather folder and the pile of case files */
.bureau { position: absolute; left: calc(var(--gutter) + 52px); width: min(40vw, 78vh); top: 33%; bottom: 13%; }
.bureau__folder { position: absolute; inset: -3% -4% -4% -5%; transform: rotate(-3deg); border-radius: 10px;
  background: radial-gradient(ellipse 70% 60% at 35% 30%, rgba(255, 210, 160, 0.14), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(150deg, #5a3622, #3a2216 55%, #2a170e);
  box-shadow: 0 34px 60px -20px rgba(0, 0, 0, 0.85), 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 220, 180, 0.06); }
.bureau__folder::before { content: ""; position: absolute; inset: 14px; border: 1.5px dashed rgba(210, 166, 80, 0.5); border-radius: 6px; }
.bureau__folder span { position: absolute; left: 30px; bottom: 22px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(210, 166, 80, 0.55); }
.bureau__pile { position: absolute; inset: 0 8% 6% 0; }
.opfile { position: absolute; inset: 0; padding: clamp(18px, 2.6vh, 34px) clamp(20px, 2.4vw, 40px); visibility: hidden; transform-origin: 40% 60%; color: #2b2030;
  background: linear-gradient(rgba(252, 241, 218, 0.6), rgba(244, 228, 198, 0.62)), url("assets/dossier/page.webp") center 64% / 150% auto, #f3e6c9; border-radius: 3px;
  box-shadow: 0 16px 28px -12px rgba(0, 0, 0, 0.65), 0 2px 5px rgba(0, 0, 0, 0.22), inset 0 0 70px rgba(150, 105, 55, 0.24); }
.opfile::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(170, 36, 28, 0.32); pointer-events: none; }
.opfile__top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(43, 32, 48, 0.32);
  font-family: "Special Elite", var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #a3261d; }
.opfile__stamp { width: 20px; height: 20px; fill: rgba(43, 32, 48, 0.45); }
.opfile__op { margin: clamp(14px, 2.6vh, 30px) 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: #7a6f68; }
.opfile__name { margin: 0 0 clamp(10px, 1.6vh, 18px); font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.1vw, 54px); line-height: 1; letter-spacing: -0.04em; color: #1e1622; }
.opfile__desc { margin: 0; max-width: 44ch; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.55; color: #3b3040; }
.opfile__target { display: inline-flex; gap: 12px; align-items: baseline; margin: clamp(14px, 2.4vh, 26px) 0 0; padding: 9px 16px; border: 1.5px solid rgba(179, 38, 30, 0.75); border-radius: 2px;
  font-family: "Special Elite", var(--mono); font-size: clamp(13px, 1vw, 16px); letter-spacing: 0.06em; text-transform: uppercase; color: #a3261d; transform: rotate(-1.2deg); }
.opfile__target span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em; color: #7a6f68; }
.opfile__foot { position: absolute; left: clamp(20px, 2.4vw, 40px); right: clamp(20px, 2.4vw, 40px); bottom: clamp(14px, 2vh, 24px); display: flex; justify-content: space-between;
  padding-top: 8px; border-top: 1px solid rgba(43, 32, 48, 0.22); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #8a7f76; }
.bureau__clip { position: absolute; left: 6%; top: -4.5%; width: clamp(26px, 2.2vw, 40px); transform: rotate(-12deg); fill: none; stroke: #bcc1c8; stroke-width: 3.2; stroke-linecap: round;
  filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.5)); z-index: 30; }

/* the things tucked under each file */
.bureau__props { position: absolute; inset: 0; }
.opprop { position: absolute; opacity: 0; width: clamp(150px, 12vw, 220px); padding: 14px 16px; color: #2b2030; font-size: 12px;
  transform: rotate(var(--rot)) translate(calc((1 - var(--out, 0)) * -1 * var(--dx)), calc((1 - var(--out, 0)) * -1 * var(--dy)));
  box-shadow: 0 14px 22px -10px rgba(0, 0, 0, 0.7), 0 2px 3px rgba(0, 0, 0, 0.25); }
.opprop p { margin: 0; }
.pp__k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #7a6f68; margin-bottom: 6px !important; }
.pp__big { font-family: "Special Elite", var(--mono); font-size: 30px; line-height: 1.05; color: #2b2030; }
.pp__big--red { color: #b3261e; }
.pp__s { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6d6258; margin-top: 6px !important; }
.pp__hand { font-family: "Caveat", cursive; font-weight: 600; font-size: 22px; line-height: 1.05; color: #2b3a8c; margin-top: 6px !important; }
.pp__row { display: flex; justify-content: space-between; gap: 10px; font-family: "Special Elite", var(--mono); font-size: 11.5px; padding: 3px 0; border-bottom: 1px dotted rgba(43, 32, 48, 0.3); }
.pp__row--hit b { color: #b3261e; outline: 1.5px solid rgba(179, 38, 30, 0.8); outline-offset: 2px; border-radius: 50%; padding: 0 3px; }
.pp__row--total { border-bottom: 0; border-top: 1px solid rgba(43, 32, 48, 0.6); margin-top: 4px; font-weight: 700; }
.opprop--memo, .opprop--sheet, .opprop--check, .opprop--map { background: linear-gradient(rgba(250, 244, 230, 0.7), rgba(240, 230, 210, 0.75)), url("assets/dossier/page.webp") 20% 40% / 400% auto; }
.pp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; font-family: "Special Elite", var(--mono); font-size: 10.5px; text-align: center; }
.pp__grid > * { padding: 6px 2px; border: 1px solid rgba(43, 32, 48, 0.25); }
.pp__grid s { text-decoration: none; position: relative; color: #8a7f76; }
.pp__grid s::after { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: #c0261c; transform: rotate(-12deg); }
.opprop--badge { width: clamp(140px, 10vw, 180px); background: linear-gradient(#f4efe6, #e6ddcd); border-top: 18px solid #b3261e; text-align: center; padding-top: 22px; }
.pp__hole { position: absolute; left: 50%; top: -12px; width: 26px; height: 7px; margin-left: -13px; border-radius: 4px; background: #24150c; }
.opprop--code { background: #f6f2ea; }
.opprop--code pre { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: #2b2030; }
.pp__ring { position: absolute; left: 10px; top: 30px; width: 110px; height: 40px; border: 2px solid rgba(192, 38, 28, 0.8); border-radius: 50%; transform: rotate(-6deg); }
.opprop--code .pp__hand { color: #c0261c; }
.opprop--ticket { width: clamp(120px, 9vw, 160px); text-align: center; background: #f1d7a8; border: 1px dashed rgba(90, 60, 30, 0.4);
  -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.opprop--hello { padding: 0 0 14px; background: #fbf8f2; border-radius: 8px; overflow: hidden; text-align: center; }
.pp__band { background: #c0261c; color: #fff; font-family: var(--sans); font-weight: 700; font-size: 22px; letter-spacing: 0.04em; padding: 8px 0 6px; margin-bottom: 8px !important; }
.pp__band small { display: block; font-weight: 400; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.pp__tick { font-family: "Special Elite", var(--mono); font-size: 12px; padding: 3px 0 3px 24px; position: relative; }
.pp__tick::before { content: ""; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border: 1.5px solid #2b2030; }
.pp__tick.on::after { content: ""; position: absolute; left: 3px; top: 0; width: 7px; height: 13px; border: solid #c0261c; border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); }
.pp__tick:not(.on) { color: #b3261e; }
.opprop--key { background: #d9b47a; clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); padding-left: 30px; }
.pp__key { width: 100%; height: auto; fill: #8d6a2c; margin-bottom: 4px; }
.pp__key .cut { fill: #d9b47a; }
.opprop--receipt { width: clamp(130px, 9.5vw, 170px); background: #fbfaf6;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x; }
.opprop--receipt .pp__row { font-size: 10.5px; }
.opprop--receipt .pp__hand { color: #c0261c; text-align: right; }
.pp__arrow { position: absolute; right: 18px; bottom: 16px; width: 34px; height: 34px; border: 2px solid #c0261c; border-radius: 50%; }
.pp__arrow::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-family: "Caveat", cursive; font-weight: 700; font-size: 24px; color: #c0261c; }

/* the hint, the hand on the archive, the nav */
.ops__hint { position: absolute; right: calc(var(--gutter) + 40px); bottom: calc(10% + 10px); margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(241, 230, 210, 0.5); }
.ops__grab { position: absolute; left: 54%; right: calc(var(--gutter) + 20px); top: 20%; bottom: 16%; pointer-events: auto; cursor: grab; touch-action: none; }
.ops__grab.is-drag { cursor: grabbing; }
.ops__nav { position: absolute; left: calc(var(--gutter) + 40px); right: calc(var(--gutter) + 40px); bottom: 3.4%; display: flex; align-items: center; justify-content: space-between; z-index: 4; }
.ops__step { all: unset; cursor: pointer; pointer-events: auto; border: 1px solid rgba(241, 230, 210, 0.32); background: rgba(20, 12, 8, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--cream); padding: 12px 22px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; transition: border-color 0.25s, color 0.25s; }
.ops__step b { font-weight: 400; }
.ops__step:hover { color: #fff; border-color: var(--rd); }
.ops__step:focus-visible { outline: 1px solid var(--rd); }
.ops__count { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.24em; color: rgba(241, 230, 210, 0.55); }
.ops__count b { font-weight: 400; color: var(--brass); }
@media (max-width: 860px) {
  .bureau__props, .bureau__folder, .bureau__clip, .ops__hint, .ops__label { display: none; }
  .bureau { left: var(--gutter); right: var(--gutter); width: auto; top: 60%; bottom: 64px; }
  .opfile__desc, .opfile__foot { display: none; }
  .opfile__name { font-size: 26px; }
  .ops__grab { left: 0; right: 0; top: 18%; bottom: 44%; }
  .ops__nav { left: var(--gutter); right: var(--gutter); bottom: 12px; }
  .ops__step { padding: 8px 10px; letter-spacing: 0.14em; font-size: 10px; }
}
.flow .bureau, .flow .bureau__pile, .flow .opfile { position: relative; inset: auto; width: auto; visibility: visible; transform: none; margin-bottom: 24px; }
.flow .bureau__props, .flow .bureau__folder, .flow .bureau__clip, .flow .ops__grab, .flow .ops__nav, .flow .ops__hint, .flow .opfile__foot { display: none; }

.bureau__clip { left: auto; right: 16%; top: -5%; transform: rotate(14deg); }
.bureau { top: 31%; bottom: 15%; }
.bureau__pile { inset: 0 9% 3% 0; }
.ops__hint { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(3.4% + 54px); text-align: center; }

.opfile__num { position: absolute; right: clamp(16px, 2vw, 34px); bottom: clamp(18px, 3vh, 40px); font-family: var(--accent); font-size: clamp(110px, 13vw, 230px); line-height: 0.8; color: rgba(70, 48, 30, 0.08); pointer-events: none; }
.opfile__stamp2 { position: absolute; left: clamp(22px, 2.6vw, 44px); bottom: clamp(52px, 8vh, 96px); margin: 0; padding: 6px 14px; border: 3px double rgba(179, 38, 30, 0.6); color: rgba(179, 38, 30, 0.65);
  font-family: "Special Elite", var(--mono); font-size: clamp(16px, 1.4vw, 24px); letter-spacing: 0.16em; text-transform: uppercase; transform: rotate(-7deg); mix-blend-mode: multiply; }

/* =================== VIVID: The Mastermind, a personnel file open on the desk =================== */
.scene--mm { --cream: #f1e6d2; --rd: #ff6f7c; }
.pfile { position: absolute; left: calc(var(--gutter) + 40px); right: calc(var(--gutter) + 40px); top: 14%; bottom: 11%; display: grid; grid-template-columns: 0.9fr 1.25fr; max-width: 1640px; margin: 0 auto; }
.pfile__cover { position: absolute; inset: -16px -14px -18px -18px; border-radius: 6px; transform: rotate(-0.6deg);
  background: linear-gradient(rgba(214, 170, 110, 0.3), rgba(170, 124, 66, 0.35)), url("assets/dossier/cover.webp") center / cover, #c9a46e;
  box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.85), 0 6px 12px rgba(0, 0, 0, 0.4); }
.pfile__tab { position: absolute; left: 40px; top: -30px; padding: 8px 26px 12px; border-radius: 8px 8px 0 0; background: linear-gradient(#cfa86f, #c49a5f);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(60, 38, 18, 0.8); }
.pfile__page { position: relative; padding: clamp(24px, 3.4vh, 44px) clamp(26px, 2.6vw, 52px); color: #2b2030; overflow: hidden;
  background: linear-gradient(rgba(252, 241, 218, 0.6), rgba(244, 228, 198, 0.62)), url("assets/dossier/page.webp") center 64% / 160% auto, #f3e6c9; }
.pfile__page--l { border-radius: 3px 0 0 3px; box-shadow: inset -40px 0 50px -30px rgba(90, 60, 30, 0.45), inset 0 0 70px rgba(150, 105, 55, 0.2); }
.pfile__page--r { border-radius: 0 3px 3px 0; box-shadow: inset 40px 0 50px -30px rgba(90, 60, 30, 0.4), inset 0 0 70px rgba(150, 105, 55, 0.2); display: flex; flex-direction: column; }
.pfile__page::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(170, 36, 28, 0.28); pointer-events: none; }
.pfile__page--l::before { right: 0; border-right: 0; }
.pfile__page--r::before { left: 0; border-left: 0; }
.pfile__k { margin: 0 0 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: #b3261e; }
.pfile__title { margin: 0 0 clamp(18px, 3vh, 34px); font-family: "Special Elite", var(--mono); font-size: clamp(28px, 2.7vw, 50px); line-height: 1.02; text-transform: uppercase; letter-spacing: 0.01em; color: #1e1622; }
.pfile__title em { display: block; font-style: normal; color: #b3261e; }
.pfile__time { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(43, 32, 48, 0.3); }
.pfile__time li { padding: clamp(9px, 1.5vh, 15px) 0 clamp(9px, 1.5vh, 15px) 22px; border-bottom: 1px solid rgba(43, 32, 48, 0.18); position: relative; opacity: 0.45; transition: opacity 0.45s; }
.pfile__time li::before { content: ""; position: absolute; left: 0; top: clamp(15px, 2.1vh, 21px); width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(43, 32, 48, 0.5); transition: background 0.4s, border-color 0.4s; }
.pfile__time li.seen { opacity: 0.8; }
.pfile__time li.on { opacity: 1; }
.pfile__time li.seen::before { background: #b3261e; border-color: #b3261e; }
.pfile__time span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #7a6f68; margin-bottom: 4px; }
.pfile__time li.on span { color: #b3261e; }
.pfile__time b { font-family: var(--sans); font-weight: 500; font-size: clamp(14px, 1.15vw, 19px); line-height: 1.3; color: #221a28; }
.pfile__ident { position: absolute; left: clamp(26px, 2.6vw, 52px); right: clamp(26px, 2.6vw, 52px); bottom: clamp(24px, 3.4vh, 44px); display: flex; gap: 16px; align-items: flex-end; }
.pfile__withheld { flex: 0 0 auto; width: clamp(110px, 8vw, 150px); aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center; padding: 10px; border: 1px solid rgba(43, 32, 48, 0.45);
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(43, 32, 48, 0.08) 9px 10px), rgba(255, 250, 240, 0.4);
  font-family: var(--mono); font-size: 9px; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: #6d6258; transform: rotate(-1.5deg); }
.pfile__finger { flex: 0 0 auto; width: clamp(70px, 5vw, 92px); text-align: center; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #7a6f68; }
.pfile__print { display: block; width: 100%; height: auto; fill: none; stroke: rgba(30, 22, 34, 0.62); stroke-width: 1.5; stroke-linecap: round; margin-bottom: 6px; border: 1px solid rgba(43, 32, 48, 0.35); padding: 6px; background: rgba(255, 250, 240, 0.35); }
.pfile__stamp { position: absolute; right: clamp(26px, 2.6vw, 52px); bottom: clamp(40px, 6vh, 80px); margin: 0; padding: 6px 16px; border: 3px double rgba(179, 38, 30, 0.62); color: rgba(179, 38, 30, 0.66);
  font-family: "Special Elite", var(--mono); font-size: clamp(18px, 1.5vw, 26px); letter-spacing: 0.16em; text-transform: uppercase; transform: rotate(-9deg); mix-blend-mode: multiply; }
.pfile__id { padding-bottom: clamp(12px, 2vh, 22px); border-bottom: 1px solid rgba(43, 32, 48, 0.3); }
.pfile__name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.6vw, 66px); line-height: 0.98; letter-spacing: -0.045em; color: #1e1622; }
.pfile__role { margin: 10px 0 4px; font-family: var(--sans); font-weight: 600; font-size: clamp(13px, 1.05vw, 17px); color: #2b2030; }
.pfile__tag { margin: 0; font-family: var(--accent); font-style: italic; font-size: clamp(17px, 1.4vw, 24px); color: #b3261e; }
.pfile__story { position: relative; flex: 1 1 auto; margin: clamp(14px, 2.2vh, 26px) 0; }
.mmc { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; }
.mmc h3 { margin: 0 0 clamp(8px, 1.4vh, 14px); font-family: "Special Elite", var(--mono); font-weight: 400; font-size: clamp(16px, 1.4vw, 24px); letter-spacing: 0.02em; text-transform: uppercase; color: #8a2a22; }
.mmc p { margin: 0 0 clamp(6px, 1.1vh, 11px); max-width: 66ch; font-size: clamp(13.5px, 1.02vw, 17px); line-height: 1.55; color: #3b3040; }
.mmc b { font-weight: 600; color: #1e1622; }
.mmc__list { display: block; font-family: var(--mono); font-size: 0.86em; line-height: 1.7; letter-spacing: 0.04em; color: #8a2a22; }
.mmc__em { font-family: var(--accent); font-size: 1.3em; color: #b3261e; }
.mmc__big { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.55em; letter-spacing: -0.03em; line-height: 1.15; margin-top: 4px; }
.mmc--quote { display: flex; align-items: center; }
.mmc--quote p { max-width: 22ch; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 56px); line-height: 1.04; letter-spacing: -0.035em; color: #1e1622; }
.mmc--quote em { display: block; font-family: var(--accent); font-style: italic; letter-spacing: -0.01em; color: #c8222f; }
.pfile__facts { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 18px; padding-top: clamp(10px, 1.8vh, 18px); border-top: 1px solid rgba(43, 32, 48, 0.3); }
.pfile__facts span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #8a7f76; margin-bottom: 5px; }
.pfile__facts b { font-weight: 500; font-size: clamp(12px, 0.95vw, 15px); line-height: 1.4; color: #2b2030; }
.pfile__facts a { color: #b3261e; text-decoration: none; border-bottom: 1px solid rgba(179, 38, 30, 0.4); pointer-events: auto; }
.pfile__facts a:hover { border-bottom-color: #b3261e; }
.pfile__clip { position: absolute; right: 9%; top: -26px; width: clamp(26px, 2.2vw, 40px); transform: rotate(10deg); fill: none; stroke: #bcc1c8; stroke-width: 3.2; stroke-linecap: round; filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.5)); }
.mm__nav { position: absolute; left: calc(var(--gutter) + 40px); right: calc(var(--gutter) + 40px); bottom: 3%; display: flex; align-items: center; justify-content: space-between; z-index: 4; }
.mm__step { all: unset; cursor: pointer; pointer-events: auto; border: 1px solid rgba(241, 230, 210, 0.32); background: rgba(20, 12, 8, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--cream); padding: 12px 22px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; transition: border-color 0.25s, color 0.25s; }
.mm__step b { font-weight: 400; }
.mm__step:hover { color: #fff; border-color: var(--rd); }
.mm__step:focus-visible { outline: 1px solid var(--rd); }
.mm__count { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.24em; color: rgba(241, 230, 210, 0.55); }
.mm__count b { font-weight: 400; color: #d2a650; }
@media (max-width: 860px) {
  .pfile { grid-template-columns: 1fr; top: 12%; bottom: 70px; }
  .pfile__page--l, .pfile__clip, .pfile__tab { display: none; }
  .pfile__page--r { border-radius: 3px; }
  .pfile__facts { grid-template-columns: 1fr; gap: 8px; }
  .pfile__facts > div:nth-child(2) { display: none; }
  .mm__nav { left: var(--gutter); right: var(--gutter); bottom: 12px; }
  .mm__step { padding: 8px 10px; letter-spacing: 0.14em; font-size: 10px; }
}
.flow .pfile { position: relative; inset: auto; display: block; }
.flow .mmc { position: relative; inset: auto; opacity: 1; visibility: visible; margin-bottom: 20px; }
.flow .pfile__cover, .flow .pfile__clip, .flow .mm__nav, .flow .pfile__ident { display: none; }
.mmc p { font-size: clamp(14px, 1.08vw, 20px); }
.mmc h3 { font-size: clamp(17px, 1.5vw, 28px); }
.mmc.mmc--quote p { max-width: 20ch; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.3vw, 62px); line-height: 1.04; letter-spacing: -0.035em; color: #1e1622; }

/* the subject's photo: a dark print, mostly shadow, the face only just there */
.pfile__photo { position: relative; flex: 0 0 auto; width: clamp(130px, 10vw, 200px); margin: 0; padding: 8px 8px 26px; background: linear-gradient(#efe8da, #e2d8c4); transform: rotate(-2deg);
  box-shadow: 0 10px 18px -8px rgba(40, 24, 10, 0.55), 0 1px 2px rgba(40, 24, 10, 0.3); }
.pfile__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.45) brightness(0.38); }
.pfile__photo::after { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(ellipse 46% 52% at 54% 40%, transparent 0 30%, rgba(6, 5, 6, 0.6) 62%, rgba(4, 3, 4, 0.95) 92%),
    linear-gradient(100deg, rgba(4, 3, 4, 0.7) 0%, rgba(4, 3, 4, 0.05) 50%, rgba(4, 3, 4, 0.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pfile__photo figcaption { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font-family: "Special Elite", var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #6d6258; }

/* =================== VIVID: Get in touch at night (police lights, a searchlight) =================== */
#night { position: absolute; inset: 0; opacity: 0; background: #040306; }
#sirens { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene--exit { --cream: #f1e6d2; }
.scene--exit .exit__title, .scene--exit .exit__sub { color: transparent; -webkit-background-clip: text; background-clip: text; background-color: rgba(241, 230, 210, 0.5);
  background-image: radial-gradient(circle var(--sr, 200px) at var(--sx, -999px) var(--sy, -999px), #fffdf8 0%, #f6eedd 52%, rgba(241, 230, 210, 0.5) 100%); }
.scene--exit .field__label { color: rgba(241, 230, 210, 0.55); }
.scene--exit .field:focus-within .field__label { color: #ff6f7c; }
.scene--exit .field input, .scene--exit .field textarea { color: var(--cream); border-bottom-color: rgba(241, 230, 210, 0.28); background: transparent; }
.scene--exit .field input:-webkit-autofill { -webkit-text-fill-color: var(--cream); }
.scene--exit .brief__done { color: var(--cream); }
.scene--exit .next__bar { background: rgba(241, 230, 210, 0.12); }
.scene--exit .ftr { color: rgba(241, 230, 210, 0.45); border-top-color: rgba(241, 230, 210, 0.1); }
.scene--exit .exit__paws svg { fill: rgba(241, 230, 210, 0.6); }
.flow #night { display: none; }

/* =================== VIVID: pills, finished like jewellery =================== */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn.pill { --mx: 50%; --my: -30%; overflow: visible; }
.pill__fx { overflow: hidden; }
/* crimson glass: a specular band on top, depth below, a light that follows the pointer inside */
.btn.pill.pill--red, .btn.pill.pill--red:hover { color: #fff;
  background:
    radial-gradient(90px 60px at var(--mx) var(--my), rgba(255, 214, 224, 0.6), rgba(255, 214, 224, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 44%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(160deg, #ff6584 0%, #e8294f 42%, #b0122f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 8px rgba(90, 0, 22, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 10px 26px -10px rgba(226, 38, 77, 0.75), 0 2px 6px rgba(120, 10, 30, 0.3);
  text-shadow: 0 1px 1px rgba(90, 0, 22, 0.35);
  transition: box-shadow 0.5s cubic-bezier(.16, 1, .3, 1), filter 0.4s; }
.btn.pill.pill--red:hover { filter: saturate(1.08) brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -3px 8px rgba(90, 0, 22, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 16px 40px -10px rgba(226, 38, 77, 0.95), 0 0 0 6px rgba(255, 90, 120, 0.12), 0 2px 6px rgba(120, 10, 30, 0.3); }
.btn.pill:active { filter: brightness(0.94); }
/* the stroke: light running round the rim, forever */
.btn.pill.pill--red::before { padding: 1.2px; animation: pillSpin 4.5s linear infinite;
  background: conic-gradient(from var(--spin), rgba(255, 255, 255, 0.95), rgba(255, 190, 205, 0.25) 18%, rgba(255, 255, 255, 0) 36%, rgba(255, 225, 232, 0.85) 58%, rgba(255, 255, 255, 0.08) 78%, rgba(255, 255, 255, 0.95)); }
.btn.pill.pill--glass::before { animation: pillSpin 6s linear infinite;
  background: conic-gradient(from var(--spin), rgba(255, 255, 255, 0.95), rgba(190, 150, 255, 0.35) 22%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 190, 215, 0.8) 62%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0.95)); }
@keyframes pillSpin { to { --spin: 360deg; } }
.btn.pill.pill--glass { background:
    radial-gradient(90px 60px at var(--mx) var(--my), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.28)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 24px -12px rgba(60, 20, 90, 0.4); }
.btn.pill.pill--glass:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 32px -10px rgba(120, 70, 200, 0.5), 0 0 0 6px rgba(255, 255, 255, 0.18); }
/* a glint that sweeps the glass every few seconds, and at once on hover */
.pill__shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1; }
.pill__shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; transform: skewX(-22deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); animation: pillGlint 6.5s cubic-bezier(.5, 0, .2, 1) infinite; }
.btn.pill:nth-of-type(2) .pill__shine::after { animation-delay: 2.2s; }
.btn.pill:hover .pill__shine::after { animation: pillGlintNow 0.9s cubic-bezier(.3, 0, .2, 1); }
@keyframes pillGlint { 0%, 78% { left: -60%; } 100% { left: 130%; } }
@keyframes pillGlintNow { from { left: -60%; } to { left: 130%; } }
/* the arrow flies out to the top right and a twin arrives from the bottom left */
.pill__icon { position: relative; overflow: hidden; }
.pill__icon i { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 0.55s cubic-bezier(.16, 1, .3, 1); }
.pill__icon i:nth-child(2) { transform: translate(-130%, 130%); }
.btn.pill:hover .pill__icon { transform: none; }
.btn.pill:hover .pill__icon i:nth-child(1) { transform: translate(130%, -130%); }
.btn.pill:hover .pill__icon i:nth-child(2) { transform: translate(0, 0); }
.pill__ripple { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 62%); }
.pill__label, .pill__icon { z-index: 2; }

/* the legal line: there because the law asks for it, not to be read */
.scene--exit .ftr__legal { font-size: 9px; letter-spacing: 0.02em; color: rgba(241, 230, 210, 0.3); }
.ftr__legal .ftr__mail { color: inherit; text-decoration: none; pointer-events: auto; }