/*
 * USOHONTO Lab — STATE 01 Network
 * Reuses parent tokens (tokens.css) and the existing .page-hero / .breadcrumb
 * modules from base.css / components.css. Only the differences from the
 * standard tall page-hero, and the new network frame, live here.
 */

.lab-hero.page-hero {
  min-height: auto;
  padding-bottom: var(--space-4);
  padding-top: var(--space-8);
}

.lab-hero.page-hero h1 {
  font-size: var(--text-section);
  margin: var(--space-6) 0 0;
  max-width: none;
}

.lab-network-section {
  border: var(--border);
  height: min(74svh, 46rem);
  margin: var(--space-8) auto var(--section-space);
  max-width: var(--content-max);
  overflow: hidden;
  position: relative;
  touch-action: none;
  width: calc(100% - (var(--page-gutter) * 2));
}

.lab-network-canvas {
  display: block;
  height: 100%;
  touch-action: none;
  width: 100%;
}

.lab-network-noscript {
  color: var(--color-muted);
  left: var(--space-6);
  line-height: var(--leading-body);
  max-width: 24rem;
  position: absolute;
  top: var(--space-6);
}

/* Rotating ?/! glyph — independent of the free-roam network above; no
   cursor interaction, so no touch-action override needed. */
.lab-rotate-section {
  border: var(--border);
  height: min(60svh, 32rem);
  margin: 0 auto var(--section-space);
  max-width: var(--content-max);
  overflow: hidden;
  position: relative;
  width: calc(100% - (var(--page-gutter) * 2));
}

.lab-rotate-canvas {
  display: block;
  height: 100%;
  width: 100%;
}

.lab-rotate-noscript {
  color: var(--color-muted);
  left: var(--space-6);
  line-height: var(--leading-body);
  max-width: 24rem;
  position: absolute;
  top: var(--space-6);
}

@media (max-width: 45rem) {
  .lab-hero.page-hero h1 {
    font-size: clamp(2.6rem, 10vw, 3.6rem);
    margin-top: var(--space-6);
  }

  .lab-network-section {
    height: min(64svh, 34rem);
    margin-top: var(--space-6);
  }

  .lab-rotate-section {
    height: min(48svh, 22rem);
  }
}