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

  :root {
    --bg: #f4f4f1;
    --white: #f8f8f5;
    --ink: #101010;
    --muted: #777;
    --line: rgba(0,0,0,.12);
    --red: #e32222;
    --glass: rgba(255,255,255,.46);
    --shadow: 0 30px 90px rgba(0,0,0,.16);
  }


html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

body {
  letter-spacing: .34em;
  cursor: crosshair;
}

button, a { font-family: inherit; }

/* CINEMATIC INTRO */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.95), rgba(244,244,241,.95) 38%, #e8e8e5 100%);
  transition: opacity 1s ease, visibility 1s ease;
}

.intro.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-inner { text-align: center; position: relative; }

.intro-emblem {
  width: 190px;
  height: 190px;
  margin: 0 auto 34px;
  position: relative;
  filter: drop-shadow(0 25px 35px rgba(0,0,0,.15));
  animation: introFloat 3s ease-in-out infinite;
}

.intro-emblem::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 12px solid rgba(255,255,255,.96);
  border-radius: 50%;
  mask: conic-gradient(#000 0 78deg, transparent 78deg 92deg, #000 92deg 180deg, transparent 180deg 195deg, #000 195deg 348deg, transparent 348deg 360deg);
  box-shadow: inset 0 0 28px rgba(0,0,0,.12), 0 0 20px rgba(0,0,0,.08);
  animation: rotateRing 4s linear infinite;
}

.intro-emblem::after {
  content: "CM";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 900 64px Georgia, serif;
  letter-spacing: -.18em;
  color: white;
  text-shadow: 0 13px 22px rgba(0,0,0,.16), 0 -1px 0 #fff;
  transform: skewX(-8deg);
}

.intro-title {
  font-size: clamp(26px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: .58em;
  line-height: 1.3;
  opacity: 0;
  animation: revealText .9s ease .6s forwards;
}

.intro-sub {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: .55em;
  color: #666;
  opacity: 0;
  animation: revealText .9s ease 1.2s forwards;
}

.intro-sub span { color: var(--red); }

.intro-load {
  width: 360px;
  max-width: 70vw;
  height: 1px;
  background: rgba(0,0,0,.18);
  margin: 40px auto 0;
  position: relative;
  overflow: hidden;
}

.intro-load::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--red);
  animation: loadBar 3.4s cubic-bezier(.19,1,.22,1) forwards;
}

.intro-percent {
  margin-top: 16px;
  font-size: 10px;
  color: var(--red);
  letter-spacing: .45em;
}

/* APP SHELL */
.site {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 180px 1fr;
  background:
    radial-gradient(circle at var(--mx, 55%) var(--my, 45%), rgba(255,255,255,.95), transparent 30%),
    radial-gradient(circle at 50% 52%, rgba(0,0,0,.045), transparent 50%),
    linear-gradient(120deg, #fbfbf8, #ececea);
  transition: background-position .2s ease;
}

.noise, .grid-bg, .scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.noise {
  opacity: .09;
  background-image: radial-gradient(rgba(0,0,0,.4) .6px, transparent .6px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

.grid-bg {
  opacity: .22;
  background:
    linear-gradient(rgba(0,0,0,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.055) 1px, transparent 1px);
  background-size: 90px 90px;
  transform: perspective(900px) rotateX(58deg) translateY(260px) scale(1.4);
  transform-origin: center bottom;
  animation: gridDrift 18s linear infinite;
}

.scanline {
  opacity: .12;
  background: linear-gradient(180deg, transparent, rgba(227,34,34,.23), transparent);
  height: 160px;
  top: -160px;
  animation: scanMove 8s linear infinite;
}

.sidebar {
  position: relative;
  border-right: 1px solid var(--line);
  padding: 38px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 20;
  background: rgba(245,245,242,.58);
  backdrop-filter: blur(14px);
}

.mini-logo {
  width: 58px;
  height: 58px;
  border: 2px solid rgba(0,0,0,.4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 900 22px Georgia, serif;
  letter-spacing: -.16em;
  color: rgba(0,0,0,.66);
  box-shadow: inset 0 0 14px rgba(255,255,255,.92), 0 10px 24px rgba(0,0,0,.08);
  transform: skewX(-7deg);
  transition: transform .5s ease;
}

.mini-logo:hover { transform: skewX(-7deg) rotate(12deg) scale(1.08); }

.nav {
  display: grid;
  gap: 25px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .45em;
}

.nav a {
  position: relative;
  text-decoration: none;
  color: #111;
  cursor: pointer;
  transition: color .3s ease, transform .3s ease;
}

.nav a:hover { color: var(--red); transform: translateX(5px); }
.nav a.active { color: var(--red); }

.nav a.active::after {
  content: "";
  position: absolute;
  right: -56px;
  top: 50%;
  width: 22px;
  height: 2px;
  background: var(--red);
  box-shadow: 0 0 14px rgba(227,34,34,.42);
}

.socials {
  display: flex;
  gap: 17px;
  color: #777;
  font-size: 14px;
  letter-spacing: 0;
  margin-bottom: 64px;
}

.copyright {
  font-size: 8px;
  letter-spacing: .36em;
  color: #777;
  position: absolute;
  left: 30px;
  bottom: 28px;
  white-space: nowrap;
}

.main {
  position: relative;
  overflow: hidden;
  min-width: 0;
  z-index: 2;
}

.hamburger {
  position: absolute;
  right: 34px;
  top: 44px;
  width: 34px;
  height: 22px;
  z-index: 30;
}

.hamburger span {
  display: block;
  height: 1px;
  background: #111;
  margin-bottom: 8px;
  margin-left: auto;
  transition: width .3s ease;
}
.hamburger:hover span { width: 34px !important; }
.hamburger span:nth-child(1){ width: 34px; }
.hamburger span:nth-child(2){ width: 24px; }
.hamburger span:nth-child(3){ width: 16px; }

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .75s ease, transform .75s ease, filter .75s ease;
  transform: translateY(18px) scale(.992);
  filter: blur(8px);
}

.screen.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* HOME */
.home {
  display: grid;
  grid-template-columns: 1fr 360px;
  align-items: center;
  padding: 0 88px;
}

.hero-wrap { position: relative; display: grid; place-items: center; }

.hero-mark {
  position: relative;
  width: min(590px, 54vw);
  height: min(590px, 54vw);
  filter: drop-shadow(0 35px 50px rgba(0,0,0,.14));
  transform-style: preserve-3d;
  transition: transform .15s ease-out;
}

.orbit {
  position: absolute;
  inset: 0;
  border: 26px solid rgba(255,255,255,.88);
  border-radius: 50%;
  box-shadow: inset 0 0 45px rgba(0,0,0,.12), 0 0 30px rgba(0,0,0,.06);
  mask: conic-gradient(#000 0 78deg, transparent 78deg 91deg, #000 91deg 178deg, transparent 178deg 191deg, #000 191deg 348deg, transparent 348deg 360deg);
  animation: rotateRing 20s linear infinite;
}

.globe {
  position: absolute;
  inset: 70px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(255,255,255,.95), rgba(225,225,222,.76) 45%, rgba(170,170,168,.45)),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(0,0,0,.04) 35px),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(0,0,0,.04) 35px);
  box-shadow: inset 0 0 55px rgba(0,0,0,.13);
  opacity: .78;
  overflow: hidden;
}

.globe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
  animation: globeSweep 5s ease-in-out infinite;
}

.continent {
  position: absolute;
  border-radius: 45% 55% 55% 45%;
  background: rgba(0,0,0,.12);
  filter: blur(.4px);
  animation: continentDrift 9s linear infinite;
}
.c1 { width: 130px; height: 72px; left: 150px; top: 90px; transform: rotate(-10deg); }
.c2 { width: 92px; height: 130px; left: 245px; top: 165px; transform: rotate(18deg); }
.c3 { width: 100px; height: 62px; left: 105px; top: 220px; transform: rotate(12deg); }

.letters {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  font-size: clamp(120px, 12vw, 176px);
  font-weight: 900;
  letter-spacing: -.18em;
  color: white;
  text-shadow: 0 18px 35px rgba(0,0,0,.18), 0 -2px 0 rgba(255,255,255,.8);
  transform: skewX(-9deg) translateZ(80px);
}

.speedlines {
  position: absolute;
  left: -44px;
  right: -80px;
  top: 46%;
  height: 130px;
  background: repeating-linear-gradient(0deg, transparent 0 14px, rgba(0,0,0,.045) 15px, transparent 16px 28px);
  filter: blur(.4px);
  opacity: .6;
  transform: skewX(-16deg);
  animation: speedPulse 3.2s ease-in-out infinite;
}

.red-sweep {
  position: absolute;
  width: 160px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  top: 50%;
  left: -200px;
  box-shadow: 0 0 20px rgba(227,34,34,.7);
  animation: redSweep 4.2s ease-in-out infinite;
}

.rings {
     position: absolute;
     inset: -45px;
     border-radius: 50%;
     border: 1px dotted rgba(0,0,0,.13);
     animation: pulseRing 4s ease-in-out infinite;
   }

   .rings::after {
     content: "";
     position: absolute;
     inset: 70px;
     border-radius: 50%;
     border: 1px dotted rgba(0,0,0,.12);
   }

   .loading {
     display: flex;
     align-items: center;
     gap: 24px;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .55em;
     z-index: 3;
   }

   .bar {
     width: 160px;
     height: 1px;
     background: rgba(0,0,0,.35);
     position: relative;
   }

   .bar::before {
     content: "";
     position: absolute;
     left: 0;
     top: -1px;
     width: 68%;
     height: 2px;
     background: var(--red);
     animation: barPulse 2.2s ease-in-out infinite;
   }

   .percent { color: var(--red); letter-spacing: .25em; }

   .tagline {
     position: absolute;
     right: 52px;
     bottom: 58px;
     text-align: right;
     font-size: 11px;
     line-height: 2;
     letter-spacing: .55em;
     font-weight: 600;
   }

   .tagline span { color: var(--red); }

   .hero-title {
     position: absolute;
     left: 50%;
     bottom: 13vh;
     transform: translateX(-50%);
     text-align: center;
     opacity: .92;
   }

   .hero-title h1 {
     font-size: clamp(28px, 4vw, 58px);
     font-weight: 500;
     letter-spacing: .54em;
     margin-bottom: 12px;
   }

   .hero-title p {
     font-size: 11px;
     color: #555;
     letter-spacing: .48em;
   }

   .hero-title span { color: var(--red); }

   /* PORTFOLIO */
   .portfolio, .archive {
     padding: 96px 70px 54px 88px;
     overflow-y: auto;
   }
   .portfolio::-webkit-scrollbar, .archive::-webkit-scrollbar { width: 0; }

   .section-title {
     font-size: 28px;
     font-weight: 500;
     letter-spacing: .58em;
     margin-bottom: 26px;
   }

   .section-title::after {
     content: "";
     display: inline-block;
     width: 34px;
     height: 2px;
     background: var(--red);
     margin-left: 26px;
     vertical-align: middle;
   }

   .portfolio-copy {
     font-size: 11px;
     color: #333;
     line-height: 1.9;
     max-width: 520px;
     margin-bottom: 42px;
     letter-spacing: .42em;
   }

   .filters {
     position: absolute;
     right: 78px;
     top: 152px;
     display: flex;
     gap: 44px;
     font-size: 10px;
     font-weight: 600;
     letter-spacing: .46em;
   }

   .filters span:first-child { color: var(--red); }

   .grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 46px 14px;
     padding-right: 6px;
   }

   .project { cursor: pointer; }

   .thumb {
     width: 100%;
     aspect-ratio: 16 / 10;
     display: block;
     position: relative;
     overflow: hidden;
     background: #111;
     filter: grayscale(.88) contrast(1.12);
     transition: transform .55s cubic-bezier(.19,1,.22,1), filter .55s ease, box-shadow .55s ease;
   }

   .project:hover .thumb {
     transform: translateY(-8px) scale(1.02);
     filter: grayscale(.35) contrast(1.18);
     box-shadow: 0 25px 70px rgba(0,0,0,.2);
   }

   .thumb::before {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(0,0,0,.45) 62%), repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,.03) 31px);
   }

   .thumb::after {
     content: "▶";
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 54px;
     height: 54px;
     border: 1px solid rgba(255,255,255,.88);
     border-radius: 50%;
     display: grid;
     place-items: center;
     color: white;
     font-size: 18px;
     letter-spacing: 0;
     padding-left: 3px;
     transition: transform .4s ease, background .4s ease;
   }

   .project:hover .thumb::after { transform: translate(-50%, -50%) scale(1.14); background: rgba(227,34,34,.72); }

   .p1 { background: radial-gradient(circle at 75% 70%, rgba(255,0,0,.55), transparent 18%), linear-gradient(160deg, #050505, #1c1c1c 45%, #090909); }
   .p2 { background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.2), transparent 28%), linear-gradient(120deg, #050505, #222); }
   .p3 { background: radial-gradient(circle at 62% 70%, rgba(255,0,0,.3), transparent 8%), linear-gradient(140deg, #191919, #404040 55%, #0b0b0b); }
   .p4 { background: radial-gradient(circle at 45% 50%, rgba(255,255,255,.35), transparent 20%), linear-gradient(140deg, #0b0b0b, #222); }
   .p5 { background: radial-gradient(circle at 65% 45%, rgba(255,255,255,.25), transparent 20%), linear-gradient(140deg, #050505, #252525); }
   .p6 { background: linear-gradient(135deg, #050505, #3e3e3e 48%, #111 49%, #ddd 50%, #aaa 62%, #222 63%); }

   .meta {
     display: grid;
     grid-template-columns: 44px 1fr 40px;
     align-items: start;
     padding-top: 14px;
     font-size: 11px;
     letter-spacing: .35em;
   }

   .meta strong {
     display: block;
     letter-spacing: .38em;
     font-size: 11px;
     margin-bottom: 6px;
     font-weight: 600;
   }

   .meta small {
     display: block;
     color: #777;
     font-size: 9px;
     letter-spacing: .35em;
   }

   .arrow { text-align: right; letter-spacing: 0; font-size: 20px; }

   /* ARCHIVE */
   .archive-list {
     display: grid;
     gap: 18px;
     margin-top: 48px;
   }

   .archive-card {
     min-height: 138px;
     border-top: 1px solid rgba(0,0,0,.14);
     display: grid;
     grid-template-columns: 180px 1fr 220px;
     align-items: center;
     gap: 34px;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     transition: background .35s ease, transform .35s ease;
   }

   .archive-card:hover {
     background: rgba(255,255,255,.45);
     transform: translateX(8px);
   }

   .archive-num { color: var(--red); font-size: 12px; }
   .archive-card h3 { font-size: 30px; font-weight: 500; letter-spacing: .42em; }
   .archive-card p { color: #666; font-size: 10px; line-height: 1.8; letter-spacing: .36em; }
   .archive-arrow { text-align: right; font-size: 28px; letter-spacing: 0; }

   /* MODAL */
   .modal {
     position: fixed;
     inset: 0;
     z-index: 80;
     background: rgba(245,245,242,.82);
     backdrop-filter: blur(18px);
     display: grid;
     place-items: center;
     opacity: 0;
     visibility: hidden;
     transition: opacity .45s ease, visibility .45s ease;
   }

   .modal.open { opacity: 1; visibility: visible; }

   .modal-panel {
     width: min(1160px, 82vw);
     display: grid;
     grid-template-columns: 330px 1fr;
     gap: 44px;
     align-items: center;
   }

   .modal h2 { font-size: 38px; font-weight: 500; letter-spacing: .46em; margin-bottom: 24px; }
   .modal p { font-size: 11px; color: #555; line-height: 2.1; letter-spacing: .38em; margin-bottom: 26px; }
   .modal small { color: var(--red); font-size: 10px; letter-spacing: .42em; }

   .video-frame {
     aspect-ratio: 16 / 9;
     background: radial-gradient(circle at 72% 62%, rgba(227,34,34,.48), transparent 14%), linear-gradient(135deg, #050505, #222 55%, #050505);
     box-shadow: var(--shadow);
     position: relative;
     overflow: hidden;
   }

   .video-frame::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(transparent, rgba(0,0,0,.35)), repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,.035) 19px);
   }

   .video-frame::after {
     content: "▶";
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 72px;
     height: 72px;
     border: 1px solid white;
     border-radius: 50%;
     display: grid;
     place-items: center;
     color: white;
     letter-spacing: 0;
     font-size: 22px;
     padding-left: 4px;
   }

   .close {
     position: fixed;
     top: 34px;
     right: 38px;
     border: none;
     background: none;
     font-size: 14px;
     letter-spacing: .38em;
     cursor: pointer;
     color: #111;
   }

   /* ANIMATIONS */
   @keyframes introFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
   @keyframes revealText { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(14px); } }
   @keyframes loadBar { to { width: 100%; } }
   @keyframes rotateRing { to { transform: rotate(360deg); } }
   @keyframes gridDrift { to { background-position: 0 90px, 90px 0; } }
   @keyframes scanMove { 0%{ top:-180px; } 100%{ top:100%; } }
   @keyframes globeSweep { 0%,100%{ transform: translateX(-80%); } 50%{ transform: translateX(80%); } }
   @keyframes continentDrift { to { transform: translateX(-18px) rotate(10deg); } }
   @keyframes speedPulse { 0%,100%{ opacity:.35; transform: skewX(-16deg) translateX(-12px); } 50%{ opacity:.72; transform: skewX(-16deg) translateX(16px); } }
   @keyframes redSweep { 0%,100%{ left:-220px; opacity:0; } 45%{ opacity:1; } 65%{ left:92%; opacity:0; } }
   @keyframes pulseRing { 0%,100%{ opacity:.35; transform:scale(.98); } 50%{ opacity:.75; transform:scale(1.02); } }
   @keyframes barPulse { 0%,100%{ width:34%; } 50%{ width:88%; } }

   @media (max-width: 1000px) {
     body { overflow: auto; }
     .site { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
     .sidebar { position: fixed; inset: 0 auto 0 0; width: 150px; }
     .main { margin-left: 150px; min-height: 100vh; }
     .home { grid-template-columns: 1fr; padding: 80px 30px; }
     .hero-mark { width: 72vw; height: 72vw; }
     .loading { justify-content: center; margin-top: 20px; }
     .filters { position: static; margin-bottom: 32px; flex-wrap: wrap; gap: 22px; }
     .grid { grid-template-columns: 1fr; }
     .portfolio, .archive { padding: 90px 36px; }
     .archive-card { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
     .modal-panel { grid-template-columns: 1fr; }
   }

   .sound-toggle {
  margin-top: 22px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.38);
  color: #111;
  padding: 10px 12px;
  font-size: 8px;
  letter-spacing: .34em;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease;
}

.sound-toggle:hover {
  color: var(--red);
  border-color: rgba(227,34,34,.55);
  transform: translateX(4px);
}

.sound-toggle.active {
  color: var(--red);
  border-color: rgba(227,34,34,.7);
  background: rgba(255,255,255,.62);
  box-shadow: 0 0 18px rgba(227,34,34,.12);
}

/* 🟨 YELLOW HIGHLIGHT: COMING SOON REFINEMENT STYLES */

.coming-soon-kicker {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6em;
}

.coming-soon-copy {
  margin-top: 18px;
  font-size: 10px !important;
  color: #777 !important;
  letter-spacing: .45em !important;
}

.soon-panel {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.soon-panel > small {
  color: var(--red);
  font-size: 10px;
  letter-spacing: .45em;
  margin-bottom: 24px;
}

.soon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
  max-width: 1180px;
}

.soon-grid div {
  min-height: 160px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.36);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.soon-grid div:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,.62);
  border-color: rgba(227,34,34,.35);
}

.soon-grid span {
  color: var(--red);
  font-size: 10px;
  letter-spacing: .42em;
}

.soon-grid strong {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .38em;
}

.soon-grid small {
  color: #777;
  font-size: 9px;
  letter-spacing: .4em;
}

@media (max-width: 1000px) {
  .soon-grid {
    grid-template-columns: 1fr;
  }
}

/* 🟨 YELLOW HIGHLIGHT END */

/* 🟨 YELLOW HIGHLIGHT: REAL-TIME LAUNCH COUNTDOWN STYLES */

.launch-countdown {
  position: absolute;
  left: 52px;
  bottom: 54px;
  z-index: 6;
  max-width: 620px;
}

.launch-label {
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .55em;
  margin-bottom: 16px;
}

.launch-time {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.launch-time div {
  min-width: 78px;
  padding-right: 22px;
  border-right: 1px solid rgba(0,0,0,.15);
}

.launch-time div:last-child {
  border-right: none;
}

.launch-time strong {
  display: block;
  color: #111;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1;
}

.launch-time span {
  display: block;
  margin-top: 8px;
  color: var(--red);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .38em;
}

/* 🟨 YELLOW HIGHLIGHT END */
/* 🟨 YELLOW HIGHLIGHT: VERSION 3 MINIMAL NINE ARCHIVE SYSTEM */

.archive-system {
  min-height: 100%;
  padding-bottom: 50px;
}

.archive-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 40px;
}

.archive-system-status {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .48em;
}

.archive-system-status::after {
  content: "";
  width: 58px;
  height: 1px;
  background: var(--red);
  display: block;
}

.archive-system-status strong {
  color: var(--red);
  font-weight: 700;
}

.archive-directory {
  margin-top: 34px;
  gap: 0;
  max-width: 1180px;
}

.archive-dossier {
  min-height: 76px;
  grid-template-columns: 190px 110px 1fr 260px 50px;
  gap: 28px;
  border-top: 1px solid rgba(0,0,0,.095);
  background: rgba(255,255,255,.22);
  padding: 0 22px 0 0;
}

.archive-dossier:last-child {
  border-bottom: 1px solid rgba(0,0,0,.095);
}

.archive-dossier:hover {
  background: rgba(255,255,255,.62);
  transform: translateX(7px);
}

.archive-thumb {
  width: 190px;
  height: 76px;
  background: #111;
  filter: grayscale(1) contrast(1.15);
  position: relative;
  overflow: hidden;
}

.archive-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.28)),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.045) 23px);
}

.archive-thumb::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.82);
  font-size: 16px;
  letter-spacing: .35em;
}

.archive-thumb-001 {
  background:
    radial-gradient(circle at 60% 35%, rgba(255,255,255,.78), transparent 8%),
    radial-gradient(circle at 45% 48%, rgba(227,34,34,.35), transparent 12%),
    linear-gradient(135deg, #050505, #2a2a2a);
}

.archive-thumb-001::after { content: "✦"; }

.archive-thumb-002 {
  background:
    radial-gradient(circle at 55% 42%, rgba(255,255,255,.4), transparent 20%),
    linear-gradient(135deg, #050505, #333);
}

.archive-thumb-002::after { content: "♬"; }

.archive-thumb-003 {
  background:
    radial-gradient(circle at 50% 65%, rgba(255,255,255,.5), transparent 22%),
    linear-gradient(135deg, #222, #777 48%, #111);
}

.archive-thumb-003::after { content: "☼"; }

.archive-thumb-004 {
  background:
    radial-gradient(circle at 68% 52%, rgba(227,34,34,.38), transparent 12%),
    linear-gradient(135deg, #050505, #1d1d1d 60%, #444);
}

.archive-thumb-004::after { content: "◐"; }

.archive-thumb-005 {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.36), transparent 20%),
    linear-gradient(135deg, #1a1a1a, #535353);
}

.archive-thumb-005::after {
  content: "MADAM";
  font-family: Georgia, serif;
  font-size: 14px;
  letter-spacing: .5em;
}

.archive-thumb-006 {
  background: linear-gradient(135deg, #050505, #1b1b1b);
}

.archive-thumb-006::after {
  content: "LOCKED";
  font-size: 10px;
  color: rgba(255,255,255,.75);
}

.archive-thumb-007 {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.2), transparent 16%),
    linear-gradient(135deg, #050505, #242424);
}

.archive-thumb-007::after {
  content: "TOP";
  font-size: 11px;
}

.archive-thumb-008 {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.28), transparent 22%),
    linear-gradient(135deg, #050505, #202020);
}

.archive-thumb-008::after {
  content: "△";
  font-size: 24px;
}

.archive-thumb-009 {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.42), transparent 18%),
    linear-gradient(135deg, #050505, #333);
}

.archive-thumb-009::after {
  content: "Ω";
  font-family: Georgia, serif;
  font-size: 28px;
  letter-spacing: 0;
}

.archive-info h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .52em;
}

.archive-info p {
  margin-top: 8px;
  color: #666;
  font-size: 9px;
  letter-spacing: .38em;
}

.archive-status {
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .38em;
  text-align: left;
}

.locked-status {
  color: rgba(227,34,34,.86);
}

.archive-modal-panel {
  grid-template-columns: 390px 1fr;
}

.modal-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 34px;
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .42em;
}

.archive-video-frame {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 30%),
    linear-gradient(135deg, #050505, #242424 60%, #080808);
}

.palindrome-mini {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 14px;
  color: white;
  font-family: Georgia, serif;
  font-size: clamp(18px, 2vw, 34px);
  letter-spacing: .55em;
  text-align: center;
}

.palindrome-mini span:nth-child(3) {
  color: rgba(227,34,34,.9);
}

/* 🟨 YELLOW HIGHLIGHT END */

/* 🟨 YELLOW HIGHLIGHT: VERSION 3 MOBILE ARCHIVE SYSTEM FIX */

@media (max-width: 768px) {
  .archive-header {
    grid-template-columns: 1fr;
  }

  .archive-system-status {
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 8px;
    letter-spacing: .32em;
  }

  .archive-dossier {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: auto;
    padding: 18px 0 22px;
  }

  .archive-thumb {
    width: 100%;
    height: 120px;
  }

  .archive-info h3 {
    font-size: 18px;
    line-height: 1.5;
  }

  .archive-status {
    font-size: 8px;
    line-height: 1.8;
  }

  .archive-modal-panel {
    grid-template-columns: 1fr;
  }

  .palindrome-mini {
    font-size: 18px;
    letter-spacing: .32em;
  }
}

/* 🟨 YELLOW HIGHLIGHT END */



/* 🟨 YELLOW HIGHLIGHT: VERSION 3 MOBILE POLISH FIX */

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    letter-spacing: .2em;
  }

  .site {
    display: block;
    width: 100%;
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 92px;
    height: 100vh;
    padding: 24px 14px;
    z-index: 40;
  }

  .mini-logo {
    width: 54px;
    height: 54px;
    font-size: 20px;
    margin: 0 auto;
  }

  .nav {
    gap: 22px;
    font-size: 8px;
    letter-spacing: .28em;
    margin-top: 70px;
  }

  .nav a {
    line-height: 1.7;
  }

  .nav a.active::after {
    right: -22px;
    width: 18px;
  }

  .socials {
    font-size: 12px;
    gap: 8px;
    margin-bottom: 82px;
  }

  .copyright {
    left: 14px;
    bottom: 24px;
    font-size: 6px;
    letter-spacing: .24em;
    white-space: normal;
    max-width: 70px;
    line-height: 1.8;
  }

  .main {
    margin-left: 92px;
    width: calc(100% - 92px);
    min-height: 100vh;
    overflow-x: hidden;
  }

  .hamburger {
    position: fixed;
    right: 24px;
    top: 118px;
    z-index: 50;
  }

  .screen {
    position: relative;
    inset: auto;
    min-height: 100vh;
    display: none;
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: auto;
  }

  .screen.active {
    display: block;
  }

  .home {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    padding: 86px 22px 80px;
    text-align: center;
  }

  .hero-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: visible;
  }

  .hero-mark {
    width: 92vw;
    height: 92vw;
    max-width: 390px;
    max-height: 390px;
    margin-left: 22px;
  }

  .globe {
    inset: 54px;
  }

  .orbit {
    border-width: 18px;
  }

  .rings {
    inset: -18px;
  }

  .letters {
    font-size: clamp(82px, 22vw, 122px);
  }

  .hero-title {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    margin-top: -42px;
  }

  .coming-soon-kicker {
    font-size: 8px;
    letter-spacing: .38em;
  }

  .hero-title h1 {
    font-size: clamp(24px, 8vw, 38px);
    letter-spacing: .34em;
    line-height: 1.35;
  }

  .hero-title p,
  .coming-soon-copy {
    font-size: 8px !important;
    letter-spacing: .28em !important;
    line-height: 2;
  }

  .loading {
    width: 100%;
    justify-content: center;
    margin-top: 36px;
    gap: 14px;
    font-size: 8px;
    letter-spacing: .28em;
  }

  .bar {
    width: 96px;
  }

  .percent {
    font-size: 8px;
    letter-spacing: .22em;
  }

  .tagline {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 34px;
    text-align: center;
    font-size: 8px;
    letter-spacing: .28em;
    line-height: 2;
  }

  .launch-countdown {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: 28px;
    max-width: 100%;
    text-align: center;
  }

  .launch-label {
    font-size: 8px;
    letter-spacing: .34em;
    margin-bottom: 14px;
  }

  .launch-time {
    display: grid;
    grid-template-columns: repeat(2, minmax(80px, 1fr));
    gap: 18px 12px;
    justify-items: center;
  }

  .launch-time div {
    min-width: auto;
    width: 100%;
    padding-right: 0;
    border-right: none;
  }

  .launch-time strong {
    font-size: 20px;
  }

  .launch-time span {
    font-size: 7px;
    letter-spacing: .28em;
  }

  .portfolio,
  .archive {
    padding: 86px 22px 80px;
  }

  .section-title {
    font-size: 24px;
    letter-spacing: .34em;
    line-height: 1.4;
  }

  .portfolio-copy {
    font-size: 8px;
    letter-spacing: .26em;
    line-height: 2;
    max-width: 100%;
  }

  .archive-system-status {
    font-size: 8px;
    letter-spacing: .28em;
  }

  .archive-dossier {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }

  .archive-thumb {
    width: 100%;
    height: 145px;
  }

  .archive-info h3 {
    font-size: 20px;
    letter-spacing: .34em;
    line-height: 1.45;
  }

  .archive-info p {
    font-size: 8px;
    letter-spacing: .26em;
  }

  .archive-status {
    font-size: 8px;
    letter-spacing: .25em;
    line-height: 1.8;
  }

  .archive-arrow {
    font-size: 24px;
    text-align: left;
  }

  .modal-panel,
  .archive-modal-panel {
    width: calc(100vw - 120px);
    grid-template-columns: 1fr;
    gap: 28px;
    margin-left: 92px;
  }

  .modal h2 {
    font-size: 24px;
    letter-spacing: .32em;
  }

  .modal p {
    font-size: 8px;
    letter-spacing: .24em;
  }

  .palindrome-mini {
    font-size: 16px;
    letter-spacing: .28em;
  }
}

/* 🟨 YELLOW HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 5 LOCKED ARCHIVE ACCESS SYSTEM */

.archive-lock-box {
  margin-top: 30px;
  border-top: 1px solid rgba(0,0,0,.14);
  border-bottom: 1px solid rgba(0,0,0,.14);
  padding: 28px 0;
}

.lock-mark {
  color: var(--red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .52em;
  margin-bottom: 18px;
}

.lock-copy {
  font-size: 9px !important;
  color: #555 !important;
  letter-spacing: .34em !important;
  line-height: 2 !important;
  margin-bottom: 22px !important;
}

.archive-lock-box input {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.45);
  color: #111;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .34em;
  outline: none;
}

.archive-lock-box input:focus {
  border-color: rgba(227,34,34,.7);
  box-shadow: 0 0 18px rgba(227,34,34,.08);
}

.archive-lock-box button {
  margin-top: 8px;
  padding: 13px 18px;
  border: 1px solid rgba(227,34,34,.55);
  background: transparent;
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4em;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}

.archive-lock-box button:hover {
  background: var(--red);
  color: white;
  transform: translateY(-2px);
}

.access-error {
  display: none;
  margin-top: 18px;
  color: var(--red);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .38em;
}

.access-error.show {
  display: block;
}

.archive-detail-box {
  margin-top: 30px;
  display: grid;
  gap: 22px;
}

.archive-detail-box.is-hidden,
.archive-lock-box.is-hidden {
  display: none;
}

.detail-block {
  border-top: 1px solid rgba(0,0,0,.12);
  padding-top: 18px;
}

.detail-block span {
  display: block;
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .45em;
  margin-bottom: 12px;
}

.detail-block p {
  color: #333 !important;
  font-size: 10px !important;
  line-height: 2 !important;
  letter-spacing: .3em !important;
  margin-bottom: 0 !important;
}

.locked .archive-thumb {
  filter: grayscale(1) contrast(1.18) brightness(.72);
}

.locked .archive-info h3 {
  opacity: .88;
}

.locked-status {
  color: rgba(227,34,34,.9);
}

@media (max-width: 768px) {
  .archive-lock-box input {
    font-size: 8px;
    letter-spacing: .26em;
  }

  .archive-lock-box button {
    width: 100%;
    font-size: 8px;
    letter-spacing: .28em;
  }

  .detail-block p {
    font-size: 8px !important;
    letter-spacing: .22em !important;
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 6 INTERACTIVE SYSTEM UPGRADES */

/* BACK TO HOME */
.back-home {
  position: fixed;
  top: 24px;
  left: 204px;
  z-index: 60;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.76);
  color: #111;
  padding: 13px 22px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  cursor: pointer;
  transition: transform .3s ease, color .3s ease, border-color .3s ease;
}

.back-home:hover {
  transform: translateX(-4px);
  color: var(--red);
  border-color: rgba(227,34,34,.5);
}

.back-home.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* SERVICES / ABOUT / CONTACT */
.info-screen {
  padding: 96px 70px 54px 88px;
  overflow-y: auto;
}

.info-screen > small {
  color: var(--red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .42em;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 980px;
  margin-top: 44px;
}

.info-grid div {
  min-height: 160px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.35);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-grid span,
.contact-line span {
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .38em;
}

.info-grid strong {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .36em;
}

.info-grid small {
  color: #666;
  font-size: 8px;
  letter-spacing: .28em;
}

.info-statement {
  margin-top: 54px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .5em;
}

.contact-line {
  margin-top: 44px;
  display: grid;
  gap: 16px;
}

.contact-line strong {
  font-size: 14px;
  letter-spacing: .34em;
}

/* ARCHIVE HOVER BACKGROUND */
.archive-system {
  position: relative;
  isolation: isolate;
}

.archive-cover-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .11;
  background:
    radial-gradient(circle at 60% 45%, rgba(0,0,0,.08), transparent 36%),
    linear-gradient(120deg, #fbfbf8, #ececea);
  transition: background .55s ease, opacity .55s ease, filter .55s ease;
  filter: grayscale(1);
}

.archive-cover-bg[data-cover="nye"] {
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.8), transparent 8%),
    radial-gradient(circle at 52% 45%, rgba(227,34,34,.22), transparent 18%),
    linear-gradient(135deg, #111, #555);
}

.archive-cover-bg[data-cover="love"] {
  background:
    radial-gradient(circle at 48% 50%, rgba(0,0,0,.25), transparent 24%),
    linear-gradient(135deg, #222, #777);
}

.archive-cover-bg[data-cover="cabana"] {
  background:
    radial-gradient(circle at 50% 65%, rgba(255,255,255,.55), transparent 22%),
    linear-gradient(135deg, #d8d8d2, #9faaa8 48%, #f4f4f1);
}

.archive-cover-bg[data-cover="night"] {
  background:
    radial-gradient(circle at 70% 52%, rgba(227,34,34,.32), transparent 14%),
    linear-gradient(135deg, #050505, #2a2a2a 65%, #111);
}

.archive-cover-bg[data-cover="palindrome"] {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 80px),
    linear-gradient(135deg, #f8f8f5, #d7d7d2);
}

.archive-cover-bg[data-cover="classified"],
.archive-cover-bg[data-cover="topsecret"],
.archive-cover-bg[data-cover="god"],
.archive-cover-bg[data-cover="omega"] {
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.32), transparent 26%),
    linear-gradient(135deg, #050505, #242424);
  opacity: .13;
}

/* VIEW SYSTEM */
.archive-side-controls {
  display: grid;
  gap: 22px;
  justify-items: end;
}

.archive-view-toggle {
  display: flex;
  gap: 10px;
  align-items: center;
}

.view-btn {
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.44);
  color: #111;
  padding: 9px 12px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .28em;
  cursor: pointer;
}

.view-btn.active,
.view-btn:hover {
  color: var(--red);
  border-color: rgba(227,34,34,.55);
}

.archive-directory.view-icons {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 18px;
}

.archive-directory.view-icons .archive-dossier {
  min-height: 230px;
  grid-template-columns: 1fr;
  padding: 24px;
  text-align: center;
}

.archive-directory.view-icons .archive-thumb {
  width: 100%;
  height: 110px;
}

.archive-directory.view-icons .archive-status,
.archive-directory.view-icons .archive-arrow {
  text-align: center;
}

.archive-directory.view-thumbs {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 22px;
}

.archive-directory.view-thumbs .archive-dossier {
  grid-template-columns: 1fr;
  padding: 0 0 24px;
}

.archive-directory.view-thumbs .archive-thumb {
  width: 100%;
  height: 220px;
}

/* ARCHIVE MEMO */
.archive-memo {
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid rgba(0,0,0,.12);
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  color: #555;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .36em;
}

.archive-memo span:first-child {
  color: var(--red);
}

/* LOCK-FIRST SCREEN */
.archive-restricted-box {
  margin-top: 30px;
  padding: 34px 0;
  border-top: 1px solid rgba(0,0,0,.14);
  border-bottom: 1px solid rgba(0,0,0,.14);
  text-align: left;
}

.archive-restricted-box.is-hidden {
  display: none;
}

.restricted-lock {
  width: 82px;
  height: 82px;
  border: 1px solid rgba(0,0,0,.18);
  display: grid;
  place-items: center;
  color: var(--red);
  font-size: 30px;
  letter-spacing: 0;
  margin-bottom: 24px;
}

.restricted-title {
  color: var(--red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5em;
  margin-bottom: 18px;
}

.restricted-copy {
  font-size: 9px !important;
  color: #555 !important;
  letter-spacing: .34em !important;
  line-height: 2 !important;
}

.archive-restricted-box button {
  margin-top: 18px;
  padding: 13px 18px;
  border: 1px solid rgba(227,34,34,.55);
  background: transparent;
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .38em;
  cursor: pointer;
}

.archive-restricted-box button:hover {
  background: var(--red);
  color: white;
}

/* DAY / NIGHT MODE */
body.theme-night {
  --bg: #060606;
  --white: #0f0f0f;
  --ink: #f3f3f0;
  --muted: #999;
  --line: rgba(255,255,255,.14);
  background: #060606;
  color: #f3f3f0;
}

body.theme-night .site {
  background:
    radial-gradient(circle at var(--mx, 55%) var(--my, 45%), rgba(255,255,255,.08), transparent 34%),
    linear-gradient(120deg, #050505, #111);
}

body.theme-night .sidebar {
  background: rgba(5,5,5,.72);
  border-right-color: rgba(255,255,255,.14);
}

body.theme-night .nav a,
body.theme-night .hamburger span,
body.theme-night .section-title,
body.theme-night .archive-info h3,
body.theme-night .hero-title h1 {
  color: #f3f3f0;
}

body.theme-night .nav a.active,
body.theme-night .nav a:hover,
body.theme-night .hero-title span,
body.theme-night .tagline span {
  color: var(--red);
}

body.theme-night .portfolio-copy,
body.theme-night .archive-info p,
body.theme-night .modal p,
body.theme-night .detail-block p {
  color: #b9b9b4 !important;
}

body.theme-night .modal {
  background: rgba(5,5,5,.84);
}

body.theme-night .modal-panel,
body.theme-night .soon-grid div,
body.theme-night .info-grid div,
body.theme-night .archive-dossier {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
}

body.theme-night .close,
body.theme-night .back-home,
body.theme-night .view-btn {
  color: #f3f3f0;
  background: rgba(0,0,0,.42);
  border-color: rgba(255,255,255,.16);
}

/* MOBILE VERSION 6 */
@media (max-width: 768px) {
  .back-home {
    left: 106px;
    top: 18px;
    padding: 10px 12px;
    font-size: 7px;
    letter-spacing: .2em;
  }

  .archive-side-controls {
    justify-items: start;
  }

  .archive-view-toggle {
    flex-wrap: wrap;
  }

  .view-btn {
    font-size: 7px;
    letter-spacing: .2em;
  }

  .archive-directory.view-icons,
  .archive-directory.view-thumbs {
    grid-template-columns: 1fr;
  }

  .archive-memo {
    display: grid;
    gap: 12px;
    font-size: 8px;
    line-height: 1.8;
  }

  .info-screen {
    padding: 86px 22px 80px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .restricted-lock {
    width: 64px;
    height: 64px;
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 6 LOGO + THEME MENU */

.theme-menu {
  position: fixed;
  right: 34px;
  top: 82px;
  z-index: 70;
  display: grid;
  justify-items: end;
}

.theme-menu-button {
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.72);
  color: #111;
  padding: 10px 14px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .34em;
  cursor: pointer;
}

.theme-menu-panel {
  display: none;
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
  min-width: 180px;
}

.theme-menu.open .theme-menu-panel {
  display: grid;
}

.theme-option {
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: transparent;
  color: #111;
  padding: 13px 14px;
  text-align: left;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .28em;
  cursor: pointer;
}

.theme-option:hover {
  color: var(--red);
  background: rgba(255,255,255,.62);
}

body.theme-night {
  --bg: #060606;
  --white: #0f0f0f;
  --ink: #f3f3f0;
  --muted: #999;
  --line: rgba(255,255,255,.14);
  background: #060606;
  color: #f3f3f0;
}

body.theme-night .site {
  background:
    radial-gradient(circle at var(--mx, 55%) var(--my, 45%), rgba(255,255,255,.08), transparent 34%),
    linear-gradient(120deg, #050505, #111);
}

body.theme-night .sidebar {
  background: rgba(5,5,5,.72);
  border-right-color: rgba(255,255,255,.14);
}

body.theme-night .nav a,
body.theme-night .hamburger span,
body.theme-night .section-title,
body.theme-night .archive-info h3,
body.theme-night .hero-title h1 {
  color: #f3f3f0;
}

body.theme-night .nav a.active,
body.theme-night .nav a:hover,
body.theme-night .hero-title span,
body.theme-night .tagline span {
  color: var(--red);
}

body.theme-night .portfolio-copy,
body.theme-night .archive-info p,
body.theme-night .modal p,
body.theme-night .detail-block p {
  color: #b9b9b4 !important;
}

body.theme-night .modal {
  background: rgba(5,5,5,.84);
}

body.theme-night .modal-panel,
body.theme-night .soon-grid div,
body.theme-night .info-grid div,
body.theme-night .archive-dossier {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
}

body.theme-night .close,
body.theme-night .back-home,
body.theme-night .view-btn,
body.theme-night .theme-menu-button,
body.theme-night .theme-option {
  color: #f3f3f0;
  background: rgba(0,0,0,.52);
  border-color: rgba(255,255,255,.16);
}

body.theme-night .theme-menu-panel {
  background: rgba(0,0,0,.86);
  border-color: rgba(255,255,255,.12);
}

@media (max-width: 768px) {
  .theme-menu {
    right: 20px;
    top: 82px;
  }

  .theme-menu-button {
    font-size: 7px;
    letter-spacing: .22em;
    padding: 9px 11px;
  }

  .theme-menu-panel {
    min-width: 150px;
  }

  .theme-option {
    font-size: 7px;
    letter-spacing: .2em;
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 7 ARCHIVE 007 SYMBOL ONLY */
.archive-thumb-007::after {
  content: "?";
  font-family: Georgia, serif;
  font-size: 34px;
  letter-spacing: 0;
}

/* 008 / THE GOD FILE — Origin Unknown */
.archive-thumb-008::after {
  content: "△";
  font-size: 28px;
  letter-spacing: 0;
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 7 SYMBOL FINAL — ONLY 007 + 008 */

/* 007 / TOP SECRET — Mystery symbol */
.archive-thumb-007::after {
  content: "?";
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0;
  text-indent: 0;
  line-height: 1;
  color: rgba(255,255,255,.86);
}

/* 008 / THE GOD FILE — Centered Delta symbol */
.archive-thumb-008::after {
  content: "△";
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0;
  text-indent: 0;
  line-height: 1;
  color: rgba(255,255,255,.86);
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 7 INFRARED GLOBAL SIGNAL GLOBE */

.home {
  position: relative;
}

.geo-panel {
  position: absolute;
  right: 52px;
  top: 134px;
  z-index: 8;
  width: 285px;
  padding: 18px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.26);
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 70px rgba(0,0,0,.08);
}

.geo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .32em;
}

.geo-header span {
  color: #555;
}

.geo-header strong {
  color: var(--red);
  font-weight: 700;
}

.geo-globe {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  perspective: 900px;
  cursor: crosshair;
}

.geo-sphere {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(var(--geo-rx, 0deg)) rotateY(var(--geo-ry, 0deg));
  transition: transform .18s ease-out;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.82), rgba(255,255,255,.18) 24%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.16), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(0,0,0,.18));
  border: 1px solid rgba(0,0,0,.18);
  box-shadow:
    inset 0 0 35px rgba(0,0,0,.18),
    inset 0 0 70px rgba(227,34,34,.06),
    0 0 36px rgba(227,34,34,.08);
}

.geo-sphere::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(0,0,0,.07) 18px, transparent 19px 34px),
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(0,0,0,.06) 18px, transparent 19px 34px);
  opacity: .62;
  mix-blend-mode: multiply;
}

.geo-sphere::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px dotted rgba(227,34,34,.28);
  box-shadow: 0 0 22px rgba(227,34,34,.12);
}

.geo-land {
  position: absolute;
  background: rgba(0,0,0,.18);
  filter: blur(.4px);
  opacity: .62;
}

.geo-land-na {
  width: 70px;
  height: 48px;
  left: 38px;
  top: 72px;
  border-radius: 60% 40% 55% 45%;
  transform: rotate(-14deg);
}

.geo-land-af {
  width: 44px;
  height: 66px;
  left: 118px;
  top: 92px;
  border-radius: 50% 48% 60% 42%;
  transform: rotate(12deg);
}

.geo-land-eu {
  width: 52px;
  height: 32px;
  left: 122px;
  top: 64px;
  border-radius: 46% 54% 40% 60%;
  transform: rotate(-8deg);
}

.geo-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  transform: translate(-50%, -50%);
  z-index: 4;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255,255,255,.5);
}

.geo-node.is-current {
  width: 11px;
  height: 11px;
  background: var(--red);
  border-color: rgba(255,255,255,.95);
  box-shadow:
    0 0 0 6px rgba(227,34,34,.12),
    0 0 24px rgba(227,34,34,.72);
}

.geo-node span {
  position: absolute;
  left: 14px;
  top: -3px;
  color: white;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .22em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s ease, transform .25s ease;
}

.geo-node:hover span,
.geo-node:focus span {
  opacity: 1;
  transform: translateX(0);
}

.geo-arc {
  position: absolute;
  left: 62px;
  top: 98px;
  width: 92px;
  height: 38px;
  border-top: 1px solid rgba(227,34,34,.55);
  border-radius: 50%;
  transform: rotate(15deg);
  z-index: 3;
  opacity: .75;
}

.geo-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(227,34,34,.24), transparent);
  transform: translateX(-100%);
  animation: geoScan 4.8s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}

.geo-readout {
  margin-top: 16px;
  border-top: 1px solid rgba(0,0,0,.12);
  padding-top: 14px;
  display: grid;
  gap: 8px;
}

.geo-readout span {
  color: #555;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .3em;
}

.geo-readout strong {
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .34em;
}

body.theme-night .geo-panel {
  background: rgba(0,0,0,.32);
  border-color: rgba(255,255,255,.14);
}

body.theme-night .geo-sphere {
  border-color: rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.32), rgba(255,255,255,.08) 24%, transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.20), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.42));
}

body.theme-night .geo-land {
  background: rgba(255,255,255,.18);
}

@keyframes geoScan {
  0%, 100% { transform: translateX(-110%); opacity: 0; }
  35% { opacity: .9; }
  65% { transform: translateX(110%); opacity: 0; }
}

@media (max-width: 768px) {
  .geo-panel {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 300px;
    margin-top: 28px;
    padding: 16px;
  }

  .geo-sphere {
    width: 190px;
    height: 190px;
  }

  .geo-header,
  .geo-readout span,
  .geo-readout strong {
    letter-spacing: .22em;
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 7 GLOBE SCALE FIX */

/* Make the global signal globe feel closer to the desktop mockup */
@media (min-width: 901px) {
  .geo-panel {
    position: absolute;
    right: 42px;
    top: 96px;
    width: min(46vw, 640px);
    height: auto;
    padding: 22px;
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .geo-globe {
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .geo-sphere {
    width: min(42vw, 580px);
    height: min(42vw, 580px);
    opacity: .78;
  }

  .geo-header {
    position: absolute;
    right: 44px;
    top: 22px;
    z-index: 7;
  }

  .geo-readout {
    position: absolute;
    left: 54px;
    bottom: 42px;
    width: 280px;
    border-top: 1px solid rgba(0,0,0,.12);
  }

  body.theme-night .geo-readout {
    border-top-color: rgba(255,255,255,.16);
  }
}

/* Keep the globe controlled on smaller screens */
@media (max-width: 900px) {
  .geo-panel {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 440px;
    margin: 30px auto 0;
  }

  .geo-sphere {
    width: min(70vw, 320px);
    height: min(70vw, 320px);
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 8 IMAGE-LIKE GLOBE TEXTURE UPGRADE */

/*
  Upload this image:
  public_html/assets/images/infrared-globe-map.png

  This keeps the current CSS globe system,
  but makes it look more like a real rendered image.
*/

.geo-sphere {
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.72), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.18), transparent 52%),
    url("assets/images/infrared-globe-map.png"),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(0,0,0,.22));
  background-size:
    100% 100%,
    100% 100%,
    112% 112%,
    100% 100%;
  background-position:
    center,
    center,
    center,
    center;
  background-repeat: no-repeat;
  border: 1px solid rgba(0,0,0,.14);
  box-shadow:
    inset 0 0 48px rgba(0,0,0,.22),
    inset 0 0 90px rgba(227,34,34,.08),
    0 0 46px rgba(227,34,34,.12);
}

/* Make the globe feel more like glass/infrared scan */
.geo-sphere::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 2;
  background:
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(0,0,0,.08) 19px, transparent 20px 36px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.065) 19px, transparent 20px 36px),
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.38), transparent 22%);
  opacity: .58;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.geo-sphere::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  z-index: 3;
  border: 1px dotted rgba(227,34,34,.34);
  box-shadow:
    inset 0 0 30px rgba(255,255,255,.12),
    0 0 26px rgba(227,34,34,.12);
  pointer-events: none;
}

/* Once the real globe image is uploaded, these fake land blobs are no longer needed */
.geo-land {
  opacity: 0;
}

/* Make signal nodes stay above the globe texture */
.geo-node,
.geo-arc,
.geo-scan {
  z-index: 6;
}

.geo-readout {
  z-index: 8;
}

body.theme-night .geo-sphere {
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.32), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.22), transparent 52%),
    url("assets/images/infrared-globe-map.png"),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.48));
  background-size:
    100% 100%,
    100% 100%,
    112% 112%,
    100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 58px rgba(0,0,0,.62),
    inset 0 0 100px rgba(227,34,34,.16),
    0 0 58px rgba(227,34,34,.18);
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 9 GLOBE HERO POLISH */

/* Make the image globe the main hero focus */
@media (min-width: 901px) {
  .geo-panel {
    right: 64px;
    top: 118px;
    width: min(58vw, 760px);
    pointer-events: auto;
  }

  .geo-sphere {
    width: min(54vw, 700px);
    height: min(54vw, 700px);
    opacity: .82;
  }

  .geo-header {
    right: 34px;
    top: -18px;
  }

  .geo-readout {
    left: 36px;
    bottom: -8px;
    width: 310px;
  }

  /* Push older status text away from the globe */
  .loading {
    position: absolute;
    right: 130px;
    top: 45%;
    transform: translateY(-50%);
    z-index: 12;
    opacity: .72;
  }

  .tagline {
    right: 70px;
    bottom: 86px;
    z-index: 12;
  }

  /* Make overlay signal nodes more subtle since the globe image already has red dots */
  .geo-node {
    width: 7px;
    height: 7px;
    opacity: .72;
  }

  .geo-node.is-current {
    width: 9px;
    height: 9px;
    opacity: .86;
    box-shadow:
      0 0 0 5px rgba(227,34,34,.10),
      0 0 20px rgba(227,34,34,.58);
  }

  .geo-arc {
    opacity: .32;
  }
}

/* Better balance for shorter desktop browser windows */
@media (min-width: 901px) and (max-height: 760px) {
  .geo-panel {
    top: 92px;
    width: min(54vw, 680px);
  }

  .geo-sphere {
    width: min(50vw, 620px);
    height: min(50vw, 620px);
  }

  .geo-readout {
    bottom: 4px;
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 9.1 FINAL GLOBE COMPOSITION POLISH */

/*
  This keeps the globe image,
  but balances it better with the CM hero mark.
  No HTML or JS changes needed.
*/

@media (min-width: 901px) {
  /* Give the left CM mark slightly more breathing room */
  .hero-wrap {
    transform: translateX(-28px) scale(.94);
    z-index: 9;
  }

  /* Bring the globe down slightly and make it feel intentional, not crowded */
  .geo-panel {
    right: 74px;
    top: 104px;
    width: min(52vw, 700px);
    padding: 0;
  }

  .geo-sphere {
    width: min(48vw, 640px);
    height: min(48vw, 640px);
    opacity: .84;
  }

  /* Keep GLOBAL SIGNAL / LIVE clean above the globe */
  .geo-header {
    right: 28px;
    top: -22px;
    opacity: .86;
  }

  /* Make the interactive location readout visible again */
  .geo-readout {
    left: 24px;
    bottom: 18px;
    width: 300px;
    padding-top: 12px;
    background: rgba(244,244,241,.18);
  }

  /* Keep SYSTEM / COMING SOON as a subtle overlay */
  .loading {
    right: 144px;
    top: 39%;
    opacity: .58;
    z-index: 13;
  }

  /* The tagline is repeating information, so make it subtle */
  .tagline {
    right: 62px;
    bottom: 54px;
    opacity: .42;
    z-index: 13;
  }

  /* Countdown feels good, just slightly tighter */
  .launch-countdown {
    bottom: 62px;
    transform: scale(.94);
    transform-origin: left bottom;
  }
}

/* Better fit for your current browser height */
@media (min-width: 901px) and (max-height: 780px) {
  .hero-wrap {
    transform: translateX(-34px) scale(.9);
  }

  .geo-panel {
    top: 86px;
    right: 78px;
    width: min(50vw, 650px);
  }

  .geo-sphere {
    width: min(46vw, 590px);
    height: min(46vw, 590px);
  }

  .geo-readout {
    bottom: 8px;
  }

  .tagline {
    bottom: 40px;
  }

  .launch-countdown {
    bottom: 48px;
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 9.4 CLEAN SIDEBAR NAV + MOBILE FOOTER */

/*
  Fixes:
  1. Aligns sidebar nav as [number] [label].
  2. Keeps PORTFOLIO/SOON on one clean line.
  3. Stops SOUND ON/OFF from overlapping copyright.
  4. Uses short copyright on mobile.
  5. Keeps desktop and mobile visually consistent.
*/

/* DESKTOP NAV CLEANUP */
.nav {
  gap: 24px;
  letter-spacing: 0;
}

.nav a {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 12px;
  line-height: 1;
}

.nav-num {
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .26em;
}

.nav-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .38em;
  white-space: nowrap;
}

.nav a.active::after {
  right: -56px;
  top: 50%;
}

/* DESKTOP FOOTER CLEANUP */
.sidebar-footer {
  display: grid;
  gap: 18px;
  align-items: start;
}

.sidebar-footer .socials {
  margin-bottom: 0;
}

.copyright-full {
  display: inline;
}

.copyright-short {
  display: none;
}

/* MOBILE SIDEBAR CLEANUP */
@media (max-width: 768px) {
  .sidebar {
    width: 118px;
    padding: 24px 12px 18px;
    overflow: hidden;
  }

  .main {
    margin-left: 118px;
    width: calc(100% - 118px);
  }

  .mini-logo {
    width: 56px;
    height: 56px;
    font-size: 20px;
    margin: 0 auto;
  }

  .nav {
    margin-top: 70px;
    gap: 28px;
    font-size: unset;
    letter-spacing: 0;
  }

  .nav a {
    grid-template-columns: 17px 1fr;
    gap: 7px;
    align-items: center;
    line-height: 1;
  }

  .nav-num {
    font-size: 8px;
    letter-spacing: .08em;
  }

  .nav-label {
    font-size: 6.7px;
    letter-spacing: .11em;
    white-space: nowrap;
  }

  .nav a:hover {
    transform: none;
  }

  .nav a.active::after {
    right: -20px;
    width: 16px;
    height: 2px;
  }

  .sidebar-footer {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 18px;
    display: grid;
    gap: 12px;
    justify-items: start;
  }

  .sidebar-footer .socials {
    margin-bottom: 0;
    font-size: 11px;
    gap: 7px;
    line-height: 1;
  }

  .sound-toggle {
    margin-top: 0;
    width: 84px;
    padding: 8px 6px;
    font-size: 6px;
    line-height: 1.4;
    letter-spacing: .18em;
    text-align: center;
    white-space: normal;
  }

  .copyright {
    position: static;
    left: auto;
    bottom: auto;
    max-width: 84px;
    font-size: 5.8px;
    letter-spacing: .18em;
    line-height: 1.6;
    white-space: normal;
  }

  .copyright-full {
    display: none;
  }

  .copyright-short {
    display: inline;
  }

  .back-home {
    left: 132px;
  }

  .home {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* EXTRA-TIGHT PHONE FALLBACK */
@media (max-width: 390px) {
  .sidebar {
    width: 112px;
  }

  .main {
    margin-left: 112px;
    width: calc(100% - 112px);
  }

  .nav-label {
    font-size: 6.3px;
    letter-spacing: .085em;
  }

  .sound-toggle {
    width: 78px;
    font-size: 5.8px;
  }

  .back-home {
    left: 126px;
  }
}

/* NIGHT MODE FOOTER CLEANUP */
@media (max-width: 768px) {
  body.theme-night .sound-toggle {
    color: #f3f3f0;
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.18);
  }

  body.theme-night .sound-toggle.active {
    color: var(--red);
    border-color: rgba(227,34,34,.65);
    box-shadow: 0 0 18px rgba(227,34,34,.14);
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 12.1 FINAL CLEAN ARCHIVE SYSTEM */

/*
  VERSION 12.1 GOAL:
  - Keep Version 10 cleanliness.
  - Add Version 12 winners only.
  - Menu = compact slider with light icon.
  - Archive = centered like F 3.5.
  - Locked files = real lock icon only.
  - Sound = compact slider, but copyright stays one line on desktop.
  - Modal = old palindrome height/font + newer login/back-to-archives.
*/


/* ==================================================
   01. SIDEBAR FOOTER / SOUND / IG
   ================================================== */

.sidebar-footer-v12 {
  display: grid;
  gap: 15px;
  align-items: start;
  justify-items: start;
}

.socials-v12 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  color: #777;
  font-size: 13px;
  letter-spacing: 0;
}

.socials-v12 a,
.socials-v12 span {
  color: #777;
  text-decoration: none;
  opacity: .82;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}

.socials-v12 a:hover,
.socials-v12 span:hover {
  color: var(--red);
  opacity: 1;
  transform: translateY(-2px);
}

.ig-link-v12 {
  display: inline-block;
  color: #777;
  text-decoration: none;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .38em;
  line-height: 1;
  transition: color .25s ease;
}

.ig-link-v12:hover {
  color: var(--red);
}

.sound-switch {
  width: 148px;
  height: 36px;
  margin-top: 0;
  padding: 0 8px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.44);
  display: grid;
  grid-template-columns: 20px 1fr 34px;
  align-items: center;
  gap: 8px;
  color: #111;
  cursor: pointer;
  box-shadow: none;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.sound-switch:hover {
  transform: translateX(4px);
  border-color: rgba(227,34,34,.45);
}

.sound-switch-icon {
  display: grid;
  place-items: center;
  letter-spacing: 0;
}

.sound-svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sound-switch-text {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .28em;
  white-space: nowrap;
}

.sound-switch-track {
  width: 32px;
  height: 15px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px;
  position: relative;
  background: rgba(0,0,0,.04);
}

.sound-switch-knob {
  position: absolute;
  left: 2px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #999;
  transform: translateY(-50%);
  transition: left .25s ease, background .25s ease, box-shadow .25s ease;
}

.sound-switch.active {
  color: var(--red);
  border-color: rgba(227,34,34,.58);
  background: rgba(255,255,255,.62);
}

.sound-switch.active .sound-switch-knob {
  left: 19px;
  background: var(--red);
  box-shadow: 0 0 12px rgba(227,34,34,.45);
}

.copyright-v12 {
  position: static;
  left: auto;
  bottom: auto;
  max-width: 190px;
  color: #777;
  font-size: 7px;
  letter-spacing: .28em;
  line-height: 1.8;
  white-space: nowrap;
}

.copyright-v12 .copyright-short {
  display: none;
}

.rights-line {
  display: block;
  margin-top: 5px;
  font-size: 6px;
  letter-spacing: .24em;
  color: #999;
}


/* ==================================================
   02. MENU SLIDER
   ================================================== */

.theme-menu-v12 {
  position: fixed;
  right: 34px;
  top: 52px;
  z-index: 70;
  display: grid;
  justify-items: end;
}

.menu-slider-shell {
  display: flex;
  align-items: center;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(14px);
}

.theme-menu-v12 .theme-menu-button {
  position: static;
  border: none;
  width: auto;
  min-width: 86px;
  height: 38px;
  padding: 0 18px;
  background: transparent;
  color: #111;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .34em;
  cursor: pointer;
}

.theme-quick-toggle {
  width: 40px;
  height: 38px;
  border: none;
  border-left: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.25);
  color: #111;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.theme-quick-icon {
  width: 23px;
  height: 23px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  letter-spacing: 0;
}

.theme-menu-v12 .theme-menu-panel {
  top: 46px;
  right: 0;
}


/* ==================================================
   03. ARCHIVE CENTERING + HEADER
   ================================================== */

.archive-system {
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 44px;
}

.archive-header {
  grid-template-columns: minmax(420px, 1fr) auto;
  align-items: start;
}

.archive-side-controls-v12 {
  justify-items: end;
  align-content: start;
  gap: 18px;
}

.archive-system-status-v12 {
  padding: 16px 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.26);
}

.archive-view-toggle-v12 {
  display: flex;
  gap: 0;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.45);
}

.archive-view-toggle-v12 .view-btn {
  border: none;
  border-right: 1px solid rgba(0,0,0,.07);
  background: transparent;
  padding: 12px 16px;
  font-size: 8px;
  letter-spacing: .28em;
}

.archive-view-toggle-v12 .view-btn:last-child {
  border-right: none;
}

.archive-view-toggle-v12 .view-btn.active {
  background: rgba(227,34,34,.055);
  color: var(--red);
}

.archive-memo-top {
  max-width: 760px;
  margin-top: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.09);
  justify-content: flex-end;
  gap: 26px;
  font-size: 9px;
  letter-spacing: .36em;
}


/* ==================================================
   04. ARCHIVE ROWS LIKE F 3.5 FINAL
   ================================================== */

.archive-directory {
  max-width: none;
  width: 100%;
  margin-top: 34px;
}

.archive-dossier {
  grid-template-columns: 170px 110px minmax(260px, 1fr) 86px 48px;
  gap: 24px;
  min-height: 82px;
  padding-right: 22px;
}

.archive-info h3 {
  font-weight: 500;
  letter-spacing: .52em;
}

.archive-status.archive-lock-only,
.archive-status.archive-omega-only {
  justify-self: center;
  align-self: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(0,0,0,.09);
  background: rgba(255,255,255,.28);
  display: grid;
  place-items: center;
  color: var(--red);
  text-align: center;
  letter-spacing: 0;
}

.archive-omega-only {
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 800;
  color: #111;
}

.cm-lock-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cm-lock-icon-large {
  width: 24px;
  height: 24px;
}


/* ==================================================
   05. ARCHIVE VIEW MODES
   ================================================== */

.archive-directory.view-grid,
.archive-directory.view-large,
.archive-directory.view-xl {
  display: grid;
  border-top: none;
  gap: 18px;
}

.archive-directory.view-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.archive-directory.view-grid .archive-dossier {
  min-height: 240px;
  grid-template-columns: 1fr;
  padding: 24px;
  text-align: center;
  border: 1px solid rgba(0,0,0,.09);
}

.archive-directory.view-grid .archive-thumb {
  width: 100%;
  height: 112px;
}

.archive-directory.view-grid .archive-num,
.archive-directory.view-grid .archive-status,
.archive-directory.view-grid .archive-arrow {
  justify-self: center;
  text-align: center;
}

.archive-directory.view-large {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.archive-directory.view-large .archive-dossier {
  grid-template-columns: 1fr;
  min-height: 310px;
  padding: 28px;
  border: 1px solid rgba(0,0,0,.09);
}

.archive-directory.view-large .archive-thumb {
  width: 100%;
  height: 155px;
}

.archive-directory.view-xl {
  grid-template-columns: 1fr;
}

.archive-directory.view-xl .archive-dossier {
  grid-template-columns: 40% 80px 1fr 70px 50px;
  min-height: 250px;
  padding: 0 26px 0 0;
  border: 1px solid rgba(0,0,0,.09);
}

.archive-directory.view-xl .archive-thumb {
  width: 100%;
  height: 250px;
}


/* ==================================================
   06. HYBRID PALINDROME MODAL
   ================================================== */

.modal-v12 {
  background: rgba(245,245,242,.84);
  backdrop-filter: blur(18px);
}

.archive-modal-panel-v12 {
  width: min(1160px, 82vw);
  grid-template-columns: 330px 1fr;
  gap: 44px;
  align-items: center;
}

.archive-modal-panel-v12 h2 {
  font-weight: 400;
  letter-spacing: .46em;
}

.archive-video-frame-v12 {
  aspect-ratio: 16 / 9;
  min-height: auto;
  height: auto;
}

.archive-video-frame-v12 .palindrome-mini {
  font-weight: 400;
}

.archive-restricted-box-v12 {
  margin-top: 30px;
  padding: 34px 0;
  border-top: 1px solid rgba(0,0,0,.14);
  border-bottom: 1px solid rgba(0,0,0,.14);
  text-align: left;
}

.restricted-lock-v12 {
  width: 74px;
  height: 74px;
  border: 1px solid rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  color: var(--red);
  margin-bottom: 24px;
}

.archive-lock-box-v12 {
  margin-top: 30px;
}

.access-input-wrap {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  width: 100%;
  margin-bottom: 14px;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.42);
}

.access-input-icon {
  display: grid;
  place-items: center;
  color: #999;
  letter-spacing: 0;
  font-size: 13px;
}

.access-input-wrap input {
  border: none;
  background: transparent;
  padding: 14px 12px;
  margin: 0;
  outline: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .34em;
}

.lock-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.lock-actions button {
  margin-top: 0;
}

#archiveUnlockButton {
  background: #111;
  border-color: #111;
  color: #fff;
}

.back-to-archives {
  border-color: rgba(227,34,34,.45);
  background: transparent;
  color: var(--red);
}


/* ==================================================
   07. GLOBE RING THINNER
   ================================================== */

.geo-sphere::after {
  inset: 24px !important;
  border: 1px solid rgba(227,34,34,.16) !important;
  box-shadow: none !important;
  opacity: .45 !important;
}


/* ==================================================
   08. NIGHT MODE
   ================================================== */

body.theme-night .menu-slider-shell,
body.theme-night .sound-switch,
body.theme-night .archive-system-status-v12,
body.theme-night .archive-view-toggle-v12 {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}

body.theme-night .theme-menu-v12 .theme-menu-button,
body.theme-night .theme-quick-toggle,
body.theme-night .sound-switch,
body.theme-night .socials-v12 a,
body.theme-night .socials-v12 span,
body.theme-night .ig-link-v12,
body.theme-night .copyright-v12 {
  color: #f3f3f0;
}

body.theme-night .theme-quick-icon,
body.theme-night .archive-status.archive-lock-only,
body.theme-night .archive-status.archive-omega-only,
body.theme-night .restricted-lock-v12,
body.theme-night .access-input-wrap {
  border-color: rgba(255,255,255,.14);
}

body.theme-night .archive-omega-only {
  color: #f3f3f0;
}


/* ==================================================
   09. MOBILE
   ================================================== */

@media (max-width: 768px) {
  .sidebar-footer-v12 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 18px;
    gap: 10px;
  }

  .socials-v12 {
    gap: 8px;
    font-size: 11px;
  }

  .ig-link-v12 {
    font-size: 6px;
    letter-spacing: .22em;
  }

  .sound-switch {
    width: 86px;
    height: 34px;
    grid-template-columns: 16px 1fr;
    gap: 5px;
    padding: 0 6px;
  }

  .sound-switch-track {
    display: none;
  }

  .sound-switch-text {
    font-size: 5.7px;
    letter-spacing: .12em;
  }

  .sound-svg {
    width: 11px;
    height: 11px;
  }

  .copyright-v12 {
    max-width: 90px;
    font-size: 5.6px;
    letter-spacing: .15em;
    line-height: 1.6;
    white-space: normal;
  }

  .copyright-v12 .copyright-full {
    display: none;
  }

  .copyright-v12 .copyright-short {
    display: inline;
  }

  .rights-line {
    font-size: 5px;
    letter-spacing: .13em;
  }

  .theme-menu-v12 {
    right: 18px;
    top: 82px;
  }

  .menu-slider-shell {
    transform: scale(.86);
    transform-origin: right top;
  }

  .archive-header {
    grid-template-columns: 1fr;
  }

  .archive-side-controls-v12 {
    justify-items: start;
  }

  .archive-view-toggle-v12 {
    flex-wrap: wrap;
  }

  .archive-memo-top {
    justify-content: flex-start;
    display: grid;
    gap: 10px;
    font-size: 7px;
    letter-spacing: .2em;
  }

  .archive-dossier,
  .archive-directory.view-grid .archive-dossier,
  .archive-directory.view-large .archive-dossier,
  .archive-directory.view-xl .archive-dossier {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 20px 0;
  }

  .archive-directory.view-grid,
  .archive-directory.view-large,
  .archive-directory.view-xl {
    grid-template-columns: 1fr;
  }

  .archive-thumb,
  .archive-directory.view-grid .archive-thumb,
  .archive-directory.view-large .archive-thumb,
  .archive-directory.view-xl .archive-thumb {
    width: 100%;
    height: 145px;
  }

  .archive-status.archive-lock-only,
  .archive-status.archive-omega-only {
    justify-self: start;
    width: 36px;
    height: 36px;
  }

  .archive-modal-panel-v12 {
    width: calc(100vw - 120px);
    grid-template-columns: 1fr;
    gap: 28px;
    margin-left: 92px;
  }

  .lock-actions {
    grid-template-columns: 1fr;
  }
}

/* 🟥 RED HIGHLIGHT END */

/* 🟩 GREEN HIGHLIGHT START: VERSION 12.2 FINAL SMOOTHING OVERRIDES */

/*
  VERSION 12.2 GOAL:
  - Revert archive list alignment back to the older left-aligned structure.
  - Keep the newer top-right system/memo controls.
  - Add lock icon + clearance notation back.
  - Restore archive title font weight.
  - Make menu + sound controls rounded.
  - Keep full IG handle.
  - Add true drag behavior styling for the sound slider.
*/

/* 01. SIDEBAR FOOTER / FULL IG / ROUNDED SOUND SLIDER */
.sidebar-footer-v12 {
  display: grid;
  gap: 14px;
  align-items: start;
  justify-items: start;
}

.socials-v12 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  color: #777;
  font-size: 13px;
  letter-spacing: 0;
}

.socials-v12 a,
.socials-v12 span {
  color: #777;
  text-decoration: none;
  opacity: .82;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}

.socials-v12 a:hover,
.socials-v12 span:hover {
  color: var(--red);
  opacity: 1;
  transform: translateY(-2px);
}

.ig-link-v12 {
  display: inline-block;
  color: #777;
  text-decoration: none;
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.2;
  white-space: nowrap;
  transition: color .25s ease;
}

.ig-link-v12:hover { color: var(--red); }

.sound-switch {
  width: 154px;
  height: 38px;
  margin-top: 0;
  padding: 0 8px;
  border: 1px solid rgba(227,34,34,.46);
  border-radius: 999px;
  background: rgba(255,255,255,.46);
  display: grid;
  grid-template-columns: 18px 1fr 38px;
  align-items: center;
  gap: 8px;
  color: var(--red);
  cursor: pointer;
  user-select: none;
  touch-action: pan-y;
  box-shadow: 0 0 20px rgba(227,34,34,.08);
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.sound-switch:hover {
  transform: translateX(3px);
  border-color: rgba(227,34,34,.68);
  box-shadow: 0 0 26px rgba(227,34,34,.13);
}

.sound-switch-icon {
  display: grid;
  place-items: center;
  letter-spacing: 0;
}

.sound-svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sound-switch-text {
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .22em;
  white-space: nowrap;
}

.sound-switch-track {
  width: 36px;
  height: 17px;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 999px;
  position: relative;
  background: rgba(0,0,0,.035);
  cursor: grab;
}

.sound-switch-track:active { cursor: grabbing; }

.sound-switch-knob {
  position: absolute;
  left: 3px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #999;
  transform: translateY(-50%);
  transition: left .25s ease, background .25s ease, box-shadow .25s ease;
}

.sound-switch.active {
  color: var(--red);
  border-color: rgba(227,34,34,.62);
  background: rgba(255,255,255,.68);
}

.sound-switch.active .sound-switch-knob {
  left: 22px;
  background: var(--red);
  box-shadow: 0 0 13px rgba(227,34,34,.55);
}

.copyright-v12 {
  position: static;
  left: auto;
  bottom: auto;
  max-width: none;
  color: #777;
  font-size: 6.5px;
  letter-spacing: .18em;
  line-height: 1.75;
  white-space: nowrap;
}

.copyright-v12 .copyright-short { display: none; }

.rights-line {
  display: block;
  margin-top: 4px;
  font-size: 5.8px;
  letter-spacing: .18em;
  color: #999;
}

/* 02. ROUNDED MENU / LIGHT-DARK SLIDER */
.theme-menu-v12 {
  position: fixed;
  right: 34px;
  top: 52px;
  z-index: 70;
  display: grid;
  justify-items: end;
}

.menu-slider-shell {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(0,0,0,.045);
}

.theme-menu-v12 .theme-menu-button {
  position: static;
  border: none;
  width: auto;
  min-width: 88px;
  height: 38px;
  padding: 0 18px 0 20px;
  background: transparent;
  color: #111;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .34em;
  cursor: pointer;
}

.theme-quick-toggle {
  width: 42px;
  height: 38px;
  border: none;
  border-left: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.28);
  color: #111;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.theme-quick-icon {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  letter-spacing: 0;
}

.theme-menu-v12 .theme-menu-panel {
  top: 48px;
  right: 0;
  border-radius: 16px;
  overflow: hidden;
}

/* 03. ARCHIVE HEADER: OLD LEFT ALIGNMENT + NEW CONTROLS */
.archive-system {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-bottom: 50px;
}

.archive-header {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(440px, 560px);
  align-items: start;
  gap: 54px;
}

.archive-side-controls-v12 {
  justify-items: end;
  align-content: start;
  gap: 18px;
}

.archive-system-status-v12 {
  padding: 16px 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.27);
}

.archive-view-toggle-v12 {
  display: flex;
  gap: 0;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.45);
}

.archive-view-toggle-v12 .view-btn {
  border: none;
  border-right: 1px solid rgba(0,0,0,.07);
  background: transparent;
  padding: 12px 16px;
  font-size: 8px;
  letter-spacing: .28em;
}

.archive-view-toggle-v12 .view-btn:last-child { border-right: none; }

.archive-view-toggle-v12 .view-btn.active {
  background: rgba(227,34,34,.055);
  color: var(--red);
}

.archive-memo-top {
  max-width: 720px;
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.10);
  justify-content: flex-end;
  gap: 26px;
  font-size: 9px;
  letter-spacing: .34em;
}

/* 04. ARCHIVE ROWS: LEFT-ALIGNED LIST + LOCK TEXT RESTORED */
.archive-directory {
  max-width: 1180px;
  width: 100%;
  margin: 58px 0 0;
  gap: 0;
}

.archive-dossier {
  grid-template-columns: 190px 110px minmax(330px, 1fr) 310px 50px;
  gap: 28px;
  min-height: 82px;
  padding: 0 22px 0 0;
  border-top: 1px solid rgba(0,0,0,.095);
  background: rgba(255,255,255,.22);
}

.archive-dossier:last-child { border-bottom: 1px solid rgba(0,0,0,.095); }

.archive-dossier:hover {
  background: rgba(255,255,255,.62);
  transform: translateX(7px);
}

.archive-thumb {
  width: 190px;
  height: 76px;
}

.archive-info h3,
.archive-card h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .52em;
}

.archive-info p,
.archive-card p {
  margin-top: 8px;
  color: #666;
  font-size: 9px;
  letter-spacing: .38em;
}

.archive-status {
  color: var(--red);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .36em;
  text-align: left;
}

.archive-lock-status,
.archive-omega-status {
  justify-self: start;
  align-self: center;
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--red);
  text-align: left;
  letter-spacing: .34em;
  white-space: nowrap;
}

.archive-lock-icon-box,
.archive-omega-icon {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(0,0,0,.09);
  background: rgba(255,255,255,.28);
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  letter-spacing: 0;
}

.archive-omega-icon {
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 800;
  color: #111;
}

.cm-lock-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cm-lock-icon-large {
  width: 24px;
  height: 24px;
}

/* 05. ARCHIVE VIEW MODES: LIST / GRID / LARGE / XL */
.archive-directory.view-grid,
.archive-directory.view-large,
.archive-directory.view-xl {
  display: grid;
  border-top: none;
  gap: 18px;
}

.archive-directory.view-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.archive-directory.view-grid .archive-dossier {
  min-height: 245px;
  grid-template-columns: 1fr;
  padding: 24px;
  text-align: center;
  border: 1px solid rgba(0,0,0,.09);
}

.archive-directory.view-grid .archive-thumb {
  width: 100%;
  height: 112px;
}

.archive-directory.view-grid .archive-num,
.archive-directory.view-grid .archive-status,
.archive-directory.view-grid .archive-arrow,
.archive-directory.view-grid .archive-lock-status,
.archive-directory.view-grid .archive-omega-status {
  justify-self: center;
  text-align: center;
}

.archive-directory.view-grid .archive-lock-status,
.archive-directory.view-grid .archive-omega-status {
  flex-direction: column;
  gap: 10px;
}

.archive-directory.view-large { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.archive-directory.view-large .archive-dossier {
  grid-template-columns: 1fr;
  min-height: 315px;
  padding: 28px;
  border: 1px solid rgba(0,0,0,.09);
}

.archive-directory.view-large .archive-thumb {
  width: 100%;
  height: 155px;
}

.archive-directory.view-xl { grid-template-columns: 1fr; }

.archive-directory.view-xl .archive-dossier {
  grid-template-columns: 40% 80px 1fr 310px 50px;
  min-height: 250px;
  padding: 0 26px 0 0;
  border: 1px solid rgba(0,0,0,.09);
}

.archive-directory.view-xl .archive-thumb {
  width: 100%;
  height: 250px;
}

/* 06. HYBRID PALINDROME MODAL */
.modal-v12 {
  background: rgba(245,245,242,.84);
  backdrop-filter: blur(18px);
}

.archive-modal-panel-v12 {
  width: min(1160px, 82vw);
  grid-template-columns: 330px 1fr;
  gap: 44px;
  align-items: center;
}

.archive-modal-panel-v12 h2 {
  font-weight: 400;
  letter-spacing: .46em;
}

.archive-video-frame-v12 {
  aspect-ratio: 16 / 9;
  min-height: auto;
  height: auto;
}

.archive-video-frame-v12 .palindrome-mini { font-weight: 400; }

.archive-restricted-box-v12 {
  margin-top: 30px;
  padding: 34px 0;
  border-top: 1px solid rgba(0,0,0,.14);
  border-bottom: 1px solid rgba(0,0,0,.14);
  text-align: left;
}

.restricted-lock-v12 {
  width: 74px;
  height: 74px;
  border: 1px solid rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  color: var(--red);
  margin-bottom: 24px;
}

.archive-lock-box-v12 { margin-top: 30px; }

.access-input-wrap {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  width: 100%;
  margin-bottom: 14px;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.42);
}

.access-input-icon {
  display: grid;
  place-items: center;
  color: #999;
  letter-spacing: 0;
  font-size: 13px;
}

.access-input-wrap input {
  border: none;
  background: transparent;
  padding: 14px 12px;
  margin: 0;
  outline: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .34em;
}

.lock-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.lock-actions button { margin-top: 0; }

#archiveUnlockButton {
  background: #111;
  border-color: #111;
  color: #fff;
}

.back-to-archives {
  border-color: rgba(227,34,34,.45);
  background: transparent;
  color: var(--red);
}

/* 07. GLOBE RING THINNER / SMALLER */
.geo-sphere::after {
  inset: 24px !important;
  border: 1px solid rgba(227,34,34,.16) !important;
  box-shadow: none !important;
  opacity: .45 !important;
}

/* 08. NIGHT MODE */
body.theme-night .menu-slider-shell,
body.theme-night .sound-switch,
body.theme-night .archive-system-status-v12,
body.theme-night .archive-view-toggle-v12 {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}

body.theme-night .theme-menu-v12 .theme-menu-button,
body.theme-night .theme-quick-toggle,
body.theme-night .sound-switch,
body.theme-night .socials-v12 a,
body.theme-night .socials-v12 span,
body.theme-night .ig-link-v12,
body.theme-night .copyright-v12 {
  color: #f3f3f0;
}

body.theme-night .theme-quick-icon,
body.theme-night .archive-lock-icon-box,
body.theme-night .archive-omega-icon,
body.theme-night .restricted-lock-v12,
body.theme-night .access-input-wrap {
  border-color: rgba(255,255,255,.14);
}

body.theme-night .archive-omega-icon { color: #f3f3f0; }

/* 09. MOBILE CLEANUP */
@media (max-width: 768px) {
  .sidebar {
    width: 132px;
    padding: 24px 12px 18px;
    overflow: hidden;
  }

  .main {
    margin-left: 132px;
    width: calc(100% - 132px);
  }

  .nav a {
    grid-template-columns: 17px 1fr;
    gap: 7px;
  }

  .nav-label {
    font-size: 6.15px;
    letter-spacing: .075em;
    white-space: nowrap;
  }

  .nav-num {
    font-size: 8px;
    letter-spacing: .06em;
  }

  .sidebar-footer-v12 {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 18px;
    gap: 10px;
  }

  .socials-v12 {
    gap: 8px;
    font-size: 11px;
  }

  .ig-link-v12 {
    font-size: 5.3px;
    letter-spacing: .035em;
    max-width: 108px;
  }

  .sound-switch {
    width: 108px;
    height: 34px;
    grid-template-columns: 14px 1fr 30px;
    gap: 5px;
    padding: 0 7px;
  }

  .sound-switch-text {
    font-size: 5.35px;
    letter-spacing: .075em;
  }

  .sound-svg {
    width: 11px;
    height: 11px;
  }

  .sound-switch-track {
    width: 29px;
    height: 15px;
  }

  .sound-switch-knob {
    width: 9px;
    height: 9px;
    left: 2px;
  }

  .sound-switch.active .sound-switch-knob { left: 17px; }

  .copyright-v12 {
    max-width: 108px;
    font-size: 5.3px;
    letter-spacing: .10em;
    line-height: 1.55;
    white-space: normal;
  }

  .copyright-v12 .copyright-full { display: none; }
  .copyright-v12 .copyright-short { display: inline; }

  .rights-line {
    font-size: 4.9px;
    letter-spacing: .08em;
  }

  .theme-menu-v12 {
    right: 18px;
    top: 82px;
  }

  .menu-slider-shell {
    transform: scale(.86);
    transform-origin: right top;
  }

  .back-home { left: 146px; }

  .archive-header { grid-template-columns: 1fr; }
  .archive-side-controls-v12 { justify-items: start; }
  .archive-view-toggle-v12 { flex-wrap: wrap; }

  .archive-memo-top {
    justify-content: flex-start;
    display: grid;
    gap: 10px;
    font-size: 7px;
    letter-spacing: .2em;
  }

  .archive-directory { margin-top: 34px; }

  .archive-dossier,
  .archive-directory.view-grid .archive-dossier,
  .archive-directory.view-large .archive-dossier,
  .archive-directory.view-xl .archive-dossier {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 20px 0;
  }

  .archive-directory.view-grid,
  .archive-directory.view-large,
  .archive-directory.view-xl {
    grid-template-columns: 1fr;
  }

  .archive-thumb,
  .archive-directory.view-grid .archive-thumb,
  .archive-directory.view-large .archive-thumb,
  .archive-directory.view-xl .archive-thumb {
    width: 100%;
    height: 145px;
  }

  .archive-lock-status,
  .archive-omega-status {
    justify-self: start;
    gap: 10px;
    font-size: 7px;
    letter-spacing: .16em;
    white-space: normal;
  }

  .archive-lock-icon-box,
  .archive-omega-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .archive-modal-panel-v12 {
    width: calc(100vw - 148px);
    grid-template-columns: 1fr;
    gap: 28px;
    margin-left: 132px;
  }

  .lock-actions { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .sidebar { width: 126px; }

  .main {
    margin-left: 126px;
    width: calc(100% - 126px);
  }

  .back-home { left: 140px; }

  .nav-label {
    font-size: 5.85px;
    letter-spacing: .055em;
  }

  .ig-link-v12 { font-size: 5px; }

  .sound-switch { width: 102px; }

  .archive-modal-panel-v12 {
    width: calc(100vw - 140px);
    margin-left: 126px;
  }
}

/* 🟥 RED HIGHLIGHT END: VERSION 12.2 FINAL SMOOTHING OVERRIDES */


/* 🟩 GREEN HIGHLIGHT START: VERSION 12.4 TRUE DO-OVER FROM 12.2 BASE */

/*
  VERSION 12.4 TRUE DO-OVER:
  This patch starts from Version 12.2, not Version 10 and not Version 12.3.

  Keep from 12.2:
  - Archive layout with thumbnails
  - Rounded menu/light toggle
  - Rounded sound slider
  - Full IG handle
  - Lock icon + clearance text
  - LIST / GRID / LARGE / XL view system

  Only adjust:
  1. Palindrome modal/video frame closer to Version 10 size.
  2. Sound text slightly bigger and button pulled left so it does not hit the sidebar grid line.
  3. GLOBAL SIGNAL LIVE moved down so it is not hidden by the menu toggle.
*/

/* 01. PALINDROME MODAL — KEEP 12.2, RESTORE V10 VIDEO PROPORTION */
.modal-v12 .archive-modal-panel-v12,
.archive-modal-panel-v12 {
  width: min(1160px, 82vw) !important;
  grid-template-columns: 390px minmax(620px, 1fr) !important;
  gap: 44px !important;
  align-items: center !important;
}

.modal-v12 .archive-video-frame-v12,
.archive-video-frame-v12 {
  width: 100% !important;
  max-width: 760px !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  height: auto !important;
  justify-self: start !important;
}

.modal-v12 .archive-video-frame-v12 .palindrome-mini,
.archive-video-frame-v12 .palindrome-mini {
  font-weight: 400 !important;
  font-size: clamp(18px, 2vw, 34px) !important;
  letter-spacing: .55em !important;
}

/* 02. SOUND SLIDER — KEEP 12.2 SHAPE, CLEANER FIT IN LEFT SIDEBAR */
.sidebar-footer-v12 .sound-switch,
.sound-switch {
  width: 132px !important;
  height: 38px !important;
  margin-left: -6px !important;
  padding: 0 7px !important;
  grid-template-columns: 15px 1fr 30px !important;
  gap: 6px !important;
  border-radius: 999px !important;
}

.sound-switch-text {
  font-size: 7px !important;
  font-weight: 900 !important;
  letter-spacing: .17em !important;
}

.sound-svg {
  width: 12px !important;
  height: 12px !important;
}

.sound-switch-track {
  width: 30px !important;
  height: 16px !important;
}

.sound-switch-knob {
  width: 9px !important;
  height: 9px !important;
  left: 3px !important;
}

.sound-switch.active .sound-switch-knob {
  left: 18px !important;
}

/* Keep copyright one line on desktop without pushing the sound button into the grid line. */
.copyright-v12 {
  max-width: none !important;
  white-space: nowrap !important;
}

/* 03. GLOBAL SIGNAL LIVE — MOVE DOWN BELOW THE MENU TOGGLE */
@media (min-width: 901px) {
  .geo-header {
    top: 42px !important;
    right: 38px !important;
  }
}

/* 04. MOBILE — PRESERVE 12.2 BUT PREVENT CROWDING */
@media (max-width: 768px) {
  .sidebar-footer-v12 .sound-switch,
  .sound-switch {
    width: 108px !important;
    margin-left: 0 !important;
    grid-template-columns: 14px 1fr 28px !important;
    gap: 5px !important;
  }

  .sound-switch-text {
    font-size: 5.8px !important;
    letter-spacing: .09em !important;
  }

  .sound-switch-track {
    width: 28px !important;
    height: 15px !important;
  }

  .sound-switch.active .sound-switch-knob {
    left: 16px !important;
  }

  .archive-modal-panel-v12 {
    width: calc(100vw - 148px) !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-left: 132px !important;
  }

  .archive-video-frame-v12 {
    max-width: 100% !important;
  }

  .archive-video-frame-v12 .palindrome-mini {
    font-size: 18px !important;
    letter-spacing: .32em !important;
  }

  .geo-header {
    top: 34px !important;
  }
}

@media (max-width: 390px) {
  .archive-modal-panel-v12 {
    width: calc(100vw - 140px) !important;
    margin-left: 126px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: VERSION 12.4 TRUE DO-OVER FROM 12.2 BASE */

/* 🟩 GREEN HIGHLIGHT START: VERSION 14 PHASE 1.2 — DYNAMIC ARCHIVE VIDEO SCREENS */

/*
  PURPOSE:
  - Keep the existing modal layout.
  - Keep the existing video frame size.
  - Archive 005 shows the interactive Palindrome cipher.
  - All other archives get their own themed video screen.
  - Add visible play buttons for non-005 archives.
  - Shift the frame slightly right on desktop so it does not collide with PALINDROME FILE.
*/

.archive-video-frame-v14p2 {
  position: relative;
  overflow: hidden;
  cursor: default;
}

.archive-video-frame-v14p2::before,
.archive-video-frame-v14p2::after {
  display: none !important;
  content: none !important;
}

@media (min-width: 901px) {
  .archive-video-frame-v14p2 {
    transform: translateX(34px);
  }
}

/* Default: show custom archive video screen */
.archive-video-frame-v14p2 .archive-dynamic-preview {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  background: #080808;
  color: #fff;
}

.archive-video-frame-v14p2 .palindrome-cipher {
  display: none;
}

/* Archive 005 only: hide preview, show interactive cipher */
.archive-video-frame-v14p2.is-archive-005 .archive-dynamic-preview {
  display: none;
}

.archive-video-frame-v14p2.is-archive-005 .palindrome-cipher {
  display: grid;
}

/* General video-screen art */
.archive-preview-art {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(135deg, #050505, #191919 54%, #070707);
}

.archive-preview-art::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .85;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
}

.archive-preview-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(0,0,0,.28) 68%, rgba(0,0,0,.74) 100%);
}

.archive-preview-label {
  position: absolute;
  left: 28px;
  top: 24px;
  z-index: 4;
  color: var(--red);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .42em;
}

/* Play button */
.archive-preview-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(4px);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.archive-preview-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: rgba(227,34,34,.95);
  background: rgba(227,34,34,.14);
  box-shadow: 0 0 32px rgba(227,34,34,.22);
}

.archive-preview-play span {
  position: absolute;
  left: 30px;
  top: 23px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 18px solid #fff;
}

/* Caption strip */
.archive-preview-caption {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  padding: 0 30px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(5,5,5,.94);
}

.archive-preview-caption strong {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .42em;
}

.archive-preview-caption small {
  color: var(--red);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .38em;
}

/* ARCHIVE 001 — NYE / fireworks */
.archive-video-frame-v14p2.archive-visual-001 .archive-preview-art {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 32%, rgba(255,255,255,.75) 0 2px, transparent 3px),
    radial-gradient(circle at 44% 42%, rgba(227,34,34,.36), transparent 20%),
    radial-gradient(circle at 50% 72%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(180deg, #020202, #111 55%, #050505);
}

/* ARCHIVE 002 — Love & Rock / stage */
.archive-video-frame-v14p2.archive-visual-002 .archive-preview-art {
  background:
    radial-gradient(circle at 22% 26%, rgba(255,255,255,.18), transparent 16%),
    radial-gradient(circle at 74% 28%, rgba(255,255,255,.16), transparent 18%),
    linear-gradient(105deg, transparent 0 42%, rgba(255,255,255,.14) 43%, transparent 52%),
    linear-gradient(255deg, transparent 0 46%, rgba(227,34,34,.18) 47%, transparent 58%),
    linear-gradient(180deg, #050505, #171717 54%, #030303);
}

/* ARCHIVE 003 — Cabana / pool/dayclub */
.archive-video-frame-v14p2.archive-visual-003 .archive-preview-art {
  background:
    radial-gradient(circle at 48% 72%, rgba(255,255,255,.22), transparent 16%),
    linear-gradient(0deg, rgba(160,210,230,.20), transparent 42%),
    linear-gradient(90deg, rgba(255,255,255,.08) 0 12%, transparent 13% 100%),
    radial-gradient(circle at 75% 34%, rgba(255,255,255,.15), transparent 20%),
    linear-gradient(180deg, #0b0d0e, #1a1d1e 58%, #070707);
}

/* ARCHIVE 004 — Night Luxe / city after dark */
.archive-video-frame-v14p2.archive-visual-004 .archive-preview-art {
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.14) 11% 12%, transparent 13% 100%),
    linear-gradient(90deg, transparent 0 38%, rgba(255,255,255,.18) 39% 40%, transparent 41% 100%),
    linear-gradient(0deg, rgba(227,34,34,.14), transparent 38%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(180deg, #030303, #151515 50%, #040404);
}

/* ARCHIVE 006 — Classified */
.archive-video-frame-v14p2.archive-visual-006 .archive-preview-art {
  background:
    linear-gradient(90deg, rgba(0,0,0,.9), transparent 42%, rgba(0,0,0,.88)),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.34), transparent 13%),
    linear-gradient(180deg, #050505, #161616 54%, #030303);
}

/* ARCHIVE 007 — Top Secret */
.archive-video-frame-v14p2.archive-visual-007 .archive-preview-art {
  background:
    linear-gradient(18deg, transparent 0 38%, rgba(255,255,255,.12) 39% 44%, transparent 45% 100%),
    radial-gradient(circle at 52% 52%, rgba(255,255,255,.18), transparent 24%),
    linear-gradient(180deg, #040404, #161616 50%, #030303);
}

.archive-video-frame-v14p2.archive-visual-007 .archive-preview-art::before {
  content: "TOP SECRET";
  position: absolute;
  left: 32%;
  top: 45%;
  transform: rotate(-10deg);
  color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.25);
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .3em;
}

/* ARCHIVE 008 — God File / redacted signal */
.archive-video-frame-v14p2.archive-visual-008 .archive-preview-art {
  background:
    radial-gradient(circle at 50% 48%, rgba(227,34,34,.22), transparent 20%),
    linear-gradient(90deg, transparent 0 20%, rgba(255,255,255,.1) 21% 25%, transparent 26% 100%),
    linear-gradient(0deg, transparent 0 42%, rgba(255,255,255,.12) 43% 47%, transparent 48% 100%),
    linear-gradient(180deg, #050505, #171717 55%, #030303);
}

.archive-video-frame-v14p2.archive-visual-008 .archive-preview-art::before {
  content: "△";
  display: grid;
  place-items: center;
  color: rgba(227,34,34,.78);
  font-size: 96px;
  background: radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(227,34,34,.12) 29% 30%, transparent 31%);
}

/* ARCHIVE 009 — Omega */
.archive-video-frame-v14p2.archive-visual-009 .archive-preview-art {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.36), transparent 10%),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.16), transparent 30%),
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(255,255,255,.16) 29% 30%, transparent 31%),
    linear-gradient(180deg, #050505, #161616 54%, #020202);
}

.archive-video-frame-v14p2.archive-visual-009 .archive-preview-art::before {
  content: "Ω";
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.62);
  font-size: 82px;
  font-family: Georgia, serif;
}

/* Interactive Palindrome cipher */
.palindrome-cipher {
  position: absolute;
  inset: 0;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 24px;
  padding: 38px 28px 28px;
  color: #fff;
  background:
    radial-gradient(circle at 47% 50%, rgba(227,34,34,.17), transparent 37%),
    linear-gradient(90deg, rgba(227,34,34,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(135deg, #070707, #1b1b1b 54%, #050505);
  background-size:
    100% 100%,
    78px 78px,
    22px 22px,
    100% 100%;
}

.palindrome-cipher::before {
  content: "";
  position: absolute;
  left: 43%;
  top: 50%;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(227,34,34,.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.palindrome-cipher::after {
  content: "";
  position: absolute;
  left: 43%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(227,34,34,.25);
  box-shadow: 0 0 28px rgba(227,34,34,.28);
  pointer-events: none;
}

.cipher-kicker {
  position: absolute;
  left: 28px;
  top: 22px;
  z-index: 4;
  color: var(--red);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .46em;
}

.cipher-grid {
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(5, 64px);
  grid-template-rows: repeat(5, 56px);
  border: 1px solid rgba(255,255,255,.14);
  position: relative;
  z-index: 3;
}

.cipher-cell {
  border: none;
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.88);
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  cursor: pointer;
}

.cipher-cell:nth-child(5n) {
  border-right: none;
}

.cipher-cell:nth-last-child(-n + 5) {
  border-bottom: none;
}

.cipher-cell:hover,
.cipher-cell.is-active {
  color: var(--red);
  background: rgba(227,34,34,.16);
}

.cipher-cell.is-axis {
  color: var(--red);
  background: rgba(227,34,34,.09);
}

.cipher-cell.is-mirror {
  color: #fff;
  background: rgba(255,255,255,.12);
}

.cipher-readout {
  align-self: center;
  position: relative;
  z-index: 4;
  border-left: 1px solid rgba(255,255,255,.08);
  padding-left: 22px;
}

.cipher-readout-header span,
.cipher-readout-header small {
  display: block;
  color: var(--red);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .38em;
}

.cipher-readout-header strong {
  display: block;
  color: #fff;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .34em;
  margin: 14px 0 10px;
}

.cipher-readout p {
  color: rgba(255,255,255,.64) !important;
  font-size: 7.8px !important;
  letter-spacing: .21em !important;
  line-height: 1.9 !important;
  margin: 18px 0 20px !important;
}

.cipher-symbol-list {
  display: grid;
  gap: 10px;
}

.cipher-symbol-card {
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  color: #fff;
  text-align: left;
  padding: 11px 13px;
  cursor: pointer;
}

.cipher-symbol-card:hover,
.cipher-symbol-card.active {
  border-color: rgba(227,34,34,.46);
  background: rgba(227,34,34,.12);
}

.cipher-symbol-card strong {
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .34em;
  margin-bottom: 7px;
}

.cipher-symbol-card span {
  display: block;
  color: var(--red);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .28em;
}

/* Mobile */
@media (max-width: 900px) {
  .archive-video-frame-v14p2 {
    transform: none;
  }

  .palindrome-cipher {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 48px 18px 22px;
    min-height: 560px;
  }

  .cipher-grid {
    width: 100%;
    grid-template-columns: repeat(5, minmax(38px, 1fr));
    grid-template-rows: repeat(5, 52px);
  }

  .cipher-cell {
    font-size: 27px;
  }

  .cipher-readout {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-left: 0;
    padding-top: 18px;
  }
}

/* 🟥 RED HIGHLIGHT END: VERSION 14 PHASE 1.2 — DYNAMIC ARCHIVE VIDEO SCREENS */

/* 🟩 GREEN HIGHLIGHT START: VERSION 20 HOMEPAGE — VERSION 6 CENTER RESTORE */

/*
  VERSION 20 GOAL:
  - Restore Version 6-style homepage balance.
  - CM hero mark is centered and no longer touches the top.
  - Countdown stays locked bottom-left.
  - Stay In The Loop stays below the logo, but no longer pushes the logo upward.
  - Keep System / Coming Soon and bottom-right loading text.
*/

@media (min-width: 901px) {
  .home {
    display: block !important;
    position: relative !important;
    min-height: 100vh !important;
    padding: 0 88px !important;
    text-align: center;
  }

  .hero-wrap {
    position: absolute !important;
    left: 50% !important;
    top: calc(50% - 70px) !important;
    width: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 12;
  }

  .hero-mark {
    width: min(590px, 54vw, calc(100vh - 140px)) !important;
    height: min(590px, 54vw, calc(100vh - 140px)) !important;
    margin: 0 auto !important;
  }

  .home-signup {
    position: absolute !important;
    left: 50% !important;
    bottom: 54px !important;
    transform: translateX(-50%) !important;
    width: min(430px, 32vw) !important;
    max-width: 430px !important;
    z-index: 16;
    text-align: left;
  }

  .loop-label {
    color: var(--ink);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .48em;
    margin-bottom: 16px;
  }

  .loop-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 10px;
    align-items: center;
  }

  .loop-form input {
    width: 100%;
    height: 38px;
    border: 1px solid rgba(0,0,0,.18);
    background: rgba(255,255,255,.34);
    color: #111;
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: .06em;
    outline: none;
  }

  .loop-form input:focus {
    border-color: rgba(227,34,34,.62);
    box-shadow: 0 0 18px rgba(227,34,34,.08);
  }

  .loop-form button {
    height: 38px;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .34em;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
  }

  .loop-form button:hover {
    background: var(--red);
    border-color: var(--red);
  }

  .loop-copy {
    margin-top: 16px;
    color: #555;
    font-size: 8px;
    letter-spacing: .36em;
    line-height: 1.8;
  }

  .launch-countdown {
    position: absolute !important;
    left: 52px !important;
    bottom: 46px !important;
    transform: none !important;
    transform-origin: left bottom !important;
    z-index: 16 !important;
    max-width: 620px;
    text-align: left;
  }

  .loading {
    position: absolute !important;
    right: 52px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 16 !important;
    opacity: 1 !important;
  }

  .tagline {
    position: absolute !important;
    right: 52px !important;
    bottom: 58px !important;
    z-index: 16 !important;
    opacity: 1 !important;
    text-align: right;
  }

  .geo-panel {
    display: none !important;
  }
}

/* Short desktop height protection */
@media (min-width: 901px) and (max-height: 760px) {
  .hero-mark {
    width: min(560px, 52vw, calc(100vh - 126px)) !important;
    height: min(560px, 52vw, calc(100vh - 126px)) !important;
  }

  .home-signup {
    bottom: 46px !important;
  }

  .launch-countdown {
    bottom: 40px !important;
  }

  .tagline {
    bottom: 44px !important;
  }
}

@media (max-width: 900px) {
  .geo-panel {
    display: none !important;
  }

  .hero-wrap {
    transform: none !important;
  }

  .hero-mark {
    margin-left: 0 !important;
  }

  .home-signup {
    width: 100%;
    max-width: 360px;
    margin-top: 26px;
    text-align: center;
    z-index: 16;
  }

  .loop-label {
    color: var(--ink);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .32em;
    margin-bottom: 14px;
  }

  .loop-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .loop-form input,
  .loop-form button {
    height: 38px;
  }

  .loop-copy {
    margin-top: 14px;
    color: #555;
    font-size: 7px;
    letter-spacing: .24em;
    line-height: 1.9;
  }
}

body.theme-night .loop-form input {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: #f3f3f0;
}

body.theme-night .loop-label {
  color: #f3f3f0;
}

body.theme-night .loop-copy {
  color: #b9b9b4;
}

/* 🟥 RED HIGHLIGHT END: VERSION 20 HOMEPAGE — VERSION 6 CENTER RESTORE */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — ARCHIVE HEADER AND THEME MODE CLEANUP */

/*
  VERSION 23.1 GOAL:
  - Move MODE control below the hamburger lines.
  - Rename MENU visually to MODE in HTML.
  - Add light / dark / auto icons.
  - Add red active dot.
  - Realign Archive controls above the archive list.
  - Keep archive list left-aligned.
  - Keep archive memo on one clean line on desktop.
*/

/* ==================================================
   01. TOP-RIGHT MODE CONTROL — BELOW HAMBURGER
   ================================================== */

.hamburger {
  z-index: 95 !important;
}

.theme-menu-v12 {
  top: 76px !important;
  right: 34px !important;
  z-index: 90 !important;
}

.menu-slider-shell {
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.055) !important;
}

.theme-menu-v12 .theme-menu-button {
  min-width: 82px !important;
  height: 38px !important;
  padding: 0 18px 0 20px !important;
  letter-spacing: .36em !important;
}

.theme-quick-toggle {
  width: 42px !important;
  height: 38px !important;
}

.theme-quick-icon {
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Dropdown panel */
.theme-menu-v12 .theme-menu-panel {
  position: absolute !important;
  right: 0 !important;
  top: 50px !important;
  min-width: 215px !important;
  margin-top: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.14) !important;
}

.theme-menu-v12.open .theme-menu-panel {
  display: grid !important;
}

/* Theme option row: icon | label | red active dot */
.theme-menu-v12 .theme-option {
  display: grid !important;
  grid-template-columns: 22px 1fr 12px !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  background: transparent !important;
  color: #111 !important;
  text-align: left !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .28em !important;
}

.theme-menu-v12 .theme-option:last-child {
  border-bottom: none !important;
}

.theme-menu-v12 .theme-option-icon {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  color: #111 !important;
}

.theme-menu-v12 .theme-option-label {
  white-space: nowrap !important;
}

.theme-option-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  opacity: 0 !important;
  box-shadow: 0 0 0 rgba(227,34,34,0) !important;
  transition: opacity .25s ease, box-shadow .25s ease, transform .25s ease !important;
}

.theme-menu-v12 .theme-option:hover {
  color: var(--red) !important;
  background: rgba(227,34,34,.035) !important;
}

.theme-menu-v12 .theme-option:hover .theme-option-dot {
  opacity: .38 !important;
}

.theme-menu-v12 .theme-option.active {
  color: var(--red) !important;
  background: rgba(227,34,34,.055) !important;
}

.theme-menu-v12 .theme-option.active .theme-option-dot {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  box-shadow:
    0 0 0 4px rgba(227,34,34,.08),
    0 0 16px rgba(227,34,34,.72) !important;
}

/* ==================================================
   02. ARCHIVE HEADER CONTROLS — ABOVE LIST, LEFT-ALIGNED
   ================================================== */

   /* 🟩 GREEN HIGHLIGHT ADD */

   /* ==================================================
      02. ARCHIVE HEADER CONTROLS — STACKED / RIGHT-JUSTIFIED
      ================================================== */

   @media (min-width: 901px) {
     .archive-system {
       max-width: none !important;
       width: 100% !important;
       margin: 0 !important;
     }

     /*
       VERSION 23.1 REFINED:
       - Keep archive title/copy on the left.
       - Stack SYSTEM, LIST/GRID, and MEMO vertically.
       - Right-justify the control block like Version 12.
       - Keep the block slightly more centered than Version 12 by limiting the header width.
     */
     .archive-header {
       display: grid !important;
       grid-template-columns: minmax(520px, 1fr) minmax(520px, 670px) !important;
       align-items: start !important;
       gap: 38px !important;
       width: 100% !important;
       max-width: 1180px !important;
     }

     .archive-side-controls-v12 {
       justify-self: end !important;
       align-self: start !important;
       display: grid !important;
       grid-template-columns: 1fr !important;
       justify-items: end !important;
       align-content: start !important;
       gap: 16px !important;
       width: min(670px, 100%) !important;
       margin-top: 8px !important;
       transform: translateX(0) !important;
       text-align: right !important;
     }

     .archive-system-status-v12 {
       justify-self: end !important;
       display: flex !important;
       align-items: center !important;
       justify-content: flex-end !important;
       gap: 24px !important;
       margin: 0 !important;
       padding: 16px 24px !important;
       min-height: 46px !important;
       min-width: 410px !important;
       border: 1px solid rgba(0,0,0,.08) !important;
       background: rgba(255,255,255,.30) !important;
       font-size: 10px !important;
       font-weight: 500 !important;
       letter-spacing: .48em !important;
     }

     .archive-system-status-v12 span,
     .archive-system-status-v12 strong {
       font-weight: 500 !important;
     }

     .archive-system-status-v12 strong {
       color: var(--red) !important;
     }

     .archive-system-status-v12::after {
       content: "" !important;
       display: block !important;
       width: 58px !important;
       height: 1px !important;
       background: var(--red) !important;
     }

     .archive-view-toggle-v12 {
       justify-self: end !important;
       display: flex !important;
       gap: 0 !important;
       margin: 0 !important;
       min-height: 44px !important;
       border: 1px solid rgba(0,0,0,.08) !important;
       background: rgba(255,255,255,.48) !important;
     }

     .archive-view-toggle-v12 .view-btn {
       min-height: 44px !important;
       padding: 0 20px !important;
       border: none !important;
       border-right: 1px solid rgba(0,0,0,.07) !important;
       background: transparent !important;
       font-size: 8px !important;
       font-weight: 500 !important;
       letter-spacing: .28em !important;
     }

     .archive-view-toggle-v12 .view-btn:last-child {
       border-right: none !important;
     }

     .archive-view-toggle-v12 .view-btn.active {
       color: var(--red) !important;
       background: rgba(227,34,34,.055) !important;
       font-weight: 500 !important;
     }

     /*
       Memo sits below the controls, right-justified.
       The full phrase stays on one clean line.
     */
     .archive-memo-top {
       justify-self: end !important;
       display: flex !important;
       flex-wrap: nowrap !important;
       align-items: center !important;
       justify-content: flex-end !important;
       gap: 28px !important;
       max-width: none !important;
       margin: 0 !important;
       padding-top: 16px !important;
       border-top: 1px solid rgba(0,0,0,.10) !important;
       white-space: nowrap !important;
       color: #555 !important;
       font-size: 9px !important;
       font-weight: 500 !important;
       letter-spacing: .34em !important;
       text-align: right !important;
     }

     .archive-memo-top span {
       display: inline-block !important;
       white-space: nowrap !important;
       font-weight: 500 !important;
     }

     .archive-memo-top span:first-child {
       color: var(--red) !important;
     }

     /*
       Keep archive list left-aligned.
       Keep archive titles bold.
     */
     .archive-directory {
       max-width: 1180px !important;
       width: 100% !important;
       margin: 48px 0 0 !important;
     }

     .archive-info h3,
     .archive-card h3 {
       font-weight: 700 !important;
     }
   }

   /* Mid-size desktop protection */
   @media (min-width: 901px) and (max-width: 1320px) {
     .archive-header {
       grid-template-columns: 1fr !important;
     }

     .archive-side-controls-v12 {
       justify-self: end !important;
       justify-items: end !important;
       width: min(670px, 100%) !important;
       margin-top: 24px !important;
       text-align: right !important;
     }

     .archive-memo-top {
       flex-wrap: wrap !important;
       justify-content: flex-end !important;
       white-space: normal !important;
       gap: 14px !important;
     }
   }

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — ARCHIVE HEADER AND THEME MODE CLEANUP */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — ARCHIVE CONTROL FONT-WEIGHT MATCH V12 */

.archive-system-status-v12,
.archive-system-status-v12 span,
.archive-system-status-v12 strong,
.archive-view-toggle-v12 .view-btn,
.archive-view-toggle-v12 .view-btn.active,
.archive-memo-top,
.archive-memo-top span {
  font-weight: 700 !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — ARCHIVE CONTROL FONT-WEIGHT MATCH V12 */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — NIGHT MODE ARCHIVE BOX FINAL RESTORE */

/*
  FIX:
  The 23.1 archive header boxes use light-mode backgrounds with !important.
  This final night-mode override must come AFTER the 23.1 archive header patch.
  It restores the darker v12/v23 night-mode box style.
*/

body.theme-night .archive-header .archive-side-controls-v12 .archive-system-status-v12,
body.theme-night .archive-header .archive-side-controls-v12 .archive-view-toggle-v12 {
  background: rgba(255,255,255,.05) !important;
  background-color: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-view-toggle-v12 .view-btn {
  background: transparent !important;
  background-color: transparent !important;
  border-right-color: rgba(255,255,255,.10) !important;
  color: #f3f3f0 !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-view-toggle-v12 .view-btn.active {
  background: rgba(227,34,34,.08) !important;
  background-color: rgba(227,34,34,.08) !important;
  color: var(--red) !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-system-status-v12 span {
  color: #f3f3f0 !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-system-status-v12 strong {
  color: var(--red) !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-system-status-v12::after {
  background: var(--red) !important;
  opacity: .85 !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-memo-top {
  color: rgba(243,243,240,.58) !important;
  border-top-color: rgba(255,255,255,.10) !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-memo-top span {
  color: rgba(243,243,240,.58) !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-memo-top span:first-child {
  color: var(--red) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — NIGHT MODE ARCHIVE BOX FINAL RESTORE */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — NIGHT MODE MODE BUTTON RESTORE */

/*
  FIX:
  Archive night mode is now correct.
  This only restores the MODE button shell so it no longer looks gray/white in night mode.
*/

body.theme-night .theme-menu-v12 .menu-slider-shell {
  background: rgba(0,0,0,.28) !important;
  background-color: rgba(0,0,0,.28) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: none !important;
}

body.theme-night .theme-menu-v12 .theme-menu-button {
  background: transparent !important;
  background-color: transparent !important;
  color: #f3f3f0 !important;
  border-color: transparent !important;
}

body.theme-night .theme-menu-v12 .theme-quick-toggle {
  background: rgba(255,255,255,.035) !important;
  background-color: rgba(255,255,255,.035) !important;
  color: #f3f3f0 !important;
  border-left-color: rgba(255,255,255,.14) !important;
}

body.theme-night .theme-menu-v12 .theme-quick-icon {
  background: transparent !important;
  background-color: transparent !important;
  color: #f3f3f0 !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Optional: dropdown panel also stays dark/clean if opened */
body.theme-night .theme-menu-v12 .theme-menu-panel {
  background: rgba(0,0,0,.82) !important;
  background-color: rgba(0,0,0,.82) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.36) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — NIGHT MODE MODE BUTTON RESTORE */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — NIGHT MODE ICON VISIBILITY POLISH */

/*
  PURPOSE:
  Keep the darker infrared night mode.
  Do NOT make the boxes gray again.
  Only brighten small icons, borders, arrows, and micro UI details.
*/

/* MODE moon/sun/auto icon — brighter but still dark-mode clean */
body.theme-night .theme-menu-v12 .theme-quick-icon {
  color: rgba(243,243,240,.95) !important;
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.045),
    0 0 14px rgba(255,255,255,.06) !important;
  opacity: 1 !important;
}

/* MODE dropdown icons if the panel is open */
body.theme-night .theme-menu-v12 .theme-option-icon {
  color: rgba(243,243,240,.92) !important;
  border-color: rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.045) !important;
  opacity: 1 !important;
}

/* Active red dot in dropdown — keep it infrared */
body.theme-night .theme-menu-v12 .theme-option.active .theme-option-dot {
  opacity: 1 !important;
  box-shadow:
    0 0 0 4px rgba(227,34,34,.10),
    0 0 16px rgba(227,34,34,.78) !important;
}

/* Archive arrows — slightly brighter so they don't vanish */
body.theme-night .archive-arrow {
  color: rgba(243,243,240,.86) !important;
  opacity: .92 !important;
}

/* Locked archive icon boxes — visible but not gray-filled */
body.theme-night .archive-lock-icon-box,
body.theme-night .archive-omega-icon {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: var(--red) !important;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.035),
    0 0 12px rgba(227,34,34,.06) !important;
  opacity: 1 !important;
}

/* Lock SVG itself — crisp red */
body.theme-night .archive-lock-icon-box .cm-lock-icon {
  color: var(--red) !important;
  stroke: currentColor !important;
  opacity: .95 !important;
}

/* Omega symbol — readable but still premium */
body.theme-night .archive-omega-icon {
  color: rgba(243,243,240,.92) !important;
}

/* Back button / close button micro borders */
body.theme-night .back-home,
body.theme-night .close {
  border-color: rgba(255,255,255,.20) !important;
  color: rgba(243,243,240,.90) !important;
}

/* Keep hover states alive without making the whole UI gray */
body.theme-night .archive-card:hover .archive-arrow,
body.theme-night .archive-dossier:hover .archive-arrow,
body.theme-night .theme-menu-v12 .theme-quick-toggle:hover .theme-quick-icon {
  color: var(--red) !important;
  border-color: rgba(227,34,34,.42) !important;
  box-shadow:
    0 0 0 4px rgba(227,34,34,.06),
    0 0 18px rgba(227,34,34,.22) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — NIGHT MODE ICON VISIBILITY POLISH */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — NIGHT MODE HERO RING + TEXT POLISH */

/*
  PURPOSE:
  - Keep the current CMV_23.1 homepage structure.
  - Do NOT rebuild into Homepage-B yet.
  - Make the night-mode CM ring feel darker / more graphite like Homepage-B.
  - Improve readability of “CINEMATIC VISUALS WITH A PULSE.”
*/

/* Make the moving white ring less bright in night mode */
body.theme-night .home .orbit {
  border-color: rgba(243,243,240,.34) !important;
  box-shadow:
    inset 0 0 46px rgba(0,0,0,.62),
    0 0 34px rgba(255,255,255,.035) !important;
  opacity: .82 !important;
}

/* Darken the inner globe so it feels more like black/graphite glass */
body.theme-night .home .globe {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.30), rgba(80,80,78,.34) 28%, rgba(10,10,10,.76) 68%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.025) 35px),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,255,255,.022) 35px) !important;
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.72),
    inset 0 0 32px rgba(255,255,255,.045) !important;
  opacity: .86 !important;
}

/* Reduce the gray continent blobs slightly so they do not muddy the CM letters */
body.theme-night .home .continent {
  background: rgba(255,255,255,.10) !important;
  opacity: .65 !important;
}

/* Keep CM strong but less blown-out */
body.theme-night .home .letters {
  color: rgba(255,255,255,.92) !important;
  text-shadow:
    0 18px 36px rgba(0,0,0,.58),
    0 0 18px rgba(255,255,255,.08) !important;
}

/* Make the subtitle readable without overpowering the logo */
body.theme-night .hero-title p {
  color: rgba(243,243,240,.68) !important;
  text-shadow: 0 0 12px rgba(0,0,0,.55) !important;
}

body.theme-night .hero-title p span {
  color: var(--red) !important;
  text-shadow: 0 0 12px rgba(227,34,34,.28) !important;
}

/* “FULL EXPERIENCE LOADING” should remain subtle but readable */
body.theme-night .coming-soon-copy {
  color: rgba(243,243,240,.48) !important;
}

/* Make the dotted outer rings more like a system overlay, less white */
body.theme-night .home .rings,
body.theme-night .home .rings::after {
  border-color: rgba(255,255,255,.10) !important;
  opacity: .58 !important;
}

/* Keep speedlines subtle in night mode */
body.theme-night .home .speedlines {
  opacity: .26 !important;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 14px,
    rgba(255,255,255,.035) 15px,
    transparent 16px 28px
  ) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — NIGHT MODE HERO RING + TEXT POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — NIGHT MODE MINI LOGO READABILITY POLISH */

/*
  PURPOSE:
  Keep the top-left CM logo dark and premium,
  but make the CM letters readable in night mode.
*/

body.theme-night .mini-logo {
  color: rgba(243,243,240,.72) !important;
  border-color: rgba(255,255,255,.24) !important;
  background: radial-gradient(circle at 38% 34%, rgba(255,255,255,.14), rgba(255,255,255,.035) 42%, rgba(0,0,0,.38) 100%) !important;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.055),
    0 0 18px rgba(255,255,255,.045) !important;
  opacity: 1 !important;
}

body.theme-night .mini-logo:hover {
  color: rgba(255,255,255,.88) !important;
  border-color: rgba(227,34,34,.42) !important;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.07),
    0 0 20px rgba(227,34,34,.16) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — NIGHT MODE MINI LOGO READABILITY POLISH */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.1 — NIGHT MODE VIEW TOGGLE BLACK CONTRAST FINAL */

/*
  PURPOSE:
  Only darken the LIST / GRID / LARGE / XL box in night mode.
  Keep SYSTEM ONLINE, MODE, hero, sidebar, and everything else unchanged.
*/

body.theme-night .archive-header .archive-side-controls-v12 .archive-view-toggle-v12 {
  background: rgba(0,0,0,.58) !important;
  background-color: rgba(0,0,0,.58) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.025),
    0 0 18px rgba(0,0,0,.26) !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-view-toggle-v12 .view-btn {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(243,243,240,.88) !important;
  border-right-color: rgba(255,255,255,.10) !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-view-toggle-v12 .view-btn.active {
  background: rgba(227,34,34,.10) !important;
  background-color: rgba(227,34,34,.10) !important;
  color: var(--red) !important;
}

body.theme-night .archive-header .archive-side-controls-v12 .archive-view-toggle-v12 .view-btn:hover {
  background: rgba(227,34,34,.07) !important;
  color: var(--red) !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.1 — NIGHT MODE VIEW TOGGLE BLACK CONTRAST FINAL */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.2 — ARCHIVE TITLE RED DASH INLINE FIX */

/*
  PURPOSE:
  Move the red dash beside ARCHIVE SYSTEM instead of letting it fall underneath.
  This only affects the Archive page title.
*/

.archive .section-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 26px !important;
  white-space: nowrap !important;
}

.archive .section-title::after {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 2px !important;
  margin-left: 0 !important;
  vertical-align: middle !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.2 — ARCHIVE TITLE RED DASH INLINE FIX */
/* 🟩 GREEN HIGHLIGHT START: CMV_23.2 — PORTFOLIO CARD VISUAL POLISH */

/*
  PURPOSE:
  - Keep CMV_23.2 as a naming/content update.
  - Do NOT make cards clickable yet.
  - Make Portfolio cards feel more cinematic/dossier-like.
  - Match the stronger Archive system without changing layout logic.
*/

.portfolio .soon-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  max-width: 1120px !important;
}

.portfolio .soon-grid div {
  position: relative !important;
  overflow: hidden !important;
  min-height: 230px !important;
  padding: 24px 22px !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  background:
    radial-gradient(circle at 52% 35%, rgba(255,255,255,.18), transparent 22%),
    linear-gradient(180deg, #050505, #171717 58%, #070707) !important;
  color: #f3f3f0 !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.12) !important;
}

.portfolio .soon-grid div::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, transparent 0 28%, rgba(0,0,0,.32) 70%) !important;
  background-size:
    42px 42px,
    42px 42px,
    100% 100% !important;
  opacity: .8 !important;
  pointer-events: none !important;
}

.portfolio .soon-grid div::after {
  position: absolute !important;
  left: 50% !important;
  top: 38% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 28px !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 18px rgba(255,255,255,.18) !important;
}

.portfolio .soon-grid div:nth-child(1)::after {
  content: "✦" !important;
}

.portfolio .soon-grid div:nth-child(2)::after {
  content: "♬" !important;
}

.portfolio .soon-grid div:nth-child(3)::after {
  content: "☼" !important;
}

.portfolio .soon-grid div:nth-child(4)::after {
  content: "◐" !important;
}

.portfolio .soon-grid span,
.portfolio .soon-grid strong,
.portfolio .soon-grid small {
  position: relative !important;
  z-index: 2 !important;
}

.portfolio .soon-grid span {
  color: var(--red) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .38em !important;
}

.portfolio .soon-grid strong {
  color: #f3f3f0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .34em !important;
  line-height: 1.55 !important;
}

.portfolio .soon-grid small {
  color: rgba(243,243,240,.72) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .27em !important;
  line-height: 1.8 !important;
}

.portfolio .soon-grid div:hover {
  transform: translateY(-7px) !important;
  background:
    radial-gradient(circle at 52% 35%, rgba(227,34,34,.20), transparent 24%),
    linear-gradient(180deg, #050505, #191919 58%, #060606) !important;
  border-color: rgba(227,34,34,.42) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.18),
    0 0 26px rgba(227,34,34,.10) !important;
}

/* Night mode: keep cards dark, but make red glow stronger */
body.theme-night .portfolio .soon-grid div {
  border-color: rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 52% 35%, rgba(255,255,255,.12), transparent 22%),
    linear-gradient(180deg, #030303, #121212 58%, #050505) !important;
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.025),
    0 22px 54px rgba(0,0,0,.26) !important;
}

body.theme-night .portfolio .soon-grid div:hover {
  border-color: rgba(227,34,34,.48) !important;
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.025),
    0 26px 70px rgba(0,0,0,.32),
    0 0 28px rgba(227,34,34,.14) !important;
}

/* Mobile/tablet protection */
@media (max-width: 1180px) {
  .portfolio .soon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .portfolio .soon-grid {
    grid-template-columns: 1fr !important;
  }

  .portfolio .soon-grid div {
    min-height: 190px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_23.2 — PORTFOLIO CARD VISUAL POLISH */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.3 — PORTFOLIO VIEW TOGGLE SYSTEM */

/*
  PURPOSE:
  - Add Portfolio TILE / WIDE view modes.
  - Keep TILE as the default CMV_23.2 cinematic card layout.
  - Add WIDE as a cleaner, older-style layout.
  - Do NOT make Portfolio cards clickable yet.
  - Do NOT affect Archive LIST / GRID / LARGE / XL.
*/

/* Tighten Portfolio intro spacing once controls are added */
.portfolio .soon-panel .portfolio-copy {
  margin-bottom: 24px !important;
}

/* Portfolio view control row */
.portfolio-view-controls-v23 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 28px;
  color: #111;
}

.portfolio-view-controls-v23 > span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .38em;
  color: #111;
  white-space: nowrap;
}

.portfolio-view-toggle {
  display: flex;
  gap: 0;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.42);
}

.portfolio-view-btn {
  border: none;
  border-right: 1px solid rgba(0,0,0,.08);
  background: transparent;
  color: #111;
  padding: 11px 18px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .30em;
  cursor: pointer;
  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.portfolio-view-btn:last-child {
  border-right: none;
}

.portfolio-view-btn.active,
.portfolio-view-btn:hover {
  color: var(--red);
  background: rgba(227,34,34,.065);
}

/* TILE VIEW — keep approved CMV_23.2 card direction */
.portfolio .soon-grid.portfolio-view-tile {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  max-width: 1120px !important;
}

/* WIDE VIEW — cleaner, calmer, older-layout-inspired option */
.portfolio .soon-grid.portfolio-view-wide {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  max-width: 1120px !important;
}

.portfolio .soon-grid.portfolio-view-wide div {
  min-height: 112px !important;
  padding: 22px 30px 22px 132px !important;
  display: grid !important;
  grid-template-columns: 90px minmax(250px, 1fr) minmax(260px, 1fr) !important;
  align-items: center !important;
  column-gap: 28px !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(255,255,255,.12), transparent 16%),
    linear-gradient(180deg, #050505, #141414 58%, #060606) !important;
}

/* Move the icons left in WIDE mode */
.portfolio .soon-grid.portfolio-view-wide div::after {
  left: 64px !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 24px !important;
  opacity: .92 !important;
}

/* WIDE view typography layout */
.portfolio .soon-grid.portfolio-view-wide span {
  grid-column: 1 !important;
  align-self: center !important;
}

.portfolio .soon-grid.portfolio-view-wide strong {
  grid-column: 2 !important;
  align-self: center !important;
  font-size: 14px !important;
  letter-spacing: .36em !important;
}

.portfolio .soon-grid.portfolio-view-wide small {
  grid-column: 3 !important;
  align-self: center !important;
  color: rgba(243,243,240,.64) !important;
  font-size: 8px !important;
  letter-spacing: .28em !important;
  line-height: 1.7 !important;
}

/* WIDE hover should feel premium but less dramatic than TILE */
.portfolio .soon-grid.portfolio-view-wide div:hover {
  transform: translateX(7px) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(227,34,34,.18), transparent 18%),
    linear-gradient(180deg, #050505, #161616 58%, #060606) !important;
  border-color: rgba(227,34,34,.40) !important;
}

/* Night mode controls */
body.theme-night .portfolio-view-controls-v23 > span {
  color: rgba(243,243,240,.86);
}

body.theme-night .portfolio-view-toggle {
  background: rgba(0,0,0,.58);
  border-color: rgba(255,255,255,.15);
}

body.theme-night .portfolio-view-btn {
  color: rgba(243,243,240,.82);
  border-right-color: rgba(255,255,255,.10);
}

body.theme-night .portfolio-view-btn.active,
body.theme-night .portfolio-view-btn:hover {
  color: var(--red);
  background: rgba(227,34,34,.11);
}

/* Night mode WIDE */
body.theme-night .portfolio .soon-grid.portfolio-view-wide div {
  border-color: rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(255,255,255,.10), transparent 16%),
    linear-gradient(180deg, #030303, #111 58%, #050505) !important;
}

body.theme-night .portfolio .soon-grid.portfolio-view-wide div:hover {
  border-color: rgba(227,34,34,.46) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(227,34,34,.18), transparent 18%),
    linear-gradient(180deg, #030303, #131313 58%, #050505) !important;
}

/* Tablet protection */
@media (max-width: 1180px) {
  .portfolio .soon-grid.portfolio-view-tile {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .portfolio .soon-grid.portfolio-view-wide div {
    grid-template-columns: 70px 1fr !important;
    padding-left: 112px !important;
  }

  .portfolio .soon-grid.portfolio-view-wide small {
    grid-column: 2 !important;
    margin-top: 10px !important;
  }
}

/* Mobile protection */
@media (max-width: 768px) {
  .portfolio-view-controls-v23 {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .portfolio-view-toggle {
    width: 100%;
  }

  .portfolio-view-btn {
    flex: 1;
    padding: 11px 12px;
    font-size: 7px;
    letter-spacing: .22em;
  }

  .portfolio .soon-grid.portfolio-view-tile,
  .portfolio .soon-grid.portfolio-view-wide {
    grid-template-columns: 1fr !important;
  }

  .portfolio .soon-grid.portfolio-view-wide div {
    min-height: 170px !important;
    padding: 26px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  .portfolio .soon-grid.portfolio-view-wide div::after {
    left: 50% !important;
    top: 42% !important;
    font-size: 24px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_23.3 — PORTFOLIO VIEW TOGGLE SYSTEM */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.3 — PORTFOLIO VIEW CONTROL CENTER ALIGNMENT */

/*
  PURPOSE:
  Center the PORTFOLIO VIEW / TILE / WIDE control group
  so it feels balanced above the Portfolio cards.
  This does not affect Archive controls.
*/

.portfolio-view-controls-v23 {
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.portfolio-view-controls-v23 > span {
  text-align: center !important;
}

.portfolio-view-toggle {
  justify-content: center !important;
}

.portfolio-view-btn {
  min-width: 78px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

/* Mobile: keep it centered but stacked cleanly */
@media (max-width: 768px) {
  .portfolio-view-controls-v23 {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .portfolio-view-toggle {
    width: min(100%, 260px) !important;
    margin: 0 auto !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_23.3 — PORTFOLIO VIEW CONTROL CENTER ALIGNMENT */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.3 — PORTFOLIO TILE CARD TEXT CENTER ALIGNMENT */

/*
  PURPOSE:
  Center the main Portfolio card words:
  NYE DOSSIER / KINETIC STAGE / DAYLIGHT MOTION / NIGHT LUXE.

  Keep the red archive numbers in their current position.
  Only affects TILE view.
*/

.portfolio .soon-grid.portfolio-view-tile strong {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  align-self: center !important;
}

.portfolio .soon-grid.portfolio-view-tile small {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  align-self: center !important;
}

/* Keep the red numbers untouched / dossier-style */
.portfolio .soon-grid.portfolio-view-tile span {
  align-self: flex-start !important;
  text-align: left !important;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.3 — PORTFOLIO TILE CARD TEXT CENTER ALIGNMENT */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.4 — CLICKABLE COMING SOON CARDS + MODAL */

/*
  PURPOSE:
  - Make Portfolio cards clickable.
  - Make Services cards clickable.
  - Add one shared Coming Soon modal.
  - Keep Archive modal completely separate.
  - Preserve Portfolio TILE / WIDE behavior.
*/

/* Make button cards inherit the existing card design */
.soon-grid > .coming-soon-card,
.info-grid > .coming-soon-card {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.36);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.soon-grid > .coming-soon-card {
  min-height: 160px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.info-grid > .coming-soon-card {
  min-height: 160px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.soon-grid > .coming-soon-card:hover,
.info-grid > .coming-soon-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,.62);
  border-color: rgba(227,34,34,.35);
  box-shadow: 0 22px 60px rgba(0,0,0,.09);
}

.soon-grid > .coming-soon-card:focus-visible,
.info-grid > .coming-soon-card:focus-visible {
  outline: 1px solid rgba(227,34,34,.75);
  outline-offset: 4px;
}

/* Preserve text styling inside button cards */
.coming-soon-card span {
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .42em;
}

.coming-soon-card strong {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .38em;
}

.coming-soon-card small {
  color: #777;
  font-size: 9px;
  letter-spacing: .4em;
}

/* Shared modal */
.coming-soon-modal-v234 {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .42s ease, visibility .42s ease;
}

.coming-soon-modal-v234.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.coming-soon-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(245,245,242,.78);
  backdrop-filter: blur(18px);
}

.coming-soon-panel {
  position: relative;
  z-index: 2;
  width: min(860px, 82vw);
  min-height: 520px;
  padding: 42px;
  border: 1px solid rgba(0,0,0,.12);
  background:
    radial-gradient(circle at 72% 38%, rgba(227,34,34,.10), transparent 28%),
    rgba(248,248,245,.86);
  box-shadow: 0 34px 100px rgba(0,0,0,.18);
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-areas:
    "meta preview"
    "copy preview"
    "status preview";
  gap: 24px 38px;
  align-items: start;
}

.coming-soon-close {
  position: absolute;
  right: 24px;
  top: 22px;
  border: none;
  background: transparent;
  color: #111;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .38em;
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
}

.coming-soon-close:hover {
  color: var(--red);
  transform: translateX(-3px);
}

#comingSoonKicker {
  grid-area: meta;
  align-self: start;
  color: var(--red);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .44em;
}

#comingSoonTitle {
  grid-area: meta;
  margin-top: 34px;
  color: #111;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 500;
  letter-spacing: .42em;
  line-height: 1.35;
}

#comingSoonMeta {
  grid-area: meta;
  margin-top: 118px;
  color: #666;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .34em;
  line-height: 2;
}

.coming-soon-copy-panel {
  grid-area: copy;
  color: #333;
  font-size: 11px;
  line-height: 2.1;
  letter-spacing: .32em;
  max-width: 330px;
}

.coming-soon-preview {
  grid-area: preview;
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.18), transparent 30%),
    linear-gradient(135deg, #050505, #202020 60%, #070707);
  box-shadow: var(--shadow);
}

.coming-soon-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent, rgba(0,0,0,.38)),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,.035) 19px);
}

.coming-soon-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(227,34,34,.22), transparent);
  transform: translateX(-110%);
  animation: comingSoonScan 3.8s ease-in-out infinite;
}

.coming-soon-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}

.coming-soon-play span {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 19px solid #fff;
}

.coming-soon-preview-label {
  position: absolute;
  left: 26px;
  bottom: 24px;
  color: rgba(255,255,255,.78);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .42em;
}

.coming-soon-status-row {
  grid-area: status;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.12);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .36em;
}

.coming-soon-status-row span {
  color: #777;
}

.coming-soon-status-row strong {
  color: var(--red);
}

/* Night mode */
body.theme-night .soon-grid > .coming-soon-card,
body.theme-night .info-grid > .coming-soon-card {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
  color: #f3f3f0;
}

body.theme-night .soon-grid > .coming-soon-card:hover,
body.theme-night .info-grid > .coming-soon-card:hover {
  background: rgba(255,255,255,.075);
  border-color: rgba(227,34,34,.42);
}

body.theme-night .coming-soon-modal-backdrop {
  background: rgba(5,5,5,.84);
}

body.theme-night .coming-soon-panel {
  background:
    radial-gradient(circle at 72% 38%, rgba(227,34,34,.13), transparent 28%),
    rgba(10,10,10,.88);
  border-color: rgba(255,255,255,.14);
}

body.theme-night .coming-soon-close,
body.theme-night #comingSoonTitle {
  color: #f3f3f0;
}

body.theme-night #comingSoonMeta,
body.theme-night .coming-soon-copy-panel {
  color: #b9b9b4;
}

body.theme-night .coming-soon-status-row {
  border-top-color: rgba(255,255,255,.14);
}

/* Mobile */
@media (max-width: 768px) {
  .coming-soon-panel {
    width: calc(100vw - 154px);
    min-height: auto;
    margin-left: 132px;
    padding: 34px 24px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "preview"
      "copy"
      "status";
    gap: 24px;
  }

  #comingSoonTitle {
    margin-top: 30px;
    font-size: 24px;
    letter-spacing: .28em;
  }

  #comingSoonMeta {
    margin-top: 100px;
    font-size: 8px;
    letter-spacing: .22em;
  }

  .coming-soon-copy-panel {
    max-width: none;
    font-size: 8px;
    letter-spacing: .22em;
  }

  .coming-soon-preview {
    min-height: 230px;
  }

  .coming-soon-status-row {
    display: grid;
    gap: 10px;
    font-size: 8px;
    letter-spacing: .24em;
  }
}

@media (max-width: 390px) {
  .coming-soon-panel {
    width: calc(100vw - 144px);
    margin-left: 126px;
  }
}

@keyframes comingSoonScan {
  0%, 100% {
    transform: translateX(-110%);
    opacity: 0;
  }

  35% {
    opacity: .9;
  }

  65% {
    transform: translateX(110%);
    opacity: 0;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_23.4 — CLICKABLE COMING SOON CARDS + MODAL */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.4.3 — RESTORE DARK PORTFOLIO CARD STYLE */

/*
  PURPOSE:
  Restore the approved CMV_23.3 dark Portfolio TILE/WIDE card look
  after converting Portfolio cards from divs into clickable buttons.

  This only targets Portfolio cards.
  Services cards stay light/minimal.
  Archive modal and Archive 005 are untouched.
*/

/* TILE VIEW — clickable Portfolio buttons should look like the approved 23.3 dark cards */
.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 230px !important;
  padding: 24px 22px !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  background:
    radial-gradient(circle at 52% 35%, rgba(255,255,255,.18), transparent 22%),
    linear-gradient(180deg, #050505, #171717 58%, #070707) !important;
  color: #f3f3f0 !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.12) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-align: left !important;
}

/* Grid overlay */
.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, transparent 0 28%, rgba(0,0,0,.32) 70%) !important;
  background-size:
    42px 42px,
    42px 42px,
    100% 100% !important;
  opacity: .8 !important;
  pointer-events: none !important;
}

/* Portfolio icon layer */
.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card::after {
  position: absolute !important;
  left: 50% !important;
  top: 38% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 28px !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 18px rgba(255,255,255,.18) !important;
}

.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card:nth-child(1)::after {
  content: "✦" !important;
}

.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card:nth-child(2)::after {
  content: "♬" !important;
}

.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card:nth-child(3)::after {
  content: "☼" !important;
}

.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card:nth-child(4)::after {
  content: "◐" !important;
}

/* Keep text above overlay */
.portfolio .soon-grid > .coming-soon-card span,
.portfolio .soon-grid > .coming-soon-card strong,
.portfolio .soon-grid > .coming-soon-card small {
  position: relative !important;
  z-index: 2 !important;
}

.portfolio .soon-grid > .coming-soon-card span {
  color: var(--red) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .38em !important;
}

.portfolio .soon-grid > .coming-soon-card strong {
  color: #f3f3f0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .34em !important;
  line-height: 1.55 !important;
}

.portfolio .soon-grid > .coming-soon-card small {
  color: rgba(243,243,240,.72) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .27em !important;
  line-height: 1.8 !important;
}

.portfolio .soon-grid.portfolio-view-tile > .coming-soon-card:hover {
  transform: translateY(-7px) !important;
  background:
    radial-gradient(circle at 52% 35%, rgba(227,34,34,.20), transparent 24%),
    linear-gradient(180deg, #050505, #191919 58%, #060606) !important;
  border-color: rgba(227,34,34,.42) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.18),
    0 0 26px rgba(227,34,34,.10) !important;
}

/* WIDE VIEW — make clickable buttons obey the existing wide layout */
.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 112px !important;
  padding: 22px 30px 22px 132px !important;
  display: grid !important;
  grid-template-columns: 90px minmax(250px, 1fr) minmax(260px, 1fr) !important;
  align-items: center !important;
  column-gap: 28px !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(255,255,255,.12), transparent 16%),
    linear-gradient(180deg, #050505, #141414 58%, #060606) !important;
  color: #f3f3f0 !important;
  text-align: left !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card::after {
  position: absolute !important;
  left: 64px !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 24px !important;
  opacity: .92 !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card:nth-child(1)::after {
  content: "✦" !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card:nth-child(2)::after {
  content: "♬" !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card:nth-child(3)::after {
  content: "☼" !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card:nth-child(4)::after {
  content: "◐" !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card span {
  grid-column: 1 !important;
  align-self: center !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card strong {
  grid-column: 2 !important;
  align-self: center !important;
}

.portfolio .soon-grid.portfolio-view-wide > .coming-soon-card small {
  grid-column: 3 !important;
  align-self: center !important;
}

/* Night mode protection */
body.theme-night .portfolio .soon-grid.portfolio-view-tile > .coming-soon-card,
body.theme-night .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card {
  border-color: rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 52% 35%, rgba(255,255,255,.12), transparent 22%),
    linear-gradient(180deg, #030303, #121212 58%, #050505) !important;
}

/* Mobile/tablet protection */
@media (max-width: 1180px) {
  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card {
    grid-template-columns: 70px 1fr !important;
    padding-left: 112px !important;
  }

  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card small {
    grid-column: 2 !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 768px) {
  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card {
    min-height: 170px !important;
    padding: 26px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  .portfolio .soon-grid.portfolio-view-wide > .coming-soon-card::after {
    left: 50% !important;
    top: 42% !important;
    font-size: 24px !important;
  }
}

/* 🟥 RED HIGHLIGHT END: CMV_23.4.3 — RESTORE DARK PORTFOLIO CARD STYLE */

/* 🟩 GREEN HIGHLIGHT START: CMV_23.4.4 — HIDE ARCHIVE 005 CIPHER PREVIEW */

/*
  PURPOSE:
  Hide the visible MADAM / ALULA / DUGUD cipher puzzle for now.

  Archive 005 should look like the other archive video preview screens.
  The cipher code stays in the file for CMV_24, but it is not displayed yet.
*/

/* Force Archive 005 to show the normal preview screen instead of the cipher */
.archive-video-frame-v14p2.is-archive-005 .archive-dynamic-preview {
  display: grid !important;
}

/* Hide the actual puzzle/cipher interface */
.archive-video-frame-v14p2.is-archive-005 .palindrome-cipher,
.palindrome-cipher {
  display: none !important;
}

/* Give Archive 005 its own sealed-preview look */
.archive-video-frame-v14p2.archive-visual-005 .archive-preview-art {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 46px),
    radial-gradient(circle at 50% 50%, rgba(227,34,34,.18), transparent 24%),
    linear-gradient(135deg, #050505, #191919 58%, #070707) !important;
}

.archive-video-frame-v14p2.archive-visual-005 .archive-preview-art::before {
  content: "CIPHER SEALED";
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 5;
  color: rgba(255,255,255,.52);
  border: 1px solid rgba(255,255,255,.20);
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .34em;
}

.archive-video-frame-v14p2.archive-visual-005 .archive-preview-play {
  opacity: .7;
}

/* 🟥 RED HIGHLIGHT END: CMV_23.4.4 — HIDE ARCHIVE 005 CIPHER PREVIEW */