/* ============================================================
   HOME / OPENING TRANSMISSION
   A contemporary shell around the revived 2003 story frame.
   ============================================================ */

.home-page {
  color: #c8c8c8;
}

.home-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 24%,
      transparent 0 22%,
      rgba(0, 0, 0, 0.22) 60%,
      rgba(0, 0, 0, 0.78) 100%
    ),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 4px);
}

.home-page .mothership-container {
  width: min(100%, 1200px);
  isolation: isolate;
}

.home-page .site-masthead {
  position: relative;
}

.signal-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-top: 0.65rem;
  padding: 0.42rem 0.65rem 0.36rem;
  color: #555f65;
  border-top: 1px solid #1c2429;
  border-bottom: 1px solid #1c2429;
  background: rgba(0, 0, 0, 0.48);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.signal-rail-network {
  justify-self: start;
}

.signal-rail-channel {
  justify-self: center;
}

.signal-rail-right {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}

.signal-rail-receiver {
  color: #65757d;
}

.signal-rail-receiver b {
  color: #87979e;
  font: inherit;
  letter-spacing: 0.08em;
}

.signal-rail-status {
  color: #6e796d;
}

.signal-rail-status i,
.contact-status i {
  display: inline-block;
  width: 0.48rem;
  height: 0.48rem;
  margin-right: 0.35rem;
  background: #720019;
  box-shadow: 0 0 8px rgba(255, 0, 60, 0.55);
  animation: homeSignalBlink 2.4s steps(2, end) infinite;
}

.home-page .noize-container {
  padding-top: clamp(1rem, 2.5vw, 2rem);
}

.home-page .navbar-container {
  position: relative;
  margin-top: clamp(1rem, 3vw, 2rem);
}

.home-page .navbar-container::before,
.home-page .navbar-container::after {
  content: "";
  position: absolute;
  top: 50%;
  width: min(12vw, 110px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #26323a);
}

.home-page .navbar-container::before {
  left: 0;
}

.home-page .navbar-container::after {
  right: 0;
  transform: scaleX(-1);
}

/* Contact advisory: half warning placard, half audio ignition switch. */
.contact-protocol {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  align-items: center;
  width: min(100%, 960px);
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.5rem);
  overflow: hidden;
  color: #a8afb2;
  border: 1px solid #343b3e;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.017) 0 1px, transparent 1px 7px),
    rgba(5, 7, 8, 0.9);
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.85),
    0 12px 32px rgba(0, 0, 0, 0.32);
  clip-path: polygon(
    0 0,
    calc(100% - 18px) 0,
    100% 18px,
    100% 100%,
    18px 100%,
    0 calc(100% - 18px)
  );
}

.contact-protocol::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #720019;
  box-shadow: 0 0 16px rgba(255, 0, 60, 0.3);
}

.contact-sigil {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  color: #8c1830;
  border: 1px solid #61202d;
  transform: rotate(45deg);
  box-shadow: inset 0 0 14px rgba(255, 0, 60, 0.08);
}

.contact-sigil span {
  font-family: "Orbitron", sans-serif;
  font-size: 1.35rem;
  transform: rotate(-45deg);
}

.contact-copy {
  min-width: 0;
  text-align: left;
}

.contact-kicker,
.transmission-kicker {
  margin: 0;
  color: #6e7a80;
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.62rem, 1.5vw, 0.74rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-copy h2 {
  margin: 0.15rem 0 0.2rem;
  color: #d4d7d8;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.contact-copy > p:not(.contact-kicker, .contact-status) {
  margin: 0;
  color: #8b9397;
  font-size: 0.88rem;
  line-height: 1.5;
}

.contact-status {
  margin: 0.45rem 0 0;
  color: #8e6b72;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-protocol.contact-made .contact-status {
  color: #6f9369;
}

.contact-protocol.contact-made .contact-status i {
  background: #1c9d23;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
  animation: none;
}

.wake-signal {
  position: relative;
  min-width: 168px;
  padding: 0.75rem 1rem 0.65rem;
  color: #c9c9c9;
  border: 1px solid #5b202c;
  border-radius: 0;
  background: #100709;
  box-shadow:
    inset 0 -3px 0 #340912,
    0 0 0 1px #050505;
  cursor: pointer;
  text-align: left;
  text-transform: uppercase;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.wake-signal::after {
  content: "▶";
  position: absolute;
  top: 50%;
  right: 0.9rem;
  color: #a41834;
  font-size: 0.75rem;
  transform: translateY(-50%);
}

.wake-signal:hover,
.wake-signal:focus-visible {
  color: #fff;
  border-color: #a41834;
  transform: translateY(-2px);
  box-shadow:
    inset 0 -3px 0 #560b1a,
    0 0 16px rgba(255, 0, 60, 0.18);
}

.wake-signal.is-playing {
  border-color: #236c25;
  background: #071007;
  box-shadow:
    inset 0 -3px 0 #123b14,
    0 0 16px rgba(57, 255, 20, 0.12);
}

.wake-signal.is-playing::after {
  content: "Ⅱ";
  color: var(--neon-green);
}

.wake-action,
.wake-state {
  display: block;
}

.wake-action {
  padding-right: 1.25rem;
  font-family: "Orbitron", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.wake-state {
  margin-top: 0.2rem;
  color: #6d5a5e;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.welcome-container {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.transmission-heading,
.archive-gates-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  width: min(100%, 960px);
  margin-inline: auto;
  padding: 0 0.4rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid #2d3438;
}

.transmission-heading h2,
.archive-gates-heading h2 {
  margin: 0.15rem 0 0;
  color: #cdd2d4;
  font-family: "Jolly Lodger", "Metal Mania", fantasy;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-shadow:
    2px 0 0 rgba(0, 71, 171, 0.5),
    -1px 0 0 rgba(255, 0, 60, 0.28);
}

.transmission-meter {
  display: flex;
  gap: 3px;
  align-items: end;
  height: 25px;
  padding-bottom: 3px;
}

.transmission-meter i {
  display: block;
  width: 4px;
  height: 20%;
  background: #17427c;
  box-shadow: 0 0 5px rgba(0, 71, 171, 0.55);
  animation: meterNoise 1.4s steps(4, end) infinite alternate;
}

.transmission-meter i:nth-child(2n) {
  animation-delay: -0.35s;
}

.transmission-meter i:nth-child(3n) {
  animation-delay: -0.8s;
}

.home-page .storybox {
  width: min(100%, 960px);
  max-width: 960px;
  margin-top: 0.9rem;
}

.home-page .storybox .sb-content {
  padding: clamp(1rem, 3vw, 1.75rem) clamp(1rem, 4vw, 2.4rem);
  background:
    linear-gradient(
      90deg,
      rgba(0, 71, 171, 0.035),
      transparent 18%,
      transparent 82%,
      rgba(0, 71, 171, 0.035)
    ),
    rgba(0, 0, 0, 0.76);
}

.home-page .storybox .sb-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin: 0 0 1.4rem;
  padding-bottom: 0.7rem;
  color: #67747b;
  border-bottom: 1px dashed #283138;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-page .sb-body-html {
  max-width: 76ch;
  margin-inline: auto;
  color: #b8babb;
  text-align: left;
  line-height: 1.68;
}

.home-page .sb-body-html h2 {
  margin: 0 0 0.35rem;
  color: #e0e5e7;
  font-size: clamp(1.7rem, 4vw, 2.55rem);
  font-weight: 400;
  line-height: 1.05;
}

.home-page .sb-body-html h3 {
  margin: 1.5rem 0 0.75rem;
  padding-left: 0.85rem;
  color: #bfc9cd;
  border-left: 3px solid #691326;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.9rem, 2.2vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1.35;
  text-transform: uppercase;
}

.home-page .sb-body-html p {
  margin-bottom: 0.95rem;
}

.home-page .sb-body-html hr {
  height: 5px;
  margin: 1.5rem 0;
  border: 0;
  background: repeating-linear-gradient(90deg, #252c31 0 18px, transparent 18px 25px);
}

.archive-gates {
  width: min(100%, 960px);
  margin: clamp(2.25rem, 6vw, 4rem) auto 1rem;
  text-align: left;
}

.archive-gates-heading {
  width: 100%;
  padding-inline: 0;
}

.archive-gates-heading > span {
  color: #565e62;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.archive-gate {
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.15rem 0.7rem;
  color: #aeb4b7;
  border-bottom: 1px dashed #30373a;
  text-decoration: none;
  transition:
    color 200ms ease,
    background-color 200ms ease,
    transform 200ms ease;
}

.archive-gate::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: #123b63;
  transform: scaleY(0.25);
  transition:
    background-color 200ms ease,
    transform 200ms ease;
}

.archive-gate:hover,
.archive-gate:focus-visible {
  color: #e2e5e6;
  background: rgba(0, 71, 171, 0.055);
  transform: translateX(7px);
}

.archive-gate:hover::before,
.archive-gate:focus-visible::before {
  background: var(--neon-red);
  transform: scaleY(1);
}

.gate-number {
  color: #475158;
  font-family: "Orbitron", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}

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

.gate-copy strong,
.gate-copy small {
  display: block;
}

.gate-copy strong {
  color: inherit;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.92rem, 2vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.gate-copy small {
  margin-top: 0.25rem;
  color: #777f83;
  font-size: 0.78rem;
  line-height: 1.45;
}

.gate-action {
  color: #667a84;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.gate-action b {
  color: #8e1b33;
  font-size: 1rem;
}

/* The fixed control now reads like a tiny piece of rack hardware. */
.home-page #audio-controls {
  bottom: max(10px, env(safe-area-inset-bottom));
  padding: 0.48rem 0.7rem;
  gap: 0.65rem;
  border: 1px solid #3c2026;
  border-radius: 0;
  background: rgba(6, 7, 8, 0.94);
  box-shadow:
    0 0 0 1px #050505,
    0 0 18px rgba(255, 0, 60, 0.14);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.audio-readout {
  min-width: 74px;
  text-align: left;
}

.audio-readout b,
.audio-readout i {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-style: normal;
  text-transform: uppercase;
}

.audio-readout b {
  color: #747b7e;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.audio-readout i {
  margin-top: 0.15rem;
  color: #7b2637;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
}

.home-page #audio-controls.playing .audio-readout i {
  color: #42b442;
  text-shadow: 0 0 7px rgba(57, 255, 20, 0.4);
}

.home-page #audio-controls button {
  width: 31px;
  height: 31px;
  border-radius: 0;
}

.home-page #audio-controls input[type="range"] {
  width: 100px;
}

@keyframes homeSignalBlink {
  0%,
  82% {
    opacity: 1;
  }
  83%,
  100% {
    opacity: 0.2;
  }
}

@keyframes meterNoise {
  0% {
    height: 18%;
  }
  35% {
    height: 78%;
  }
  68% {
    height: 42%;
  }
  100% {
    height: 100%;
  }
}

@media (max-width: 760px) {
  .signal-rail {
    grid-template-columns: auto minmax(0, 1fr);
    margin-top: 0.35rem;
    font-size: 0.5rem;
    letter-spacing: 0.08em;
  }

  .signal-rail-network {
    display: none;
  }

  .signal-rail-channel {
    justify-self: start;
  }

  .signal-rail-right {
    justify-self: end;
  }

  .home-page .navbar-container::before,
  .home-page .navbar-container::after {
    display: none;
  }

  .contact-protocol {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .contact-sigil {
    width: 2.4rem;
    height: 2.4rem;
  }

  .wake-signal {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .transmission-heading,
  .archive-gates-heading {
    align-items: start;
  }

  .archive-gates-heading > span {
    max-width: 12rem;
    text-align: right;
  }

  .archive-gate {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.65rem;
  }

  .gate-action {
    grid-column: 2;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .signal-rail-status {
    display: none;
  }

  .contact-protocol {
    grid-template-columns: 1fr;
  }

  .contact-sigil {
    display: none;
  }

  .archive-gates-heading > span,
  .transmission-meter {
    display: none;
  }

  .home-page .storybox .sb-meta {
    display: block;
  }

  .home-page #audio-controls {
    width: min(270px, calc(100vw - 20px));
  }

  .audio-readout {
    min-width: 62px;
  }

  .home-page #audio-controls input[type="range"] {
    flex: 1;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signal-rail-status i,
  .contact-status i,
  .transmission-meter i {
    animation: none;
  }
}