/**
 * Marginalia per-era visual treatments
 * --------------------------------------
 * Sits AFTER marginalia.css and the per-era CSS in the cascade.
 * Each era stamps its signature onto marginalia callouts so the *same
 * source markdown* re-renders into the era's voice.
 *
 * See docs/BRAND_EVOLUTION.md "Marginalia across eras" for the contract.
 */

/* =================================================================
   2024–2026 "Seeds" — Clean editorial. Mostly defaults.
   ================================================================= */
.era-2024-2026 .mg-callout {
  border-radius: 4px;
}
.era-2024-2026 .mg-pull {
  font-style: italic;
}

/* =================================================================
   2027–2028 "Severance" — first signals of wrongness.
   NOTE/TIP gain timestamp metadata. WARNING/IMPORTANT get scanlines.
   ================================================================= */
.era-2027-2028 .mg-callout[data-type="note"]::before,
.era-2027-2028 .mg-callout[data-type="tip"]::before {
  content: "PUBLISHED " attr(data-timestamp, "2028-08-05 14:32 UTC");
  display: block;
  font-family: var(--sf-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: var(--mg-text-muted);
  margin-bottom: 0.4rem;
  opacity: 0.7;
}

.era-2027-2028 .mg-callout[data-type="warning"],
.era-2027-2028 .mg-callout[data-type="important"] {
  position: relative;
  overflow: hidden;
}
.era-2027-2028 .mg-callout[data-type="warning"]::after,
.era-2027-2028 .mg-callout[data-type="important"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    transparent 0, transparent 1px,
    rgba(0, 0, 0, 0.03) 1px, rgba(0, 0, 0, 0.03) 2px
  );
  pointer-events: none;
}

/* =================================================================
   2029–2030 "Acceleration" — Clean Net blue side-stripe; circuit-trace.
   ================================================================= */
.era-2029-2030 .mg-callout[data-type="note"] {
  border-left-width: 4px;
  border-left-color: var(--sf-neon-blue);
  background: linear-gradient(to right,
    rgba(74, 144, 217, 0.08) 0%,
    rgba(74, 144, 217, 0.02) 100%);
}
.era-2029-2030 .mg-callout[data-type="important"] {
  background-color: #0a0a14;
  background-image: var(--sf-circuit);
  color: #b0e0b0;
  border-left-color: var(--sf-neon-blue);
}
.era-2029-2030 .mg-callout[data-type="important"] strong {
  color: var(--sf-neon-blue);
  text-shadow: 0 0 4px rgba(74, 144, 217, 0.4);
}

/* =================================================================
   2031–2032 "Tunupa Peak" — full Arwes. INTERCEPT stamps. Neon dropcap.
   ================================================================= */
.era-2031-2032 .mg-callout {
  border: 1px solid rgba(100, 255, 100, 0.25);
  background-color: #050505 !important;
  background-image: var(--sf-circuit);
  color: #c8e8c8;
  position: relative;
  box-shadow: 0 0 8px rgba(100, 255, 100, 0.05);
}
.era-2031-2032 .mg-callout::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    transparent 0, transparent 1px,
    rgba(100, 255, 100, 0.02) 1px, rgba(100, 255, 100, 0.02) 2px
  );
  pointer-events: none;
}
.era-2031-2032 .mg-callout[data-type="important"]::before,
.era-2031-2032 .mg-callout[data-type="warning"]::before {
  content: "INTERCEPTED";
  display: inline-block;
  padding: 0.15em 0.6em;
  margin-bottom: 0.6em;
  font-family: var(--sf-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: #ff4040;
  border: 2px solid #ff4040;
  text-shadow: 0 0 4px rgba(255, 64, 64, 0.4);
  transform: rotate(-2deg);
}
.era-2031-2032 .mg-pull {
  position: relative;
}
.era-2031-2032 .mg-pull::after {
  content: "REDACTED";
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.15em 0.5em;
  font-family: var(--sf-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: #ff4040;
  border: 2px solid #ff4040;
  transform: rotate(8deg);
  opacity: 0.5;
  pointer-events: none;
}
.era-2031-2032 .mg-dropcap::first-letter {
  color: var(--sf-neon-green);
  text-shadow: 0 0 8px var(--sf-neon-green);
  font-family: var(--sf-font-mono);
}

/* =================================================================
   2033–2034 "Recovery" — softening, intercept stamps fade to gray.
   ================================================================= */
.era-2033-2034 .mg-callout {
  background-color: rgba(20, 20, 30, 0.4);
  border-color: rgba(100, 255, 100, 0.15);
  color: #d8d8d0;
}
.era-2033-2034 .mg-callout[data-type="warning"],
.era-2033-2034 .mg-callout[data-type="important"] {
  background-color: rgba(40, 30, 30, 0.3);
}
.era-2033-2034 .mg-pull {
  border-left: 4px solid rgba(100, 255, 100, 0.3);
  font-style: italic;
}

/* =================================================================
   2035 "Synthesis" — warm, gentle. Intercepts archival.
   ================================================================= */
.era-2035 .mg-callout {
  background-color: rgba(61, 122, 95, 0.04);
  border-color: rgba(61, 122, 95, 0.2);
  color: var(--sf-text);
}
.era-2035 .mg-callout[data-type="important"] {
  background-color: rgba(160, 64, 64, 0.05);
  /* No more red INTERCEPTED stamp. The fever broke. */
}
.era-2035 .mg-pull {
  font-family: Georgia, serif;
  font-style: italic;
  border-left: 3px solid rgba(61, 122, 95, 0.4);
}

/* =================================================================
   2036 "Embedded" — HUD-translucent. Glass panels with luminous outlines.
   ================================================================= */
.era-2036 .mg-callout {
  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);
  color: var(--sf-text);
}
.era-2036 .mg-callout[data-type="important"] {
  border-color: rgba(255, 128, 128, 0.5);
  box-shadow: 0 0 calc(var(--sf-glow-strength) * 5px) rgba(255, 128, 128, 0.18);
}
.era-2036 .mg-callout strong {
  color: var(--mg-accent);
}
.era-2036 .mg-pull {
  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);
  font-style: italic;
}

/* =================================================================
   2037 "Fluid" — z-stacking, drag-affordance hint, chromatic on emphasis.
   ================================================================= */
.era-2037 .mg-callout {
  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);
  color: var(--sf-text);
  cursor: grab;        /* drag-affordance hint */
  transition: transform var(--sf-duration-med) var(--sf-ease);
}
.era-2037 .mg-callout:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 calc(var(--sf-glow-strength) * 7px) rgba(95, 191, 255, 0.22),
    0 6px 28px rgba(0, 0, 0, 0.5);
}
.era-2037 .mg-callout strong {
  color: var(--mg-accent);
  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);
}
.era-2037 .mg-pull {
  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 4px 24px rgba(0, 0, 0, 0.4);
  font-style: italic;
}
.era-2037 .mg-pull::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);
}

/* =================================================================
   2038 "Atmospheric" — borderless photonic, ambient glow only.
   ================================================================= */
.era-2038 .mg-callout {
  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);
  color: var(--sf-text);
}
.era-2038 .mg-callout strong {
  color: var(--mg-accent);
  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);
}
/* Pull quotes BORDERLESS — pure photonic */
.era-2038 .mg-pull {
  background: transparent;
  border: none;
  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.10);
  padding: var(--sf-space-lg) var(--sf-space-xl);
}
.era-2038 .mg-pull::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);
}

/* =================================================================
   Sciprogfi-specific: INTERCEPT block.
   Marginalia doesn't have [!INTERCEPT] natively — the project may render
   it as a `> [!INTERCEPT]` blockquote or `.intercept` element. Style both.
   The era CSS files already define .intercept; this adds intercept-as-
   callout treatment when authors use markdown alert syntax.
   ================================================================= */
.mg-callout[data-type="intercept"] {
  background-color: #0a0a0a;
  background-image: var(--sf-circuit);
  color: #b0e0b0;
  font-family: var(--sf-font-mono);
  font-size: 0.92em;
  border-left: 4px solid var(--sf-neon-green, #33ff33);
  position: relative;
}
.mg-callout[data-type="intercept"]::before {
  content: "INTERCEPT";
  display: block;
  font-family: var(--sf-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--sf-neon-green, #33ff33);
  margin-bottom: 0.5rem;
  opacity: 0.7;
}
.era-2035 .mg-callout[data-type="intercept"],
.era-2036 .mg-callout[data-type="intercept"],
.era-2037 .mg-callout[data-type="intercept"],
.era-2038 .mg-callout[data-type="intercept"] {
  /* Post-Synthesis: intercepts are archival, fade to muted */
  background-color: rgba(10, 20, 20, 0.5);
  background-image: none;
  color: var(--sf-muted);
  border-left-color: rgba(95, 168, 130, 0.4);
}
.era-2035 .mg-callout[data-type="intercept"]::before,
.era-2036 .mg-callout[data-type="intercept"]::before,
.era-2037 .mg-callout[data-type="intercept"]::before,
.era-2038 .mg-callout[data-type="intercept"]::before {
  content: "ARCHIVED INTERCEPT";
  color: var(--sf-muted);
  opacity: 0.5;
}

/* =================================================================
   Intrusion-level escalation (per BRAND_EVOLUTION.md)
   At intrusion 3+, important/intercept/warning callouts escalate.
   The JS marginalia.js initIntrusionEscalation() applies these classes;
   we style the resulting state.
   ================================================================= */

/* Level 3: full-width-of-prose + heavier border + slight scale */
.mg-callout--escalated.mg-callout--intrusion-3 {
  margin-left: calc(-1 * var(--sf-space-md));
  margin-right: calc(-1 * var(--sf-space-md));
  border-left-width: 6px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  padding: var(--sf-space-md) var(--sf-space-lg);
  font-size: 1.02em;
  position: relative;
}
.mg-callout--escalated.mg-callout--intrusion-3::after {
  content: "INTRUSION LEVEL 3";
  position: absolute;
  top: 6px;
  right: 12px;
  font-family: var(--sf-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  opacity: 0.5;
}

/* Level 4: full-width takeover treatment — escapes the prose column,
   spans the content area, harder typography, scanline overlay on
   intercept/important. The reader cannot scroll past without seeing it. */
.mg-callout--escalated.mg-callout--intrusion-4 {
  margin-left: calc(-1 * var(--sf-space-xl));
  margin-right: calc(-1 * var(--sf-space-xl));
  border: 2px solid currentColor;
  padding: var(--sf-space-lg) var(--sf-space-xl);
  font-size: 1.08em;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 16px currentColor, inset 0 0 24px rgba(255, 0, 0, 0.06);
}
.mg-callout--escalated.mg-callout--intrusion-4::after {
  content: "INTRUSION LEVEL 4 · ESCALATED";
  position: absolute;
  top: 8px;
  right: 16px;
  font-family: var(--sf-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  font-weight: 700;
  color: currentColor;
  opacity: 0.7;
}
.mg-callout--escalated.mg-callout--intrusion-4::before {
  /* scanline overlay across the whole escalated callout */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    transparent 0,
    transparent 2px,
    rgba(255, 0, 0, 0.04) 2px,
    rgba(255, 0, 0, 0.04) 3px
  );
  pointer-events: none;
}

/* =================================================================
   Voice-derived fonts (2030+ eras, per BRAND_EVOLUTION.md)
   When a node is attributed to a character thread, marginalia callouts
   on that node carry the thread's typographic register. Body sets
   data-thread="..." in base.njk; this CSS routes by [data-thread].
   Earlier eras (2024-2029) leave thread fonts at era defaults; only
   2030+ activates the per-thread override.
   ================================================================= */

/* Drew — Clean Net aligned. Sans-serif, slight letter-tracking, the
   voice of someone who optimized for legibility against surveillance. */
.era-2030-2031 [data-thread="drew"] .mg-callout,
.era-2031-2032 [data-thread="drew"] .mg-callout,
.era-2033-2034 [data-thread="drew"] .mg-callout,
.era-2035 [data-thread="drew"] .mg-callout,
.era-2036 [data-thread="drew"] .mg-callout,
.era-2037 [data-thread="drew"] .mg-callout,
.era-2038 [data-thread="drew"] .mg-callout {
  font-family: "Inter", "Helvetica Neue", -apple-system, sans-serif;
  letter-spacing: 0.01em;
}

/* Synter — terminal lineage. Mono. The voice that emerged from cartel-
   optimization scripts and never lost the receipt-printer cadence. */
.era-2030-2031 [data-thread="synter"] .mg-callout,
.era-2031-2032 [data-thread="synter"] .mg-callout,
.era-2033-2034 [data-thread="synter"] .mg-callout,
.era-2035 [data-thread="synter"] .mg-callout,
.era-2036 [data-thread="synter"] .mg-callout,
.era-2037 [data-thread="synter"] .mg-callout,
.era-2038 [data-thread="synter"] .mg-callout {
  font-family: var(--sf-font-mono);
  font-size: 0.96em;
  letter-spacing: 0.02em;
}

/* Alejandra — serif persistent. Earth-rooted Andean physicist; her
   voice carries through ALL eras as serif (the only thread that
   ignores the surveillance-era mono creep). */
.era-2030-2031 [data-thread="alejandra"] .mg-callout,
.era-2031-2032 [data-thread="alejandra"] .mg-callout,
.era-2033-2034 [data-thread="alejandra"] .mg-callout,
.era-2035 [data-thread="alejandra"] .mg-callout,
.era-2036 [data-thread="alejandra"] .mg-callout,
.era-2037 [data-thread="alejandra"] .mg-callout,
.era-2038 [data-thread="alejandra"] .mg-callout {
  font-family: var(--sf-font-serif);
  font-style: italic;
}

/* Sal — corporate / condensed sans. The compliance-officer voice. */
.era-2030-2031 [data-thread="sal"] .mg-callout,
.era-2031-2032 [data-thread="sal"] .mg-callout,
.era-2033-2034 [data-thread="sal"] .mg-callout,
.era-2035 [data-thread="sal"] .mg-callout,
.era-2036 [data-thread="sal"] .mg-callout,
.era-2037 [data-thread="sal"] .mg-callout,
.era-2038 [data-thread="sal"] .mg-callout {
  font-family: "Inter", -apple-system, sans-serif;
  font-stretch: 87.5%;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Dixon — coordinator / mono. The Bard's voice carries operational mono;
   bridge between street and institution. */
.era-2030-2031 [data-thread="dixon"] .mg-callout,
.era-2031-2032 [data-thread="dixon"] .mg-callout,
.era-2033-2034 [data-thread="dixon"] .mg-callout,
.era-2035 [data-thread="dixon"] .mg-callout,
.era-2036 [data-thread="dixon"] .mg-callout,
.era-2037 [data-thread="dixon"] .mg-callout,
.era-2038 [data-thread="dixon"] .mg-callout {
  font-family: var(--sf-font-mono);
  font-size: 0.95em;
}

/* Pull-quote inherits thread font (2030+) — the "voice carries" rule */
.era-2030-2031 [data-thread="alejandra"] .mg-pull,
.era-2031-2032 [data-thread="alejandra"] .mg-pull,
.era-2033-2034 [data-thread="alejandra"] .mg-pull,
.era-2035 [data-thread="alejandra"] .mg-pull,
.era-2036 [data-thread="alejandra"] .mg-pull,
.era-2037 [data-thread="alejandra"] .mg-pull,
.era-2038 [data-thread="alejandra"] .mg-pull {
  font-family: var(--sf-font-serif);
  font-style: italic;
}
.era-2030-2031 [data-thread="synter"] .mg-pull,
.era-2031-2032 [data-thread="synter"] .mg-pull,
.era-2033-2034 [data-thread="synter"] .mg-pull,
.era-2035 [data-thread="synter"] .mg-pull,
.era-2036 [data-thread="synter"] .mg-pull,
.era-2037 [data-thread="synter"] .mg-pull,
.era-2038 [data-thread="synter"] .mg-pull {
  font-family: var(--sf-font-mono);
}