/* Chapters — scoped to .ch so catalogue tokens stay intact */
.ch {
  --void: #050506;
  --ink: #f5f8fc;
  --muted: rgba(245,248,252,.62);
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #000;
  color: #f5f8fc;
}
.ch .hero {
  position: absolute;
  right: -8%; top: 0; bottom: 0;
  width: 78%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
  filter: saturate(1.05) contrast(1.08);
}
.ch .hero.is-head { right: -4%; width: 72%; object-position: 18% 45%; }
.ch .veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #000 16%, rgba(0,0,0,.28) 48%, transparent 70%);
  pointer-events: none;
  z-index: 3;
}
#code .veil {
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.42) 12%, transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 26%);
}

.ch .type {
  position: relative; z-index: 4;
  max-width: 32rem;
  padding: 22vh var(--pad) 12vh;
}
.ch .type.is-strip {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--pad) 10vh;
  max-width: 28rem;
  background: linear-gradient(90deg, rgba(0,0,0,.82), transparent);
}
.ch .k { color: var(--accent); margin-bottom: 18px; }
.ch h1 {
  font-family: Michroma, "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 7vw, 88px);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: .92;
  margin-bottom: 22px;
  color: #f5f8fc;
}
.ch .lede { color: var(--muted); font-weight: 300; font-size: 16px; max-width: 36ch; margin-bottom: 28px; line-height: 1.5; }
.ch .ghost {
  display: inline-flex;
  border: 1px solid rgba(245,248,252,.55);
  padding: 12px 18px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}

.vial-card img {
  width: 92px; height: 248px;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.7));
}
.vial-card {
  position: absolute;
  right: var(--pad); bottom: 36px;
  z-index: 5;
  display: flex; align-items: end; gap: 16px;
  width: min(300px, 42vw);
}
#code .vial-card {
  left: var(--pad);
  right: auto;
  bottom: 28px;
}
#code .vial-card::before { display: none; }
.vial-card::before {
  content: "";
  position: absolute;
  left: 10px;
  width: 72px;
  height: 188px;
  bottom: 8px;
  z-index: 2;
  border-radius: 40% / 12%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(245,248,252,.28), transparent 30%, transparent 72%, rgba(var(--accent-rgb),.2));
  box-shadow: inset 0 0 0 1px rgba(213,228,244,.45);
}
.ch figcaption { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.ch figcaption b, .cap-list b {
  font-family: Michroma, "IBM Plex Sans", sans-serif; font-size: 13px; letter-spacing: .12em; font-weight: 400;
}
.ch figcaption span, .cap-list span { color: var(--accent); }
.ch figcaption em { color: rgba(245,248,252,.38); font-style: normal; }

.spark, .flow {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}
.motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  display: none;
  pointer-events: none;
}
.motion.is-on { display: block; }
.ch:has(.motion.is-on) .hero,
.ch:has(.motion.is-on) .flow,
.ch:has(.motion.is-on) .spark,
.ch:has(#vid-code.is-on) #dna,
.ch:has(#vid-code.is-on) .dna-hint,
.ch:has(#vid-sight.is-on) #iris { display: none; }
#code #dna,
#code .dna-hint { display: none; }
.motion.is-dna {
  display: block;
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  width: min(78vw, 86vh);
  height: min(139vw, 153vh);
  transform: translate(-45%, -51%) rotate(50deg);
  transform-origin: center center;
  object-fit: contain;
  object-position: center;
}
.motion.is-iris {
  right: 4%;
  left: auto;
  top: 50%;
  bottom: auto;
  width: min(78vh, 56vw);
  height: min(78vh, 56vw);
  transform: translateY(-50%);
  object-fit: contain;
}

.is-dna { background: #000; cursor: grab; }
.is-dna:active { cursor: grabbing; }
#dna {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  z-index: 2;
}
.dna-hint {
  left: auto;
  right: var(--pad);
  bottom: 8vh;
  transform: none;
}

#oral .capsule,
#oral .cap-glow,
#oral .cap-hint { display: none; }
.motion.is-cap {
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 62% 50%;
}
.cap-glow {
  position: absolute;
  left: 50%; top: 58%;
  width: 42vw; height: 28vh;
  transform: translate(-50%, 0);
  background: radial-gradient(ellipse, rgba(var(--accent-rgb),.22), transparent 68%);
  pointer-events: none;
}
.capsule {
  position: absolute;
  left: 58%; top: 50%;
  transform: translate(-40%, -50%);
  width: min(340px, 38vw);
  height: min(86vh, 760px);
  z-index: 6;
  cursor: grab;
  touch-action: none;
}
.capsule:active { cursor: grabbing; }
.cap-hint {
  position: absolute;
  left: 52%;
  bottom: 7vh;
  transform: translateX(-40%);
  z-index: 6;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb),.55);
  pointer-events: none;
}
#capWater, .cap-glass {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 999px;
}
#capWater { display: block; }
.cap-glass {
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(245,248,252,.32) 0%, transparent 16%, transparent 78%, rgba(var(--accent-rgb),.2) 100%),
    linear-gradient(180deg, rgba(245,248,252,.28) 0%, transparent 12%, transparent 86%, rgba(0,0,0,.4) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(213,228,244,.5),
    inset 14px 0 36px rgba(245,248,252,.12),
    0 0 56px rgba(var(--accent-rgb),.28),
    0 28px 48px rgba(0,0,0,.45);
}
.cap-word {
  position: absolute;
  left: 0; right: 0; top: 48%;
  font-family: Michroma, "IBM Plex Sans", sans-serif;
  font-size: clamp(9px, 1.1vw, 13px);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: #f5f8fc;
  z-index: 3;
  pointer-events: none;
}
.cap-list {
  position: absolute;
  right: var(--pad); bottom: 48px;
  z-index: 5;
  list-style: none;
  display: flex; flex-direction: column; gap: 16px;
}
.cap-list li { display: flex; flex-direction: column; gap: 4px; }

.is-eye { background: #000; }
#iris {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(78vh, 56vw);
  height: min(78vh, 56vw);
  display: block;
  z-index: 1;
}

@media (max-width: 860px) {
  .ch .hero, .ch .hero.is-head { width: 100%; right: 0; opacity: .55; }
  .ch .veil { background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.88) 70%); }
  .ch .type { padding-top: 18vh; }
  .vial-card { width: auto; }
  #code .type { padding-bottom: 30vh; }
  #code .motion.is-dna {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: 90vw;
    height: 160vw;
    transform: translate(-48%, -48%) rotate(48deg);
  }
  .capsule {
    left: 50%; top: 42%;
    transform: translate(-50%, -50%);
    width: min(200px, 48vw);
    height: 52vh;
  }
  #iris { right: 50%; transform: translate(50%, -50%); width: 78vw; height: 78vw; opacity: .9; }
  .cap-list { position: relative; padding: 0 var(--pad) 40px; }
  .cap-hint { left: 50%; bottom: 18vh; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}