/* Umbra — one pinned stage, five chapters.
   Without script the chapters read as plain text. With motion the stage pins
   beside them (above them on small screens) and the story plays as you scroll.
   With reduced motion each chapter carries its own still instead. */

.um-story { position: relative; border-top: 1px solid var(--rule); }
.um-stage, .um-still, .um-act { display: none; }

/* ---------- chapters: plain text first ---------- */

.um-ch { padding: 44px 0; border-top: 1px dotted var(--rule-2); }
.um-ch:first-child { border-top: 0; }
.um-k { margin-bottom: 14px; font-size: 11.5px; letter-spacing: 0.08em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.um-k b { font-weight: 400; color: var(--ink); }
.um-ch h2 { margin-bottom: 16px; font-size: clamp(21px, 2.5vw, 30px); font-weight: 500; line-height: 1.2; }
.um-t { max-width: 42ch; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }

/* the controls under a chapter: square keys that invert when pressed, as a menu does */
.um-act { margin-top: 22px; }
.um-act p { margin-bottom: 10px; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); max-width: 42ch; }
.um-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.um-key {
  min-width: 40px; height: 28px; padding: 0 10px;
  background: var(--paper); border: 1px solid var(--ink); border-radius: 0; box-shadow: 1px 1px 0 var(--ink);
  font-size: 12px; line-height: 1; cursor: pointer;
}
.um-key:hover { background: var(--ink); color: var(--paper); }
.um-key:active { transform: translate(1px, 1px); box-shadow: none; }

/* ---------- the stage ---------- */

.um-screen {
  display: flex; flex-direction: column; height: 100%;
  background: var(--paper); border: 1px solid var(--ink); box-shadow: 1px 1px 0 var(--ink);
}
.um-view { position: relative; flex: 1 1 auto; min-height: 0; }
.um-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.um-status {
  flex: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  height: 26px; padding: 0 10px; border-top: 1px solid var(--ink);
  font-size: 11px; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.um-status span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.um-status span:last-child { color: var(--ink-3); }

@media (prefers-reduced-motion: no-preference) {
  .js .um-story { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
  .js .um-stage {
    display: block; position: sticky; top: var(--bar-h); align-self: start; z-index: 2;
    height: min(calc(100svh - var(--bar-h)), 980px); padding: 28px 0;
  }
  .js .um-ch {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100svh - var(--bar-h));
    padding: 56px 0 56px clamp(32px, 4.5vw, 64px); border-top: 0;
  }
  .js .um-act { display: block; }
}

/* small screens: the stage becomes a strip pinned under the menu bar, and the chapters pass beneath it on paper */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .js .um-story { display: block; margin: 0 calc(-1 * var(--gutter)); }
  .js .um-stage {
    height: clamp(260px, 48svh, 520px); padding: 12px var(--gutter) 14px;
    background: var(--bg); border-bottom: 1px solid var(--ink);
  }
  .js .um-chapters { background: var(--paper); }
  .js .um-ch {
    min-height: calc(100svh - var(--bar-h) - clamp(260px, 48svh, 520px));
    padding: 36px var(--gutter) 40px; border-top: 1px dotted var(--rule-2);
  }
  .js .um-ch:first-child { border-top: 0; }
}

/* reduced motion: no pinned stage; each chapter shows its own settled still */
@media (prefers-reduced-motion: reduce) {
  .js .um-ch {
    display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 0 clamp(32px, 4.5vw, 64px); align-items: center;
    padding: 56px 0;
  }
  .js .um-still {
    display: block; grid-column: 1; grid-row: 1; width: 100%; aspect-ratio: 5 / 4;
    background: var(--paper); border: 1px solid var(--ink); box-shadow: 1px 1px 0 var(--ink);
  }
  .js .um-txt { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .js .um-ch { grid-template-columns: minmax(0, 1fr); gap: 26px 0; padding: 44px 0; }
  .js .um-still { aspect-ratio: 6 / 5; }
  .js .um-txt { grid-column: 1; grid-row: 2; }
}

/* ---------- who it is for, and the rule ---------- */

.um-prose {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 30px 40px; align-items: baseline;
  padding: 72px 0 88px; border-top: 1px solid var(--rule);
}
.um-prose h2 { font-size: 12px; font-weight: 400; line-height: 1.75; color: var(--ink-3); }
.um-prose p { margin-bottom: 0; }

@media (max-width: 900px) {
  .um-prose { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 52px 0 64px; }
  .um-prose p + h2 { margin-top: 22px; }
}

@media print {
  .um-stage, .um-act { display: none !important; }
}