/* Aeon Ascendant: night shaft under the approved pixel capsule. Magenta and cyan come from that art. */

body.aeon {
  --bg: #07061a;
  --bar: #07061a;
  --ink: #f4efe8;
  --muted: #c3b8d4;
  --rule: #3a2458;
  --accent: #ff7ad6;
  --on-accent: #1a0620;
  --link: #ff9adf;
  --sans: "Source Sans 3", "Segoe UI", sans-serif;
  --display: "Silkscreen", "Source Sans 3", sans-serif;
  --paper: #f6f1ea;
  --paper-ink: #1a1024;
  --paper-link: #8e2268;
}

[data-theme="light"] body.aeon {
  --bg: #f4eef8;
  --bar: #f4eef8;
  --ink: #1a1024;
  --muted: #4d3b5c;
  --rule: #d7c4e4;
  --accent: #b42378;
  --on-accent: #fff7fc;
  --link: #8e2268;
  --paper: #fffaf6;
  --paper-ink: #1a1024;
  --paper-link: #8e2268;
}

body.aeon {
  background:
    radial-gradient(90% 40% at 80% 0%, rgba(255, 45, 170, 0.28), transparent 55%),
    radial-gradient(60% 50% at 10% 90%, rgba(30, 210, 255, 0.16), transparent 50%),
    linear-gradient(180deg, #14061f 0%, #07061a 42%, #04131c 100%);
}

.aeon .mark { font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.35; }
.aeon .nav a { font-family: "Source Sans 3", sans-serif; font-size: 0.92rem; }

.aeon .stage {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 20px 64px;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.tower {
  position: absolute;
  left: max(16px, 5vw);
  top: 0;
  bottom: 0;
  width: 54px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 34px, #ff3eb8 34px 37px, transparent 37px 46px);
  box-shadow: 16px 0 0 rgba(40, 220, 255, 0.28);
}
.aeon .stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background: repeating-linear-gradient(rgba(0, 0, 0, 0.55) 0 2px, transparent 2px 5px);
}
.stage-core { position: relative; z-index: 1; width: min(1040px, 94vw); }
.aeon-marquee { position: relative; margin: 0; }
.aeon-marquee .coming {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  margin: 0;
  padding: 7px 9px;
  background: #07061a;
  color: #7ef6ff;
  font-family: "Silkscreen", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.aeon-marquee img {
  width: 100%;
  height: auto;
  max-height: none;
  box-shadow: 16px 16px 0 #ff2ea6, 32px 32px 0 #0b3040;
}
.lower-third {
  position: relative;
  z-index: 2;
  width: min(760px, calc(100% - 4vw));
  margin: -42px 0 0 4vw;
  padding: 22px 24px 26px;
  background: #100818;
  border: 3px solid #ff4ad0;
  box-shadow: 12px 12px 0 #19d4ff;
  text-align: left;
}
.lower-third h1 {
  margin: 0 0 10px;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  line-height: 1.35;
}
.lower-third .lede { margin: 0; max-width: none; color: #f4efe8; }
.lower-third .actions { margin-top: 18px; }
.aeon .btn-solid {
  box-shadow: 4px 4px 0 #19d4ff;
}
[data-theme="light"] .lower-third {
  background: #fffaf6;
  box-shadow: 12px 12px 0 #8e2268;
}
[data-theme="light"] .lower-third .lede { color: #1a1024; }
[data-theme="light"] .aeon-marquee .coming { background: #fffaf6; color: #8e2268; }
[data-theme="light"] .aeon-marquee img { box-shadow: 16px 16px 0 #b42378, 32px 32px 0 #efe4f6; }

.shaft {
  width: min(760px, calc(100% - 36px));
  margin: 0 auto;
  padding: 8px 0 72px;
  text-align: left;
}

.aeon h1 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 8px 0 18px; line-height: 1.35; }
.floor {
  font-family: "Silkscreen", sans-serif;
  font-size: 0.68rem;
  color: #7ef6ff;
  margin: 0 0 8px;
}
[data-theme="light"] .floor { color: #0c6e84; }

.lede { font-size: 1.12rem; max-width: 42rem; color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.climb { margin-top: 36px; display: grid; gap: 28px; }
.climb section { padding-top: 18px; border-top: 1px solid var(--rule); }
.climb h2 { font-size: 0.78rem; margin: 0 0 10px; letter-spacing: 0.04em; }

.readout {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
  margin: 0;
}
.readout dt { font-family: "Silkscreen", sans-serif; font-size: 0.62rem; color: var(--muted); padding-top: 4px; }
.readout dd { margin: 0; }

.missing {
  margin-top: 8px;
  color: var(--muted);
  border: 1px dashed var(--rule);
  padding: 14px 16px;
}

.aeon-doc { width: min(74ch, calc(100% - 32px)); margin: 28px auto 64px; }
.aeon .doc, .fickle .doc, .city .doc {
  background: var(--paper);
  color: var(--paper-ink);
  padding: 28px 28px 48px;
}
.aeon .doc a, .city .doc a { color: var(--paper-link); }
.doc h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 16px; color: inherit; }
.doc h2 { font-size: 1.35rem; margin: 1.6rem 0 0.5rem; color: inherit; }
.doc h3 { font-size: 1.1rem; margin: 1.1rem 0 0.35rem; color: inherit; font-family: var(--sans); }
.doc p, .doc li { color: var(--paper-ink); }
.doc p + p, .doc ul, .doc ol { margin-top: 0.7rem; }
.doc li { margin: 0.25rem 0; }
.doc code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.92em; }

.draft-banner {
  background: var(--accent);
  color: var(--on-accent);
  padding: 12px 14px;
  font-weight: 700;
  margin: 0 0 18px;
}

@media (max-width: 700px) {
  .tower { width: 18px; left: 8px; }
  .lower-third { margin: -28px 8px 0 22px; width: auto; padding: 16px; }
  .aeon-marquee img { box-shadow: 8px 8px 0 #ff2ea6; }
  .shaft { padding-left: 16px; }
  .readout { grid-template-columns: 1fr; gap: 2px; }
  .readout dt { padding-top: 10px; }
  .aeon .doc { padding: 20px 16px 36px; }
}