/* Page shell for the 3D concepts: full-bleed scene, copy anchored bottom-left. */
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; }

.scrim {
  position: fixed;
  inset: auto 0 0 0;
  height: 55vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgb(18 8 31 / 0.88), rgb(18 8 31 / 0.55) 45%, rgb(18 8 31 / 0));
}

.page { justify-content: space-between; }
.nav { position: relative; z-index: 3; }

.copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 780px;
  padding: 0 var(--gutter) max(40px, 7vh);
}
h1 { font-size: clamp(38px, min(5vw, 8.5vh), 80px); }
.lede { font-size: clamp(16px, 1.3vw, 18px); max-width: 38ch; }

/* Concept switcher lives in the nav for these pages. */
.switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgb(17 10 32 / 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgb(241 238 250 / 0.14);
  font: 500 11px/1 var(--mono);
  white-space: nowrap;
  pointer-events: auto;
}
.switch .tag { padding: 0 6px 0 8px; color: rgb(241 238 250 / 0.45); text-transform: uppercase; letter-spacing: 0.08em; }
.switch a { color: var(--muted); padding: 8px 10px; border-radius: 999px; text-decoration: none; }
.switch a:hover { color: var(--ink); }
.switch a[aria-current='page'] { background: var(--ink); color: var(--bg); }

@media (max-width: 700px) {
  .nav { flex-wrap: wrap; row-gap: 12px; }
  .switch .tag { display: none; }
  .copy { gap: 12px; padding-bottom: 28px; }
}