:root {
  --black: #070708;
  --panel: #0d0d10;
  --bone: #fff7eb;
  --bone-soft: #efe5d8;
  --muted: #c3b9ae;
  --violet: #9277ad;
  --relic: #e81d4f;
  --line: #37333a;
  --line-soft: #242127;
  --display: "Eurostile", "Bank Gothic", "Microgramma", "Arial Black", "Bahnschrift", sans-serif;
  --body: "Bahnschrift SemiCondensed", "DIN Condensed", "Arial Narrow", Arial, sans-serif;
  --mono: "OCR A Std", "OCR-A", "Courier New", monospace;
  --max: 1180px;
}

* { box-sizing: border-box; }

html {
  min-width: 280px;
  background: var(--black);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--bone);
  font-family: var(--body);
  line-height: 1.45;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

.home-body {
  position: relative;
  isolation: isolate;
  background: #000000;
}

.home-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 30% at 50% 50%, rgba(2,2,3,1) 0%, rgba(34,35,37,.06) 34%, rgba(17,18,19,.03) 54%, rgba(0,0,0,0) 82%),
    radial-gradient(ellipse 74% 82% at 3% 8%, rgba(33,34,36,.045) 0%, rgba(16,17,18,.022) 42%, transparent 76%),
    radial-gradient(ellipse 78% 88% at 98% 94%, rgba(35,36,38,.04) 0%, rgba(14,15,16,.02) 46%, transparent 78%),
    linear-gradient(118deg, rgba(7,7,8,1) 0%, rgba(3,3,4,1) 42%, rgba(0,0,0,1) 58%, rgba(4,4,5,1) 100%);
  background-size: 100% 100%;
  filter: blur(40px) saturate(.02) contrast(.98) brightness(.7);
  animation: void-stir 11s cubic-bezier(.45, 0, .55, 1) infinite;
}

.home-body > .site-header { position: relative; z-index: 2; }
.home-body > main { position: relative; z-index: auto; }

/* A full-width, buried reel band: continuous movement independent of the wordmark sweep. */
.top-film-strip {
  position: fixed;
  z-index: 101;
  top: clamp(76px, 10vh, 112px);
  left: 0;
  width: 100vw;
  height: 15px;
  pointer-events: none;
  opacity: .34;
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(236,236,238,.36) 11px 15px, transparent 16px 25px) 0 1px / 122px 3px repeat-x,
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(214,214,216,.26) 11px 15px, transparent 16px 25px) 61px 11px / 122px 3px repeat-x,
    repeating-linear-gradient(90deg, rgba(16,16,18,.78) 0 44px, rgba(39,39,42,.72) 45px 48px, rgba(18,18,20,.84) 49px 94px, rgba(56,56,60,.6) 95px 98px, rgba(21,21,23,.78) 99px 122px);
  border-top: 1px solid rgba(255,255,255,.2);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 0 10px rgba(0,0,0,.34), 0 0 28px rgba(0,0,0,.22);
  filter: saturate(.1) blur(.15px);
  animation: top-film-advance 54s linear infinite;
}

a { color: inherit; }
button, input { font: inherit; }

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}

.page-noise {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .016;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

/* The final display surface: a damaged, translucent monitor rather than more decoration. */
.destroyed-monitor {
  position: fixed;
  inset: 0;
  z-index: 102;
  pointer-events: none;
  opacity: .4;
  background:
    radial-gradient(ellipse 110% 92% at 50% 48%, transparent 43%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.58) 100%),
    linear-gradient(90deg, rgba(255,25,99,.06), transparent 8% 92%, rgba(105,70,255,.08)),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(0,0,0,.3) 13px 14px, rgba(190,119,255,.04) 15px 16px, transparent 17px 25px);
  box-shadow: inset 0 0 12vw rgba(0,0,0,.44), inset 0 0 90px rgba(107,44,154,.18);
  animation: monitor-ruin 21s ease-in-out infinite;
}

.destroyed-monitor::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(206,118,255,.11) 15% 32%, transparent 34% 100%),
    linear-gradient(90deg, transparent 0 57%, rgba(247,176,255,.09) 58% 75%, transparent 77%);
  background-size: 100% 6px, 100% 3px;
  background-position: 0 28%, 0 72%;
  filter: blur(2.5px);
  opacity: .34;
  animation: monitor-tear 17s steps(1, end) infinite;
}

.dead-tech-glass {
  position: fixed;
  inset: 0;
  z-index: 101;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: visible;
  mix-blend-mode: screen;
}

.dead-tech-glass path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: square;
}

.haze-lightning {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: visible;
}

.haze-strike {
  fill: none;
  stroke: rgba(195,103,255,.72);
  stroke-width: 2.8;
  filter: blur(4px) drop-shadow(0 0 20px rgba(157,57,237,.94));
  opacity: 0;
}

.haze-strike-a { animation: haze-strike-a 23s ease-in-out infinite; }
.haze-strike-b { animation: haze-strike-b 29s ease-in-out -8s infinite; }
.haze-strike-c { animation: haze-strike-c 31s ease-in-out -16s infinite; }

.glass-impact {
  fill: rgba(17,8,26,.28);
  stroke: rgba(236,176,255,.72);
  stroke-width: 1.15;
  filter: drop-shadow(0 0 5px rgba(186,82,255,.85));
}

.glass-impact-outer {
  fill: none;
  stroke: rgba(160,70,229,.38);
  stroke-dasharray: 4 5;
}

.glass-main {
  stroke: rgba(207,119,255,.34);
  stroke-width: 1.1;
  filter: drop-shadow(0 0 2px rgba(179,75,255,.5));
  animation: glass-awake 22s steps(1, end) infinite;
}

.glass-branches {
  stroke: rgba(255,159,238,.24);
  stroke-width: .8;
  filter: drop-shadow(0 0 1px rgba(220,103,255,.4));
  animation: glass-branch-glitch 19s steps(1, end) infinite;
}

/* Two buried display layers: a breathing core and an angular relic shell. */
.relic-mask {
  position: fixed;
  inset: 0;
  z-index: 97;
  pointer-events: none;
}

.relic-mask-bloom {
  opacity: .68;
  background:
    radial-gradient(ellipse 60% 39% at 51% 49%, rgba(177,78,255,.38), rgba(77,28,124,.22) 39%, transparent 74%),
    radial-gradient(ellipse 29% 18% at 51% 49%, rgba(235,170,255,.28), transparent 72%);
  filter: blur(18px);
  animation: relic-dragon-breathe 15s cubic-bezier(.45,0,.55,1) infinite;
}

.relic-mask-fracture {
  z-index: 98;
  opacity: .48;
  background:
    linear-gradient(124deg, transparent 0 35%, rgba(215,117,255,.2) 35.2% 37.4%, transparent 37.7% 100%),
    linear-gradient(56deg, transparent 0 57%, rgba(155,61,226,.2) 57.2% 59.3%, transparent 59.6% 100%),
    linear-gradient(90deg, transparent 0 17%, rgba(238,169,255,.17) 17.2% 17.65%, transparent 17.9% 81%, rgba(238,169,255,.16) 81.2% 81.65%, transparent 81.9%),
    linear-gradient(145deg, transparent 0 72%, rgba(112,45,183,.18) 72.2% 75%, transparent 75.3%);
  mix-blend-mode: screen;
  clip-path: polygon(0 0, 100% 0, 100% 22%, 87% 31%, 100% 47%, 100% 100%, 0 100%, 0 76%, 14% 66%, 0 52%);
  animation: relic-shell-glitch 18s steps(1, end) infinite;
}

.relic-mask-fracture::before,
.relic-mask-fracture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A dead display's fracture map: branching cracks, not decorative grid lines. */
.relic-mask-fracture::before {
  opacity: .75;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1600 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23bf70ff' stroke-width='1.3' stroke-linecap='square'%3E%3Cpath d='M0 116L164 150l93 84 132-20 91 96 124-15 125 93 126-43 127 74 113-27 122 84 136-17 108 70'/%3E%3Cpath d='M83 0l61 151-59 132 98 87-45 140 119 91-48 147 106 86'/%3E%3Cpath d='M455 0l-66 214 77 81-91 128 86 119-62 132 99 97-54 229'/%3E%3Cpath d='M778 0l-49 171 101 124-73 150 95 91-36 156 81 127-27 181'/%3E%3Cpath d='M1110 0l-49 173 95 86-88 153 82 96-54 137 111 91-47 164'/%3E%3Cpath d='M1430 0l-58 163 88 117-64 136 89 116-78 145 101 104-55 219'/%3E%3Cpath d='M164 150l-45 83M257 234l-57 65M389 214l-38-93M604 295l46-90M729 171l-86 40M855 345l-20-99M981 432l-67-83M1107 405l48-102M1230 489l-15-109M1366 472l46-94'/%3E%3Cpath d='M0 742l154-57 103 63 117-74 141 62 132-79 126 70 122-63 118 75 135-69 115 55 150-72'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  filter: drop-shadow(0 0 3px rgba(181,84,255,.48));
  animation: dead-tech-crack 17s steps(1, end) infinite;
}

.relic-mask-fracture::after {
  opacity: .38;
  background:
    conic-gradient(from 106deg at 15% 24%, transparent 0 14deg, rgba(193,100,255,.18) 14.3deg 15deg, transparent 15.3deg 43deg, rgba(193,100,255,.12) 43.2deg 44deg, transparent 44.2deg),
    conic-gradient(from 280deg at 82% 66%, transparent 0 19deg, rgba(143,67,211,.17) 19.2deg 20deg, transparent 20.2deg 51deg, rgba(229,140,255,.12) 51.2deg 52deg, transparent 52.2deg);
  filter: blur(.35px);
  animation: dead-tech-ghost 13s steps(1, end) infinite;
}

/* Full-screen CRT glass: phosphor bands, chroma fringe and a soft tube vignette. */
.crt-mask {
  position: fixed;
  inset: 0;
  z-index: 103;
  pointer-events: none;
  opacity: .44;
  overflow: hidden;
  border-radius: 11% 11% 8% 8% / 5% 5% 4% 4%;
  background-color: rgba(7,7,8,.22);
  background:
    repeating-radial-gradient(ellipse 118% 102% at 50% 48%, transparent 0 7%, rgba(224,224,228,.03) 7.1% 7.65%, transparent 7.9% 10%),
    radial-gradient(ellipse 118% 98% at 50% 48%, transparent 25%, rgba(5,5,6,.24) 55%, rgba(0,0,0,.86) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.76) 0 1px, rgba(241,241,242,.14) 1px 2px, rgba(0,0,0,.28) 2px 3px, transparent 3px 4px),
    repeating-linear-gradient(90deg, rgba(180,180,182,.11) 0 1px, transparent 1px 2px, rgba(126,126,128,.09) 2px 3px, transparent 3px 4px, rgba(95,95,98,.11) 4px 5px, transparent 5px 6px);
  background-size: 100% 100%, 100% 100%, 100% 4px, 6px 100%;
  box-shadow: inset 0 0 180px rgba(22,22,24,.34), inset 0 0 20vw rgba(0,0,0,.74), inset 0 0 34px rgba(0,0,0,.94), 0 0 44px rgba(26,26,28,.32);
  mix-blend-mode: normal;
  backdrop-filter: contrast(1.12) saturate(.72) brightness(.94) blur(.2px);
  transform: scale(1.035);
  animation: crt-roll 9s linear infinite;
}

.crt-mask::before,
.crt-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The relic does not glitch constantly; it briefly leaks through the display. */
.crt-mask::before {
  opacity: .34;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,42,110,.24) 3px 4px, transparent 5px 8px),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(79,255,160,.2) 4px 5px, transparent 6px 10px),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(153,75,255,.24) 5px 6px, transparent 7px 12px);
  background-size: 100% 9px, 100% 11px, 100% 13px;
  background-position: 0 0, 0 4px, 0 8px;
  mix-blend-mode: screen;
  filter: blur(1.7px) saturate(1.5);
  transform: translateX(-1.5px);
  animation: rgb-desync 8.5s steps(1, end) infinite;
}

.crt-mask::after {
  opacity: .64;
  background:
    radial-gradient(ellipse 83% 76% at 50% 48%, transparent 59%, rgba(149,74,202,.16) 76%, rgba(0,0,0,.26) 100%),
    linear-gradient(90deg, rgba(255,30,100,.2), transparent 11% 89%, rgba(115,69,255,.24)),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(231,177,255,.13) 18px 20px, transparent 21px 35px);
  mix-blend-mode: screen;
  animation: chroma-drift 7.5s steps(1, end) infinite;
}

@keyframes crt-roll {
  0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0; opacity: .9; }
  48% { opacity: 1; }
  50% { background-position: 0 0, 0 0, 0 5px, 3px 0; opacity: .98; }
}

@keyframes relic-dragon-breathe {
  0%, 100% { opacity: .38; transform: scale(.94); filter: blur(21px) brightness(.78); }
  50% { opacity: .82; transform: scale(1.1); filter: blur(16px) brightness(1.16); }
}

@keyframes relic-shell-glitch {
  0%, 24%, 28%, 64%, 68%, 100% { opacity: .29; transform: translate(0,0); }
  25% { opacity: .72; transform: translate(5px,-2px); }
  26% { opacity: .36; transform: translate(-3px,2px); }
  65% { opacity: .64; transform: translate(-4px,1px); }
  66% { opacity: .28; transform: translate(2px,-2px); }
}

@keyframes dead-tech-crack {
  0%, 21%, 24%, 54%, 58%, 100% { opacity: .52; transform: translate(0,0); }
  22% { opacity: .94; transform: translate(3px,-1px); }
  23% { opacity: .3; transform: translate(-5px,2px); }
  55% { opacity: .82; transform: translate(-2px,2px); }
  56% { opacity: .35; transform: translate(4px,-2px); }
}

@keyframes dead-tech-ghost {
  0%, 38%, 42%, 77%, 80%, 100% { opacity: .2; transform: translate(0,0); }
  39% { opacity: .6; transform: translate(7px,-3px); }
  40% { opacity: .16; transform: translate(-6px,2px); }
  78% { opacity: .52; transform: translate(-5px,3px); }
  79% { opacity: .18; transform: translate(4px,-2px); }
}

@keyframes glass-awake {
  0%, 28%, 32%, 71%, 75%, 100% { opacity: .5; transform: translate(0,0); }
  29% { opacity: .94; transform: translate(4px,-2px); }
  30% { opacity: .26; transform: translate(-5px,2px); }
  72% { opacity: .82; transform: translate(-3px,1px); }
  73% { opacity: .35; transform: translate(5px,-2px); }
}

@keyframes glass-branch-glitch {
  0%, 41%, 45%, 83%, 86%, 100% { opacity: .38; transform: translate(0,0); }
  42% { opacity: .9; transform: translate(-5px,2px); }
  43% { opacity: .18; transform: translate(6px,-2px); }
  84% { opacity: .74; transform: translate(3px,1px); }
  85% { opacity: .22; transform: translate(-4px,-1px); }
}

@keyframes relic-leak {
  0%, 15%, 28%, 65%, 78%, 100% { opacity: 0; transform: translateX(-1.5px); }
  19% { opacity: .18; transform: translateX(1px); }
  22% { opacity: .5; transform: translateX(-2px); }
  25% { opacity: .28; transform: translateX(2px); }
  69% { opacity: .14; transform: translateX(2px); }
  73% { opacity: .42; transform: translateX(-2px); }
  76% { opacity: .2; transform: translateX(1px); }
}

@keyframes chroma-drift {
  0%, 19%, 23%, 61%, 66%, 100% { opacity: .36; transform: translate(0,0); }
  20% { opacity: .82; transform: translate(6px,-2px); }
  22% { opacity: .48; transform: translate(-5px,3px); }
  63% { opacity: .76; transform: translate(-7px,2px); }
  65% { opacity: .42; transform: translate(4px,-3px); }
}

@keyframes rgb-desync {
  0%, 14%, 18%, 42%, 47%, 73%, 78%, 100% { opacity: .16; transform: translate(0,0); }
  15% { opacity: .52; transform: translate(7px,-2px); }
  16% { opacity: .26; transform: translate(-5px,3px); }
  44% { opacity: .62; transform: translate(-8px,2px); }
  45% { opacity: .3; transform: translate(5px,-3px); }
  75% { opacity: .5; transform: translate(6px,2px); }
  76% { opacity: .24; transform: translate(-4px,-2px); }
}

.skip-link {
  position: fixed;
  top: -80px;
  left: 12px;
  z-index: 200;
  padding: 10px 14px;
  background: var(--bone);
  color: var(--black);
}

.skip-link:focus { top: 12px; }

.site-header,
.site-footer {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding-inline: 24px;
}

.site-header {
  position: relative;
  min-height: 114px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  line-height: 1;
  text-decoration: none;
}

.brand-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  padding-left: clamp(.3em, 1.6vw, 1.2em);
  font: 900 clamp(33px, 3.65vw, 50px)/1 var(--display);
  letter-spacing: clamp(.22em, 1.2vw, .96em);
  text-align: center;
  color: #e01834;
  -webkit-text-stroke: 1px rgba(7, 4, 10, .88);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(0,0,0,.96), 0 0 3px rgba(255,255,255,.12), 0 0 10px rgba(176,0,34,.28), 0 0 18px rgba(255,44,78,.22);
  filter: none;
  white-space: nowrap;
  animation: wordmark-charge 15.4s ease-in-out infinite;
}

/* A brief fractured scanline: the signal crosses the wordmark, then disappears. */
.brand-main::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 48%;
  left: -24%;
  width: 34%;
  height: 6px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 5%, #8e001a 12% 18%, transparent 19% 23%, #d92645 24% 38%, #fff 39% 47%, transparent 48% 52%, #f35168 53% 61%, transparent 62% 66%, #8b001e 67% 79%, transparent 88%),
    repeating-linear-gradient(115deg, transparent 0 5px, rgba(255,200,214,.88) 6px 7px, transparent 8px 15px);
  box-shadow: 0 0 4px #fff, 0 0 10px rgba(224,24,52,.65), 0 0 22px rgba(177,0,38,.78), 0 0 42px rgba(111,0,19,.52);
  clip-path: polygon(0 53%, 10% 16%, 20% 66%, 31% 0, 42% 58%, 51% 21%, 60% 90%, 69% 27%, 78% 74%, 90% 12%, 100% 54%, 88% 100%, 75% 48%, 64% 100%, 53% 42%, 42% 88%, 31% 35%, 19% 100%, 10% 49%, 0 78%);
  transform: skewX(-28deg) rotate(-1deg);
  animation: header-signal-shatter 15.4s cubic-bezier(.63,0,.37,1) infinite;
}

.brand-main::after {
  content: ">> ARC//PULSE_47 :: EXEC :: ARC//PULSE_47 :: EXEC :: ARC//PULSE_47 :: EXEC >>";
  position: absolute;
  z-index: 1;
  top: 15%;
  left: -20%;
  color: #ffc3cf;
  font: 800 10px/1 var(--mono);
  letter-spacing: .16em;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 4px #fff, 0 0 12px rgba(255,69,99,.72), 11px -7px 0 rgba(201,0,41,.34), -15px 8px 0 rgba(128,0,24,.24);
  transform: skewX(-28deg);
  animation: header-shard-echo 15.4s ease-out infinite;
}

.brand-film-swoosh {
  position: absolute;
  z-index: 1;
  top: 30%;
  left: -48%;
  width: 176%;
  height: 20px;
  opacity: .26;
  pointer-events: none;
  border-top: 1px solid rgba(255,191,201,.72);
  border-bottom: 1px solid rgba(217,84,105,.52);
  background:
    repeating-linear-gradient(90deg, rgba(255,196,206,.24) 0 4px, transparent 4px 10px, rgba(188,0,34,.14) 10px 13px, transparent 13px 19px),
    linear-gradient(90deg, transparent, rgba(224,24,52,.24) 20%, rgba(255,224,228,.15) 50%, rgba(140,0,24,.22) 80%, transparent);
  box-shadow: 0 0 18px rgba(224,24,52,.22);
  transform: skewX(-22deg) rotate(-.5deg);
  animation: film-reel-swoosh 46.2s linear -25s infinite;
}

.brand-glyph {
  display: inline-block;
  margin-inline: .2em;
  color: #f1dbe1;
  font-size: .7em;
  letter-spacing: 0;
  transform: rotate(45deg);
}

.brand-letter {
  position: relative;
  z-index: 2;
  display: inline-block;
  animation: letter-signal-flicker 13s steps(1, end) var(--flicker) infinite;
}

.brand-glyph { position: relative; z-index: 2; }

.brand-sub {
  margin-top: 7px;
  color: var(--bone-soft);
  font: 600 8px/1 var(--body);
  letter-spacing: .19em;
}

.transmission-state {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font: 700 9px/1 var(--body);
  letter-spacing: .16em;
}

.audio-control {
  border: 1px solid rgba(146,119,173,.48);
  padding: 4px 5px;
  background: rgba(9,7,12,.56);
  color: var(--bone-soft);
  font: 700 7px/1 var(--mono);
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.audio-control[aria-pressed="true"] {
  border-color: var(--violet);
  color: #edd8ff;
  box-shadow: 0 0 12px rgba(146,119,173,.28);
}

.audio-control:hover,
.audio-control:focus-visible {
  border-color: #d9a0ff;
  color: #fff;
}

.transmission-state i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6cff9e;
  box-shadow: 0 0 5px #ffffff, 0 0 14px #9dff57, 0 0 28px #42ff83, 0 0 42px rgba(42,255,120,.95);
  animation: matrix-blink 13s steps(1, end) infinite;
}

main { width: 100%; }

.signal-hero {
  position: relative;
  isolation: isolate;
  width: min(100%, var(--max));
  min-height: 0;
  margin: 0 auto;
  padding: clamp(8px, 1.2vh, 16px) 24px clamp(14px, 1.8vh, 22px);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(310px, .7fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
}

.signal-hero::before,
.signal-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  pointer-events: none;
  border: 1px solid rgba(146,119,173,.16);
  transform: rotate(45deg);
}

.signal-hero::before {
  width: clamp(230px, 30vw, 430px);
  left: -18%;
  top: 2%;
  box-shadow: 0 0 0 30px rgba(146,119,173,.025);
  animation: geometry-breathe 12s ease-in-out infinite;
}

.signal-hero::after {
  width: clamp(170px, 22vw, 310px);
  right: 21%;
  top: -18%;
  border-color: rgba(236,228,213,.105);
  box-shadow: 0 0 0 20px rgba(236,228,213,.018);
  animation: geometry-breathe 12s ease-in-out infinite 1s reverse;
}

.signal-hero > .signal-copy,
.signal-hero > .entry-stack { z-index: 1; }

.signal-copy {
  margin-top: 0;
}

.entry-stack {
  margin-top: 0;
  justify-self: end;
}

.civic-terminal {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  justify-self: center;
  margin: 2px auto 0;
  padding: 16px 18px 14px;
  color: #b9d8aa;
  background:
    repeating-linear-gradient(0deg, rgba(132,190,113,.035) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(7,17,9,.97), rgba(2,7,4,.98));
  border: 1px solid rgba(142,190,123,.36);
  box-shadow: inset 0 0 0 1px rgba(236,228,213,.035), 0 0 18px rgba(43,91,48,.14);
  font-family: var(--mono);
  letter-spacing: .015em;
}

.terminal-topline,
.terminal-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.terminal-kicker { margin: 0 0 5px; color: var(--violet); font-size: 9px; letter-spacing: .2em; }
.terminal-topline h2 { margin: 0; color: #d9edc8; font: 700 15px/1.1 var(--body); letter-spacing: .12em; }
.terminal-status { color: #9ac681; font-size: 9px; letter-spacing: .14em; white-space: nowrap; }
.terminal-status i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--relic); box-shadow: 0 0 6px rgba(232,29,79,.8); }
.terminal-screen { min-width: 0; height: 145px; margin: 14px 0 12px; padding: 13px 14px; border: 1px solid rgba(142,190,123,.24); background: rgba(0,4,1,.45); font-size: 11px; line-height: 1.55; overflow: hidden; }
.terminal-meta { margin-bottom: 9px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.terminal-feed { min-width: 0; height: 87px; color: #b9d8aa; text-shadow: 0 0 4px rgba(121,188,100,.18); overflow: hidden; overflow-wrap: anywhere; word-break: break-word; }
.terminal-feed,
.terminal-screen,
.signal-copy .lede,
.archive-fragment blockquote { overflow-anchor: none; }
.terminal-screen,
.signal-copy .lede,
.archive-fragment blockquote { contain: layout paint; }
.terminal-feed p { margin: 0 0 5px; }
.terminal-message-in,
.terminal-message-out { position: relative; overflow: hidden; }
.terminal-message-in::after,
.terminal-message-out::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(154,198,129,.18), transparent); transform: translateX(-120%); animation: terminal-data-sweep 1.1s ease-out both; }
.terminal-message-in { animation: terminal-message-in 900ms cubic-bezier(.2,.7,.2,1) both; }
.terminal-message-out { animation: terminal-message-out 850ms cubic-bezier(.6,0,.9,.4) both; }
.terminal-sender { color: #9ac681; }
.terminal-amber,
.terminal-amber .terminal-sender { color: #e3a04b; text-shadow: 0 0 5px rgba(227,160,75,.35); }
.terminal-arc,
.terminal-arc .terminal-sender { color: #f3eee5; text-shadow: 0 0 5px rgba(255,247,235,.24); }
.terminal-prompt { margin-top: 10px; color: #a6b49a; font-size: 10px; letter-spacing: .1em; }
.terminal-prompt b { color: #9ac681; animation: terminal-cursor 1s steps(1,end) infinite; }
.terminal-button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 11px; color: var(--bone); background: transparent; border: 1px solid rgba(146,119,173,.62); font: 700 9px/1 var(--mono); letter-spacing: .1em; cursor: pointer; text-decoration: none; }
.terminal-button:hover, .terminal-button:focus-visible { color: var(--ink); background: var(--bone); outline: none; }
.terminal-button-quiet { border-color: rgba(236,228,213,.25); color: var(--violet); }
.terminal-note { margin-left: auto; color: #687266; font-size: 8px; letter-spacing: .08em; text-align: right; }
@keyframes terminal-cursor { 50% { opacity: 0; } }
@keyframes terminal-message-in {
  0% { opacity: 0; transform: translateX(-12px); filter: blur(2px); }
  45% { opacity: .65; transform: translateX(3px); filter: blur(.5px); }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}
@keyframes terminal-message-out {
  0% { opacity: 1; transform: translateX(0); filter: blur(0); letter-spacing: .015em; }
  55% { opacity: .55; transform: translateX(8px); filter: blur(.7px); letter-spacing: .08em; }
  100% { opacity: 0; transform: translateX(26px); filter: blur(2px); letter-spacing: .16em; }
}
@keyframes terminal-data-sweep { to { transform: translateX(120%); } }
@keyframes copy-signal-out { to { opacity: .08; transform: translateX(10px); filter: blur(2px); } }
@keyframes copy-signal-in { from { opacity: .08; transform: translateX(-10px); filter: blur(2px); } to { opacity: 1; transform: translateX(0); filter: blur(0); } }

.eyebrow,
.panel-label,
.file-number,
.signal-form label,
.privacy-note,
.archive-fragment > p,
.archive-fragment > span,
.site-footer {
  font: 700 10px/1.35 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.eyebrow,
.file-number,
.archive-fragment > p { color: var(--violet); }

.signal-copy {
  position: relative;
  isolation: isolate;
}

.signal-copy > * { position: relative; z-index: 3; }

.signal-copy::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 8% -4% 14%;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 70% at 42% 45%, rgba(3,3,4,.82), rgba(14,15,17,.18) 58%, transparent 82%);
  filter: blur(10px);
}

.signal-copy::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -9% -7%;
  pointer-events: none;
  opacity: .22;
  background:
    radial-gradient(ellipse 62% 54% at 34% 42%, rgba(255,255,255,.08), transparent 71%),
    radial-gradient(ellipse 54% 45% at 74% 62%, rgba(165,171,180,.05), transparent 74%),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(255,255,255,.02) 18px 20px, transparent 21px 36px);
  filter: blur(9px);
  mix-blend-mode: normal;
  animation: panel-haze 15s ease-in-out infinite alternate;
}

.signal-copy h1 {
  margin: 18px 0;
  font: 900 clamp(54px, 7.4vw, 102px)/.86 var(--display);
  letter-spacing: -.045em;
  text-transform: uppercase;
  background: none;
  color: #ffffff;
  -webkit-text-stroke: 1px rgba(8,6,11,.78);
  paint-order: stroke fill;
  text-shadow:
    0 4px 0 rgba(0,0,0,.98),
    0 0 3px rgba(255,255,255,.95),
    0 0 7px rgba(255,255,255,.16);
  filter: brightness(2.35) contrast(1.2) saturate(.82);
  animation: title-pop 12s ease-in-out infinite;
}

.signal-copy h1 span {
  background: none;
  color: #493d4d;
  -webkit-text-stroke: 1px rgba(8, 5, 13, .86);
  text-shadow: 0 3px 0 rgba(0,0,0,.98), 0 0 6px rgba(206,196,207,.58), 0 0 18px rgba(132,111,138,.5), 0 0 39px rgba(61,47,65,.7);
  animation: none;
}

@keyframes title-pop {
  0%,
  100% {
    filter: brightness(2.35) contrast(1.2) saturate(.82);
    text-shadow:
      0 4px 0 rgba(0,0,0,.98),
      0 0 3px rgba(255,255,255,.95),
      0 0 7px rgba(255,255,255,.16);
  }

  50% {
    filter: brightness(2.7) contrast(1.24) saturate(.78);
    text-shadow:
      0 4px 0 rgba(0,0,0,.98),
      0 0 5px rgba(255,255,255,.98),
      0 0 10px rgba(255,255,255,.2);
  }
}

@keyframes panel-haze {
  0% { opacity: .42; transform: translate3d(-2%, -1%, 0) scale(.94); }
  52% { opacity: .82; transform: translate3d(2%, 2%, 0) scale(1.07); }
  100% { opacity: .58; transform: translate3d(-1%, 3%, 0) scale(1); }
}

.pupil-anchor {
  position: relative;
  z-index: 0;
  display: inline-block;
  isolation: isolate;
}

.pupil-anchor::before {
  display: none;
}

.lede {
  max-width: 680px;
  margin: 0;
  padding: 5px 18px 7px 0;
  background: linear-gradient(90deg, rgba(4,4,5,.72), rgba(4,4,5,.34) 68%, transparent 100%);
  color: #f6f1ea;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.25;
  text-shadow: 0 2px 4px rgba(0,0,0,.98), 0 0 7px rgba(255,255,255,.06);
}

.signal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}

.signal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 19px;
  padding: 4px 6px;
  border: 1px solid rgba(211,105,255,.72);
  background: rgba(12,12,14,.78);
  color: #e9b8ff;
  font: 800 8px/1 var(--mono);
  letter-spacing: .09em;
  text-shadow: 0 0 6px rgba(210,101,255,.95);
  box-shadow: inset 0 0 9px rgba(181,72,255,.1), 0 0 8px rgba(177,67,246,.18);
  animation: chip-glow 6s ease-in-out infinite;
}

button.signal-chip {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
}

button.signal-chip[data-signal-state="on"] {
  color: #b8ff9a;
  border-color: rgba(108,255,158,.9);
  text-shadow: 0 0 6px rgba(108,255,158,.95);
  box-shadow: inset 0 0 9px rgba(108,255,158,.14), 0 0 10px rgba(108,255,158,.34);
}

button.signal-chip[data-signal-state="on"] i {
  background: #ff315b;
  box-shadow: 0 0 5px #ff315b, 0 0 12px rgba(255,49,91,.9);
}

.terminal-future-control,
.terminal-future-control:hover,
.terminal-future-control:focus,
.terminal-future-control:active {
  cursor: default;
  color: var(--violet) !important;
  background: rgba(10,10,14,.7) !important;
  border-color: rgba(146,119,173,.42) !important;
  outline: none;
}

/* Terminal controls keep their phosphor treatment in Chrome hover/focus states. */
.terminal-actions .terminal-button:hover,
.terminal-actions .terminal-button:focus,
.terminal-actions .terminal-button:focus-visible,
.terminal-actions .terminal-button:active {
  color: var(--violet) !important;
  background: rgba(20,10,27,.72) !important;
  border-color: var(--violet) !important;
  outline: 1px solid rgba(146,119,173,.42);
  outline-offset: 1px;
}
.terminal-actions .terminal-button-quiet:hover,
.terminal-actions .terminal-button-quiet:focus,
.terminal-actions .terminal-button-quiet:focus-visible,
.terminal-actions .terminal-button-quiet:active {
  color: var(--bone-soft) !important;
  background: rgba(10,10,14,.82) !important;
  border-color: rgba(236,228,213,.42) !important;
}

.signal-chip i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6cff9e;
  box-shadow: 0 0 4px #ffffff, 0 0 11px #9dff57, 0 0 22px #42ff83, 0 0 34px rgba(42,255,120,.95);
  animation: matrix-blink 17s steps(1, end) -6s infinite;
}

.signal-chip-alt { animation-delay: -2.1s; }
.signal-chip-fragment { color: var(--violet); animation-delay: -4.4s; }

.signal-chip-contact {
  color: var(--bone-soft);
  text-decoration: none;
  border-color: rgba(190, 155, 218, .58);
  animation-delay: -2.1s;
}

.signal-chip-contact:hover,
.signal-chip-contact:focus-visible {
  color: #fff;
  border-color: #d9a0ff;
  box-shadow: inset 0 0 10px rgba(181,72,255,.16), 0 0 12px rgba(177,67,246,.3);
}

.signal-chip-contact { position: relative; }
.signal-chip-contact::after {
  content: attr(data-address);
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  padding: 5px 7px;
  color: var(--bone-soft);
  background: rgba(8,7,10,.96);
  border: 1px solid rgba(190,155,218,.55);
  font: 600 9px/1 var(--body);
  letter-spacing: .08em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity .16s ease, transform .16s ease;
}
.signal-chip-contact:hover::after,
.signal-chip-contact:focus-visible::after { opacity: 1; transform: translateY(0); }

.signal-chip-alt::before,
.signal-chips .audio-control::after {
  content: "";
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #9dff57;
  box-shadow: 0 0 4px #ffffff, 0 0 10px #9dff57, 0 0 21px #42ff83, 0 0 33px rgba(42,255,120,.95);
  animation: matrix-blink 11s steps(1, end) -3s infinite;
}

.signal-chips .audio-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 19px;
  width: 94px;
  padding: 4px 6px;
  border-color: rgba(211,105,255,.72);
  background: rgba(12,12,14,.78);
  color: #e9b8ff;
  font: 800 8px/1 var(--mono);
  letter-spacing: .09em;
  text-shadow: 0 0 6px rgba(210,101,255,.95);
  box-shadow: inset 0 0 9px rgba(181,72,255,.1), 0 0 8px rgba(177,67,246,.18);
  animation: chip-glow 6s ease-in-out -1.2s infinite;
}

.signal-chips .audio-control::after { margin-left: 3px; }

.transmission-state.phosphor-flash i,
.signal-chip.phosphor-flash i,
.signal-chip-alt.phosphor-flash::before,
.signal-chips .audio-control.phosphor-flash::after {
  opacity: 1;
  transform: scale(1.7);
  box-shadow: 0 0 6px #ffffff, 0 0 16px #b6ff68, 0 0 32px #42ff83, 0 0 48px rgba(42,255,120,1);
}

@keyframes chip-glow {
  0%, 100% { border-color: rgba(211,105,255,.48); box-shadow: inset 0 0 6px rgba(181,72,255,.1), 0 0 4px rgba(177,67,246,.16); }
  50% { border-color: rgba(239,170,255,.95); box-shadow: inset 0 0 12px rgba(181,72,255,.3), 0 0 12px rgba(205,93,255,.45); }
}

.relic-signal,
.protocol-fragment {
  font: 700 9px/1.3 var(--body);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.relic-signal {
  width: fit-content;
  margin-top: 18px;
  padding-top: 8px;
  display: grid;
  grid-template-columns: 72px auto auto;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--muted);
  animation: relic-breathe 12s ease-in-out infinite .5s;
}

/* Compact relic markers: keep the symbols, remove the empty bar-like framing. */
.relic-signal { border-top: 0; padding-top: 0; }

.relic-signal svg {
  width: 72px;
  height: 24px;
  fill: none;
  stroke: var(--violet);
  stroke-width: 1.25;
}

.relic-signal span:last-child { color: var(--violet); }

.entry-panel {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.entry-stack {
  align-self: center;
  padding: 14px 0 14px 18px;
  border-left: 1px solid rgba(250,250,250,.2);
  background: linear-gradient(90deg, rgba(2,2,3,.98), rgba(2,2,3,.56) 67%, transparent 100%);
  box-shadow: -16px 0 26px rgba(0,0,0,.58), inset 1px 0 12px rgba(255,255,255,.04);
}

.entry-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 126px;
  aspect-ratio: 1;
  right: -68px;
  bottom: -64px;
  border: 1px solid rgba(215,159,255,.45);
  box-shadow: 0 0 0 16px rgba(168,72,239,.07), 0 0 0 34px rgba(236,228,213,.03), 0 0 34px rgba(173,63,242,.18);
  transform: rotate(45deg);
  display: none;
}

.entry-panel::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -16%;
  pointer-events: none;
  opacity: .18;
  background:
    radial-gradient(ellipse 64% 48% at 17% 19%, rgba(255,255,255,.09), transparent 70%),
    radial-gradient(ellipse 68% 54% at 84% 80%, rgba(187,190,195,.06), transparent 73%),
    radial-gradient(ellipse 54% 42% at 56% 52%, rgba(208,60,86,.05), transparent 72%),
    linear-gradient(130deg, transparent 30%, rgba(255,255,255,.045) 51%, transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(255,255,255,.02) 16px 18px, transparent 19px 31px);
  filter: blur(12px);
  mix-blend-mode: normal;
  animation: panel-haze 13s ease-in-out infinite alternate-reverse;
}

.entry-panel > * { position: relative; z-index: 3; }

.panel-label {
  margin: 0 0 16px;
  padding: 0 0 9px;
  border-bottom: 1px solid rgba(226,199,255,.48);
  background: transparent;
  color: #fff6e7;
  text-shadow: 0 0 9px rgba(222,149,255,.55);
  font-weight: 800;
}

.file-number { margin: 0 0 15px; }

.entry-marks {
  margin: 0 0 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--violet);
  font: 700 8px/1 var(--body);
  letter-spacing: .17em;
  animation: relic-breathe 12s ease-in-out infinite 1s;
}

.entry-marks { margin-left: 0; gap: 8px; }
.entry-marks::before { display: none; }
.entry-marks span { padding-left: 8px; }

.entry-marks::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border: 1px solid var(--violet);
  border-radius: 50%;
  background: rgba(146,119,173,.7);
  box-shadow: 0 0 0 3px rgba(146,119,173,.14), 0 0 14px rgba(146,119,173,.36);
  animation: oculus-breathe 12s ease-in-out infinite 1s;
}

.entry-marks svg {
  width: 138px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.entry-marks span {
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.entry-angles {
  width: fit-content;
  margin: 5px 0 0 auto;
  color: var(--violet);
  opacity: .7;
  animation: relic-breathe 12s ease-in-out infinite 2.2s;
}

.entry-angles svg {
  width: 220px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

@keyframes signal-breathe {
  0%, 100% { opacity: .45; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes header-signal-shatter {
  0%, 12%, 16%, 43%, 48%, 78%, 84%, 100% { left: -30%; opacity: 0; }
  13% { left: -18%; opacity: .22; transform: skewX(-28deg) rotate(-1deg) scaleY(.35); }
  14% { left: 38%; opacity: .56; transform: skewX(-28deg) rotate(-1deg) scaleY(1.45); }
  15% { left: 110%; opacity: .12; transform: skewX(-28deg) rotate(-1deg) scaleY(.15); }
  44% { left: -20%; opacity: .44; transform: skewX(-28deg) rotate(-1deg) scaleY(.65); }
  45% { left: 17%; opacity: .52; transform: skewX(-28deg) rotate(-1deg) scaleY(1.1); }
  46% { left: 58%; opacity: .3; transform: skewX(-28deg) rotate(-1deg) scaleY(.28); }
  47% { left: 111%; opacity: .55; transform: skewX(-28deg) rotate(-1deg) scaleY(.95); }
  79% { left: -15%; opacity: .26; transform: skewX(-28deg) rotate(-1deg) scaleY(.42); }
  81% { left: 104%; opacity: .5; transform: skewX(-28deg) rotate(-1deg) scaleY(1.25); }
  82% { left: 118%; opacity: 0; transform: skewX(-28deg) rotate(-1deg) scaleY(.2); }
}

@keyframes letter-signal-flicker {
  0%, 8%, 13%, 28%, 36%, 58%, 67%, 84%, 100% { opacity: 1; filter: none; }
  9%, 29%, 85% { opacity: .82; filter: brightness(1.75) drop-shadow(0 0 4px #cf77ff); }
  12%, 59% { opacity: .44; filter: blur(.2px); }
  30% { opacity: .7; filter: brightness(1.45); }
  66% { opacity: .2; filter: blur(.5px); }
}

@keyframes letter-sweep-fade {
  0%, 11%, 16%, 42%, 48%, 77%, 84%, 100% { opacity: 1; filter: none; }
  12%, 44%, 79% { opacity: .26; filter: brightness(2.1) drop-shadow(0 0 7px #e9a5ff); }
  13%, 45%, 80% { opacity: .88; filter: brightness(1.65) drop-shadow(0 0 6px #c76cff); }
  14%, 46%, 81% { opacity: 1; filter: none; }
}

@keyframes title-shimmer {
  0%, 68%, 100% { background-position: 100% 50%; }
  82% { background-position: 0% 50%; }
}

@keyframes header-shard-echo {
  0%, 12%, 16%, 43%, 48%, 78%, 84%, 100% { left: -20%; opacity: 0; }
  14% { left: 13%; opacity: .44; }
  15% { left: 102%; opacity: 0; }
  45% { left: 28%; opacity: .46; }
  47% { left: 110%; opacity: 0; }
  80% { left: 22%; opacity: .38; }
  82% { left: 105%; opacity: 0; }
}

@keyframes footer-blood-sweep {
  0% { opacity: .18; transform: translateX(-115%) scaleX(.94); }
  16% { opacity: .48; }
  50% { opacity: .58; transform: translateX(44%) scaleX(1); }
  84% { opacity: .44; }
  100% { opacity: .18; transform: translateX(205%) scaleX(.94); }
}

@keyframes footer-blood-return {
  0% { opacity: .1; transform: translateX(165%) scaleX(.86); }
  18% { opacity: .34; }
  50% { opacity: .48; transform: translateX(-34%) scaleX(1.05); }
  82% { opacity: .3; }
  100% { opacity: .1; transform: translateX(-185%) scaleX(.86); }
}

@keyframes film-reel-swoosh {
  0% { left: -48%; opacity: .15; }
  48% { left: -24%; opacity: .34; }
  76% { left: -4%; opacity: .27; }
  100% { left: 12%; opacity: .15; }
}

@keyframes top-film-advance {
  from { background-position: 0 1px, 61px 11px, 0 0; }
  to { background-position: -1220px 1px, -1159px 11px, -1220px 0; }
}

@keyframes wordmark-charge {
  0%, 12%, 16%, 43%, 48%, 78%, 84%, 100% { filter: brightness(1.18) saturate(1.2); text-shadow: 0 2px 0 rgba(0,0,0,.96), 0 0 5px rgba(255,255,255,.72), 0 0 16px rgba(204,255,122,.42), 0 0 27px rgba(255,24,59,.9), 0 0 52px rgba(177,50,255,.7); }
  14%, 45%, 81% { filter: brightness(1.65) saturate(1.3); text-shadow: 0 2px 0 rgba(0,0,0,.96), 0 0 7px #fff, 0 0 22px rgba(204,255,122,.62), 0 0 34px rgba(255,34,71,.94), 0 0 62px rgba(192,76,255,1); }
}

@keyframes haze-strike-a {
  0%, 14%, 19%, 63%, 69%, 100% { opacity: 0; }
  16% { opacity: .28; }
  17% { opacity: .16; }
  18% { opacity: .34; }
  65% { opacity: .18; }
  67% { opacity: .3; }
}

@keyframes haze-strike-b {
  0%, 26%, 31%, 75%, 82%, 100% { opacity: 0; }
  28% { opacity: .24; }
  29% { opacity: .12; }
  30% { opacity: .31; }
  77% { opacity: .18; }
  80% { opacity: .27; }
}

@keyframes haze-strike-c {
  0%, 35%, 41%, 84%, 90%, 100% { opacity: 0; }
  37% { opacity: .2; }
  39% { opacity: .32; }
  86% { opacity: .15; }
  88% { opacity: .26; }
}

@keyframes matrix-blink {
  0%, 7%, 12%, 29%, 33%, 55%, 61%, 82%, 100% { opacity: .3; transform: scale(.78); }
  8%, 30%, 56%, 83% { opacity: 1; transform: scale(1.35); }
  10%, 31%, 58%, 85% { opacity: .55; transform: scale(.92); }
}

@keyframes monitor-ruin {
  0%, 100% { opacity: .56; filter: brightness(.9) saturate(.9); }
  48% { opacity: .7; filter: brightness(1.08) saturate(1.12); }
  50% { opacity: .62; filter: brightness(.94) saturate(1.02); }
}

@keyframes monitor-tear {
  0%, 31%, 35%, 72%, 77%, 100% { opacity: .08; transform: translateX(0); }
  32% { opacity: .36; transform: translateX(7px); }
  33% { opacity: .14; transform: translateX(-5px); }
  74% { opacity: .3; transform: translateX(-6px); }
  75% { opacity: .12; transform: translateX(4px); }
}

@keyframes geometry-breathe {
  0%, 100% { opacity: .48; }
  50% { opacity: 1; }
}

@keyframes relic-breathe {
  0%, 100% { opacity: .52; transform: translateY(0) scale(.99); }
  50% { opacity: 1; transform: translateY(-1px) scale(1); }
}

@keyframes oculus-breathe {
  0%, 100% { box-shadow: 0 0 0 3px rgba(146,119,173,.12), 0 0 8px rgba(146,119,173,.18); }
  50% { box-shadow: 0 0 0 5px rgba(146,119,173,.18), 0 0 20px rgba(146,119,173,.55); }
}

@keyframes void-stir {
  0%, 100% {
    opacity: .64;
    transform: scale(.94);
    filter: brightness(.7) saturate(.76);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
    filter: brightness(1.12) saturate(1.2);
  }
}

@keyframes pupil-breathe {
  0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(.86); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .transmission-state i,
  .signal-hero::before,
  .signal-hero::after,
  .entry-panel::before,
  .relic-signal,
  .entry-marks,
  .entry-marks::before,
  .protocol-fragment,
  .entry-angles,
  .home-body::before,
  .relic-mask,
  .relic-mask-fracture::before,
  .relic-mask-fracture::after,
  .glass-main,
  .glass-branches,
  .haze-strike,
  .crt-mask,
  .crt-mask::before,
  .crt-mask::after,
  .destroyed-monitor,
  .destroyed-monitor::before,
  .pupil-anchor::before,
  .signal-chip,
  .signal-chip i,
  .signal-chip-alt::before,
  .signal-chips .audio-control,
  .signal-chips .audio-control::after,
  .signal-form button,
  .top-film-strip,
  .brand-film-swoosh,
  .brand-main,
  .brand-letter,
  .signal-copy h1,
  .signal-copy h1 span,
  .signal-copy::after,
  .entry-panel::after,
  .archive-fragment::before,
  .archive-fragment::after { animation: none; }
}

.entry-panel h2 {
  margin: 0 0 9px;
  font: 900 clamp(30px, 3.5vw, 47px)/.92 var(--display);
  letter-spacing: -.035em;
  color: #fff6e7;
  -webkit-text-stroke: 1px rgba(7,5,10,.82);
  paint-order: stroke fill;
  filter: brightness(1.8);
  text-shadow: 0 3px 0 rgba(0,0,0,.98), 0 0 6px rgba(255,255,255,.92), 0 0 18px rgba(204,255,122,.38), 0 0 35px rgba(202,129,255,.48);
}

.entry-panel > p:not(.file-number):not(.privacy-note) {
  margin: 0;
  color: #c8c0c7;
  font-size: 18px;
}

.protocol-fragment {
  width: fit-content;
  max-width: 100%;
  margin-top: 9px;
  padding: 5px 0;
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 0;
  border-bottom: 0;
  color: var(--violet);
  animation: relic-breathe 12s ease-in-out infinite 1.6s;
}

.protocol-fragment i {
  width: 4px;
  height: 4px;
  display: block;
  background: var(--bone);
  transform: rotate(45deg);
}

.protocol-fragment::before,
.protocol-fragment::after {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border: 1px solid var(--violet);
  transform: rotate(45deg);
}

.protocol-fragment::after { margin-left: 2px; }

.signal-form { margin-top: 19px; }

.signal-form label {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.formkit-field { min-width: 0; }

.formkit-alert {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  color: #ff8f87;
  font-size: 13px;
}

.formkit-alert:empty { display: none; }

.signal-form input,
.signal-form button {
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 0;
}

.signal-form input {
  min-width: 0;
  padding: 0 14px;
  border-color: rgba(255,247,235,.7);
  background: rgba(2,2,4,.96);
  color: #fff6e7;
  box-shadow: inset 0 0 18px rgba(163,66,237,.13), 0 0 14px rgba(126,53,192,.15);
  font-size: 16px;
}

.signal-form input::placeholder { color: #777078; }

.signal-form button {
  margin-left: -1px;
  padding: 0 16px;
  cursor: pointer;
  border-color: rgba(211,105,255,.72);
  background: rgba(19,8,29,.74);
  color: #e9b8ff;
  box-shadow: inset 0 0 9px rgba(181,72,255,.18), 0 0 8px rgba(177,67,246,.28);
  font: 800 8px/1 var(--mono);
  letter-spacing: .09em;
  text-shadow: 0 0 6px rgba(210,101,255,.95);
  animation: chip-glow 6s ease-in-out -2.8s infinite;
}

.signal-form button:hover,
.signal-form button:focus-visible {
  border-color: #efb3ff;
  background: rgba(62,20,88,.82);
  color: #fff5ff;
}

.signal-form button > span {
  display: grid;
  min-height: 50px;
  place-items: center;
}

.form-status {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--violet);
  font-size: 13px;
}

.privacy-note {
  margin: 9px 0 0;
  color: var(--muted);
  letter-spacing: .09em;
  line-height: 1.5;
}

.privacy-note a {
  color: inherit;
  text-underline-offset: 2px;
}

.archive-fragment {
  position: relative;
  isolation: auto;
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto 19px;
  padding: 10px 116px 10px 0;
  display: flex;
  gap: 18px;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(2,2,3,.92), rgba(2,2,3,.24) 72%, transparent 100%);
  box-shadow: inset 0 0 22px rgba(255,255,255,.005), inset 0 0 0 1px rgba(255,255,255,.018);
}

.brand {
  align-items: flex-end;
}

.brand-main {
  color: #e01834;
  filter: none;
  text-shadow:
    0 2px 0 rgba(0,0,0,.96),
    0 0 3px rgba(255,255,255,.12),
    0 0 10px rgba(176,0,34,.28),
    0 0 18px rgba(255,44,78,.22);
}

.brand-main::before {
  opacity: .48;
  filter: saturate(.9) brightness(.9) blur(.1px);
}

.brand-main::after {
  opacity: .22;
}

.archive-fragment::before,
.archive-fragment::after {
  content: "";
  position: absolute;
  z-index: 101;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 3%, rgba(124,0,18,.45) 4% 10%, #a4001e 11% 22%, #ff1239 23% 31%, #ffd0d8 32% 34%, #ff1239 35% 43%, transparent 44% 50%, #8c0019 51% 64%, #ff173d 65% 76%, rgba(255,68,88,.8) 77% 83%, transparent 84% 100%);
  box-shadow:
    0 0 4px rgba(255,220,225,.5),
    0 0 12px rgba(255,22,61,.55),
    0 0 28px rgba(219,0,36,.48),
    0 9px 0 -2px rgba(188,0,29,.22),
    0 -8px 0 -2px rgba(255,47,70,.14),
    0 18px 16px -8px rgba(130,0,25,.32),
    0 -17px 16px -9px rgba(130,0,25,.22);
  filter: saturate(1.2) brightness(.9) blur(.45px);
  animation: footer-blood-sweep 48s linear infinite;
}

.archive-fragment::before {
  top: -8px;
  left: -9%;
  width: 73%;
  height: 7px;
}

.archive-fragment::after {
  right: -7%;
  bottom: -11px;
  width: 57%;
  height: 5px;
  opacity: .58;
  filter: saturate(1.05) brightness(.75) blur(.8px);
  animation: footer-blood-return 57s linear -31s infinite;
}

.archive-fragment > * { position: relative; z-index: 1; }

.archive-fragment p,
.archive-fragment blockquote { margin: 0; }

.archive-fragment > p,
.archive-fragment > span { white-space: nowrap; }

.archive-fragment blockquote {
  flex: 1;
  max-width: none;
  font-size: clamp(15px, 1.55vw, 20px);
  line-height: 1.3;
}

.archive-fragment > span { color: var(--muted); }

.archive-routing {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto 18px;
  padding: 14px 18px 16px;
  border: 1px solid rgba(146,119,173,.18);
  background:
    radial-gradient(ellipse 120% 140% at 50% 0%, rgba(146,119,173,.06), transparent 52%),
    linear-gradient(180deg, rgba(6,6,9,.94), rgba(3,3,4,.78));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 18px rgba(0,0,0,.18);
}

.route-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.route-kicker {
  margin: 0 0 5px;
  color: var(--violet);
  font: 700 9px/1.2 var(--body);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.route-header h2 {
  margin: 0;
  color: var(--bone);
  font: 700 clamp(16px, 1.8vw, 22px)/1.1 var(--body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.route-status {
  color: var(--muted);
  font: 700 9px/1.2 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.route-copy {
  max-width: 72ch;
  margin: 11px 0 0;
  color: var(--bone-soft);
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 1.5;
}

.route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.route-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 118px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(146,119,173,.2);
  background: rgba(10,10,13,.58);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.route-card span {
  color: var(--violet);
  font: 700 9px/1.2 var(--body);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.route-card strong {
  color: var(--bone);
  font: 700 20px/1.08 var(--body);
  letter-spacing: .03em;
}

.route-card small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.route-card:hover,
.route-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(236,228,213,.34);
  background: rgba(13,13,17,.82);
  box-shadow: 0 0 0 1px rgba(146,119,173,.08), 0 0 20px rgba(0,0,0,.18);
  outline: none;
}

.site-footer {
  padding-block: 16px 22px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.error-body { display: grid; place-items: center; }

.error-page {
  width: min(680px, calc(100% - 36px));
  padding: 60px 0;
}

.error-page h1 {
  margin: 24px 0;
  font: 900 clamp(48px, 10vw, 92px)/.88 var(--display);
  letter-spacing: -.05em;
}

.error-page > p:not(.eyebrow) { color: var(--muted); font-size: 20px; }

.return-link {
  display: inline-block;
  margin-top: 24px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--violet);
  font: 800 10px/1 var(--body);
  letter-spacing: .14em;
  text-decoration: none;
}

.vault-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* Safe Arcopolis pass: keep only the lightweight text effects. */
.top-film-strip,
.destroyed-monitor,
.dead-tech-glass,
.haze-lightning,
.relic-mask,
.crt-mask {
  display: none !important;
}

.signal-copy::before,
.signal-copy::after {
  content: "";
  display: block !important;
}

.signal-copy::before {
  position: absolute;
  z-index: 0;
  inset: 8% -4% 14%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 70% at 42% 45%, rgba(3,3,4,.84), rgba(14,15,17,.2) 58%, transparent 82%),
    radial-gradient(ellipse 52% 42% at 58% 54%, rgba(178,58,81,.09), transparent 76%);
  filter: blur(12px);
  opacity: .92;
}

.signal-copy::after {
  position: absolute;
  z-index: 2;
  inset: -9% -7%;
  pointer-events: none;
  opacity: .28;
  background:
    radial-gradient(ellipse 62% 54% at 34% 42%, rgba(255,255,255,.1), transparent 71%),
    radial-gradient(ellipse 54% 45% at 74% 62%, rgba(165,171,180,.06), transparent 74%),
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(255,255,255,.024) 17px 19px, transparent 20px 34px),
    linear-gradient(90deg, rgba(216,24,52,.06), transparent 16% 84%, rgba(216,24,52,.06));
  filter: blur(10px);
  mix-blend-mode: normal;
  animation: panel-haze 15s ease-in-out infinite alternate;
}

.signal-copy h1 {
  text-shadow:
    0 3px 0 rgba(0,0,0,.98),
    0 0 4px rgba(255,255,255,.26),
    0 0 12px rgba(168,159,176,.1);
  filter: none;
  animation: hero-signal-shimmer 9.5s ease-in-out infinite;
}

.signal-copy h1 span {
  color: #7c7480;
  text-shadow:
    0 3px 0 rgba(0,0,0,.98),
    0 0 5px rgba(255,255,255,.09);
  animation: hero-signal-shimmer 9.5s ease-in-out infinite reverse;
}

.brand-main {
  color: #e01834;
  -webkit-text-stroke: 1px rgba(7, 4, 10, .88);
  text-shadow:
    0 2px 0 rgba(0,0,0,.98),
    0 0 3px rgba(255,255,255,.12),
    0 0 10px rgba(176,0,34,.28),
    0 0 18px rgba(255,44,78,.22);
  filter: none;
  animation: arcopolis-neon-flicker 11.8s steps(1, end) infinite;
}

.brand-letter {
  animation: arcopolis-letter-flicker 9.4s steps(1, end) infinite;
}

.brand-letter:nth-child(3) { animation-delay: -.5s; }
.brand-letter:nth-child(4) { animation-delay: -2s; }
.brand-letter:nth-child(5) { animation-delay: -4.7s; }
.brand-letter:nth-child(6) { animation-delay: -1.4s; }
.brand-letter:nth-child(7) { animation-delay: -5.8s; }
.brand-letter:nth-child(8) { animation-delay: -2.8s; }
.brand-letter:nth-child(9) { animation-delay: -6.2s; }
.brand-letter:nth-child(10) { animation-delay: -3.3s; }
.brand-letter:nth-child(11) { animation-delay: -7.1s; }

.brand-glyph {
  color: rgba(210,196,228,.74);
  text-shadow: 0 0 4px rgba(255,255,255,.12);
}

@keyframes hero-signal-shimmer {
  0%, 100% {
    opacity: .96;
    transform: translateY(0);
    text-shadow:
      0 3px 0 rgba(0,0,0,.98),
      0 0 4px rgba(255,255,255,.22),
      0 0 12px rgba(168,159,176,.08);
  }
  48% {
    opacity: 1;
    transform: translateY(-.5px);
    text-shadow:
      0 3px 0 rgba(0,0,0,.98),
      0 0 6px rgba(255,255,255,.3),
      0 0 14px rgba(193,187,203,.12);
  }
  56% {
    opacity: .92;
    transform: translateY(.4px);
    text-shadow:
      0 3px 0 rgba(0,0,0,.98),
      0 0 3px rgba(255,255,255,.16),
      0 0 9px rgba(168,159,176,.06);
  }
}

@keyframes arcopolis-neon-flicker {
  0%, 8%, 100% {
    opacity: 1;
    text-shadow:
      0 2px 0 rgba(0,0,0,.98),
      0 0 3px rgba(255,255,255,.22),
      0 0 10px rgba(146,119,173,.12);
  }
  9% {
    opacity: .82;
  }
  10% {
    opacity: 1;
  }
  42% {
    opacity: .9;
  }
  43% {
    opacity: 1;
  }
  71% {
    opacity: .78;
  }
  72% {
    opacity: 1;
  }
}

@keyframes arcopolis-letter-flicker {
  0%, 11%, 100% {
    opacity: 1;
    text-shadow:
      0 2px 0 rgba(0,0,0,.98),
      0 0 3px rgba(255,255,255,.18);
  }
  12% {
    opacity: .72;
  }
  13% {
    opacity: 1;
  }
  57% {
    opacity: .84;
  }
  58% {
    opacity: 1;
  }
  83% {
    opacity: .78;
  }
  84% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-main,
  .brand-letter,
  .signal-copy h1,
  .signal-copy h1 span {
    animation: none !important;
  }
}

.vault-panel {
  width: min(520px, 100%);
  padding: 0 28px 30px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, var(--panel), var(--black));
}

.vault-panel h1 {
  margin: 26px 0 18px;
  font: 900 clamp(34px, 8vw, 54px)/.9 var(--display);
  letter-spacing: -.04em;
}

.vault-panel > p:not(.panel-label):not(.form-status) {
  color: var(--muted);
  font-size: 17px;
}

.vault-form { margin-top: 28px; }

.vault-form label {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font: 700 9px/1.3 var(--body);
  letter-spacing: .16em;
}

.vault-form input,
.vault-form button {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 0;
}

.vault-form input {
  padding: 0 14px;
  background: var(--black);
  color: var(--bone);
}

.vault-form button {
  margin-top: 10px;
  cursor: pointer;
  background: var(--bone);
  color: var(--black);
  font: 800 9px/1 var(--body);
  letter-spacing: .14em;
}

.vault-form button:hover { background: var(--violet); }

@media (max-width: 840px) {
  .signal-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .entry-panel { max-width: 620px; }

  .archive-routing { width: min(100% - 36px, var(--max)); }
  .route-grid { grid-template-columns: 1fr; }
  .route-card { min-height: 0; }

  .archive-fragment { flex-wrap: wrap; gap: 10px 16px; }
}

@media (max-width: 520px) {
  .site-header { min-height: 86px; padding-inline: 18px; }
  .brand-main { font-size: 23px; }
  .brand-sub { font-size: 7px; }
  .transmission-state { font-size: 8px; }

  .signal-hero { padding: 58px 18px 58px; }
  .signal-copy h1 { font-size: clamp(39px, 13vw, 58px); }

  .brand-main { padding-left: .3em; font-size: 23px; letter-spacing: .22em; }
  .brand-glyph { margin-inline: .08em; }
  .transmission-state { display: none; }
  .audio-control { font-size: 7px; }

  .entry-panel { padding-inline: 0; }
  .panel-label { margin-inline: 0; }

  .relic-signal { grid-template-columns: 54px 1fr; gap: 8px; }
  .relic-signal svg { width: 54px; }
  .relic-signal span:last-child { display: none; }

  .form-row { grid-template-columns: 1fr; gap: 10px; }
  .signal-form button { width: 100%; margin-left: 0; }

  .archive-fragment {
    width: calc(100% - 36px);
    padding: 10px 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "file"
      "quote"
      "status";
    gap: 9px 8px;
    align-items: start;
  }

  .archive-routing {
    width: calc(100% - 36px);
    padding: 12px 12px 13px;
  }
  .route-header { align-items: flex-start; flex-direction: column; }
  .route-grid { grid-template-columns: 1fr; margin-top: 12px; }
  .route-card { min-height: 0; padding: 12px; }
  .route-card strong { font-size: 18px; }
  .route-card small { font-size: 12px; }
  .archive-fragment > p { grid-area: file; white-space: normal; font-size: 8px; }
  .archive-fragment blockquote { grid-area: quote; }
  .archive-fragment > span { grid-area: status; }
  .site-footer { padding-inline: 18px; flex-direction: column; }
  .vault-body { padding: 18px; }
  .vault-panel { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* Unified light layout: use the stable mobile composition at every width. */
.signal-hero {
  width: min(720px, calc(100% - 36px));
  min-height: auto;
  margin-inline: auto;
  padding: 54px 0 58px;
  grid-template-columns: minmax(0, 1fr);
  gap: 42px;
}

.signal-copy,
.entry-stack,
.entry-panel {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.signal-copy h1 {
  font-size: clamp(42px, 8vw, 72px);
}

.entry-panel {
  padding-inline: 0;
}

.panel-label {
  margin-inline: 0;
}

.form-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.signal-form button {
  width: 100%;
  margin-left: 0;
}

.archive-fragment {
  width: min(720px, calc(100% - 36px));
  flex-wrap: wrap;
  gap: 10px 16px;
}

@media (min-width: 841px) {
  .home-body main {
    display: block;
  }
}

/* Final mobile polish: preserve the stable stack while tightening rhythm. */
@media (max-width: 520px) {
  .site-header {
    min-height: 104px;
    padding-inline: 16px;
  }

  .brand-main {
    width: 100%;
    font-size: clamp(31px, 10.8vw, 43px);
    letter-spacing: .16em;
  }

  .brand-sub { margin-top: 5px; font-size: 7px; }
  .transmission-state { top: 14px; right: 16px; font-size: 7px; }

  .signal-hero {
    width: min(100% - 32px, 720px);
    padding: 38px 0 42px;
    gap: 30px;
  }

  .signal-copy h1 {
    margin: 14px 0;
    font-size: clamp(38px, 11.4vw, 54px);
    line-height: .89;
  }

  .signal-copy .lede { max-width: 34ch; margin-top: 18px; }

  .signal-chips { gap: 8px; margin-top: 13px; }
  .signal-chip,
  .signal-chips .audio-control { font-size: 9px; letter-spacing: .12em; }

  .entry-stack {
    padding: 12px 0 12px 14px;
  }

  .entry-panel h2 {
    margin-bottom: 8px;
    font-size: clamp(29px, 8.6vw, 42px);
  }

  .entry-panel > p:not(.file-number):not(.privacy-note) {
    max-width: 34ch;
    font-size: 16px;
    line-height: 1.38;
  }

  .signal-form { margin-top: 15px; }
  .signal-form input,
  .signal-form button { min-height: 48px; }

  .civic-terminal {
    width: min(100% - 32px, 720px);
    margin-bottom: 18px;
    padding: 14px 12px 12px;
  }

  .terminal-topline { align-items: flex-start; }
  .terminal-topline h2 { font-size: 13px; }
  .terminal-status { font-size: 8px; }
  .terminal-screen { height: 160px; padding: 11px 10px; font-size: 10px; }
  .terminal-feed { height: 98px; }
  .terminal-actions { align-items: stretch; flex-wrap: wrap; gap: 8px; }
  .terminal-button { flex: 1 1 145px; min-height: 38px; }
  .terminal-note { flex-basis: 100%; margin: 3px 0 0; text-align: left; }
}

/* Android/Pixel guardrail: keep the terminal a styled, fixed-width signal panel.
   This final mobile rule intentionally comes last so browser defaults cannot
   replace the phosphor surface or terminal controls. */
@media (max-width: 520px) {
  .civic-terminal,
  .civic-terminal * {
    box-sizing: border-box;
    font-family: var(--mono);
  }

  .civic-terminal {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px;
    color: #b9d8aa;
    background:
      repeating-linear-gradient(0deg, rgba(132,190,113,.045) 0 1px, transparent 1px 4px),
      linear-gradient(180deg, rgba(7,17,9,.98), rgba(2,7,4,.99));
    border: 1px solid rgba(142,190,123,.45);
  }

  .terminal-topline { display: flex; width: 100%; gap: 8px; }
  .terminal-topline h2 { font-family: var(--body); font-size: 13px; }
  .terminal-status { flex: 0 0 auto; font-size: 8px; color: #9ac681; }
  .terminal-screen {
    display: block;
    width: 100%;
    height: 160px;
    min-height: 0;
    margin: 10px 0 9px;
    padding: 10px;
    color: #b9d8aa;
    background: rgba(0,4,1,.72);
    border: 1px solid rgba(142,190,123,.3);
    font-size: 10px;
    line-height: 1.45;
  }
  .terminal-feed { height: 100px; color: #b9d8aa; font-size: 10px; line-height: 1.45; }
  .terminal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
    align-items: stretch;
  }
  .terminal-button,
  .terminal-button:visited {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    margin: 0;
    padding: 8px 6px;
    appearance: none;
    -webkit-appearance: none;
    color: var(--bone);
    background: rgba(20,10,27,.62);
    border: 1px solid rgba(146,119,173,.72);
    border-radius: 0;
    font: 700 9px/1.1 var(--mono);
    letter-spacing: .08em;
    text-align: center;
    text-decoration: none;
  }
  .terminal-button-quiet,
  .terminal-button-quiet:visited { color: var(--violet); background: rgba(10,10,14,.7); }
  .terminal-button:focus,
  .terminal-button:focus-visible,
  .terminal-button:active,
  .terminal-button:hover,
  .terminal-audio-control:focus,
  .terminal-audio-control:focus-visible,
  .terminal-audio-control:active,
  .terminal-audio-control:hover {
    color: var(--violet) !important;
    background: rgba(20,10,27,.72) !important;
    border-color: var(--violet) !important;
    outline: 1px solid rgba(146,119,173,.42);
    outline-offset: 1px;
  }
  .terminal-note { display: none; }
}

/* Compact composition: keep the whole signal sequence in one tight read. */
.signal-hero {
  padding-top: 28px;
  padding-bottom: 30px;
  gap: 24px;
}

.signal-copy h1 { margin-top: 10px; margin-bottom: 10px; }
.signal-copy .lede { margin-top: 12px; }
.signal-copy .lede {
  height: 62px;
  line-height: 1.35;
  font-size: 17px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.copy-signal-out { animation: copy-signal-out 520ms ease-in both; }
.copy-signal-in { animation: copy-signal-in 700ms cubic-bezier(.2,.7,.2,1) both; }
.copy-relic-memory { color: var(--relic) !important; text-shadow: 0 0 8px rgba(232,29,79,.36); }
.signal-chips { margin-top: 10px; }
.relic-signal { margin-top: 10px; padding-top: 6px; }
.civic-terminal { margin-top: 0; padding: 12px 14px 10px; }
.terminal-screen { margin: 10px 0 9px; min-height: 108px; padding: 10px 11px; }
.terminal-feed p { margin-bottom: 3px; }
.entry-stack { padding-top: 8px; padding-bottom: 8px; }
.entry-marks { margin-bottom: 5px; }
.panel-label { margin-bottom: 10px; padding-bottom: 6px; }
.file-number { margin-bottom: 9px; }
.entry-panel h2 { margin-bottom: 6px; }
.protocol-fragment { margin-top: 9px; padding: 5px 0; }
.signal-form { margin-top: 12px; }
.privacy-note { margin-top: 10px; }
.entry-angles { margin-top: 5px; }
.archive-routing { margin-top: 2px; }
.archive-fragment blockquote {
  height: 42px;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.terminal-actions { min-height: 34px; }

/* Shared signal grammar for the compact relic markers. */
.relic-signal,
.entry-marks,
.protocol-fragment,
.entry-angles {
  color: var(--violet);
  font-size: 8px;
  letter-spacing: .14em;
}

.relic-signal svg,
.entry-marks svg,
.entry-angles svg {
  opacity: .84;
}

.relic-signal span,
.entry-marks span,
.protocol-fragment span {
  white-space: nowrap;
}

.entry-marks,
.protocol-fragment { align-self: flex-start; }

/* Performance pass: keep the atmosphere, but move the recurring work onto
   opacity/transform/text-shadow instead of repaint-heavy full-screen filters. */
.home-body::before { filter: none; }
.crt-mask { backdrop-filter: none; transform: none; }
.crt-mask::before { filter: none; }
.haze-strike { filter: none; }
.signal-copy::before,
.signal-copy::after { filter: none; }
.relic-mask-bloom { filter: none; }
.glass-main,
.glass-branches { filter: none; }

.signal-copy h1 {
  filter: none;
  animation: title-signal-pulse 12s ease-in-out infinite;
}
.brand-main { filter: none; animation: wordmark-signal-pulse 15.4s ease-in-out infinite; }
.brand-letter { animation-name: letter-signal-pulse; }

@keyframes title-signal-pulse {
  0%, 100% { opacity: .94; text-shadow: 0 4px 0 rgba(0,0,0,.98), 0 0 3px rgba(255,255,255,.82), 0 0 7px rgba(255,255,255,.12); }
  50% { opacity: 1; text-shadow: 0 4px 0 rgba(0,0,0,.98), 0 0 5px rgba(255,255,255,.96), 0 0 11px rgba(255,255,255,.2); }
}
@keyframes wordmark-signal-pulse {
  0%, 100% { opacity: .86; text-shadow: 0 2px 0 rgba(0,0,0,.96), 0 0 4px rgba(255,255,255,.14), 0 0 12px rgba(176,0,34,.3); }
  50% { opacity: 1; text-shadow: 0 2px 0 rgba(0,0,0,.96), 0 0 6px rgba(255,255,255,.34), 0 0 18px rgba(255,44,78,.42); }
}
@keyframes letter-signal-pulse {
  0%, 8%, 13%, 28%, 36%, 58%, 67%, 84%, 100% { opacity: 1; }
  9%, 29%, 85% { opacity: .78; }
  12%, 59% { opacity: .5; }
  66% { opacity: .3; }
}

@media (max-width: 520px) {
  .crt-mask { opacity: .3; }
  .destroyed-monitor { opacity: .24; }
  .relic-mask-bloom { opacity: .34; }
  .signal-copy h1 { animation-duration: 14s; }
  .brand-main { animation-duration: 17s; }
}

/* Keep live-copy controls and rails from covering readable signal rows. */
.signal-copy, .signal-copy .lede, .signal-chips, .signal-chip, .archive-fragment, .archive-fragment blockquote { position: relative; z-index: 6; }
.top-film-strip { z-index: 4; }
.bottom-film-strip, .footer-blood-sweep, .footer-blood-return { z-index: 2; pointer-events: none; }
.signal-chip { isolation: isolate; }
.archive-fragment { overflow: visible; }

/* Dock the live signal control onto the terminal's upper rail. */
.signal-copy .signal-chips { position: relative; z-index: 8; transform: translateY(14px); margin-bottom: -14px; }
.signal-copy .signal-chips .signal-chip { position: relative; z-index: 9; }
@media (max-width: 520px) {
  .signal-copy .signal-chips { transform: translateY(12px); margin-bottom: -12px; }
}