/* The story mockup v2 (2026-10-11): v1's stage, type, gate and index (../story/story.css), plus the tesseract's pieces. */
#gl { visibility: visible; }
.ov button { pointer-events: auto; }

/* WHO: the one line, beyond the F; the first two lines carry the identity */
.oneline { top: 24%; font-size: clamp(22px, 7vw, 54px); gap: .1em; transform-origin: 50% 40%; }
.oneline span:nth-child(1), .oneline span:nth-child(2) { font-size: 1.32em; line-height: 1.18; font-weight: 800; }
.oneline span:nth-child(3) { margin-top: .5em; }
.oneline span:nth-child(n+3) { font-weight: 600; color: var(--bone); }
/* the line that sweeps the mark from ASCII to wireframe to solid; physical px on purpose (JS moves it in screen space) */
#sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--bone);
  box-shadow: 0 0 14px 3px rgba(131, 107, 255, .6), 0 0 42px 10px rgba(131, 107, 255, .25); visibility: hidden; }

/* WHAT: a phone puts the tesseract above the contents; a wide screen puts it to their left */
.what-box { position: absolute; inset: 0; transform-origin: 50% 50%; }
#what-h { top: 47%; font-size: clamp(30px, 9vw, 72px); }
.toc { top: calc(47% + clamp(30px, 9vw, 72px) * 1.3); font-size: clamp(17px, 4.9vw, 30px); }
.toc li { padding: 9px 0; }
@media (min-aspect-ratio: 4/5) {
  #what-h { top: 20%; inset-inline-start: 8vw; inset-inline-end: 52vw; }
  .toc { top: calc(20% + clamp(30px, 9vw, 72px) * 1.3); inset-inline-start: 8vw; inset-inline-end: 52vw; font-size: clamp(17px, 2.2vw, 30px); }
  #what-h { font-size: clamp(30px, 4.4vw, 72px); }
}

/* the end of the slice */
.endcard { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px;
  padding: 0 24px; background: rgba(7, 7, 8, .94); visibility: hidden; transform-origin: 70% 50%; }
.endcard p { margin: 0; }
.endcard .mono { font-size: 13px; color: var(--ash); }
.endcard .big { font-size: clamp(28px, 8vw, 64px); text-wrap: balance; }
.endcard .sub { font-family: var(--disp); font-weight: 600; color: var(--ash); font-size: clamp(17px, 4.6vw, 28px); }
.ghost { margin-top: 18px; background: var(--tile); border: 1px solid var(--tile-edge); padding: 12px 22px; font-family: var(--disp); font-weight: 600;
  font-size: 17px; cursor: pointer; clip-path: var(--chamfer); transition: transform .2s, border-color .2s; }
.ghost:hover { transform: translateY(-4px); border-color: var(--violet); }
.ghost:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }
@media (min-width: 900px) { .endcard { padding: 0 9vw; } }

/* autoplay / manual */
#mode { position: absolute; top: max(14px, env(safe-area-inset-top)); inset-inline-end: 14px; padding: 0; background: none; border: 0; cursor: pointer; z-index: 8; }
#mode .flap { min-width: 0; font-size: 12px; padding: 5px 10px; }
#mode[aria-pressed="true"] .flap { border-color: var(--violet); }
#sheet li button { font-size: 15px; }