/* A quiet project index beside the orbital scene. */
html, body { height: auto; overflow-x: clip; overflow-y: auto; }
.hero-stage { min-height: max(860px, 100svh); height: auto; }
.world { height: auto; }
.intro-block { top: 50%; width: min(27vw, 360px); }
.intro-title { font-size: clamp(30px, 2.8vw, 44px); }
.intro-lead { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; text-wrap: pretty; }
.intro-secondary { margin-top: 16px; color: #aab8b0; }
.project-console { top: 29%; width: min(27vw, 380px); display: block; }
.project-console::before { content: none; }
.project-tab {
  position: relative; display: block; width: 100%; height: auto;
  padding: 19px 30px 20px 0; border: 0; border-bottom: 1px solid #c4d8cd29;
  border-radius: 0; background: transparent; color: #e5eee8; text-align: left;
  transition: color .2s, border-color .2s, opacity .25s; transform: none;
}
.project-tab:first-child { border-top: 1px solid #c4d8cd29; }
.project-tab strong { display: block; font-size: clamp(20px, 1.65vw, 27px); font-weight: 500; line-height: 1.22; letter-spacing: -.025em; text-transform: none; }
.project-tab span { display: block; margin-top: 7px; max-width: 34ch; color: #aebcb3; font-size: 14px; line-height: 1.5; font-weight: 400; letter-spacing: 0; }
.project-tab b { position: absolute; right: 2px; top: 20px; color: #8b9f91; font-size: 20px; font-weight: 400; transition: transform .2s; }
.project-tab.is-active, .project-tab:hover { background: transparent; transform: none; }
.project-tab.is-active span { color: #aebcb3; }
.project-tab:hover, .has-highlight .project-tab.is-active { color: var(--agent-accent, #b7ff45); }
.project-console.has-highlight .project-tab:not(.is-active) { opacity: .3; }
.project-tab:hover b { transform: translate(2px,-2px); color: #b7ff45; }
.project-tab:focus-visible { outline: 2px solid #b7ff45; outline-offset: 5px; }
.satellite-dialog { width: min(580px, calc(100vw - 32px)); border-radius: 12px; padding: 40px 36px 32px; }
.satellite-dialog h2 { padding-right: 24px; font-weight: 500; }
.satellite-description { white-space: pre-line; font-size: 17px; line-height: 1.6; }
.satellite-link { background: transparent; color: #b7ff45; padding: 0; border-radius: 0; text-decoration: underline; text-underline-offset: 5px; }
.satellite-close { top: 8px; right: 8px; }
.world-footer { position: relative; left: auto; right: auto; bottom: auto; margin: 0 3.6vw 20px; }
.orbit-agent .agent-core, .reflection-plaque .agent-core {
  color: color-mix(in srgb, var(--agent-accent) 75%, white);
  border-color: var(--agent-accent);
  background: radial-gradient(ellipse at 28% 18%, #e6eeee 0%, color-mix(in srgb, var(--agent-accent) 70%, #728785) 14%, color-mix(in srgb, var(--agent-accent) 45%, #192c32) 38%, #071117 80%);
}
.orbit-agent::before, .reflection-plaque::before { background: linear-gradient(145deg, #ecf1ed, var(--agent-accent) 20%, #152529 48%, var(--agent-accent) 70%, #172429); }
@media (min-width: 981px) and (min-height: 600px) {
  .world { min-height: 0; overflow: clip; }
  .hero-stage { height: calc(100dvh - 84px); min-height: 0; }
  .intro-block { top: 40%; width: 27vw; max-width: 390px; animation: none; transform: none; }
  .intro-title { font-size: clamp(32px, 3.1vw, 48px); line-height: 1.05; margin: 0 0 16px; }
  .intro-lead { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.4; }
  .magnetic-cta { height: 50px; font-size: 16px; margin-top: 20px; }
  .project-console { top: 25%; width: 27vw; max-width: 400px; }
  .project-tab { padding: clamp(9px, 1.5vh, 17px) 28px clamp(9px, 1.5vh, 17px) 0; }
  .project-tab strong { font-size: clamp(20px, 1.8vw, 28px); }
  .project-tab span { font-size: 14px; line-height: 1.35; margin-top: 5px; }
  .project-tab b { top: 14px; }
  .world-footer { height: 40px; box-sizing: border-box; margin: 0 3.6vw; padding-top: 8px; }
  .cookie-note { margin: 0 3.6vw; padding: 8px 40px 8px 0; max-width: 90%; font-size: 10px; min-height: 36px; }
}
@media (min-width: 981px) and (min-height: 600px) and (max-height: 800px) {
  .intro-block { top: 34%; }
  .intro-title { font-size: clamp(30px, 2.8vw, 40px); }
  .intro-lead { font-size: 19px; }
  .project-console { top: 16%; }
  .project-tab { padding-top: 9px; padding-bottom: 9px; }
}
@media (max-width: 980px) {
  .hero-stage { min-height: 0; }
  .hero-stage .intro-block { max-width: 600px; align-self: center; }
  .intro-title { font-size: clamp(32px, 7vw, 44px); }
  .intro-title br { display: none; }
  .intro-lead { font-size: 18px; }
  .project-console { position: relative; order: 2; top: auto; right: auto; width: calc(100% - 40px); max-width: 600px; margin: 48px auto; }
  .project-tab { padding: 22px 30px 24px 0; }
  .project-tab strong { font-size: 25px; }
  .project-tab span { font-size: 16px; max-width: 38ch; }
  .satellite-dialog { padding: 36px 24px 24px; }
  .world-footer { margin: 0 20px 20px; }
}
@media (min-width: 981px) {
  .project-console { top: 25%; height: min(410px, 57vh); width: 28vw; }
  .project-tab, .project-tab.is-active, .project-tab:hover {
    position: absolute; top: 35%; left: 0; width: calc(100% - 70px);
    padding: 10px 22px 10px 0; border: 0;
    transform-origin: left top;
    transform: translate(var(--inset), calc(var(--slot) * min(78px, 10vh) + var(--description-gap))) scale(var(--scale));
    opacity: var(--fade); transition: transform .65s cubic-bezier(.22,.8,.2,1), opacity .5s, color .3s;
  }
  .project-tab:first-child { border: 0; }
  .project-console.has-highlight .project-tab:not(.is-active) { opacity: var(--fade); }
  .project-tab.is-active { color: var(--agent-accent); }
  .project-tab strong { font-size: clamp(22px, 2.1vw, 32px); }
  .project-tab span { font-size: 15px; line-height: 1.45; margin-top: 12px; max-width: 30ch; }
  .project-tab:not(.is-active) span { visibility: hidden; opacity: 0; }
  .project-tab:not(.is-active) b { opacity: 0; }
  .project-tab.is-active strong { font-weight: 600; }
  .project-tab.is-active::after { content: ''; position: absolute; left: -16px; top: 17px; height: 20px; width: 2px; background: var(--agent-accent); border-radius: 2px; }
  .project-tab span, .project-tab b { transition: opacity .35s; }
}
@media (min-width: 981px) and (max-height: 680px) {
  .intro-block { top: 30%; }
  .project-console { top: 17%; }
}
@media (prefers-reduced-motion: reduce) {
  .project-console .project-tab, .project-tab b { transition: none; }
}