/* VISNE LAB 1.0.4 — approved Hybrid V3.1 visual restoration */
:root {
  --v31-paper: #f3eee7;
  --v31-paper-2: #eee8e0;
  --v31-paper-3: #e7dfd6;
  --v31-ink: #262126;
  --v31-muted: #675d63;
  --v31-micro: #655159;
  --v31-dark: #1b171c;
  --v31-dark-2: #211b21;
  --v31-dark-3: #2a2228;
  --v31-dark-text: #eee9ec;
  --v31-dark-muted: #9c939a;
}

html, body { max-width: 100%; overflow-x: clip; }
body { color-scheme: only light; }

/* One site-header grammar across production surfaces. */
.topline,
.nav,
.world-nav {
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid rgba(132, 99, 111, .22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.prod-nav,
.navlinks,
.release-desktop-nav { display: flex; align-items: center; gap: 24px; }
.release-desktop-nav a { color: inherit; font-size: 12px; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.world-nav .release-desktop-nav { margin-left: auto; }
.world-nav .world-story-tools { display: flex; align-items: center; gap: 14px; margin-left: 20px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.16); }

/* Exact production sequence and V3.1 eye-comfort surfaces. */
.entry,
.systems,
.field-note,
.project { background-color: var(--v31-dark); color: var(--v31-dark-text); }
.systems { background-color: var(--v31-dark-2); }
.field-note { background-color: var(--v31-dark-3); }
.project { background-color: var(--v31-dark); }
.chamber,
.method { background-color: var(--v31-paper); color: var(--v31-ink); }
.method { background-color: var(--v31-paper-2); }
.entry,
.chamber,
.systems,
.field-note,
.method,
.project { position: relative; isolation: isolate; overflow: clip; }
.entry > *,
.chamber > *,
.systems > *,
.field-note > *,
.method > *,
.project > * { position: relative; z-index: 1; }

/* Corridors live in normal section space, so the following section cannot cover them. */
.entry { padding-bottom: 220px; }
.entry::after,
.field-note::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: 220px;
  transform: none;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(42,34,40,.52) 32%, var(--v31-paper) 100%);
}
.chamber { padding-bottom: 120px; }
.chamber::after,
.method::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: 120px;
  transform: none;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(112,87,95,.10) 32%, var(--v31-dark-2) 100%);
}
.field-note { padding-bottom: 220px; }
.field-note::after { background: linear-gradient(180deg, transparent 0%, rgba(42,34,40,.45) 32%, var(--v31-paper-2) 100%); }
.method { padding-bottom: 120px; }
.method::after { background: linear-gradient(180deg, transparent 0%, rgba(112,87,95,.10) 32%, var(--v31-dark) 100%); }
.systems::after,
.project::after { content: none; }

.chamber :is(p, li, .muted, .system-copy),
.method :is(p, li, .muted, .system-copy) { color: var(--v31-muted); }
.chamber :is(.eyebrow, .sysline, .micro, small),
.method :is(.eyebrow, .sysline, .micro, small) { color: var(--v31-micro); }
.entry :is(p, li, .muted, .sysline, .micro, small),
.systems :is(p, li, .muted, .sysline, .micro, small),
.field-note :is(p, li, .muted, .sysline, .micro, small),
.project :is(p, li, .muted, .sysline, .micro, small) { color: var(--v31-dark-muted); }
.entry-actions { display: none !important; }

/* Reading pages remain warm workspaces. */
body:not(.lab-home):not([class*="world-"]) .page-hero,
body:not(.lab-home):not([class*="world-"]) main,
body:not(.lab-home):not([class*="world-"]) section { background-color: var(--v31-paper); color: var(--v31-ink); }
body:not(.lab-home):not([class*="world-"]) .page-hero p,
body:not(.lab-home):not([class*="world-"]) section p { color: var(--v31-muted); }

/* System Worlds: dark entry, light reading layers, contained story controls. */
body[class*="world-"] { background: var(--v31-paper); }
body[class*="world-"] .world-nav { background: rgba(27,23,28,.92); color: var(--v31-dark-text); }
body[class*="world-"] main,
body[class*="world-"] .layer { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; }
body[class*="world-"] .layer:not(.world-entry):not(.return) { background-color: var(--v31-paper); color: var(--v31-ink); }
body[class*="world-"] :is(.system-map, .architecture-map, .world-grid, .evidence-grid, .layer-grid) { min-width: 0; max-width: 100%; overflow: clip; }
body[class*="world-"] :is(canvas, svg, img) { max-width: 100%; }

@media (max-width: 1100px) and (min-width: 901px) {
  .prod-nav,
  .navlinks,
  .release-desktop-nav { gap: 18px; }
}

@media (max-width: 900px) {
  .prod-nav,
  .navlinks,
  .release-desktop-nav { display: none !important; }
  .world-nav .world-story-tools { display: none; }
  .world-nav { min-width: 0; padding-inline: 16px; }
  body[class*="world-"] .layer { padding-inline: 20px; overflow: clip; }
  body[class*="world-"] :is(.system-map, .architecture-map, .world-grid, .evidence-grid, .layer-grid) { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .topline,
  .nav,
  .world-nav { transition: none !important; }
}