/**
 * Era: 2037 — "Fluid"
 * Content reflows around viewer attention. Marginalia floats above body
 * at varied z-depths. Baseline grid becomes faintly visible — the
 * typographic substrate is now part of the aesthetic.
 *
 * Family: HUD-TRANSLUCENT × BRUTALIST-MONUMENTAL modifier.
 * Mood: gestural, weighty, monumental glass.
 *
 * The first chromatic separation appears here — 1px on emphatic words.
 * Atmospheric haze visible at viewport scale.
 */

.era-2037 {
  /* Slightly deeper near-black for atmospheric depth */
  --sf-bg: #060a14;
  --sf-text: #e8eef5;          /* same as 2036 */
  --sf-accent: #5fbfff;
  --sf-muted: #94aec8;
  --sf-border: rgba(255, 255, 255, 0.22);

  --era-bg: var(--sf-bg);
  --era-text: var(--sf-text);
  --era-accent: var(--sf-accent);
  --era-muted: var(--sf-muted);
  --era-border: var(--sf-border);

  /* Cyan structural; glow stronger than 2036 */
  --sf-neon: var(--sf-accent);
  --sf-neon-dim: #3d8acc;
  --sf-neon-glow: 0 0 3px rgba(95, 191, 255, 0.5);
  --sf-neon-glow-strong: 0 0 8px rgba(95, 191, 255, 0.6);

  /* Frames more pronounced — content reads as floating slabs */
  --sf-frame-color: rgba(255, 255, 255, 0.7);
  --sf-frame-width: 1px;
  --sf-frame-corner: 12px;
  --sf-frame-bg: rgba(10, 20, 40, 0.35);

  --sf-scanline-opacity: 0;

  /* === Brand-evolution ladder values === */
  --sf-border-overlay-alpha: 0.30;
  --sf-border-overlay-color: rgba(255, 255, 255, 0.7);
  --sf-bg-mesh-opacity: 0.10;
  --sf-translucent-panel-alpha: 0.35;
  --sf-translucent-panel-bg: rgba(10, 20, 40, 0.35);
  --sf-translucent-panel-stroke: rgba(255, 255, 255, 0.7);
  --sf-glow-strength: 3;
  --sf-chromatic-aberration: 1px;
  --sf-haze-intensity: 0.10;
  --sf-baseline-grid-visible: 0.08;
  --sf-baseline-grid-color: rgba(255, 255, 255, 0.08);
  --sf-link-luminous: 0.45;
}

.era-2037 body {
  font-family: "Inter", "InterVariable", -apple-system, "Helvetica Neue", sans-serif;
  font-variation-settings: "wght" 380, "opsz" 14;
  color: var(--sf-text);
  background: var(--sf-bg);
  position: relative;
}

/* Atmospheric haze — stronger than 2036, BRUTALIST modifier active */
.era-2037 body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(20, 50, 80, 0.4) 0%, transparent 70%),
    var(--sf-bg-mesh-image);
  opacity: var(--sf-bg-mesh-opacity);
  pointer-events: none;
}

/* Faint baseline grid as substrate — only visible when you look for it */
.era-2037 body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--sf-baseline) - 1px),
    var(--sf-baseline-grid-color) calc(var(--sf-baseline) - 1px),
    var(--sf-baseline-grid-color) var(--sf-baseline)
  );
  background-size: 100% var(--sf-baseline);
  opacity: var(--sf-baseline-grid-visible);
  pointer-events: none;
}

.era-2037 .node-title {
  font-family: "Inter", sans-serif;
  font-variation-settings: "wght" 180, "opsz" 56;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  letter-spacing: -0.02em;
  color: var(--sf-text);
  /* Subtle chromatic separation on title — 1px split */
  text-shadow:
    calc(var(--sf-chromatic-aberration) * -1) 0 0 var(--sf-chromatic-magenta),
    var(--sf-chromatic-aberration) 0 0 var(--sf-chromatic-cyan),
    0 0 calc(var(--sf-glow-strength) * 2px) rgba(255, 255, 255, 0.2);
}

.era-2037 .node-meta {
  font-variation-settings: "wght" 400, "opsz" 11;
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sf-muted);
}

/* Links: stronger luminous halo */
.era-2037 .node-link {
  color: var(--sf-accent);
  border-bottom: none;
  text-shadow: 0 0 calc(var(--sf-glow-strength) * 1.5px)
               rgba(95, 191, 255, var(--sf-link-luminous));
  transition: text-shadow var(--sf-duration-med) var(--sf-ease);
}
.era-2037 .node-link:hover {
  text-shadow: 0 0 calc(var(--sf-glow-strength) * 3px)
               rgba(95, 191, 255, calc(var(--sf-link-luminous) + 0.3));
}

/* Marginalia: floating panels with depth — slight rotation, stronger
   backdrop-blur, position-relative for the floating feel.
   This is where "panels stack at different z-depths" begins. */
.era-2037 .pullquote,
.era-2037 .marginalia-aside,
.era-2037 .marginalia-pullquote,
.era-2037 blockquote {
  background: var(--sf-translucent-panel-bg);
  border: 1px solid var(--sf-translucent-panel-stroke);
  border-radius: var(--sf-frame-corner);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    0 0 calc(var(--sf-glow-strength) * 5px) rgba(95, 191, 255, 0.15),
    0 4px 24px rgba(0, 0, 0, 0.4);  /* depth shadow */
  position: relative;
  /* Minor parallax-ready transform; CSS-only */
  transform: translateZ(0);
}

/* Marginalia pull quote: gains chromatic separation on the opening
   character to signal "this is photonic, not paper" */
.era-2037 .pullquote::first-letter,
.era-2037 .marginalia-pullquote::first-letter {
  text-shadow:
    calc(var(--sf-chromatic-aberration) * -1) 0 0 var(--sf-chromatic-magenta),
    var(--sf-chromatic-aberration) 0 0 var(--sf-chromatic-cyan);
}

/* Government notices */
.era-2037 .government-notice {
  background: var(--sf-translucent-panel-bg);
  border: 1px solid var(--sf-translucent-panel-stroke);
  border-radius: var(--sf-frame-corner);
  font-family: inherit;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Intercept — purely archival now */
.era-2037 .intercept {
  background: rgba(10, 20, 40, 0.2);
  color: var(--sf-muted);
  font-family: var(--sf-font-mono);
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--sf-frame-corner);
}

/* Drop cap — kinetic settle implied (CSS sets final state) */
.era-2037 .dropcap::first-letter,
.era-2037 [data-dropcap]::first-letter {
  font-variation-settings: "wght" 180, "opsz" 144;
  font-size: 5em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.10em -0.1em -0.05em;
  color: var(--sf-text);
  text-shadow:
    calc(var(--sf-chromatic-aberration) * -1) 0 0 var(--sf-chromatic-magenta),
    var(--sf-chromatic-aberration) 0 0 var(--sf-chromatic-cyan);
}

/* The page knows where you're looking, and shifts toward you.
   (The actual gestural drag would need JS — this is the visual rest state.) */