/* ==========================================================================
   BARNES PROJECTS — index-A.css
   LCARS-inspired interface (Star Trek fan tribute, Spock/logic motif)
   ========================================================================== */

:root {
  --lcars-black:    #000000;
  --lcars-space:    #050508;
  --lcars-orange:   #FF9C00;
  --lcars-peach:    #FFCC99;
  --lcars-gold:     #FFCC66;
  --lcars-pink:     #CC6699;
  --lcars-lavender: #CC99CC;
  --lcars-blue:     #9999FF;
  --lcars-skyblue:  #99CCFF;
  --lcars-red:      #CC4444;
  --lcars-text:     #FFE3C2;
  --lcars-dim:      #8a7a66;
  --rail-w: 190px;
  --top-h: 56px;
  --pill: 26px;
  --font-display: 'Antonio', 'Arial Narrow', sans-serif;
  --font-body: 'Jura', 'Trebuchet MS', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--lcars-space);
  color: var(--lcars-text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

::selection { background: var(--lcars-orange); color: #000; }

/* ---------- starfield ---------- */
.starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 32% 68%, rgba(153,204,255,0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 42%, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 78%, rgba(255,204,153,0.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 90%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 55%, rgba(255,255,255,0.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 95% 35%, rgba(204,153,204,0.7) 50%, transparent 51%),
    var(--lcars-space);
  background-size: 480px 480px, 520px 520px, 560px 560px, 440px 440px,
                   600px 600px, 500px 500px, 540px 540px, 460px 460px, auto;
  animation: starDrift 180s linear infinite;
}
@keyframes starDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: -480px 480px, 520px -520px, -560px -560px, 440px 440px,
                              -600px 600px, 500px -500px, -540px 540px, 460px -460px; }
}

/* ==========================================================================
   TOP FRAME
   ========================================================================== */
.lcars-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 10px 14px 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.95) 70%, transparent);
}
.lcars-top-inner {
  display: flex;
  align-items: stretch;
  height: var(--top-h);
  gap: 8px;
}
.lcars-elbow {
  width: calc(var(--rail-w) - 14px);
  flex-shrink: 0;
  background: var(--lcars-orange);
  border-radius: 0 0 0 36px;
  border-top-left-radius: var(--pill);
}
.lcars-top-bar {
  flex: 1;
  background: #000;
  border-top: 10px solid var(--lcars-peach);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  min-width: 0;
}
.lcars-top-title {
  color: var(--lcars-peach);
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcars-top-readout {
  color: var(--lcars-skyblue);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  gap: 10px;
  align-items: center;
}
.lcars-top-readout .sep { color: var(--lcars-orange); }
.lcars-cap {
  width: 48px;
  flex-shrink: 0;
  background: var(--lcars-pink);
  border-radius: 0 var(--pill) var(--pill) 0;
  height: 10px;
}

.theme-toggle {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  background: transparent;
  border: 2px solid var(--lcars-orange);
  color: var(--lcars-orange);
  border-radius: var(--pill);
  padding: 4px 16px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.theme-toggle:hover { background: var(--lcars-orange); color: #000; }

/* ==========================================================================
   SIDE RAIL NAV
   ========================================================================== */
.lcars-rail {
  position: fixed;
  top: calc(var(--top-h) + 18px);
  left: 14px;
  bottom: 14px;
  width: calc(var(--rail-w) - 14px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rail-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border-radius: var(--pill) 0 0 var(--pill);
  text-decoration: none;
  color: #000;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.rail-block:hover { transform: translateX(6px); filter: brightness(1.18); }
.rail-block.active { transform: translateX(10px); box-shadow: -6px 0 0 rgba(255,255,255,0.85); }
.rail-num {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.75;
}
.rail-label { font-size: 15px; text-align: right; }

.rail-peach    { background: var(--lcars-peach); }
.rail-orange   { background: var(--lcars-orange); }
.rail-blue     { background: var(--lcars-blue); }
.rail-lavender { background: var(--lcars-lavender); }
.rail-gold     { background: var(--lcars-gold); }
.rail-pink     { background: var(--lcars-pink); }
.rail-red      { background: var(--lcars-red); }

.rail-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: var(--pill) 0 0 var(--pill);
  background: rgba(255,156,0,0.08);
  border: 2px solid rgba(255,156,0,0.3);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}
.rail-logo:hover {
  background: rgba(255,156,0,0.18);
  border-color: var(--lcars-orange);
  transform: translateX(6px);
}
.rail-logo-img {
  width: calc(var(--rail-w) - 56px);
  max-width: 120px;
  height: auto;
  display: block;
  filter: brightness(0.9);
  transition: filter 0.2s ease;
}
.rail-logo:hover .rail-logo-img { filter: brightness(1.1); }

body.light .rail-logo { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.25); }
body.light .rail-logo:hover { background: rgba(0,0,0,0.12); border-color: #141414; }

@media (max-width: 900px) {
  .rail-logo { display: none; }
}

.rail-cascade {
  margin-top: auto;
  border-top: 3px solid var(--lcars-orange);
  padding-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--lcars-skyblue);
  text-align: right;
  overflow: hidden;
}
.rail-cascade span:nth-child(4n)   { color: var(--lcars-orange); }
.rail-cascade span:nth-child(7n)   { color: var(--lcars-lavender); }
.rail-cascade span:nth-child(11n)  { color: var(--lcars-peach); }

/* ==========================================================================
   MAIN LAYOUT
   ========================================================================== */
.lcars-main {
  margin-left: var(--rail-w);
  padding: calc(var(--top-h) + 34px) 28px 28px;
  max-width: 1340px;
}

/* ---------- shared panel chrome ---------- */
.panel { margin-top: 86px; scroll-margin-top: 90px; }

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}
.panel-bar {
  width: 64px;
  height: 26px;
  border-radius: var(--pill);
  flex-shrink: 0;
}
.bar-orange   { background: var(--lcars-orange); }
.bar-blue     { background: var(--lcars-blue); }
.bar-lavender { background: var(--lcars-lavender); }
.bar-gold     { background: var(--lcars-gold); }
.bar-pink     { background: var(--lcars-pink); }

.panel-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: 0.12em;
  color: var(--lcars-orange);
  white-space: nowrap;
}
#log .panel-title       { color: var(--lcars-blue); }
#personnel .panel-title { color: var(--lcars-lavender); }
#projects .panel-title  { color: var(--lcars-gold); }
#holodeck .panel-title  { color: var(--lcars-pink); }

.panel-num {
  font-size: 0.6em;
  vertical-align: 0.35em;
  opacity: 0.6;
  margin-right: 4px;
}
.panel-bar-fill {
  flex: 1;
  height: 6px;
  background: rgba(255,156,0,0.25);
  border-radius: 3px;
}
.panel-cap {
  width: 30px;
  height: 26px;
  border-radius: 0 var(--pill) var(--pill) 0;
  background: var(--lcars-orange);
  flex-shrink: 0;
}
.cap-blue     { background: var(--lcars-blue); }
.cap-lavender { background: var(--lcars-lavender); }
.cap-gold     { background: var(--lcars-gold); }
.cap-pink     { background: var(--lcars-pink); }

.panel-intro {
  max-width: 760px;
  margin: -12px 0 30px;
  color: var(--lcars-dim);
  font-size: 16px;
}

.body-copy { font-size: 16px; max-width: 60ch; margin-bottom: 16px; }
.body-copy em { color: var(--lcars-orange); font-style: normal; font-weight: 600; }
.body-copy.dim { color: var(--lcars-dim); font-size: 15px; }

/* ---------- buttons ---------- */
.btn-lcars {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: var(--pill);
  color: #000;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-lcars:hover { transform: translateY(-2px); filter: brightness(1.15); }
.btn-orange { background: var(--lcars-orange); }
.btn-gold   { background: var(--lcars-gold); }
.btn-pink   { background: var(--lcars-pink); color: #fff; }
.btn-hollow {
  background: transparent;
  border: 2px solid var(--lcars-peach);
  color: var(--lcars-peach);
}
.btn-hollow:hover { background: var(--lcars-peach); color: #000; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px;
  align-items: center;
  min-height: calc(100vh - 120px);
  scroll-margin-top: 90px;
}

.kicker {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--lcars-skyblue);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.blink-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--lcars-orange);
  animation: blink 1.6s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0.15; } }

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(58px, 9vw, 132px);
  line-height: 0.88;
  letter-spacing: 0.01em;
  color: var(--lcars-peach);
  text-transform: uppercase;
  margin-bottom: 26px;
  animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(30px); letter-spacing: 0.12em; }
  to   { opacity: 1; transform: translateY(0);    letter-spacing: 0.01em; }
}

.hero-quote {
  border-left: 4px solid var(--lcars-orange);
  padding: 6px 0 6px 20px;
  font-size: clamp(17px, 2vw, 22px);
  font-style: italic;
  color: var(--lcars-text);
  margin-bottom: 18px;
  animation: heroIn 0.9s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-quote cite {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--lcars-orange);
}

.hero-sub {
  max-width: 52ch;
  color: var(--lcars-dim);
  margin-bottom: 30px;
  animation: heroIn 0.9s 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 38px;
  animation: heroIn 0.9s 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  max-width: 640px;
  animation: heroIn 0.9s 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.status-cell {
  background: rgba(255,156,0,0.06);
  border: 1px solid rgba(255,156,0,0.3);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
}
.status-key { display: block; font-size: 10px; color: var(--lcars-dim); }
.status-val { display: block; font-size: 17px; color: var(--lcars-skyblue); }
.status-val.ok { color: var(--lcars-orange); }

/* ---------- hero SVG sensor array ---------- */
.hero-viz { text-align: center; }
.sensor-array {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  margin: 0 auto;
  animation: vizIn 1.2s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes vizIn {
  from { opacity: 0; transform: scale(0.85) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.ring { transform-origin: 300px 300px; }
.ring-1 { animation: spin 70s linear infinite; }
.ring-2 { animation: spinRev 48s linear infinite; }
.ring-3 { animation: spin 26s linear infinite; }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }

.deca {
  stroke-dasharray: 1240;
  stroke-dashoffset: 1240;
  animation: drawDeca 2.4s 0.6s ease-out forwards;
}
@keyframes drawDeca { to { stroke-dashoffset: 0; } }

.node circle {
  fill: #000;
  stroke: var(--lcars-orange);
  stroke-width: 2;
}
.node text {
  fill: var(--lcars-peach);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
}
.node { animation: nodePulse 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.node.n1  { animation-delay: 0s; }
.node.n2  { animation-delay: 0.3s; }
.node.n3  { animation-delay: 0.6s; }
.node.n4  { animation-delay: 0.9s; }
.node.n5  { animation-delay: 1.2s; }
.node.n6  { animation-delay: 1.5s; }
.node.n7  { animation-delay: 1.8s; }
.node.n8  { animation-delay: 2.1s; }
.node.n9  { animation-delay: 2.4s; }
.node.n10 { animation-delay: 2.7s; }
.node.n10 circle { stroke: var(--lcars-pink); }
@keyframes nodePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

.core-title {
  fill: var(--lcars-orange);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-anchor: middle;
}
.core-sub {
  fill: var(--lcars-skyblue);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-anchor: middle;
}
.core-pulse {
  transform-origin: 300px 300px;
  animation: corePulse 2.8s ease-out infinite;
}
@keyframes corePulse {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

.viz-caption {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--lcars-dim);
}

/* ==========================================================================
   01 TLCTC
   ========================================================================== */
.tlctc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 44px;
  align-items: start;
}

.alert-strip {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--lcars-orange);
  white-space: nowrap;
  overflow: hidden;
  border-top: 1px solid rgba(255,156,0,0.4);
  border-bottom: 1px solid rgba(255,156,0,0.4);
  padding: 5px 0;
  margin-bottom: 22px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.tlctc-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--lcars-peach);
  margin-bottom: 20px;
}

.tlctc-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0; }

.vulcan-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(153,153,255,0.07);
  border: 1px solid rgba(153,153,255,0.35);
  border-radius: 12px;
  padding: 14px 18px;
  max-width: 56ch;
}
.vulcan-hand { font-size: 28px; line-height: 1; }
.vulcan-note p { font-size: 14px; color: var(--lcars-blue); font-style: italic; }

/* ---------- cluster console ---------- */
.cluster-console, .audio-console {
  background: rgba(0,0,0,0.72);
  border: 2px solid var(--lcars-orange);
  border-radius: 18px;
  overflow: hidden;
}
.console-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--lcars-orange);
  color: #000;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  padding: 8px 16px;
}
.console-status {
  background: #000;
  color: var(--lcars-orange);
  border-radius: var(--pill);
  padding: 2px 12px;
  font-size: 11px;
  white-space: nowrap;
}

.cluster-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 14px;
}
.cluster-list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid rgba(255,156,0,0.35);
  border-radius: var(--pill);
  color: var(--lcars-text);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  text-align: left;
}
.cluster-list button:hover { background: rgba(255,156,0,0.18); transform: translateX(4px); }
.cluster-list button.active { background: var(--lcars-orange); color: #000; font-weight: 600; }
.cluster-id {
  font-weight: 700;
  color: var(--lcars-orange);
  min-width: 28px;
}
.cluster-list button.active .cluster-id { color: #000; }

.cluster-readout {
  border-top: 2px solid var(--lcars-orange);
  padding: 18px;
  min-height: 150px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,156,0,0.03) 3px, rgba(255,156,0,0.03) 4px);
}
.readout-id {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--lcars-skyblue);
}
.readout-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lcars-orange);
  margin: 4px 0 10px;
}
.readout-desc { font-size: 14.5px; color: var(--lcars-text); max-width: 58ch; }
.readout-desc.quote { font-style: italic; font-size: 17px; line-height: 1.5; }

/* ==========================================================================
   02 SCIENCE LOG
   ========================================================================== */
.log-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.log-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: rgba(153,153,255,0.05);
  border: 1px solid rgba(153,153,255,0.35);
  border-left: 10px solid var(--lcars-blue);
  border-radius: 4px 16px 16px 4px;
  padding: 18px 20px;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.log-card:hover {
  transform: translateY(-4px);
  background: rgba(153,153,255,0.13);
  border-left-color: var(--lcars-orange);
}
.log-stamp {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--lcars-skyblue);
  margin-bottom: 8px;
}
.log-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--lcars-peach);
  margin-bottom: 10px;
}
.log-desc { font-size: 13.5px; color: var(--lcars-dim); flex: 1; }
.log-cta {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--lcars-blue);
}
.log-card:hover .log-cta { color: var(--lcars-orange); }

/* ==========================================================================
   03 PERSONNEL
   ========================================================================== */
.personnel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 28px;
  align-items: start;
}
.personnel-card, .service-record {
  background: rgba(204,153,204,0.05);
  border: 1px solid rgba(204,153,204,0.35);
  border-radius: 16px;
  padding: 24px;
}
.dossier-head, .record-head {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--lcars-lavender);
  border-bottom: 2px solid var(--lcars-lavender);
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.dossier-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px dotted rgba(204,153,204,0.3);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  font-size: 13px;
}
.dossier-row span   { color: var(--lcars-dim); flex-shrink: 0; }
.dossier-row strong { color: var(--lcars-peach); font-weight: 600; text-align: right; }
.dossier-note  { margin-top: 18px; font-size: 14.5px; }
.dossier-motto {
  margin-top: 12px;
  font-style: italic;
  color: var(--lcars-lavender);
  font-size: 15px;
}

.record-list { list-style: none; }
.record-list li {
  display: flex;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(204,153,204,0.18);
  align-items: baseline;
}
.record-year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--lcars-skyblue);
  min-width: 56px;
}
.record-event { font-size: 14px; color: var(--lcars-text); }
.record-highlight .record-year  { color: var(--lcars-orange); }
.record-highlight .record-event { color: var(--lcars-orange); font-weight: 600; }

.record-quote {
  margin-top: 20px;
  font-style: italic;
  font-size: 15px;
  color: var(--lcars-text);
  border-left: 3px solid var(--lcars-lavender);
  padding-left: 14px;
}
.record-quote cite {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--lcars-dim);
}
.record-links { display: flex; gap: 18px; margin-top: 20px; }
.record-links a {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--lcars-lavender);
  text-decoration: none;
  border-bottom: 2px solid var(--lcars-lavender);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.record-links a:hover { color: var(--lcars-orange); border-color: var(--lcars-orange); }

/* ==========================================================================
   04 PROJECTS
   ========================================================================== */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.project-card {
  background: rgba(255,204,102,0.05);
  border: 1px solid rgba(255,204,102,0.35);
  border-top: 12px solid var(--lcars-gold);
  border-radius: 16px;
  padding: 26px;
}
.project-tag {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--lcars-gold);
  margin-bottom: 10px;
}
.project-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lcars-peach);
  margin-bottom: 14px;
}

.archive-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 14px 0 18px;
}
.archive-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--lcars-text);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  border: 1px solid rgba(255,204,102,0.4);
  border-radius: var(--pill);
  padding: 6px 14px;
  transition: background 0.15s ease, color 0.15s ease;
}
.archive-list a:hover { background: var(--lcars-gold); color: #000; }
.archive-list .pdf-badge { font-size: 10px; opacity: 0.7; }
.archive-rfc {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--lcars-gold);
  text-decoration: none;
  border-bottom: 2px solid var(--lcars-gold);
}
.archive-rfc:hover { color: var(--lcars-orange); border-color: var(--lcars-orange); }

/* ==========================================================================
   05 HOLODECK
   ========================================================================== */
.holodeck-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 28px;
  align-items: start;
}
.audio-console { border-color: var(--lcars-pink); }
.audio-console .console-head { background: var(--lcars-pink); color: #fff; }
.audio-console .console-status { color: var(--lcars-pink); }

.audio-now {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 18px 18px 8px;
}
.audio-disc {
  width: 72px; height: 72px;
  color: var(--lcars-pink);
  flex-shrink: 0;
}
.audio-disc svg { width: 100%; height: 100%; }
.audio-disc.spinning svg { animation: spin 3s linear infinite; transform-origin: center; }
.audio-meta { min-width: 0; }
.audio-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.06em;
  color: var(--lcars-peach);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-time {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--lcars-skyblue);
  margin-top: 4px;
}

.audio-progress {
  margin: 10px 18px;
  height: 10px;
  border: 1px solid var(--lcars-pink);
  border-radius: var(--pill);
  cursor: pointer;
  overflow: hidden;
}
.audio-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--lcars-pink);
  border-radius: var(--pill);
  transition: width 0.15s linear;
}

.audio-controls {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 4px 18px 14px;
}
.audio-controls button {
  font-family: var(--font-display);
  background: transparent;
  border: 2px solid var(--lcars-pink);
  color: var(--lcars-pink);
  border-radius: var(--pill);
  font-size: 15px;
  padding: 7px 22px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.audio-controls button:hover { background: var(--lcars-pink); color: #000; }
#audio-play { min-width: 84px; }

.audio-list {
  list-style: none;
  border-top: 2px solid var(--lcars-pink);
  max-height: 270px;
  overflow-y: auto;
}
.audio-list button {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: baseline;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(204,102,153,0.25);
  color: var(--lcars-text);
  font-family: var(--font-body);
  font-size: 14px;
  text-align: left;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.audio-list button:hover  { background: rgba(204,102,153,0.15); }
.audio-list button.active { background: var(--lcars-pink); color: #000; font-weight: 600; }
.audio-idx {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--lcars-pink);
  min-width: 24px;
}
.audio-list button.active .audio-idx { color: #000; }
.audio-genre {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  opacity: 0.65;
  white-space: nowrap;
}
.audio-list::-webkit-scrollbar { width: 6px; }
.audio-list::-webkit-scrollbar-thumb { background: var(--lcars-pink); border-radius: 3px; }

.holodeck-side { display: flex; flex-direction: column; gap: 14px; }
.holo-card {
  display: flex;
  gap: 16px;
  align-items: center;
  background: rgba(204,102,153,0.07);
  border: 1px solid rgba(204,102,153,0.35);
  border-radius: 14px;
  padding: 14px 18px;
}
.holo-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  color: var(--lcars-pink);
  min-width: 70px;
}
.holo-label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--lcars-text);
}
.holo-quote {
  font-style: italic;
  font-size: 14px;
  color: var(--lcars-dim);
  border-left: 3px solid var(--lcars-pink);
  padding-left: 14px;
  margin-top: 6px;
}
.holo-quote cite {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.25em;
}

/* ==========================================================================
   05b HOLODECK MEDIA DECK (tabs, jukebox filters, images, video)
   ========================================================================== */
.deck-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.deck-tab {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  background: transparent;
  border: 2px solid var(--lcars-pink);
  color: var(--lcars-pink);
  border-radius: var(--pill);
  padding: 8px 24px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.deck-tab:hover { background: rgba(204,102,153,0.15); }
.deck-tab.active { background: var(--lcars-pink); color: #000; }

.deck-panel[hidden] { display: none; }

/* ---------- jukebox source tabs / view modes / filter pills ---------- */
.audio-src-tabs { display: flex; border-bottom: 2px solid var(--lcars-pink); }
.audio-src-tabs button {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  background: transparent;
  border: 0;
  color: var(--lcars-text);
  padding: 9px 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.audio-src-tabs button + button { border-left: 1px solid rgba(204,102,153,0.4); }
.audio-src-tabs button:hover { background: rgba(204,102,153,0.15); }
.audio-src-tabs button.active { background: var(--lcars-pink); color: #000; }

.audio-viewbar { display: flex; border-bottom: 1px solid rgba(204,102,153,0.4); }
.audio-viewbar button {
  flex: 1;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  background: transparent;
  border: 0;
  color: var(--lcars-text);
  opacity: 0.6;
  padding: 6px 4px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.audio-viewbar button + button { border-left: 1px solid rgba(204,102,153,0.25); }
.audio-viewbar button:hover { opacity: 1; }
.audio-viewbar button.active { background: rgba(204,102,153,0.2); opacity: 1; }
.audio-viewbar[hidden] { display: none; }

.audio-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(204,102,153,0.4);
  max-height: 110px;
  overflow-y: auto;
}
.audio-pills[hidden] { display: none; }
.audio-pill {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  background: transparent;
  border: 1px solid var(--lcars-pink);
  color: var(--lcars-text);
  border-radius: var(--pill);
  padding: 3px 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.audio-pill:hover { background: rgba(204,102,153,0.2); }
.audio-pill.active { background: var(--lcars-pink); color: #000; }

/* ---------- track row & now-playing badges ---------- */
.audio-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-badge-genre {
  border: 1px solid currentColor;
  border-radius: var(--pill);
  padding: 1px 9px;
}
.audio-badge-e {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9px;
  background: var(--lcars-red);
  color: #fff;
  border-radius: 4px;
  padding: 0 6px;
  flex-shrink: 0;
}
.audio-lyr {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.14em;
  border: 1px solid currentColor;
  border-radius: var(--pill);
  padding: 1px 9px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.audio-lyr:hover { background: var(--lcars-pink); color: #000; }
.audio-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--lcars-skyblue);
  min-height: 18px;
}

/* ---------- visual records ---------- */
.img-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.img-filter {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  background: transparent;
  border: 1px solid var(--lcars-pink);
  color: var(--lcars-text);
  border-radius: var(--pill);
  padding: 5px 18px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.img-filter:hover { background: rgba(204,102,153,0.2); }
.img-filter.active { background: var(--lcars-pink); color: #000; }

.img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.img-cell {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid var(--lcars-pink);
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  background: #000;
}
.img-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.img-cell:hover img { opacity: 1; transform: scale(1.08); }
.img-cell-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  color: #FFCC99;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.img-cell-cat {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(0,0,0,0.8);
  color: #99CCFF;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0.2em;
  border-radius: var(--pill);
  padding: 2px 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.img-cell:hover .img-cell-cat { opacity: 1; }

/* ---------- lightbox (always dark, theme-independent) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox-fig { max-width: min(1100px, 94vw); text-align: center; margin: 0; }
.lightbox-fig img {
  max-height: 78vh;
  max-width: 100%;
  border: 3px solid #FF9C00;
  border-radius: 8px;
  background: #000;
}
.lightbox-fig figcaption {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFCC99;
}
.lightbox-close {
  position: absolute;
  top: 22px; right: 26px;
  width: 46px; height: 46px;
  background: transparent;
  border: 2px solid #FF9C00;
  color: #FF9C00;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lightbox-close:hover { background: #FF9C00; color: #000; }

/* ---------- video reel ---------- */
.video-deck {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
  gap: 16px;
  border: 2px solid var(--lcars-pink);
  border-radius: 18px;
  padding: 14px;
  background: rgba(0,0,0,0.72);
}
.video-frame {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--lcars-dim);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.3em;
}
.video-frame video,
.video-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: contain;
}

/* YouTube fallback for file:// pages (embed refuses to play without a referrer) */
.video-yt-fallback {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.video-yt-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.video-yt-fallback:hover img { opacity: 1; }
.video-yt-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  display: grid;
  place-items: center;
  border: 3px solid #FF9C00;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #FF9C00;
  font-size: 26px;
  padding-left: 6px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.video-yt-fallback:hover .video-yt-play {
  background: #FF9C00;
  color: #000;
  transform: translate(-50%, -50%) scale(1.1);
}
.video-yt-note {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  color: #FFCC99;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-align: center;
  padding: 6px 10px;
}
.video-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #FFCC99;
}
.video-type {
  font-size: 9px;
  letter-spacing: 0.26em;
  color: var(--lcars-pink);
  border: 1px solid var(--lcars-pink);
  border-radius: var(--pill);
  padding: 2px 10px;
  white-space: nowrap;
}
.video-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 440px;
  overflow-y: auto;
}
.video-list button {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: transparent;
  border: 1px solid rgba(204,102,153,0.4);
  border-radius: var(--pill);
  color: var(--lcars-text);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: left;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.video-list button:hover { background: rgba(204,102,153,0.18); }
.video-list button.active { background: var(--lcars-pink); color: #000; border-color: var(--lcars-pink); }
.video-idx { font-weight: 700; color: var(--lcars-pink); min-width: 22px; }
.video-list button.active .video-idx { color: #000; }
.video-list::-webkit-scrollbar { width: 6px; }
.video-list::-webkit-scrollbar-thumb { background: var(--lcars-pink); border-radius: 3px; }

/* light-mode neutralization for deck components */
body.light .deck-tab.active { color: #fff; }
body.light .deck-tab:hover { background: rgba(0,0,0,0.08); }
body.light .audio-src-tabs button.active { color: #fff; }
body.light .audio-src-tabs button:hover { background: rgba(0,0,0,0.08); }
body.light .audio-src-tabs button + button,
body.light .audio-viewbar,
body.light .audio-viewbar button + button,
body.light .audio-pills { border-color: rgba(0,0,0,0.3); }
body.light .audio-viewbar button.active { background: rgba(0,0,0,0.1); }
body.light .audio-pill:hover { background: rgba(0,0,0,0.08); }
body.light .audio-pill.active { color: #fff; }
body.light .audio-lyr:hover { color: #fff; }
body.light .img-filter:hover { background: rgba(0,0,0,0.08); }
body.light .img-filter.active { color: #fff; }
body.light .video-deck { background: rgba(255,255,255,0.6); }
body.light .video-list button { border-color: rgba(0,0,0,0.35); }
body.light .video-list button:hover { background: rgba(0,0,0,0.08); }
body.light .video-list button.active { color: #fff; }
body.light .video-list button.active .video-idx { color: #fff; }
body.light .video-caption { color: var(--lcars-text); }

/* ==========================================================================
   06 COMMS / FOOTER
   ========================================================================== */
.comms { margin-top: 100px; scroll-margin-top: 90px; }
.comms-bar { display: flex; gap: 6px; margin-bottom: 30px; }
.cbar { height: 16px; border-radius: var(--pill); }
.c1 { flex: 3; background: var(--lcars-orange); }
.c2 { flex: 1; background: var(--lcars-blue); }
.c3 { flex: 2; background: var(--lcars-lavender); }
.c4 { flex: 0.5; background: var(--lcars-red); }
.c5 { flex: 1.5; background: var(--lcars-peach); }

.comms-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 32px;
}
.comms-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.05em;
  color: var(--lcars-peach);
  margin-bottom: 10px;
}
.comms-sub { color: var(--lcars-dim); font-size: 14px; max-width: 50ch; }
.comms-links { display: flex; flex-direction: column; gap: 10px; }
.comms-links a {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--lcars-skyblue);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}
.comms-links a:hover { color: var(--lcars-orange); transform: translateX(6px); }

.comms-foot {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,156,0,0.3);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--lcars-dim);
  text-align: center;
}

/* ==========================================================================
   DAY MODE (light theme) — toggled via body.light, persisted by index-A.js
   ========================================================================== */
/* Day mode is monochrome — paper, ink and a grayscale LCARS ramp.
   The exception: LCARS orange survives only on TLCTC (Priority One). */
body.light {
  --lcars-space:    #F5F3ED;
  --lcars-orange:   #141414;
  --lcars-peach:    #2E2E2E;
  --lcars-gold:     #757575;
  --lcars-pink:     #8A8A8A;
  --lcars-lavender: #5D5D5D;
  --lcars-blue:     #474747;
  --lcars-skyblue:  #333333;
  --lcars-red:      #A8A8A8;
  --lcars-text:     #161616;
  --lcars-dim:      #6E6E6E;
  --lcars-accent:      #FF9C00; /* the exception */
  --lcars-accent-text: #C26F00; /* the exception, readable on paper */
}

body.light .starfield { background: var(--lcars-space); animation: none; }

body.light ::selection { background: #141414; color: #fff; }

body.light .lcars-top { background: linear-gradient(to bottom, rgba(245,243,237,0.95) 70%, transparent); }
body.light .lcars-top-bar { background: var(--lcars-space); }

body.light .rail-block { color: #fff; }
body.light .rail-pink,
body.light .rail-red { color: #000; }
body.light .rail-block.active { box-shadow: -6px 0 0 rgba(0,0,0,0.5); }

/* tinted surfaces → neutral ink washes */
body.light .status-cell { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.3); }
body.light .panel-bar-fill { background: rgba(0,0,0,0.15); }
body.light .comms-foot { border-top-color: rgba(0,0,0,0.25); }
body.light .vulcan-note { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.3); }
body.light .log-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.3); border-left-color: var(--lcars-blue); }
body.light .log-card:hover { background: rgba(0,0,0,0.07); border-left-color: var(--lcars-accent); }
body.light .personnel-card,
body.light .service-record { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.3); }
body.light .dossier-row { border-bottom-color: rgba(0,0,0,0.25); }
body.light .record-list li { border-bottom-color: rgba(0,0,0,0.15); }
body.light .project-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.3); }
body.light .archive-list a { border-color: rgba(0,0,0,0.4); }
body.light .holo-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.3); }

body.light .cluster-console,
body.light .audio-console { background: rgba(255,255,255,0.6); }
body.light .console-head { color: #fff; }
body.light .console-status { background: var(--lcars-space); }
body.light .cluster-list button { border-color: rgba(0,0,0,0.35); }
body.light .cluster-list button:hover { background: rgba(0,0,0,0.08); }
body.light .cluster-list button.active { color: #fff; }
body.light .cluster-list button.active .cluster-id { color: var(--lcars-accent); }
body.light .cluster-readout {
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px);
}
body.light .audio-list button.active { color: #fff; }
body.light .audio-list button.active .audio-idx { color: #fff; }
body.light .audio-controls button:hover { color: #fff; }

body.light .btn-lcars { color: #fff; }
body.light .btn-hollow { color: var(--lcars-peach); }
body.light .btn-hollow:hover { background: var(--lcars-peach); color: #fff; }
body.light .theme-toggle:hover { background: #141414; color: #fff; }

/* hero SVG → monochrome radar */
body.light .sensor-array > line { stroke: #141414; }
body.light .ring-1 circle { stroke: #9b9b9b; }
body.light .ring-2 circle { stroke: #6f6f6f; }
body.light .ring-3 circle { stroke: #3f3f3f; }
body.light .spokes { stroke: #141414; }
body.light .node circle { fill: var(--lcars-space); stroke: #141414; }
body.light .core circle:first-child { fill: var(--lcars-space); }
body.light #sweepGrad stop { stop-color: #7a7a7a; }

/* THE EXCEPTIONS — TLCTC keeps its LCARS orange (Priority One) */
body.light .blink-dot { background: var(--lcars-accent); }
body.light .status-val.ok { color: var(--lcars-accent-text); }
body.light .rail-orange { background: var(--lcars-accent); color: #000; }
body.light .btn-orange { background: var(--lcars-accent); color: #000; }
body.light #tlctc .panel-bar,
body.light #tlctc .panel-cap { background: var(--lcars-accent); }
body.light #tlctc .panel-bar-fill { background: rgba(255,156,0,0.35); }
body.light .alert-strip { color: var(--lcars-accent-text); border-color: rgba(194,111,0,0.5); }
body.light .readout-name { color: var(--lcars-accent-text); }
body.light .deca { stroke: var(--lcars-accent); }
body.light .node.n10 circle { stroke: var(--lcars-accent); }
body.light .core-title { fill: var(--lcars-accent-text); }
/* (the core ring + glow keep their hard-coded orange on purpose) */

@media (max-width: 900px) {
  body.light .lcars-rail { background: rgba(245,243,237,0.94); }
  body.light .rail-block:hover,
  body.light .rail-block.active { box-shadow: 0 3px 0 rgba(0,0,0,0.5); }
}

/* ==========================================================================
   SCROLL REVEAL (driven by index-A.js)
   ========================================================================== */
.reveal-a {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-a.visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .tlctc-grid, .personnel-grid, .holodeck-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --rail-w: 0px; }

  .lcars-main { margin-left: 0; padding: calc(var(--top-h) + 84px) 18px 18px; }

  .lcars-elbow { width: 42px; border-radius: var(--pill) 0 0 var(--pill); }

  .lcars-rail {
    top: calc(var(--top-h) + 16px);
    left: 0; right: 0; bottom: auto;
    flex-direction: row;
    overflow-x: auto;
    padding: 6px 14px;
    gap: 6px;
    background: rgba(0,0,0,0.92);
    scrollbar-width: none;
  }
  .lcars-rail::-webkit-scrollbar { display: none; }
  .rail-block {
    border-radius: var(--pill);
    padding: 7px 14px;
    flex-shrink: 0;
  }
  .rail-block:hover, .rail-block.active { transform: none; box-shadow: 0 3px 0 rgba(255,255,255,0.85); }
  .rail-num { display: none; }
  .rail-label { font-size: 13px; }
  .rail-cascade { display: none; }

  .hero { grid-template-columns: 1fr; min-height: 0; gap: 28px; padding-top: 12px; }
  .projects-grid { grid-template-columns: 1fr; }
  .comms-grid { grid-template-columns: 1fr; }
  .cluster-list { grid-template-columns: 1fr; }
  .archive-list { grid-template-columns: 1fr; }
  .video-deck { grid-template-columns: 1fr; }
  .video-list { max-height: 260px; }
  .img-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

  /* let long LCARS section titles wrap instead of being clipped by overflow-x:hidden */
  .panel-title { white-space: normal; }
  .log-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 520px) {
  .lcars-top-readout { display: none; }
  .lcars-main { padding: calc(var(--top-h) + 80px) 14px 16px; }
  .lcars-top { padding: 10px 10px 0; }

  .hero-status { grid-template-columns: 1fr 1fr; }
  .audio-now { flex-direction: column; align-items: flex-start; }
  .audio-disc { width: 56px; height: 56px; }
  .audio-title { white-space: normal; }

  .log-grid { grid-template-columns: 1fr; }
  .img-grid { grid-template-columns: 1fr 1fr; }

  /* full-width call-to-action buttons read better than wrapped half-rows */
  .hero-actions .btn-lcars,
  .tlctc-actions .btn-lcars { flex: 1 1 100%; text-align: center; }

  .record-list li { flex-wrap: wrap; gap: 4px 16px; }
  .dossier-row { font-size: 12px; }
  .project-card h3 { font-size: 30px; }
  .readout-name { font-size: 22px; }
}

@media (max-width: 400px) {
  .lcars-top-title { font-size: 12px; letter-spacing: 0.08em; }
  .theme-toggle { padding: 4px 10px; letter-spacing: 0.1em; }

  /* the 58px hero floor is too tall below ~400px — let it scale down */
  .hero-title { font-size: clamp(40px, 14vw, 58px); }
  .tlctc-headline { font-size: clamp(28px, 9vw, 56px); }

  .deck-tab { padding: 8px 16px; }
  .img-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}