/**
 * Era: 2036 — "Embedded"
 * The HUD is the default reading state. Translucent overlays are
 * normal background. Content borders dissolve into luminous outlines.
 *
 * Family: HUD-TRANSLUCENT (see ~/.claude/skills/muriel-personal/HUD.md)
 * Mood: gestural near-future, glassy, info-pervasive but quiet.
 * Surveillance UI didn't disappear — it became invisible-as-default.
 *
 * The fever has broken; the technology is now ambient.
 */

.era-2036 {
  /* Atmospheric near-black — not pure #000, reads as volumetric */
  --sf-bg: #0a0e16;
  --sf-text: #e8eef5;          /* pale-blue-tinted white, 17.6:1 on bg */
  --sf-accent: #5fbfff;        /* HUD cyan, 9.8:1 on bg */
  --sf-muted: #8aa4c0;         /* 8.5:1 on bg */
  --sf-border: rgba(255, 255, 255, 0.18);

  /* Legacy era variables */
  --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);

  /* Neon recedes; cyan becomes structural rather than decorative */
  --sf-neon: var(--sf-accent);
  --sf-neon-dim: #3d8acc;
  --sf-neon-glow: 0 0 2px rgba(95, 191, 255, 0.4);
  --sf-neon-glow-strong: 0 0 6px rgba(95, 191, 255, 0.5);

  /* Frames are luminous outlines, not filled chrome */
  --sf-frame-color: rgba(255, 255, 255, 0.55);
  --sf-frame-width: 1px;
  --sf-frame-corner: 8px;
  --sf-frame-bg: rgba(10, 20, 40, 0.25);  /* glass */

  /* Scanlines extinct — the surveillance era is over */
  --sf-scanline-opacity: 0;

  /* === Brand-evolution ladder values (per BRAND_EVOLUTION.md) === */
  --sf-border-overlay-alpha: 0.20;
  --sf-border-overlay-color: rgba(255, 255, 255, 0.55);
  --sf-bg-mesh-opacity: 0.06;
  --sf-translucent-panel-alpha: 0.25;
  --sf-translucent-panel-bg: rgba(10, 20, 40, 0.25);
  --sf-translucent-panel-stroke: rgba(255, 255, 255, 0.65);
  --sf-glow-strength: 2;
  --sf-chromatic-aberration: 0px;  /* arrives in 2037 */
  --sf-haze-intensity: 0.05;
  --sf-baseline-grid-visible: 0;
  --sf-link-luminous: 0.30;
}

.era-2036 body {
  /* Variable-axis sans is the new default. Inter is the open canon. */
  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 layer + bg-mesh — covers the whole viewport,
   sits behind body content. The page now feels like a *space*. */
.era-2036 body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--sf-bg-mesh-image);
  opacity: var(--sf-bg-mesh-opacity);
  pointer-events: none;
}

.era-2036 .node-title {
  font-family: "Inter", sans-serif;
  font-variation-settings: "wght" 200, "opsz" 48;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.02em;
  color: var(--sf-text);
}

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

/* Links read as system-aware — soft luminosity, no underline aggression */
.era-2036 .node-link {
  color: var(--sf-accent);
  border-bottom: none;
  text-shadow: 0 0 calc(var(--sf-glow-strength) * 1px)
               rgba(95, 191, 255, var(--sf-link-luminous));
  transition: text-shadow var(--sf-duration-med) var(--sf-ease);
}
.era-2036 .node-link:hover {
  text-shadow: 0 0 calc(var(--sf-glow-strength) * 2px)
               rgba(95, 191, 255, calc(var(--sf-link-luminous) + 0.3));
}

/* Marginalia: glassy translucent panels with luminous outlines.
   The borders haven't dissolved YET — that's 2038. Here they're
   just visibly glass. */
.era-2036 .pullquote,
.era-2036 .marginalia-aside,
.era-2036 .marginalia-pullquote,
.era-2036 blockquote {
  background: var(--sf-translucent-panel-bg);
  border: 1px solid var(--sf-translucent-panel-stroke);
  border-radius: var(--sf-frame-corner);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 calc(var(--sf-glow-strength) * 4px)
              rgba(95, 191, 255, 0.15);
}

/* Government notices — muted now, ambient surveillance is the new normal */
.era-2036 .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;  /* mono no longer signals authority */
}

/* Intercept — historical artifact, dim sage trace.
   By 2036 nobody intercepts anymore; the channel is just open. */
.era-2036 .intercept {
  background: var(--sf-translucent-panel-bg);
  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 — soft chromatic separation hint (1px), not yet aggressive */
.era-2036 .dropcap::first-letter,
.era-2036 [data-dropcap]::first-letter {
  font-variation-settings: "wght" 200, "opsz" 144;
  font-size: 4.5em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.08em -0.1em -0.05em;
  color: var(--sf-text);
}

/* No console glitches. No split. Technology is just the air now. */