/* heyorb.ai, "6,000 thoughts": one scene (js/scene.js). Still (reduced motion, no
   JavaScript, a short screen): the sentence, the thoughts that mattered, the same thoughts
   as nameless voice memos and as named stars, one under another. Live (.live, set by
   scene.js): one place on the screen, held while the page scrolls through it, and specks
   carrying the words from one part to the next. The words that carry the story are gold
   (Damian, 2026-11-11: colour, not another typeface). */
.scene .layer + .layer { margin-top: clamp(80px, 10vw, 136px); }
.stmt { margin: 0; max-width: 13.5em; font: 600 var(--t-hero)/1.05 var(--f-display); letter-spacing: -0.03em; }
.stmt .w.count { display: inline-block; text-align: left; white-space: nowrap; }
.gone { color: var(--ink-3); }
.src { margin: 28px 0 0; font-size: var(--t-fine); color: var(--ink-2); }
.src a { color: inherit; }
.cap { margin: 0 0 26px; max-width: 14em; font: 700 var(--t-head)/1.05 var(--f-display); letter-spacing: -0.025em; text-wrap: balance; }
.cap.gold { color: var(--ember-hi); }
.key { font-style: normal; color: var(--ember-hi); }
.lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font: 500 var(--t-big)/1.3 var(--f-display); letter-spacing: -0.015em; color: var(--ink); }
.memos { margin: 0; padding: 0; list-style: none; max-width: 700px; border-top: 1px solid var(--line); font-size: var(--t-lead); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.memos li { display: grid; grid-template-columns: minmax(0, 1fr) 6.2em 2.8em; gap: 12px; align-items: baseline; padding: 17px 0; border-bottom: 1px solid var(--line); }
.memos b { font-weight: 500; color: var(--ink-2); }
.memos span:last-child { text-align: right; }

/* the little map: three named stars, and the thoughts about the same things beside them */
.zone { position: relative; height: 300px; max-width: 860px; }
.zone svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zone line { fill: none; stroke: rgba(255, 240, 214, .32); stroke-width: 1; }
.st, .ft { position: absolute; width: 0; height: 0; }
.st i, .ft i { position: absolute; border-radius: 50%; }
.st i { left: -4.5px; top: -4.5px; width: 9px; height: 9px; background: #FFF6E2; box-shadow: 0 0 0 4px rgba(245, 216, 154, .14), 0 0 18px 6px rgba(245, 216, 154, .34); transform: scale(var(--s, 1)); }
.ft i { left: -3px; top: -3px; width: 6px; height: 6px; background: rgba(255, 246, 226, .8); box-shadow: 0 0 10px 3px rgba(245, 216, 154, .2); }
.st b, .ft b { position: absolute; left: 15px; top: 0; transform: translateY(-50%); white-space: nowrap; }
.st b { font: 600 16px var(--f-text); color: var(--ink); }
.ft b { left: 12px; font: 500 13.5px var(--f-text); color: var(--ink-3); }
.ft.l b { left: auto; right: 12px; }
.st1 { left: 8%; top: 26%; } .st2 { left: 64%; top: 10%; } .st3 { left: 36%; top: 82%; }
.ft1 { left: 24%; top: 60%; } .ft2 { left: 90%; top: 40%; } .ft3 { left: 62%; top: 64%; } .ft4 { left: 14%; top: 100%; }
.fx { display: none; }

@media (max-width: 759px) {
  .zone { height: 210px; }
  .st b { font-size: 14.5px; }
  .ft b { display: none; }
  .memos li { padding: 14px 0; }
}

/* ---------- live: held in place while the page scrolls through three screens */
.scene.live { height: 400vh; height: 400svh; }
.live .pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.live .fx { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.live .layer { position: absolute; left: 0; right: 0; }
.live .layer + .layer { margin-top: 0; }
.live .l1 { top: calc(50% + var(--bar) / 2); transform: translateY(-58%); }
.live .l2, .live .l3, .live .l4 { top: calc(var(--bar) + 12vh); top: var(--later-top, calc(var(--bar) + 12svh)); }
.live .stmt .w { opacity: calc(.26 + .74 * var(--lit, 0)); }
.live .cap, .live .lines, .live .memos, .live .st, .live .ft { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .live .st i { animation: star-tw 3.4s ease-in-out infinite; }
  .live .st2 i { animation-delay: -1.1s; } .live .st3 i { animation-delay: -2.3s; }
}
@keyframes star-tw { 50% { opacity: .72; } }
@media print {
  .scene.live { height: auto; }
  .live .pin { position: static; height: auto; overflow: visible; }
  .live .layer { position: static; transform: none; }
  .live .layer + .layer { margin-top: 48px; }
  .live .cap, .live .lines, .live .memos, .live .st, .live .ft, .live .gone, .live .l1 { opacity: 1 !important; }
  .live .fx { display: none; }
}