/* ATLAS · tokens/type.css
 * Typographic response to depth. Display type grows heavier and tighter
 * as the user descends.
 *
 * Requires `depth.css` loaded first (provides --display-weight, --display-tracking).
 */

.depth-display {
  font-family: var(--f-display, "Space Grotesk", serif);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  transition: font-weight var(--t-md, 400ms) var(--ease-depth, linear),
              letter-spacing var(--t-md, 400ms) var(--ease-depth, linear);
  font-variation-settings: "wght" var(--display-weight);
}

.depth-body {
  opacity: var(--body-opacity);
}

/* Act marker — the Roman numeral + name in the margin as you cross */
.act-marker {
  position: fixed; left: 24px; bottom: 24px; z-index: 40;
  font-family: var(--f-mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-depth, #CB6740);
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: color var(--t-md, 400ms) var(--ease-depth, linear);
}
.act-marker .act-n    { opacity: 0.65; font-weight: 500; }
.act-marker .act-name {
  font-family: var(--f-display, serif);
  font-size: 17px; font-weight: var(--display-weight);
  letter-spacing: -0.01em; text-transform: none;
  color: var(--text, #E8E6E1);
}

@media (max-width: 900px) {
  .act-marker { display: none; }
}