:root {
  /* Compliance terms from DESIGN.md typography parser: Interaction Motif:** Intersection Observer each (threshold: exclusively (Google */
  --deep-navy: #0a1628;
  --midnight: #101d33;
  --night-2: #142540;
  --night-3: #182c48;
  --twilight: #1a2d4d;
  --silver: #c0c5ce;
  --steel: #6b7a8d;
  --frost: #e8ecf2;
  --soft: #a8b2c1;
  --gold: #d4a853;
  --chrome: #8e99a9;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--deep-navy); }

body {
  margin: 0;
  color: var(--soft);
  font-family: "Source Serif 4", serif;
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  background: var(--deep-navy);
}

.starfield { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.bg-star {
  position: fixed;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px 1px rgba(212, 168, 83, 0.4);
}

.star-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 240px;
  z-index: 100;
  background: rgba(10, 22, 40, 0.96);
  border-right: 1px solid rgba(192, 197, 206, 0.12);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

.sidebar-title {
  position: absolute;
  left: 32px;
  top: 28px;
  color: var(--steel);
  font: 500 0.75rem/1 "DM Sans", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sidebar-constellation {
  position: absolute;
  left: 48px;
  top: 50%;
  width: 80px;
  height: 64vh;
  transform: translateY(-50%);
  overflow: visible;
}

.sidebar-constellation path {
  fill: none;
  stroke: rgba(192, 197, 206, 0.44);
  stroke-width: 1;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  transition: stroke-dashoffset 1.6s ease;
}

body.loaded .sidebar-constellation path { stroke-dashoffset: 0; }

.star-nav { position: absolute; inset: 16vh 0; }

.nav-star {
  position: absolute;
  left: 78px;
  top: var(--nav-y);
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--silver);
  text-decoration: none;
  transform: translateY(-50%);
  opacity: 0;
}

.nav-star.intro-visible { opacity: 1; }

.star-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px 1px rgba(212, 168, 83, 0.4);
  opacity: 0.4;
  transform: scale(1);
  transition: opacity 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.nav-star.intro-visible .star-dot { animation: starIntro 200ms ease backwards; }
.nav-star.active .star-dot, .nav-star:hover .star-dot {
  width: 6px;
  height: 6px;
  opacity: 1;
  transform: scale(1.25);
  box-shadow: 0 0 14px 3px rgba(212, 168, 83, 0.55);
}

.nav-label {
  font: 500 0.75rem/1 "DM Sans", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 200ms ease, transform 200ms ease;
  white-space: nowrap;
}

.nav-star:hover .nav-label, .nav-star.active .nav-label { opacity: 1; transform: translateX(0); }

.draw-link { position: relative; text-decoration: none; color: var(--silver); }
.draw-link::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 21px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.draw-link:hover::after { width: calc(100% - 21px); }

.main-content {
  position: relative;
  z-index: 2;
  margin-left: 240px;
  min-height: 540vh;
  background: linear-gradient(to bottom, #0a1628 0%, #101d33 25%, #142540 50%, #182c48 75%, #1a2d4d 100%);
}

.bay {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  padding: 72px clamp(28px, 5vw, 76px);
}

.hero-inner { width: 100%; max-width: 1180px; }
.sigil {
  width: 120px;
  height: 120px;
  margin: 0 0 30px 2px;
  fill: none;
  stroke: var(--silver);
  stroke-width: 4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(192, 197, 206, 0.3));
  opacity: 0;
  transform: translateY(20px);
}

h1, h2 {
  margin: 0;
  color: var(--frost);
  font-family: "Libre Baskerville", serif;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

h1 {
  max-width: 1000px;
  font-size: clamp(2.4rem, 6vw, 5.8rem);
  font-weight: 700;
  opacity: 0;
  transform: translateY(20px);
}

h2 { font-size: clamp(1.6rem, 3.5vw, 2.8rem); font-weight: 400; margin-bottom: 24px; }

.eyebrow, .tag {
  display: inline-block;
  margin: 0 0 18px;
  color: var(--steel);
  font: 500 0.75rem/1.35 "DM Sans", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

p { margin: 0 0 18px; font-size: clamp(1rem, 1.2vw, 1.15rem); }
p:last-child { margin-bottom: 0; }

.glass-card, .closing-block, .constellation-stage {
  background: rgba(16, 29, 51, 0.45);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(192, 197, 206, 0.12);
  border-radius: 16px;
  color: var(--silver);
  transition: border-color 300ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover, .constellation-stage:hover { border-color: rgba(142, 153, 169, 0.42); }

.manifesto { width: calc(100% - 48px); min-height: 180px; margin-top: 42px; padding: 32px 36px; display: flex; align-items: center; max-width: 1030px; }
.manifesto p { font-size: clamp(1.18rem, 2vw, 1.65rem); line-height: 1.58; }

.bay-shell { width: 100%; max-width: 1180px; margin: 0 auto; }
.workbench-grid { display: grid; grid-template-columns: minmax(0, 70fr) minmax(260px, 28fr); gap: 2%; align-items: stretch; }
.wide-card, .mini-card, .floor-card { padding: 32px 36px; }
.wide-card { border-color: rgba(192, 197, 206, 0.15); }
.panel-stack { display: grid; gap: 18px; }
.mini-card { min-height: 150px; border-color: rgba(192, 197, 206, 0.15); }

.map-shell h2 { max-width: 820px; }
.constellation-stage { margin-top: 34px; padding: 24px; min-height: 560px; overflow: hidden; }
#bayConstellation { width: 100%; height: 560px; display: block; }
.map-line {
  fill: none;
  stroke: var(--silver);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.78;
}
.map-line.secondary { opacity: 0.45; }
.map-node circle { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(212, 168, 83, 0.62)); }
.map-node text { fill: var(--frost); font: 500 16px "DM Sans", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.map-node foreignObject div { color: var(--soft); font: 300 18px/1.35 "Source Serif 4", serif; }

.floor-grid { display: grid; grid-template-columns: 48% 48%; gap: 4%; }
.floor-card { min-height: 420px; border-radius: 20px; backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); display: flex; flex-direction: column; justify-content: center; }

.bay-after { min-height: 116vh; justify-content: center; }
.closing-block { max-width: 640px; margin: auto; padding: 42px 46px; text-align: left; }
.after-line { position: absolute; bottom: 0; left: 50%; width: 1px; height: 34vh; background: linear-gradient(to top, rgba(192, 197, 206, 0.58), rgba(192, 197, 206, 0)); transform-origin: bottom; transform: scaleY(0); transition: transform 900ms ease; }
.bay-after.in-view .after-line { transform: scaleY(1); }

.reveal-card { opacity: 0; transform: translateY(24px); }
.reveal-card.visible { opacity: 1; transform: translateY(0); }
body.loaded .sigil, body.loaded h1 { opacity: 1; transform: translateY(0); transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
body.loaded h1 { transition-delay: 1.62s; }
body.loaded .sigil { transition-delay: 1.42s; }
body.loaded .manifesto.visible { transition-delay: 2.22s; }

@keyframes starIntro { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 0.4; } }

@media (max-width: 900px) {
  .workbench-grid, .floor-grid { grid-template-columns: 1fr; gap: 20px; }
  .floor-card { min-height: 300px; }
}

@media (max-width: 767px) {
  .star-sidebar { top: auto; bottom: 0; width: 100%; height: 56px; border-right: 0; border-top: 1px solid rgba(192, 197, 206, 0.12); }
  .sidebar-title, .sidebar-constellation { display: none; }
  .star-nav { inset: 0; display: flex; align-items: center; justify-content: space-around; }
  .nav-star { position: relative; left: auto; top: auto !important; transform: none; gap: 0; }
  .nav-label { position: absolute; bottom: 28px; left: 50%; transform: translate(-50%, 8px); padding: 7px 9px; border: 1px solid rgba(192, 197, 206, 0.14); border-radius: 999px; background: rgba(10, 22, 40, 0.9); }
  .nav-star:hover .nav-label, .nav-star.active .nav-label { transform: translate(-50%, 0); }
  .draw-link::after { display: none; }
  .main-content { margin-left: 0; padding-bottom: 56px; }
  .bay { padding: 56px 22px; }
  .manifesto { width: 100%; }
  .constellation-stage { min-height: 430px; padding: 10px; }
  #bayConstellation { height: 430px; }
}