:root {
  --bg: #070713;
  --bg-soft: #0d0d1b;
  --panel: rgba(14, 15, 34, 0.66);
  --text: #f4f6ff;
  --muted: #a8acc4;
  --cyan: #5ef7ff;
  --blue: #5b7cff;
  --violet: #9b5cff;
  --pink: #ff4fd8;
  --danger: #ff5c8a;
  --line: rgba(255, 255, 255, 0.12);
  --glow: 0 0 24px rgba(94, 247, 255, 0.22);
  --radius: 24px;
  --max: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(91, 124, 255, 0.12), transparent 34%),
    radial-gradient(circle at 90% 15%, rgba(255, 79, 216, 0.10), transparent 28%),
    linear-gradient(180deg, #070713 0%, #050510 100%);
  font-family: "Inter", system-ui, sans-serif;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(94,247,255,.03), transparent 35%, rgba(255,79,216,.03));
  z-index: -2;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; display:block; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  opacity: .6;
}
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .12;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.03) 0px,
    rgba(255,255,255,.03) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: soft-light;
}
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  z-index: 19;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 1px);
  background-size: 14px 17px, 19px 23px;
}
.section-shell {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}
.topbar {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), 1240px);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(7,7,19,.64);
  backdrop-filter: blur(18px);
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,.2), inset 0 0 0 1px rgba(94,247,255,.03);
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .08em;
}
.brand-mark {
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(94,247,255,.9);
}
.nav { display: flex; align-items: center; gap: 22px; }
.nav a {
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  transition: .2s ease;
}
.nav a:hover { color: var(--cyan); text-shadow: 0 0 12px rgba(94,247,255,.6); }
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 6px;
}
.nav-toggle span:not(.sr-only) {
  display: block; width: 24px; height: 2px;
  background: var(--text); margin: 5px 0;
}
.hero {
  min-height: 100vh;
  display: grid;
  align-items: center;
  position: relative;
  padding-top: 120px;
  padding-bottom: 80px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}
.eyebrow, .micro {
  margin: 0 0 14px;
  color: var(--cyan);
  font-family: "Orbitron", sans-serif;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero h1, .section-heading h2, .crew-intro h2 {
  font-family: "Orbitron", sans-serif;
  letter-spacing: -.045em;
  margin: 0;
}
.hero h1 {
  font-size: clamp(4rem, 9vw, 8.6rem);
  line-height: .86;
}
.hero h1 .line { display:block; }
.gradient-text {
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(91,124,255,.26));
}
.hero-deck {
  max-width: 700px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.7;
}
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top: 32px; }
.button {
  padding: 13px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: .9rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary {
  color: #050510;
  background: linear-gradient(90deg, var(--cyan), #9cfaff);
  box-shadow: 0 0 28px rgba(94,247,255,.24);
}
.button-ghost {
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.status-row {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-top: 44px;
}
.status-row div {
  padding-top: 14px;
  border-top:1px solid var(--line);
}
.status-row strong {
  display:block;
  color:var(--text);
  font:700 1.6rem/1 "Orbitron",sans-serif;
}
.status-row span {
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.holo-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    var(--panel);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--glow), 0 30px 80px rgba(0,0,0,.25);
  backdrop-filter: blur(16px);
}
.character-card {
  border-radius: var(--radius);
  overflow:hidden;
  transform: perspective(1000px) rotateY(-4deg);
}
.portrait {
  height: 500px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, transparent, rgba(7,7,19,.86)),
    radial-gradient(circle at 50% 18%, rgba(94,247,255,.22), transparent 18%),
    radial-gradient(circle at 75% 18%, rgba(255,79,216,.2), transparent 30%),
    linear-gradient(145deg, #171634, #0a0a17);
}
.portrait::before,
.portrait::after {
  content:"";
  position:absolute;
  inset:auto -10% 12% -10%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 16px rgba(94,247,255,.8);
  transform: rotate(-8deg);
}
.portrait::after {
  bottom: 28%;
  transform: rotate(6deg);
  background:linear-gradient(90deg, transparent, var(--pink), transparent);
  box-shadow: 0 0 16px rgba(255,79,216,.7);
}
.hero-character {
  position:absolute;
  inset:auto 50% -10px auto;
  right: 50%;
  transform: translateX(50%);
  width: min(86%, 440px);
  height: auto;
  filter: drop-shadow(0 0 22px rgba(94,247,255,.32))
          drop-shadow(0 0 42px rgba(255,79,216,.18));
}
.portrait-ui {
  position:absolute;
  left:16px; right:16px; bottom:14px;
  display:flex; justify-content:space-between; gap:10px;
  color:#d8faff;
  font:700 .66rem/1 "Orbitron",sans-serif;
  letter-spacing:.11em;
}
.character-copy { padding: 22px; }
.character-copy h2 { margin:0 0 10px; font:700 1.3rem/1.2 "Orbitron",sans-serif; }
.character-copy p:last-child { margin:0; color:var(--muted); line-height:1.65; }
.crew-band {
  margin-top: 28px;
  border-radius: 20px;
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
}
.crew-intro p:last-child { color: var(--muted); margin-top: 10px; }
.crew-intro h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.crew-chips {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-content: center;
}
.crew-chip {
  text-align:left;
  border:1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  transition: .2s ease;
}
.crew-chip:hover, .crew-chip.active {
  border-color: rgba(94,247,255,.35);
  box-shadow: 0 0 0 1px rgba(94,247,255,.08), 0 12px 28px rgba(0,0,0,.18);
  transform: translateY(-2px);
}
.crew-chip span {
  display:block;
  font: 700 .9rem/1.2 "Orbitron", sans-serif;
}
.crew-chip small {
  display:block;
  margin-top:6px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.68rem;
}
.orb {
  position:absolute;
  border-radius:50%;
  filter: blur(55px);
  pointer-events:none;
  opacity:.6;
}
.orb-a { width:280px; height:280px; background:rgba(91,124,255,.18); left:-120px; top:22%; }
.orb-b { width:300px; height:300px; background:rgba(255,79,216,.14); right:-150px; top:32%; }
.scroll-cue {
  position:absolute;
  left:0; bottom:22px;
  display:flex; align-items:center; gap:10px;
  color:var(--muted);
  font-size:.66rem; letter-spacing:.14em;
}
.chevron { color:var(--cyan); font-size:1.5rem; animation:bounce 1.8s infinite; }
.section {
  padding-block: 110px;
  position:relative;
}
.alternate::before {
  content:"";
  position:absolute;
  inset:0 50% 0 50%;
  margin-left:-50vw;
  margin-right:-50vw;
  background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.035), rgba(255,255,255,.018));
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  z-index:-1;
}
.section-heading { max-width:780px; margin-bottom:26px; }
.section-heading h2 { font-size:clamp(2.5rem,6vw,5.3rem); }
.section-heading > p:last-child { color:var(--muted); line-height:1.7; }
.section-character {
  min-height: 680px;
  overflow: hidden;
}
.section-content {
  position: relative;
  z-index: 3;
}
.section-character-art {
  position: absolute;
  top: 40px;
  width: min(35vw, 420px);
  opacity: .84;
  filter: drop-shadow(0 0 20px rgba(94,247,255,.22))
          drop-shadow(0 0 40px rgba(255,79,216,.12));
  pointer-events: none;
  z-index: 1;
}
.section-character-art.left { left: -60px; }
.section-character-art.right { right: -70px; }
.section-character-accent {
  position: absolute;
  width: min(28vw, 300px);
  right: 2%;
  top: 180px;
  opacity: .22;
  filter: saturate(1.15) blur(.2px) drop-shadow(0 0 24px rgba(91,124,255,.18));
  pointer-events:none;
  z-index: 0;
}
.section-character-accent.lower {
  right: -10px;
  bottom: 10px;
  top: auto;
}
.character-blurb {
  position: relative;
  z-index: 4;
  max-width: 620px;
  margin-bottom: 28px;
  padding: 16px 18px;
  border:1px solid var(--line);
  border-radius: 18px;
  background: rgba(8,8,22,.44);
  backdrop-filter: blur(10px);
}
.character-blurb p { margin: 10px 0 0; color: var(--muted); line-height: 1.65; }
.character-mini {
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}
.character-mini .name {
  font:700 .96rem/1 "Orbitron",sans-serif;
  color: var(--cyan);
}
.character-mini .role {
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.mission-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:18px;
}
.mission-card {
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.025);
  overflow:hidden;
  transition:.25s ease;
  position: relative;
  z-index: 4;
}
.mission-card:hover { transform:translateY(-4px); border-color:rgba(94,247,255,.28); box-shadow:0 20px 50px rgba(0,0,0,.18); }
.mission-card.featured { grid-row:span 2; }
.mission-body { padding:24px; }
.mission-meta {
  display:flex; justify-content:space-between; gap:14px;
  color:var(--muted);
  font:700 .66rem/1 "Orbitron",sans-serif;
  letter-spacing:.1em;
}
.status { color:var(--cyan); }
.status.active { color:#ff8ae6; }
.mission-card h3, .archive-card h3, .map-copy h3 {
  margin:16px 0 12px;
  font:700 1.35rem/1.2 "Orbitron",sans-serif;
}
.mission-card p { color:var(--muted); line-height:1.7; }
.text-link { color:var(--cyan); font-weight:700; font-size:.9rem; }
.mission-visual {
  height:300px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 20%,rgba(94,247,255,.11),transparent 18%),
    linear-gradient(180deg,#0e1021 0%,#070713 100%);
}
.grid-floor {
  position:absolute; left:-20%; right:-20%; bottom:-10%; height:55%;
  background-image:
    linear-gradient(rgba(94,247,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,247,255,.16) 1px, transparent 1px);
  background-size:42px 42px;
  transform:perspective(350px) rotateX(62deg);
  transform-origin:bottom;
}
.wagon-shape { position:absolute; left:50%; bottom:35px; transform:translateX(-50%); width:360px; height:190px; }
.wagon-body {
  position:absolute; bottom:26px; left:45px; right:45px; height:100px;
  border:2px solid rgba(94,247,255,.72);
  background:rgba(94,247,255,.035);
  box-shadow:0 0 32px rgba(94,247,255,.14);
}
.wagon-roof {
  position:absolute; left:72px; right:72px; top:15px; height:100px;
  border:2px solid rgba(255,79,216,.7);
  border-bottom:0;
  border-radius:120px 120px 0 0;
  box-shadow:0 0 28px rgba(255,79,216,.12);
}
.wheel {
  position:absolute; bottom:0; width:54px; height:54px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  box-shadow:0 0 14px rgba(94,247,255,.12);
}
.w1{left:74px}.w2{right:74px}
.progress { margin:22px 0; }
.progress-label { display:flex; justify-content:space-between; color:var(--muted); font-size:.8rem; margin-bottom:8px; }
.progress-track { height:7px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.progress-track span { display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink)); box-shadow:0 0 14px rgba(94,247,255,.25); }
.lab-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; position: relative; z-index: 4; }
.terminal { min-height:390px; border-radius:20px; overflow:hidden; }
.terminal-bar {
  display:flex; gap:7px; align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.025);
}
.terminal-bar span { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.28); }
.terminal-bar strong { margin-left:8px; color:var(--muted); font:600 .72rem/1 "Orbitron",sans-serif; }
.terminal pre {
  padding:24px;
  margin:0;
  min-height:330px;
  white-space:pre-wrap;
  color:#c8faff;
  font:500 .88rem/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.system-stack { display:grid; gap:14px; }
.system-card {
  display:flex; align-items:center; gap:16px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}
.system-icon {
  display:grid; place-items:center;
  width:48px; height:48px;
  border-radius:14px;
  color:var(--cyan);
  background:rgba(94,247,255,.06);
  border:1px solid rgba(94,247,255,.2);
  box-shadow:inset 0 0 18px rgba(94,247,255,.05);
}
.system-card strong { display:block; font:700 .86rem/1.2 "Orbitron",sans-serif; }
.system-card small { display:block; margin-top:6px; color:var(--muted); }
.archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.archive-card {
  padding:24px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
}
.archive-tag {
  color:var(--pink);
  font:700 .64rem/1 "Orbitron",sans-serif;
  letter-spacing:.1em;
}
.archive-card p { color:var(--muted); line-height:1.65; }
.archive-foot { display:flex; justify-content:space-between; color:#70758d; font-size:.72rem; margin-top:26px; }
.map-panel {
  min-height:500px;
  border-radius:24px;
  overflow:hidden;
  position:relative;
  z-index: 4;
}
.map-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(94,247,255,.065) 1px, transparent 1px),
    linear-gradient(90deg,rgba(94,247,255,.065) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at center,#000 40%,transparent 90%);
}
.map-route {
  position:absolute;
  left:22%; top:51%;
  width:54%; height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));
  transform:rotate(-10deg);
  box-shadow:0 0 18px rgba(94,247,255,.4);
}
.map-node {
  position:absolute;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 18px rgba(94,247,255,.8);
}
.map-node::after {
  content:"";
  position:absolute; inset:-9px;
  border:1px solid rgba(94,247,255,.28);
  border-radius:50%;
}
.map-node span {
  position:absolute; top:24px; left:50%;
  transform:translateX(-50%);
  width:max-content;
  color:var(--muted);
  font:700 .62rem/1 "Orbitron",sans-serif;
  letter-spacing:.08em;
}
.n1{left:24%;top:60%}.n2{left:50%;top:48%}.n3{left:75%;top:36%}
.map-copy {
  position:absolute;
  left:28px; bottom:28px;
  max-width:430px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(7,7,19,.72);
  backdrop-filter:blur(12px);
}
.map-copy p:last-child { color:var(--muted); line-height:1.6; }
.quote-panel {
  position:relative;
  padding:60px;
  border-left:3px solid var(--pink);
  background:linear-gradient(90deg,rgba(255,79,216,.07),transparent);
}
.quote-mark {
  position:absolute;
  top:10px; left:20px;
  font:800 5rem/1 serif;
  color:rgba(255,79,216,.2);
}
blockquote {
  margin:0;
  max-width:900px;
  font:700 clamp(1.6rem,3vw,3rem)/1.3 "Orbitron",sans-serif;
}
.quote-panel > p { margin:22px 0 0; color:var(--muted); font-size:.72rem; letter-spacing:.12em; }
.footer {
  padding-top:40px;
  padding-bottom:44px;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:20px;
  align-items:center;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.82rem;
}
.footer > div { display:flex; gap:8px; align-items:center; color:var(--text); font-family:"Orbitron",sans-serif; }
@keyframes bounce {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}
@media (max-width: 1100px) {
  .section-character-art.left { left: -120px; }
  .section-character-art.right { right: -130px; }
  .section-character-art { opacity: .22; }
  .section-character-accent { opacity: .14; }
}
@media (max-width: 900px) {
  .nav-toggle { display:block; }
  .nav {
    position:absolute;
    top:66px; left:0; right:0;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    padding:18px;
    background:rgba(7,7,19,.96);
    border:1px solid var(--line);
    border-radius:16px;
  }
  .nav.open { display:flex; }
  .hero-grid, .lab-layout, .crew-band { grid-template-columns:1fr; }
  .character-card { transform:none; max-width:650px; }
  .mission-grid { grid-template-columns:1fr; }
  .mission-card.featured { grid-row:auto; }
  .archive-grid { grid-template-columns:1fr 1fr; }
  .footer { grid-template-columns:1fr; }
  .crew-chips { grid-template-columns: repeat(2, 1fr); }
  .section-character {
    min-height: auto;
  }
  .section-character-art,
  .section-character-accent {
    position: relative;
    width: min(75vw, 360px);
    max-width: 360px;
    top: 0; left: 0; right: 0; bottom: auto;
    margin: 0 auto 16px;
    opacity: .82;
    z-index: 1;
  }
  .section-character-art.right,
  .section-character-art.left { left: 0; right: 0; }
}
@media (max-width: 620px) {
  .section-shell { width:min(calc(100% - 24px),var(--max)); }
  .topbar { top:10px; width:calc(100% - 20px); }
  .hero { padding-top:110px; }
  .hero h1 { font-size:clamp(3.4rem,18vw,5.4rem); }
  .status-row { grid-template-columns:1fr; }
  .portrait { height:420px; }
  .hero-character { width: min(90%, 320px); }
  .archive-grid { grid-template-columns:1fr; }
  .section { padding-block:80px; }
  .section-heading h2 { font-size:clamp(2.2rem,13vw,4rem); }
  .quote-panel { padding:42px 24px; }
  .map-panel { min-height:520px; }
  .map-copy { left:14px; right:14px; bottom:14px; }
  .crew-chips { grid-template-columns: 1fr; }
}


/* ===== Adventure Mode Enhancements ===== */

.city-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
}
.city-layer {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  background-repeat: repeat-x;
  transform-origin: bottom;
  opacity: .55;
}
.city-layer.far {
  height: 46%;
  bottom: 12%;
  opacity: .18;
  background:
    linear-gradient(90deg,
      transparent 0 3%, rgba(255,255,255,.14) 3% 5%, transparent 5% 8%,
      rgba(255,255,255,.10) 8% 10%, transparent 10% 14%,
      rgba(255,255,255,.12) 14% 17%, transparent 17% 20%);
  background-size: 220px 100%;
  clip-path: polygon(0 100%,0 45%,4% 45%,4% 20%,8% 20%,8% 58%,12% 58%,12% 12%,16% 12%,16% 66%,20% 66%,20% 32%,24% 32%,24% 52%,29% 52%,29% 18%,33% 18%,33% 72%,39% 72%,39% 28%,44% 28%,44% 48%,49% 48%,49% 10%,54% 10%,54% 64%,59% 64%,59% 36%,63% 36%,63% 70%,69% 70%,69% 16%,74% 16%,74% 54%,80% 54%,80% 26%,85% 26%,85% 62%,91% 62%,91% 40%,96% 40%,96% 100%);
}
.city-layer.mid {
  height: 38%;
  opacity: .28;
  background:
    linear-gradient(90deg,
      rgba(94,247,255,.12), rgba(155,92,255,.08) 40%, rgba(255,79,216,.1));
  clip-path: polygon(0 100%,0 64%,5% 64%,5% 30%,9% 30%,9% 78%,15% 78%,15% 42%,19% 42%,19% 58%,25% 58%,25% 20%,31% 20%,31% 70%,38% 70%,38% 34%,44% 34%,44% 76%,51% 76%,51% 24%,57% 24%,57% 68%,63% 68%,63% 40%,68% 40%,68% 78%,74% 78%,74% 30%,81% 30%,81% 58%,87% 58%,87% 22%,93% 22%,93% 68%,100% 68%,100% 100%);
  filter: drop-shadow(0 -10px 24px rgba(91,124,255,.08));
}
.city-layer.near {
  height: 28%;
  opacity: .5;
  background:
    linear-gradient(90deg, rgba(6,6,18,.96), rgba(8,8,22,.92));
  clip-path: polygon(0 100%,0 76%,7% 76%,7% 44%,12% 44%,12% 82%,18% 82%,18% 56%,26% 56%,26% 76%,34% 76%,34% 48%,42% 48%,42% 86%,51% 86%,51% 60%,60% 60%,60% 80%,67% 80%,67% 50%,75% 50%,75% 84%,82% 84%,82% 58%,91% 58%,91% 78%,100% 78%,100% 100%);
}
.neon-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent);
  box-shadow:
    0 0 20px rgba(94,247,255,.6),
    0 0 40px rgba(255,79,216,.32);
}
.city-backdrop::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0; height:42%;
  background: linear-gradient(180deg, transparent, rgba(7,7,19,.95) 85%);
}

.mission-alert {
  position: absolute;
  top: 92px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  min-width: 320px;
  z-index: 4;
}
.mission-pulse {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 0 rgba(255,79,216,.55);
  animation: missionPulse 1.8s infinite;
}
.mission-kicker {
  display:block;
  color: var(--muted);
  font-size: .62rem;
  letter-spacing: .13em;
}
.mission-alert strong {
  display:block;
  margin-top: 3px;
  font:700 .82rem/1 "Orbitron", sans-serif;
}
.mission-code {
  margin-left:auto;
  color: var(--cyan);
  font:700 .64rem/1 "Orbitron", sans-serif;
}

.quest-button {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.quest-button small {
  font-size:.68rem;
  opacity:.72;
  font-weight:600;
}

.dialogue-box {
  position:relative;
  margin-top:20px;
  padding:16px 18px 16px 72px;
  border-radius:18px;
  max-width:650px;
}
.dialogue-box::before {
  content:"";
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border:1px solid rgba(94,247,255,.35);
  border-radius:10px;
  background:
    radial-gradient(circle at 40% 40%, rgba(94,247,255,.6), transparent 26%),
    linear-gradient(135deg, rgba(94,247,255,.12), rgba(255,79,216,.1));
  box-shadow:0 0 20px rgba(94,247,255,.18);
}
.dialogue-speaker {
  display:block;
  color:var(--cyan);
  font:700 .68rem/1 "Orbitron", sans-serif;
  letter-spacing:.12em;
}
.dialogue-box p {
  margin:8px 0 0;
  color:#d9ddf1;
  line-height:1.6;
}

.route-panel {
  margin-top:26px;
  border-radius:20px;
  padding:14px;
}
.route-track {
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap:10px;
}
.route-track a {
  position:relative;
  padding:14px;
  min-height:90px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.022);
  transition:.2s ease;
}
.route-track a::after {
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:10px;
  height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  opacity:.35;
}
.route-track a:hover {
  transform:translateY(-3px);
  border-color:rgba(94,247,255,.28);
  box-shadow:0 14px 30px rgba(0,0,0,.16);
}
.route-track span {
  display:block;
  color:var(--pink);
  font:700 .66rem/1 "Orbitron",sans-serif;
}
.route-track strong {
  display:block;
  margin-top:10px;
  font:700 .8rem/1.2 "Orbitron",sans-serif;
}
.route-track small {
  display:block;
  margin-top:6px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.09em;
}

.sector-label {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.sector-label span {
  padding:7px 10px;
  border:1px solid rgba(94,247,255,.22);
  border-radius:9px;
  color:var(--cyan);
  background:rgba(94,247,255,.04);
  font:700 .65rem/1 "Orbitron",sans-serif;
  letter-spacing:.1em;
}
.sector-label b {
  color:#72778f;
  font-size:.67rem;
  letter-spacing:.13em;
  font-weight:600;
}

.section::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,247,255,.24),rgba(255,79,216,.22),transparent);
}

.mission-card.featured::before,
.archive-card::before,
.system-card::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(120deg,rgba(94,247,255,.035),transparent 35%,rgba(255,79,216,.028));
}

.mission-card,
.archive-card,
.system-card {
  position:relative;
}

@keyframes missionPulse {
  0% { box-shadow:0 0 0 0 rgba(255,79,216,.55); }
  70% { box-shadow:0 0 0 10px rgba(255,79,216,0); }
  100% { box-shadow:0 0 0 0 rgba(255,79,216,0); }
}

@media (max-width: 900px) {
  .mission-alert {
    position:relative;
    top:auto;
    right:auto;
    margin:0 0 18px;
    min-width:0;
  }
  .route-track { grid-template-columns:1fr 1fr; }
  .city-layer.far { opacity:.12; }
  .city-layer.mid { opacity:.18; }
  .city-layer.near { opacity:.34; }
}

@media (max-width: 620px) {
  .route-track { grid-template-columns:1fr; }
  .dialogue-box { padding-left:18px; }
  .dialogue-box::before { display:none; }
}


/* ===== v4 cinematic background + motion ===== */

.city-backdrop {
  background-image:
    linear-gradient(180deg, rgba(4,7,18,.18), rgba(7,7,19,.50) 60%, rgba(7,7,19,.88) 100%),
    url("assets/backgrounds/hero-city.png");
  background-size: cover;
  background-position: center center;
  will-change: transform, background-position;
  border-radius: 28px;
  overflow: hidden;
}

.city-layer,
.neon-horizon {
  display: none;
}

.hero::before {
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 20%, rgba(94,247,255,.10), transparent 22%),
    radial-gradient(circle at 78% 24%, rgba(255,79,216,.10), transparent 18%),
    linear-gradient(180deg, rgba(7,7,19,.08), rgba(7,7,19,.18));
  z-index: -1;
}

.hero-copy,
.route-panel,
.crew-band,
.character-card,
.mission-alert {
  backdrop-filter: blur(14px);
}

.hero-grid {
  position: relative;
  z-index: 2;
}

.float-card {
  animation: floatCard 6.5s ease-in-out infinite;
}

.float-soft {
  animation: floatSoft 7.5s ease-in-out infinite;
}

.float-slower {
  animation: floatSlow 9s ease-in-out infinite;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .75s ease,
    transform .75s ease,
    filter .75s ease;
  filter: blur(6px);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.rise-in {
  transform: translateY(26px);
}

.slide-in-left {
  transform: translateX(-30px);
}

.slide-in-right {
  transform: translateX(30px);
}

.fade-in-up {
  transform: translateY(24px);
}

.reveal.in-view.slide-in-left,
.reveal.in-view.slide-in-right,
.reveal.in-view.fade-in-up,
.reveal.in-view.rise-in {
  transform: translate(0, 0);
}

.character-card.in-view {
  box-shadow: 0 0 30px rgba(94,247,255,.18), 0 30px 80px rgba(0,0,0,.28);
}

.mission-alert {
  box-shadow: 0 0 24px rgba(255,79,216,.10), 0 18px 50px rgba(0,0,0,.16);
}

.route-track a,
.crew-chip,
.mission-card,
.archive-card,
.system-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.route-track a:hover,
.crew-chip:hover,
.mission-card:hover,
.archive-card:hover,
.system-card:hover {
  transform: translateY(-4px) scale(1.01);
}

.archive-card:hover,
.system-card:hover {
  border-color: rgba(94,247,255,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

@keyframes floatCard {
  0%,100% { transform: perspective(1000px) rotateY(-4deg) translateY(0px); }
  50% { transform: perspective(1000px) rotateY(-2deg) translateY(-8px); }
}

@keyframes floatSoft {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes floatSlow {
  0%,100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-12px) scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .float-card,
  .float-soft,
  .float-slower,
  .mission-pulse {
    animation: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .city-backdrop.parallax-layer {
    transform: none !important;
  }
}


/* ===== v5 motion fixes ===== */

/* Hero background: dedicated overscanned image layer so movement is visible without exposing edges. */
.city-backdrop {
  background: none !important;
  overflow: hidden;
  inset: -18px !important;
  border-radius: 34px;
}

.city-image-layer {
  position: absolute;
  inset: -34px;
  background-image:
    linear-gradient(180deg, rgba(4,7,18,.16), rgba(7,7,19,.46) 58%, rgba(7,7,19,.90) 100%),
    url("assets/backgrounds/hero-city.png");
  background-size: cover;
  background-position: center center;
  transform: translate3d(0,0,0) scale(1.07);
  will-change: transform;
  transition: transform 90ms linear;
}

/* ARIA entrance and idle movement no longer compete for the same transform property. */
.hero-card-enter {
  opacity: 0;
  transform: translate3d(56px, 14px, 0) scale(.965);
  filter: blur(8px);
  animation: ariaCardEnter .95s cubic-bezier(.2,.78,.25,1) .22s forwards;
}

.hero-character-float {
  animation: ariaCharacterFloat 6.2s ease-in-out 1.2s infinite;
  transform-origin: 50% 55%;
}

@keyframes ariaCardEnter {
  0% {
    opacity: 0;
    transform: translate3d(56px, 14px, 0) scale(.965);
    filter: blur(8px);
  }
  65% {
    opacity: 1;
    transform: translate3d(-4px, -2px, 0) scale(1.004);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    filter: blur(0);
  }
}

@keyframes ariaCharacterFloat {
  0%, 100% {
    margin-top: 0;
    filter: drop-shadow(0 0 22px rgba(94,247,255,.32))
            drop-shadow(0 0 42px rgba(255,79,216,.18));
  }
  50% {
    margin-top: -9px;
    filter: drop-shadow(0 0 27px rgba(94,247,255,.38))
            drop-shadow(0 0 48px rgba(255,79,216,.22));
  }
}

/* Disable old float transform animation on the card itself. */
.float-card {
  animation: none !important;
}

/* Lab layout: keep REI behind the decorative edge, not over the terminal. */
#lab {
  overflow: clip;
}

#lab .section-character-art.right {
  right: -150px;
  top: 54px;
  width: min(31vw, 370px);
  opacity: .32;
  z-index: 1;
}

#lab .section-content {
  z-index: 4;
}

#lab .lab-layout,
#lab .character-blurb,
#lab .section-heading,
#lab .sector-label {
  position: relative;
  z-index: 5;
}

.lab-guide-blurb {
  max-width: 690px;
}

.support-node {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 13px;
  align-items: center;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid rgba(94,247,255,.16);
  border-radius: 14px;
  background: rgba(5,7,18,.56);
  overflow: hidden;
}

.support-node-art {
  position: relative;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 35%, rgba(94,247,255,.16), transparent 48%),
    rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.09);
}

.support-node-art img {
  position: absolute;
  width: 92px;
  max-width: none;
  left: 50%;
  top: 3px;
  transform: translateX(-50%);
}

.support-node span,
.support-node small {
  display: block;
  color: var(--muted);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.support-node strong {
  display: block;
  margin: 4px 0;
  color: var(--cyan);
  font: 700 .77rem/1.15 "Orbitron", sans-serif;
}

/* Existing scroll reveals remain for the other sections. */
.reveal {
  will-change: opacity, transform, filter;
}

/* Make pointer parallax visually meaningful but restrained. */
@media (pointer: fine) {
  .hero:hover .city-image-layer {
    transition: transform 55ms linear;
  }
}

@media (max-width: 1100px) {
  #lab .section-character-art.right {
    right: -170px;
    opacity: .18;
  }
}

@media (max-width: 900px) {
  #lab .section-character-art.right {
    position: relative;
    right: auto;
    top: auto;
    width: min(72vw, 330px);
    margin: 0 auto 14px;
    opacity: .8;
  }

  .hero-card-enter {
    animation-delay: .12s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card-enter {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  .hero-character-float {
    animation: none !important;
  }

  .city-image-layer {
    transform: scale(1.07) !important;
    transition: none !important;
  }
}


/* ===== v6 LAB CHARACTER FIX ===== */

/*
  REI is now a true section character instead of a faded edge decoration.
  Entrance uses transform. Idle float uses the independent `translate`
  property, so the two effects no longer fight each other.
*/
#lab .lab-rei {
  position: absolute;
  right: 18px !important;
  top: 72px !important;
  width: min(29vw, 335px) !important;
  max-height: 535px;
  object-fit: contain;
  object-position: top center;
  opacity: .92 !important;
  z-index: 3 !important;

  filter:
    drop-shadow(0 0 20px rgba(94,247,255,.30))
    drop-shadow(0 0 36px rgba(255,79,216,.18))
    saturate(1.08);
}

/* Make the reveal itself more obvious for REI. */
#lab .lab-rei.reveal {
  opacity: 0 !important;
  transform: translate3d(70px, 18px, 0) scale(.95);
  filter:
    blur(8px)
    drop-shadow(0 0 0 rgba(94,247,255,0));
  transition:
    opacity .9s cubic-bezier(.2,.78,.25,1),
    transform .9s cubic-bezier(.2,.78,.25,1),
    filter .9s ease;
}

#lab .lab-rei.reveal.in-view {
  opacity: .92 !important;
  transform: translate3d(0,0,0) scale(1);
  filter:
    blur(0)
    drop-shadow(0 0 20px rgba(94,247,255,.30))
    drop-shadow(0 0 36px rgba(255,79,216,.18))
    saturate(1.08);

  animation: reiIdleFloat 7.2s ease-in-out 1.05s infinite;
}

/* `translate` is independent from `transform`, so the entrance stays intact. */
@keyframes reiIdleFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* Same safe idle-float technique for other section characters. */
.section-character-art.section-float.in-view {
  animation: sectionIdleFloat 7.6s ease-in-out .9s infinite;
}

@keyframes sectionIdleFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}

/* Give the Lab heading/text enough visual separation from REI. */
#lab .section-heading,
#lab .sector-label,
#lab .lab-guide-blurb {
  max-width: 690px;
}

/* Keep REI above the background but below interactive content. */
#lab .lab-layout {
  position: relative;
  z-index: 6;
}

#lab .system-stack,
#lab .terminal {
  position: relative;
  z-index: 7;
}

/*
  Desktop composition:
  REI occupies the upper-right "character stage" and ends above the lower
  system cards instead of hanging off the page edge.
*/
@media (min-width: 1101px) {
  #lab {
    min-height: 780px;
  }

  #lab .lab-layout {
    margin-top: 26px;
  }
}

/* Mid-sized screens keep her visible, just smaller. */
@media (min-width: 901px) and (max-width: 1100px) {
  #lab .lab-rei {
    right: 8px !important;
    top: 96px !important;
    width: min(30vw, 290px) !important;
    opacity: .78 !important;
  }

  #lab .lab-rei.reveal.in-view {
    opacity: .78 !important;
  }
}

/* On mobile/tablet she becomes a normal centered character block. */
@media (max-width: 900px) {
  #lab .lab-rei {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: min(74vw, 350px) !important;
    max-height: none;
    margin: 0 auto 12px !important;
    opacity: .95 !important;
    z-index: 3 !important;
  }

  #lab .lab-rei.reveal {
    transform: translate3d(34px, 12px, 0) scale(.97);
  }

  #lab .lab-rei.reveal.in-view {
    opacity: .95 !important;
    transform: translate3d(0,0,0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #lab .lab-rei.reveal,
  #lab .lab-rei.reveal.in-view {
    opacity: .92 !important;
    transform: none !important;
    filter:
      drop-shadow(0 0 20px rgba(94,247,255,.30))
      drop-shadow(0 0 36px rgba(255,79,216,.18))
      saturate(1.08) !important;
    animation: none !important;
    transition: none !important;
    translate: none !important;
  }

  .section-character-art.section-float.in-view {
    animation: none !important;
    translate: none !important;
  }
}


/* ===== v7 VOYAGE CLEANUP ===== */
#voyage .section-character-accent,
#voyage .section-character-accent.lower {
  display: none !important;
}

#voyage .map-panel {
  position: relative;
  z-index: 5;
  overflow: hidden;
}

#voyage .map-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 0 90px rgba(94,247,255,.018);
}


/* ===== v8 MULTI-PAGE SYSTEM ===== */

.interterior-main, .interior-main {
  padding-top: 110px;
  min-height: 100vh;
}

.page-hero {
  position: relative;
  min-height: 520px;
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 42px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  margin: 0;
  font: 800 clamp(3.4rem, 8vw, 7rem)/.92 "Orbitron", sans-serif;
  letter-spacing: -.05em;
}

.page-hero .lead {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.75;
  font-size: 1.06rem;
}

.page-character-stage {
  height: 430px;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(94,247,255,.12), transparent 30%),
    radial-gradient(circle at 70% 45%, rgba(255,79,216,.10), transparent 35%),
    rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.09);
}

.page-character-stage img {
  position: absolute;
  width: min(100%, 330px);
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 0 22px rgba(94,247,255,.26))
    drop-shadow(0 0 40px rgba(255,79,216,.14));
}

.page-character-label {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 700 .64rem/1 "Orbitron", sans-serif;
  letter-spacing: .1em;
  color: var(--cyan);
}

.breadcrumbs {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.breadcrumbs a { color: var(--cyan); }

.hub-section {
  padding-block: 78px 110px;
}

.project-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.project-card {
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(7,7,19,.55);
  position: relative;
  overflow: hidden;
  transition: .25s ease;
}

.project-card::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 85% 15%, rgba(94,247,255,.07), transparent 25%),
    linear-gradient(125deg, transparent 65%, rgba(255,79,216,.04));
  pointer-events:none;
}

.project-card:hover {
  transform: translateY(-5px);
  border-color: rgba(94,247,255,.28);
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
}

.project-card .card-top,
.project-card .card-bottom {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
}

.project-card .card-state {
  color: var(--pink);
  font: 700 .64rem/1 "Orbitron", sans-serif;
  letter-spacing: .1em;
}

.project-card .card-code {
  color:#676d87;
  font-size:.68rem;
  letter-spacing:.09em;
}

.project-card h2 {
  margin: 42px 0 12px;
  font: 700 1.35rem/1.25 "Orbitron", sans-serif;
}

.project-card p {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 28px;
}

.project-card .card-bottom {
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.project-card .card-bottom strong {
  color:var(--cyan);
  font:700 .72rem/1 "Orbitron",sans-serif;
}

.article-shell {
  width: min(calc(100% - 40px), 960px);
  margin-inline: auto;
  padding: 60px 0 120px;
}

.article-header {
  padding: 46px 0 34px;
  border-bottom: 1px solid var(--line);
}

.article-header h1 {
  margin: 16px 0 20px;
  font: 800 clamp(2.7rem, 7vw, 5.6rem)/.98 "Orbitron", sans-serif;
  letter-spacing: -.045em;
}

.article-meta {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.article-body {
  padding-top: 42px;
  color:#c9ccda;
  font-size:1.04rem;
  line-height:1.82;
}

.article-body h2 {
  margin: 52px 0 14px;
  color: var(--text);
  font: 700 1.55rem/1.25 "Orbitron", sans-serif;
}

.article-body h3 {
  margin: 36px 0 10px;
  color: var(--cyan);
  font: 700 1rem/1.25 "Orbitron", sans-serif;
}

.article-body p { margin: 0 0 22px; }

.article-callout {
  margin: 32px 0;
  padding: 20px 22px;
  border-left: 3px solid var(--cyan);
  border-radius: 0 16px 16px 0;
  background: rgba(94,247,255,.045);
}

.article-specs {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:28px 0 38px;
}
.article-specs div {
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.article-specs strong {
  display:block;
  font:700 1.15rem/1 "Orbitron",sans-serif;
  color:var(--text);
}
.article-specs span {
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.related-nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:64px;
}
.related-nav a {
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}
.related-nav span {
  display:block;
  color:var(--muted);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.related-nav strong {
  display:block;
  margin-top:6px;
  color:var(--cyan);
  font-family:"Orbitron",sans-serif;
}

@media (max-width: 900px) {
  .page-hero-grid { grid-template-columns: 1fr; }
  .page-character-stage { max-width: 430px; width:100%; margin-inline:auto; }
  .project-card-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .project-card-grid,
  .article-specs,
  .related-nav { grid-template-columns: 1fr; }
  .article-shell { width: min(calc(100% - 24px), 960px); }
}


/* ===== v9 HOME LINKS + REI VISIBILITY FIX ===== */

.section-title-link {
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
  color: inherit;
  text-decoration: none;
  transition:
    color .22s ease,
    text-shadow .22s ease,
    transform .22s ease;
}

.section-title-link .title-arrow {
  font-size: .28em;
  color: var(--cyan);
  opacity: .42;
  transform: translateY(-.7em);
  transition:
    opacity .22s ease,
    transform .22s ease,
    color .22s ease;
}

.section-title-link:hover {
  color: #fff;
  text-shadow:
    0 0 18px rgba(94,247,255,.24),
    0 0 34px rgba(255,79,216,.12);
}

.section-title-link:hover .title-arrow {
  opacity: 1;
  color: var(--pink);
  transform: translate(.1em, -.82em);
}

.card-title-link {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
}

.card-title-link:hover {
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(94,247,255,.24);
}

/*
  Homepage LAB character final authority.
  Earlier responsive and section-character rules had enough competing
  declarations to occasionally leave REI looking washed out.
*/
#lab .section-character-art.right.lab-rei,
#lab .lab-rei,
#lab .lab-rei.reveal.in-view {
  opacity: 1 !important;
  filter:
    blur(0)
    drop-shadow(0 0 24px rgba(94,247,255,.38))
    drop-shadow(0 0 46px rgba(255,79,216,.22))
    saturate(1.16)
    contrast(1.04) !important;
}

/* Keep her comfortably inside the desktop composition. */
@media (min-width: 1101px) {
  #lab .section-character-art.right.lab-rei,
  #lab .lab-rei {
    right: 24px !important;
    top: 66px !important;
    width: min(29vw, 345px) !important;
  }
}

/* Mid-width screens: still visible, not ghosted. */
@media (min-width: 901px) and (max-width: 1100px) {
  #lab .section-character-art.right.lab-rei,
  #lab .lab-rei,
  #lab .lab-rei.reveal.in-view {
    opacity: .94 !important;
    right: 8px !important;
    width: min(31vw, 300px) !important;
  }
}

/* Mobile retains a strong centered character instead of lowering opacity. */
@media (max-width: 900px) {
  #lab .section-character-art.right.lab-rei,
  #lab .lab-rei,
  #lab .lab-rei.reveal.in-view {
    opacity: 1 !important;
  }
}


/* ===== v10 ARCHIVE CURATOR ===== */

.curator-note-wrap {
  margin-top: -24px;
  position: relative;
  z-index: 6;
}

.curator-note {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  border-radius: 18px;
  border-color: rgba(255,79,216,.20);
  box-shadow:
    0 0 24px rgba(255,79,216,.08),
    0 22px 50px rgba(0,0,0,.18);
}

.curator-sigil {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  color: var(--pink);
  font-size: 1.4rem;
  border: 1px solid rgba(255,79,216,.28);
  background:
    radial-gradient(circle at 50% 45%, rgba(255,79,216,.10), transparent 60%),
    rgba(255,255,255,.02);
  box-shadow: inset 0 0 20px rgba(255,79,216,.04);
}

.curator-note h2 {
  margin: 0 0 8px;
  font: 700 1.25rem/1.25 "Orbitron", sans-serif;
}

.curator-note p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.curator-signature {
  align-self: end;
  color: var(--pink);
  font: 700 .64rem/1 "Orbitron", sans-serif;
  letter-spacing: .11em;
  white-space: nowrap;
}

/* Archive curator portrait gets a warmer magenta-violet treatment. */
body:has(.curator-note) .page-character-stage {
  background:
    radial-gradient(circle at 52% 36%, rgba(255,79,216,.12), transparent 30%),
    radial-gradient(circle at 72% 48%, rgba(155,92,255,.12), transparent 38%),
    rgba(255,255,255,.02);
}

body:has(.curator-note) .page-character-stage img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 52% 40%;
  left: 0;
  bottom: 0;
  transform: none;
  filter:
    saturate(1.08)
    contrast(1.03)
    drop-shadow(0 0 22px rgba(255,79,216,.20));
}

body:has(.curator-note) .page-character-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 62%, rgba(7,7,19,.70) 100%),
    linear-gradient(90deg, rgba(7,7,19,.12), transparent 35%);
}

body:has(.curator-note) .page-character-label {
  z-index: 2;
}

@media (max-width: 760px) {
  .curator-note {
    grid-template-columns: 54px 1fr;
  }
  .curator-signature {
    grid-column: 1 / -1;
    margin-left: 72px;
  }
}


/* ===== v11 ARCHIVE REDESIGN ===== */

.archive-page {
  --archive-accent: #ffb347;
  --archive-accent-2: #ff8a3d;
  --archive-magenta: #ff4fd8;
}

.archive-dashboard {
  padding-top: 104px;
}

.archive-page .nav a.active {
  color: var(--archive-accent);
  text-shadow: 0 0 14px rgba(255,179,71,.45);
}

.archive-hero {
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(320px, .97fr);
  gap: 34px;
  align-items: center;
  position: relative;
  padding-block: 54px 34px;
}

.archive-hero::before {
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:28px;
  z-index:-1;
  background:
    radial-gradient(circle at 76% 32%, rgba(255,79,216,.13), transparent 26%),
    radial-gradient(circle at 24% 28%, rgba(255,179,71,.09), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 55%);
}

.archive-hero-copy {
  position: relative;
  z-index: 3;
}

.archive-hero h1 {
  margin: 10px 0 12px;
  font: 800 clamp(4rem, 8vw, 7.2rem)/.88 "Orbitron", sans-serif;
  letter-spacing: -.055em;
}

.archive-hero h1 span {
  color: var(--archive-accent);
  text-shadow:
    0 0 20px rgba(255,179,71,.22),
    0 0 40px rgba(255,79,216,.08);
}

.archive-eyebrow {
  color: var(--archive-accent);
}

.archive-lead {
  max-width: 650px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.75;
}

.archive-curator-card {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  border-color: rgba(255,179,71,.22);
}

.curator-thumb {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,179,71,.22);
  background: rgba(255,255,255,.03);
}

.curator-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 28%;
}

.curator-copy {
  min-width: 0;
}

.curator-role {
  display:block;
  color: var(--archive-accent);
  font: 700 .62rem/1 "Orbitron", sans-serif;
  letter-spacing: .12em;
}

.curator-copy strong {
  display:block;
  margin-top: 5px;
  font: 700 .8rem/1.2 "Orbitron", sans-serif;
}

.curator-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

.curator-status {
  color: var(--archive-accent);
  font: 700 .58rem/1 "Orbitron", sans-serif;
  letter-spacing: .1em;
  white-space: nowrap;
}

.archive-tabs {
  margin-top: 22px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.archive-tabs a {
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.archive-tabs a:hover,
.archive-tabs a.active {
  color: #0b0b14;
  border-color: var(--archive-accent);
  background: linear-gradient(90deg, var(--archive-accent), #ffd08a);
  box-shadow: 0 0 22px rgba(255,179,71,.16);
}

.archive-character-stage {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 52% 35%, rgba(255,179,71,.10), transparent 25%),
    radial-gradient(circle at 76% 48%, rgba(255,79,216,.12), transparent 33%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
}

.archive-character-stage::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, transparent 62%, rgba(7,7,19,.72) 100%),
    linear-gradient(90deg, rgba(7,7,19,.12), transparent 30%);
}

.archive-character-stage img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 52% 38%;
  opacity: 1 !important;
  filter:
    saturate(1.12)
    contrast(1.05)
    drop-shadow(0 0 28px rgba(255,179,71,.20));
}

.archive-character-tag {
  position:absolute;
  left:18px;
  bottom:16px;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.archive-character-tag span {
  color: var(--archive-accent);
  font: 800 1rem/1 "Orbitron", sans-serif;
}

.archive-character-tag small {
  color: var(--muted);
  font-size:.68rem;
  letter-spacing:.12em;
}

.archive-orbit {
  position:absolute;
  border:1px solid rgba(255,179,71,.16);
  border-radius:50%;
  pointer-events:none;
}
.orbit-one { width:220px;height:220px;right:-40px;top:50px; }
.orbit-two { width:130px;height:130px;left:22px;bottom:80px;border-color:rgba(255,79,216,.14); }

.archive-content {
  display:grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  padding-block: 44px 110px;
}

.archive-main-column {
  min-width:0;
}

.archive-section-heading {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-end;
  margin-bottom:18px;
}

.archive-section-heading h2 {
  margin:0;
  font:700 1.7rem/1 "Orbitron",sans-serif;
}

.archive-view-all {
  color: var(--archive-accent);
  font:700 .7rem/1 "Orbitron",sans-serif;
  letter-spacing:.08em;
}

.archive-featured-grid {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:14px;
}

.archive-entry-card {
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.025);
  transition:.25s ease;
}

.archive-entry-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,179,71,.30);
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}

.entry-visual {
  height:150px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 60% 30%, rgba(255,179,71,.11), transparent 26%),
    linear-gradient(145deg,#16172f,#0b0c18);
}

.entry-badge {
  position:absolute;
  left:12px;
  top:12px;
  padding:6px 8px;
  border-radius:8px;
  color:var(--archive-accent);
  background:rgba(7,7,19,.72);
  border:1px solid rgba(255,179,71,.18);
  font:700 .56rem/1 "Orbitron",sans-serif;
  letter-spacing:.08em;
  z-index:2;
}

.mini-wagon {
  position:absolute;
  left:50%;
  bottom:18px;
  width:138px;
  height:64px;
  transform:translateX(-50%);
  border:2px solid rgba(255,179,71,.66);
  border-radius:20px 20px 4px 4px;
  box-shadow:0 0 18px rgba(255,179,71,.12);
}
.mini-wagon::before,
.mini-wagon::after {
  content:"";
  position:absolute;
  bottom:-16px;
  width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(255,255,255,.34);
}
.mini-wagon::before{left:18px}.mini-wagon::after{right:18px}

.server-rack {
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-42%);
  width:92px;height:100px;
  border:2px solid rgba(94,247,255,.55);
  box-shadow:0 0 22px rgba(94,247,255,.12);
  background:
    repeating-linear-gradient(180deg, rgba(94,247,255,.16) 0 6px, transparent 6px 15px);
}

.frame-lines {
  position:absolute;inset:0;
  background:
    linear-gradient(30deg,transparent 47%,rgba(255,179,71,.55) 48% 50%,transparent 51%),
    linear-gradient(-32deg,transparent 47%,rgba(255,79,216,.46) 48% 50%,transparent 51%);
}

.entry-body {
  padding:16px;
}

.entry-body h3 {
  margin:0 0 9px;
  font:700 1rem/1.3 "Orbitron",sans-serif;
}

.entry-body p {
  margin:0;
  min-height:72px;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.55;
}

.entry-meta {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding-top:14px;
  margin-top:14px;
  border-top:1px solid var(--line);
  color:#70758d;
  font-size:.65rem;
  letter-spacing:.08em;
}

.archive-sidebar {
  display:grid;
  gap:14px;
  align-content:start;
}

.archive-panel {
  padding:18px;
  border-radius:18px;
}

.archive-category-list {
  display:grid;
  gap:4px;
}

.archive-category-list a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--muted);
  font-size:.8rem;
}

.archive-category-list a:hover span {
  color:var(--archive-accent);
}

.archive-category-list b {
  color:var(--archive-accent);
  font-size:.72rem;
}

.archive-panel blockquote {
  margin:6px 0 12px;
  font:700 1.05rem/1.45 "Orbitron",sans-serif;
}

.archive-panel > p:not(.eyebrow) {
  color:var(--muted);
  font-size:.8rem;
  line-height:1.6;
}

.archive-list {
  margin-top:16px;
  border-radius:18px;
  overflow:hidden;
}

.archive-list-header,
.archive-list-row {
  display:grid;
  grid-template-columns:70px 1fr 1fr 70px;
  gap:14px;
  align-items:center;
  padding:13px 16px;
}

.archive-list-header {
  background:rgba(255,255,255,.025);
  color:var(--archive-accent);
  font:700 .62rem/1 "Orbitron",sans-serif;
  letter-spacing:.08em;
}

.archive-list-header span:last-child {
  text-align:right;
  color:var(--muted);
}

.archive-list-row {
  border-top:1px solid rgba(255,255,255,.06);
}

.archive-list-row > span,
.archive-list-row small {
  color:#777d96;
  font-size:.7rem;
}

.archive-list-row strong {
  font-size:.82rem;
}

.archive-list-row a {
  color:var(--archive-accent);
  font:700 .64rem/1 "Orbitron",sans-serif;
  text-align:right;
}

.archive-stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.archive-stats .eyebrow {
  grid-column:1/-1;
}

.archive-stats div {
  padding:12px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
}

.archive-stats strong {
  display:block;
  color:var(--archive-accent);
  font:700 1.1rem/1 "Orbitron",sans-serif;
}

.archive-stats span {
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:.65rem;
}

@media (max-width: 1050px) {
  .archive-hero {
    grid-template-columns: 1fr;
  }
  .archive-character-stage {
    max-width: 560px;
    width:100%;
    margin-inline:auto;
  }
  .archive-content {
    grid-template-columns: 1fr;
  }
  .archive-sidebar {
    grid-template-columns: repeat(3,1fr);
  }
}

@media (max-width: 760px) {
  .archive-featured-grid,
  .archive-sidebar {
    grid-template-columns:1fr;
  }
  .archive-curator-card {
    grid-template-columns:64px 1fr;
  }
  .curator-status {
    grid-column:1/-1;
    margin-left:80px;
  }
  .archive-list-header,
  .archive-list-row {
    grid-template-columns:56px 1fr 64px;
  }
  .archive-list-header span:last-child,
  .archive-list-row small {
    display:none;
  }
}


/* ===== v12 SORA RENDER FIX ===== */

/* Thumbnail card: better framing for the new rendered character asset */
.archive-page .curator-thumb {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,179,71,.12), transparent 40%),
    rgba(10, 10, 22, .85);
}

.archive-page .curator-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  padding: 2px;
  transform: scale(1.08);
}

/* Main Archive hero stage now uses an actual transparent character render. */
.archive-page .archive-character-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 580px;
  padding: 24px 18px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,179,71,.12), transparent 24%),
    radial-gradient(circle at 76% 48%, rgba(255,79,216,.10), transparent 33%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008));
}

.archive-page .archive-character-stage img {
  position: relative;
  inset: auto;
  width: min(100%, 500px);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 1 !important;
  z-index: 1;
  filter:
    saturate(1.12)
    contrast(1.05)
    drop-shadow(0 0 24px rgba(255,179,71,.20))
    drop-shadow(0 0 40px rgba(255,79,216,.12));
}

.archive-page .archive-character-stage::after {
  z-index: 2;
}

.archive-page .archive-character-tag {
  z-index: 3;
}

/* Give SORA a subtle entrance + idle float that won't conflict. */
.archive-page .archive-character-stage.reveal {
  opacity: 0;
  transform: translate3d(34px, 10px, 0) scale(.98);
  filter: blur(6px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.78,.25,1),
    filter .8s ease;
}

.archive-page .archive-character-stage.reveal.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.archive-page .archive-character-stage.reveal.in-view img {
  animation: soraArchiveFloat 7.5s ease-in-out 1s infinite;
}

@keyframes soraArchiveFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@media (max-width: 1050px) {
  .archive-page .archive-character-stage {
    min-height: 520px;
    max-width: 560px;
    margin-inline: auto;
  }

  .archive-page .archive-character-stage img {
    width: min(100%, 440px);
  }
}

@media (max-width: 760px) {
  .archive-page .archive-character-stage {
    min-height: 460px;
    padding: 16px 12px 0;
  }

  .archive-page .archive-character-stage img {
    width: min(100%, 380px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive-page .archive-character-stage.reveal,
  .archive-page .archive-character-stage.reveal.in-view {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .archive-page .archive-character-stage.reveal.in-view img {
    animation: none !important;
    translate: none !important;
  }
}


/* ===== v13 HOMEPAGE ARCHIVE SORA ===== */

.archive-home-section {
  min-height: 760px;
  overflow: hidden;
}

.archive-home-section .section-content {
  position: relative;
  z-index: 4;
}

/* Put SORA fully inside the section and behind the content plane. */
.archive-home-sora {
  position: absolute;
  right: 10px;
  top: 78px;
  width: min(31vw, 365px);
  max-height: 610px;
  object-fit: contain;
  object-position: center top;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transform: translate3d(58px, 16px, 0) scale(.96);
  filter:
    blur(8px)
    drop-shadow(0 0 0 rgba(255,179,71,0));
  transition:
    opacity .9s cubic-bezier(.2,.78,.25,1),
    transform .9s cubic-bezier(.2,.78,.25,1),
    filter .9s ease;
}

.archive-home-sora.in-view {
  opacity: .96;
  transform: translate3d(0,0,0) scale(1);
  filter:
    blur(0)
    saturate(1.1)
    contrast(1.04)
    drop-shadow(0 0 24px rgba(255,179,71,.24))
    drop-shadow(0 0 42px rgba(255,79,216,.15));
  animation: archiveSoraFloat 7.4s ease-in-out 1s infinite;
}

@keyframes archiveSoraFloat {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}

/* Keep content readable and leave breathing room for SORA. */
.archive-home-section .section-heading,
.archive-home-section .archive-curator-home-note {
  max-width: 690px;
}

.archive-curator-home-note {
  margin-bottom: 28px;
  background: rgba(8,8,22,.58);
  border-color: rgba(255,179,71,.14);
}

.archive-curator-home-note .name {
  color: #ffb347;
}

/* Archive cards stay above the character. */
.archive-home-section .archive-grid {
  position: relative;
  z-index: 5;
}

@media (min-width: 1101px) {
  .archive-home-section .archive-grid {
    width: calc(100% - 245px);
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .archive-home-sora {
    right: -8px;
    top: 120px;
    width: min(30vw, 300px);
    opacity: 0;
  }

  .archive-home-sora.in-view {
    opacity: .72;
  }

  .archive-home-section .archive-grid {
    width: calc(100% - 160px);
  }
}

@media (max-width: 900px) {
  .archive-home-section {
    min-height: auto;
  }

  .archive-home-sora {
    position: relative;
    right: auto;
    top: auto;
    width: min(78vw, 350px);
    max-height: none;
    margin: 0 auto 14px;
    opacity: 0;
    display: block;
  }

  .archive-home-sora.in-view {
    opacity: .96;
  }

  .archive-home-section .archive-grid {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive-home-sora,
  .archive-home-sora.in-view {
    opacity: .96 !important;
    transform: none !important;
    filter:
      saturate(1.1)
      contrast(1.04)
      drop-shadow(0 0 24px rgba(255,179,71,.24))
      drop-shadow(0 0 42px rgba(255,79,216,.15)) !important;
    animation: none !important;
    transition: none !important;
    translate: none !important;
  }
}


/* ===== v14 PHP / MARKDOWN CONTENT ===== */
.markdown-body ul {
  margin: 0 0 24px 1.2rem;
  padding: 0;
}
.markdown-body li {
  margin: .48rem 0;
  color: #c9ccda;
}
.markdown-body pre {
  overflow-x: auto;
  margin: 26px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(4,5,14,.72);
}
.markdown-body code {
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  color: #c8faff;
}
.markdown-body p code {
  padding: .15em .38em;
  border-radius: 6px;
  background: rgba(94,247,255,.06);
}
.markdown-body blockquote {
  margin: 28px 0;
  padding: 18px 20px;
  border-left: 3px solid var(--cyan);
  border-radius: 0 14px 14px 0;
  background: rgba(94,247,255,.04);
  font: inherit;
}
.markdown-body hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.project-log-index {
  margin-top: 72px;
}


/* ===== v16 DYNAMIC SECTION INDEXER ===== */

.dynamic-section-hero {
  position: relative;
  min-height: 620px;
  padding-top: 132px;
  padding-bottom: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  align-items: center;
  gap: 48px;
  overflow: hidden;
}

.dynamic-section-copy {
  position: relative;
  z-index: 3;
  max-width: 760px;
}

.dynamic-section-copy h1 {
  margin: 18px 0 20px;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(3rem, 7vw, 6.7rem);
  line-height: .92;
}

.dynamic-section-character {
  position: relative;
  min-height: 470px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.dynamic-section-character img {
  width: min(100%, 390px);
  max-height: 540px;
  object-fit: contain;
  filter:
    saturate(1.08)
    contrast(1.04)
    drop-shadow(0 0 30px rgba(94,247,255,.14));
}

.dynamic-index-zone {
  padding-top: 40px;
  padding-bottom: 110px;
}

.dynamic-index-zone code,
.empty-state code {
  color: var(--cyan);
}

.dynamic-content-card {
  min-height: 285px;
}

.empty-state {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}

.empty-state strong {
  font-family: "Orbitron", sans-serif;
  color: var(--cyan);
}

@media (max-width: 900px) {
  .dynamic-section-hero {
    grid-template-columns: 1fr;
    padding-top: 112px;
  }

  .dynamic-section-character {
    min-height: 390px;
  }

  .dynamic-section-character img {
    width: min(84vw, 360px);
  }
}


/* ===== v19 DYNAMIC SECTION SPACING FIX =====
   interior-main already reserves space for the fixed navigation.
   v16 accidentally added a second large top offset and an oversized hero,
   pushing the content cards far below the visible section header.
*/

.dynamic-section-page .dynamic-section-hero {
  min-height: 430px;
  padding-top: 28px;
  padding-bottom: 18px;
  align-items: center;
  gap: 28px;
}

.dynamic-section-page .dynamic-section-character {
  min-height: 360px;
  max-height: 410px;
}

.dynamic-section-page .dynamic-section-character img {
  width: min(100%, 330px);
  max-height: 400px;
}

.dynamic-section-page .dynamic-section-copy h1 {
  margin-top: 12px;
  margin-bottom: 14px;
}

.dynamic-section-page .dynamic-section-copy .hero-deck {
  margin-bottom: 18px;
}

.dynamic-section-page .character-blurb {
  margin-top: 18px;
}

.dynamic-section-page .dynamic-index-zone {
  padding-top: 12px;
  padding-bottom: 90px;
}

.dynamic-section-page .dynamic-index-zone .section-heading {
  margin-bottom: 20px;
}

.dynamic-section-page .dynamic-index-zone .section-heading h2 {
  font-size: clamp(2rem, 4.3vw, 4rem);
}

.dynamic-section-page .dynamic-content-card {
  min-height: 255px;
}

@media (max-width: 900px) {
  .dynamic-section-page .dynamic-section-hero {
    min-height: auto;
    padding-top: 18px;
    padding-bottom: 12px;
    gap: 8px;
  }

  .dynamic-section-page .dynamic-section-character {
    min-height: 300px;
    max-height: 340px;
  }

  .dynamic-section-page .dynamic-section-character img {
    width: min(72vw, 300px);
    max-height: 330px;
  }

  .dynamic-section-page .dynamic-index-zone {
    padding-top: 8px;
  }
}

@media (max-width: 620px) {
  .dynamic-section-page .dynamic-section-character {
    min-height: 260px;
    max-height: 290px;
  }

  .dynamic-section-page .dynamic-section-character img {
    width: min(76vw, 260px);
    max-height: 285px;
  }

  .dynamic-section-page .dynamic-index-zone {
    padding-top: 0;
  }
}


/* ===== v20 SECTION FLOW FIX =====
   Character is decorative on desktop and no longer contributes to document
   flow. This removes the large empty gap before the Markdown card index.
*/

.dynamic-section-page .dynamic-section-composition {
  position: relative;
  padding-top: 22px;
  padding-bottom: 90px;
}

.dynamic-section-page .dynamic-section-hero {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.dynamic-section-page .dynamic-section-copy {
  position: relative;
  z-index: 4;
  width: min(66%, 730px);
  max-width: 730px;
}

.dynamic-section-page .dynamic-section-character {
  position: absolute;
  z-index: 2;
  right: 0;
  top: -10px;
  width: min(34vw, 370px);
  min-height: 0;
  max-height: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.dynamic-section-page .dynamic-section-character img {
  width: 100%;
  height: auto;
  max-height: 470px;
  object-fit: contain;
  object-position: center bottom;
}

.dynamic-section-page .dynamic-index-zone {
  position: relative;
  z-index: 5;
  width: min(72%, 820px);
  padding-top: 26px;
  padding-bottom: 0;
}

.dynamic-section-page .dynamic-index-zone .section-heading {
  margin-bottom: 18px;
}

.dynamic-section-page .dynamic-index-zone .section-heading p:last-child {
  margin-bottom: 0;
}

.dynamic-section-page .project-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dynamic-section-page .dynamic-content-card {
  min-height: 230px;
}

/* When the viewport is wide enough, let cards use more of the page after
   the character's visual footprint ends. */
@media (min-width: 1280px) {
  .dynamic-section-page .dynamic-index-zone {
    width: min(76%, 930px);
  }
}

/* Tablet/mobile: character returns to normal document flow. */
@media (max-width: 900px) {
  .dynamic-section-page .dynamic-section-composition {
    padding-top: 18px;
  }

  .dynamic-section-page .dynamic-section-copy {
    width: 100%;
    max-width: none;
  }

  .dynamic-section-page .dynamic-section-character {
    position: relative;
    right: auto;
    top: auto;
    width: min(76vw, 330px);
    margin: 12px auto 0;
    min-height: 0;
    max-height: none;
  }

  .dynamic-section-page .dynamic-section-character img {
    max-height: 360px;
  }

  .dynamic-section-page .dynamic-index-zone {
    width: 100%;
    padding-top: 18px;
  }

  .dynamic-section-page .project-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .dynamic-section-page .dynamic-section-character {
    width: min(74vw, 280px);
  }

  .dynamic-section-page .dynamic-section-character img {
    max-height: 310px;
  }
}


/* ===== v21 CHARACTER VISIBILITY FAILSAFE =====
   Dynamic section characters are core content, not optional animation.
   They remain visible even if JavaScript fails or IntersectionObserver does not run.
*/
.dynamic-section-page .dynamic-section-character.reveal,
.dynamic-section-page .dynamic-section-character.reveal.slide-in-right {
  opacity: 1;
  filter:
    saturate(1.08)
    contrast(1.04)
    drop-shadow(0 0 30px rgba(94,247,255,.14));
  transform: translateX(18px);
}

.dynamic-section-page .dynamic-section-character.reveal.in-view,
.dynamic-section-page .dynamic-section-character.reveal.in-view.slide-in-right {
  opacity: 1;
  filter:
    saturate(1.08)
    contrast(1.04)
    drop-shadow(0 0 30px rgba(94,247,255,.14));
  transform: translateX(0);
}

/* Make sure character image itself can never inherit a hidden state. */
.dynamic-section-page .dynamic-section-character img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}


/* ===== v24 MARKDOWN MEDIA ===== */
.markdown-body .content-image {
  margin: 30px 0;
}

.markdown-body .content-image img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 760px;
  margin: 0 auto;
  border: 1px solid rgba(94,247,255,.14);
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}


/* ===== v26 PUBLIC ENTRY MEDIA GALLERY ===== */

.article-media-gallery {
  margin: 52px 0 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.article-media-heading {
  max-width: 720px;
  margin-bottom: 22px;
}

.article-media-heading h2 {
  margin: 4px 0 8px;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.7rem);
}

.article-media-heading p:last-child {
  color: var(--muted);
}

.article-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.article-media-item {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: rgba(255,255,255,.025);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.article-media-item:hover {
  transform: translateY(-3px);
  border-color: rgba(94,247,255,.38);
  background: rgba(94,247,255,.035);
}

.article-media-item img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: rgba(0,0,0,.2);
}

.article-media-item span {
  display: block;
  overflow: hidden;
  padding: 11px 12px 13px;
  font-size: .78rem;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 850px) {
  .article-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .article-media-grid {
    grid-template-columns: 1fr;
  }
}