/**
 * Era: 2038 — "Atmospheric"
 * The page becomes a scene. Borders dissolve into luminous fields.
 * Atmospheric haze is the substrate. Holographic chromatic separation
 * on emphatic words — the eye is the camera, the page is projected light.
 *
 * Family: HUD-TRANSLUCENT × BRUTALIST × atmospheric haze.
 * Mood: photonic, post-page, immersive.
 *
 * The narrative arc terminates here. Beyond 2038, design shifts genre
 * entirely — outside this spec.
 */

.era-2038 {
  /* Deepest near-black; gradient mesh does the visual work */
  --sf-bg: #04060e;
  --sf-text: #f0f4fa;          /* near-white, 18.5:1 on bg */
  --sf-accent: #8ad0ff;        /* lighter cyan for atmospheric feel */
  --sf-muted: #a4bccc;
  --sf-border: rgba(255, 255, 255, 0.28);

  --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);

  --sf-neon: var(--sf-accent);
  --sf-neon-dim: #5fa8d8;
  --sf-neon-glow: 0 0 4px rgba(138, 208, 255, 0.6);
  --sf-neon-glow-strong: 0 0 12px rgba(138, 208, 255, 0.7);

  /* Frames are barely-there suggestions — content shapes are luminous fields */
  --sf-frame-color: rgba(255, 255, 255, 0.4);
  --sf-frame-width: 0.5px;
  --sf-frame-corner: 16px;
  --sf-frame-bg: rgba(10, 20, 40, 0.45);

  --sf-scanline-opacity: 0;

  /* === Brand-evolution ladder values (terminal stratum) === */
  --sf-border-overlay-alpha: 0.40;
  --sf-border-overlay-color: rgba(255, 255, 255, 0.6);
  --sf-bg-mesh-opacity: 0.15;
  --sf-translucent-panel-alpha: 0.45;
  --sf-translucent-panel-bg: rgba(10, 20, 40, 0.45);
  --sf-translucent-panel-stroke: rgba(255, 255, 255, 0.4);
  --sf-glow-strength: 4;
  --sf-chromatic-aberration: 2px;
  --sf-haze-intensity: 0.15;
  --sf-baseline-grid-visible: 0.10;
  --sf-baseline-grid-color: rgba(255, 255, 255, 0.10);
  --sf-link-luminous: 0.60;
}

.era-2038 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;
}

/* Live atmospheric haze — gradient mesh stronger, animated subtly */
.era-2038 body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(40, 90, 140, 0.5) 0%, transparent 65%),
    radial-gradient(ellipse at 80% 70%, rgba(60, 30, 80, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(20, 40, 60, 0.6) 0%, transparent 70%);
  opacity: var(--sf-bg-mesh-opacity);
  pointer-events: none;
  /* Subtle drift — page feels alive */
  animation: era-2038-mesh-drift 60s ease-in-out infinite alternate;
}

@keyframes era-2038-mesh-drift {
  from { transform: translate(0, 0) scale(1.0); }
  to   { transform: translate(-2%, 1%) scale(1.05); }
}

/* Baseline grid — fully visible at era-defined alpha */
.era-2038 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;
}

/* Hero typography: full chromatic separation, photonic ambient glow */
.era-2038 .node-title {
  font-family: "Inter", sans-serif;
  font-variation-settings: "wght" 160, "opsz" 64;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: -0.025em;
  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),
    0 0 calc(var(--sf-glow-strength) * 4px) rgba(255, 255, 255, 0.25),
    0 0 calc(var(--sf-glow-strength) * 8px) rgba(138, 208, 255, 0.15);
}

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

/* Body emphasis: chromatic separation on <strong> and <em> */
.era-2038 .prose strong,
.era-2038 .prose em {
  text-shadow:
    calc(var(--sf-chromatic-aberration) * -0.5) 0 0 var(--sf-chromatic-magenta),
    calc(var(--sf-chromatic-aberration) * 0.5) 0 0 var(--sf-chromatic-cyan);
}

/* Links: max luminosity */
.era-2038 .node-link {
  color: var(--sf-accent);
  border-bottom: none;
  text-shadow: 0 0 calc(var(--sf-glow-strength) * 1.5px)
               rgba(138, 208, 255, var(--sf-link-luminous));
  transition: text-shadow var(--sf-duration-med) var(--sf-ease);
}
.era-2038 .node-link:hover {
  text-shadow:
    0 0 calc(var(--sf-glow-strength) * 3px)
        rgba(138, 208, 255, calc(var(--sf-link-luminous) + 0.3)),
    calc(var(--sf-chromatic-aberration) * -0.5) 0 0 var(--sf-chromatic-magenta),
    calc(var(--sf-chromatic-aberration) * 0.5) 0 0 var(--sf-chromatic-cyan);
}

/* Marginalia: BORDERLESS. Just text floating in atmosphere with ambient glow.
   The chrome is dissolved completely — quotes are now luminous fields,
   not panels. */
.era-2038 .pullquote,
.era-2038 .marginalia-pullquote,
.era-2038 blockquote {
  background: transparent;
  border: none;
  padding: var(--sf-space-lg) var(--sf-space-xl);
  font-style: italic;
  font-variation-settings: "wght" 280, "opsz" 24;
  text-shadow:
    0 0 calc(var(--sf-glow-strength) * 3px) rgba(255, 255, 255, 0.15),
    0 0 calc(var(--sf-glow-strength) * 8px) rgba(138, 208, 255, 0.1);
}

/* Asides retain a soft glass panel — the differentiation is they're
   *secondary* content, not the photonic body */
.era-2038 .marginalia-aside,
.era-2038 [data-marginalia="aside"] {
  background: var(--sf-translucent-panel-bg);
  border: 1px solid var(--sf-translucent-panel-stroke);
  border-radius: var(--sf-frame-corner);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow:
    0 0 calc(var(--sf-glow-strength) * 6px) rgba(138, 208, 255, 0.15),
    0 6px 32px rgba(0, 0, 0, 0.5);
}

/* Government notices — same gentle panel treatment */
.era-2038 .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(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Intercept — historical photonic; fades into bg */
.era-2038 .intercept {
  background: rgba(10, 20, 40, 0.25);
  color: var(--sf-muted);
  font-family: var(--sf-font-mono);
  font-size: 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--sf-frame-corner);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Drop cap — kinetic photonic glyph, full chromatic split */
.era-2038 .dropcap::first-letter,
.era-2038 [data-dropcap]::first-letter {
  font-variation-settings: "wght" 160, "opsz" 144;
  font-size: 5.5em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.12em -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),
    0 0 calc(var(--sf-glow-strength) * 6px) rgba(138, 208, 255, 0.2);
}

/* The page is no longer a page. It's a window onto a layered scene. */