/* The Cage: the first screen is the lab bench. The picture is the chamber in section; code puts on it only what is
   live: the lever's swing, the falling pellet, the stash in the tray, the dopamine level in the tube, the lamp, and
   the record on the paper that leaves the drum and runs across the screen. Every position is measured off
   art/site/hero-wide-3.png (1672 x 941) and art/site/hero-tall.png (1024 x 1536), in percent of the picture. */
.lab { position: relative; padding-top: 14px; }
.lab-grid { display: grid; grid-template-columns: minmax(0, 520px) 1fr; gap: var(--s4); align-items: start; position: relative; z-index: 3; }
.lab-copy { display: grid; gap: 15px; align-content: start; }
.name { margin: 4px 0 0; font: 400 var(--name-size, 74px)/0.94 var(--display); letter-spacing: -0.02em; }
.name span { display: block; white-space: nowrap; }
.head { margin: 0; font: 400 32px/1.15 var(--serif); letter-spacing: -0.01em; }
.head em { font-style: normal; color: var(--amber-deep); }
.lede { margin: 0; max-width: 34em; }
.acts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.lab-copy .ca { margin-top: 6px; }

/* the last move, on its own sheet at the top right, above the chamber (the tube breaks out beside it) */
.card {
  justify-self: var(--card-side, start); width: 380px; margin-top: 6px; background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); padding: 22px 32px; display: grid; gap: 10px; position: relative;
}
.card-top { margin: 0; display: flex; justify-content: space-between; gap: var(--s2); font: 600 16px/1.2 var(--sans); }
.card-top span:last-child { color: var(--ink-2); font-weight: 500; }
.card-act { margin: 0; font: 400 30px/1.05 var(--display); }
.card-act[data-kind="PRESS"] { color: var(--red); }
.card-act[data-kind="EAT"] { color: var(--amber-deep); }
.card-why { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink-2); min-height: calc(3 * 1.45em); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-nums { margin: 6px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 12px; gap: var(--s1); position: relative; }
.card-nums::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.card-nums dt { font: 600 16px/1.2 var(--sans); color: var(--ink-2); }
.card-nums dd { margin: 4px 0 0; font: 500 18px/1.2 var(--sans); white-space: nowrap; }
.card.flash { animation: cardin 260ms var(--ease-out); }
@keyframes cardin { from { transform: translateY(-4px); } to { transform: none; } }

/* the stage: right-aligned to the window edge; JS sets its top so the paper runs under the copy */
.stage { position: absolute; right: 0; top: var(--stage-top, 300px); width: var(--stage-w, min(820px, 60vw)); aspect-ratio: 1672 / 941; z-index: 1; }
.stage-img { width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%); mask-image: linear-gradient(90deg, transparent, #000 3%); }
.stage picture { display: block; width: 100%; height: 100%; }
.frame { position: absolute; left: 1.2%; right: 0.6%; top: 19.5%; bottom: 18.2%; pointer-events: none; z-index: 1; }
.frame::before, .frame::after { content: ""; position: absolute; border: 1.5px solid var(--red); }
.frame::before { left: 0; top: 0; bottom: 0; width: 64.6%; border-right: 0; }
.frame::after { right: 0; top: 0; bottom: 0; width: 25%; border-left: 0; }
.tube { position: absolute; left: 66.95%; width: 6.5%; top: 17.6%; height: 38.4%; overflow: hidden; border-radius: 3px; }
.tube-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--level, 50%);
  background: linear-gradient(90deg, rgba(196, 128, 8, 0.82), rgba(240, 178, 40, 0.86) 45%, rgba(255, 214, 120, 0.82) 62%, rgba(206, 140, 14, 0.86));
  box-shadow: inset 0 3px 0 rgba(255, 236, 190, 0.9); transition: height 700ms cubic-bezier(0.45, 0, 0.2, 1); mix-blend-mode: multiply;
}
.lamp { position: absolute; left: 46.83%; top: 47.08%; width: 6.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 60, 0.55), rgba(255, 196, 60, 0) 65%); mix-blend-mode: screen; opacity: 0.55; transition: opacity 300ms; }
.lamp.dim { opacity: 0; }
.lamp.bright { opacity: 1; }
.lever { position: absolute; width: 9.4%; height: auto; left: 11.18%; top: 51.22%; transform-origin: 25.68% 85.33%;
  transform: translate(-25.68%, -85.33%) rotate(var(--lever, 0deg)); transition: transform 240ms var(--ease-out); }
.lever.down { --lever: 34deg; }
.tray { position: absolute; left: 18.2%; width: 10.4%; top: 61.4%; height: 3.2%; display: flex; justify-content: center; align-items: flex-end; gap: 0; }
.tray img { width: 22%; height: auto; margin: 0 -2.5%; transition: transform 300ms var(--ease-out), opacity 300ms; }
.tray img.go { transform: scale(0.2); opacity: 0; }
.pellet-fall { position: absolute; width: 2.1%; height: auto; left: 24.4%; top: 54%; transform: translate(-50%, 0); opacity: 0; pointer-events: none; }
.pellet-fall.drop { animation: drop 460ms cubic-bezier(0.5, 0, 0.75, 0) forwards; }
@keyframes drop {
  0% { opacity: 1; transform: translate(-50%, 0); }
  80% { opacity: 1; transform: translate(-90%, 380%); }
  90% { transform: translate(-95%, 330%); }
  100% { opacity: 0; transform: translate(-100%, 380%); }
}

/* the paper: from the left edge of the window to where it leaves the drum (90% of the picture) */
.paper { position: absolute; left: 0; top: var(--paper-top, 680px); height: var(--paper-h, 60px); width: var(--paper-w, 70vw); z-index: 2; }
.paper canvas { display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
.pen { position: absolute; width: var(--pen-w, 30px); height: auto; left: var(--pen-x, 80%); top: var(--pen-y, 0); transform: translate(-23.9%, -99.6%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38%); mask-image: linear-gradient(180deg, transparent 0, #000 38%); z-index: 3; pointer-events: none;
  transition: top 160ms var(--ease-out); }
.pen.tremor { animation: tremor 140ms steps(2) 3; }
@keyframes tremor { 50% { margin-left: 1px; } }
.rule { position: absolute; left: 0; right: 0; top: var(--rule-top, 760px); display: flex; align-items: center; gap: var(--s3); margin: 0 auto;
  font: 600 16px/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; z-index: 2; }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: var(--ink); }
.lab-spacer { height: var(--lab-h, 800px); }

/* ---------- below the first screen ---------- */
.counts { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.counts::before, .counts::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink); }
.counts::before { top: 0; } .counts::after { bottom: 0; }
.counts div { display: grid; gap: 6px; padding: var(--s3) var(--s2) var(--s3) 0; position: relative; }
.counts span { font: 400 56px/1 var(--display); }
.counts small { font: 600 16px/1.2 var(--sans); color: var(--ink-2); }
.split { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s5); }
.stat { display: grid; gap: var(--s1); align-content: start; }
.stat-label { margin: 0; font: 600 16px/1.3 var(--sans); }
.stat-big { margin: 0; font: 400 64px/1 var(--display); }
.stat-note { margin: 0; color: var(--ink-2); font-size: 16px; min-height: 1.5em; }
.sec-head.row { display: flex; justify-content: space-between; align-items: end; gap: var(--s4); }
.sec-head.row > div { display: grid; gap: var(--s2); }
.moves { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.moves li { background: var(--paper); border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: var(--s4); display: grid; gap: 10px; align-content: start; min-height: 220px; }
.mv-top { display: flex; justify-content: space-between; gap: var(--s2); font: 600 16px/1.2 var(--sans); color: var(--ink-2); margin: 0; }
.mv-act { margin: 0; font: 400 30px/1.05 var(--display); }
.mv-act.PRESS { color: var(--red); }
.mv-act.EAT { color: var(--amber-deep); }
.mv-why { margin: 0; font-size: 17px; line-height: 1.5; }
.mv-meta { margin: auto 0 0; font-size: 16px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.four { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); counter-reset: st; }
.four li { counter-increment: st; position: relative; padding-top: var(--s3); display: grid; gap: var(--s1); align-content: start; font-size: 17px; }
.four li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); }
.four li::before { content: counter(st, decimal-leading-zero); font: 400 44px/1 var(--display); color: var(--red); }
.four b { display: block; font: 400 26px/1.15 var(--serif); }
.fees { margin: var(--s5) 0 0; max-width: 62em; padding: var(--s3); background: var(--paper); border: 1px solid var(--ink); }

@media (min-width: 1500px) {
  .lab-grid { grid-template-columns: minmax(0, 600px) 1fr; }
  .lab { --name-size: 88px; }
  .card { width: 420px; }
}
@media (max-width: 1240px) {
  .lab { --name-size: 66px; }
  .lab-grid { grid-template-columns: minmax(0, 470px) 1fr; }
  .card { width: 310px; }
  .moves { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- phone: the chamber first, full width, with its live paper; then the copy; the last move pinned ---------- */
@media (max-width: 860px) {
  .lab { padding-top: 0; display: flex; flex-direction: column; padding-bottom: 150px; }
  .stage { position: relative; right: auto; top: auto; width: 100%; order: -1; margin: calc(-0.13 * 100vw * 941 / 1672) 0 var(--s3); }
  .lab-copy .over { letter-spacing: 0.12em; }
  .lab-grid { grid-template-columns: 1fr; gap: var(--s3); }
  .lab { --name-size: 50px; }
  .name span { white-space: normal; }
  .head { font-size: 26px; }
  .acts { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .ca-top { grid-template-columns: 1fr; }
  .ca-row { grid-template-columns: 1fr 1fr; }
  .ca-row [data-link="pump"] { grid-column: 1 / -1; }
  .card { position: fixed; left: 10px; right: 10px; bottom: 10px; width: auto; margin: 0; z-index: 40; padding: 12px 22px; gap: 4px; box-shadow: 2px 2px 0 var(--ink); }
  .card { grid-template-columns: minmax(0, 1fr); }
  .card-top { font-size: 16px; }
  .card-top span:last-child { display: none; }
  .card-act { font-size: 22px; }
  .card-why { -webkit-line-clamp: 1; min-height: 1.45em; font-size: 16px; }
  .card-nums { display: flex; flex-wrap: wrap; gap: 2px 14px; padding-top: 6px; margin-top: 2px; }
  .card-nums div { display: flex; gap: 6px; align-items: baseline; }
  .card-nums dt, .card-nums dd { font-size: 16px; margin: 0; }
  .card-nums dt { font-weight: 500; }
  .card-nums dd { font-weight: 650; }
  .rule { display: none; }
  .counts { grid-template-columns: repeat(3, 1fr); }
  .counts span { font-size: 44px; }
  .split, .moves, .four { grid-template-columns: 1fr; }
  .sec-head.row { flex-direction: column; align-items: start; }
  .stat-big { font-size: 52px; }
}
@media (max-width: 360px) {
  .lab { --name-size: 44px; }
  .counts { grid-template-columns: repeat(2, 1fr); }
  .card-nums div:last-child { display: none; }
}