:root {
  --void: #05060a;
  --obsidian: #0b0e17;
  --ink: #101525;
  --ash: #c9c7bd;
  --bone: #f0eadc;
  --brass: #b9975b;
  --blood: #7b1f2a;
  --bluefire: #76d8ff;
  --greenfire: #6fffc3;
  --panel: rgba(11, 14, 23, 0.88);
  --line: rgba(185, 151, 91, 0.34);
  --softline: rgba(201, 199, 189, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.migration-page {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--bone);
  background:
    radial-gradient(circle at 16% 8%, rgba(118, 216, 255, 0.14), transparent 30%),
    radial-gradient(circle at 87% 17%, rgba(123, 31, 42, 0.24), transparent 29%),
    radial-gradient(circle at 50% 115%, rgba(111, 255, 195, 0.08), transparent 34%),
    linear-gradient(140deg, #030408 0%, #080b14 52%, #130e14 100%);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.72;
}

body.migration-page::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  opacity: 0.24;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.48) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(118,216,255,0.28) 0 1px, transparent 1.8px);
  background-size: 210px 210px, 340px 340px;
  background-position: 18px 30px, 90px 110px;
}

body.migration-page::after {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,0.76) 100%);
}

.migration-page a { color: var(--greenfire); text-decoration: none; }
.migration-page a:hover,
.migration-page a:focus { color: var(--bluefire); text-decoration: underline; text-underline-offset: 0.2em; }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--bone);
  color: var(--void);
  transform: translateY(-160%);
}

.skip-link:focus { color: var(--void); transform: translateY(0); }

.site-shell {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: relative;
  z-index: 3;
  padding: 28px 0 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 6, 10, 0.34);
  backdrop-filter: blur(8px);
}

.masthead { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.brand { display: grid; gap: 2px; color: var(--bone); }
.brand:hover,
.brand:focus { text-decoration: none; }
.brand-title { margin: 0; font-size: clamp(1.55rem, 3vw, 2.6rem); letter-spacing: 0.12em; line-height: 1.1; text-transform: uppercase; }
.brand-tagline { margin: 0; color: var(--ash); font-size: 0.98rem; letter-spacing: 0.08em; text-transform: uppercase; }

.hero { padding: clamp(58px, 8vw, 104px) 0 clamp(42px, 7vw, 78px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr); gap: clamp(28px, 6vw, 76px); align-items: center; }
.eyebrow { margin: 0 0 14px; color: var(--brass); font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase; }
.migration-page h1 { margin: 0 0 24px; font-size: clamp(2.75rem, 6.7vw, 6.4rem); font-weight: normal; letter-spacing: -0.05em; line-height: 0.95; text-wrap: balance; }
.migration-page h1 span { color: var(--bluefire); text-shadow: 0 0 30px rgba(118, 216, 255, 0.38); }
.hero-copy { max-width: 790px; margin: 0 0 28px; color: var(--ash); font-size: clamp(1.05rem, 1.8vw, 1.32rem); }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; }
.button { display: inline-block; padding: 0.72rem 1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--bone); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.button.primary { border-color: var(--greenfire); background: var(--greenfire); color: var(--void); }
.button:hover,
.button:focus { text-decoration: none; }

.hero-panel {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(16,21,37,0.82), rgba(5,6,10,0.92));
  box-shadow: 0 24px 70px rgba(0,0,0,0.38);
}

.sigil { position: relative; z-index: 2; color: var(--brass); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; }
.card-caption { position: absolute; right: 1.4rem; bottom: 1.4rem; left: 1.4rem; z-index: 2; margin: 0; color: var(--ash); }

.chronicle-art,
.prophecy-art,
.isotope-art,
.archive-art { position: relative; width: min(290px, 72vw); aspect-ratio: 1; margin: 1.25rem auto 4.5rem; }

.chronicle-art::before,
.chronicle-art::after {
  position: absolute;
  content: "";
}

.chronicle-art::before {
  inset: 4% 12%;
  border: 1px solid rgba(118,216,255,0.35);
  background:
    linear-gradient(90deg, transparent 0 11%, rgba(185,151,91,0.28) 11% 12%, transparent 12% 88%, rgba(185,151,91,0.28) 88% 89%, transparent 89%),
    repeating-linear-gradient(180deg, transparent 0 16%, rgba(201,199,189,0.22) 16% 16.5%);
  box-shadow: 18px 18px 0 rgba(123,31,42,0.14), -14px -14px 0 rgba(118,216,255,0.05);
  transform: rotate(-2deg);
}

.chronicle-art::after {
  width: 0.75rem;
  height: 0.75rem;
  top: 19%;
  left: 49%;
  border-radius: 50%;
  background: var(--bone);
  box-shadow: 0 0 26px var(--bluefire), -82px 62px 0 -2px var(--brass), 76px 124px 0 -2px var(--blood);
}

.prophecy-art { border: 1px solid rgba(118,216,255,0.25); border-radius: 50%; }
.prophecy-art::before,
.prophecy-art::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}
.prophecy-art::before { inset: 14%; border: 1px dashed rgba(185,151,91,0.52); box-shadow: inset 0 0 36px rgba(123,31,42,0.24); }
.prophecy-art::after { inset: 37%; border: 1px solid var(--greenfire); background: rgba(111,255,195,0.07); box-shadow: 0 0 30px rgba(111,255,195,0.25), 82px -66px 0 -20px var(--blood), -76px 72px 0 -20px var(--bluefire); }

.isotope-art { border: 1px solid rgba(185,151,91,0.36); border-radius: 50%; }
.isotope-art::before,
.isotope-art::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}
.isotope-art::before { inset: 17%; border: 1px solid rgba(118,216,255,0.48); box-shadow: 0 0 0 28px rgba(118,216,255,0.025), 0 0 0 55px rgba(185,151,91,0.025); }
.isotope-art::after { inset: 43%; background: var(--bone); box-shadow: 0 0 30px var(--bluefire), 0 -102px 0 -8px var(--greenfire), 88px 48px 0 -8px var(--brass), -86px 54px 0 -8px var(--blood); }

.archive-art { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; align-content: center; transform: rotate(-2deg); }
.archive-art span { min-height: 74px; border: 1px solid var(--line); background: rgba(16,21,37,0.74); box-shadow: inset 0 0 24px rgba(118,216,255,0.04); }
.archive-art span:nth-child(2) { transform: translateY(18px); }
.archive-art span:nth-child(3) { transform: translateY(-7px); }
.archive-art span:nth-child(4) { transform: translateY(11px); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 5vw, 56px); align-items: start; padding-bottom: 78px; }
.essay { overflow: hidden; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--panel); box-shadow: 0 24px 70px rgba(0,0,0,0.34); }
.essay-inner { padding: clamp(1.35rem, 4vw, 3.2rem); }
.essay p,
.essay li { color: #ddd8cc; font-size: clamp(1.02rem, 1.4vw, 1.14rem); }
.essay p { margin: 0 0 1.35rem; }
.essay li { margin-bottom: 0.7rem; }
.essay h2 { margin: 3.2rem 0 1.15rem; color: var(--bone); font-size: clamp(1.65rem, 3.5vw, 2.65rem); font-weight: normal; letter-spacing: -0.025em; line-height: 1.08; }
.essay h2:first-of-type { margin-top: 2.5rem; }
.essay h3 { margin: 2.1rem 0 0.8rem; color: var(--brass); font-size: 1.25rem; font-weight: normal; }

.pullquote { margin: 2.2rem 0; padding: 1.15rem 1.35rem; border-left: 3px solid var(--bluefire); background: rgba(118,216,255,0.07); color: var(--bone); font-size: clamp(1.25rem, 2.5vw, 1.7rem); line-height: 1.38; }
.provenance { margin: 0 0 2rem; padding: 1rem 1.15rem; border: 1px solid var(--softline); border-radius: 0.8rem; background: rgba(185,151,91,0.06); color: var(--ash); font-size: 0.96rem; }
.divider { height: 1px; margin: 2.7rem 0; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.references { margin-top: 3.5rem; padding-top: 0.5rem; border-top: 1px solid var(--softline); }
.references p { margin-bottom: 0.75rem; color: var(--ash); font-size: 0.96rem; }
.references a { overflow-wrap: anywhere; }

.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 2.5rem; }
.archive-card { padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(16,21,37,0.7); }
.archive-card h3 { margin-top: 0; color: var(--bone); font-size: 1.25rem; }
.archive-card p { font-size: 0.98rem; }
.archive-card .status { color: var(--brass); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }

.side-panel { position: sticky; top: 20px; display: grid; gap: 1rem; }
.card { padding: 1.2rem; border: 1px solid var(--line); border-radius: 1.1rem; background: rgba(11,14,23,0.84); }
.card h2 { margin: 0 0 0.65rem; color: var(--brass); font-size: 0.76rem; font-weight: normal; letter-spacing: 0.15em; text-transform: uppercase; }
.card p,
.card li { color: var(--ash); font-size: 0.95rem; }
.card p { margin: 0; }
.card ul { margin: 0; padding-left: 1.15rem; }
.panel-link { display: inline-block; margin-top: 0.55rem; }

@media (max-width: 920px) {
  .hero-grid,
  .content-grid { grid-template-columns: 1fr; }
  .hero-panel { min-height: 360px; }
  .side-panel { position: static; }
}

@media (max-width: 640px) {
  .site-shell { width: min(100% - 24px, 1180px); }
  .masthead { align-items: flex-start; flex-direction: column; }
  .hero { padding-top: 52px; }
  .archive-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}