/* ============================================================
   OFG — INTERIOR PAGES  (game detail · about · 404)
   All themed by the fader via --c-* variables.
   ============================================================ */

.page {
  min-height: 100dvh;
  padding: calc(var(--gutter) + 3.2rem) var(--gutter) var(--space-7);
  background: var(--c-bg, var(--ofg-cream));
  color: var(--c-ink-panel, var(--ofg-black));
}
.page__num { color: var(--room-accent, var(--ofg-pink)); margin: 0 0 var(--space-3); }
.page__title {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(2.6rem, 1rem + 11vw, 10rem); line-height: 0.9;
  letter-spacing: var(--tracking-tight); text-transform: uppercase; margin: 0;
}
.page__lead {
  font-family: var(--font-display); font-weight: var(--weight-med);
  font-size: var(--step-lead); text-transform: uppercase; margin: 0.5em 0 0;
  color: var(--room-accent, var(--ofg-coral)); letter-spacing: var(--tracking-tight);
}

.back-link {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin-bottom: var(--space-5); color: var(--c-ink-panel, var(--ofg-navy));
}
.back-link .arw { transition: transform var(--dur-fast) var(--ease-out); }
.back-link:hover .arw { transform: translateX(-0.3em); }

/* ---- GAME DETAIL ---- */
.detail__meta {
  list-style: none; padding: 0; margin: var(--space-4) 0 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
}
.detail__meta .status { color: var(--room-accent); }
.beats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  margin: var(--space-6) 0;
}
.beat {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  border: var(--pixel) solid var(--room-accent, var(--ofg-coral));
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--step-lead); text-transform: uppercase;
}
.beat:nth-child(2) { background: var(--room-accent); color: var(--ofg-black); }

/* ---- ABOUT ---- */
.about__statement {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(2.4rem, 1rem + 8vw, 7rem); line-height: 0.95;
  text-transform: uppercase; letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-6); max-width: 18ch;
}
.about__statement em { color: var(--room-accent, var(--ofg-coral)); font-style: normal; }
.about__body { max-width: 42ch; }
.about__body p { text-transform: uppercase; letter-spacing: 0.02em; }
.about__foot { margin-top: var(--space-7); }

/* ---- 404 ---- */
.void {
  min-height: 100dvh; display: grid; place-content: center; text-align: center;
  gap: var(--space-4); padding: var(--gutter);
  background: var(--c-bg, var(--ofg-black)); color: var(--c-ink-panel, var(--ofg-cream));
}
.void__code {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(5rem, 2rem + 22vw, 18rem); line-height: 0.85;
  color: var(--ofg-coral); text-shadow: 0 0 40px rgba(255,107,103,var(--glow,0));
}
.void__actor { width: calc(var(--pixel)*10); height: calc(var(--pixel)*10); margin: 0 auto; }

@media (max-width: 720px) {
  .beats { grid-template-columns: 1fr; }
}