.page {
  position: relative;
  min-height: 100dvh;
  padding: var(--space-void);
}

.page--entry {
  padding: 0;
}

.page--entry > * {
  position: absolute;
}

.anchor-tl {
  position: fixed;
  top: var(--space-anchor);
  left: var(--space-anchor);
}

.anchor-tr {
  position: fixed;
  top: var(--space-anchor);
  right: var(--space-anchor);
}

.anchor-bl {
  position: fixed;
  bottom: var(--space-anchor);
  left: var(--space-anchor);
}

.anchor-br {
  position: fixed;
  bottom: var(--space-anchor);
  right: var(--space-anchor);
}

.content-block {
  max-width: var(--max-content);
  padding-top: var(--space-void);
  padding-left: var(--space-anchor);
  padding-right: 0;
  padding-bottom: 0;
}

.track-name {
  font-weight: normal;
  text-transform: lowercase;
}

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

@media (max-width: 768px) {
  .anchor-tr, .anchor-bl, .anchor-br {
    position: absolute;
    padding: 1.5rem;
  }
  /* anchor-tl stays fixed — back-link must persist while scrolling */
  .anchor-tl {
    padding: 1.5rem;
    z-index: 20; /* above content (z:0) and nav (z:10) */
    background-color: var(--bg); /* block scrolling text from bleeding through */
  }

  .content-block {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 5rem; /* clears horizontal bottom nav (~44px + 1rem) */
  }
}

.ascii-anchor {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'iA Writer Mono S', 'Courier Prime', 'Courier New', monospace;
  /* 90vw / 72 ≈ font-size where 120 cols × 0.6ch just fits the viewport */
  font-size: clamp(0.3rem, calc(90vw / 72), 0.9rem);
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--text-muted);
  white-space: pre;
  pointer-events: none;
  user-select: none;
  opacity: 0.85;
}

#ascii-canvas {
  display: block;
  /* canvas renders via JS — no CSS sizing needed */
}

/* Mobile ascii: full-screen flex container so centering is unambiguous.
   Must come AFTER .ascii-anchor base rule — earlier @media block loses
   to base rule with equal specificity at later source order. */
@media (max-width: 768px) {
  .ascii-anchor {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .ascii-anchor pre {
    /* scale the pre (not the container) — avoids translate centering math */
    transform: scale(1.6);
    flex-shrink: 0;
  }
}